Learn HTML – Full Tutorial for Beginners

0:00 University instructor Dave Gray gets straight to the point and he will take you from knowing nothing to understanding advanced HTML concepts. Hello and welcome to four hours of HTML tutorials and instruction. This video is made up of 10 tutorials for learning HTML that build upon each other much like the chapters of a book. Throughout the lessons in this video, I will mention links being available in the description below. I've compiled all of these links into one GitHub resource that you will find in the description. Hi, I'm Dave Gray and I'm the creator of these HTML tutorials. You can subscribe to my YouTube channel for more tutorials like this one. You can also follow me on Twitter and if you're feeling generous you can even buy me a cup of coffee. A quick thank you to Bo at FreeCodeCamp for sharing this video and to everyone at FreeCodeCamp

0:48 for providing such an outstanding resource that helps people learn how to code for free. It's truly my honor to contribute this video. Let's get started learning HTML with chapter one. What is HTML? HTML is an acronym that stands for Hypertext Markup Language and Hypertext Markup Language, HTML, is the most basic building block of the web. It defines the meaning and structure of web content and hypertext refers to links that connect web pages to each other and that can be within a single website or from one website to another. Overall, HTML uses markup to annotate text images and other content for display in a web browser and you can see an

1:33 example of some of these markup elements here but before we begin creating a web page and using these markup elements we need to get the necessary tools. So let's start with a web browser. If you don't have one or if you're curious what I will be using in this series I'll be using the Google Chrome browser and you can download that at google.com slash chrome. So if you don't have that and want to use that go ahead and download and install now and then come back to the tutorial. Also I will be using an extension and we go to chrome.google.com slash web store to get extensions for the chrome browser and there if you want to use the extension that I'm going to use it's called dark new tab and you can press enter to search for that and once you've completed your

2:23 search you'll see dark new tab offered by Keller which is the one that I have added and you can see added here. I'll click on that and once you're inside the page for dark new tab you should have an install button here. Since I already have it installed this is now a remove button for me. What this does is when you open a new tab in the browser it uses a dark page instead of a light page and I use dark mode whenever possible so I prefer that. If you see me open a new tab in this development series you'll probably see a dark tab like this one. From there we need to get a code editor and the industry standard right now and what I prefer to use is Visual Studio Code. Again you can use other code editors to write your HTML code but if you go to code.visualstudio.com

3:15 you'll be able to download Visual Studio Code for free and there you can download for Windows if you're on Windows like I am or you can click other platforms and it's also available for Linux and Mac OS. So now would be a good time to go ahead and download Visual Studio Code and install your code editor and go ahead and open that up and then come back to the video. Okay I am now assuming you have installed Visual Studio Code and have opened it up and you may see something like this or you may see a welcome screen. What you need to do is create a folder on your computer and we will put our files inside that folder. So if I go to the file menu and choose open folder

4:01 you can see once this pops up what folder I am in the HTML course folder in Windows and then I've created an 01 underscore lesson folder. So if I highlight that and select the folder I am now inside that folder and ready to create my first HTML file. So if you see the file tree over here on the left and it's currently empty if you don't click this icon in the top left which is the file explorer and that will hide or show this file explorer. We're going to create the plus button or click the plus button here for new file and create a new file. Now we'll type index.html as that is always the file name that is expected to launch a website

4:48 and you always want to keep your file names lowercase and with no spaces. Now Windows will not complain if you put a space or use upper or lowercase. However when we host our files on a web server a web server will differentiate many times and that can cause problems. So the naming convention is to always use lowercase no spaces you can use hyphens dashes and then end each file and dot html. Okay we have an empty index.html file. Let's create our first html element and as you might guess the first html element we'll create is html. So if we type html all lowercase and press

5:34 tab in visual studio code it creates the tags and by tags that is often interchanged as a word with element. However the element consists of the starting and ending tag and everything in between but here we might just be referring to the starting also called the opening tag or the ending also called the closing tag. So we refer to html tags but every page starts and ends with the html opening and closing tags and everything else on the page goes between those tags. After creating our html element html pages have two main areas and one area contains data that is not seen on the page but is considered to be metadata about the page and that is the head area. So just type

6:25 head not header but head and press tab and now we have our head element and we will put metadata about the page inside this area but the next area is the page that every or is the part of the page that everybody sees in the browser and that is held within the body element. So type body and press tab and now we have our two major sections of our page that are both inside of the html element. We have a head section and a body section. Now inside the head we'll just put one piece of metadata today and it really won't start with the word meta. We'll come back to that word in the future. We're going to create a title element and give our page a title. Let's just

7:12 call this my first web page and this will stay inside of the html document. Now I just pressed control s which saved the document. You otherwise would see a dot up here by the index.html so I saved that and I am using an auto formatter. Visual Studio Code may or may not do that for you when you save your file. If you want that you can go to the extension icon over here and search for a prettier extension and I'm not sure if mine is enabled or I'm using something else right now we'll have to check. Now mine is disabled but I do recommend this one. Prettier is a code formatter that will auto format your code but Visual Studio Code may do some of that as well but if you want

