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.
