Transcripts
1. HTML Introduction: If you want to learn
the most about HTML, to the point where you can make your own simple website all in less than 30 minutes if
came to the right place. And the best thing
about it is that you don't even need to
install anything. You can follow along
this course using readily available
online texts editors. And we'll take a look
at them in a second. But first, what is HTML? Html stands for Hypertext
Markup Language. What is it used for? You might ask, its DML ensures the proper formatting
of texts and images for your
Internet browser. Keep in mind that HTML is not a programming language and the sense of having logic
and conditions, it is just used to display text and images
for the most part. But that alone makes it very
crucial for web development. Because what's a website
without text or images, right? So the three main sections of this course is what is HTML? Which we already went through
basic syntax to ensure that we have a complete understanding
of how HTML has written. And finally, making a webpage. So let's get started. Shall we?
2. Build your First Web Page!: So let's take a look
at how we can create our own HTML file for that, Let's say toward
desktop or wherever you choose to have your
HTML file created. I'm just going to create a
new file and name it HTML. And then inside of that
file, right-click New. Then we're going to
click on Text document. We should see a new
documents created. Now to view the
extension of our file, we'll hit on View left-click on this box that says
file name extensions. This allows us to see the
extension of our file. In this case, it's dxdy. We want it to be an HTML file. So what we'll do is change
that dx dy to HTML. It will give us a
warning that we're changing the file
name extension. We click on Yes. And now let's change the name of our file
to index, for example. Now, our funds should
have a browser icon towards minus showing
Microsoft age, but I prefer to change
it to Google Chrome. Now let's double-click
on it and open it. Of course it looks black. That is because we haven't added anything to old HTML file. To add stuff to our file, we're going to right-click, then open it with a text editor. I have Visual Studio code. If you don't have a text editor, you can just use the
default note but, and start writing your code. But that doesn't
sound very practical. Instead, we're going
to write our code and beautiful
online text editor. And then when we're done, we'll copy paste
the total HTML file that we created here. Sounds fair enough.
Let's get started. Let's go on our browser
and type in the URL tab, W3 schools.com slash client. Double-click on try
frontend editor. And then we'll delete this code. Now we have a blank
canvas to work with. So how does HTML work? It seemed, for the most part, is made of tags that allow
us to prettify our text. Otherwise, we could just
type freely without any tags and it will still display our texts
on the webpage. For example, my first website. Let's click on Run. Oh, you see, I just type the new line
in the source code, but it didn't show that in the final product
or in the browser. This is where tags
come and play. Tags tell your browser to display things in
a specific way. So now let's take a
look at how we can use tags to structure our texts and place it wherever we want. So we typed hello. Then a new line that says
This is my first website. So we have to tell
it that there's a line break at
the top and tear. To do that, we'll use
tags to be more specific, the BR tag, which
means line break. So we're going to
have Hello, then BR. Let's run our code. And by the way, I don't have to place the stack in a new line, I could place it next to this, and it would still
have the same effect. So the BR tag here tells the
browser to start a new line. Now say for example, we wouldn't have our text bold. We'll just use the p tag, which stands for Bolt. So for example, noticed I opened my p tag here and I had to close it here. Otherwise, it would have bolded all the texts that
comes after it. For example, if we
had more text after, this is my first website, we didn't close the bold tag. This is what we're going to get. So an HTML, sometimes we have an opening tag and
then a closing tag. This is to tell
our browser, hey, do this markup only for
this specific texts. So now when we add
the closing tag, our browser understands
which texts to bold exactly. And that's pretty much
how it works in general. You just have a tag that
does something and then you insert the text in between it that you want the
tag to work on. To say, for example, I
wanted to create a list. I just look HTML lists
on the Internet. Then let's choose the first
search results. For example. We can copy this text and
paste it in our file. Now we have a list
in our HTML file. We can edit TO own needs. For example, we can
change coffee to Apple and sort of customize
it and take it as a template, then adjusted TO or needs. Now this works because our
file has an HTML extension, but in a real-world scenario, we need to add tags at
the top of our code to specify that this is
indeed an HTML file. So the first step we need
to add is the DOCTYPE tag. So let's enter a new line and
make space for attack. Dog. Of course this that doesn't
require closing tags. It's not really a tag, it's more like inflammation for our browser that this
is indeed an HTML code. Now, after the DOCTYPE
tag comes the HTML tag. This is a tag that
tells the browser that anything inside of
it is an HTML code. And now inside of the HTML
tag comes the two main tags. That is the head and the body. So this is where the head starts and this is what the head end. Similarly, this is
where the body starts. And this is where the body and the body tag is indeed
the body of our webpage. It contains most of the
contents we see on the webpage. So to make our code
more structured, Let's move our code
to the body tag. Then to make it more structured, I'm just going to highlight
all of this and press Tab. Okay, so now let's take a
look at the main tags we use by default in any
webpage that we create. The first one being the
metatag, the head section. To display an HTML
page correctly, a web browser must know
which character set to use. This is the standard
default character set that is used UTF-8. The next metatag we want to take a look at is the viewport tag. This essentially makes
our web page more responsive by setting the
width to the device width. It allows a lot of
web-based to change its size while still
retaining readability. So for example, a phone usually has a smaller screen
than a laptop. This Meta tags makes it
so that the phone can also view this web page
without any issues. Now, after those metal
tags comes the title tag. The title tag as well. I titled it gives our
web page a title. So let me show you what
I'm talking about. If I copy this code
and open it with Notepad and paste my code
here, and then open it. As you can see, the title
here is the name of the file. We want to change that title. To do that, we will
use the title tag. So let's go back to our code. Open it with Notepad. So let's create a new
title for our webpage. Now after we are done with
our title, we close it. Now let's run it and
see how it looks like. As you can see, it
shows the title here. So let's head back
to our text editor. I'm going to paste
the title here, and that's about it
for the head tag. Let's take a look at
the body section. Here we can put all the
contents of our wage. So first off, let's take
a look at the H1 tag. So we'll type. This
is a large title, the largest to be more specific, we have six heading levels, ranging from H1 to H6. H1 is the highest heading level and the largest in
terms of font size. It's six is the lowest and the smallest in
terms of font size, it's very unlikely that you're
going to use all of them, but let's just take a
quick look at them. Now, one of the most common
tags you will use and the body is the p tag
or paragraph tag, as the name suggests, it's a tag in which you
can write your paragraphs. And so let's take a quick look. This is how it looks like. An in-between here, we
based our product graph. Now let's fill our p tag
with some random paragraph. For that, I will just Google some random Wikipedia document. Then I'll paste my paragraph
here. Or you know what? I'm actually going to
move it below the list. We can add new lines or
spaces in the source code, but the browser
ignores it because each word gets only one space. And lines don't break unless you explicitly specify
that using the PR tag. Okay, so let's remove all of this mess because let
me just get this back. For example, let's
add a new line here. Maybe you want another line. And if you notice those B are elements don't require
a closing tag. This is called a void element, avoid element is an element. Whose contents model
never allows it to have contents under
any circumstances. If we want to force
our texts to be represented the way we write
it in the source code. We can use the p tag
instead of the p tag. For example. Let's see what it looks like. Of course it looks like a mess. Maybe this could
be useful to show code text where the
lines and spaces matter. So as you can see, this
looks like a mess, but this is more appropriate
displaying code. I guess this is one
of its use cases. Now that we know
how to structure our HTML texts using line
break and paragraphs. Let's take a look at how we can style our texts using HTML. Keep in mind that some of them are not being used that much nowadays due to CSS being
certainly Delta style, the HTML document for us. But we can still take a
look at them nonetheless, the first one which we
have already seen is the bold tag, for example, here. There's also a italics. There's also the EU tag
or the underlying tak. There's also the emphasize
tag and the strong tag. They are identical to the
italics and the bulb. Okay, so let's
remove this stack. We can separate
sections of our webpage using the horizontal
rule or the HR tag, for example, let's separate
these two sections. We can create links in our HTML document using
the anchor for the a tag. Okay, so let's create a hyperlink at the
end of our paragraph. Inside of H ref or the
hypertext reference, we will place the link we
want to take the user to. I'll use the
Wikipedia link here. And now in-between those two, I will write whatever
text we want. This is the texts the
user can click on. Now let's click on Run. Now, I'm not going to click on this because this is
going to open it in the same page and
this is going to ruin all of our code here. Now if I click on this, it's going to open
it in the same page. Oh, okay. I thought it's going to
open. Okay. That's not bad. But either way we want to open it in a new tab when
we click on it, this is what the target
attribute comes in play. So this is how we use
the target attribute to open our link in a new tab. So after the word link, target equals underscore, blank. Now let's open our
code and click on it. As you can see, it opens in a new tab. Now
that's much better. Now, let's learn
how we could add an image to our HTML document. So simply this is
how it looks like. You can use this assuming that the image is saved
in the same folder, your HTML file is saved. Otherwise, you can use a link, but it's not very recommended to use a link to an
image because it might not look as good as an image already
downloaded in your PC. So if we hit on the Internet for a random card pack, for example. And let's choose
this for example. Let's take this URL
and paste it here. Let's run our code. Optionally, we can
add an alt tag. This will work as a description for the viewer that the
image doesn't load. For some reason, you can
write a small description. Okay? So of course
it's not going to show because the image is
loaded up perfectly. So let's cut up this link, for example, and
see if it works. As you can see, because
it didn't look. Let's add a new line here. Okay? So because we
corrupted the link, it use the alt tag. So let's bring back
the full link. We can also control
the width and the height of the
image if we wish to. Otherwise it will use
the default size. For example, here we
can add the width. Let's give it a value
of 500, for example. We can also add
water store image using the border attribute. We will add border equals five. For example. So this is how we can add
an image using a link. So what if we want to add
an image from our PC? Well, first we can't use an
online text editor for that. And we have to have an image at the same folder
as our HTML file. So I have an image here
that says corp dot PNG. I'm going to copy paste
at all HTML folder. Okay? So now let's copy paste
this code HTML file. Open it with Notepad. And then for the MH source, instead of this link, I'm going to use the car. This is an image I've
created as an example. So now let's open it and
see how it looks like. As you can see the images there. And that's one of
the advantages of using a desktop
uninstalled text editor. It allows you to
load the images from your PC alongside of
many other things. Okay, so next thing we want
to take a look at is less, for the most part, there
is two types of lists, unordered lists, ordered lists. There's a third type
called description list. We'll take a look
at it in a second. But for now this is how
unordered lists look like. This is how ordered
lists look like. Notice they're almost identical except for the tag
that contains them. Unordered lists have a UL tag. The U stands for unordered, and the L stands for
less ordered list. Have an OL tag. The O stands for ordered. The L stands for list. So let's take a look at
the description list. The title of our description
goes on the d t tab, which could mean
description title. And beneath that
with the DD tag, we would write the
description of the item. We could actually
make those titles bold to make them
look more appealing. But really this is not going to make it look appealing enough. In order to make our
website beautiful. We need CSS for that, but that's a topic
for another video. Also, we could
make nested lists, meaning a list inside of a list. Let's take a look. So this is our regular list and we will add another less
than side of it. Oh, I forgot to close the list. Now I'm going to
remove the status because they're taken
up too much space. Now this means that
the keyboard is the balance elements and those
three elements beneath it, or the child elements, because we are keeping
our code structure, we can easily tell
just by looking at the code that this is the parent element and
this is the child element. But if someone wants to ignore those spacings, which you could, by the way, the browser would
read your code just fine. However, if you were to
read your code later on or someone else wants
to read your code, they will have a
hard time doing so. So someone's code was
to look like this. It's gonna look exactly
the same like this one, but it's very hard to read. It would run just
fine as you can see. However, it's not very readable and it's considered
a bad practice. Now, in finally, let's
take a look at tables. We can use tables to organize
data into rows and columns. Tables use the table tag. Inside of the table tag
we will write everything the table includes
from bars to column. So let's create role for that. We will use the TR tag, which means tape of row. Inside of the table rows, we will create the TH tags, which means table header tags. Now let's run our code and
see how they look like. You know what? I'm going to take this at
the top of my webpage. Now we'll make
another table row. To do that we will use t. But instead of th,
we will use TD this time because this is
just regular data. So the TD stands for table data and the th
stands for table header. Now let's change the values
to their prices. For example. It's displaying
information as it should, but it really looks very basic and not so
visually pleasing. We can style our table using the built-in table attributes. So each we'll do,
we'll mix a table. A table is a line separating
the rows and columns. So let's add that using
the border attributes. We could increase this number to five or ten, for example. But what this will do is only increase the width of
the outside border. Another thing we
could do this display our table and a more formal matter is the use of cell padding and cell
spacing attribute. We could also try the
cell spacing attribute. Maybe ten is a bit too much. Let's try five. Even that's too much. Maybe two is the best. Another thing we could
do is to make sure the number of rows and
columns are matching. So if we were to delete
any of the cells, it would look messy. So if we delete this cell, for example, one more thing you could do is to make
oneself span two columns. So for example, for the mouse, we can make it span two. Now it looks messy because it's taking the columns
of the screen. So we could either get rid of the screen or add one more
cell in the row beneath them. So here, let's add a cell and can give
it $7, for example. So now let's say it's
mouse could now the price of $5 or $7, while the screen
has only one price, which is $100, but it
doesn't say price. So maybe the viewer doesn't
understand what that means to get around that will create
a cell that says price. But now because the rows and columns are not matching,
it looks messy. We'll create a phantom
cell in the row above it. So we created a cell
and left it empty. We can expand our table simply by copying,
visiting those elements. Now let's give them
different prices. For example, you might
say it looks fine, but the keyboard prices
are shifted to the left. We want them to be centered. For that, we can use
the style attribute. So this is the cell in which the keyboard prices and style. Now let's copy paste this to all the cells that are present. The keyboard values, the
keyboard prices, I'm sorry. Okay, That's more like it. Now it looks much better, but it's repeating the
word price multiple times. Isn't that a way to span
price across three rows? We could do that simply by
using the rowspan attribute. We will split across three rows. So this is the price sell. You want a row span three. Now since we're all spending 23, Let's get rid of
those price elements. It looks a bit more
minimalistic now. Now we can copy this code and
insert it in our HTML file. Let's run it and
see how it looks like. We have a one more thing. Let's change the image to
have cartoons PNG instead. Since it's not a queen called
unimodal, it's a red card. Okay. So that's about it. You have made your
very first webpage. I hope it was a worthwhile
watch and hopefully it gave you a general understanding of the fundamentals of HTML. Thank you so much for watching.
Naser Jamal, Computer Engineer