8:02 to use Prettier go ahead and click install and you can use that as well. So I'll close out that Prettier tab. Go back to the file explorer here so we see our index.html on the left instead of the extensions and now we can see our html is formatted in a very easy to read manner. We have our html element and then the head element and then the body element and they're separated by spaces. Very easy to read and we have a title inside of the head. Again the title will not be seen inside of the browser in the body of the page but I will show you very shortly where we do see it. Inside of the body element though let's put an h1 element which stands for a heading and it is

8:49 the biggest heading we could put. You only put one h1 element per page and that should be saying what your page is about. It doesn't necessarily have to be the same text that is in the title but here we're just going to put hello world as is the tradition for creating your first file in any language you're learning and so we have hello world on the page and we have my first web page in the head section. Let's add one more element in the body of the page and this is a paragraph element that starts and ends just with the letter p but notice each of our tags of course start with this less than and then end with a greater than and then the ending tag you'll notice has a slash but all we have to do in Visual Studio Code is type p and press tab

9:41 and it creates both for us. So we're going to put some text inside of our paragraph and here we'll just put this is my first web page with a period in the sentence and save. Once again I'm pressing control s on the keyboard to save. You can go to the file menu and from there you can also choose save but you'll notice the shortcut is control and the letter s. We're almost ready to view our web page but before we do remember the extensions we went to. I want to show you just a few if you want your Visual Studio Code to look like mine. One thing to draw your attention to is when I created an index.html file I have the little icon for html5 beside it. You may not have that but if we click on

10:29 extensions and then we can delete prettier that I searched for before type vs code dash icons there you'll find the extension that will add that to your vs code as well so you can install. I already have it installed so mine says uninstall and that will add icons as you create files and it might add the icon up here as well in the tab and that's how you see the icon here beside my index.html in the file explorer. So visually it helps you see what type of file you're working with quickly without even reading everything. After that extension let's go ahead and click the extensions icon again and then search for github theme. I am using a specific theme

11:17 which I prefer dark mode in everything that I do so I am using the github theme extension and it has light and dark themes. I believe I'm using the default dark theme this might be bright for a second but I'll click set color theme and yes it switched back to light but I choose github dark default and then yours will look much like mine. Now these previous extensions have been optional but one that I say is a must for you to install is called live server. So let's pull up live server by ritwick day. I'll click on that and you want to install live server because it's going to help us view our web pages. So go ahead and install live server and after you have it installed

12:03 we'll go ahead and take a look at the web page we've created. Okay with that installed I'm going to close that tab. I'll come back to the file explorer here to show the file and now if you have live server installed you should be able to right click and open with live server and once we choose open with live server it opens our browser and we can see our web page it says hello world this is my first web page. In addition in the tab at the top it says my first web page so that is where the title goes at the very top of the browser in the tab. Now this is very bright and I have mentioned that I prefer dark mode so let's go back to visual studio code and I'm just going to paste in some quick styling that is actually CSS. Once again this is optional but it will save my eyes

12:55 and possibly yours as we work through this tutorial. So once we're back in visual studio code just underneath the title in the head section I'm going to paste this in. I'll quickly describe it. I put in a style element and that allows me to put in some quick CSS and I changed the font size to make it just a little larger and then I changed the background color to a dark color and I changed the font color to an off white color called white smoke and that's all I did. We're not really learning CSS here but this will save our eyes going forward if you want to make these changes. If you prefer the white with dark text that is fine too but now that I've saved this the beauty

13:41 of live server is that it automatically reloads our page for us in the browser. So let's go back to the browser and look at our update and now you can see our web page is in dark mode and we have a little bit larger text here as well. It did not change our title from the head because that just goes into the tab of the browser. Also notice the address. This is an IP address and then we have a colon and this is a port number but this is on your own computer. This is not on mine. I can't go onto the web and see your page that we just created. We haven't loaded it to the web. It is just running on your computer but this is the way to view web pages as we create them which creates your own local server. It's what's called a dev environment and that is preferred. What you don't

14:31 want to do in chrome is try to open a file like you would in word or some other document browser or even visual studio code how we open files. That's not how you want to view a web page. You want to use a development server and that's what we're doing with live server in visual studio code. Now if you ever want to stop the server down here in the bottom you can see the port number 5500 and it says click to close server. So I can just click that. It says disposing and now we have a go live button which you can also use. You can also right click on your document and choose stop or open with live server. Now we would once again since we stopped that we would need to open with live server to have a live web page that responds to changes we make and notice how it opened a new

15:19 tab here instead of our old tab. Our old tab the server for that page closed so we close that out and now we're using this one because this is going to show our most recent changes. Now after we've created a web page how do we know if we have errors or not? Well that's where a validation service comes into play and this is the W3C markup validation service. W3C stands for the World Wide Web Consortium that really makes the standards for the web overall. What we want to do to check our page is click file upload because remember our web page is really not on the web it's just on our computer. Your web page is on your computer and mine is on my computer. So let's

16:05 click file upload and from here we're going to choose the file on the computer and we get a browse window and now I'm going to click HTML tutorials and then I have an HTML course folder and then the zero lesson one folder that we just created and there is the index.html file we've been working with so I'll click open and now that it's here we can click check and we're going to get some errors and we'll go over those. Okay now that we have checked our page we have got a warning and a couple of errors so there are things we need to fix in our HTML file. Let's address these in order with the first warning says consider adding a lang attribute to the HTML

