HTML Tutorial: What Is HTML? | Create Web Page Using HTML | Learn HTML in 20 Minutes

Are you the onewho is planning to step into web developmentand don't know where and how to start. So here's an introductoryweb development session for you guys, mainlyfocused on What is HTML. So Good morning, Good afternoon and good evening Ladies and gentlemen, my name is Atul and onthe behalf of Edureka, I welcome you guys to this YouTube sessionon what is HTML? Well, roughly you can understand that HTML for a web developmentis almost the same as what a bone is to your body.HTML is the one which defines the core structureof your web page or your website. 

Learn HTML in 20 Minutes

So I don't think that I should be telling youthat is the very first thing that you must learnbefore drilling down to web development and creatingyour first web page or website. But before weproceed any further and learn more about HTML, let's have a quick look attoday's agenda for this session. 

Movies are Magic: Crash Course Film History

So I'll start this session by giving you a fairunderstanding of what is HTML and we'll also discussabout the myths or the misconceptionsrelated to HTML which I guess mostof you have in your mind. Once I'm done with it, I'll tell you abouthow web pages and websites are designed and we'reHTML CSS and JavaScript which themselves into it. Okay. Now once you guysare comfortable with this part, then we'll move ahead and learn about how youcan write your first HTML codes to create a verybasic webpage in this part. I'll tell you aboutvarious tags and attribute which you will use to createand structure your webpage. All right, once done with it in the next partof HTML implementation. I'll show you how Ed Eureka WordPress blogsuses HTML and what happen if you change anyof the tag, all right, and finally we'll endour session with some FAQs and doubt which I have comeacross from different Learners. I hope the agenda isclear to you guys, okay? So let's startwith what is HTML. 

Well HTML is a markup language which was developed byTim Berners-Lee to create the electronic documentwhich most of you referred to as Pages or web pages. Let me just expandthe letter of HTML for a better understanding. Well the vote HTML standsfor hypertext markup language. Hypertext is a methodby which you can move around the web by clickingon special text call hyperlinks, which brings youto the next page. Well the fact that it is hyper. It just means that it is not linear that is you can goto any place on the internet whenever you want justby clicking on the links. All right. 

Next comes the M part and standsfor markup will markup is what HTML tags due to the textinside them they mark it as a certain type of textlike italicize text or bold text or anything. So basically the mark-up dealswith structuring your web page in a specific format. All right. So HTML is calledhypertext markup language because it is a language that allows the userto improve the appearance. Solve and Link textwith the data on the internet. I hope now you guys havea fair idea of what is HTML. So how many of youare planning to add it under the section of programming language you know yet since most of you so HTML isa programming language. 

Is this what youhave been thinking till now? Well, I'm sorry to tell youguys but all of you who thought that it's a programming languageare wrong HTML is definitely a language but it's nota programming language generally a programming language isthe one which allows you to describe some sort of processof doing something right? Whereas on the other hand HTMLis a way of adding context and structure to the text. Always remember HTML isnot a programming language. It's a hypertextmarkup language. So from next time when you are preparing a CVdon't add HTML and and section of programming language known Ihope now all of us agree to it and on the same page. Okay, so let's move ahead and let me show youguys some of the application of HTML which you guys comeacross in a day to day life. Let me just open some website. W dot amazon.com. Okay. 

So this is how the first pageof Amazon looks like the visual which is C is a combinationof HTML and CSS. Let me show you the skeleton ofthis webpage or let me show you how the page would look if I remove allthese styles from it. Let me just move itdisable all styles. Okay done. So there's how your amazon.com would look like if I removeall these styles from it. So there is a raw HTMLversion of amazon.com. I like so let's come back to our discussiongenerally the website which you see is a collectionof multiple web pages, which is madeusing the combination of HTML CSS and JavaScript. The skeleton of the pageis made using HTML. The designing part is addedusing the CSS and finally JavaScript is used to makeyour website more interactive. I hope now you guys havea basic idea of what HTML is and where does that fitinto the webpage or website development? So I guess we can move ahead and discuss abouthow does it work? So inside this will bediscussing about HTML tags. So let's move ahead and seewhat's in it. So here's an exampleof basic HTML code. 

Well, I have written this codein my notepad plus plus but you guys can writedown a note pad or even you can use IDslike Adam more brackets. Well, as you can seethese shortcodes over here, these are known as tags. These words between angularbracket are known as HTML tags. Okay, they're used to label pieces of contentsuch as heading paragraph or even it allowssome other cool stuff like adding a majors and table to your web pageor to tell your browser what to render on the page and what not obviously differenttags perform different function. Don't worry. We'll discuss about themin detail in our next video on HTML tutorialfor now just understand that HTML tags normally comesand pair like p + /p okay. The first tagin the pair is a start tag and the second tagis the end tag, the only differencebetween the end tag and start tag isthe forward slash symbol. 

