HTML Tutorial - How to Make a Super Simple Website

Key Takeaways

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 going to 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 web pages 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'll want to create a new file in that location. Make sure that the file name reads index.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 extension 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++, 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. All right. Now that you have the index file open in both your browser and your editor, we'll 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 webpage, hence the HyperText Markup Language. These tags tell the browser to display whatever is 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, and 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 are invisible. 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 saved 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, other doctypes that were used in the past are HTML4 or XHTML. 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 this 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 charset to be UTF-8. UTF-8 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 it to be set at one by default, meaning not zoomed in or out. Now, after these two meta 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 could do in Word documents. You can create headlines, bold text, make lists, and even tables. In the days before CSS, using these tags helped 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. The H1 tag is the highest in priority. It's 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 web page, 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 than 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 H6. 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 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 a second paragraph, too. We'll copy some more text and put it into another P tag. Now, let's see what this looks like. So, there we have it. The browser automatically adds 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 won't 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. So, 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 XHTML, 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 are style tags. These tags add styles to the text. They can be bold, like we did in the very beginning, and there's also italics, 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 B 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 I tag next. I'm just going to put this on a new line, add the I 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 U tag, and it's underlined. Then we'll do the emphasized or EM tag. You'll notice that the default for emphasized is just italics again. And the same thing goes for the strong tag. The strong tag is basically the same thing as the bold 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, and you'll see you now have a horizontal line going across the entire webpage. 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 website to look at stuff and 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 writing the tag, you need to add an attribute. The main attribute that you need to add in your A tag is href. 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, we'll add an href value of https 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 the Now, another often used attribute in the A tag is target. This controls if 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 it 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 homepage has loaded in a new tab. The next thing we'll look at is images. To put an image on your webpage, you can use the image tag written out as IMG. So, let's add that to our website. Now, it's a 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 href like the links use, the image tag has an attribute of src meaning the source of the image. So, we'll 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 place holder.com. So, 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. Let's Now, let's see how that looks. You can see the image is 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 a suggested practice. The better thing to do is to just download that image to your computer or where 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. 600x300.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 OL 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, uh pineapples, mangoes, and dragon fruit, just to make it 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 its 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. We'll 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 so bird type nesting, but more like uh 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 with 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 indented 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 unindented everything, and you can see that it's a little harder to see that there is an apples um child list using the types of apples. So, it's just better to keep all your code indented nicely. And this practice of indenting, it's considered good practice not just for HTML, but also for CSS, JavaScript, and basically any programming language that's in existence. At my first job, indenting 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 uses 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 worked 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. We'll 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, cuz you got to eat. And then eating out. And then we'll do entertainment cuz, 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 $1,500 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. All right, 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's the table. And you'll notice that the the border that's 10 pixels wide is just the main border outside the entire table. And the borders 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 the 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 cells, so I'm going to actually change this to zero. And there we have it. It's a 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 cell. Delete this. Resave and then load. 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 cell 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, we'll 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 utilities cell, we'll use an attribute called colspan or column span. So, under the utilities table header, we'll say colspan equals two. This will make the table header utilities span two columns. So, now you can see that everything looks nice and neat together again because utilities table cell is spanning both columns, the 100 and the $50 column. Looks pretty organized, doesn't it? So, in addition to colspan, you can also use the rowspan attribute to make a 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, too. So, we'll 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 load this, it'll the data's kind of messed up. So, I'll go back to the fall table cell and then I'll add the uh 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 isn't 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 could 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 It pretty handy back in the 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 that 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.