16:55 start tag to declare the language of the document so that is something we should do. Now we're going to go to the HTML tag and we can add what is called an attribute and this is the lang attribute and I'm going to set it equal to en which is the abbreviation for English in general. You can supply a dialect like this dash us or I believe the other would be gb but I don't usually do that so I'm just putting en for English. You might have another language you prefer to put there and you can find a list of those at the MDN network as well and that's the page where we were looking for the definition of HTML at the beginning of this tutorial so I will link to MDN the Mozilla

17:45 developer network in the description. Now that we've added the language attribute let's go look at the other errors we had and see what else we need to fix. It says the character encoding was not declared so we also need to handle that. Let's go back to Visual Studio Code and now inside the head there is an element called meta. Earlier I said the head stores metadata let me keep it all lowercase here and here we can set what is called the character set attribute inside of a meta element and from here I'll put UTF-8 which is the standard for all web pages that I have worked on. There are other character sets but this is the typical value you would see in there so I'm going

18:35 to save this and in the future we'll cover more meta tag values that we'll have inside of the head. Now let's go back and look at that last error that we got from the validation service and that said start tag seen without seeing a doc type first expected and it shows you exactly what it wants doc type HTML and that is a document type declaration that should be on the very first line of your page. So let's go back to our HTML file go to the very top and we'll press return and we'll paste in exactly what they had there. So you see once again it starts with the less than and the greater than symbol but this is not really an HTML element or tag this is just a doc

19:24 type declaration that you should have in every HTML file at the very beginning. So now I'll put that in and save as well. Let's look at the validator first and let's choose the file again and now I've selected the index.html to upload with our changes and we'll click check document checking completed no errors or warnings so our document is just fine. Let's go to the tab with our page and let's reload the page and once we reloaded everything looked great so we've got hello world this is my first web page and we still have my first web page in the tab at the top for the title and we have passed all validation checks. Let's move on

20:15 to what else might go inside of our head element and remember everything inside of the head element is not seen on the web page and with that said I've dragged the visual studio code window to a little smaller size on the left and chrome to a little smaller size on the right but I'm just going to expand visual studio code for now because anything we change inside of the head element will not be seen on the web page anyway so I'll click the expand button and we'll just see our code. Now I had mentioned that we could store more metadata inside of the head element and that is definitely some of what we see so let's add a couple of typical meta tags that have metadata that you would commonly see the first being for the author of the page so we'll say name the

21:05 attribute name is equal to author because that's what type of meta tag this will be and then we'll have a content attribute and this is where you can put your name I'll put my name for now since I'm the author of the page and then let's add another meta tag and let's give it a name as well and here we'll put a description this will describe the web page in a little bit more detail than possibly the title would so here we can put more of a sentence and once again we need the content attribute to do that let's say this page contains all the things I am learning how if I could spell how to and it looks like I'm extending the page so in visual studio code

21:52 I'm going to press alt z in windows to make sure the text continues to wrap and then I'll say all the things I am or I am learning how to create as I learn html there we go now after that of course you still need to close the meta tag and control s to save and again I got the words to wrap let's go to the view menu if you scroll all the way down you can see word wrap is alt z it may be something different if you're on mac or linux so you might want to check the view menu under word wrap if you want your words to wrap and not just extend forever to the right here now we've added more description about our page this information could be picked up in a search engine or some

22:40 other service that wants to learn more about our web page however let's go ahead and put something in the head where we will notice the change when we go back to the browser and that is to add what is called a fav icon and we can do that with a link element let me use lowercase once again and inside of the link element we'll have several attributes one is the rel which stands for relate or relation how does this relate to the web page and here we're going to provide an icon after that we need an href this refers back to html that stands for hypertext this is a hypertext reference so we're referencing a resource and here we're going to reference a file that i have now put

23:28 inside of our folder that is called html5.png and if i click the file explorer over here you can see i've now added an image file that's a.png file html5.png and you can download this image from the resources and you can see it's a small little icon for the html5 logo so i'll close that i'm going to click the file browser to have that disappear again so we see this then we have one more attribute to add and that is the type what type of resource is this and here we'll say image slash x dash icon and now we can save this and i'm going to go ahead and minimize the code window and now if we look at our web page in the browser notice we have an icon

24:19 up here my first web page now has our little fav icon beside the title and that's what we added here in the head by adding the fav icon with a link element now we won't add any more here today but this is the same area where we would link to css files and even javascript files and other resources that we pull in from the web so the head is a very important part of the page even though we don't see the content of the head inside the body of the page and i said we wouldn't link to anything else here today but since we do have this default css to make our page a dark mode if you added this and once again this was optional if you prefer the white page with dark text you didn't

25:05 need to add this and we had this style element here to hold the css in the head but that's not usually where you would find it for a page so let's go ahead and do that i'll expand visual studio code again click the file explorer and over here inside the file tree i want to create a new file i'm going to call this main dot css and i have an empty css file all we need to do now is go back to the index select the css that we put here for the html on the body not the style tags just select the css that's between the style tags i'm going to press ctrl x to cut it out of the page go to the css file and ctrl v to paste it into the css file ctrl s to save that file now back

25:55 in the html i'm going to remove the style element and i'm going to add another link and here for the rel not ref but rel we have a style sheet because we're adding a css style sheet our href will now point to our css main dot css specifically and our type which isn't actually required anymore but since we have it let's go ahead and add text slash css but our browser should know what it is even if we didn't add that at this point because that's really the only type of style sheet there is is a css now that we've made these changes let's save the file and let's go ahead and click

