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.