How to Make a Super Simple HTML Website [Tutorial]

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 gonna be making your very first website using HTML will 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 gonna be making is gonna be pretty basic it's not gonna 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 and windows that's File Explorer and on a Mac its 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 filename 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 now in addition to opening the file on 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 Adam 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 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 gonna 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 be 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 a 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 to 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 takk type 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 doc types that were used in the past are HTML four 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 use the HTML tag 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 loads 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 web page 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 you're 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-8 utf-16 used by computers you can think of it as a sort of dictionary translating human languages - 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 and you set it to width equals device with initial scale 1 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 1 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 webpage if a website has different pages each page can have its own title so we'll add the title here my first website will 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 help to organize and stylize your content so that it would be more easily understood by your reader not all 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 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 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 the second paragraph - 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 gonna 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 I'll just 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 ER with the 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 our style tags these tags add styles to the text they can be bold like we did in the very beginning then there's also italics underline emphasized and strong tags like we said before these style tags aren't uses 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 necks I'm just gonna put this on a new line and the eye 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 emphasize or e/m tag you'll notice that the default for emphasize 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 webpage we'll just add this in here and HR is the horizontal rule tag so let's reload that you'll see you know 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 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 the 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 H R if 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 I'll add an H R if value of HTTPS wwws reload the page you can see here that this text is the purple color purple means that you've actually visited that link before and if the link is the 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 home page let's go back to our website URL stands for universal resource locator this acts as an that will give you the location of the webpage or the file that you want to load 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 a 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 wanted to load in a new webpage so we'll type in underscore blank I'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 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 placeholder comm 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 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 web site 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 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 PNG s 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 filename 600 X 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 lists that use numbers now to create a list you'll use the list tag either oh L or ul depending on if you're making an ordered or unordered list we're gonna 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 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 will 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 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 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 indented yet again to put in the list items for the types of apples doing things like this helps keep your code 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 we're 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 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 and 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 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 a 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 gonna 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 TV 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 books 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 wanted 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 board is inside the table are still set to one pixel this is just a 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 extras 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 cells so I'm gonna 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 the 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 will say that electricity is $100 and in 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 utilities cell and 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 drill now to make both these hundred and $50 cells be under the utilities cell we'll use an attribute called call span or column span so under the utilities table header will say call span 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 hundred and the $50 column it looks pretty organized doesn't it so in addition to call span you can also use the row spanned 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 full so I'm just going to copy and paste again and use the August data to create June and July data too so I'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 slow this little the data is kind of messed up so I'll go back to the fall table cell and then they'll add the row span attribute and make it span three rows because we want the fall to be in front of June July and August so let's say 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 layout 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 3 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 if you want to download the site files as well as a cheat sheet that I've made of the HTML tags what we went through today please click a 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 [Music]

Channel: Coder Coder

Views: 62,572

Keywords: html, html tutorial, learn html, html for beginners, make a website

Id: cnt_rMA1pe0

Length: 33min 23sec (2003 seconds)

Published: Wed Dec 27 2017