26:41 the button again to make our code shrink back down and look at our page we can reload just to make sure it has reloaded and everything looks the same that's because we are pulling in our code i'm going to go ahead and hide the file tree here we are pulling in our css code using our link tag inside of the head element now finally i'm going to create an error on purpose by deleting the greater than symbol at the end of this link tag and saving the file with control s now why would i create an error on purpose because we want to validate our file again and this will let us know that yes we've got the right file and we expect one error there you don't of course have to create an error on purpose but that's what i'm doing to make sure i'm selecting the correct file out of

27:27 the correct lesson folder because i'm in lesson two now you might be working on the same file we started with there's the css file and the image file i'll select the index.html and check and i should have at least one if not more errors because of that yes i created several errors on the page just by leaving out that one closing greater than symbol for the link tag so now if i save again visual studio code formats are code correctly instead of trying to pull the closing head tag up here and i'm going to go ahead and reload or re-upload the file to check it so we choose index.html and now i'll click check and document checking completed no errors or warnings

28:17 to show so just by missing one little thing in our page we could have a whole list of errors so follow the prompts from visual studio code notice how if i leave that out here in my theme this turns red or pink it doesn't look quite right visual studio code wants to format it differently if i save the file and it pulls that up here instead of putting the closing tag there's several cues to show you that you have an error in the file and so follow those prompts in visual studio code and then remember to always validate your page and we always do that at validator.w3.org i'll get rid of everything at the end of that and here you can pull it up and then we choose file upload let's look at the basics of creating text content on a web page now web pages are a lot like

29:10 essays or even a newspaper where they have headings and usually paragraphs of text or at least a sentence or two of text describing something afterwards so we see our paragraph element here and our h1 heading here much of the text content on a web page will be made up of headings and paragraphs now headings have a hierarchy and that means we'll start out with only one h1 on the page and each page should only have one h1 but after that we can have sub topics so here i'm going to press shift alt and the down arrow again i'm using windows it may be different for you on macro linux but i just copied a line down so now i have two h1s but i'm going to change this by typing h2 over that h1 and notice how the ending tag immediately changed

30:03 here in visual studio code as well so that's helpful now this is a sub topic for the page so imagine this being the title of your essay or the big headline in the newspaper and then we have sub topics so for h2 i'm going to type something different let's go with i'm ready to learn html and now we can have a paragraph about that and so we do at least we have a sentence this is my first web page now i'm going to highlight this subheading h2 and the paragraph and once again i'm going to press shift alt and the down arrow and it copies both lines down for me and i'll add an extra blank line here and i'm going to change this second h2 into an h3

30:51 now we i'll use lowercase there we go now we could have more than one h2 on the page but i wanted to show how you could have a sub topic under our sub topic so we have the title for our essay and then we have an area of discussion that we've added an h2 as the heading for and now under this area of discussion we could have further sub topics and this is how we now have an h3 so now instead of my first web page or i'm ready to learn html let's change this to my daily schedule so this will discuss our schedule for learning html and then we can just say something about i'm going to tell you how or let me tell you how i and i'll just put some dots there for now just

31:43 we'll expand on that later if we want to but really what i'm showing is this hierarchy and it's also important not just visually let me go ahead and save this by pressing ctrl s or remember you can go to the file menu and choose save visually we see that it's naturally formatted larger on the page with the h1 than it is the h2 and then the h3 is even smaller than the h2 but we can change all of that with css in the future css will really style how our web page looks but what is important is we can quickly visually tell the headers apart right now and when a screen reader or other assistive technology looks at our code then it can

32:30 navigate the code through the headers of what is important here the header hierarchy and that's why it's so important to organize your page the headers actually give semantic meaning saying this is the main topic this is a subtopic under the main topic and this is a subtopic under the higher subtopic in the hierarchy so headers do have semantic importance and that means giving meaning to our content and of course then our paragraphs can just have whatever details we want to add about those subtopics as well now even though we've created a little separation in our code when we look at our page we just see line space line space and we don't have a good visual separation I'm going to add an element that doesn't really provide any semantic meaning but visually

33:21 it helps us on the page and that is a horizontal rule element and it's just added like this there is no closing tag for the horizontal rule and then I'm going to add another one after our final subtopic discussion here so we can add something else underneath that and so now let's save and look what the horizontal rule adds to the page now we have lines going across the page and those are called horizontal rules so we have our main heading and now we have our subtopic and I left the h3 in here because it's a subtopic of this topic so now we can go ahead and I'm going to highlight the h2 and the h3 ctrl c to copy come down further on the page and paste and I'll save

34:10 just so we can see what happens now we have two different subtopic sections and we still have our top hello world so you could picture this more like an essay page and of course these could be paragraphs that have more text or you could picture this more like a newspaper and then we would have an article here and an article here and are heading at the top this is also a good time to discuss white space so if I just press the space bar and add all these extra spaces to the page if I save visual studio code is already going to probably reformat this but what is important to know when I save you'll see yes it changed and it just went back and only left one space is web pages or html do not honor all those spaces you might add with a space bar it's called

