If you've ever wondered how HTML works, well, you've come to the right place. In this video today, we'll be going through some HTML basics. And you're going to be making your very first website using HTML. We'll be going over three things today. The first is what is HTML, then we'll be going through some basic syntax. And third, you'll make a local website that you can load in your browser. One thing to keep in mind is that we're not gonna be going through any CSS or JavaScript today. So this website that we're going to be making is going to be pretty basic, it's not going to be all that pretty. Sounds good. Let's get started. Now, what is HTML? HTML stands for Hypertext Markup Language. It's a way of displaying information on webpages in your browser. One thing to remember is that HTML isn't itself a programming language. It's a markup language. programming languages like PHP or Java. use things like logic and conditions to control the content that you see. html doesn't do those things. But it's still extremely important. You can actually create an HTML file on your computer and load it in your browser, it won't be on the internet, so only your local computer can view it. To create your HTML file, open up your computer's file program. In Windows, that's File Explorer. And on a Mac, it's finder in the program, go to your desktop, or wherever you want to put the file, you want to create a new file in that location. Make sure that the file name reads index dot HTML on Windows. If for some reason, you can't see the file extension, just click on the View tab and make sure that the file name extensions checkbox is checked. When you have your file all set, you'll want to open it in the browser. If it has a chrome or other browser icon on the left, you can double click it to automatically open it. If not, you can also right click and select open with and then select your browser. Now in the browser, everything will look blank, which is fine because the file doesn't have anything in it yet. Now, in addition to opening the file in your browser, you'll also want to open it in a code editor. I'm using Visual Studio code. And we're going to keep both the editor and the browser windows open next to each other. So it's easy to make code changes and view them immediately. In addition to Visual Studio code, there's a lot of other programs that you can use, you can use notepad plus plus sublime atom or brackets, most of those are free. And I've included links to each of these in case you want to download and install them. Alright, now that you have the index file open in both your browser and your editor will start writing some code. Let's look at some of the basic features of HTML. HTML is made up of tags, tags are special text that you use to markup or distinguish parts of your web page. Hence, the Hypertext Markup Language. These tags tell the browser to display whatever's inside the tag in a specific way. So here's one example of a tag in action. I'm going to write out some text here. This is my very first website. And I'm extremely excited exclamation points. And we'll save that, you can see that the words extremely excited are in these B tags. B is for bold. So let's save the file and reload your browser and see what happens. All right, you just wrote some HTML. Now let's look at the tag. Again, the tag before the phrase is called the opening tag, the tag after the phrase is called the closing tag. You can also see that the closing tag has a forward slash before the B together these two tags tell the browser to make whatever text is between them bold. And that's exactly what happened. Now, maybe this is obvious. But when the browser loads the HTML, the tags themselves aren't visible. They don't show up on the page. Pretty cool, huh? One reason I love making websites so much is that it's almost like magic being able to make things appear in the browser window. Everything good so far. All right. Now, this line of text that we wrote is working in the browser, because we save the file as an HTML file. But for real HTML on the internet, we need to add some more tags to the file in order for everything to work properly. So let's just make some space up here at the top. And the very first tag that you need is the doctype tag doctype HTML. This isn't exactly an HTML tag, but you need it because it tells the browser that this is an html5 document. This tag doesn't require a closing tag because it's not surrounding any text. It's just declaring that this is HTML. If you're curious of a doctype that we're using the past our HTML four or x HTML, but right now html5 is really the only doctype used so you won't have to worry about those other kinds. Then after the doctype tag, you have the main HTML tag this Tag tells the browser that everything inside it is HTML. I know it seems a bit redundant since you already have used the HTML doctype tag. But this ensures that all the content inside it will inherit some necessary characteristics of HTML. Then inside the main HTML tag, your content will usually be separated into two sections, the head and the body. The head tag contains information about the website. And it's also where you load CSS and JavaScript files. We won't be looking at those today. But just so you know, the body tag is the main content in the webpage. Everything that you see on the page will usually be in the body tag. So we need to move the sentence into the body. There we go. Now let's reload the page. Make sure you save first, and it should look exactly the same. So we're all good here. Now let's go into some of the basic tags that are commonly used in the head and the body. I'm not going to go through every single possible tag in existence. So we'll just be looking at the ones that are used most often. So that you can get a better idea of how an HTML page is put together. Now, the first tag that should be in your head is this meta tag, meta, and then you're setting the care set to be UTF. Eight UTF eight is a type of Unicode encoding used in virtually all websites around the world. We need encoding because we need to translate the letters, numbers and symbols that we use into bytes used by computers. You can think of it as a sort of dictionary translating human languages into computer speak. Now, the next meta tag that should be on all websites, is this viewport tag. So you set the name attribute to viewport, then you have a content attribute, you set it to width equals device width, initial scale, one. This may be a little, you know, confusing or computer gobbledygook looking. But this is important for responsive websites. Responsive means that the website can display properly on all devices, computers, tablets, and mobile phones. The content in this tag is saying that it should make the width of the website the same width as whatever device that is viewing it. For example, a mobile phone has a much smaller screen resolution or size as a laptop computer. This will let the website resize itself according to what the user is using, then the initial scale sets the zoom of the website. On browsers nowadays, you can zoom in and out making the website look bigger or smaller. We want to be set at one by default meaning not zoomed in or out. Now after these two minute tags, one of the most important tags that we're going to use is the title tag. As you can probably guess, this sets the title of the web page. If a website has different pages, each page can have its own title. So we'll add the title here. My first website, we'll save the file, and then we'll reload. And you can see up here at the top in the browser tab, it has the title my first website. So that's it for the head tags. Now let's go into the body. We'll just keep the previous HTML that we wrote up here, so it'll still stay on the website. Most of the basic body tags are based on things you can do in Word documents. You can create headlines, bold text, make lists, and even tables. In the days before CSS using these tags help to organize and stylize your content so that it would be more easily understood by your reader. Not all of these tags that we're going to go into are still used as much as they used to be. Some of them simply aren't needed anymore, because we can now use CSS to achieve the same style. But I think it's still helpful to at least know what these basic tags are. Let's look first at the headline or header tags designated with the letter H. Each H tag also has a number after the H and they range from h1 to h6. They the h1 tag is the highest in priority is generally used for the title of the page, we're going to add an h1 tag to our web page. Inside the tag, we'll put the title of the webpage, my first website, save and reload. And you can see here's the title. Let's now also add a subtitle using the h2 tag. And we'll put in an HTML playground. You can see that the subtitle is displayed at a smaller font size then the title. Now just for fun, we'll put in all the H tags up through h6 just so you can see what it looks like. So h3 h4, h5 and H six. Now, this is a little bit much, most websites don't use all the H tags. Usually they'll just use h1 for the title, h2 for the subtitle and h3 sometimes for Section titles. It's pretty rare these days to use h4, h5 and h6 tags. Now the next tag we're going to look at is the paragraph or the p tag. Just like in Word, you can use paragraphs to separate your content into blocks. You can create your paragraph by surrounding your content with the P tags, we're going to make a paragraph with some placeholder text. One of the easiest ways to find a placeholder text is to Google for lorem ipsum. lorem ipsum text is nonsense Latin words that are used in publishing and design to fill in text in order to work on the layout. So we'll copy this paragraph here. And we'll put it into a p tag. Now let's make the second paragraph to well copy some more text and put it into another p tag. Let's see what this looks like. So there we have it, the browser automatically add some space between the paragraphs and other content. Now, if you want to separate your content onto multiple lines, but you don't want that space that comes with a paragraph, you can use a line break or a br tag. So let's get some more lorem ipsum text and put it into our editor without a p tag this time. Now, one interesting thing to note about HTML is that it will automatically break lines. So if you press enter a bunch of times in the text, you're not going to see anything different on the page. And the same goes for if you press spacebar a whole bunch of times, it looks exactly the same. What HTML does is that it will only allow one space between a bunch of enters or spaces. In order to create an actual line break, you need to add the br tag. So let's try that here. Let's get rid of this extra space since it's not doing anything. And we'll add in a br tag. Now you can see that this sentence is starting on the next line. You can even add multiple br tags. And doing so will add space between your content. You'll notice that on the br tags, they don't have a closing tag, it doesn't need one because it's not used to surround text kind of like that doctype tag at the top. These types of tags that don't need a closing tag are called void elements, void meaning empty because they have no content. One other thing to note about this is that you might sometimes see the line break written as br with a closing slash. This was a requirement for ex HTML. But in html5, we don't need the slash, the browser will still read the tag correctly. But I still recommend writing these void elements without that slash. The next set of tags, we're going to look at our style tags. These tags add styles to the text that can be bold, like we did in the very beginning. There's also metallics underline emphasized and strong tags. Like we said before, these style tags aren't used as much anymore, because now you can use CSS to style everything. It's pretty straightforward what they do. And we'll go through each of them here. Now let's use the p tag again. And we'll make this line of text bold. And we can see it's bold. Now let's do the italics or the eye tag. Next, I'm just going to put this on a new line, add the item tag. And we'll load the page and you can see it's now italics. We'll just keep doing the same thing for all the rest of these tags. So the next one we'll look at is the underline or the tag and it's underlined. Then we'll do the emphasize or em tag. You'll notice that the default for emphasize is just italics again And the same thing goes for the strong tag. A strong tag is basically the same thing as the bolt tag. So that's it for the style tags. Now, let's look at the horizontal rule. This will create a line on your web page. We'll just add this in here. And HR is the horizontal rule tag. So let's reload that, you'll see you now have a horizontal line going across the entire web page, you can see that the content before the HR tag is above the line and the content after the HR tag is below the line. Now, the link tag, as you probably know, links are one of the main ways that we get around the internet, right? You go to one websites look at stuff, then you click a link to go to another website, and so on. So let's make a link tag here. The link tag is written as an a tag. Now that A stands for anchor, because the link connects the two websites like a boat anchor connects a boat to whatever it's anchoring to First, put the a tag around the link text that you want to be clickable as we've done here. Now in addition to just running the tag, you need to add an attribute. The main attribute that you need to add in your a tag is h ref. This stands for hypertext reference. And inside this attribute, you want to put in the URL of the website that you want this link to go to. So let's say we want to link to the Google homepage. So add an href value of HTTP s www.google.com. Now let's reload the page. You can see here that this text is a purple color. Purple means that you've actually visited that link before and if the link is a link that you've never been to before, it'll be blue text. Now if we click that, lo and behold, it loads the Google homepage. Let's go back to our website. URL stands for universal resource locator. This acts as an address that will give you the location of the webpage or the file that you want to load. Now another often use attribute in the a tag is target. This controls is the link that you click will open in the same page that you are on or if it'll open a new page or new tab in your browser. If you don't have a target attribute, by default, the browser will load the link in the same page. Let's add a target. And we want to load in a new webpage. So we'll type in underscore blank. We'll save that, reload it, and then now click on the link again. And you'll see that the Google Home page has loaded in a new tab. The next thing we'll look at is images. To put an image on your web page, you can use the image tag written out as IMG. So let's add that to our website. Now it's blank, so it's not going to display anything on our website if we reload it. Similar to the link tag we just did, the image tag needs a URL. But instead of H ref, like the links use, the image tag has an attribute of SRC meaning the source of the image. So add in that attribute. Now in order to put an image on here, we need to find an image, let's say on the internet to use for this example. One really helpful place that I go to for test images is placeholder Comm. Slash Let's go there. This website is super helpful because you can generate an image of any size depending on the values that you put in the URL. So let's just copy this. And then we'll add it into our source. Now let's see how that looks. You can see the images there. I'm just going to add a quick br tag here to separate the image from the content. Now, like we said on the website, you can actually put in different values to get different sizes of images. So let's try this. Let's make it 600 pixels by 300 pixels 300. And now the image is bigger. Another thing you can do is instead of loading an image from the internet, which by the way, this isn't really suggested practice, the better thing to do is to just download that image to your computer or wherever you're going to save it. So we'll save this image here. And now if we open up our file explorer again, you can see that in addition to the index HTML file, we now have this PNG file. PNGs are simply a type of image file that you can use. So now if we want to refer To this image that we have on our computer, instead of this URL, we'll simply put in the file name 600x 300 dot png. And we'll see now that this will load. Now there's another attribute that you can add to your image tag. And that's the border attribute. Adding this in will, as you might imagine, add a border around your image. So let's give this a shot. We've added a border attribute and put in 10 as the value, we'll reload our page. And now you see that the image has a 10 pixel wide border around it. Again, this is one of the attributes that you don't really need to use anymore, because you can do this all in CSS, but it's helpful for you to know that it exists. Now the next thing we're going to look at is lists. html can create bulleted or numbered lists pretty easily. bulleted lists are called unordered lists, as opposed to the ordered list that use numbers. Now to create a list, you'll use the list tag, either o l, or ul depending on if you're making an ordered or unordered list. We're going to make an unordered bulleted list of different types of fruits. So we'll first put in our ul tag for the list. And inside this list tag, you'll put your list items. Each item will go inside its own list item tag written as Li. So add in apples, oranges, pineapples, mangoes, and dragon fruit, just to make an interesting now if we load our page, we'll see that we now have a bulleted list of all the fruits that we put in here. Now just for you to see if we change this unordered list to an ordered list. You can see that the bullets are now replaced by numbers. But we just want to work with the unordered list right now. Another thing that you can do is you can even nest lists inside one another. So let's say I want to add different types of apples under apples, we would create a new list tag inside the list item in question with his own list items. So within the apple Li tag, we'll actually add a new ul tag under the apple text. Then we'll add Li tags, each with a different type of apple. So let's put in Golden Delicious Granny Smith and the gala. Over reload our page and you can see now under apples we have another child list indented even more than the original list was. This brings me to an important aspect of writing good HTML. If you put an HTML tag inside another one, that's called nesting, not so much bird type nesting, but more like Russian doll nesting. An element inside another one is called a Child Element. And the outer element is called the parent. So in this case, the apples list item is the parent item of the apple type list. In order to organize the parent and child elements, we indent the Child Element. This helps it distinguish from the parent. So you can see this list of fruits, I've indented the main list items, apples, oranges, pineapples, and so on from the UL tag. Then inside the apples list item, I've indented once more to create the unordered list tag and dented yet again to put in the list items for the types of apples. Doing things like this helps keep your code clean. It doesn't matter to the computer. But for humans reading your code, it will enable you and other people to quickly understand what your code is all about. If all the HTML elements weren't indented at all, and were all in the same level, things would look a lot more confusing. Let's just demonstrate this with the list. So I've now uninvented everything. And you can see that it's a little harder to see that there is an apples child list using the types of apples. So it's just better to keep all your code indented nicely. And this practice of inventing, it's considered good practice, not just for HTML, but also for CSS, JavaScript, and basically any programming language that's an existence. At my first job inventing was the first thing that I was taught during my training, it's pretty important because there's nothing worse than having to work on someone else's code and having it be a complete mess. So indenting is an easy way to make sure that you're writing code that other people and yourself in the future can go back and read. And speaking of indenting and nesting elements, the last HTML tag that we're going to go through use a lot of that it's the table. tables were originally used as an efficient way to organize data into rows and columns. Kind of like an Excel spreadsheet. If you work with those before. So to demonstrate the table, let's make a table for a hypothetical monthly budget of a household. Now to start, we'll first need the table tag. Everything else inside the table will be inside this table tag will have rows, table cells and table headers for the column headers. So let's add in our first row. And this row is going to be the one containing the column headers. So inside the table row tag, we'll add in a th or table header tag. And we'll write in our column headers now. So we'll start with the month. Then we'll add in some budget categories. So we'll do rent, utilities, groceries, because you got to eat and then eating out. And then we'll do entertainment because you know, you want to have some fun stuff to do. Now, let's load that and see how it looks. Now you'll see here that we have all the different column headers listed out next to one another. For the next row, we'll add in some data for the month of August. So make another tr tag for this second row. And the data that we're going to put in these table cells aren't headers, so we'll just use the TD or table data, or table cell tag. So inside this TD tag, we'll put in some numbers for each of these different categories. First one we'll put in August, because August is under the month column header. Then for the next one, it's rent. So let's say our rent is 15 $100 per month. After rent, we'll have utilities and let's just say 150 for utilities, then 350 for groceries $100 for eating out. And then for entertainment, let's just do 50 bucks. Alright, let's reload and see how that looks. You can see here that we've created the second row, and everything's aligned together under the proper column header. So this table, you know, looks like it's working. But it's kind of basic looking right? Well, we can style this table a little bit with some of the built in table attributes. The first thing we want to do is add lines to the table, because it's kind of hard to see what's out here. So in the table tag, you can add a border attribute. And then we'll put in one, this will add a border, that's one pixel. There we go. Now if we want to, we can make this number bigger. So let's say we want a border of 10. And here, here's a table and you'll notice that the border that's 10 pixels wide is just the main border outside the entire table, and the border is inside the table are still set to one pixel. This is just the default way that tables are displayed in the browser. The other thing you can do is cell padding and cell spacing. So cell padding controls the amount of extra space inside each cell from a text to the border. So let's try a cell padding of 10. There we go, there's a little more breathing room. Now inside our table. The other thing you can do is cell spacing. And let's just do this at 10 to see what it looks like. And now you can see that between each cell is 10 pixels. I don't want to have any space between the cell. So I'm going to actually change this to zero. And there we have it nice neat looking table. When you're building an HTML table, one thing that you really need to make sure of is to have the same number of columns in each row in the table. Otherwise, things will get kind of messed up. So let me show you what this looks like if I delete the groceries. So delete this resaved. And then so you can kind of see how the headers have now kind of shifted over. And there's this weird blank space at the end because there's no table cell there. So let's just put that back. However, one thing you can do is you can make one table cells span multiple columns. So let's say we wanted to break out the utilities category to have two types of data, one for your water and one for your electricity. We'll say that electricity is $100 and the water is $50. So in total, it's still 150. To do this will actually create an extra cell in the data and adjust the amounts of the utilities. So we'll duplicate the utility cell, then we'll change the first amount to be electricity at $100 and the second one to be $50 for the water. Now just for your own interest. If we reload again, we'll see that the table looks weird because we have these two cells that we have added. So there's one more cell in the second row than there is in the first row. Now to make both These $150 cells be under the utility. So we'll use an attribute called call span or column span. So under the utilities table header, we'll say call span equals two. This will make the table header utilities span two columns. Now you can see that everything looks nice and neat together again, because utilities table so is spanning both columns, the $150 column. Looks pretty organized, doesn't it. So in addition to call span, you can also use the row span attribute to make the cell span multiple rows. Let's say we had data for June, July and August, and we wanted to designate all those months as fall. So I'm just going to copy and paste again and use the August data to create June and July data to so copy this row, paste it a couple times, then we'll just rename this one to June, and the next one to July. So now we see that we have three rows June, July and August. So to create the cell for fall, I want it to be to the left of the months. So starting with June, I'll go to the June row, and I will create a new table cell before June and put fall in it. Now, again, we'll see if I just little this little, the data is kind of messed up. So go back to the fall table cell. And then I'll add the row span attribute and make it span three rows, because we want fall to be in front of June, July and August. So let's save that. And there we go. Now you can see that this also still looks a bit incorrect because there's an extra blank space here at the end on the header row. And fall is an under month, we want the month to be on top of June, July and August. So what we'll do is we'll add an extra table cell on the top header. So now, if we reload, we can see that everything has the proper number of cells. Now aside from using tables to contain data tables actually used to be used by web developers to lay out Web Designs. So for example, if you have a website design with a header, main content and a footer, you can create you know one big table with three rows. And then you can put all your content in those table cells. Because the table cells can contain any kind of HTML, you know, images, links, text, you name it, it was pretty handy back in the day. Nowadays, tables aren't really used very often. The only common exception that I can think of is for HTML emails. This is because some older email systems can't really use a lot of CSS. So coding like it's 1999 is unfortunately the only option. So that's it about tables. And there you have it, you made your very first website using basic HTML. If you want to download the site files as well as a cheat sheet that I've made of the HTML tags we went through today, please click the link down below. Also, if you enjoyed this video and want to keep following hit that subscribe button and the like button. And that's it for today. See you later.