>> DAVEN FARNHAM: Today, I'm going to talk a little bit about HTML,
HyperText Markup Language.
You see HTML everywhere these days.
In fact, if you're watching this video in a browser, you're
seeing HTML right now.
HTML is not a programming language, rather, it's a markup language used by
web browsers to render pages on the internet.
>> So you might ask, how exactly is writing a web page in HTML different
from writing a program in a programming language like C?
Well, C is a language with very strict syntactical rules that needs to be
compiled before it can run.
If you've ever forgotten to include a semicolon at the end of a statement in
your C code, you know what I'm talking about in regards to strict syntax.
>> Web browsers though, are a bit more forgiving when it comes to HTML.
Even if your HTML isn't syntactically correct, your page may still be
displayed by a browser, but it might not look as you intended.
So it's always best to follow the rules.
The best way to get an intuition about how things work is to
go through an example.
>> So what we have here is a basic blueprint for a web page.
You probably noticed a lot of things in between angled brackets.
Well, those are just tags.
Tags basically inform web browsers that, hey, something
is coming your way.
Remember though, whenever you open a tag, you need to close it once you are
done using it.
>> So for example, I open a section of code with open
bracket body, close bracket.
I then add some text, in this case, my first web page then when I went to
close this section, I use almost an identical tag except this time with a
forward slash before body.
In general, this is the format you're going to use whenever you are opening
and closing tags.
Together, an open tag and an end tag compose what's called an element.
>> If you look at the first line, you'll see an exclamation point followed by
DOCTYPE html.
This is really just telling your browser that the file is a web page
written in HTML.
The HTML tag essentially says, here comes some HTML.
Then we have a head tag with a title tag inside it.
The head tag you can think of as comprising HTML code that comes for
the bulk of your web page's actual content.
>> In general, you put the title of your web page here, though there are some
other tags that can appear here as well.
Next comes your web page's body, the actual meat and bones of your website.
In our example, we've just put a simple sentence, My First Webpage,
which, if we run our site, will look a little something like this.
Our web page isn't too queer, but don't worry.
We'll spruce it up soon.
>> So the above HTML, we'll give you a very basic template for a web page,
nothing fancy, just the bare bones.
But if I'm creating a web page, what if I want to add a
picture of, say, myself?
Well, I can do that.
There are a couple of ways to add images to your site.
If the image is in the same folder as your HTML file, you can link to the
image via path like this.
>> You open up with an image tag followed by in Alt attribute in the
source of the image.
The Alt attribute's value is just some alternative text in case a user can't
see the image.
Alternatively, you can also link to images via a full URL, like this.
Now, that website doesn't really exist, but if there were a picture of
me at that address, I could use the source URL to include
its image on my website.
Either way, you end up with a much prettier website, something like this.
>> Well, that's pretty cool, but I kind of want some text here as well.
So let's just add something super simple above the
image, like the header.
All I've done so far is use the header tag, H1, and a line break tag, br.
The header tag makes the font a little bit bigger and more prominent.
The line break tag, on the other hand, is kind of cool.
Unlike most other tags, you don't have an opening and closing break tag, just
the one shown above.
This is because break has no content and is therefore, an empty element.
>> Empty elements like this, you can open and close simultaneously simply by
including a forward slash at the end of the initial declaration.
So now my website looks a little something like this.
Better, but it kind of feels like a dead end.
There's nowhere else to go aside from this main page.
Well, let's fix that by including a link.
>> What I'm going to do here is use an attribute denoted by A and make the
image a link to, let's say, CS50 TV.
That way, whenever anybody clicks on me, their browser will be directed to
another, probably more useful, web page.
I've had to minimize the size of the text a bit because our web page is
getting more advanced.
But hopefully, it's still clear.
My website looks exactly the same only now, whenever I click on the picture,
my browser will open up another tab for the CS50.tv web page.
>> Lastly, let's say I'm going to style this website later using CSS.
CSS is what is known as a cascading style sheet.
And it basically provides an efficient way to edit and style
similar blocks of code.
I want to start organizing my HTML to make it easier to style later on.
Here, I set up two different kinds of identifiers to help organize my code.
I've used the ID attribute inside a division, or div tag, and I've used a
Class attribute inside another div tag.
>> ID and Class attributes work similarly.
The only difference is you can only have one element, the specific ID, but
any number of elements can share a class.
So for example, I can use the class image multiple times, but I can't
create another division with the ID top.
Although I haven't gone into CSS, another language commonly used
alongside HTML, once I start styling my code with CSS, I can use these
organizational attributes to influence my web page's aesthetics.
>> Everything within the division top will have similar stylings or any
other group of HTML I group into the class image will share a similar look.
This is much easier than trying to edit and style images or blocks of
text individually.
>> So we went over the basics of how to make a web page with HTML.
HTML has a bunch of other features too that when paired with other languages
like CSS and JavaScript, can really make pages stand out.
The best way to get comfortable with HTML is just to mess around with it,
see what works, and what doesn't.
>> My name is Daven Farnham.
This is CS50.
>> So for example, I can use the class image--
No, there are so many attributes.
My name is Daven Farnham.
This is CS 650.
I want to say CSS.
This is CSS.