**Introduction to HTML**

HTML, short for HyperText Markup Language, is a standard markup language used to create web pages. It is the backbone of websites and web applications, providing the structure and content that makes up a website's user interface. In this tutorial, we will explore the basics of HTML and learn how to use it to create our own web pages.

**Creating Your First HTML Page**

To get started with HTML, you need to create an HTML file. This can be done using any text editor or an IDE like Visual Studio Code. The first step is to add the correct anatomy to your HTML page. This includes the doctype declaration, which tells the browser that this is an HTML document, and the opening and closing tags for the HTML element.

For example, let's create a new file called "index.html" and add the following code:

```

```

Save this file and open it in a web browser. You should see a blank page with the title "My First Web Page" in the top left corner.

**Semantic Sectioning**

One of the key features of HTML is its ability to provide meaning to the structure of your web page. This is achieved through semantic sectioning, which involves using HTML elements that describe the content of a section on a web page. For example, you can use the `

` element to represent the header of a section, and the `

"WEBVTTKind: captionsLanguage: enhello everyone here on the free curcum Channel my name is Anu Kubo and I will be your Guide to the wonderful world of coding this tutorial is for anyone who has never touch code before and would like to get started with the basics such as where to even write code in the first place and how do we get text images and even tables and lists showing up on our web browsers for this we will focus on getting the right tools we need in order to get started as well as a fundamentals course in the HTML language or in non-code speak the thing that gives structure to our websites and apps this two-hour course is actually the very beginning part of my full stack coding course in which we go further and learn how to style things up using CSS make our code actually do things using JavaScript learn how to work with apis or in other words plugins such as this core map API right here in our travel app we built learn how to work with databases as well as builds are secure backends using node.js and express and on how to build apps that we can sign up log in and log out of while using popular front-end libraries such as react so that we have a full and experienced resume that we write together in which we can showcase projects out of the 22 that we built okay so what are we waiting for let's get to it so before we get started with anything let's talk about the tools we'll be using in order to help us code the most important tool we developers need is a way for us to write and edit code we could technically write our code in a text editor like this but luckily for us technology has evolved and we can now write code in code editors that are built specifically to make our lives easier as developers by Auto indenting lines and adding color-coded helpers for readability some code editors even go a step further and give us prompts when they detect that we have made an error this makes debugging code a heck of a lot easier there are so many current addresses out there some are hosted on your computer and some you can access online meaning you don't have to download anything you can just use it it is also worth noting that is sup up from a code editor is an IDE or integrated development environment it essentially does the same as a text editor a code editor but also acts as a compiler all in one space as well as a bunch of other stuff this tool is a bit too robust for what we will be needing in this course but it is worth knowing the difference between each of these tools today hybrids of these tools exist so it is much harder to fit a specific technology into one of these categories there are many types of code editors out there as mentioned we 've ones that we can download directly onto our computer and ones that are hosted online for this course I'll be showing you how to use one that is downloaded onto your computer I'm going to be using the code editor vs code I am doing this for no other reason than I had to choose one but if you would like you have all of these other code editors Ides or hybrids of both to choose from for those of you who would like to get coding straight away without downloading anything onto your computer you also have the option of these online code editors please take a moment here to decide which choice is right for you okay so by now we should have our preferred code editor of choice up and running as mentioned in the previous section I will be using vs code on my Mac this means I have downloaded it and it should look like this on your computer when it opens up the next thing we need to decide is where our project is going to live a website essentially consists of a bunch of files or organized together in a particular structure you design here we can see a project that holds my HTML file another folder that holds my style sheet or css files another folder that holds my JavaScript files and a folder that holds my images don't worry if none of this makes sense we will be building up a project called my portfolio slowly throughout this course starting with creating the folder in this section if you are like me and have downloaded vs code you will have to store these files locally on your computer you can store them wherever you like just make sure they are organized in the same way inside your project folder which we have called my Dash portfolio on this occasion I want to store the folder for my Dash portfolio on my desktop so that we can see it visually too if you have chosen to use an online code editor you will not need to do this as your files will be hosted online along with your project however I would still strongly advise watching along so you know how to do this in the future so on my desktop I'm simply going to press Ctrl and left click on my screen and then create a new folder okay and rename it to my Dash portfolio just like so next I'm going to open up vs code that I just downloaded so it should look like this and I'm going to open up that folder I just created so to do this I'm going to just select open folder and navigate to my desktop where I will find the my portfolio folder that I just created I'm just simply going to click on it and open it up by pressing the blue open button and there we go that is now looking good you will notice how I am keeping the folder name in lower case this is because many computers especially web servers are case sensitive this means that if you want to find a file in your project and you use a capital when none exists it might not work to be on the safe side I recommend sticking to lowercase when naming or folders and image files in our project this is also the case for having spaces in the names browsers web servers and programming languages do not handle spaces in the same way as each other causing potential chaos for example if you use spaces in your file name some systems May treat the file name as two file names and some servers might even replace the areas in your file names so the spaces with percentage 20 instead it is for this reason that I would strongly suggest using a hyphen instead of a space when naming files and folders okay and that's it we have created our project folder next let's learn a little bit about HTML so we can create our HTML file for our web page okay everyone and welcome to the first coding section of this course in which we will be learning about HTML in this section we are going to get started with the very basics of coding by looking at the language that essentially started it all for web development without it we would not have the pretty pages that make up things such as this very platform you are currently viewing our course videos on to understand a little bit more about how it all works I'll be starting off by giving you a brief overview of where HTML sits in context of a web page as well as understand how it came about and move on to a tutorial with interactive questions and code examples in order to learn how to use it the tutorial part of this section will take up the majority of this course we will start off by learning what exactly HTML is understanding where it came from looking at HTML elements understanding HTML syntax or in other words it's structure and then looking at HTML Anatomy once we have grasp the basics of HTML and how to use it we will be using everything we have learned by building out a project that we can be proud of we are doing this as throughout this course I will be giving you projects that you can choose to put in your developer portfolio these projects will be ones that I have chosen in order to help you approach potential hiring managers in a bid to try and get you your first developer job each of these projects will be appearing to you at various points in this course so while skipping lessons is optional I would strongly recommend you watch each lesson in order to fully build out your portfolio to its most wonderful action-packed self okay so what are we waiting for let's get to it before we get to any coding at all let's actually understand what HTML is HTML stands for hypertext markup language it is considered to be a comparatively simple language that helps create the building blocks that make up web pages and apps we use today we essentially use it to describe the structure of web pages what I mean by this is that we use it on a document designed to be displayed in our web browser by adding annotations that will change what certain elements look like think of it and the way a teacher marks your work with a big fat red pen they will make annotations on your text in order for you to change it it might be to change something like spelling or it might also be to make a heading larger or something bold these annotations are not to be seen by the end but we applied behind the scenes if you will same goes for applying markup language in computer text processing you are annotating a document that is syntactically different to the existing text now what you cannot currently use HTML to change the spelling of things you can use it to transform tags into a heading or make it bold as well as a bunch of other things in fact we can apply the hypertext markup language or HTML to this boring lump of text and make it look like an actual recipe we see online so we can take this and make it look like this so as you can see we have taken the text made satin text bold made some text into headings hyperlink some text and change some text into a segregated paragraph As we mentioned we have done this thanks to annotating the document using hypertext markup language or HTML this mock-up looks like this so here we can see the text and here we can see the markup or more specifically the hypertext markup language we colloquially call HTML let's have a look at some of these in the next section so we have now seen what the hypertext markup language or HTML looks like in a real life example let's break it down by looking at one of these elements first and understanding its syntax syntax is just a fancy word for the structure of statements in a computer language and that is exactly what we're going to be looking at we're going to be looking at the structure of HTML elements in the next four minutes I'm going to really deep dive into HTML but don't worry we're going to go through all of these sections video by video coming up next okay so bear with me this will be a lot this right here is what makes the text in between it bold it is referred to as an HTML element almost all HTML elements will have an opening tag and a closing tag like this one we can also pair this with a paragraph element that will make the text below this appear to look more like a standard paragraph when writing like this so by using the angle brackets in this fashion with a slanty line or solidus to close the element browsers know not to display these HTML tags but use them to interpret the content of the page by mixing and matching these HTML elements we are slowly starting to build out what looks more like a recipe page than a lump of text we originally saw in fact we can mix and match over 100 different types of HTML elements here are just some of the more popular ones to our disposal let's start by looking at the paragraph element the Syntax for the paragraph element looks like this let's talk through this in more detail so first off we have the opening tab HTML elements are defined by tags written using angle brackets as we touched on before this opening tag tells our browser Hey listen up an HTML element is about to start next we have the closing tag which is just like the opening tag apart from this slanty line or solidus this tells our browser that the HTML element is now finished any text after this tag should not be applied the paragraph styling and then of course we have the content itself this is the text I want to apply the paragraph styling to it is in between the opening tag and the closing tag all together this is called a paragraph element ta-da and of course we have other elements an interesting one is the heading element I say this as there are six of them the H1 tag is the biggest heading and the H6 tag is the smallest heading you can use the tags as a main heading for example or a subheader in the browser The Heading tags would look like this so each of the tags would have a certain size assigned to it what is interesting about this is that giving texts and tags gives it semantic meaning to the browser meaning that the browser will read the text with some kind of meaning in this case the H1 tag will be treated as the most important title on the page I did also mention that most elements have an opening and closing tag I say most as some elements do not need both this applies to the image element for example we use image elements embed images onto our pages image elements do this by a specific attribute which is the source attribute represented by this SRC right here that takes the path to our image file I have also chosen to include the alternative attribute with a description of what my image is I say this as a choice but if you want to make your website accessible to all people it is something I would strongly advise this is because users who are visually impaired will be able to use tools to read out this alternative text to them it also helps others know what the image is all about if the file based to load or if the path to your image file is broken we will go into more detail about attributes and paths in the dedicated section on image elements further in this course now we can also add comments to our code that will not be visible in the browser but will be visible to us and other developers looking at our code to add a comment that will not be visible in the browser just like the tags we need to put that text in between two things in this case it's the two bracket arrows right here again making sure that these syntax is identical to this example now so far with these examples if we just put them in a document open it in the browser we would not be writing about an HTML this is because we are yet to do a few things which would include building up the anatomy of an HTML document we will do so in the next section in this course you will see me saving files a lot by using a shortcut on vs code vs code comes with many shortcuts that are available to you here are just a few of those for now I just want you to focus on using the savings shortcut which is essentially the command button or control button depending on your laptop plus the S button whilst on vs code okay so if you are unsure of if your file has been saved or not you should see this white dot disappear once that happens you know your file has been saved we will be needing this file to be saved as our next step will be to view the latest version of that file in the browser so if we already have that page up we will need to refresh the browser to see the latest version of it okay so save the file using command s and then we will go to the browser and refresh the page that we are viewing in there save refresh save refresh you got it so keep this in mind as we will be using this in the next section and pretty much all the lessons from now on until the end of the JavaScript module here is a basic file structure for when working with an HTML file when we use HTML elements outside of the correct HTML structure we're not writing valid HTML even if the browser can fix our mistakes the markup is only applied if the elements are in the correct environment we will go into what that environment is in this section it is important to note that for this course we are going to be using the latest version of HTML and that is HTML5 standard let's go ahead and recreate this HTML file in our code editors so here I am on my code editor of choice all I'm going to do is make sure I am in my project which I have named my portfolio and I am simply going to add a new file like so I'm going to choose to call it index next by giving it the HTML extension my code editor knows to treat this as an HTML file you can and as many HTML files as you wish your project naming them whatever you want just make sure to put dot HTML to tell your code Editor to treat them as HTML files now that we have created our file let's add some boilerplate code so I'm just going to paste them in here and talk you through it the first tag I want to show you is this right here it is a tag that tells the browser that this is an HTML5 document as mentioned there are previous older versions of HTML so just be aware of that on your journey as a web developer the browser needs to know what version of HTML the document is in order to render it correctly next we tell the browser where our HTML is starting we are doing this as even though we only have HTML in here for now we can actually write CSS and JavaScript in this document too something that I will show you later down the line in this course we are going to be using this HTML opening tag and closing tag as the root of our document everything else that we want to get picked up by the browser has to live inside of it next we have the head tag this is where we store information mainly this is not to be confused with a heading tab the head tag will store information that is not visible in the browser it is for storing not displaying you will see that in my head tag I have a meta tag with a Char set attribute the charset attribute specifies the character encoding for the HTML document this is not too important for now it simply says that we want to cover most of the characters and symbols in the world so in other words we can handle anything from Arabic to English to this funky little guy right here there are other meta tags we can use also but for now let's keep it simple and just use the ones we most need next up we have our title tag this is for naming our project we do this so we can store what we want to call what we are working on and we store this in the head so make sure it is in between the opening tag and the closing tag of our head once again this is not a title we will see in the browser however if you look at the tab of the browser your project is in you should be able to see it it will also show up in search results so for example in Google next we have the body now this is where the visible stuff will be this is essentially where you can put elements such as the ones we have discussed already such as the paragraph element The Heading elements the image element and many more we can also set the primary language for our document we can do so by simply adding the Lang attribute to the opening HTML tag select this this is useful as it will be indexed more effectively by search engines allowing you to appear in more relevant search results okay and there we have it let's start deep diving into some more elements next we briefly touch on headings so far in this HTML module however I would like to take a breath to Deep dive into them a little bit so you really get a good grasp of what they are and what they are used for so once again the heading element comes in six variations with the H1 element being visually the biggest and the H6 heading being visually the smallest each one has an opening tag and a closing tag in addition to this it also tells our document which heading is the most important behind the scenes so for example if I was to give a web page an H1 element our web page knows to treat this as the most important title on the page kind of like giving an essay its title so we know what it's about you should also only have one H1 element on a web page hey you wouldn't name your essay twice would you after the H1 element you also should use these subheadings in order meaning the H2 element should come next and then the H3 and so on but you can have multiple subheadings of the same size again just like when writing an essay so for example this is good and this is not so good however there might be occasions where you might see these conventions broken in addition to this nesting multiple H1 elements was allowed in older versions of the HTML standard however it was never considered a best practice so just keep that in mind now you might be thinking oh this does not look very fun well don't worry we can actually change what these headings look like using a programming language called CSS CSS will allow us to change the font size of these headings but not only that allows to change the color weight style and much more we will be looking at CSS right after the HTML module in this course another great and popular tax related HMR element is the paragraph element it is essentially this cute little p-tag right here the P element represents a paragraph or in other words a block of text we can use it to Bunch up text that goes together so like this this means if we put another paragraph element after this one again with a bunch of text it will appear spaced out from the other one now it does not matter what line you put the text on after all if you put all of this on one line it's kind of hard to read so you can put the text on multiple lines in your code editor if you want it will not affect how it looks like in the browser you might see p elements written like this or like this or other ways too both of these approaches I am showing you are valid just like with the heading element we can add CSS or in other words styling to change the default styling of the paragraph element meaning you can change this spacing amount but not only that we can change the font size the color the line spacing of the text and so much more we will be doing that in the CSS part of this course so by now we have had a very quick look at how do I offer elements this included the paragraph element and heading element now let's put what we learned into practice by creating an online recipe for macaroni and cheese so the first thing we're going to do is think about the website structure I would like my recipe page to have a heading followed by some sort of description an ideal element to hold the content of a description would be a paragraph element after this I want to use a smaller heading as a subtitle to let people know that this section is for the ingredients necessary after that I will need some sort of list to list out all the ingredients and next another subheading followed by the instructions in a numbered fashion wonderful I think this is a good start now let's get to actually creating this with HTML so first off I'm going to ask you to create another folder on your desktop this time I want you to call it HTML project one once you have done that I would like you to use what we have learned in order to create an HTML file in the project called index.html as well as add the correct boilerplate to it in order to get started please post here and have a go at doing this once you are done let's go through the solution to getting this done together okay so what I would do is well first off I will just open up vs code so please go ahead and do that and now I'm just going to open up that folder we just made so that directory just made so just go ahead and on your desktop find it click on it and open it up so there we go there's our empty directory or in other words empty folder and all I'm going to do is just create that index.html file so to do this I'm just going to click on here and I'm going to call the file index and I'm going to give it the HTML extension so dot HTML in order to let our code editor know to treat this like an HTML file wonderful now that we have that let's get going with our project so first off I'm just going to put in my boilerplate code I've just taken this from the previous project I have not remembered it please don't try and memorize this okay just make sure that you have your HTML element your header element and your body element and the body element is essentially what's going to hold all our visible elements next also make sure you have the meta tag up here as well so that we can see all the characters that we need okay so our project is looking good at the moment there is a few things we need to do outside of the meta chart set the other thing we have in this head element is the title that is going to hold the title of our project it will not be visible in the browser once again it will be visible in the tag and will also be visible as a title in Google search results okay so let's go ahead and call this something I'm going to go ahead and call it recipe as that is what best describes what this webpage is gonna hold the first one I'm going to put in is the H1 element by choosing the H1 element I am also doing something behind the scenes search engines indexing our web pages will consider the contents of the H1 heading more important than that of an H2 heading for example without any headings at all our page will perform poorly in terms of search ability online or in other words poorly in terms of SEO one other thing that is happening is that we are defining this as the most important heading on the page for screen readers used by the visually impaired if no headings are provided users of the screen reader will not be able to jump from heading to heading and instead will be forced to read all of the text on the page as a lump of text once we have a heading I'm going to move on to using a paragraph element for our description so here is what our paragraph element will look like now we can make certain words or phrases more important in the paragraph by using these strong element inside of this paragraph element we would do so with the strong tag Now when using a screen reader this word will be read out in a different tone of voice now we can also visually see this has been applied bold styling however if we do not want the screen reader to read this out differently and just want to make this word look bold we can use the ball tag instead other things we can do is emphasize using the EM element once again the screen reader will use a different tone for this and if we just want to make it look italic we can use the eye element like so and great I think we should now check this out in the browser so what it looks like in the browser next before doing anything don't forget to save this file once again a shortcut to save this file is to press command s on your keyboard so please go ahead and do that you will see the little dot disappear at the top of the file tab now in order to actually view this file on the internet you're going to have to get the actual file so go ahead and left click on it and then just go ahead and copy the path so this one right here that first one get up your browser and paste it like so and there we have it we can view that whole file in a browser you're viewing your local file on your computer on your browser right now great now let's add a subheading for our list of ingredients so by now we know that a subheading is any heading below our H1 heading I'm going to choose the H2 heading element for this and wonderful now it's time to look at lists in the next section in this section I want to talk to you a little bit about the readability and presentability of code for this in HTML I'm going to talk about indentation and spacing indentation and spacing should be consistent throughout your code we can use either the four space or two space indentation in HTML this means that each nested element should be indented exactly once inside their parent tag by either four spaces or two spaces okay so as you can see here is what it looked like when it's all beautiful and neat with four spaces of indentation as you can probably see everything is a bunch more readable everything is kind of lumped together and you can see which opening tag and which closing tag go together just like the top article tag and bottom article tag this is in contrast to Bad Code like this I mean you can hardly tell which tag is starting where what the parent elements are which makes this overall a lot less readable than the previous version trust me this would make it much more difficult when debugging and trying to find tags that go together in the future another thing you should do is format lines so for example in this case you'll see that the text in my paragraph element is too long I would suggest splitting it out into multiple lines okay so kind of like this okay so this was just a quick break to talk about indentation and spacing please keep an eye on this moving forward in this section we're going to learn how to make a list such as this section right here that shows the ingredients of a recipe as well as this list right here a ordered list that shows these steps in making our wonderful macaroni and cheese list elements are actually made up of at least two elements a wrapping element and the individual list item elements themselves your list can be an unordered list like this one meaning that the order will not matter or an order list an unordered list is however perfect for listing out the items that we need to buy in order to make macaroni and cheese as the order in which we buy them doesn't matter the wrapping element for an unordered list is this UL element right here and of course we have the ordered list an ordered list will give order to our list items so just like we see here we get one two three the element in order to make an ordered list is Ol as you can see by the wrapping element right here as a default the order list comes numbered like so but we can also change it to be lettered no matter which list type you choose so the unorder list or the order list it should have the list item elements inside once again these Syntax for a list item looks like this it comes with an opening tag and a closing tag that will take content inside the list item element in this case it is some text but it can also be much more let's have a look at this in code okay so the first thing we're going to add is as we discuss an unordered list add the ingredients as the ingredients do not need to be in a specific order right because it doesn't matter what order we buy them in we might already have some in the kitchen or we might need to buy some more it really doesn't matter to us so let's get up our unordered list element which we now know is made up by these two tags with UL in them like this next let's open it up because it's gonna have to take some list items so let's put in our list item elements they are made up of the LI tags and opening and closing tag and we're going to put in seven of them so there we go I've just gone ahead and created all seven each with an opening tag and a closing tag that will take content inside of each one okay so as a reminder the content does not have to be just text it could be images it could be a bunch of elements nested inside of each other that really is up to us in this case however I'm just going to put some text okay so let's go ahead and do that I'm just going to paste it in from somewhere I have written previously so I'm just going to put it in for all seven of these list items I'm just putting in some text and it's the ingredients for macaroni and cheese okay so there we go we now need to save this page so save it pressing command s and let's check out what this looks like in the browser don't forget that we of course need to refresh our browser to see those changes and great there is our unordered list now that we have finished this let's move on to make our ordered list so once again just like before I'm just going to put in an H2 title okay so this is a subheading that I'm going to put in it's just going to say how to make it and underneath that is where we're going to put our orders list element so the wrapping element that will take list item elements so ol is the tag that we're going to use is going to have an opening and a closing tag and inside of it I'm just going to go ahead and put in three list item elements this time so please go ahead and do the same put in three and I'm just going to paste in these steps into making macaroni and cheese so they're pretty simple it's just going to be brewing a pot of water to boil next I'm just going to paste in a longer sentence okay so you will see I have formatted it to put it on different lines so we can see it and finally just the final this item element and that's going to say add cheese and macaroni and that's it how simple is that so simple recipe we're not going to win any Michelin stars for this but we will have a cool recipe web page that we have built so once again don't forget to save this page pressing command s and then go to your browser and refresh it so we can see the latest version of the document and ta-da there we have it our order list is now on there too in this next section we're going to look at links links are great as they allow us to essentially link to other pages on our website link to specific Parts on a web page that we built link outside of the webpage that we built all together and some are completely new on the Internet or even open up a prompt to email someone or call them a link element syntax looks like an a element like this and stands for anchor so if you hear someone calling in anchor link do not be surprised let's look at what makes up a link element now so we have the opening and closing anchor tags in between these Tags I'm going to put some text so that our browser knows that if we click on this text it will take us somewhere so for example I could put the words my YouTube channel here is what this will now look like in the browser so it just looks like some text for now nothing special at the moment of course if we click on this link it won't do anything we have not given it enough information about what we want to happen if we click it and why we want this link to take us to do this we need to Define where we want the link to take us using the href attribute we put the href attribute in the opening tag now in the value if we want to link it to my YouTube channel I would take the full path to my channel and put it here okay so now let's save this refresh and check it out and wonderful if we click on the link we are now taken to my YouTube channel page we can also use links to open up a mail option or option 2 call all you need to do is put the mail to prefix followed by semicolons and the email address you want to populate to your email recipient address with so here we go and if we save this file and go to the browser and refresh you will see another link if we click on this link however a prompted email we will show up we can also add a hyperlink to prompt calling so once again we will get the anchor tag but this time for the value for the href we will add the tell prefix like this followed by a phone number this isn't my number by the way so please don't go calling this random number and apologies to the owner of this number in advance this time if we save this page and go to the browse and hit refresh then click on the link a prompt for calling that number will show up as mentioned we can also link to specific places on our web page but this time using IDs for this you'd first need to create the element you want to link to let's say this is a heading for example so here we have my heading element as you can see it has an ID that says other recipes and here we have my link element which has a href to the ID okay so hash here represents an ID and we're looking for the ID of other recipes so here we have my heading element as we know using two H1 elements isn't really best practice but this is just an example that I want to show you in terms of how to scroll to another main header so for now I'm just going to allow it and here we have my link element I would have to give my a-links opening tag the attribute of href and then pass through the ID so hash means ID add the element we want to link to so by giving it the value of hashtag other recipes I am now saying I want to link to my H1 element with the ID of other recipes and if I want my page to scroll to the element with the idea of other recipes I would have to give the link the href of the ID right so let's grab the ID and let's stick it up here great I am now just gonna add an unordered list here in order to give length to the page just so that the scroll is more obvious but when we scroll to this H1 element and now let's check it out so save the page first and let's go over to the browser and hit refresh I'm just going to go ahead and increase the size of this page so that it is more obvious everyone for when we scroll so just increase the zoom on yours too if you need so now let's test it out I'm just going to click on here and wonderful we managed to scroll to the H1 element we have now finished building out our recipe project using HTML so give yourself a round of applause I think we did great now we have not covered IDs in full just yet there is a bunch more stuff we can do with them this was just a quick taster we will cover them in more detail later on in this course so by now we know that we can build web pages to link to external resources or link them to specific elements we built in order to scroll to them visibly on our web page another thing we can do with the link element is take a user to a specific page that we built on our site to do this let's go back to our project that we called my portfolio and let's have a look at our project structure first so say we are on the index HTML page right here and we want to access another HTML page one of these Pages for example we would have to write a path from where we are currently in the project tree to this folder called pages and then to the file we want out of these two this is how you would do so so bear in mind we are starting from the index HTML page we are going to go into the folder called Pages using the forward slash I'm going to enter that folder and pick out a file I want to show let's just say that file that I want to show is called abami HTML so let's just specify that in that path Now by clicking on this element we will be taken to the about me page okay let's test it out to see if what I'm saying is true so first off let's make sure we are opening the correct project so let's go ahead and get the project my portfolio so here we have our project I'm going to go ahead and create a directory or folder for our extra pages called pages and in it I'm going to create one file called about dash me.html making sure to not have a space but have a dash and paste in some boilerplate code as well as change the title of the page so that we know which page we are dealing with of course don't forget to save this page now on the home page let's go ahead and add this link that we saw on this slide okay so just added this like so now let's open up the index HTML file not the about me HTML file so save the page and copy the path to the index.html file and paste it into your browser now don't forget to reload the page in order to get the latest documents and let's go ahead and click here and ta-da we are on the about me page it as works now let's have a quick look at the parts to this file here in the browser okay so as this project is stored on my computer I am starting at the root so going into a directory called users on my computer then going into a directory called Annie Kubo then into another directory called desktop and then into the directory that we made for my portfolio enter the Pages directory I just made and then getting the about me HTML file to show up in our browser of course when you host your projects online after buying your own domain this will not look the same I will most likely look something like this but we will leave that to the end now what if we want to link back to the home page from the about me page well we need to navigate back to do this I'll go one level back in the tree or in other words out of the pages folder we need these two dots like this followed by the Slash and then get the file we want to show so let's test it out so back in my project I'm just going to go to the about me page so I'm just going to go right here and add an anchor link with the href and as the part I'm going to go back so the two does mean we go out of the folder and then I'm going to essentially specify which file we want to show okay so that's all I have done so now let's check it out so let's go back to our browser hit refresh click on the go to about me page and here we are we're on the about me page and here's the link we just made that says go to the home page so let's test it out let's check that this takes us back to the home page and it does okay we are on the index HTML page that lives in my portfolio and amazing this is looking great so the slashes that we see in the path are essentially us jumping either backwards or forwards in the tree of my project from folder to folder essentially imagine each of the folders in this tree as a slash and if you follow the path to your next location and pick up a slant it's like you've just added it to the path that you are constructing okay so you're just picking them up like a train same thing for if you are leaving the folders you will need to use the dot dot to go all the way back to your spot in the tree where the train is safe to proceed to get to its destination got it now let's do another one imagine you are in this park called Contact HTML what part would you have to put in your href in order to get to the about me page have a think about it using this graphic of our project tree right here please post here and do that and once you are ready just hit play well as we are on the same location so in the pages folder we don't need any slashes our train literally stops pretty much at the destination so we just put the file name now let's test it out so first let's create a contact page in the Pages directory so contact.html and I'm just going to put in some boilerplate code and once again just change the title to say contact like we just did before with the about me page now in the contact page I'm just going to put another link so another anchor tag and I'm just going to put go to the about me page and of course we need to link this to that page so I'm going to use the href and I'm just going to put the about me page about Dash me.html Okay so just like we did an exercise if we click on this link it should take me to the about me page so this one right here and actually in here I'm just going to put in another link so from the about me page I also want to be able to go to the contact page so let's go ahead and add an a link and then I'm just going to put go to the contacts me page and as the href I'm just going to put contacts.html so exactly what our contact page is called great now let's check it out so save those files go back to the browser and hit refresh and now click on the about me page link and great we see both those links so we go to the home page or we go to the newly made contact me page so let's click that and wait we are on the contact me page we see the title in the browser tab we also see the path going to the Pages directory and getting the contact.html page and we see that link that we made on that page which takes us to the about me page and let's test this one out too and wonderful that's exactly where it goes once again as you can see by the tab name and the path that we have here okay great so hopefully this explains a little bit about how you would navigate from page to page on a website once you have this down let's carry on we are now going to move on from looking at how we can manipulate text in HTML and look at how we can add images to our web pages we have already touched on images before but for good practice let's recap what we have learned so far about this wonderful element in the introduction to HTML we learned that unlike most HTML elements the image element is one of the ones that uses a self-closing tag meaning it only needs one tag like this we also learned that it is the source attribute that contains the path to the image we want to embed this image can be in our project folder and we can navigate to it by writing a path to the correct file so we can use the URL address of an image that is hosted online just be aware that if the person or company hosting that image chooses to take it offline you will no longer have an image here to display you will see this broken URL icon right here instead you will also see the alternative text if you choose to add that to your image element the alt attribute is super helpful in occasions like this when they're linked to the images broken or the image won't load as it will allow the user to know roughly what it was about it is also wonderful for the visually impaired who might use a screen reader to see what is on a web page let's try to put an image on the about me page of our portfolio by putting an image of ourselves okay so I'm going to choose to store an image in my project all I'm going to do is find an image of me so I'm going to choose this Square jpeg so just make sure yours is also a JPEG or a PNG file and next I'm actually going to create a directory so making sure you're on the root of the project so the same level as the index HTML file just go ahead and create a directory called images and it's going to store all our image files from now on so there we go I just created a directory it's on the same level as the Pages directory and the index HTML file so let's go ahead and put an image in there I'm simply going to drag an image in for my computer like this and drop it in wonderful so there we have it that is now done and now let's go to the about me page and once again I'm just going to use this code right here so from the slide and I'm just going to paste it in like so so we now know that we need to get the path to this image and assign it to the source attribute and I'm also going to provide some alternative text just in case this doesn't work for whatever reason or just to make it accessible for everyone so I'm just going to put an image of Amir Cuba you can choose to put whatever you wish now the part to this well once again let's look at the project tree so I need to go back to the root of the project so I need these two dots and then I need to go into the images directory so I need to go into the folder I'm jumping into the folder and I'm just going to put the name of the file that I want to access okay so that's it now if we save everything that we've done so far and just refresh the browser making sure you're on the about me page amazing you will see that image it's unselt at the moment so it might be very big or it might be very small but we will work on that when it comes to the styling section of this course for now this is looking good let's carry on if you are having issues with this at any point the final code will be attached to this lesson so please go check it out in this section I want to show you how to work with tables this is going to involve a lot of nested elements so our HTML elements are getting a bit more complex by the end of this lesson you will have built something like this but don't worry we will build up to it step by step starting with a tiny table first so the simplest table elements can take three types of elements the table row element the table header element and the table data element we would start off by creating the table element which will wrap up all our content nicely so it all stays together inside I need to start off by making some table rows so let's say we want our table to have three horizontal rows I would add three table row Elements which look like this so now we have some rows I next need to decide what kind of columns I'm going to have let's say I want my first column to contain last names and my second column to contain last names I would need to add the table header element to tell our browser we want this to be the name of the column it would look like this now that we have defined the columns names we can fill out the rest of our data using the table data element it would look like this and that's it that's a table in its simplest format if you would like to give your table more semantic meaning for the browser you can also Define that the first table row belongs to the table's head by wrapping it in a t head element and the rest in a table body element so t-body visually it will not change what you see in the browser but it will help your website SEO as well as screen readers know what is going on okay cool got it good because now we are about to put all of this into practice by implementing a simple table onto our portfolio project okay so back on the about me page I want you to put in a table in order to organize our future projects this is what I want the end result to look like so three columns one for the hyperlink to the project which we will leave the href blank for now another column for the title of the project and another column for a quick description of what the project is about and what technologies we used for it for those of you thinking wait this is a pretty ugly table are you sure we want to put this on our portfolio don't worry the fun styling stuff is yet to be done for now let's just get building using the basic building blocks we have at our disposal okay so what are we waiting for let's get to it please have a go at building this Yourself by pausing here once you have built your table unpause and we will go through my chosen solution together okay so what I would do is well on the about me page I would start off with my wrapper element as mentioned this will be the table element as that's going to hold or our child elements together so go ahead and create your table elements so there we go there is an opening tag and a closing tag and in here well I'm going to do the more advanced version of the table so what I'm going to do is put in a t head element as the first child on my table so the T head element looks like this and it's essentially going to hold our head up for our table and then let's put the tea body element as the second child of the table element and that's going to hold the rest okay great so one child and a second child next I'm going to create a table Row for the head so for this I'm going to use the TR element once again it has an opening tag and a closing tag and once we do that I'm just going to put in two of these in the body as well so that we have three table rows in total Okay so let's go ahead and do that I'm going to put in the second table Rook here and then just put in another one great I'm just going to open them up because we're going to put content into here now in my first table row I'm going to use the table header element and we're going to have three of these because we want to have three columns or essentially three table headers and then I'm going to mirror that in the other table rows however with table data elements so that we can sort data for each of our columns so the first table header is going to have project the second is going to have title and the third is going to have description as that is what I want my columns to be called so there we go so now if I refresh the page so save your project and refresh the page I'm just going to make this bigger ta-da you should see right at the bottom are three table column names or in other words table header names great so now let's get to putting in the data so let's go ahead and do that back on my project in the first table data element well I'm just going to put project one and in the second table this element I'm going to put the title of that project is the one we made is the macaroni and cheese recipe and then I'm just going to put in a short description of that project okay so this is what a table is going to look like it's going to have a project it's going to have the title and it's also going to have a short description wonderful and let's do the same for the other one for this one I'm just going to put project two and this is going to be our table tennis leaderboard so let's go ahead and put table tennis leaderboard okay and then again let's just put in a description it's very long so I'm just going to format it a little bit better to make this more readable this will not be shown in the browser this is for us just to be able to see this in our project right now so there we go and there we have it that is our table I'm just going to put some more text in here just to Pat it out of it wonderful so now ta-da that is what our table looks like it's got three rows two for the data and one for the column I think this looks great now I'm just gonna go ahead and add one final table row just to kind of prepare us for what we are going to be putting in in the future so let's go ahead and make that table row let's put in a table data element with project three and of course we haven't made this yet so I'm going to put TBD as the project title as well as TBD for the project description but essentially we're going to add a bunch more projects into here so just so you know what this looks like I've gone ahead and added another table row and wonderful so this is looking great I'm really happy with how this is looking so far of course without any styling yet the last thing I want to do is just wrap the First Column entries in a links so an anchor links because we're going to want to link to this in the future at the moment I'm just going to leave an empty href attribute okay so this will just give this the appearance of links but without actually going anywhere so just do that for all the a elements like so and great so we have now created some links of course they will not work but visually at least this column looks like links this is the final look that I want to aim for wonderful okay so I think we are done with this project for now let's move on now that we have covered some of the many text related HTML elements let's move on to the fun stuff which allows us to create shapes add colors to our website starting with the content division element or in other words the dev I like to think of the div as a beautiful being that could be anything you want it to be we can get the div a height we can give it a whip and we can give it a background color using CSS or another one styling which we will cover in the next section we can also use it in a very basic form without styling to hold other elements together so for example we can create a div put a heading in it and put a paragraph in it and now these two elements will be gripped together so you might think great so with this div I can now group together pieces of information to start adding structure to my web page well not to throw a spanner in the works but you are partially correct the div should only be used if the section element article element nav element header element or footer element don't apply why you ask this is because these elements all have semantic meaning and will be interpreted by your browser to be an element that holds a section an element that holds an article an element an element that is the header of your website and the footer of your website djib does not have this it's like a mysterious ghost let's have a look at some elements with semantic meaning in the next section by now we should know the elements that make up a web page can have semantic meaning this means that the web browser will see them and recognize what the element is meant for this makes it good for users of assistive Technologies like screen readers and they are also good for SEO we have the header element which represents quite literally a header this can hold things such as your website's logo a search bar and other things typically seen in a website's top element the header element is not to be confused with the head element which as we now know holds the website's metadata so all the invisible stuff just like the header element we have the footer element which literally represents the footer of your web page you can put anything you want in the footer however typically you would see something like information about the company copyright data or any links that you would want to give the website viewer next up we have the nav element which represents the navigation bar on your website it will usually contain a menu or a list that will allow you to navigate between all the pages on your website we also have the section element which represents a standard section of a document sections should have headings in them after all think of when you read a book it would be kind of strange to see a new section that didn't have a header for you to know what the text in this section was about right without this heading the element will not appear in the document outline if you do not want to put a heading element in the section perhaps it's not really a section you are after perhaps a div would work better on this occasion the last populous sectioning element I want to cover is the article element an article element can represent things such as newspaper articles a blog entry a product card a user submit a comment or a forum post amongst other things just as with this section the article element should include a heading element nested inside of it now I must stress there are many more semantic sectioning elements to your disposal I have simply covered the most popular ones or the ones that might be a bit tricky however there are all these other ones as well at the time of recording if you have the time I would suggest doing a quick Google of each if you are interested I feel most are pretty self-explanatory so you don't feel like Googling it's fine let's carry on so by now we have covered the most popular text-based HTML elements as well as some semantic sectioning elements and the dip I am now going to ask you to put all of your knowledge to the test by building out this table tennis leaderboard unlike in the first project I'm going to leave you two at this time the goal is to create a directory or in other words folder called HTML project to create an HTML page to go into the project with the correct boilerplate code and then use the elements we have covered to recreate what we visually see here you are of course free to refer to the previous lessons we did in this course so far and don't worry that is in no way cheating no one is expecting you to memorize these things even I still copy and paste HTML boilerplate code so once again this project will utilize everything we have learned so far as well as three new elements that I briefly listed out in the semantic sectioning elements video okay so these three will be used in this project section it is a hairline element which is essentially a line an element that will allow us to write captions and the figure element as well so please go ahead and do some Googling by yourself on these three this is an excellent lesson in Googling and once you are ready please have a go at this once you are happy with your project and you want to see how I would choose to create this page please click on the next video and remember there is no one way to create this page there are literally thousands of ways you could do it so get going and I will see you soon okay so now I'm going to show you the solution to how I personally would create a table tennis leaderboard that looks like this okay so I'm excited to show you first things I'm just going to create a new folder on my desktop I'm going to call it HTML project two just like we decided in the previous video okay and once I've done that I'm just going to open it up in vs code so I'm just going to open that folder so please go ahead and do the same open it up in your code editors just simply by pressing open folder finding that project on your desktop clicking on it and opening it up so great I'm now in my project there is nothing in here at the moment so let's put in our first file so all I'm going to do is click on here and create an indexed HTML page not forgetting to give it that HTML extension to let our code editor know to treat this as an HTML file okay so go ahead and do that and now I'm just going to put in my boilerplate code so as we know for our boilerplate code we can just copy paste it so that's what I've done I've pasted it from another project and now I'm going to put in the title of my project this title will not be visible to us okay in the browser it will be visible in the tab of the browser and it will be visible if you uploaded this onto the internet and search for it in Google okay great so I'm gonna go ahead and call this table tennis so please go ahead and do the same great before we get to putting in anything in our body elements I just want to open this up in the browser so we can see what it looks like so all I'm going to do is just left click on the index.html document right here and then copy the path and then go to my browser and just paste in that URL like so so there we go that is what index.html page looks like and as you will see you can see table tennis in the tab name great now let's get to adding some elements in the body elements so first off I'm just going to put an H1 element and for my H1 element I'm just going to put table tennis just like so so now if we say that file and refresh the page this is what it should look like we can see that H1 element in our browsers great next let's move on by putting an H2 element in here so in my H2 element this is going to be a sub heading and all I'm going to do is put in some text so I'm going to put classroom tournament leaderboard just like so and now if we save this file and go ahead and look in the browser so let's refresh the browser you will see classroom tournament leaderboard showing up wonderful we have an H1 element and we have an H2 element so a subheading element let's carry on next let's get to creating some semantic sectioning in here and first off I'm just going to start off with creating a table so here's my table element it is a wrapping element that's going to take a bunch of other elements in order to create our table the first one being the T head element so just go ahead and put in a t-head element and then put in a cheap body element for the rest of our table rows okay so our table heads element well we know this has to contain a row so let's go ahead and put that in so that is my whole table head and in my table row well I'm going to Define our table headings one is going to be a position heading so just go ahead and put position one is going to be for the name of the person playing in the tournament that that is going to be for if they won or not and the fourth is going to be if they lost or not so it's going to be a count of one and lost tournaments so if we refresh the page in our browser that is what it looks like at the moment we have created four table headings or in other words four table columns great this is looking good next I'm just going to put in some table rows that are in the body so essentially for our data our first table row is going to have a table data element so I'm just mirroring the table heading so I'm going to have four okay so we're essentially going to create table rows for these columns well our first table data cell is going to have the position so we're going to have position one then we're going to have the name of the player who's in position one it's going to be my name Gomez and she's gonna have one five and lost zero so save this and refresh the browser and amazing we have just created our first table row to go on our table let's go ahead and create another one next okay now let's create our next table row so we know how to do this now just go ahead and use the TR tags to create a table row and then in here I'm going to put four table data elements because we want to essentially put data for a position and name a one and a lost value so let's go ahead and do that in fact I'm just going to copy this as we're going to have a few of these so we have one table row let's go ahead and paste another so we have two and three and four and five okay and let's do it so my first single row I'm going to put position two the name is going to be Mohammed Leroy and he's going to have won four and lost one okay next as position three I'm going to have the name of let's go with Patricia Bennett okay so that's the name I have chosen Patricia Bennett and she is one three and lost two position four is going to go to Sam Lehmann he has won two and lost three position five is gonna go to Young Lee he has one won and lost four and then let's do position six as well and this person is Astrid Genevieve and she has won zero and lost five and I think that's it so we just need six so let's save that let's go back to our browser and refresh and ta-da there is our classroom tournament leaderboard we have just completed our table this is looking great so let's carry on the next thing I want to do is just put in a line and for this I'm going to use the HR element that I did say to Google previously so if you Googled it you would know that the results would look like this and it's just a nice way to split this out okay wonderful so we have just split this out by creating a line thanks to the HR element which looks like this let's move on the next thing I'm going to ask you to do is put in another subheading this is going to be smaller than the other subheading we have so I'm going to use an H3 element for this so please go ahead and do the same just use your H3 element and put in the title or the subtitle of rules of table tennis and a colon just like so so just like I have now the rules of table tennis this was an ordered list so I'm going to choose use the ol element so here are my ol tags and inside I'm going to have to put list elements now first this element is going to contain the texts of games are played two and then I'm going to make a bold number so I'm using the Bold tags or if I want to give this semantic meaning to the browser I can use the strong tags so each was fine to use okay whichever one you use is okay and then I'm just going to put space and points great our next item is going to have the text of alternative serves every two points are mandatory and this time I'm going to put the number 2 in strong so let's just get up on strong tags and I'm just going to put the number two in there great let's just minimize this for now let's make our third list element so our third list element this one is going to have the text of make sure to toss the all straight up when serving okay so that is my thirdest item let's check it out so say that page on refresh and wonderful so we've just made our rules of table tennis it is an ordered list and you can see the 10 and 2 are in bold so that is looking great let's carry on now what else do we need to create well I just want to create a paragraph element that's going to take some text and that text is going to be in italic so I'm going to use the I element for this okay you could have also used the EM element if you wanted to give the page semantic meaning but I'm just going to give it the I element from now so again each one is good in here I'm going to put official rules can be found on the international making sure to spell International correctly table tennis website so that is now going to appear italic on our page and I'm going to actually hyperlink here so to do this I need to get here and put it in some eighties or the anchor link and next I need to give the anchor link First tag so let's just space this out a little bit making sure that the indentation is correct so let's just make sure that those eye tags are on the same level and the P tags are on the same level next to make this link work I need to give the first tag of the a link and href attribute and I'm just going to go ahead and type in the URL to the actual International table tennis website so this is it for all of those curious okay that is the link to the international table tennis website great so now if I refresh this amazing we get some tags in italic and the here is hyperlinked and if we click on it it does take us to the official table tennis page how cool is that let's carry on let's just make the official Spell correctly first and great next I'm going to put in another line so let's go ahead and use our HR element again now I'm going to put another subheading so I'm going to use my H3 element again and this time I'm going to have the game set up so game setup is going to be my subtitle now I'm going to have a p element in here and this is essentially just going to give us some more information so it's just going to say the game should be set up as per the table tennis tournament at Liga Pro okay so just giving some insight into how the table tenants table should be set up and finally I'm going to show a picture of this so I'm going to use the figure element this is another element that I asked you to Google in the previous video so hopefully you did that and this figure element okay so for this we're going to actually have to put in an image element in here so go ahead and do the same it's a self-closing tag and then for this image we can have a figure caption so that is my figure caption element the third element that I asked you to Google in the previous video so hopefully you did that as well great now in my fig caption I want this to appear in italics so I can use the eye element or I can use the EM element if you want to give it semantic meaning that is up to you and I'm just going to give this image taken from Wikipedia okay so that is what I'm going to do and I'm actually going to hyperlink Wikipedia too so just whack in Wikipedia here and as the opening tag of my a element I need to give it the href attribute along with the link to Wikipedia which is this for table tense great okay so this is looking good let's go ahead and find an image so just whack in that Wikipedia URL and then copy the image address to this table tennis image and then as the source of this just put in the URL to that so as long as that web page exists as long as that picture exists this picture should appear in our own project so just go ahead and do that or you can put a picture in here okay that is up to you just like we did previously you can put a picture in here that you uploaded and made an image directory you could have done it both ways both ways are absolutely fine so I hope you did either of those or if not let me know what you did finally I'm going to put an alternative tag to this image element so I'm just going to space it out so we can read it a little bit better and put alt as the attribute and then some alternative text which in this case I'm going to have table tennis tournament as great okay so this is looking wonderful so far shall we check it out on the browser I'm just going to space this out a little bit so it's more readable so essentially I am just putting everything on new lines and making sure that each element is essentially in line with each other in terms of indentation okay so that we go each nested element is more indented than the other wonderful this is looking great that is my whole URL so now let's recap what we've done so we add in an H3 element as a subheading we added a p element as a subheading so now this is a lot I think we've done well one other thing we probably should do as all of this game setup is essentially associated with each other we should probably put it in a section element to hold it all together and we can do that as we have an H3 element so we have a title so let's go ahead and create our section element so our section element looks like this and in here we're essentially going to store all of that that's associated with game setup so there we go that is it and finally let's format it to make sure that all the tags are indented on the same level and that each nested element has indentation as well great let's do the same for the rules of table tennis I'm just going to put that in its own section so there we go and now let's format it so that each nested element is on the right level and great so now let's check it out save that page refresh and there we go that is what our table tennis leaderboard looks like it looks amazing it looks exactly like we wanted you to it looks exactly like the image that I showed you at the beginning I hope you also have this and if you've done it in any other way please do share your code with me on Twitter please either paste a link to your codepen or a picture of your code I would love to see foreign s I'm going to be focusing on creating forms forms are a fantastic way of submitting a bunch of information together we use them on sites to get back feedback write in or even sign up and log in forms are made up of a bunch of elements that are nested in between the two form tags some typical tags that can live inside the form element are the input elements label elements or field set elements however you can technically put in any elements you like the form opening tag can take certain attributes it can take the action attribute which takes a URL that will take care of the form's submission as well as the method which takes the HTTP method to submit to the form don't worry about this for now as this is an advanced topic we will cover later or you need to know for now is that the input with the type submit is how you would essentially trigger the action attribute with the method attribute to submit form data when you wish the input element with the type submit generally does not need a label element associated with it this is unlike an email input for example which would benefit from having a label element in the next section we are going to look at the other types of input types as well as the various attributes that we can use how an input tag looks and works wholly depends on the type attribute and the value you assigned to it by default if no type is provided it will take the form of a text input to use the text type here is a full list of the different types available to us I'm not going to go through all of them as some will be self-explanatory but to help you get the gist of how input types work let's whiz through the most popular ones now try to remember them as there will be an exercise straight after this so let's start with the text input in fact the Ember element like I said will default to the text type even if we don't Supply it with a type so this is an easy one to remember we can also add other attributes to the text input for example we can control what the minimum length of text and or maximum length of text can be with the mid length and max length attributes we can also add a placeholder to provide a hint as to what type of text we want in here we can also make it required with the required attribute or we can make it read only if we start working with JavaScript we might want to use the name and value of the input so we can work with it in a more readable way this means that we can send over the value of what we put into the input along with the input's name if we have loads and loads of inputs in our form in this case it would be first name Anya next let's look at the button type if we take the input element and assign the type button to it it will look like this so a button at the moment and of course won't have any functionality but it certainly does look like a button doesn't it we can also add a value in order to change the text inside the button too another attribute that goes in the button element can be disabled this will visually disable the button and prevent users from being able to interact with it now what if we switch this to a checkbox type well we got a checkbox visually that we can choose to tick or untick it can also take a value however this time this is not displayed in the browser or in other words on a client side it is used on the server side so that we can take the value of the checkbox and use it for our Computing needs along with the checkbox name this means that when the form is submitted the data name value pair will be subscribe newsletter if no value is supplied the new value pair would simply be subscribe on if the checkbox is ticked next up let's see what happens if we change this to be a color type the Empire element then takes the form of a Color Picker as we can see here we can click on the element and then drag the cursor to select say color which will generate an RGB value for it or a hsl value or a hex value we can also choose what color we want to start on by assigning a value to the input element now let's move on to the date type by supplying the date type we are creating an input that looks like this so essentially a date pickup with a year month and day when active in supporting browsers this input is fun as we can of course set a default value using the value attribute but we can also set a Min and Max state this means you will not be able to select dates in the date picker outside of this range and if we change this to date time local an option to select the time will show up to next up let's look at the email type now this might look like a normal text input but it has certain validation parameters meaning it won't accept the field unless you give it a at sign and a domain we can actually change these validation parameters by using the pattern attribute and using regex regex or regular expressions are rules that govern which sequence of characters come up in as such there is much to learn on Regis which we will not be covering in this course but if you would like to know more about how to write these rules please check it out in the link below in addition to the pattern attribute we can also have other attributes such as max length Min length multiple for multiple email addresses and placeholder for displaying some placeholder text next up we have the radio type you might be thinking hold on this is just the checkbox type of the circle well there is one big difference only one radio button in a given group can be selected at any point in time this is different to the checkbox in which you can select multiple check boxes here is what a group of radio inputs can look like and behave like we can even give them label elements and Link them to the respective input with the full attribute which correlates to the radio elements ID the range input is another fun one in that it has this cool slider we can set a bin and max range for the slider as well as hardcore the value it is currently at with the value attribute if we want to increment the slider to our biggest steps we can do that quite literally with the step attribute too and finally the last input type I want to show you is the submit type which we briefly touched on already just like the button type we can change the text and the button using the value attribute however we should only use the submit type to actually trigger submitting the form the form element and the input or the type submit are linked if you want to have other uses for the button inside the form and write your own custom JavaScript such as to update the value of an input dynamically or select something I would suggest using the button type and that's it we have just covered the most popular input types let's move on with some exercises foreign everything we have learned so far in the last section on inputs in order to really hone in our skills all about inputs so we're going to have three exercises we're gonna have to replicate what we see visually with code so to do this let's create a kind of scratch bar that we're going to work with so all I'm going to do on my desktop is create a project that I'm going to call classwork so there we go there we have our classwork folder and now let's open it up in vs code so go over to vs code and find that project so go ahead and find it on your desktop click on it and open it up okay great and now what do we do well we need to create our index HTML file so go ahead and create an index HTML file making sure to use the HTML extension okay so that code editor knows to treat this as an HTML file and there we go step two is going to be to add the boilerplate code so please paste some in from a previous project and let's just call this scratch pad for now great please go ahead and save this file now let's open it on the browser by grabbing the path and pasting it in the browser like we've been doing so far great now that we have that done let's continue so now that our setup is done let's have a look at the exercises that we need to replicate so for exercise one I want you to create an input that will take an email and it's obviously a company email that takes a certain domain so please take that into account and also take into account the fact that this has to be an email so three things here and you also have a placeholder visible so that is also something you're going to have to add and of course we also have a submit button that will submit our attempt at putting in an email so let's go ahead and do it I'm going to lead you to this I will however lead you with the knowledge that all of this has to come in a form element okay otherwise it will not work as intended when submitting okay so here we have the form element now please go ahead and make sure all your work is done in between these two tags so I'm going to leave you here please pause here and unpause when you're ready to go through my solution together thank you okay so what I would do is and of course this is just my solution there are many ways to do this is first off I would create an input element so let's go ahead and create one like so so it is just one tag like this and I'm gonna go ahead and give this the type of you guessed it email so there we go so now if we look in the browser and hit refresh I'm just going to make this a little bit bigger we have the input with a type of email right so it looks like a text type but we know it has a different semantic meaning and different functionality so now let's go back as we just add a few more things into this input element and also I'm also going to add a label element as we did see that in the example and This is 40 below input so let's link it up and how do we link it up using for an ID so let's add the four attribute to the label and let's add the ID attribute to the input so let's go ahead and give this the ID of emot input you can go ahead and call it whatever you wish and now let's grab that ID and just paste it into the four attribute on the label so now both are linked up okay we've just linked it up using before an ID attributes great let's go ahead and add some tags into the label I'm going to just go ahead and put please use a udemy.com email okay just like so so now if we look in here ta-da the label is now showing up this is looking good the next thing I want to work on is the placeholder so to add a placeholder I would do this on the input tag it's going to minimize this for us and I'm going to put placeholder and I'm just going to put Ania at udemy.com of course I don't work at udemy so this is fake let's go check this works um great we will now see some placeholder text that will be replaced as soon as we start typing now let's go ahead and add something else visually and that is the submit button so we know by now that we don't use an actual button we're going to use an input with a type of submit and that input will trigger submitting the form as both are linked so let's go ahead and put an input with a type of submit so just like that and refresh the page in order to see it as a default the value of this is submit but we can change it with a value attribute so let's go ahead and do that I'm just going to put that in like so okay so there we go however right now I can go ahead and put Dan at dan'sworld.com and sign in and that will submit okay so that has technically worked it is refreshed it's technically submitted we haven't put any extra functionality at the moment so our form by default is just refreshing the page but we know that we need this real udemy address right so we would like an error message shown up to do this we need to add the pattern attribute so my pattern attribute well I'm just going to add the string of Plus at udemy.com and now I am saying that I want the domain to be udemy.com for the email I'm just going to space this out so it looks a little bit more readable at the moment okay so just go ahead and do the same great so we have just added the pattern make sure there's a DOT there let's check it out so now I'm just going to refresh this page to load the changes and type Dan at dan'sworld.com and try to sign in we get that error message so there we go we have essentially blocked other email addresses from signing up just like when we do a d that won't work it will say there's no email present so now we've officially made some validation happen on our email great so the form is not submitting it's not refreshing so we are being stopped from signing in wonderful so we have now completed exercise one this is how I would solve it however if you have done it another way then please do share that with me on Twitter I would absolutely love to see okay so look forward to seeing your Solutions over there in the meantime let's move on to exercise number two in exercise two I would like you to build this range input that will essentially allow us to increment the steps by 20 in order to get from 0 to 100 to percent of this range okay so that's all that I would like you to do for this exercise please go ahead and do this once again the main body will be zero and the max value will be 100 and I want the increment to be in 20s in addition to this I would like the default to start right here okay so make sure to make that happen as well as well as add a label to the input so please go ahead and do this and once you are happy with your solution we'll go through a solution together okay so first off I would just start off by putting an input element and assigning it the type of range so a range that is very smooth in its movement so there's a few things that we need to change so we need this to increment in 20. so let's go ahead and add the attribute of step with the value of 20 so that if we now refresh our page our range input will now look and behave like this so not as smooth but it's incrementing in 20. so let's carry on the next thing I want to do is just give it a Min and a max value so I'm going to send meant to be 0 and Max to be 100 so just like this if we actually change this to be an 80 well I'm just going to show you what happens I'll step that implements in 20 has four steps as 4 times 20 makes 80 so that's four steps but we want this to be a hundred so let's just go back and change it to be 100. great so as default this will be 100 but I just wanted to emphasize that by putting it here next I also want to code these start values so I want this to be at 20 because I want it to appear around about here so that's exactly where it is I just hard-coded 20. and finally let's just give it a label so I'm just going to use the label element for this by creating a label element and then putting in some text this text is going to be volume and now let's link the label to the input using the for an ID attributes so four I'm going to put volume input and for the ID I'm going to put the same so volume input so great they are now linked so we've done it we have our input it's looking exactly like the exercise at the beginning now you should actually put this in a form element like I said so if you want to submit this eventually two things you will need are the form elements like so as a wrapping element as well as the input or the type of submit okay so if you would like to submit the value of this input with the type of range those two things will be needed great so this looks great I hope you've enjoyed this exercise please do share your solution with me on Twitter via the link below if you've done this another way I would absolutely love to see and finally for the third and final exercise I want you to essentially build out this form that will allow us to pick one of the three options about how our experience was at a theme park so this is what I want you to build you're gonna have to think of a way to pick out one option out of a bunch of options and then submit it via a form so please think about this pause here and I'm excited to see how you do this by yourself and then go through a solution together so see you in a bit okay so I would do is well here we have our form first off I'm just going to create an H1 element okay because this was bigger than a label so I'm going to use the H1 element for this and I'm going to put how was your time at Happy Land okay so that's what my H1 element is going to look like now we can have this in the form that is absolutely fine okay so I've decided to put in the form and next we need to decide what kind of input type we're going to use for the multiple choices the type I'm going to use is Radio why radio and why not checkbox this is because the radio will allow us to choose one of the three options and not allow us to select multiple options like the checkbox type so in the input I'm of course going to have the type radio but I'm also going to give it a label the label is going to say bad and I'm going to link it to the above input we'll do for an ID attributes so let's link them up by the same name let's have bad input and let's put the ID as bad input as well great so there we go and for good measure I'm just going to give this a name just in case you know in the future we want to link this up to JavaScript we don't really need to do this now but I think it's good practice to start adding names to these types of inputs so as a name I'm just going to give this the name of experience okay because it's all related to one experience so well done if you choose to add that name attribute there you're already thinking about the future so let's check out what this looks like at the moment great so we've got our bad input let's let's create another input so let's go ahead and use the input element and create a label for it this is going to say okay let's link them up using the for and ID attributes and I'm going to put OK input here and give this the ID of ok input great now let's also give this the type of radio and leads essentially link it to the other input by the name attribute of experience okay so once again when it comes to JavaScript this will be important for when we want to essentially get the value of our inputs for the type gradient in addition to having this name attribute for when it comes to work with JavaScript we're also going to have to give both of these a value so remember a key value pair made up of the name and value so I'm just going to give the top one the value band and the second one the value is okay wonderful once again these are important for the key value pair for when we start working with JavaScript it's not nearly necessary now so if you don't add them don't worry and now the final input let's go ahead and create that input element let's go ahead and create a label element this one's going to have the text of good and let's look them up with the for and ID attributes let's call this Good input and give this the idea of good input and give this a type radio and again give it the name of experience and value of good wonderful we are now done so this is how it looks like on the radio inputs we can also have one checked as a default if we want simply by adding the checked attribute so I'm just going to go ahead and do it on this one and that will mean that this one is checked by default and of course we can change it and we are not selecting multiple ones as you will notice right now wait the final thing we need to do is just add an input with a type of submit that has the visual appearance of a button but essentially it will allow us to submit this form if we click on it along with the value of the one we've chosen hopefully in the future when we hook this up in JavaScript and there we go once again I hope you had fun with these exercises please do share them with me on Twitter because I would love to see what you have done with yours otherwise let's continue in this next section we're going to talk about the select element in order to create one ourselves this select element allows us to select an option from a drop down menu and looks like this so we have this select element which we will name with the name attribute for when we want to pick it out with our JavaScript and then we have all these option elements nested inside of it now each option element has a value again for when we need to pick it up with our JavaScript and then the text of what we want to see visually in the browser in between the two option tags this select element is usually accompanied by a label element which is linked to the select element with the for and ID attributes so that is the code for writing a select drop down and this is how it behaves it is for this reason that it could be wise to have the first option element contain new tags please choose an option with no value so just an empty string to represent nothing being chosen even if we click on it but this is not required one other thing we can do is hard code these selected value by using the selected attribute on the option element on this select element itself we can have many attributes some of these include the disabled attribute that looks like this the required attribute or the multiple attribute to be able to select more than one option got it good now it's time for a little exercise okay so let's get to practicing what we learned in the previous section by building a select drop down so this time we're not going to be using snacks let's go ahead and recreate what we see on a e-commerce site by having a drop down of sizes so we're going to have extra small small medium large extra large and extra extra large okay so let's go ahead and do it first off we're going to start off the label right so there we have our label and this label is going to say select your size and next under here we're gonna have this select of course so it's going to have an opening tag and a closing tag and I'm just going to pause here and ask you to complete the rest of this exercise next so once again it's a drop down for an e-commerce site that will allow us to pick sizes for our garment okay pause here and let's go to the solution in a bit okay before we do anything I'm just going to link up the label to the select with the for an ID attributes as a reminder I'm just linking the label to the select or this attribute so let's make sure that these are the same I'm going to have a size list and size list right here for the id2 okay so there we go and now let's add some options so my first option is just going to have the value of blank I'm just going to leave it a blank string and this is going to say please select your option so there we go our first option is essentially a blank value and our section option is going to have the text extra small next we're going to have another option or the size small and then we're going to have a third option let's actually just paste in a few with medium large and extra large and then one more for extra extra large Grace so there we have it visually this will look fine but we know we have more to do we need to add a value to this as well so that when it comes to picking this up JavaScript we are prepared so let's go ahead and give this the value so I'm just going to give this a readable value for when we need to pick this out later on and it's just going to be the string XS this value I'm going to give the value of s here I'm going to put an M for this one I'm just going to put an L for this one I'm going to put the value of XL and you guessed it for the last one I'm just going to put the value of x Excel and there we go so this is looking good and for good measure we of course we know we need to give the select a name and let's go ahead and call this sizes so once again this is for eventually picking it out with JavaScript so now if we look in here we can select our size and we can see the options now if I was to change this to be extra small like so and Save you will see that that has changed however I'm just going to put that back to the way it was if I put extra small here nothing will change okay once again this is because this is for our JavaScript and should actually technically be written as one word or two words connected by a dash in order for this value to get picked up okay so there we go that is some knowledge for you for when it comes to picking stuff up without JavaScript later on and wonderful so that is our select exercise done I hope you enjoyed it let's move on now I just want to take a quick break to talk to you about the inspector Google Chrome's inspect tool can give us a lot of information about what is going on in our browser in fact it can show us exactly what code we are sending to the browser and in what state I'm going to show you how to inspect this browser to our browser right here now so here we are back on our select exercise that we just did and here is the select drop down that we just made now if I go ahead and left click on the browser while pressing Ctrl on my laptop you will see this show up I'm simply going to click on the inspect tool in order to get up this inspect tool for us this will show us many tabs including the elements tab which will show us the elements making up our web page that we are viewing as you will see this is exactly our document that we're working on so you will see the HTML element you will see the title element that we give our document and you will also see the body tag in which we added a label element and the select element with all the options that we just coded just right here so this is pretty cool and we can now hover over so we can choose to select items in our browser which will show us exactly which element we are selecting or we can select them here so just click on that and select maybe this label and this will show you that label in the browser along with the size of that element along with any styling that has been applied to it at the moment there has not been any styling added by us this is just the default styling under the Styles tab what is also cool is that we get a console we will not be using this now but we will be using this in the JavaScript section very heavily so just keep that in mind so this is the inspect tool it's really useful for us as developers now and especially in the future now I feel like I've saved this one to show you as I am really fond of the data attribute and I want to talk to you about how you can make custom-ish attributes to give us flexibility HTML5 allows us to store extra information on standard HTML elements using the data attribute the Syntax for it looks like this we can of course have data or we can have data Dash and put in whatever word we want to make a custom attribute now why would we want this well we can have a div that's served like a card so here we go here is my div styled like a card okay so I can't wait to show you how to style stuff in the CSS part of this course but for now just stick with me now say I want to flip this card and display some text such as a question and two possible answers we can actually store that information on the div itself without actually visually seeing it we will do so like this so we can have data question data option one or data option two so now that information is stored on the div but we can't see it with our eyes on the div so for example we can sort a data question attribute that says what color are the carrots okay we can also store another attribute so let's have data Dash option one which will give us an option of let's say blue and then we can also have data option two that will give us a second option as well that we are storing on that element let's go with orange so that's a lot of information that's custom information that I am essentially putting on an element now with the magic of JavaScript we can then get these attributes and show them and they did on the click of the element but we will leave that magic for when the time is right now it is also worth noting that this information is not fully secret and is still on the client we just can't see it visually however if we inspect the browser like we just learned and look at the HTML document that makes it up we can see that information here if you really want something to be hidden you would have to store it on a server and retrieve it when you need in this section I want to talk to you about how you can add little notes in your code that won't affect anything in the browser but why do this well as developers we might want to annotate things we have done things we need to do or simply leave notes for another developer that comes along in the form of an explainer or to do action item for beginners I would strongly recommend annotating or in other words adding pseudocode as often as possible all you need to do is make sure the text you and add is in between these these you can add this manually or in vs code you can highlight the text and press command forward slash so for example here we have some code if I wanted to add a reminder on the form that I want to add another input I can simply write some text that says to do and then I would comment out by highlighting the code and pressing command forward slash obvious code so that's what I've done or you can manually add the characters you see at the beginning and end of this line another thing you can do as mentioned is put reminders so add code to yourself so for example here I'm going to remember the pattern can take regex Google this later so this is great for as a beginner you can leave yourself little notes about what certain parts of code does or little reminders about what we learned in that lesson so once again two copies out just highlight it all and press command forward slash on vs code and finally we can also add little reminders to other developers too so for example if you're sharing this code base with someone and you think they might not know the intention of some code that you put you could leave them a note so for example I have put this input will trigger the action on the form when provided because of course we have not provided an action on this form by at least this lets someone know that we have thought about it okay great so there we go hope this was useful that is how you can comment that code so that it's not visible in the browser foreign that's it for the HTML section let's recap what we have learned so wheeler what exactly HTML is or hypertext markup language and how we can use it we also learned how to create our first HTML page using the correct anatomy and use it to create a recipe page together using popular text elements we then learned about how to navigate between Pages or do different things altogether as well as about semantic sectioning and elements we also learned about The Versatile dip which is essentially a great shell to create anything and use our knowledge to create a table tennis leaderboard after that we looked at forms and input options as well as how to create our own costume-ish attributes phew so we learned a lot now where to go next well I would really strongly recommend going over everything we have learned so far and try built out another recipe page okay so this time perhaps a different recipe than the one we previously did and add it to your portfolio next I would try build a Wikipedia page clone so similar to the format of the table tennis leaderboard I would like you to use your knowledge of everything you've learned so far in order to build a Wikipedia page next I would also like you to try practice your Googling we did a little bit of practice in Googling so far in this tutorial but you're going to be needing it a lot more as you progress positive develop in CSS especially there are many many properties and attributes that exist so being able to Google them correctly is definitely a skill that we should acquire if you have time I would also suggest looking at the remaining HTML elements that we did not look at in this course as mentioned at the beginning there are over a hundred so please take some time here if you want to familiarize yourself with the ones that we did not cover I do think most are pretty self-explanatory so if you don't want to do this don't worry next I would suggest also playing around the inspector that we are now acquainted with please go ahead and search random pages on the internet and inspect them using the tool seeing what they have under the hood and finally let's get ready for some CSS this part is going to be great as we're actually going to learn how to make stuff look pretty in our browsers so see you thenhello everyone here on the free curcum Channel my name is Anu Kubo and I will be your Guide to the wonderful world of coding this tutorial is for anyone who has never touch code before and would like to get started with the basics such as where to even write code in the first place and how do we get text images and even tables and lists showing up on our web browsers for this we will focus on getting the right tools we need in order to get started as well as a fundamentals course in the HTML language or in non-code speak the thing that gives structure to our websites and apps this two-hour course is actually the very beginning part of my full stack coding course in which we go further and learn how to style things up using CSS make our code actually do things using JavaScript learn how to work with apis or in other words plugins such as this core map API right here in our travel app we built learn how to work with databases as well as builds are secure backends using node.js and express and on how to build apps that we can sign up log in and log out of while using popular front-end libraries such as react so that we have a full and experienced resume that we write together in which we can showcase projects out of the 22 that we built okay so what are we waiting for let's get to it so before we get started with anything let's talk about the tools we'll be using in order to help us code the most important tool we developers need is a way for us to write and edit code we could technically write our code in a text editor like this but luckily for us technology has evolved and we can now write code in code editors that are built specifically to make our lives easier as developers by Auto indenting lines and adding color-coded helpers for readability some code editors even go a step further and give us prompts when they detect that we have made an error this makes debugging code a heck of a lot easier there are so many current addresses out there some are hosted on your computer and some you can access online meaning you don't have to download anything you can just use it it is also worth noting that is sup up from a code editor is an IDE or integrated development environment it essentially does the same as a text editor a code editor but also acts as a compiler all in one space as well as a bunch of other stuff this tool is a bit too robust for what we will be needing in this course but it is worth knowing the difference between each of these tools today hybrids of these tools exist so it is much harder to fit a specific technology into one of these categories there are many types of code editors out there as mentioned we 've ones that we can download directly onto our computer and ones that are hosted online for this course I'll be showing you how to use one that is downloaded onto your computer I'm going to be using the code editor vs code I am doing this for no other reason than I had to choose one but if you would like you have all of these other code editors Ides or hybrids of both to choose from for those of you who would like to get coding straight away without downloading anything onto your computer you also have the option of these online code editors please take a moment here to decide which choice is right for you okay so by now we should have our preferred code editor of choice up and running as mentioned in the previous section I will be using vs code on my Mac this means I have downloaded it and it should look like this on your computer when it opens up the next thing we need to decide is where our project is going to live a website essentially consists of a bunch of files or organized together in a particular structure you design here we can see a project that holds my HTML file another folder that holds my style sheet or css files another folder that holds my JavaScript files and a folder that holds my images don't worry if none of this makes sense we will be building up a project called my portfolio slowly throughout this course starting with creating the folder in this section if you are like me and have downloaded vs code you will have to store these files locally on your computer you can store them wherever you like just make sure they are organized in the same way inside your project folder which we have called my Dash portfolio on this occasion I want to store the folder for my Dash portfolio on my desktop so that we can see it visually too if you have chosen to use an online code editor you will not need to do this as your files will be hosted online along with your project however I would still strongly advise watching along so you know how to do this in the future so on my desktop I'm simply going to press Ctrl and left click on my screen and then create a new folder okay and rename it to my Dash portfolio just like so next I'm going to open up vs code that I just downloaded so it should look like this and I'm going to open up that folder I just created so to do this I'm going to just select open folder and navigate to my desktop where I will find the my portfolio folder that I just created I'm just simply going to click on it and open it up by pressing the blue open button and there we go that is now looking good you will notice how I am keeping the folder name in lower case this is because many computers especially web servers are case sensitive this means that if you want to find a file in your project and you use a capital when none exists it might not work to be on the safe side I recommend sticking to lowercase when naming or folders and image files in our project this is also the case for having spaces in the names browsers web servers and programming languages do not handle spaces in the same way as each other causing potential chaos for example if you use spaces in your file name some systems May treat the file name as two file names and some servers might even replace the areas in your file names so the spaces with percentage 20 instead it is for this reason that I would strongly suggest using a hyphen instead of a space when naming files and folders okay and that's it we have created our project folder next let's learn a little bit about HTML so we can create our HTML file for our web page okay everyone and welcome to the first coding section of this course in which we will be learning about HTML in this section we are going to get started with the very basics of coding by looking at the language that essentially started it all for web development without it we would not have the pretty pages that make up things such as this very platform you are currently viewing our course videos on to understand a little bit more about how it all works I'll be starting off by giving you a brief overview of where HTML sits in context of a web page as well as understand how it came about and move on to a tutorial with interactive questions and code examples in order to learn how to use it the tutorial part of this section will take up the majority of this course we will start off by learning what exactly HTML is understanding where it came from looking at HTML elements understanding HTML syntax or in other words it's structure and then looking at HTML Anatomy once we have grasp the basics of HTML and how to use it we will be using everything we have learned by building out a project that we can be proud of we are doing this as throughout this course I will be giving you projects that you can choose to put in your developer portfolio these projects will be ones that I have chosen in order to help you approach potential hiring managers in a bid to try and get you your first developer job each of these projects will be appearing to you at various points in this course so while skipping lessons is optional I would strongly recommend you watch each lesson in order to fully build out your portfolio to its most wonderful action-packed self okay so what are we waiting for let's get to it before we get to any coding at all let's actually understand what HTML is HTML stands for hypertext markup language it is considered to be a comparatively simple language that helps create the building blocks that make up web pages and apps we use today we essentially use it to describe the structure of web pages what I mean by this is that we use it on a document designed to be displayed in our web browser by adding annotations that will change what certain elements look like think of it and the way a teacher marks your work with a big fat red pen they will make annotations on your text in order for you to change it it might be to change something like spelling or it might also be to make a heading larger or something bold these annotations are not to be seen by the end but we applied behind the scenes if you will same goes for applying markup language in computer text processing you are annotating a document that is syntactically different to the existing text now what you cannot currently use HTML to change the spelling of things you can use it to transform tags into a heading or make it bold as well as a bunch of other things in fact we can apply the hypertext markup language or HTML to this boring lump of text and make it look like an actual recipe we see online so we can take this and make it look like this so as you can see we have taken the text made satin text bold made some text into headings hyperlink some text and change some text into a segregated paragraph As we mentioned we have done this thanks to annotating the document using hypertext markup language or HTML this mock-up looks like this so here we can see the text and here we can see the markup or more specifically the hypertext markup language we colloquially call HTML let's have a look at some of these in the next section so we have now seen what the hypertext markup language or HTML looks like in a real life example let's break it down by looking at one of these elements first and understanding its syntax syntax is just a fancy word for the structure of statements in a computer language and that is exactly what we're going to be looking at we're going to be looking at the structure of HTML elements in the next four minutes I'm going to really deep dive into HTML but don't worry we're going to go through all of these sections video by video coming up next okay so bear with me this will be a lot this right here is what makes the text in between it bold it is referred to as an HTML element almost all HTML elements will have an opening tag and a closing tag like this one we can also pair this with a paragraph element that will make the text below this appear to look more like a standard paragraph when writing like this so by using the angle brackets in this fashion with a slanty line or solidus to close the element browsers know not to display these HTML tags but use them to interpret the content of the page by mixing and matching these HTML elements we are slowly starting to build out what looks more like a recipe page than a lump of text we originally saw in fact we can mix and match over 100 different types of HTML elements here are just some of the more popular ones to our disposal let's start by looking at the paragraph element the Syntax for the paragraph element looks like this let's talk through this in more detail so first off we have the opening tab HTML elements are defined by tags written using angle brackets as we touched on before this opening tag tells our browser Hey listen up an HTML element is about to start next we have the closing tag which is just like the opening tag apart from this slanty line or solidus this tells our browser that the HTML element is now finished any text after this tag should not be applied the paragraph styling and then of course we have the content itself this is the text I want to apply the paragraph styling to it is in between the opening tag and the closing tag all together this is called a paragraph element ta-da and of course we have other elements an interesting one is the heading element I say this as there are six of them the H1 tag is the biggest heading and the H6 tag is the smallest heading you can use the tags as a main heading for example or a subheader in the browser The Heading tags would look like this so each of the tags would have a certain size assigned to it what is interesting about this is that giving texts and tags gives it semantic meaning to the browser meaning that the browser will read the text with some kind of meaning in this case the H1 tag will be treated as the most important title on the page I did also mention that most elements have an opening and closing tag I say most as some elements do not need both this applies to the image element for example we use image elements embed images onto our pages image elements do this by a specific attribute which is the source attribute represented by this SRC right here that takes the path to our image file I have also chosen to include the alternative attribute with a description of what my image is I say this as a choice but if you want to make your website accessible to all people it is something I would strongly advise this is because users who are visually impaired will be able to use tools to read out this alternative text to them it also helps others know what the image is all about if the file based to load or if the path to your image file is broken we will go into more detail about attributes and paths in the dedicated section on image elements further in this course now we can also add comments to our code that will not be visible in the browser but will be visible to us and other developers looking at our code to add a comment that will not be visible in the browser just like the tags we need to put that text in between two things in this case it's the two bracket arrows right here again making sure that these syntax is identical to this example now so far with these examples if we just put them in a document open it in the browser we would not be writing about an HTML this is because we are yet to do a few things which would include building up the anatomy of an HTML document we will do so in the next section in this course you will see me saving files a lot by using a shortcut on vs code vs code comes with many shortcuts that are available to you here are just a few of those for now I just want you to focus on using the savings shortcut which is essentially the command button or control button depending on your laptop plus the S button whilst on vs code okay so if you are unsure of if your file has been saved or not you should see this white dot disappear once that happens you know your file has been saved we will be needing this file to be saved as our next step will be to view the latest version of that file in the browser so if we already have that page up we will need to refresh the browser to see the latest version of it okay so save the file using command s and then we will go to the browser and refresh the page that we are viewing in there save refresh save refresh you got it so keep this in mind as we will be using this in the next section and pretty much all the lessons from now on until the end of the JavaScript module here is a basic file structure for when working with an HTML file when we use HTML elements outside of the correct HTML structure we're not writing valid HTML even if the browser can fix our mistakes the markup is only applied if the elements are in the correct environment we will go into what that environment is in this section it is important to note that for this course we are going to be using the latest version of HTML and that is HTML5 standard let's go ahead and recreate this HTML file in our code editors so here I am on my code editor of choice all I'm going to do is make sure I am in my project which I have named my portfolio and I am simply going to add a new file like so I'm going to choose to call it index next by giving it the HTML extension my code editor knows to treat this as an HTML file you can and as many HTML files as you wish your project naming them whatever you want just make sure to put dot HTML to tell your code Editor to treat them as HTML files now that we have created our file let's add some boilerplate code so I'm just going to paste them in here and talk you through it the first tag I want to show you is this right here it is a tag that tells the browser that this is an HTML5 document as mentioned there are previous older versions of HTML so just be aware of that on your journey as a web developer the browser needs to know what version of HTML the document is in order to render it correctly next we tell the browser where our HTML is starting we are doing this as even though we only have HTML in here for now we can actually write CSS and JavaScript in this document too something that I will show you later down the line in this course we are going to be using this HTML opening tag and closing tag as the root of our document everything else that we want to get picked up by the browser has to live inside of it next we have the head tag this is where we store information mainly this is not to be confused with a heading tab the head tag will store information that is not visible in the browser it is for storing not displaying you will see that in my head tag I have a meta tag with a Char set attribute the charset attribute specifies the character encoding for the HTML document this is not too important for now it simply says that we want to cover most of the characters and symbols in the world so in other words we can handle anything from Arabic to English to this funky little guy right here there are other meta tags we can use also but for now let's keep it simple and just use the ones we most need next up we have our title tag this is for naming our project we do this so we can store what we want to call what we are working on and we store this in the head so make sure it is in between the opening tag and the closing tag of our head once again this is not a title we will see in the browser however if you look at the tab of the browser your project is in you should be able to see it it will also show up in search results so for example in Google next we have the body now this is where the visible stuff will be this is essentially where you can put elements such as the ones we have discussed already such as the paragraph element The Heading elements the image element and many more we can also set the primary language for our document we can do so by simply adding the Lang attribute to the opening HTML tag select this this is useful as it will be indexed more effectively by search engines allowing you to appear in more relevant search results okay and there we have it let's start deep diving into some more elements next we briefly touch on headings so far in this HTML module however I would like to take a breath to Deep dive into them a little bit so you really get a good grasp of what they are and what they are used for so once again the heading element comes in six variations with the H1 element being visually the biggest and the H6 heading being visually the smallest each one has an opening tag and a closing tag in addition to this it also tells our document which heading is the most important behind the scenes so for example if I was to give a web page an H1 element our web page knows to treat this as the most important title on the page kind of like giving an essay its title so we know what it's about you should also only have one H1 element on a web page hey you wouldn't name your essay twice would you after the H1 element you also should use these subheadings in order meaning the H2 element should come next and then the H3 and so on but you can have multiple subheadings of the same size again just like when writing an essay so for example this is good and this is not so good however there might be occasions where you might see these conventions broken in addition to this nesting multiple H1 elements was allowed in older versions of the HTML standard however it was never considered a best practice so just keep that in mind now you might be thinking oh this does not look very fun well don't worry we can actually change what these headings look like using a programming language called CSS CSS will allow us to change the font size of these headings but not only that allows to change the color weight style and much more we will be looking at CSS right after the HTML module in this course another great and popular tax related HMR element is the paragraph element it is essentially this cute little p-tag right here the P element represents a paragraph or in other words a block of text we can use it to Bunch up text that goes together so like this this means if we put another paragraph element after this one again with a bunch of text it will appear spaced out from the other one now it does not matter what line you put the text on after all if you put all of this on one line it's kind of hard to read so you can put the text on multiple lines in your code editor if you want it will not affect how it looks like in the browser you might see p elements written like this or like this or other ways too both of these approaches I am showing you are valid just like with the heading element we can add CSS or in other words styling to change the default styling of the paragraph element meaning you can change this spacing amount but not only that we can change the font size the color the line spacing of the text and so much more we will be doing that in the CSS part of this course so by now we have had a very quick look at how do I offer elements this included the paragraph element and heading element now let's put what we learned into practice by creating an online recipe for macaroni and cheese so the first thing we're going to do is think about the website structure I would like my recipe page to have a heading followed by some sort of description an ideal element to hold the content of a description would be a paragraph element after this I want to use a smaller heading as a subtitle to let people know that this section is for the ingredients necessary after that I will need some sort of list to list out all the ingredients and next another subheading followed by the instructions in a numbered fashion wonderful I think this is a good start now let's get to actually creating this with HTML so first off I'm going to ask you to create another folder on your desktop this time I want you to call it HTML project one once you have done that I would like you to use what we have learned in order to create an HTML file in the project called index.html as well as add the correct boilerplate to it in order to get started please post here and have a go at doing this once you are done let's go through the solution to getting this done together okay so what I would do is well first off I will just open up vs code so please go ahead and do that and now I'm just going to open up that folder we just made so that directory just made so just go ahead and on your desktop find it click on it and open it up so there we go there's our empty directory or in other words empty folder and all I'm going to do is just create that index.html file so to do this I'm just going to click on here and I'm going to call the file index and I'm going to give it the HTML extension so dot HTML in order to let our code editor know to treat this like an HTML file wonderful now that we have that let's get going with our project so first off I'm just going to put in my boilerplate code I've just taken this from the previous project I have not remembered it please don't try and memorize this okay just make sure that you have your HTML element your header element and your body element and the body element is essentially what's going to hold all our visible elements next also make sure you have the meta tag up here as well so that we can see all the characters that we need okay so our project is looking good at the moment there is a few things we need to do outside of the meta chart set the other thing we have in this head element is the title that is going to hold the title of our project it will not be visible in the browser once again it will be visible in the tag and will also be visible as a title in Google search results okay so let's go ahead and call this something I'm going to go ahead and call it recipe as that is what best describes what this webpage is gonna hold the first one I'm going to put in is the H1 element by choosing the H1 element I am also doing something behind the scenes search engines indexing our web pages will consider the contents of the H1 heading more important than that of an H2 heading for example without any headings at all our page will perform poorly in terms of search ability online or in other words poorly in terms of SEO one other thing that is happening is that we are defining this as the most important heading on the page for screen readers used by the visually impaired if no headings are provided users of the screen reader will not be able to jump from heading to heading and instead will be forced to read all of the text on the page as a lump of text once we have a heading I'm going to move on to using a paragraph element for our description so here is what our paragraph element will look like now we can make certain words or phrases more important in the paragraph by using these strong element inside of this paragraph element we would do so with the strong tag Now when using a screen reader this word will be read out in a different tone of voice now we can also visually see this has been applied bold styling however if we do not want the screen reader to read this out differently and just want to make this word look bold we can use the ball tag instead other things we can do is emphasize using the EM element once again the screen reader will use a different tone for this and if we just want to make it look italic we can use the eye element like so and great I think we should now check this out in the browser so what it looks like in the browser next before doing anything don't forget to save this file once again a shortcut to save this file is to press command s on your keyboard so please go ahead and do that you will see the little dot disappear at the top of the file tab now in order to actually view this file on the internet you're going to have to get the actual file so go ahead and left click on it and then just go ahead and copy the path so this one right here that first one get up your browser and paste it like so and there we have it we can view that whole file in a browser you're viewing your local file on your computer on your browser right now great now let's add a subheading for our list of ingredients so by now we know that a subheading is any heading below our H1 heading I'm going to choose the H2 heading element for this and wonderful now it's time to look at lists in the next section in this section I want to talk to you a little bit about the readability and presentability of code for this in HTML I'm going to talk about indentation and spacing indentation and spacing should be consistent throughout your code we can use either the four space or two space indentation in HTML this means that each nested element should be indented exactly once inside their parent tag by either four spaces or two spaces okay so as you can see here is what it looked like when it's all beautiful and neat with four spaces of indentation as you can probably see everything is a bunch more readable everything is kind of lumped together and you can see which opening tag and which closing tag go together just like the top article tag and bottom article tag this is in contrast to Bad Code like this I mean you can hardly tell which tag is starting where what the parent elements are which makes this overall a lot less readable than the previous version trust me this would make it much more difficult when debugging and trying to find tags that go together in the future another thing you should do is format lines so for example in this case you'll see that the text in my paragraph element is too long I would suggest splitting it out into multiple lines okay so kind of like this okay so this was just a quick break to talk about indentation and spacing please keep an eye on this moving forward in this section we're going to learn how to make a list such as this section right here that shows the ingredients of a recipe as well as this list right here a ordered list that shows these steps in making our wonderful macaroni and cheese list elements are actually made up of at least two elements a wrapping element and the individual list item elements themselves your list can be an unordered list like this one meaning that the order will not matter or an order list an unordered list is however perfect for listing out the items that we need to buy in order to make macaroni and cheese as the order in which we buy them doesn't matter the wrapping element for an unordered list is this UL element right here and of course we have the ordered list an ordered list will give order to our list items so just like we see here we get one two three the element in order to make an ordered list is Ol as you can see by the wrapping element right here as a default the order list comes numbered like so but we can also change it to be lettered no matter which list type you choose so the unorder list or the order list it should have the list item elements inside once again these Syntax for a list item looks like this it comes with an opening tag and a closing tag that will take content inside the list item element in this case it is some text but it can also be much more let's have a look at this in code okay so the first thing we're going to add is as we discuss an unordered list add the ingredients as the ingredients do not need to be in a specific order right because it doesn't matter what order we buy them in we might already have some in the kitchen or we might need to buy some more it really doesn't matter to us so let's get up our unordered list element which we now know is made up by these two tags with UL in them like this next let's open it up because it's gonna have to take some list items so let's put in our list item elements they are made up of the LI tags and opening and closing tag and we're going to put in seven of them so there we go I've just gone ahead and created all seven each with an opening tag and a closing tag that will take content inside of each one okay so as a reminder the content does not have to be just text it could be images it could be a bunch of elements nested inside of each other that really is up to us in this case however I'm just going to put some text okay so let's go ahead and do that I'm just going to paste it in from somewhere I have written previously so I'm just going to put it in for all seven of these list items I'm just putting in some text and it's the ingredients for macaroni and cheese okay so there we go we now need to save this page so save it pressing command s and let's check out what this looks like in the browser don't forget that we of course need to refresh our browser to see those changes and great there is our unordered list now that we have finished this let's move on to make our ordered list so once again just like before I'm just going to put in an H2 title okay so this is a subheading that I'm going to put in it's just going to say how to make it and underneath that is where we're going to put our orders list element so the wrapping element that will take list item elements so ol is the tag that we're going to use is going to have an opening and a closing tag and inside of it I'm just going to go ahead and put in three list item elements this time so please go ahead and do the same put in three and I'm just going to paste in these steps into making macaroni and cheese so they're pretty simple it's just going to be brewing a pot of water to boil next I'm just going to paste in a longer sentence okay so you will see I have formatted it to put it on different lines so we can see it and finally just the final this item element and that's going to say add cheese and macaroni and that's it how simple is that so simple recipe we're not going to win any Michelin stars for this but we will have a cool recipe web page that we have built so once again don't forget to save this page pressing command s and then go to your browser and refresh it so we can see the latest version of the document and ta-da there we have it our order list is now on there too in this next section we're going to look at links links are great as they allow us to essentially link to other pages on our website link to specific Parts on a web page that we built link outside of the webpage that we built all together and some are completely new on the Internet or even open up a prompt to email someone or call them a link element syntax looks like an a element like this and stands for anchor so if you hear someone calling in anchor link do not be surprised let's look at what makes up a link element now so we have the opening and closing anchor tags in between these Tags I'm going to put some text so that our browser knows that if we click on this text it will take us somewhere so for example I could put the words my YouTube channel here is what this will now look like in the browser so it just looks like some text for now nothing special at the moment of course if we click on this link it won't do anything we have not given it enough information about what we want to happen if we click it and why we want this link to take us to do this we need to Define where we want the link to take us using the href attribute we put the href attribute in the opening tag now in the value if we want to link it to my YouTube channel I would take the full path to my channel and put it here okay so now let's save this refresh and check it out and wonderful if we click on the link we are now taken to my YouTube channel page we can also use links to open up a mail option or option 2 call all you need to do is put the mail to prefix followed by semicolons and the email address you want to populate to your email recipient address with so here we go and if we save this file and go to the browser and refresh you will see another link if we click on this link however a prompted email we will show up we can also add a hyperlink to prompt calling so once again we will get the anchor tag but this time for the value for the href we will add the tell prefix like this followed by a phone number this isn't my number by the way so please don't go calling this random number and apologies to the owner of this number in advance this time if we save this page and go to the browse and hit refresh then click on the link a prompt for calling that number will show up as mentioned we can also link to specific places on our web page but this time using IDs for this you'd first need to create the element you want to link to let's say this is a heading for example so here we have my heading element as you can see it has an ID that says other recipes and here we have my link element which has a href to the ID okay so hash here represents an ID and we're looking for the ID of other recipes so here we have my heading element as we know using two H1 elements isn't really best practice but this is just an example that I want to show you in terms of how to scroll to another main header so for now I'm just going to allow it and here we have my link element I would have to give my a-links opening tag the attribute of href and then pass through the ID so hash means ID add the element we want to link to so by giving it the value of hashtag other recipes I am now saying I want to link to my H1 element with the ID of other recipes and if I want my page to scroll to the element with the idea of other recipes I would have to give the link the href of the ID right so let's grab the ID and let's stick it up here great I am now just gonna add an unordered list here in order to give length to the page just so that the scroll is more obvious but when we scroll to this H1 element and now let's check it out so save the page first and let's go over to the browser and hit refresh I'm just going to go ahead and increase the size of this page so that it is more obvious everyone for when we scroll so just increase the zoom on yours too if you need so now let's test it out I'm just going to click on here and wonderful we managed to scroll to the H1 element we have now finished building out our recipe project using HTML so give yourself a round of applause I think we did great now we have not covered IDs in full just yet there is a bunch more stuff we can do with them this was just a quick taster we will cover them in more detail later on in this course so by now we know that we can build web pages to link to external resources or link them to specific elements we built in order to scroll to them visibly on our web page another thing we can do with the link element is take a user to a specific page that we built on our site to do this let's go back to our project that we called my portfolio and let's have a look at our project structure first so say we are on the index HTML page right here and we want to access another HTML page one of these Pages for example we would have to write a path from where we are currently in the project tree to this folder called pages and then to the file we want out of these two this is how you would do so so bear in mind we are starting from the index HTML page we are going to go into the folder called Pages using the forward slash I'm going to enter that folder and pick out a file I want to show let's just say that file that I want to show is called abami HTML so let's just specify that in that path Now by clicking on this element we will be taken to the about me page okay let's test it out to see if what I'm saying is true so first off let's make sure we are opening the correct project so let's go ahead and get the project my portfolio so here we have our project I'm going to go ahead and create a directory or folder for our extra pages called pages and in it I'm going to create one file called about dash me.html making sure to not have a space but have a dash and paste in some boilerplate code as well as change the title of the page so that we know which page we are dealing with of course don't forget to save this page now on the home page let's go ahead and add this link that we saw on this slide okay so just added this like so now let's open up the index HTML file not the about me HTML file so save the page and copy the path to the index.html file and paste it into your browser now don't forget to reload the page in order to get the latest documents and let's go ahead and click here and ta-da we are on the about me page it as works now let's have a quick look at the parts to this file here in the browser okay so as this project is stored on my computer I am starting at the root so going into a directory called users on my computer then going into a directory called Annie Kubo then into another directory called desktop and then into the directory that we made for my portfolio enter the Pages directory I just made and then getting the about me HTML file to show up in our browser of course when you host your projects online after buying your own domain this will not look the same I will most likely look something like this but we will leave that to the end now what if we want to link back to the home page from the about me page well we need to navigate back to do this I'll go one level back in the tree or in other words out of the pages folder we need these two dots like this followed by the Slash and then get the file we want to show so let's test it out so back in my project I'm just going to go to the about me page so I'm just going to go right here and add an anchor link with the href and as the part I'm going to go back so the two does mean we go out of the folder and then I'm going to essentially specify which file we want to show okay so that's all I have done so now let's check it out so let's go back to our browser hit refresh click on the go to about me page and here we are we're on the about me page and here's the link we just made that says go to the home page so let's test it out let's check that this takes us back to the home page and it does okay we are on the index HTML page that lives in my portfolio and amazing this is looking great so the slashes that we see in the path are essentially us jumping either backwards or forwards in the tree of my project from folder to folder essentially imagine each of the folders in this tree as a slash and if you follow the path to your next location and pick up a slant it's like you've just added it to the path that you are constructing okay so you're just picking them up like a train same thing for if you are leaving the folders you will need to use the dot dot to go all the way back to your spot in the tree where the train is safe to proceed to get to its destination got it now let's do another one imagine you are in this park called Contact HTML what part would you have to put in your href in order to get to the about me page have a think about it using this graphic of our project tree right here please post here and do that and once you are ready just hit play well as we are on the same location so in the pages folder we don't need any slashes our train literally stops pretty much at the destination so we just put the file name now let's test it out so first let's create a contact page in the Pages directory so contact.html and I'm just going to put in some boilerplate code and once again just change the title to say contact like we just did before with the about me page now in the contact page I'm just going to put another link so another anchor tag and I'm just going to put go to the about me page and of course we need to link this to that page so I'm going to use the href and I'm just going to put the about me page about Dash me.html Okay so just like we did an exercise if we click on this link it should take me to the about me page so this one right here and actually in here I'm just going to put in another link so from the about me page I also want to be able to go to the contact page so let's go ahead and add an a link and then I'm just going to put go to the contacts me page and as the href I'm just going to put contacts.html so exactly what our contact page is called great now let's check it out so save those files go back to the browser and hit refresh and now click on the about me page link and great we see both those links so we go to the home page or we go to the newly made contact me page so let's click that and wait we are on the contact me page we see the title in the browser tab we also see the path going to the Pages directory and getting the contact.html page and we see that link that we made on that page which takes us to the about me page and let's test this one out too and wonderful that's exactly where it goes once again as you can see by the tab name and the path that we have here okay great so hopefully this explains a little bit about how you would navigate from page to page on a website once you have this down let's carry on we are now going to move on from looking at how we can manipulate text in HTML and look at how we can add images to our web pages we have already touched on images before but for good practice let's recap what we have learned so far about this wonderful element in the introduction to HTML we learned that unlike most HTML elements the image element is one of the ones that uses a self-closing tag meaning it only needs one tag like this we also learned that it is the source attribute that contains the path to the image we want to embed this image can be in our project folder and we can navigate to it by writing a path to the correct file so we can use the URL address of an image that is hosted online just be aware that if the person or company hosting that image chooses to take it offline you will no longer have an image here to display you will see this broken URL icon right here instead you will also see the alternative text if you choose to add that to your image element the alt attribute is super helpful in occasions like this when they're linked to the images broken or the image won't load as it will allow the user to know roughly what it was about it is also wonderful for the visually impaired who might use a screen reader to see what is on a web page let's try to put an image on the about me page of our portfolio by putting an image of ourselves okay so I'm going to choose to store an image in my project all I'm going to do is find an image of me so I'm going to choose this Square jpeg so just make sure yours is also a JPEG or a PNG file and next I'm actually going to create a directory so making sure you're on the root of the project so the same level as the index HTML file just go ahead and create a directory called images and it's going to store all our image files from now on so there we go I just created a directory it's on the same level as the Pages directory and the index HTML file so let's go ahead and put an image in there I'm simply going to drag an image in for my computer like this and drop it in wonderful so there we have it that is now done and now let's go to the about me page and once again I'm just going to use this code right here so from the slide and I'm just going to paste it in like so so we now know that we need to get the path to this image and assign it to the source attribute and I'm also going to provide some alternative text just in case this doesn't work for whatever reason or just to make it accessible for everyone so I'm just going to put an image of Amir Cuba you can choose to put whatever you wish now the part to this well once again let's look at the project tree so I need to go back to the root of the project so I need these two dots and then I need to go into the images directory so I need to go into the folder I'm jumping into the folder and I'm just going to put the name of the file that I want to access okay so that's it now if we save everything that we've done so far and just refresh the browser making sure you're on the about me page amazing you will see that image it's unselt at the moment so it might be very big or it might be very small but we will work on that when it comes to the styling section of this course for now this is looking good let's carry on if you are having issues with this at any point the final code will be attached to this lesson so please go check it out in this section I want to show you how to work with tables this is going to involve a lot of nested elements so our HTML elements are getting a bit more complex by the end of this lesson you will have built something like this but don't worry we will build up to it step by step starting with a tiny table first so the simplest table elements can take three types of elements the table row element the table header element and the table data element we would start off by creating the table element which will wrap up all our content nicely so it all stays together inside I need to start off by making some table rows so let's say we want our table to have three horizontal rows I would add three table row Elements which look like this so now we have some rows I next need to decide what kind of columns I'm going to have let's say I want my first column to contain last names and my second column to contain last names I would need to add the table header element to tell our browser we want this to be the name of the column it would look like this now that we have defined the columns names we can fill out the rest of our data using the table data element it would look like this and that's it that's a table in its simplest format if you would like to give your table more semantic meaning for the browser you can also Define that the first table row belongs to the table's head by wrapping it in a t head element and the rest in a table body element so t-body visually it will not change what you see in the browser but it will help your website SEO as well as screen readers know what is going on okay cool got it good because now we are about to put all of this into practice by implementing a simple table onto our portfolio project okay so back on the about me page I want you to put in a table in order to organize our future projects this is what I want the end result to look like so three columns one for the hyperlink to the project which we will leave the href blank for now another column for the title of the project and another column for a quick description of what the project is about and what technologies we used for it for those of you thinking wait this is a pretty ugly table are you sure we want to put this on our portfolio don't worry the fun styling stuff is yet to be done for now let's just get building using the basic building blocks we have at our disposal okay so what are we waiting for let's get to it please have a go at building this Yourself by pausing here once you have built your table unpause and we will go through my chosen solution together okay so what I would do is well on the about me page I would start off with my wrapper element as mentioned this will be the table element as that's going to hold or our child elements together so go ahead and create your table elements so there we go there is an opening tag and a closing tag and in here well I'm going to do the more advanced version of the table so what I'm going to do is put in a t head element as the first child on my table so the T head element looks like this and it's essentially going to hold our head up for our table and then let's put the tea body element as the second child of the table element and that's going to hold the rest okay great so one child and a second child next I'm going to create a table Row for the head so for this I'm going to use the TR element once again it has an opening tag and a closing tag and once we do that I'm just going to put in two of these in the body as well so that we have three table rows in total Okay so let's go ahead and do that I'm going to put in the second table Rook here and then just put in another one great I'm just going to open them up because we're going to put content into here now in my first table row I'm going to use the table header element and we're going to have three of these because we want to have three columns or essentially three table headers and then I'm going to mirror that in the other table rows however with table data elements so that we can sort data for each of our columns so the first table header is going to have project the second is going to have title and the third is going to have description as that is what I want my columns to be called so there we go so now if I refresh the page so save your project and refresh the page I'm just going to make this bigger ta-da you should see right at the bottom are three table column names or in other words table header names great so now let's get to putting in the data so let's go ahead and do that back on my project in the first table data element well I'm just going to put project one and in the second table this element I'm going to put the title of that project is the one we made is the macaroni and cheese recipe and then I'm just going to put in a short description of that project okay so this is what a table is going to look like it's going to have a project it's going to have the title and it's also going to have a short description wonderful and let's do the same for the other one for this one I'm just going to put project two and this is going to be our table tennis leaderboard so let's go ahead and put table tennis leaderboard okay and then again let's just put in a description it's very long so I'm just going to format it a little bit better to make this more readable this will not be shown in the browser this is for us just to be able to see this in our project right now so there we go and there we have it that is our table I'm just going to put some more text in here just to Pat it out of it wonderful so now ta-da that is what our table looks like it's got three rows two for the data and one for the column I think this looks great now I'm just gonna go ahead and add one final table row just to kind of prepare us for what we are going to be putting in in the future so let's go ahead and make that table row let's put in a table data element with project three and of course we haven't made this yet so I'm going to put TBD as the project title as well as TBD for the project description but essentially we're going to add a bunch more projects into here so just so you know what this looks like I've gone ahead and added another table row and wonderful so this is looking great I'm really happy with how this is looking so far of course without any styling yet the last thing I want to do is just wrap the First Column entries in a links so an anchor links because we're going to want to link to this in the future at the moment I'm just going to leave an empty href attribute okay so this will just give this the appearance of links but without actually going anywhere so just do that for all the a elements like so and great so we have now created some links of course they will not work but visually at least this column looks like links this is the final look that I want to aim for wonderful okay so I think we are done with this project for now let's move on now that we have covered some of the many text related HTML elements let's move on to the fun stuff which allows us to create shapes add colors to our website starting with the content division element or in other words the dev I like to think of the div as a beautiful being that could be anything you want it to be we can get the div a height we can give it a whip and we can give it a background color using CSS or another one styling which we will cover in the next section we can also use it in a very basic form without styling to hold other elements together so for example we can create a div put a heading in it and put a paragraph in it and now these two elements will be gripped together so you might think great so with this div I can now group together pieces of information to start adding structure to my web page well not to throw a spanner in the works but you are partially correct the div should only be used if the section element article element nav element header element or footer element don't apply why you ask this is because these elements all have semantic meaning and will be interpreted by your browser to be an element that holds a section an element that holds an article an element an element that is the header of your website and the footer of your website djib does not have this it's like a mysterious ghost let's have a look at some elements with semantic meaning in the next section by now we should know the elements that make up a web page can have semantic meaning this means that the web browser will see them and recognize what the element is meant for this makes it good for users of assistive Technologies like screen readers and they are also good for SEO we have the header element which represents quite literally a header this can hold things such as your website's logo a search bar and other things typically seen in a website's top element the header element is not to be confused with the head element which as we now know holds the website's metadata so all the invisible stuff just like the header element we have the footer element which literally represents the footer of your web page you can put anything you want in the footer however typically you would see something like information about the company copyright data or any links that you would want to give the website viewer next up we have the nav element which represents the navigation bar on your website it will usually contain a menu or a list that will allow you to navigate between all the pages on your website we also have the section element which represents a standard section of a document sections should have headings in them after all think of when you read a book it would be kind of strange to see a new section that didn't have a header for you to know what the text in this section was about right without this heading the element will not appear in the document outline if you do not want to put a heading element in the section perhaps it's not really a section you are after perhaps a div would work better on this occasion the last populous sectioning element I want to cover is the article element an article element can represent things such as newspaper articles a blog entry a product card a user submit a comment or a forum post amongst other things just as with this section the article element should include a heading element nested inside of it now I must stress there are many more semantic sectioning elements to your disposal I have simply covered the most popular ones or the ones that might be a bit tricky however there are all these other ones as well at the time of recording if you have the time I would suggest doing a quick Google of each if you are interested I feel most are pretty self-explanatory so you don't feel like Googling it's fine let's carry on so by now we have covered the most popular text-based HTML elements as well as some semantic sectioning elements and the dip I am now going to ask you to put all of your knowledge to the test by building out this table tennis leaderboard unlike in the first project I'm going to leave you two at this time the goal is to create a directory or in other words folder called HTML project to create an HTML page to go into the project with the correct boilerplate code and then use the elements we have covered to recreate what we visually see here you are of course free to refer to the previous lessons we did in this course so far and don't worry that is in no way cheating no one is expecting you to memorize these things even I still copy and paste HTML boilerplate code so once again this project will utilize everything we have learned so far as well as three new elements that I briefly listed out in the semantic sectioning elements video okay so these three will be used in this project section it is a hairline element which is essentially a line an element that will allow us to write captions and the figure element as well so please go ahead and do some Googling by yourself on these three this is an excellent lesson in Googling and once you are ready please have a go at this once you are happy with your project and you want to see how I would choose to create this page please click on the next video and remember there is no one way to create this page there are literally thousands of ways you could do it so get going and I will see you soon okay so now I'm going to show you the solution to how I personally would create a table tennis leaderboard that looks like this okay so I'm excited to show you first things I'm just going to create a new folder on my desktop I'm going to call it HTML project two just like we decided in the previous video okay and once I've done that I'm just going to open it up in vs code so I'm just going to open that folder so please go ahead and do the same open it up in your code editors just simply by pressing open folder finding that project on your desktop clicking on it and opening it up so great I'm now in my project there is nothing in here at the moment so let's put in our first file so all I'm going to do is click on here and create an indexed HTML page not forgetting to give it that HTML extension to let our code editor know to treat this as an HTML file okay so go ahead and do that and now I'm just going to put in my boilerplate code so as we know for our boilerplate code we can just copy paste it so that's what I've done I've pasted it from another project and now I'm going to put in the title of my project this title will not be visible to us okay in the browser it will be visible in the tab of the browser and it will be visible if you uploaded this onto the internet and search for it in Google okay great so I'm gonna go ahead and call this table tennis so please go ahead and do the same great before we get to putting in anything in our body elements I just want to open this up in the browser so we can see what it looks like so all I'm going to do is just left click on the index.html document right here and then copy the path and then go to my browser and just paste in that URL like so so there we go that is what index.html page looks like and as you will see you can see table tennis in the tab name great now let's get to adding some elements in the body elements so first off I'm just going to put an H1 element and for my H1 element I'm just going to put table tennis just like so so now if we say that file and refresh the page this is what it should look like we can see that H1 element in our browsers great next let's move on by putting an H2 element in here so in my H2 element this is going to be a sub heading and all I'm going to do is put in some text so I'm going to put classroom tournament leaderboard just like so and now if we save this file and go ahead and look in the browser so let's refresh the browser you will see classroom tournament leaderboard showing up wonderful we have an H1 element and we have an H2 element so a subheading element let's carry on next let's get to creating some semantic sectioning in here and first off I'm just going to start off with creating a table so here's my table element it is a wrapping element that's going to take a bunch of other elements in order to create our table the first one being the T head element so just go ahead and put in a t-head element and then put in a cheap body element for the rest of our table rows okay so our table heads element well we know this has to contain a row so let's go ahead and put that in so that is my whole table head and in my table row well I'm going to Define our table headings one is going to be a position heading so just go ahead and put position one is going to be for the name of the person playing in the tournament that that is going to be for if they won or not and the fourth is going to be if they lost or not so it's going to be a count of one and lost tournaments so if we refresh the page in our browser that is what it looks like at the moment we have created four table headings or in other words four table columns great this is looking good next I'm just going to put in some table rows that are in the body so essentially for our data our first table row is going to have a table data element so I'm just mirroring the table heading so I'm going to have four okay so we're essentially going to create table rows for these columns well our first table data cell is going to have the position so we're going to have position one then we're going to have the name of the player who's in position one it's going to be my name Gomez and she's gonna have one five and lost zero so save this and refresh the browser and amazing we have just created our first table row to go on our table let's go ahead and create another one next okay now let's create our next table row so we know how to do this now just go ahead and use the TR tags to create a table row and then in here I'm going to put four table data elements because we want to essentially put data for a position and name a one and a lost value so let's go ahead and do that in fact I'm just going to copy this as we're going to have a few of these so we have one table row let's go ahead and paste another so we have two and three and four and five okay and let's do it so my first single row I'm going to put position two the name is going to be Mohammed Leroy and he's going to have won four and lost one okay next as position three I'm going to have the name of let's go with Patricia Bennett okay so that's the name I have chosen Patricia Bennett and she is one three and lost two position four is going to go to Sam Lehmann he has won two and lost three position five is gonna go to Young Lee he has one won and lost four and then let's do position six as well and this person is Astrid Genevieve and she has won zero and lost five and I think that's it so we just need six so let's save that let's go back to our browser and refresh and ta-da there is our classroom tournament leaderboard we have just completed our table this is looking great so let's carry on the next thing I want to do is just put in a line and for this I'm going to use the HR element that I did say to Google previously so if you Googled it you would know that the results would look like this and it's just a nice way to split this out okay wonderful so we have just split this out by creating a line thanks to the HR element which looks like this let's move on the next thing I'm going to ask you to do is put in another subheading this is going to be smaller than the other subheading we have so I'm going to use an H3 element for this so please go ahead and do the same just use your H3 element and put in the title or the subtitle of rules of table tennis and a colon just like so so just like I have now the rules of table tennis this was an ordered list so I'm going to choose use the ol element so here are my ol tags and inside I'm going to have to put list elements now first this element is going to contain the texts of games are played two and then I'm going to make a bold number so I'm using the Bold tags or if I want to give this semantic meaning to the browser I can use the strong tags so each was fine to use okay whichever one you use is okay and then I'm just going to put space and points great our next item is going to have the text of alternative serves every two points are mandatory and this time I'm going to put the number 2 in strong so let's just get up on strong tags and I'm just going to put the number two in there great let's just minimize this for now let's make our third list element so our third list element this one is going to have the text of make sure to toss the all straight up when serving okay so that is my thirdest item let's check it out so say that page on refresh and wonderful so we've just made our rules of table tennis it is an ordered list and you can see the 10 and 2 are in bold so that is looking great let's carry on now what else do we need to create well I just want to create a paragraph element that's going to take some text and that text is going to be in italic so I'm going to use the I element for this okay you could have also used the EM element if you wanted to give the page semantic meaning but I'm just going to give it the I element from now so again each one is good in here I'm going to put official rules can be found on the international making sure to spell International correctly table tennis website so that is now going to appear italic on our page and I'm going to actually hyperlink here so to do this I need to get here and put it in some eighties or the anchor link and next I need to give the anchor link First tag so let's just space this out a little bit making sure that the indentation is correct so let's just make sure that those eye tags are on the same level and the P tags are on the same level next to make this link work I need to give the first tag of the a link and href attribute and I'm just going to go ahead and type in the URL to the actual International table tennis website so this is it for all of those curious okay that is the link to the international table tennis website great so now if I refresh this amazing we get some tags in italic and the here is hyperlinked and if we click on it it does take us to the official table tennis page how cool is that let's carry on let's just make the official Spell correctly first and great next I'm going to put in another line so let's go ahead and use our HR element again now I'm going to put another subheading so I'm going to use my H3 element again and this time I'm going to have the game set up so game setup is going to be my subtitle now I'm going to have a p element in here and this is essentially just going to give us some more information so it's just going to say the game should be set up as per the table tennis tournament at Liga Pro okay so just giving some insight into how the table tenants table should be set up and finally I'm going to show a picture of this so I'm going to use the figure element this is another element that I asked you to Google in the previous video so hopefully you did that and this figure element okay so for this we're going to actually have to put in an image element in here so go ahead and do the same it's a self-closing tag and then for this image we can have a figure caption so that is my figure caption element the third element that I asked you to Google in the previous video so hopefully you did that as well great now in my fig caption I want this to appear in italics so I can use the eye element or I can use the EM element if you want to give it semantic meaning that is up to you and I'm just going to give this image taken from Wikipedia okay so that is what I'm going to do and I'm actually going to hyperlink Wikipedia too so just whack in Wikipedia here and as the opening tag of my a element I need to give it the href attribute along with the link to Wikipedia which is this for table tense great okay so this is looking good let's go ahead and find an image so just whack in that Wikipedia URL and then copy the image address to this table tennis image and then as the source of this just put in the URL to that so as long as that web page exists as long as that picture exists this picture should appear in our own project so just go ahead and do that or you can put a picture in here okay that is up to you just like we did previously you can put a picture in here that you uploaded and made an image directory you could have done it both ways both ways are absolutely fine so I hope you did either of those or if not let me know what you did finally I'm going to put an alternative tag to this image element so I'm just going to space it out so we can read it a little bit better and put alt as the attribute and then some alternative text which in this case I'm going to have table tennis tournament as great okay so this is looking wonderful so far shall we check it out on the browser I'm just going to space this out a little bit so it's more readable so essentially I am just putting everything on new lines and making sure that each element is essentially in line with each other in terms of indentation okay so that we go each nested element is more indented than the other wonderful this is looking great that is my whole URL so now let's recap what we've done so we add in an H3 element as a subheading we added a p element as a subheading so now this is a lot I think we've done well one other thing we probably should do as all of this game setup is essentially associated with each other we should probably put it in a section element to hold it all together and we can do that as we have an H3 element so we have a title so let's go ahead and create our section element so our section element looks like this and in here we're essentially going to store all of that that's associated with game setup so there we go that is it and finally let's format it to make sure that all the tags are indented on the same level and that each nested element has indentation as well great let's do the same for the rules of table tennis I'm just going to put that in its own section so there we go and now let's format it so that each nested element is on the right level and great so now let's check it out save that page refresh and there we go that is what our table tennis leaderboard looks like it looks amazing it looks exactly like we wanted you to it looks exactly like the image that I showed you at the beginning I hope you also have this and if you've done it in any other way please do share your code with me on Twitter please either paste a link to your codepen or a picture of your code I would love to see foreign s I'm going to be focusing on creating forms forms are a fantastic way of submitting a bunch of information together we use them on sites to get back feedback write in or even sign up and log in forms are made up of a bunch of elements that are nested in between the two form tags some typical tags that can live inside the form element are the input elements label elements or field set elements however you can technically put in any elements you like the form opening tag can take certain attributes it can take the action attribute which takes a URL that will take care of the form's submission as well as the method which takes the HTTP method to submit to the form don't worry about this for now as this is an advanced topic we will cover later or you need to know for now is that the input with the type submit is how you would essentially trigger the action attribute with the method attribute to submit form data when you wish the input element with the type submit generally does not need a label element associated with it this is unlike an email input for example which would benefit from having a label element in the next section we are going to look at the other types of input types as well as the various attributes that we can use how an input tag looks and works wholly depends on the type attribute and the value you assigned to it by default if no type is provided it will take the form of a text input to use the text type here is a full list of the different types available to us I'm not going to go through all of them as some will be self-explanatory but to help you get the gist of how input types work let's whiz through the most popular ones now try to remember them as there will be an exercise straight after this so let's start with the text input in fact the Ember element like I said will default to the text type even if we don't Supply it with a type so this is an easy one to remember we can also add other attributes to the text input for example we can control what the minimum length of text and or maximum length of text can be with the mid length and max length attributes we can also add a placeholder to provide a hint as to what type of text we want in here we can also make it required with the required attribute or we can make it read only if we start working with JavaScript we might want to use the name and value of the input so we can work with it in a more readable way this means that we can send over the value of what we put into the input along with the input's name if we have loads and loads of inputs in our form in this case it would be first name Anya next let's look at the button type if we take the input element and assign the type button to it it will look like this so a button at the moment and of course won't have any functionality but it certainly does look like a button doesn't it we can also add a value in order to change the text inside the button too another attribute that goes in the button element can be disabled this will visually disable the button and prevent users from being able to interact with it now what if we switch this to a checkbox type well we got a checkbox visually that we can choose to tick or untick it can also take a value however this time this is not displayed in the browser or in other words on a client side it is used on the server side so that we can take the value of the checkbox and use it for our Computing needs along with the checkbox name this means that when the form is submitted the data name value pair will be subscribe newsletter if no value is supplied the new value pair would simply be subscribe on if the checkbox is ticked next up let's see what happens if we change this to be a color type the Empire element then takes the form of a Color Picker as we can see here we can click on the element and then drag the cursor to select say color which will generate an RGB value for it or a hsl value or a hex value we can also choose what color we want to start on by assigning a value to the input element now let's move on to the date type by supplying the date type we are creating an input that looks like this so essentially a date pickup with a year month and day when active in supporting browsers this input is fun as we can of course set a default value using the value attribute but we can also set a Min and Max state this means you will not be able to select dates in the date picker outside of this range and if we change this to date time local an option to select the time will show up to next up let's look at the email type now this might look like a normal text input but it has certain validation parameters meaning it won't accept the field unless you give it a at sign and a domain we can actually change these validation parameters by using the pattern attribute and using regex regex or regular expressions are rules that govern which sequence of characters come up in as such there is much to learn on Regis which we will not be covering in this course but if you would like to know more about how to write these rules please check it out in the link below in addition to the pattern attribute we can also have other attributes such as max length Min length multiple for multiple email addresses and placeholder for displaying some placeholder text next up we have the radio type you might be thinking hold on this is just the checkbox type of the circle well there is one big difference only one radio button in a given group can be selected at any point in time this is different to the checkbox in which you can select multiple check boxes here is what a group of radio inputs can look like and behave like we can even give them label elements and Link them to the respective input with the full attribute which correlates to the radio elements ID the range input is another fun one in that it has this cool slider we can set a bin and max range for the slider as well as hardcore the value it is currently at with the value attribute if we want to increment the slider to our biggest steps we can do that quite literally with the step attribute too and finally the last input type I want to show you is the submit type which we briefly touched on already just like the button type we can change the text and the button using the value attribute however we should only use the submit type to actually trigger submitting the form the form element and the input or the type submit are linked if you want to have other uses for the button inside the form and write your own custom JavaScript such as to update the value of an input dynamically or select something I would suggest using the button type and that's it we have just covered the most popular input types let's move on with some exercises foreign everything we have learned so far in the last section on inputs in order to really hone in our skills all about inputs so we're going to have three exercises we're gonna have to replicate what we see visually with code so to do this let's create a kind of scratch bar that we're going to work with so all I'm going to do on my desktop is create a project that I'm going to call classwork so there we go there we have our classwork folder and now let's open it up in vs code so go over to vs code and find that project so go ahead and find it on your desktop click on it and open it up okay great and now what do we do well we need to create our index HTML file so go ahead and create an index HTML file making sure to use the HTML extension okay so that code editor knows to treat this as an HTML file and there we go step two is going to be to add the boilerplate code so please paste some in from a previous project and let's just call this scratch pad for now great please go ahead and save this file now let's open it on the browser by grabbing the path and pasting it in the browser like we've been doing so far great now that we have that done let's continue so now that our setup is done let's have a look at the exercises that we need to replicate so for exercise one I want you to create an input that will take an email and it's obviously a company email that takes a certain domain so please take that into account and also take into account the fact that this has to be an email so three things here and you also have a placeholder visible so that is also something you're going to have to add and of course we also have a submit button that will submit our attempt at putting in an email so let's go ahead and do it I'm going to lead you to this I will however lead you with the knowledge that all of this has to come in a form element okay otherwise it will not work as intended when submitting okay so here we have the form element now please go ahead and make sure all your work is done in between these two tags so I'm going to leave you here please pause here and unpause when you're ready to go through my solution together thank you okay so what I would do is and of course this is just my solution there are many ways to do this is first off I would create an input element so let's go ahead and create one like so so it is just one tag like this and I'm gonna go ahead and give this the type of you guessed it email so there we go so now if we look in the browser and hit refresh I'm just going to make this a little bit bigger we have the input with a type of email right so it looks like a text type but we know it has a different semantic meaning and different functionality so now let's go back as we just add a few more things into this input element and also I'm also going to add a label element as we did see that in the example and This is 40 below input so let's link it up and how do we link it up using for an ID so let's add the four attribute to the label and let's add the ID attribute to the input so let's go ahead and give this the ID of emot input you can go ahead and call it whatever you wish and now let's grab that ID and just paste it into the four attribute on the label so now both are linked up okay we've just linked it up using before an ID attributes great let's go ahead and add some tags into the label I'm going to just go ahead and put please use a udemy.com email okay just like so so now if we look in here ta-da the label is now showing up this is looking good the next thing I want to work on is the placeholder so to add a placeholder I would do this on the input tag it's going to minimize this for us and I'm going to put placeholder and I'm just going to put Ania at udemy.com of course I don't work at udemy so this is fake let's go check this works um great we will now see some placeholder text that will be replaced as soon as we start typing now let's go ahead and add something else visually and that is the submit button so we know by now that we don't use an actual button we're going to use an input with a type of submit and that input will trigger submitting the form as both are linked so let's go ahead and put an input with a type of submit so just like that and refresh the page in order to see it as a default the value of this is submit but we can change it with a value attribute so let's go ahead and do that I'm just going to put that in like so okay so there we go however right now I can go ahead and put Dan at dan'sworld.com and sign in and that will submit okay so that has technically worked it is refreshed it's technically submitted we haven't put any extra functionality at the moment so our form by default is just refreshing the page but we know that we need this real udemy address right so we would like an error message shown up to do this we need to add the pattern attribute so my pattern attribute well I'm just going to add the string of Plus at udemy.com and now I am saying that I want the domain to be udemy.com for the email I'm just going to space this out so it looks a little bit more readable at the moment okay so just go ahead and do the same great so we have just added the pattern make sure there's a DOT there let's check it out so now I'm just going to refresh this page to load the changes and type Dan at dan'sworld.com and try to sign in we get that error message so there we go we have essentially blocked other email addresses from signing up just like when we do a d that won't work it will say there's no email present so now we've officially made some validation happen on our email great so the form is not submitting it's not refreshing so we are being stopped from signing in wonderful so we have now completed exercise one this is how I would solve it however if you have done it another way then please do share that with me on Twitter I would absolutely love to see okay so look forward to seeing your Solutions over there in the meantime let's move on to exercise number two in exercise two I would like you to build this range input that will essentially allow us to increment the steps by 20 in order to get from 0 to 100 to percent of this range okay so that's all that I would like you to do for this exercise please go ahead and do this once again the main body will be zero and the max value will be 100 and I want the increment to be in 20s in addition to this I would like the default to start right here okay so make sure to make that happen as well as well as add a label to the input so please go ahead and do this and once you are happy with your solution we'll go through a solution together okay so first off I would just start off by putting an input element and assigning it the type of range so a range that is very smooth in its movement so there's a few things that we need to change so we need this to increment in 20. so let's go ahead and add the attribute of step with the value of 20 so that if we now refresh our page our range input will now look and behave like this so not as smooth but it's incrementing in 20. so let's carry on the next thing I want to do is just give it a Min and a max value so I'm going to send meant to be 0 and Max to be 100 so just like this if we actually change this to be an 80 well I'm just going to show you what happens I'll step that implements in 20 has four steps as 4 times 20 makes 80 so that's four steps but we want this to be a hundred so let's just go back and change it to be 100. great so as default this will be 100 but I just wanted to emphasize that by putting it here next I also want to code these start values so I want this to be at 20 because I want it to appear around about here so that's exactly where it is I just hard-coded 20. and finally let's just give it a label so I'm just going to use the label element for this by creating a label element and then putting in some text this text is going to be volume and now let's link the label to the input using the for an ID attributes so four I'm going to put volume input and for the ID I'm going to put the same so volume input so great they are now linked so we've done it we have our input it's looking exactly like the exercise at the beginning now you should actually put this in a form element like I said so if you want to submit this eventually two things you will need are the form elements like so as a wrapping element as well as the input or the type of submit okay so if you would like to submit the value of this input with the type of range those two things will be needed great so this looks great I hope you've enjoyed this exercise please do share your solution with me on Twitter via the link below if you've done this another way I would absolutely love to see and finally for the third and final exercise I want you to essentially build out this form that will allow us to pick one of the three options about how our experience was at a theme park so this is what I want you to build you're gonna have to think of a way to pick out one option out of a bunch of options and then submit it via a form so please think about this pause here and I'm excited to see how you do this by yourself and then go through a solution together so see you in a bit okay so I would do is well here we have our form first off I'm just going to create an H1 element okay because this was bigger than a label so I'm going to use the H1 element for this and I'm going to put how was your time at Happy Land okay so that's what my H1 element is going to look like now we can have this in the form that is absolutely fine okay so I've decided to put in the form and next we need to decide what kind of input type we're going to use for the multiple choices the type I'm going to use is Radio why radio and why not checkbox this is because the radio will allow us to choose one of the three options and not allow us to select multiple options like the checkbox type so in the input I'm of course going to have the type radio but I'm also going to give it a label the label is going to say bad and I'm going to link it to the above input we'll do for an ID attributes so let's link them up by the same name let's have bad input and let's put the ID as bad input as well great so there we go and for good measure I'm just going to give this a name just in case you know in the future we want to link this up to JavaScript we don't really need to do this now but I think it's good practice to start adding names to these types of inputs so as a name I'm just going to give this the name of experience okay because it's all related to one experience so well done if you choose to add that name attribute there you're already thinking about the future so let's check out what this looks like at the moment great so we've got our bad input let's let's create another input so let's go ahead and use the input element and create a label for it this is going to say okay let's link them up using the for and ID attributes and I'm going to put OK input here and give this the ID of ok input great now let's also give this the type of radio and leads essentially link it to the other input by the name attribute of experience okay so once again when it comes to JavaScript this will be important for when we want to essentially get the value of our inputs for the type gradient in addition to having this name attribute for when it comes to work with JavaScript we're also going to have to give both of these a value so remember a key value pair made up of the name and value so I'm just going to give the top one the value band and the second one the value is okay wonderful once again these are important for the key value pair for when we start working with JavaScript it's not nearly necessary now so if you don't add them don't worry and now the final input let's go ahead and create that input element let's go ahead and create a label element this one's going to have the text of good and let's look them up with the for and ID attributes let's call this Good input and give this the idea of good input and give this a type radio and again give it the name of experience and value of good wonderful we are now done so this is how it looks like on the radio inputs we can also have one checked as a default if we want simply by adding the checked attribute so I'm just going to go ahead and do it on this one and that will mean that this one is checked by default and of course we can change it and we are not selecting multiple ones as you will notice right now wait the final thing we need to do is just add an input with a type of submit that has the visual appearance of a button but essentially it will allow us to submit this form if we click on it along with the value of the one we've chosen hopefully in the future when we hook this up in JavaScript and there we go once again I hope you had fun with these exercises please do share them with me on Twitter because I would love to see what you have done with yours otherwise let's continue in this next section we're going to talk about the select element in order to create one ourselves this select element allows us to select an option from a drop down menu and looks like this so we have this select element which we will name with the name attribute for when we want to pick it out with our JavaScript and then we have all these option elements nested inside of it now each option element has a value again for when we need to pick it up with our JavaScript and then the text of what we want to see visually in the browser in between the two option tags this select element is usually accompanied by a label element which is linked to the select element with the for and ID attributes so that is the code for writing a select drop down and this is how it behaves it is for this reason that it could be wise to have the first option element contain new tags please choose an option with no value so just an empty string to represent nothing being chosen even if we click on it but this is not required one other thing we can do is hard code these selected value by using the selected attribute on the option element on this select element itself we can have many attributes some of these include the disabled attribute that looks like this the required attribute or the multiple attribute to be able to select more than one option got it good now it's time for a little exercise okay so let's get to practicing what we learned in the previous section by building a select drop down so this time we're not going to be using snacks let's go ahead and recreate what we see on a e-commerce site by having a drop down of sizes so we're going to have extra small small medium large extra large and extra extra large okay so let's go ahead and do it first off we're going to start off the label right so there we have our label and this label is going to say select your size and next under here we're gonna have this select of course so it's going to have an opening tag and a closing tag and I'm just going to pause here and ask you to complete the rest of this exercise next so once again it's a drop down for an e-commerce site that will allow us to pick sizes for our garment okay pause here and let's go to the solution in a bit okay before we do anything I'm just going to link up the label to the select with the for an ID attributes as a reminder I'm just linking the label to the select or this attribute so let's make sure that these are the same I'm going to have a size list and size list right here for the id2 okay so there we go and now let's add some options so my first option is just going to have the value of blank I'm just going to leave it a blank string and this is going to say please select your option so there we go our first option is essentially a blank value and our section option is going to have the text extra small next we're going to have another option or the size small and then we're going to have a third option let's actually just paste in a few with medium large and extra large and then one more for extra extra large Grace so there we have it visually this will look fine but we know we have more to do we need to add a value to this as well so that when it comes to picking this up JavaScript we are prepared so let's go ahead and give this the value so I'm just going to give this a readable value for when we need to pick this out later on and it's just going to be the string XS this value I'm going to give the value of s here I'm going to put an M for this one I'm just going to put an L for this one I'm going to put the value of XL and you guessed it for the last one I'm just going to put the value of x Excel and there we go so this is looking good and for good measure we of course we know we need to give the select a name and let's go ahead and call this sizes so once again this is for eventually picking it out with JavaScript so now if we look in here we can select our size and we can see the options now if I was to change this to be extra small like so and Save you will see that that has changed however I'm just going to put that back to the way it was if I put extra small here nothing will change okay once again this is because this is for our JavaScript and should actually technically be written as one word or two words connected by a dash in order for this value to get picked up okay so there we go that is some knowledge for you for when it comes to picking stuff up without JavaScript later on and wonderful so that is our select exercise done I hope you enjoyed it let's move on now I just want to take a quick break to talk to you about the inspector Google Chrome's inspect tool can give us a lot of information about what is going on in our browser in fact it can show us exactly what code we are sending to the browser and in what state I'm going to show you how to inspect this browser to our browser right here now so here we are back on our select exercise that we just did and here is the select drop down that we just made now if I go ahead and left click on the browser while pressing Ctrl on my laptop you will see this show up I'm simply going to click on the inspect tool in order to get up this inspect tool for us this will show us many tabs including the elements tab which will show us the elements making up our web page that we are viewing as you will see this is exactly our document that we're working on so you will see the HTML element you will see the title element that we give our document and you will also see the body tag in which we added a label element and the select element with all the options that we just coded just right here so this is pretty cool and we can now hover over so we can choose to select items in our browser which will show us exactly which element we are selecting or we can select them here so just click on that and select maybe this label and this will show you that label in the browser along with the size of that element along with any styling that has been applied to it at the moment there has not been any styling added by us this is just the default styling under the Styles tab what is also cool is that we get a console we will not be using this now but we will be using this in the JavaScript section very heavily so just keep that in mind so this is the inspect tool it's really useful for us as developers now and especially in the future now I feel like I've saved this one to show you as I am really fond of the data attribute and I want to talk to you about how you can make custom-ish attributes to give us flexibility HTML5 allows us to store extra information on standard HTML elements using the data attribute the Syntax for it looks like this we can of course have data or we can have data Dash and put in whatever word we want to make a custom attribute now why would we want this well we can have a div that's served like a card so here we go here is my div styled like a card okay so I can't wait to show you how to style stuff in the CSS part of this course but for now just stick with me now say I want to flip this card and display some text such as a question and two possible answers we can actually store that information on the div itself without actually visually seeing it we will do so like this so we can have data question data option one or data option two so now that information is stored on the div but we can't see it with our eyes on the div so for example we can sort a data question attribute that says what color are the carrots okay we can also store another attribute so let's have data Dash option one which will give us an option of let's say blue and then we can also have data option two that will give us a second option as well that we are storing on that element let's go with orange so that's a lot of information that's custom information that I am essentially putting on an element now with the magic of JavaScript we can then get these attributes and show them and they did on the click of the element but we will leave that magic for when the time is right now it is also worth noting that this information is not fully secret and is still on the client we just can't see it visually however if we inspect the browser like we just learned and look at the HTML document that makes it up we can see that information here if you really want something to be hidden you would have to store it on a server and retrieve it when you need in this section I want to talk to you about how you can add little notes in your code that won't affect anything in the browser but why do this well as developers we might want to annotate things we have done things we need to do or simply leave notes for another developer that comes along in the form of an explainer or to do action item for beginners I would strongly recommend annotating or in other words adding pseudocode as often as possible all you need to do is make sure the text you and add is in between these these you can add this manually or in vs code you can highlight the text and press command forward slash so for example here we have some code if I wanted to add a reminder on the form that I want to add another input I can simply write some text that says to do and then I would comment out by highlighting the code and pressing command forward slash obvious code so that's what I've done or you can manually add the characters you see at the beginning and end of this line another thing you can do as mentioned is put reminders so add code to yourself so for example here I'm going to remember the pattern can take regex Google this later so this is great for as a beginner you can leave yourself little notes about what certain parts of code does or little reminders about what we learned in that lesson so once again two copies out just highlight it all and press command forward slash on vs code and finally we can also add little reminders to other developers too so for example if you're sharing this code base with someone and you think they might not know the intention of some code that you put you could leave them a note so for example I have put this input will trigger the action on the form when provided because of course we have not provided an action on this form by at least this lets someone know that we have thought about it okay great so there we go hope this was useful that is how you can comment that code so that it's not visible in the browser foreign that's it for the HTML section let's recap what we have learned so wheeler what exactly HTML is or hypertext markup language and how we can use it we also learned how to create our first HTML page using the correct anatomy and use it to create a recipe page together using popular text elements we then learned about how to navigate between Pages or do different things altogether as well as about semantic sectioning and elements we also learned about The Versatile dip which is essentially a great shell to create anything and use our knowledge to create a table tennis leaderboard after that we looked at forms and input options as well as how to create our own costume-ish attributes phew so we learned a lot now where to go next well I would really strongly recommend going over everything we have learned so far and try built out another recipe page okay so this time perhaps a different recipe than the one we previously did and add it to your portfolio next I would try build a Wikipedia page clone so similar to the format of the table tennis leaderboard I would like you to use your knowledge of everything you've learned so far in order to build a Wikipedia page next I would also like you to try practice your Googling we did a little bit of practice in Googling so far in this tutorial but you're going to be needing it a lot more as you progress positive develop in CSS especially there are many many properties and attributes that exist so being able to Google them correctly is definitely a skill that we should acquire if you have time I would also suggest looking at the remaining HTML elements that we did not look at in this course as mentioned at the beginning there are over a hundred so please take some time here if you want to familiarize yourself with the ones that we did not cover I do think most are pretty self-explanatory so if you don't want to do this don't worry next I would suggest also playing around the inspector that we are now acquainted with please go ahead and search random pages on the internet and inspect them using the tool seeing what they have under the hood and finally let's get ready for some CSS this part is going to be great as we're actually going to learn how to make stuff look pretty in our browsers so see you then\n"