35:01 white space collapsing and so we can space many lines but it won't really be represented on the page that is not how we add extra space in html so again recognize white space collapsing that it will not last now something we can do is what's called a line break and that can be inserted inside a paragraph element so now I'll put let me tell you how and then I'm going to return remember we don't have to have the opening and closing tags on the same line for an element we can nest other elements inside of an element so I'm going to put a break and that stands for line break and then I'll put three dots and I'll say let me tell you how I learn more about web

35:49 dev and a period that looks good and now we can put another break and I'll just put three more dots and say I plan out my schedule and one more line break the three dots of course are not required it's just what I'm adding here and then I'll say I use resources from MDN which previously we discussed and when I showed the definition of html we were looking at the Mozilla developer network and that's what MDN is so now if we save this file you can see we've got line breaks and we're showing each of these details on separate lines okay let's scroll down and change some of our second topic now so instead of I'm ready to learn html let's change our second sub

36:40 topic to I am let me capitalize that I am also planning a vacation and now we can put some details about that vacation in the paragraph underneath this subtopic and I'll say I've been working hard and really need a getaway period and let's see if we want to add anything underneath that yep let's add one more sentence and what I'm going to do once again is shift alt and the down arrow and visual studio code will copy that line down so now we can just change the sentence here and I'll say I live in Kansas so I want to visit a beach Kansas is nowhere near the ocean so that

37:30 sounds pretty good so let's save that and now we can see our subtopic here changed and we have a couple of sentences about planning the vacation now let's change the my daily schedule subtopic at the h3 to places I'd like to visit and I guess I could capitalize that L on like there we go places I'd like to visit and now I'll highlight that paragraph and say I've heard good things about the Caribbean sounds like they have warm water and fun islands to visit okay so now we've got some extra details here and we can have more than one subtopic here so let's go ahead and do

38:18 that again shift alt and the down arrow to copy that and places I want to avoid can be our next one so places I want to avoid and here we can put anywhere cold no way with an exclamation mark okay so now we've got some extra detail here in our second area and this will allow me to go ahead and show you the difference between block level elements and inline elements what we've been working with here are block level elements notice with every paragraph and every heading they start on a new line that is a block level element it creates space around it which of course

39:04 can be formatted in the future with CSS but it does not allow you to put another paragraph inside of a header or a paragraph without creating that new line that space so there will be a return essentially in your content when you're using a block level element but when you use an inline element that doesn't happen so let's look at a couple of these first of all we can say I've been working really hard and I've been working hard and really need a getaway let's emphasize that really need a getaway and one inline element that we can do that with is EM and that stands for emphasis that provides some semantic meaning once again so now a screen reader or other

39:52 assistive technology or are just our browser overall knows we're emphasizing this really need a getaway so let's save and notice really need a getaway is italicized now we're not using it for the italicized text again the formatting will come later with CSS but that is just the natural behavior of using the emphasis element as we wrap our text but it provides that meaning now what if we really want to emphasize that text it has a strong meaning to us like our no way here we don't want to go anywhere cold well there is a strong element we can use for that in here let me grab the ending tag and put it at the end of our no way and now I'll save

40:40 and notice it got just a little bit bigger and bolder here as far as the natural formatting of the strong element but again this is an inline element it's inside the paragraph it did not create a break in the line it did not create any extra space around it so these are inline level elements and the other elements such as the header and the paragraph we've been working with are block level elements another type of content we can add to our page are HTML entities so they are things that are not really the normal text we would type out what for example if we wanted to show a less than or a greater than symbol on our page right now HTML interprets those as we're

41:26 starting or ending a tag so we can't just easily put one of those on the page likewise there are some other symbols or remember when I talked about white space collapsing if we need a little bit of extra space there's an HTML entity for that so I want to indent these three lines with a little bit of space and I can use the HTML entity oh I still need the closing there here we go and ampersand is usually what starts out an HTML entity and now I'll type n b s p and a semicolon notice visual studio code recognizes that right away and if I save I have spaced this line over just a little bit now I can add more than one of those if I want so I'm going to copy that and I'm going to add two more and now save and our line is over even a little further so I will go ahead

42:18 and select all three of these and I'm going to paste them right after the line break on each line and save and now we have indented with some extra space all three of these lines with these HTML entities that create space but as I mentioned there are other HTML entities as well so let's scroll down here to the bottom of our page and after this last topic let's add another HR and now we'll type and l t and a semicolon and that stands for less than so if we save now look we have a less than symbol underneath the final horizontal rule here at the bottom of the page I'm going to go ahead and copy that and paste two more and then I'm going to add

43:11 ampersand copy with a semicolon and that will be the copyright symbol then I'll just put my name you can put yours and then I'm going to add ampersand gt for greater than and a semicolon and once again I'll copy that and paste two more now if we save you can see we've got our three less than symbols we've got a copyright symbol then your name or my name and then three greater than symbols and we're using HTML entities to create those I'll provide a link to a list of HTML entity codes in the resources for this tutorial you may have noticed we've got a couple of abbreviations on our page we have the abbreviation for Kansas which is ks and we also have the acronym or

44:01 abbreviation for the Mozilla developer network here on our page so let's go ahead and add another inline level element and that can help us with our abbreviations and that is ABBR but it doesn't really do it by itself I'm going to go ahead and select MDN cut it and paste it here in the middle of the element and this won't really provide anything we also need to add the attribute title here I can put the full text Mozilla developer network and save and now when we look at our page it has some dots underneath MDN if we mouse over we get a tooltip that says Mozilla developer network now it's important to realize this tooltip will not really be