It's like the end. I guess is written justlike the start tag, but only the forwardslash symbol is inserted before the targeting. Okay fine. So now that you know,what an HTML tag is, let's see whether you can understandthis simple HTML code or not. Let me discuss each linethe code one by one so starting with exclamationmark doctype HTML. So what does this mean? Well, if you arementioning this tag, it means that you are definingyour document to be of HTML5 or in other words. You are going touse HTML5 version. Okay. The next line isor the next tag is HTML tag, as you can see, there isno forward slash symbol. So it is a opening tag. So our next tag is HTML. This is the root elementof the HTML page this tag specifies thatfrom here the page starts. Okay. Next comes the body taginside this body tag. We specify all the visiblecontent on the page. We specify allthe visible page content. Okay. Next comes the H1 tagH1 tag is a header tag and is used to define a Hurting. All right, there aremultiple header tags like H1 H2 H3 H4 and so on. Alright, so as you can see, I have closed my H1 tagwith /h one. This means that my firstheader or headline. So this thing would be treatedas my first heading. Okay. Next comes the P tag the P defines a paragraphSo after headline what you do youguys just go ahead and write the paragraphinside it right so below each onecomes the P tag. Well, it's not necessary. But generally the paragraphcomes after the header. Okay. So whatever you have to writeinside the paragraph just mention it within the startand end tag of the paragraph. 

Okay, then finally what we did we closethe body tag and the HTML tag. Okay. Let me just write this codeand my notepad and show you how does it actually work? Let me just open my Notepad plus plus So let's createa new file saw starting tax. And so I am writingthe HTML5 code. So my first tag would beexclamation mark doctype HTML. All right. Next what I want to do. I want to define a HTML tag next would be a body taginside that will Define. What are thevisible page content? Alright. So inside bodywhat I will do first, I will Define my first header. So let's define H1 header. So inside that I'llmention like this is my first headline I like and I'll close the start by /h one done afterspecifying my headline. I'll write some Parisunder so let's define our paragraph starting tagline. This is my first paragraphLet's close this as well /p let's close the body andlet's close the HTML. 

And done. So now that you have writtenyour HTML code your next step would be to save your codewith extension of dot HTML. So let's click on Save insteadof normal text file select dot HTML hypertextmarkup language file and side that just rename the folder. I'll rename it tolike Basic dot HTML and I'll save it fine. So now when you'll goback to save location and open the basicdot HTML file see that your file opens into your default browser. But as you can see here, the browser is onlyshowing the content without their respective tags. There is no tag like H1 tagor P tag in it, right? You're just seeingthe content over here. So these browserdo not display the HTML tags, but what it does itreads the file and translates the textinto a visible form there by using them to renderthe content of the page. 

All right. Well, if you are practicing italong let me just congratulate you on creatingyour very first web page. Yeah, guys. You heard me right? This is your web page. Let me just show youthe very first web page that was ever created. Let's search for itfirst page ever created. So as you can seeother Google found me this the first web page wentlive on August 6 1991. It was dedicated to informationon World Wide Web project that was made byTim berners-lee it ran on the NEX T computer arethe European Organization for nuclear research at CER. The first web page addresswas I guess this let's see if it still works or not. Cool. So this webpageis still working. 

Can you see how basicthis web page as well? This was a very first web pagethat was ever created. Well, there's a verybasic webpage comparing to what we haveright now currently. If you see the webpageat consists of this type of Animation that typeof Animation SVG image PNG image and many other pluginsand add-ons on the webpage or website, right? So don't worry about that. So once you are done with goingthrough the entire playlist of web development, I can assure you that you would definitelybe able to create a dynamic and interactiveweb page for yourself. Okay for now, let me just comeback to our topic. Let's not deviate from it. So for now let's just focus on what is HTML lateron step by step. We'll move ahead. All right, let's moveahead and see what's next. 

So the next comesHTML tags attribute. So what are theseHTML tag attributes? Well one last thing to knowabout taxes attributes these attributes definedspecial features of a Ugh, if dogs are windows and doors than attribute specifythe specific building detail. This could be the widthand height to the frame or whether the window opensor the door has a lock. It's that kind of attributewhich I'm talking about like well attributesare always included inside the opening tag, like one example is presenton your screen. Well, we are defining here a tagthis a tag is basically used for hyperlink using thisyou can hyperlink your text to any other Link in other words if the user clickon that hyperlink text, you'll be redirectedto another website or any other webpage. 

Whatever you have linked toLet's consider this for example, a space href this.hrefis an attribute name what you're doinghere defining attribute and the value of attribute iswhat triple w dot at Eureka.com. All right. So this entire thing a hrefequals triple w dot Ed, u-- record or Co inside codesthis tag is your opening tag. All right, and what you have mentionedlike href equals Well, w dot Ed u-- a car dot Co this isyour attribute and after that what are you doing herespecifying the text which has to be hyperlinked withtriple w dot Ed u-- Rica.com and finally you'reclosing the tart so once you are done with it and you open thisin your web page, you will see that youwill get a hyperlink text. 

