Introduction To HTML5 For Absolute Beginners | Godson Thomas | Skillshare

Introduction To HTML5 For Absolute Beginners

Godson Thomas, Full Stack Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (43m)
    • 1. Class Introduction

    • 2. Tools You Need To Have

    • 3. Create An HTML File

    • 4. Headings

    • 5. Paragraphs

    • 6. HTML5 Boilerplate

    • 7. Nest Tags

    • 8. New Line And Horizontal Rule

    • 9. Images

    • 10. Anchor Tags

    • 11. Divs And Spans

    • 12. Lists

    • 13. Tables

    • 14. Forms

    • 15. Radio Buttons

    • 16. Dropdown Lists

    • 17. HTML5 Semantic Tags

    • 18. Audio

    • 19. Video

    • 20. Conclusion

15 students are watching this class

About This Class

Hi, welcome to this crash course on HTML5 for complete beginners. In this class, you will learn everything you need to know about getting started with web development.


The first step in becoming a web developer is learning HTML. The latest version of HTML is HTML5 and I will walk you through everything you need to know to get started with it.

HTML is based on tags. You write HTML content inside tags. Tags tell the browser how to display the content on the screen. HTML is not a programming language because it doesn't have any logic (conditionals or loops). It is a markup language.

You can think of HTML as a skeleton for your website. After writing the markup (skeleton) for your website, you can style your website using CSS to make it look the way you want it to look.

I hope this crash course will help you get started with web development.

Happy coding.