44:52 available to screen reader and assistive technology so we don't want anything super important for the understanding of the meaning of the page to be in there so if we are using abbreviation it's a nice thing to have but it is really not accessible to all assistive technology so it's you can't have anything in there that the page really depends on because some of the people accessing the page may not be able to read or see the information that you provide here inside the title attribute of the abbreviation element let's go ahead and add that abbreviation element for Kansas as well so ABBR and then title and I'll spell the state name Kansas and then I can go

45:40 ahead and double click on Kansas ctrl x to cut and I'm going to paste it with ctrl v right inside the element save and now dots are under the ks here on the page and if I mouse over we get a tooltip that says Kansas let's put another paragraph under places I'd like to visit and I'll put I can just type p and press tab as well there we go and now I'll type I've heard good things about going here with a colon and now I'm going to add an address element and we can put a location inside of this address element and it tells the browser that this is an address or a specific location so I'm just going to paste this in because you don't need to see me type all

46:30 of this and I might easily have a typo here this is Margaritaville Island in Cancun it sounds like a great place for a vacation notice we've got a line break element after each line except the last line and if we save this and look at the page you can see how the browser handles this it is just three lines of text it is all italicized by default and the browser knows that this is an address and once again so would assistive technology so an address element does provide some semantic meaning as well to the content within it now before we finish this lesson about content there's one other thing we can add to our code now we won't see it on the page but it is

47:15 important to us and this is an HTML comment and so now you can see Visual Studio Code colored this differently at least with the theme that I'm using and we can leave a note for ourselves inside of our code now notice this will not be on the page but I will show you how the public can see it so you don't want to put anything in here that you don't expect the public to be able to read I'll put a to do which is a common use and I'll just put add more places so it's a reminder to me to add more places to the list of places I want to avoid and we save that and it doesn't show on the page it's just a reminder in the code or a note to yourself inside of the code but I will show you how the public can see this if we right click and choose inspect that works

48:04 or you can also press ctrl u either way will show your source code now notice we've got a comment in here that says add more places it's not visible on the web page itself but it is visible in the source code again you can press ctrl u to view this now notice live server also injected a comment here and it injected some javascript so when we look at the overall source code of what is live we're seeing more than we even had but this is a comment once again that is not seen on the page and live server is using a script element that we do not see on the page either and that can contain javascript for example so just to let you know if you leave a note for yourself it can be viewed

48:50 by others and finally now that we've added all of this html content to our page we once again should go to the validator markup validation service from w3c to check our file to see if it is valid html or if we have any mistakes choose validate by file upload and then click choose file I'm going to have to probably go to a different folder from the one that I checked last so I'll go to html course lesson three which is the file we are working with choose my index.html and open that here with the validator now it has the index.html file uploaded and we can click check and we'll see if we have valid html so this is valid it's green document checking completed no errors or warnings

49:38 to show if you have errors or warnings it should point out exactly where that error is and you can fix that in your html. Let's look at how to create lists on a web page lists are very useful and are used in many places on the web so we have three different types of lists we're going to create today ordered lists unordered lists and description lists let's start out with recapping here we've got visual studio code on the left and I've got the head element collapsed so we had meta details inside of there we can collapse that by clicking on the arrow by the line and you see between lines between four and eleven are now collapsed so we're working inside of the body element to add content

50:23 to the page and this is visual studio code and I'm running the live server extension you can see down here it says port 5500 click to close server if you've installed the live server extension it may say click to launch or something like that which would actually launch your web page for you because that's how you want to view it in a development environment you don't want to just go to file and open the file in your browser you want to have that live server running that simulates a web server if you're not familiar with the live server extension you can click on the extensions logo here and instead of searching for prettier that I have in there you can search for live server and you can install that live server extension by writwick day right here

51:13 okay so we've recapped all of that here's the file tree with our files I'm going to hide that by clicking the file explorer here so we can see more of our code and we will add lists to our web page today so I'll scroll down to under the subtopic of my daily schedule and notice how we had these line breaks and spaces here well we're going to replace these so I'm highlighting the first one and then I'm going to press ctrl d that highlights the next one and ctrl d again now it has highlighted all three of those and instead of this line break I'm going to type li and press tab that adds a list item but we haven't enclosed this in a list yet and we definitely don't need

51:59 the closing list items here so once again ctrl d ctrl d so all three of these will be list items but they need to be inside of a list too so let's make this an ordered list by starting out with an o l and I'll press tab and we got the closing o l tag as well that stands for ordered list as you might expect and I'm going to actually put the o l down here after the paragraph tag the closing paragraph tag and I'm going to cut with ctrl x or you could retype if you want to and I pasted the closing paragraph tag right after the end of let me tell you how so this is a shortened paragraph now and the list will not be inside of the paragraph and now we have

52:46 our ordered list but that also needs closing li tag so I'm going to type the less than symbol and a slash and visual studio code instantly filled in the closing the rest of what is needed there and I'll do that again for the second one and then I'll do that here for the last one and notice we do have the abbreviation still nested inside of the list item here so now I'm going to press ctrl s and save and visual studio code reformatted that just a little for me but look at our page now that we've added this list it's an ordered list and it is numbered that means it's in order numerical order one two and three notice these are not this text is not enclosed inside of a paragraph element so it's not creating that extra space that a paragraph