Let me show you the example that would make thingsmore clear to you like er, doc type HTML bodyshould be common. Let me just add a tagover here after that. Let's specify attributename for me. I'll use href you can giveany name to attribute. All right. Next what I will do I'll specifythe attribute value for it for me. It is HTTP colon forward slash triple W Ed Eureka.comclose this okay. So there is like startingtag then finally. What I will do Iwill Define my subject line like click here to learn more. All right, and thenwhat I'll do, I'll close my a tag right? Let's save it. As you can see here. We got a hyperlink text. Click here to learn more. Let's click it. Let's see whetherit is redirecting to the website or not. So yeah, it is definitely redirecting me to Triplew dot ed u re car.com. 

So we have just createda very basic web page with some hyperlinked text on it. Okay. Now that we have coveredabout the basic of HTML in this what is HTML session. Let me just show youthe HTML structure of our blog this will give you the ideaof actual implementation of HTML and industries tocreate a web page. Well, we are dead Eureka. We use web page to write our blogs WordPress isan open source software that you can use to createa beautiful website or blog currently. It is used by more than 60million website including 30.6% of the top ten million website, as of April 2008 e, let me just show youhow we guys are dead. You regard createa blog slash log slash. 

Let's add a new postsad any name like HTML Sick and inside that let mejust write a few lines like this is my first blog. Let's define a headline. Like what is HTML? Let's change it to heading 1. Alright, so as you can see here, we have heading 1heading 2 3 4 5 & 6 so next part would be to define the paragraph Sowhat is HTML HTML is a hyper text markup language that is used to createa web page or a website. Okay done fine. Let me show youhow this looks like. Let's save it. And let's previewthe basic block that we have just created. So there's how your blogwould look like. 

Like this was my headline. What is HTML and under that I Define that HTML ishypertext markup language that is used to createa webpage or website. All right. So what if I want to makethis HTML as bold so let's add tag over herestrong tag strong HTML. That's it. Not the entire sentenceso strong so strong and forward slash strong. So now what do you think? What would be the Bold part? Let's save it any guess anyone. You know, what you will be getting the entirestatement as the Bold. This was the original right? So, can you seethis entire statement changed to bold and why cause you mentioned strongat the starting and the end, so whatever would come under the start and close tagwould be treated as bold. What if I just wantto make HTML bolt? So what I will doI will just Define a closing tag So HTML, okay, and I will removethis closing tag from here and let's save it. 

So currently you can seethat HTML is hypertext markup language thisentire line is volt. Let me just refresh itand show you what the changes which you got. So yeah, so now you can see that only this HTML is volt restother our normal text, right? So this was just oneof the way of adding elements in our blog I like and now let's just move ahead and end our sessionwith some of the effects use and doubt which I have comeacross from different Learners. So the first one is is creatingmy webpage going to take long. We'll remember thefirst HTML code that we wrote in our notepad plus plus and openour default browser. Well, that was also an exampleof a web page it hardly took me a minute, right? So yeah, how long will it taketo create a web page depends on what you want from your web page learning HTML will only takea few days of reading and learning the codefor what you want. 

Don't worry about the basicsin my next video. I'll teach youabout it and I'm sure if you will practice it along you will surely learnit with an r or two. So once you are donewith the basics and you have proper IDof the tags, you can. He starts showcasing a creativity andcreating HTML Pages. All right, fine. So coming to the next question. Do I have to be onlineat all the time while developing my web page? No, not at all. You can code your entirewebsite offline by storing it all on your computer and later than when youget your system connected to the internet justtransfer all this file to the web later in future whenever youhave new content just add that to the existing onlineversion of your site. It's really quite simple rightfine coming the next question. Is it possible to createa website without HTML? Well, the answer is yes aswell as know depending on what you mean by developingwithout HTML or css. 

If you mean that you don't haveany notation of HTML and CSS. So therefore you don't knowhow to code a website. Well, if this was your questionthat don't worry about that, there are plenty of services that allows youto build a website without any knowledge of HTML or css like Squarespacewakes WordPress and But if you mean that ultimatelyyou want a website that has not writtenin HTML and CSS. Well, I'm sorry to tell you but HTML CSS and JavaScriptare the only language that a browser can useto render a website. You can develop a websiteand python PHP or any other language. 

But ultimately whatthose languages do is to create HTML and CSS. All right, you won't findany cases of those language in your final page. Well JavaScript is bit different because it can be usedinside the page to trigger and play Dynamics action, like sending the datafrom a form error or confirmation messages images or content sliders orany other Dynamic interaction. So concluding this I tell that your entire webpage would consist of HTML as the main codeand you can't do without it. All right, you can useCSS to express the style of the elements on the page like color shapes Shadows transition transparencyresponsiveness Etc. And finally JavaScript if you need any servercommunication and dynamic Martin as it clear now. Okay. So thank you guys. This was all for this session. 

See you soon in my next sessionon HTML tutorial for now in case you have any doubtfeel free to add your doubt in the comment section below. Thank you. I hope you have enjoyedlistening to this video. Please be kind enough to like it and you can comment anyof your doubts and queries and we will reply them at the earliest do look outfor more videos in our playlist And subscribe to Edurekachannel to learn more. Happy learning.