2.3 What is HTML?

Welcome to Lesson 3. So what is HTML? The name stands for hypertext mark up language, it's a language used to write web pages. So here's the thing every browser like Chrome of Firefox or Internet Explorer has a rendering engine. Now that engine will read the HTML, and we'll interpret it in a specific way. So basically, it will translate that HTML into the web page that you see. And I just want to show you what HTML actually looks like. And I have the envato web page opened here and this is something you can do in almost any browser. You can right click, and you can select View Page Source and this will show you the HTML that's used to render that page. So, it might seem really complicated at first, but it's not really. So the HTML language consists of several HTML tags a tag is this basically, HTML. And this is a tag. And each tag can have different properties it can have a class, and can have an id and so on. I'll be showing you those. The head, as you can see here, this is another tag. And the tags are the means by which you can represent various elements in the page. For example the a tag, this is called an anchor tag, it's used for links. What else? The nav, this is used for navigation. The div, the div is a block of information. The UL, stands for un-ordered list. So it's a list of elements. On the list, the LI stands for list item. So it's not hard to learn these elements. Now I'm going to give you a crash course on HTML by explaining the very basic structure of an HTML document. And also some of the most commonly used HTML tags. So I'm gonna jump back to my code editor and start with this. [BLANK_AUDIO] Doc type, HTML. Now the doc type is not an HTML tag. It is an instruction to the web browser that tells it what version of HTML the page is written in. So, once you write the doc type, you follow that with the standard html structure. So, you start with the html tag, and then you close it. And everything, you put between these tags is treated as HTML. Next, every HTML page needs a head and a body. So, you would do this, head, head. And then you would do body and you would close the body tag. All right. The head will contain information that is not displayed on the page, but is instead, it's useful to the browser. It will tell it the title of the page the charset that's being used, some information about the author, also can contain a description of a page. So, lots of stuff going to, into the head section. But probably the simplest, and the one I want to show you, is the title. So, title and you go ahead and close that, this is the page title. So now if I open this page in a browser, and in the tab is gonna say this is the page title. So this is where the title is being shown. Next, let's move on to the body element, to the body tag. Now everything you write within the body tag will be displayed on the page. And I'm going to start with headings, this is a base element for any web page. It starts with an h followed by a number, from 1 through 6, and the lower the number, the higher the importance of that particular heading. For example, Heading 1, will have a much bigger importance than heading 6, and this is the way to create visual hierarchy within the page. And you've seen them used H1s for example or H2s are used to display. Big bold titles, while h4, h5, or h6, they're used for smaller titles or titles to less significant sections on a page. So I'm gonna do an h1. I'm going to close it, and inside I'm gonna say, this is a big heading. Save, refresh and there it is. Let's see how an h2 looks like. So h2, this is a smaller heading. I refresh. And as you can see the font size is smaller with this second heading. So if I do a third. So an h3 for example, this is an H3. It's even smaller and so on until h6. All right another element that I want to show you is the hr. So, the hr stands for horizontal rule, and it's just a line that separates various bits of content. Next is another very important tag and that is the paragraph. So paragraph, I'm going to say this is a paragraph, and this is basically a piece of text. Next I wanna show you the anchor tag, or the link. So I'm gonna do A for anchor tag, and each anchor tag or each link needs to go somewhere. It needs to link to another page or another website. And for that you're gonna use an attribute called href. And you can remember this attribute by associating it with the word reference. In this case I'm just gonna say www.google.com, okay? Inside the link I'm going to say this is an anchor tag, linking to Google. And I'm going to close the link. Refresh, and if I click it, it's going to take me to a webpage that is not found. And that's because I wrote the link wrong. I gotta do http. So that is the protocol, that is the correct way to link to a different website. So now, go back, refresh, and it takes me to Google. You can also nest various tags within other tags. For example, I can have a paragraph that has some text and a link or an anchor tag inside it. So I'm gonna say this is a paragraph with a link inside it, and close the paragraph. Refresh, and here it is. Notice I don't have anything in the href field, and that's okay. You know, it's, it's not wrong, it's just that when you click that link nothing will happen. Next up I'm gonna do an hr again, so just a separator. And I wanna talk to you about an element which you're gonna use very, very often that's called a list. Now, there are two types of lists that you're gonna use at first. One is the unordered list which displays list items using bullet points. And the second one is ordered list, which will display list items with numbers associated to each one. So, let's do the unordered first. So unordered list you write ul. [BLANK_AUDIO] And then close it. And inside you'll place list items. So, List Item. [BLANK_AUDIO] Close the list item, and whatever you put between that and the, the start and the end tag will be displayed on the page. So, List item 1, and I can duplicate this and say List Item 2 and 3. Refresh, and there it is. Three list items, each with bullet points. Now if I copy this list. I'll paste it here, and I'm gonna change from ul to ol, so from unordered to ordered list. I get a different result. Now, we don't have bullets, instead, we have numbers for each list item. Pretty easy, right? Basically you use the same list item syntax for both types of lists. So no changes are required there, but you just gotta know which one you need. All right, now, I want to talk to you about the div. Now the div, you write it like this, div, you close it, and inside you place some content. Now the div is a block of information. It doesn't have any styling at first, you can add it later via CSS, and its main purpose is to organize your HTML, into blocks of information. And I'm gonna include a paragraph inside the div. And this is perfectly fine, you can do it. This is a paragraph inside a div. When we get to the exercises part of the course you'll probably understand better when and how to use divs. But for now, since we're dealing with paragraphs, I want to show you two HTML tags that deal directly with text. One of them is for bold text. And the other is for italic text. So, I'm going to say something like, here's some strong bold text, close the strong tag, and also some italic text and close the en tag. Save. Refresh. And this is the result. So, this is the bold text and this is the italic text. Now, the bold text can be rendered using the strong tag. So, everything inside the strong tag will be rendered as bold. For italic, you gotta use the em tag, em stands for emphasis. So usually when you wanna emphasize something, you write it in italic. That's why the em tag. Finally, I wanna talk about, one last element, and that is the image. So when you do web design, you're gonna use images, almost all the time. And the way to do that is with the img tag. The img doesn't have a closing tag, it's what is called a self closing tag. So, you'd close it like this. So, this form right here, oops. Img, this is not correct. Instead, you're going to use this form. So, inside one attribute is src, which means source, it's the image source, you tell it, you tell the browser where it needs to load the image from. So inside I'm just gonna but http, and I'm gonna give an address to a website that will service various images, 'kay? Refresh, and there is our image. Refresh again, and a different image is being served. A mandatory attribute is the alt attribute for the image. And this is an, an alternate text which will be displayed if the image specified in the src attribute is not found. Alt is going to be image, and that's basically how you write an HTML page. The language is more complex of course, but the tags I showed you are the very basic ones, and also, the ones that are used the most in any project. I'll be showing you some more tags once I get to the exercise part, but for now I'm ending this lesson here. In the next one, I'll show you how to write some simple CSS. So you can alter how the HTML page looks like.