53:35 element does they're stacked right on top of each other there's still a little bit of space but not like we have between our paragraphs so that is an ordered list we start out with the ordered list element and then the list items go inside it and each list item is starting and then ending with the li now let's scroll down and look at our vacation area says I'm also planning a vacation and we've got a places I would like to visit area so after that let's go ahead and add a ul which as you might guess stands for unordered list and we'll go ahead and cut that closing tag and I want to put it after the address here at the bottom so this will be our full list now we

54:21 need to declare list items here in this instance I'm going to go ahead and keep the paragraph tags inside each list item so we created an li there and I'll use ctrl x to cut and close that first list item here for the first paragraph I'll do something similar here got an li but the closing one is going to be in a different spot because our list item can have these tags nested within it just like we nested the paragraph here I'm going to go ahead and nest the paragraph and the address inside of the list item here and so now if I save and visual studio code reformatted my code for me but notice here's the beginning of the list item and we have the end way down here after the

55:09 address so let's look at what this unordered list looks like on our page and you can see instead of numbers it has dots it does have the extra space created by the paragraph tags and the address element still has the content that it had before and still formatted the same but notice our ordered list and our unordered list are both indented compared to being over here flushed to the left with everything else we had like they were before so similar in formatting from an ordered list to an unordered list and also realize that the really the only difference is the bullet point here in an unordered list versus the number in an ordered list the extra spaces were caused by the paragraph

55:56 element inside of these unordered list items and we did not use a paragraph element on these ordered list items so the list itself and the list items did not create the extra space that was created by the paragraph elements now let's scroll our page we've got enough content we need to make sure we're visiting the very bottom here we want to add more under place I want to avoid and I'm going to change that to places I want to avoid and let's go ahead and remove our paragraph that says anywhere cold no way and let's add a description list here so a description list as you might get starts with dl now inside the description list there are two different types of elements instead of just an li like we had in our other lists for a list item we have a description term

56:46 and this description term could be the place we want to talk about so let's say the north pole and now for the description term we need to also have description details so that's dd and here I can put I here this is now let's go ahead and put our strong emphasis back here and I'll put cold and then our exclamation mark so we have put a strong emphasis on cold and now I'll create an extra line here just to space these apart another dt I'll put the south pole and then dd for the details description details and I'll say this is also cold and let's add one more

57:34 description term this will be mountain tops and dd for description details and these if I expel these these are also cold now if we save let's scroll just a little bit more so we can see all of our content here you can see our description list has a different format than the ordered list and the unordered list our description term is to the left and then the description details are indented to the right but here is our full list of the north pole south pole and mountain tops we want to avoid all of these places when we go on our vacation with these new lists now added to

58:22 our file let's go ahead and create an error on purpose just to see if we have an error in our page when we check it at our validator.w3.org and here I'm going to choose file upload and I may have to switch folders let's see no I'm in the right one so I'll just choose index.3 I think we're on lesson four and I forgot to change the file but I'll do that to make sure that the github repo with all the source code is correct so let's go ahead and check this file and yes we have some errors because we created one specifically let's see if that's our only error as we have noted in the past one error can create a cascade or a lot of errors so now I've formatted

59:13 this correctly let's go ahead and load our file back up so we'll choose file we'll choose that index.html file again and click check now everything is okay document checking complete no errors or warnings to show so realize if you have an error it could just be one small syntax error that creates a cascade of errors when we're checking but this is a great way to learn and of course look at the details of the code and it's always a good idea to validate your code after you write it to make sure you don't have any syntax errors let's move on to creating links on our web page hypertext is the ht in html and it's what links together everything on the web

1:00:06 it's really what makes the web work so well think about spider-man or really any type of spider that's throwing out strands of web and linking things together that's essentially what we're doing when we create hypertext links we're linking the web together now as we say link there can be some confusion because notice here in visual studio code on the left that i've got link tags that we created in the head part of the page that's from lines 4 to 11 and these link tags are pulling in resources from other parts of the web whether it's something we have on our server with our web page like this fav icon or we could pull in something from another part of the web like a font from google fonts and things like that which we haven't done yet but it's possible

1:00:54 with the link tag but that's not what we use to link pages to each other i'm going to collapse this head section by clicking on the arrow over here by number four so we have a little more room and now we're looking at the body area in visual studio code by the way i'm running the live server extension and have our page from our starter code that's available for download at the github link in the description and i'm running that with the live server you can see it running here it says click to close the server shows port 5500 okay in visual studio code let's scroll down a little bit and let's add what is called an anchor tag that will create a link to another page on the web so in our list where it says let me tell you how and we're talking about the different things we

1:01:42 do to learn web development we have an abbreviation for the mozilla developer network maybe this would be a good place to go ahead and link to the mozilla developer network and we can insert a link around this mdn abbreviation inside the inline element that is the abbreviation element so i'm going to press enter here to start a new line now i'll just type a and this is well i guess because it's followed by mdn it's not doing it so i'll start out with the less than sign and then a and this is the anchor tag that i'm starting but by itself if we just put the anchor tag while you can do that by itself it will not link to anything it needs a specific attribute