1. Class Introduction: Hi. Welcome to this crash course on estimate. In this course, you will learn everything you need to know. Toe right. The market off website now estimate is called a markup language. It is not a programming language because we cannot write any logical statements in it. We cannot write if statements we cannot write loops. It just tells the browser to display what you have written. An estimate. Toe the screen so you want to display a heading in your weapons. You can use attack called It's one, or it's too through at six. And if you want to use an image, you can use attack called I M. G. So basically estimate contains tax. We still the browser to display the contents in a specific way. So if you're planning to become a Web developer, the first thing you need to know is estimate. Because everything you see on a website is basically estimate relentless off what framework or programming language used to generate it. So the first thing is to learn estimate and then you can start learning CS is and then jealous script and then continue the journey from there. So I hope that this course will give you a better understanding off estimates. So let's get started 2. Tools You Need To Have: so to write, estimate unity have two things. One is a cold editor and the other is a browser. You already have a brother in our computer, but make sure that you install Chrome or Firefox, which is mostly recommended for Web development, and try to install the latest version off these browsers. Now, once he had the latest browser, you need to have a code editor to write your estimable content. There are a lot of court editors like V s Code sublime text brackets, Adam, and so on in this video will be using visual studio code. So just obvious code in Google and ah, go to this first link over here called dot wishes to d'oh dot com and just click on download and install for your system. 3. Create An HTML File: Now, let's see how to create an estimate file. So here in my e drive, I have a folder called Estimate Crash. Course you can name it anything you want. So I just rightly over here and click on open with code. Now, here, you can see our estimate. Crash scores folder is opened in RVs code and ah, we can go ahead and create our estimate files over here. So to create an estimate file, just go over here and click on new file. Or you can also go to file and click on new file. And then you can name it. Anything you want about the file extension should be estimate. So we just named the file index dot html index. That estimate is a specific filing which is used by most Web servers. Toby displayed as the homepage of her website. Now let's type something over here the time hello from index start estimable and stabler file. Now, if you go toe the folder, we can see that we have an estimate file and it has this browser icon. And if you go ahead and open this, we see that it opens in a browser and we have this text over here. So this is how you create and display an estimate file. Now, if we make some changes over here like, for example, will change this to hello world. And when we stayed with, we cannot see the genius over here right way have to refresh our browser. So let's refresh your page. And here we can see the changes. 4. Headings: Now, let's start exploring tags. Inestimable. So just delete this. And first of all, we'll take a look at attack called Heading. So we have headings from one through six. So to create a heading, you have to type less than X one and greater than and then you have this closing tax over here. So what are you type inside this edge? One tank will be treated as a heading so religious type heading one over here. And if it saved this, and if you refresh your page, we can see that we have this heading one displayed over here. Now we have two types off tags in estimate. The 1st 1 is a container attack like this. Each one over here. So when we have a container attack, we'll have the tag in angle brackets, and then we close attack by typing less than forward slash and the name of the tag and, uh, greater than So. This is how you write a container tag for a self closing tag. You don't have to have the second part over here. Just you can close it right here. So add a forward slash over here. And this is how a self closing bag is written, so we have heading tags ranging from its 12 at six. So let's just copy this a few more times, and we'll just change this to s to, and we'll change it in the ending as well, and will also change the content and will changes to its too. And now, if we refresh our page, we can see we have the heading one. And then we have the heading to, which is a bit smaller. So let's change all these headings. All right? Now, if we refresh our page here, we can see all the headings ranging from each 12 at six. So this is how you ride heading tags in estimate. 5. Paragraphs: now the next time we look at is called the paragraph time. So when were you want to write a paragraph? You can use this paragraph tax to create a paragraph dagger type less than be greater than and it is also a container attack. So you need to have this closing bag over here so we can type something over here like this is a paragraph. And if I refresh the speech, you can see this is a paragraph printed over here. So let's create a couple of paragraphs and see how it looks so envious. Go. Do you have this option off printing some laura maps and text. So if you want to print some place although text you can just tap lore, um and ah and then type the number of characters you want. So let's say 100. And if I present Tab, we see this huge paragraph displayed over here, and we'll just copy this and we based it a couple more times. And if I refresh my page, we can see these three paragraphs are displayed over here. So this is how you write a paragraph tag. Inestimable. 6. HTML5 Boilerplate: And now we create a basic estimate five structure for our rip it. So the first line in an estimate five document should be doc type estimate. So we have to type less than exclamation doc type and then type estimate over here. So this test the browser that this is an estimate five document and everything right inside . An estimate should be inside the estimate attack. It is also a container tanks soldiers type. It's Tim Ill. And we have disclosing bag over here. And then we have two sections inside. Estimable one is the health section, and the other is the body section. So that head over here it is also a continent tag. And then we have a body section. So with that body over here and what we type inside the body section will be displayed over here on our brother. And this head section is for the metal leader. So, for example, if you type title, which is a tag used to display some text on this brother type so here, if it time learning STM ill. And if I save this and if I refresh my page, notice this ah estimate out index text over here. And if I refresh, we can see it changes toe learning estimate. So in this way you can change the title of your website. We have a lot of tags which, again used inside the head section, will just add one more attack, which is called meta. And in attacks, we can also have attributes. So we'll set an attribute toe this meta tag. The attribute is called car sit, and they will send it to you. Do you have it? And this is a self closing tax. We can just close it right here. Now what are you type inside? The body section will be displayed on your browser. So just type heading over here. So each one and we'll wrap introduction. So if you refresh our page, we can see this heading and what? All right inside the head section will not be displayed or were here. It is just the meta information. And what will you type inside? The body section will be displayed on our page now in via school. We had the option off writing this whole estimate five structure quickly. So if you just delete this and, uh, if you press exclamation and press stab We can see we have this whole estimate five structure. So whenever you stand with a new estimate file again, use the shortcut, explanation and tap. So let's just change this title back toe learning as Tim Ill Now, there's one more thing you can do with your score. So if you dive something over here every time we make some changes to our estimate file, we have to refresh our browser. So if we refresh, we can see our changes are displayed on the brother. But if you want automate this task, you have an extension in yes code. So just click on this extensions I going over here and such for live server, and you can find this extension from day just go ahead and install this live server extension. And then what you can do is right. Click on your estimable document and click on open with Live server. And here we can see our file is opened over here. Now, whenever we go over here and make some changes for example, well and a paragraph and when we say or changes in yes, scored, the browser will be automatically refreshed, so this can save you a lot of time 7. Nest Tags: Now, let's go ahead and delete this whole body content from here. So one thing you can do with estimate is you can list one tag inside another. So, for example, if you have a paragraph tag well, just type something over here. So we have this paragraph right here. Let me just zoom it a little. So we have this paragraph right here and let's say we want to make this critical word bold so we can use attack called strong. So just type strong and, uh, and will complete this ending part from here and place it after critical on. Now, if you save our file, we can see that the critical world is now bold. So this is how you next one tag inside another. Now we have a lot of tags for text. So if you just change the strong, tow em for emphasis. And if I save this, you can see it becomes italic. And if I just changed this toe mark for marked because we have this word marked over here in the same way, you also have underlined So for underlying the how to type Ines. So we have this underlined over here now for strike through the other time D e l. We also have tags for superscript and ah subscript So if you type sub over here, over here, we can see it becomes subscript on defeat type s u p it becomes a superscript So these are all the different tags again use with text. 8. New Line And Horizontal Rule: Now, let's see how to write text on a new line. Inestimable. So just delete this from here. And ah, if you just type, this is the first line and this is the second line. And if I say this, we can see everything is displayed on just one line, so estimate doesn't consider line breaks and it doesn't even consider spaces more than one . So if we have a lot of stress is over here, and if I say this file, you can see that it just goes back over here. So even if you have a lot of space is it just reduces toe one space and it doesn't recognize line breaks. So for that, we have a tag inestimable called BR, which is for line break. So this is a self closing time, so we can just type b r and close it right here Now in estimate fire. You don't have toe have, ah forward slash to close a self closing time. You can just type it like this. So now if I save this, we can see it is the first line, and this is the second line. So if you add a couple off more breaks. We can see we have these Lambrecks over here. So this is how you have line breaks in estimate. Now, if you want to have a horizontal line over here, then you can replace this with HR, which is horizontal rule. And if I save this, we can see this horizontal line over here. 9. Images: Now, let's look at how to insert images inside our external files. So let's just delete these two lines of code. And in my project folder, I have copied some images in the I M D folder over here. So this is the I am the folder that I created and have copied to images right here. These are the two images, so we're gonna insert these images inside our estimate. So here we will type I am G. So this is a self closing tack in the I. M. C. A tag unit to use an attribute called SRC Toe. Tell the browser which image to load, so will top SRC equals and here will give the parts of the image. So it is in the I. M. C folder and we will display the first image. So let's click over here. And if I saved this, we can see our images displayed on our browsers. So it has a very large size for now. So let's go ahead and and another attribute called wit, and we'll set it to 100%. And here we can see, our image is 100% off. The brother of it now you should set the height and the width of the image in your CSS file . But right now, since we're not using CSS with, just, uh said of it over here and instead of percentage if you want toe have pixel sizes, you can, uh, enter pixels over here. So if it had be X, it will have a week off 100 pictures. So that's basically how you display images. And we have one more attribute in the I m. G tag that's called out and a here again type some text visually displayed if the image is not loaded for some reason. So here we will type keyboard. Now, just that this source toe some garbage value. And if I save this, we can see that the image is not displayed. But this alternate text is displayed over here. So let's change this back toe image one. Now that's all we need to know about images. So let's And they lived this line off guard 10. Anchor Tags: Now we'll take a look at how toe go from one place to another in external. So for that, first of all, we need to create one more page. So we'll go to our file Explorer and he'll create one more new file and we'll name it about dot STM l And here we will have the basic estimate fiber pret So envious scored just this exclamation and tab. And we said, the title toe about us and in the body hero type about us. And they will also have, ah, place all the paragraph off 40 characters. All right, so we'll go to our indexed or estimate file, and here we will type home and ah, then here it was Diab, go toe the about page. Now, to make this text link to go to the about page, we had to use the ankle type. So to create an ankle tag, you have to type A and we'll just end this tag after the about page and then you need to have an attribute called s Riff. So it's a ref and here where to set the name of the page so well said it about not estimable. We can see that about Page is a link now. So now if I click on about page, we can see it things. A story about Paige. Now we'll just copy this line of court from here and we'll baste it in the about page also . And, ah, here we will type Goto the homepage and the Herald app index start estimate. So now if it were gone homepage we go to the homepage and if it look on about page, we go to the about it. So that's basically how you create links. Inestimable. You can also create links for external websites. So if you type goto and will create an ankle tag envious court to write a tagger to just type the name of the tank and the press tab and we'll get all the required attributes and all and in the X ray African type, the name of the website that want to goto. So it will type STD, ps, google dot com and inside the ankle tag. Here we will type Google. So now if I click on this link, we can see that we are on the Google homepage 11. Divs And Spans: Now let's take a look at what our divisions inestimable. So let's delete these two lines of code. A division is basically a container for something. It is a commonly used tag inestimable. For example, if you have two testimonials which contain a heading and the paragraph each, then ah, you can type the full in court. We can wrap about those things inside a division. So here, if you have ah, heading and we'll just type a name or here and ah, then we will have a paragraph. Now this whole thing here is a testimony in so we can wrap that inside a division. So we'll just type Div and we'll end it right here. And then we can create another testimonial by just having the same division and just changing the value. Right here. Divisions are block level tags, which means that it stretches toe the wit off the window. So if you have this division over here, then ah, we cannot have another division on the right off it. It will stretch to the whole bit off the brother window. That's the kids with heading and paragraphs elements as well. So if you have one more heading right here. And, ah, if you type hello over here, then we can see that it is displayed on a new line. But there are also in line elements, images, an example off land elements. So if we have an image source off image one, would you set the whipped toe 100 pixels? Now, if you just copy this line off court and, uh, we'll select the second image, we can see that the second image is right next to the first team mates. So it doesn't take up the whole with off the browser window. Decisions are mostly used by giving it a class name or an I D. So here we can type class testimonial, and we'll just copied this from here and will also based it in the second division. Now, what we can do is use CSS and give some specific styling toe these divisions. So I just add some CS is right here. You don't have to do this. I'll just show you a demo off. What divisions can do? So here we will die style. And in here we can tie up CSS. So to access this testimony, leotard type dot testimonial and here you can add your styles. So just said a background color off light blue. And here you can see we have this background color for both these divisions because we have said the class name for both these divisions. So now we know where we want to create a testimonial. We just have to set the division class name, toe testimonial so you can see the talk testimonial just changed the name. And now, if you remove this class from here, we can see that our background color disappears. So divisions are mostly used with class names or ideas, which can give it a specific styling. So that's basically about divisions. Let's just delete these lines of court over here. Now let's talk about Span Span is also used as a container, but the difference is that it is used for small areas off the content, like if you want to separate a specific word from a sentence. So let's see an example off where you can use span here instead of home. We will type G decoding. Now I just want tohave GMT with red color and according will be in black color. So for that we can use pan. So we just create a span over here and ah, we will close the span after GT. Now, here we can add an inland style. So if you type, style equals color red and if I save this, we can see that GMT are red and coding is black. So span is basically used for inland content and Dave is used for block level content. 12. Lists: Now let's see how to create lists in estimate. So just delete this style from here We donated. Now, Now, there are three types off lists in estimable, another list which is most commonly used. And then we have ordered list and also description list. So first of all will create an another list. So to create an another list your type you l which is for a non ordered list. And inside the you'll tank, we have to have list items. So for that we have up l i onda here. We can type anything we want. So just create an another list off programming languages. So job script And we discovered this land of gold a couple more times and, uh, python c sharp and C plus plus. So if I say this, we can see we have this in order list right here. Now, in the same way, we can also create ordered lists. So just copy this from here, and we'll just change this ul toe ol. So here you can see we have the order list. Starts from one through four non create a description list. So for that year, type D l. And in that we have two things. One is the key and one is the value. So for the key about a type D D and we'll have something over here and then for the value had a type d d. So I will type something over here. Now, we'll have one more DT and we'll type JavaScript and then we'll have a DD for the value. So here we can type something. We can have multiple values for a key. So I just create one more Didi. So now if I saved this, we can see we have this prescription list, have the estimate file, and we have this value over here JavaScript and these values over here. So this is how you create lists in estimate. You can also have nested lists, so just delete everything, and ah will create an another nested list. So here will tap ul and Ally Front end and beckoned. Now, inside this l I we can create another ul. So here, Well, type ul and we'll have another ally and will type estimate five. See, is this and Jonah slipped. So if I save this here, we can see how multilevel lists are nested lists with this. Copy this from here, and we'll just basted before the ally ends for the backend. And here you're gonna have something different. So that's basically everything you need to know about lists in estimate. 13. Tables: Now let's see how to create tables in estimates. So let's go ahead and relate these lines of code. Now. Tables should strictly be used for tabular data and estimate it should not be used for designing the layout off the website. Some designers used to use tables for designing the layout, but it is a bad practice, and you should do all the layout designing in CSS. So let's see how to greet this table. So, first of all, you need to use the tank called table inside the table. You have to container tags, so one is T head and the other tag is T body. To create a row in tables, you have to use the tag called D R and for the columns inside, heading the other type t yet and a hero type some headings and just copies and hero type designation. So here are the headings off our table. Now for the tea body, you have almost the same structure. So just copy this from here and with based it over here now, instead, off t. Yet we have to type D D, which is table data, so we'll select all the ts and we'll type TD over here and here we can feel in the data that we want. So this is one roll off T body. Now I can just copy this and create all our rose. So this is basically how we create tables in estimate. Now you can go ahead and add styling to the stable and make it look awesome. To add a comment inside, estimable, where you have to do is just type less than exclamation dash dash and here again, type your comment so we'll type table heading ends Now. If I save this, we can see that this comment doesn't get displayed on our page. It is there just for the designers. Just copy this comment and have little type devil body ends. So if you have a lot of gold in your VIP egx, it's a good idea to add comments. 14. Forms: Now let's see how to add forms inside estimate, so I'll just delete this card. The form tag is used to create forms inestimable. You can create registration forms, log informs, contact forms and so own. So let's go ahead and type form. And here we can see we have an attribute called Action. So this is where our phone will be redirected toe. So if he add some file like process dot PHP, then when we submit this form, this page will be redirected to process the PSP. But for now, let's just leave it blank. So instead of form, will create some form elements. We will design a simple registration forms. Now let's go ahead and add a feel for user name. Soul type input, which is a tag, is to create input fields. So just press tab and we have this attribute called Type, so there are various types off inputs. So for this input will keep it as text and will also add a placeholder. And we'll set the placeholder toe, use the name and if I save this, we can see we have this input field and we also have this place holder, user name and we can type anything you want over here. Now let's create another input field for email. So that input and for the type of girl said it has email and well, said the placeholder toe email. Now, if we just zoom out our page, we can see that out Text feels are side by side. This means that the input tag is not block level. It is in line, so here will add a line break. Let me just assume this game. Now we will add one more land break and will create a field for password input. And the type will be password and the place holder will be password and then a line break and one more input for possible and well, said the placeholder as confirm password. Now you also need to have a submit button, so we'll tap input and the type will be a submit and we'll set a value off register. I will also add a line break over here. We can see we have these input fields, and we also have this register button. So for the using American type, anything we want Onda for the email. If it type anything other than a valid email. And if I click on register, we can see that it says that the email is invalid and for the past. But we can see that we have these dots over here instead off displaying the actual text. So that's basically how you create a basic form. Now we do have a lot off input types like input type off file here again, tools, a file from our system. And then we also have input tap off color. So here we can choose the colors, and then we also have input type off date. 15. Radio Buttons: Now let's see how to create radio buttons for our form. So let's go ahead and here will create an input with a type off radio and we'll add a line break over here. So here we can see our radio button. We can click it and we can check the radio button. Now we can also have a label for our really buttons. So for the 1st 1 that will create a label and in four, we have to type the I D off are really wouldn't so create an idea over here. So I d equals back and and will tap back and over here and inside the label here we will type back. And now, even if you click on this label, our radio button will activate. Now let's create two more off these really evidence, and we'll change this toe front end and finally will change this toe full stack the changes to full stack and this label to full stack. So here we can see our radio buttons and if I click on back and we can see that it gets selected. But if I could confront and it also gets selected and we can select all three of these at one's own one that we want to select only one item at a time. So here we have to add one more attribute called name. And they had to set the same name for all these three radio buttons. So we'll name it developers. And we just copied this from here based it over here and here. So now if I click on this, we can see that back and gets selected. And if I click on front and back and gets de selected and we can select one at the time Now , if you want back in to be selected by default, when the Page Lords, then ah, you can add one after good called checked. And now, if I save this, we can see that back and gets selected by default when we load the page. 16. Dropdown Lists: All right, Now, let's see how to create drop down list in estimate. So for that you have to use a tag called Select, and we just delete the name and I d for now, because we're not going to send the any data toe the server. We just design our page. So in select, we have to have options so type option and how to provide values for these. But for now, we'll just deleted because we are sending this to any database. So we just add some values over here. I would also add a land break now, here against the we have our drop down list. If you click on this, you can see we get all these items and if I click on any of them, that gets selected so this will create a drop down list in a form, So that's basically it for forms in estimate. So let's go ahead and delete this whole form from here. 17. HTML5 Semantic Tags: Now there's some semantic tax that have been introduced in Estimable five, which helps the browser better understand the content off the page. Let's take a look at some off the common ones. The 1st 1 is the header attack. The handle tag is used to represent any header in your webpage. You can have multiple headers in your webpage if you want, and then the next one is the photo attack. The photo tag is used toe represent the footer in your webpage and just like the head of tax, you can have multiple photo tags, and the next tag is called Section. So this tag is used toe. Represent a specific section in your webpage and again you can. How multiple sections in your webpage. And then we had another attack called Main. The main tag is used to define the main or the most important part off your webpage. It can contain articles, sections and more. The next time is called. Now the knave tags use toe represent navigates menus on your webpage navigates minions are usually written in another lists, so you can create on another list and ah, an ankle tag and said that and you can type the part over here and you can have navigation links like this so the nanotech is used toe represent navigation menus in your webpage. Then we have the articles back, which is used for article contents in your rip it, and it usually has a large amount off text inside it. And then we have the aside tag, which is used for ah sidebars in your webpage shares an image that describes how some of the semantic tags are used in a typical webpage. It's up to you to decide which tanks should be placed there, and there's a strict rule as to restock. Should be used where. But it's up to you as a designer toe. Use the tags appropriately. 18. Audio: Now let's see how to add audio in our rep IDs. So let's delete this a sign from here. And to add an audio file inside your estimate, you have to use the audio tag. So let's go ahead and type audio. And inside the audio tag, you have to have attacked called source. And here we can add an attribute called SRC and here we can give the part off our audio file. So if I go to my file browser here, you can see I have a folder called Audio and I have these two files these about the same files, just different file types. So let's go ahead and type audio guitar dot mp three. So this is our audio file, and then we also have to set a type for our audio. So for the time we have to type audio forward slash m pink. Now we have added our audio file toe this webpage and to see our file over here, we have to have an attribute called Controls Onda. If I save this, we can see our audio file over here. And if I click on play, So began also control the volume over here and we can play and pause the audio. So this is basically how you'll add audio into your webpage. Now it is recommended that you add multiple source tags to your audio attack so that if one of these doesn't work, the other one will work. So let's add one more source and we will add our guitar dot very file and will change this type toe live. And in our webpage, it will just show one file. So if one of these doesn't work, then the other one will be displayed over here. Now, in order attack, we can have a text which will be displayed if the audio is not supported by the browser. So here we can type all the attack is not supported in this browser. So this text will only be displayed if the audio tag is not supported by the browser. Now we have different attributes for the audio tank. We can have an attribute called auto play. So when we save this file, the audio out of place when the page is loaded and then we also have another option called loop. So now if I refresh my page, the audio will start when the browser lords and it will loop. Once the odor reaches the end, it will play again. So let's say our page. 19. Video: Now let's see how to add video in our webpage. So video is almost the same as the audio attack. So let's replace audio with video and with changes here as well. And you leave these controls and auto play right here and ah, in my file browser, I have AH, folder called Video, and in that I have and before file. So let's delete one of these. And for the source, we will say video slash lake dot and before and for the type we're setting toe video, forward slash and before. So let's go ahead and save this file and see what we get. We can see that the video is playing, but it has a huge hide and wit, so let's staged of it. So here we can type with equals 100%. And if I save this because er video is playing and the with is 100% and we have all the controls, we can post the video, we can play the video. We can decrease or increase. The volume began played on full screen. Now there are a lot off attributes for video as well, like Luke, muted hide controls and all this you can go ahead and search for the active users on the Internet and you'll get a list of all the attributes. 20. Conclusion: all right. That's basically it for this course. Now the next thing you need to do is start learning, seizes toe, make the website look the way you want, so you can head over to my YouTube channel G decoding where I have a lot off Web designing and development tutorials. And you can also join me on Facebook. Very can ask questions if you have, and if you have enjoyed the scores, please go ahead and submit a review. So that's basically for the scores. Thanks a lot for watching. Have a nice day.