Today I will talk about HTML, HTML stands for Hypertax Markup Language. If you go in any website today, be it on your phone, tablet, or laptop or desktop computer, you open your browser, you're going to see a web page and what we now see as completely dynamic web applications such as social media like Instagram, Facebook, TikTok, and so on. Now, how is that built? Well, at its core, what we see is built primarily with HTML, CSS, and JavaScript. And today we're going to cover just HTML. HTML gives the structure of the document, whereas CSS will style it, make it pretty, and JavaScript will make it dynamic or ever-changing and interactive. When HTML first started, it was used for people, scientists to share scientific papers and so on. So the terminology from that time is what we see still today. And that's why you're going to see we're talking about documents when we refer to the web pages. Now, let's get started here. I'm in jsferro.net. And this environment allows me to run the code that I type in this HTML panel. And there's CSS and JavaScript as well, but we'll focus on HTML today. So if you click run in the top left, you're going to see the result in the bottom right. Now, this is one of the layouts. If you don't like this, layout click settings in the bottom right and switch from either columns or other layouts. I'm going to use classic. And my settings also, I disable auto close HTML tags and auto close brackets, because I think for beginners, it's best to always type them manually instead of relying on autocomplete. In any case, so as a start off HTML, a document, when you're going on a web page, you're going to see a lot of things. You're going to see text, you're going to see images, links, things that are clicked to go to another location, you're going to see video audience so on. But let's start off with the basics. How do we play a simple text, maybe a paragraph. So to do that, we start off with a greater than sign. And then what we have to type the name of the HTML element. In this case, the paragraph is just P. And then you have to finish off here with a gradient sign. And then you start typing the text. Let's say hello world. That's what I want the user to see in the paragraph. And then to finish off, once you're done with the text, you can say the last name of the element with the slash before it, and then greater than sign. Now what we have here is this angle brackets P. It's what we call the open tag. And the angle brackets with the slash forward slash, receding the element name called that a closing tag. So everything that comes after an open tag. And before the closing tag is part or is contained within this element. It's a child of the element. And if I click run in the top left, I'm going to see the words hello and world shown here. Okay, so in HTML, we have elements that we build using open and closing tags. Now you're going to see tag and element be interchanged a lot to mean the same thing. Okay, what if I wanted to display another paragraph, while you follow the same pattern, you can do either before after. In this case, if it's after it has to be right after the closing tag, we can start off less than name of the element in this case P, and then greater than sign, and then type the text. Hello again. And then once you're done, add the closing tag with slash less than slash name of the element being P, greater than. And then you can click run in the top left, you're going to see hello again appear. Now notice that hello again, it doesn't appear next to hello world. Because what you see in the code does not necessarily translate to the visuals that you see as a result of that code. So because of that, I am allowed to style my code visually anyway I want. Typically, I would break a new line here and click run. It's the same outcome. So you can style anyway want some people like adding, making the tags have their own lines, same thing. Some people add what's called indentation, which is spaces to the left in the beginning, usually at least to no change. Okay, now, how you see the paragraphs, they are that way because of their default style in the sense of visual style. Every browser will have default styles and those styles are defined by CSS cascading style sheet. Now, the default style for the paragraph is such that any text that you have, the content itself, you cannot have anything next to it. So I will push the content to the next line. For example, hello world. We finish the word. However, this whole thing here will push anything next to it to the next line. So just to show you briefly, I'm going to right click with my browser, click inspect. And this brings up what I call the developer tools so that I can debug my web page. And I just want to highlight on this inspector tab on Firefox, it's going to be named elements on any chromium based browser. I just want to hover over the paragraph, you're going to see the content occupies the whole row. That's what I was talking about the default behavior visually is to push everything down. Same thing for the other one. In any case, I can close the dev tools. All right, so that's simple enough. Now, let's do another element. So when you talk about documents, what HTML was originally made for would have documents could be something like a scientific paper, it would surely have a title, some content like paragraphs, and then subtitles and nested sections, subsections. Now, you can do that. And usually we typically use an element called h1 through h6, which stands for heading level one, all the way to heading level six. So I can break a line here and before my paragraph for hello world, I want to add a title to this page document here. So less than the element name here is h1 and then greater than and I can start writing my title. Say welcome of exclamation and then finish off with less than slash name of the element, greater than sign, click run at the top left, you're going to see now there's a huge welcome letters, a little bit bigger than a paragraph. You notice that the open tag, it's always the same pattern. I have the name of the element, and it has to match the same as the closing tag. So be careful, don't type different element names for the closing and opening. Okay, so the default visuals for an h1 heading level one is to have both letters a little bit bigger than the paragraph one, because it's meant to stand out like a title. Now, like I said, each one can go all the way to h6 on the elements. So if you have something like a subsection of this, if I go break a line for hello again, maybe have a, like a subsection, I want to say what it means to be welcome, something like that. Like a subsection, you know how we have documents, they have subsection, subtitles. I've got it here, less than h2, greater than, and then my text. And then after the text, I close with less than slash h1, h2, greater than. And then you can add a paragraph there, angle brackets p, describe this subsection, and then finish off with angle brackets slash with the p inside. So this what it means to be welcome would be like a subsection, I don't, I don't know if you notice visually, but it's slightly smaller in its font size than the h1. That's the default styling. And then it goes on and on. It's kind of tedious, but I'll just type heading level three, so you can see what it looks like. But essentially the same kind of thing. Now I can copy that and do h4, heading level four, and then copy that to h5. It goes all the way to six. And you're going to see visually, it's just text that gets increasingly, gradually smaller and smaller, which is meant to be a subsection of a subsection of a subsection, like a nested, oops, let me add six here, and click run in the top left. Make sure you click run. Now I can scroll down, let me increase this, so you can see more. You can see every heading level, the higher the number, the smaller the font size gets, because it's meant to be a subsection of a subsection. Now this is the original intent of these elements, doesn't necessarily mean they are used for their original purpose today. In HTML, you're going to see a lot of elements being used in different ways other than the original intent. And that's very common. And also the visual styles, you might not always see the heading level, whatever, in this specific gradually decreasing font size, because anybody could go in and add custom styles for any HTML element. So don't always take that for granted that they're going to look like a certain way. Anybody could style the HTML element to look any way they wanted. Okay. So that's nice. Now I want to do something interesting today. Add here after welcome. Let's add this interesting HTML element that is meant to show some progress indicator. So less than the name of the elements progress, and then greater than. And then we're going to not going to type anything within F for the content. So I'm going to just write the closing tag like that. So if I click run, so you're going to see this kind of a bar with something inside going from the right to the left and back and forth. So this could be used something like a loading indicator, like a spinner, your website or content still loading. That's one of the use. And I think this element's pretty, might be pretty new in the sense of history of HTML. So probably not very used today yet. But anyway, we can also add to this something like a progress. Maybe you're reading a book, right? If you're reading a documentary book, maybe you're on a certain page, there's a say, let's 100 pages. And right now we are on page, maybe around 40. That means we have completed 40% of the book. So we could show this level meter, right, filled up all the way 40%. So to do that, we can tell the progress element to change its behavior to look like something different. I want that bar to actually be fixed and aligned to the left. So the way we can give an element additional information or metadata is through attributes. And to add an attribute to an element, what you have to do is go to the open tag. And then to the right hand side of its name, add a space, and then you start typing the name of the attribute, and then equal sign, and then double quotes, write the value, and then finish off with more double quotes. So in this case, I want to give this a value equal sign, I want it to be 0.4, and then close quotes. So name of the attribute of value, and you have by the syntax which the amount needed equal sign, and then quotes, double quotes, and type the value. In this case, I put 0.4. And then close it, don't forget to close the quotes, and click run in the top left, you're going to see the meter is like, it's kind of a blue color, if you can see the color, it's like 40% filled. So this value, by default, the maximum value is one, which is meant to be 100%. And 0.4 is like 40%, if you multiply by 100. So that means, okay, I'm 40% of the way reading this document. So if as you increase that is going to fill up enough. So if I put 0.6, that's 60%. And if you put a 0.8 is 80%. See, I'm finishing the book all the way up to one, right? If I put one, that's the maximum and it's all filled up. Okay, so in the context, HTML, right now we're just talking about static documents in the sense that they just stand there, and they are not interactive, things are not changing in the document. Now, when you look at the website today, there are many things changing, right? Things are in the document are not permanent, something's moving, something's changing place, something's being typed into a form field. So you'd probably manipulate this progress bar, depending on the state the user is in, in the case of reading a book or a document, you would have first get the page, what page I'm in right now, and it would compute, okay, if I'm page 40, that means I'm 40 divided by total pages, let's say 100. So that means I'm 0.4 all the way, so I take that value and I modify this element to have the value 0.4. But the way you do that is through what JavaScript, which is the programming language of the web. So we're not going to learn that today, but that's how we would manipulate this document and change the value of the progress bar. So it would change every time we click to next page, next page. See, I'm clicking, being interactive, I'm clicking, that's an event, and that will cause something to happen to this document. And that's the computation of the progress. Okay, but for now, let's leave it static, doesn't change as we're looking at it. And like I said, we could have a book that we're reading and have many pages, maybe we click a button to go to the next page. So how do we show a button in HTML? Well, we're going to use the button component. Let's say here after the progress bar, I'm going to add less than, name of the element is button, B, U, T, T, O, N. And then we're going to type after the open tag, the label, what is the user going to see in the button. So let's say next page. And then less than slash button again, right or then this is the closing tag. The only difference with the open is just a slash preceding the name of the element. So click, run, you're going to see next page there. So this button that you can click, obviously, we don't have anything right now that's happening when we click, but what would happen in the ideally as you, if you later learn JavaScript, is maybe, or either it could be JavaScript or it could be just a link to another page. So if we want to be simple, we could change this button to a link. But if you want to just be fancy, you would click this button, and then that would trigger what's called an event click. And then JavaScript code, you could write to change the content to the next page. And then eventually it would compute the progress bar value to a new value. So every time you click next, this would fill up more and more. And then you could do the same at previous, let's do before the progress bar. So less than button, greater than previous page, less than slash button, greater than and like that. So click, previous and next, previous and next. Okay. Now it would be interesting when you're reading maybe some document or scientific paper, probably show some data. And that data is in a table. So how would we show a table in HTML? No, let me show you, there's the table element. So let's do it, describe the subsection here. Find a paragraph or describe the subsection, I want to show some data after that. So I'm going to break a line. Mind you, I could type everything in the same line as describe subsection, but it'd be very messy to be a long line. So I always break a line and have to have one element per line, usually. So it's the table element. So write it within the angle brackets. And then put a closing tag there because we're writing something between, I'm going to break a line there. Now the table is a bit more complex, because okay, what am I going to am I going to write between the open closing tag? So we're actually going to write more elements. So we're going to nest an element beside another element. Now the way tables work, there's usually a first row that's called a header or heading row, and it has table headers, right? So it's usually the column name. And then we follow by rows, table rows, and with content in cells, right? So we have a table head, and each has a table header. And then followed by table rows. And each has a cell, let's say, let's start off. So we have to write in angle brackets an element here. So there are different ways to go to table. There's the more explicit way and implicit way. I'll write it the explicit way with more elements. So usually you put it here, the T, you get here the syntax. Maybe I'll do the simple way, never mind. Let's do it a simple way. So to create a row here on the table at TR, and then close it, and then the TR means table row. Okay, we're going to create a row. Let a row have cells. So the first row, especially, you could use what's called TH table head. So let's say column one here. And then close it to TH. And then this is the first cell. And then you can do another one, TH column two, like that. So what we're doing, okay, we have a table and inside the table create a table row element TR. And then inside a table row element, you write a table head, or header. You can see here appears like this column one, column two. Now by default, it doesn't show any borders or stuff around the table. So it might be hard for you to see it's actually a table. So I would like to add some styling here with CSS, although you don't need to know CSS, to make it easier for us to see visualize it. So I'm going to go to CSS and paste some code here. I just paste that code. So that's, you can see now there's some border around it. So it's easier for us to see. In any case, here's the table with the table heads, which means like the name of the column. And then if you if you want to add more, you can proceed with more THs. Now once you're done, make sure you're outside the TR meaning after the closing TR. Now we can write add another row. So I'm going to say less than TR greater than. And then I'm going to add a TD. Now there's not THS TD. This stands for the table cell. Okay. Now let's add value one or something like that. And then I'm going to add another one TD value to close it. And then TR to finish off close the TR meaning close the row. Now you notice I always put spaces every time I open a new tag, I add more spaces that are on the left hand side. That's called indentation is very common programming languages. So every time I open tag, I will add two more spaces, at least two spaces. So you see, I'm always open the table, add two spaces all the time to the left. And then because I open a new element inside the table, I have to add two more spaces. So this gives me a sense of depth that visually when I read the code, I see that, okay, this TH is inside TR and the TR is inside table. Whereas if I didn't have that, it'd be harder to understand who is inside what. When I say inside, it means the element is contained between the open and closing tag of another element. Okay, let me revert back. So that's why I always add indentation there. Anyway, click run and top left, you're going to see the column here. I added the second row with the TD for value one, TD for value two. Now I know it's a bit complex to write tables. It's not just some text between the open closing tag, you have to have an element side not an element and another element side of element. But it's always like this, make the row first, and then you make the cells or columns. And the first one is usually TH because of the heading, the column name. And then the second the follows is just TR of TDs. Now if I want another one, just copy the second one out there, maybe value three, value four, and it'll be like that, another row. Now the reason the styling changes because CSS that I added here, that's kind of alternating the column for the background of every row. That's easier for us to see, because without the styling, we wouldn't see any board or anything. So it's hard to understand that's actually a table that we're seeing. Okay. Yeah, so if you want to add more columns, you just add to the TDs or TH. If you want to add row, add another TR. For example, another column, let's add another TH with the first TR content, let's say column three, and then close the TH. And I'm going to see column three there. Now notice there's no columns, no cells under it. That's because we don't have a third TD in the rows that follow. So you make sure to add another TD here for the value, value third. And then for the next TR, make sure you know where you're writing the code. Identify the second, the TR, that's the third one. And then inside that, after all the TDs, add another TD, type whatever there. And now they're here, value third and value here. Now, maybe ask some people, can I have one column merged with another, like Excel? Yes, you can. Let's say I want to merge column one and two here. So what I would do is, let's get rid of column two. If I do that, you're going to see there's only column one and three. But I want to make column one also take the space that was belonging to column two there. So I can add an attribute to column one. And that's called a call span attribute. Remember to add an attribute, go to the open tag, right hand side of its name out of space, type the name of the attribute, this case call span, and equal sign double quotes, double quotes, type between the double quotes, the size of this column. In this case, I want to occupy one, two, right, two spaces. Now, when we do that, you see the column expanded to take up the space that was used previously by column two. So that way, push column three to its place. And that's how you merge the styles. Now, similarly, you can do the same with rows, merge rows with what's called a row span attribute. I'm not going to talk about it, but you can try it out for yourself. Just add the attribute roll span to and see what happens there. All right. Now, let's see. So everything is nice. Just can talk about links briefly, you know, every page. Usually, when you look at a website, it will have things that you click, there are links that goes elsewhere. If you want to create a link in HTML, you do so with a name tag. The element name is A, just A. Now, let's do that. Let's do after the table, maybe. Let's say I want to put a source to this table. The data from this table comes from a specific source. If you click here, you'll see it. After the creation of the table, locate the closing tag for the table, make a line, and then we're going to write a link. Less than A, that's just A like that. Then let's right click here to see the data source. Then close the tag with anchor back slash A. You're going to see there's click here to see the data source, but nothing happens when I click because I have to tell the anchor tag, the A, where it should go. Now, that's done again with attribute. So I never need to provide further information to an element that you cannot do so just by writing between the open and closing tag. That's where you would add the attributes. So locate the open tag to the right hand side of its name at a space, and add the attributes called href equals sign, double quotes, double quotes. Between the double quotes, you're going to type the destination. That's a URL. There you go. Whatever your website that provides the data, you can always copy from the browser address bar like this one, copy that, control C, command C, whatever. Right click, copy, and you paste it here. Obviously, this one is directing it to itself. So it probably changed that somewhere else. The source of the data. I don't have anything right now. Just put yahoo.com. Now, if I click run, you're going to see now the link is there in the bottom left of my browser. It says where it's going to go. HTTPS colon slash slash yahoo.com. That's the URL where it's going to. URL stands for Uniform Resource Locator. It's the colloquial is what we say links or location wherever. It's what appears in the browser address bar. Now, if I click that, it's going to get out of this page. I don't want that to happen. If I hold control in my keyboard and press that, it's going to open a new tab. I can see it's actually yahoo. I'm closing that. If you actually want to force the user to open that in a new tab or window, you can add another attribute to the A called the target. Now, to add another attribute, again, you can always add either before the existing one or after it. You can always have multiple attributes. That's fine. So, if you want to add before, just make sure there's a space between the element name and the attribute or between attributes, they have space for target here. So, you can do after as well after href. Make sure it's after the quotes with a space target. Now, equal sign, double quotes, double quotes. And now, let's write here the value for this attribute. That's going to be underscore blank. That's just the way it is. It just means think of it as opening a new blank page in a new blank page, in a new tab or window. Traditionally, we had windows. Now, we have tabs as well. So, click run. If you click that without holding any control in my keyboard, it's going to open in a new tab. Okay. So, that's the anchor tag to make links. So, you can link anything. You can put this, wrap this anchor tag in image, something you haven't learned yet, but you can do it. Maybe wrap it in a, maybe not a button, but usually wrap it in the text, right? All right. So, I mentioned image. So, let's just briefly look at that and you can call it a date. So, you're going to see images everywhere on websites today and that's using the IMG tag. So, let's add a tag here right after the data source. So, less than IMG, greater than. Now, what's special about IMG tag is there's no need for a closing tag. It's what's called self-closing. So, you don't have to type the closing tag for IMG. You can just leave it hanging like that open because there's no text to show. So, we don't have to put anything between. Now, you have to tell the, where's the image? Where's the image? Because I don't see anything. So, we have to add another attribute to this called SRC, which stands for source. Now, here's going to go another URL, Uniform Resource Locator, luckily known as link. So, you have to find that, find an image on the internet. Maybe your favorite search engine, let's do Bing.com for example. Now, click images, search, find something like a dog. Click this first one and click view image and that's going to open the image in a new tag. So, you can copy this URL from the address bar, control C or command C and Mac. Go back to the source value and paste it there. Click run. You're going to see the image here is really huge. So, I cannot see it in the screen. So, I got to scroll down and to the side. By the way, to scroll to the side, I hold shift in my keyboard and press the mouse or rolling wheel. That's how I do horizontal. So, I take away the shift and go up and down. Okay, this is not images. Make sure to set a width and height because it's really hard to see the original size. So, I can set it with HTML attribute or CSS since we're learning HTML. Let's add the width attribute here. I'll put 200 and the unit is typically pixels, PX, but once you do HTML attribute value here, you don't need to say PX. Now, I can see the dog image is there next to the link. Now, the link itself, it's what's called an inline element. So, it allows stuff to be next to it. That's why you see the image next to it and not push to a new line. Now, you notice that I only set the width to 200 and the image also set accordingly. That's because if you only specify one dimension, it will take the other dimension and compute according to the original aspect ratio of the image. But if you really wanted to change the height, just add a height attribute there. Follow the space between the attributes, the quotes, and put let's say 50. That's going to be this kind of a compressed image vertically. So, that doesn't look good. So, I'm going to remove the height and let it compute it automatically. So, it has the original aspect ratio. Just to conclude, one other attribute for images, alt attribute to describe the image. So, I want to describe the image like let's say a dog of a specific breed. I don't know breed. So, you can type the breed name here. Be very specific about what the image is conveying because this image is all attributes used to render text here in case the image is broken. For example, if I remove the source and click run or I type the wrong source, the URL is wrong or the image at the source is no longer there. I would see instead this text a dog of a specific breed in place of the image. And typically there's a broken image icon at least used to be in old the old times. Okay. So, that's what we're going to see in place of the image you see the description. Now, I'm going to re move back the image source there. And finally, the another use case of the alt attribute for an image is for accessibility. There are people who have hard times seeing or they are blind. And what they do is they use what's called a screen reader. And it basically reads out loud a website content. So, go through the whole web page and when it reaches the image, it will read the alt attribute. So, you would see click here to see data source, a dog of specific breed, so that they would understand, oh, this far the website was meant to be an image of a dog of a specific breed. So, they would understand the content of the website without seeing it. Okay. Now, somebody asked the question, do you need to add values to span as you need? What do you mean? Was that about the table or you're talking about the image? Talking about row span. Yeah, going back to the table, I'll say row span, basically add to the TD, for example. Let's see what happens by the row span to here. See what happened there? Now, this value one, that sounds occupying two rows when I add rule span to. So, push the other to the side because there's no room for value here. But if I removed the value three, it would have space for the value one pushing down. Okay. Now, let me just comment this up. By the way, we can remove or comment out elements with this notation of less than exclamation dash dash and everything after that will be ignored, meaning not rendered. And then you can close with dash dash greater than. So, everything between these characters will be ignored or not shown. So, I click run, you can see it's gone the value three, even though I wrote it here. So, let's call that comment, very common programming languages HTML comment to ignore things between the less than exclamation dash dash and the dash dash greater than. Okay. So, I think that's enough for our introduction HTML today and I will finish this lecture.