1:02:28 that tells it where to go so i'm going to press enter here and we have it surrounded by this anchor tag we need to add the href attribute and now we're going to reference an address on the web so this is where we would put that address in over here in the chrome browser i have the mozilla developer network open we can see up here at the top it's developer.mozilla.org and then there's a slash after that that gives the specific language for the site i believe it will default to the browser choice i'm going to remove that part go ahead and select the rest and now that i have copied that with ctrl c i'm going to click here inside of visual studio code and put that address right inside the href attribute now i am wrapping the code down

1:03:17 to another line so you can see it all it doesn't go off the screen i could expand visual studio code here and now you can see the full address without that line wrapping so we're linking to the developer.mozilla.org website with this link and we can save this and now i'm going to go ahead and bring visual studio code back to the size i had it the code lines will wrap but if we look at our code or our page in chrome that should have now updated because we're using live server you can see we have a link and it turned purple it's a little hard for me to see right now but we can change that color in just a little bit but that purple means a visited link if you have not visited that site it's probably more like a royal blue or a bright blue color and that means it's

1:04:05 not visited yet and those are the default colors for links but something about this link that we need to acknowledge this is the full address to that website and it's a specific address this is what you would call an absolute reference this has the full address for the web page to where we're going but when we link to something that's already on the same server as our page where we're hosting our website then let's go ahead and expand this head section again notice we're not giving an absolute reference we're giving what's called a relative reference right now we don't even have a slash here because we know this html5.png file is in the same folder as our index.html file and the same with this main.css file it's in the same folder we don't even

1:04:54 need to provide a slash it's not in another folder even so but it is a relative reference and that's the difference so we have an absolute reference here to a place on the web and then we can provide a relative reference to something that's on the same server that we're on so now let's go ahead and create a relative reference to another page and i'll scroll down to do this we haven't created the page yet we'll do that next but if you have your name here here at the bottom i have my name where we have the copyright symbol and in chrome i can scroll down and we can see this at the very bottom let's go ahead and link with a relative reference so i create that anchor tag that a tag and then href and equals and let's link to about.html and notice i'm putting quotes

1:05:47 around that file name just like i did for the full address in the absolute reference above and now i want to put my name of course between the opening and closing anchor tag and now that will link this to the about page that we haven't created yet i'll save and notice now this is that bright blue or dark blue that i was mentioning earlier a link that has not been visited this page doesn't even exist yet so we need to create this page if you don't have the file explorer open in the top left of visual studio code you can click that and you'll see the files that we have here in the file tree what i want you to do is click on the new file icon name this page about.html now this is a good place to go ahead and pause the video you can click on the file

1:06:37 explorer tree over here the file explorer to hide the tree if you need more room but go ahead and create an about page you know everything we've already learned from the index.html page so what i want you to do is pause the video create your own about.html and then come back and i will create one with you okay i hope that went well for you i'm going to help you create an about.html page now or you can watch how i do it and compare to what you did now i've been doing this for a long time and i'm going to take a few shortcuts so you don't have to see me type everything out i'm at the index.html page i'm going to press ctrl a to select everything then ctrl c to copy everything

1:07:23 click the about.html page again and i'm going to paste everything in with ctrl v now as you're learning how to do this i think it's important that you type everything but i don't want to take up your time and by having you watch me type everything out so i'm just going to make some changes here the doc type is the same the html elements the same and of course we have a head section the meta tag for the character sets the same the author is the same now this description meta tag right here on line seven that could be just a little different i'm also going to press alt z to get this page to wrap lines that are longer so now you can see line seven wraps down to a second line here and we see the space to the left now in this description i can change this just a little bit and i'm going to say hi i'm dave gray this page is about me so we've given

1:08:18 an accurate description for the page now and instead of my first web page in the title i'm just going to call it about me in the title and now we still can use this same fav icon and we're going to use the same style sheet so this page will look like the other page as far as the styles and now we can change the heading for the page and here i'm just going to say hi i'm dave gray after that i'm going to eliminate most of what we see here on the page so i'm going to highlight everything from line 17 all the way down to 63 i pressed shift and i clicked on my mouse there and i've selected all of that specifically and now you can see we're left with the horizontal

1:09:07 rules and the space in between and so now i'm just going to put a paragraph that's not really about me i'm just going to create some lorem text and i can do that with a p element try lorem times one i just want one paragraph we'll click that there we go one paragraph of information so it's still kind of formatted that strange i'm going to go ahead and enter before and after there we go and now we've got that single paragraph here anyway this is a basic about.html and we have linked to it so now let's downsize visual studio code back here with the button you see right here the square not minimized but downsized it's not maximized either and now our link to the

1:09:56 about.html should work so i'm going to click that link and here we're on the about page and now notice my name is this dark purple again so we have gone to the about page that we just created says about me here in the top tab i'm going to click the back button to go back to the original home page here now back on the home page there is a third type of link that we can create and this is a link to an area on the same page on the page we're already on we can create shortcuts to different areas of the page so we've had our absolute references we've had our relative references and now this is what i would call an internal reference or it's an anchor link directly to a portion of the page that we want to go to in order to do this we're going to add

1:10:45 just a little bit more to our page so i want to click on the index.html there we are going to go ahead and collapse the head again and we've got a couple of topic areas besides our big hello world at the top so we've got the part where we're ready to learn html and we've got the part that we're discussing planning a vacation so we're going to organize this into sections and there

…