HTML Overview

Okay, today we will be talking about HTML, hypertext markup language. Any website today that you see in your browser is built with HTML at its core. HTML defines the structure for every document that you see online. Obviously, there are pretty things like visuals and colors that has to do more of CSS, cascading style sheets, which would be a topic for another day. Here, just focus on HTML. And we're going to focus on pretty much static documents for the interactivity that we see in social media today. That's more to do JavaScript programming language, again, another topic for another day. So here I am in this environment.js fiddle.net. If you don't like this layout, always click in the top right settings and you can pick from different layouts here. There are some other options. I'm going to disable auto close HTML tags and auto close brackets for me because I'm teaching you that and I don't want to auto complete. Okay, no code hinting. Let me increase the font if you cannot see, let me know. All right, so HTML, if you ever heard of XML, that's a format we write. And HTML is pretty much written in the XML format. So what we do is we write tags, and they can have things in between the tags. And the tags can have metadata via the attributes. Now to keep things simple, we're going to understand what it means just by going jump and jump right into it. So every HTML document, you probably have seen a paragraph. So that's why we're going to start off doing. Now back in the days when the internet came out, and HTML was built for the purpose of sharing scientific papers and documents. So that's where this all came from. So you're going to, we refer to things as document. And that's because of that and all these basic constructs originated from that. So that's why it might be a little bit weird if you go to social media, because what was meant to be just a static document, just like a book, was extrapolated and built upon to be something we see today as great great interactivity apps such as social media and so on, where we click and many things moving around, a lot of stuff going on. So that wasn't meant for HTML in the beginning. So that's why a lot of things might seem a little bit different or weird. So let's go over. So to build our first tag, we always start with less than, and then we have to say the name of this tag. So it's the P tag, because that stands for paragraph. Now they shorten it to just P. So you can just leave it P. Now, once you're done with the name, you have to say greater than. Now what this is, it's an opening tag here. So you're opening a paragraph element, another name for tags is element. So the thing in between the angle brackets, we call it element paragraph element in HTML, whereas you can also interchange that with tag, where what I think of tag is the whole thing, including the angle brackets. Okay, so let's write some text. This is a paragraph. So whatever you write after the open tag is what the user will see in the document. Once you're done with your paragraph, you can finish off with the close tag. Now to close the tag is pretty much almost the same as the open except we have a slash after the last end. So we have less than slash means it's closing whatever was open previously. Now the name of the element is P, it has to match the same as the open and then greater than to finish it off. Now we can click in this environment at the top left click run. And you should see in the bottom right if you're using the same layout as me, the words this is a paragraph. And that's precisely what I typed between the open and closing tags for the P tag. Okay. Now if I wanted to write another paragraph, I do the same way as I did the water one, I need to start off with open tags so less than name of the element is P, greater than now I have opened the tag, I have to write the paragraph, another paragraph. And then I finish it off with the closing tag less than slash, and then P, greater than. Now if I click in the top left run, so it updates, you're going to see another paragraph just appeared below with some white space in between. Now you might have noticed that here in the code, I didn't have any break up line, right? But what appeared was another line. That's because in the code, it doesn't matter if you have a space here, or a line break, or you have like this, all the same you can click run in the top left, it won't matter. So you're welcome to find your own style for how you want the code to read. I think having everything in the same line is a bit too hard, especially as it gets longer and longer. So you might want to break into another line to make it easier to see. Now this styling of the paragraph occupying a whole row and pushing everything that comes after to another row that has to do CSS, calcating style sheets. And every browser has a default style for how these basic primitive elements show. And the way paragraph shows is it has the text, and it is surrounded by some space to the top and to the bottom. And then it occupies the whole row. If anybody tries to stick next to it, it will push to the other line. So that's the default browser style. You might also see in the DevTools user agent, that's the browser style. Okay, so easy enough. Now what we just learned is pretty much the very bare bones of HTML and how it's going to be pretty much all the way through. We're just going to add some more stuff to it. But the basic principle is we have tags, we open the tag, we might have put something in between, if necessary, and we close the tag. And that's pretty much it. Now we're going to see special cases later where some tags don't need to be closed because they're self closing because there's no information in between the tags that we need to provide. For example, the image tag. And the way we provide information to those kind of tags is via attributes that we're going to see later. Enough of that, let's look at the heading. So before all these paragraphs, I'm going to break the line. And let's talk about headings. So if you read a book, we have chapter one, and then many paragraphs, chapter two, many paragraphs. Typically chapter one is in bigger letters. So that's like the heading for that section of the book. So the book is divided in different sections. So so is this kind of document, if you think about it. So we're going to learn the h one tag. This stands for heading level one. So this is like the very top most heading, meaning this is defining a section. And then what follows is something to be bound to that section. So you can think about maybe chapter one or something like that. Or whatever. Now you have to close it the same way. After you type whatever you want to show, you close it with last then slash name of the element being h one, and then greater than. Now if you click top left run, you're going to see chapter one in big letters here. So the default style for an h one is big letters, because it's supposed to be this is a section of this document. So we also have different levels for the heading. We have h two, h three, each four, each five and age six. So levels one through six. So suppose I have whatever this is a paragraph another paragraph, and I want to make a subsection of this whole chapter one, I can add an h two here. So less than h two greater than subsection. Then don't forget to close with less than grit less than slash h two. And I can put a paragraph. This is a subsection. Click the top left run, you're going to see now have an h two here. And if you notice it's slightly smaller in size than the h one, because it's meant to be a subsection of this bigger section. And then you can type whatever there I put a paragraph. And then following the same pattern or logic, you can have subsections of subsections of subsections so on. And that's what the h three through six are meant for. Just to demonstrate, I'm just going to type them all out. But you get the point. This is adding level three, close the tag. And then h four, adding level four, close the tag. And then h five, adding level five, close the tag. Finally h six, adding level six, close the tag. Now you can see here, what they look like visually, they become smaller and smaller in font size, because they're meant to be like the subsection of the subsection of the subsection so on. Now this is relevant for documents, but in today's world of highly interactive apps, it's role is a bit ambiguous, not much, you know, meaning to it anymore. I mean, you could try to organize a website using h one as the top level and then h two and so on. But it's a bit hard. If the apps are very all over the place, not really a document. It's like a highly interactive app like, you know, Instagram or whatever. So that's why some tags in HTML, they're, they people are going to use them in different ways that they were originally meant to be. So in HTML, you don't necessarily have to use the tag for its original meaning, you're going to have people modify the style of certain tags, for example, the headings, they might change it to look like something completely different from the default style. So take that or grain or salt by understand this is the original meaning of those tags. Everybody okay so far. Okay, let's talk about lists. I'm going to have to delete all of this. Now, you probably have seen a bullet point list, or a list with 123. You say in the word document or how do we make that wish to know? Well, first we have to open a tag for what's called you well, which short for unordered list as a list without any specific order, basically a bullet point by its default appeal, the visuals. Okay, but then we got to do something special here. We need to include another tag within this tag. And that tag is the list item. So we're going to say li open that tag there. Now, now we can type this bullet point, first point. And then we have to close the list item, the ally so less than slash ally greater than now notice this is closing this. So make sure to understand this is one thing. And that because it appears right after the opening for you well, we can say that this list item is within or is part of this URL inside. Now we can close the URL, because we have a point. This closing tag is for this one. Now we can click run and top left, you're going to see a bullet point appear with first point there. If you want to add another bullet point simply after the closing ally here, add another open, then type your second point, then you close it. Okay, close that ally this closing here is for this one. So be careful. Make sure you match a closing to every open that you write previously. Now click run, you're going to see first point, second point, and so on. Now if you want a third point, again, you can do the same thing. Now for the style, it doesn't matter if there's a space, if there's a line break, right? So I find it easier to visualize if every ally is on its own line, like this. This is just for us to better visualize the code. And I also like to add what's called indentation, which is space to the left of the code. So because I open a URL here, typically whenever I open a new tag, I break a line and I add two spaces at least. And this is called indentation. So why that because I want to visually see that this ally is within or enclosed in this URL. That's why I do that. So if I have this visually, I can see okay, this list item is part of this URL. When I say we say part of was inside was within that means this ally comes after an opening URL tag, but it's also before a closing URL tag. Okay. Now if you want a third bullet point, just add the ally there, your point and run. And you'll see there. Now have your asked how do I do the same, but without a bullet point. What do you mean? Do you want to just remove the bullet point, or you want to show different text one per line? If you want to do text one per line, you don't necessarily have to use a list, right? You can just use a paragraph or even a div, as we'll learn later. If you want to visually remove the bullet point from the style that's default to the browser, you would have to change the CSS property, which is the topic for another day. Let's say I want a nav bar with no bullet point. Yeah, I understand where you're coming from. You're a bit ahead of what we're talking about here. So typically you out this bullet point list. In today's world, it's used for other things. For example, when you have a website, the header, right, we have a navigation bar, we have the menu, and several links up there. For example, here, right, run, save, collaborate, many websites today will use an URL element to have all these elements here, even though you don't see bullet points here. And it's, you know, they use that. So technically you would see like maybe this whole thing is a URL. This run is an ally, this save as an ally, this collaborates an ally. Now to do that, obviously you have to change the default style from this URL. So you would have to remove this bullet point. Now this is not really the topic of this class, but I'm just going to tell you how to debug things in the DevTools. So if you press the F12 key in your browser, you will see the browser developer tool span appear here. I'm on Firefox right now. So I'm in under the inspector tab. But if you're using a chromium based, it should see the tab called elements. Now if you cannot open the DevTools with the keyboard, just right click anywhere here on this page, click inspect. That also opens the DevTools. Now what's nice about the DevTools is you can point to anything you want here to inspect or analyze what's going on on the HTML on the CSS. So if you look at your DevTools, the tab bar here to the very left side, you're going to see an icon of a pointer. If you click that, you can go to your page and point to anything you would like to have a look at. For example, let's look at the first point. If you click that, it's going to highlight for me the code here as the live HTML document appears. This part you're going to see here is also called DOM, a document object model. So if you ever hear that term, that's what it means. So you can see we as the code we wrote is here, right? We have a UL. If I click that, it highlight. I can hover with the mouse as well. And it can have allies that I can expand to see the text or collapse. Now you asked, okay, how do I remove this marker? Now that's the CSS thing, but basically you would go here and you would add some CSS rule and you would get rid of that. Okay. Anyway, you can ask for discord and I'll let you know on discord later. Let's close the DevTools. Now, let's do numbered list. 123. That's very easy to do. Instead of UL, you have to say OL. That's all because it stands for order list. Make sure to update the closing tag as well. OL. Click run. You're going to see 123. You don't have to type the number in yourself, because that's automatic. So if I add another one, that's going to be number four automatically. There you go fourth point. Okay. All good. Now let's learn something more interesting. How do I make a link? Everybody's clicking things on websites and that goes to another page and another page. So in HTML, that's called an anchor tag. Now the tag name is a less than a click here. Then you close it and you're going to see click here appear. Now, if you wanted to go anywhere, right, was going to click and go anywhere, you need to tell the anchor tag, the a tag, where you want to go. Now, the way we do that is via what's called attributes, we can use attributes to add metadata or additional information to a tag. Now to do that, we got to go to the open tag, to the right hand side of the name of the element at a space. And then you type the attribute name. And this case is href. href. Now this means you're going to make a reference to some other place, some other page, like a hyperlink reference. Now, it needs a value to specify the value of the syntax is equal sign, double quotes. Now you type the value here, when you're finished, you finish with the double quotes again. Now, I'm going to go back of my arrow key and type between the double quotes. You can type any favorite website that you have, for example, http s colon slash slash yahoo.com. So basically what goes into the value here is whatever is in your browser address bar. So you can go to your favorite website, just copy, click on the address bar, the browser and copy everything that's there and place it here. Now, if I click run there, be careful, don't click yet. If I hover the mouse over it, I see my top left, sorry, bottom left of my browser, that it's pointing to http s colon slash slash yahoo.com. Now, if I click this, it will go to yahoo.com. Now, I don't want to do this because I don't want to lose this environment. So I'm going to hold the control key in my keyboard so it goes to a new tab. I'm holding control and I'm clicking and I see yahoo open a new tag there. Do you see? A new tab was open. Now, I don't want to go there, but you can see for yourself, I'm just going to close that, but that's a link. Okay, any questions so far? I have here asked if there's another way to do the removal of the bullet points that isn't without CSS, for the UL. Off the top of my head, I don't think you can do it without CSS. Unless you change the browser default styles yourself, so every website would have the same default style and you change the browser itself, but that's not good practice at all. I was going to ask you to show how to open the link in the same tab and a new tab. Yeah, so the way the anchor tag is written here, if you click the link, it will open in the same window or tab that you're on. I didn't want to do that because I'm going to lose this environment, so I pressed my control key in the keyboard just to make it open in a new window. But if I didn't have control press, it would stay in the same window and open that up. You can try that yourself and maybe click there if you don't want to lose that and click back in your browser. I don't make sure you copy your code here. Maybe it keeps the code. Now, if you really want to force the anchor tag to open in a new tab or window without even pressing control, anybody, you can always add an attribute here to the anchor tag called target. Now, to add a new attribute to this element, it can have as many attributes as you want. Just make sure there's a space between every definition of the attribute. You can add an attribute here to the left of the existing one, or you can do to the right of the existing one. It doesn't matter. Let's do it to the right. So space, always make sure there's a space, target is the name, equal sign, now a value between double quotes, double quotes. Now, the value to open in a new tab or window is underscore blank. Think of it as like opening a blank page. If I click run, now if I click this without even holding control in my keyboard, it will open a new window. Okay. So target underscore blank. Okay, now let's have some fun with. Have you asked why the need for targets? If you want to open the link, force the link to open in a new tab or a window, you must add target attribute with the value underscore blank, so that it opens in a new blank page. Okay, this is fun. Now how about images? Let's talk about images. Images are everywhere. What's the element for image in HTML? It's IMG. Now I'm delete this link. Let's say less than IMG, greater than. Now IMG is special. It doesn't need a closing tag. So you can just have a hanging open like that. Now an image, you need to say, where's it from? What's the image you want to show? It needs a source. So we must add an attribute. So go to the name of the element, space to the right. And you're going to say SRC, which stands for source, equals sign, double quotes, double quotes, go back within the quotes. Now you need to paste a URL of any image you would like here. Now to find one, just go in your favorite search engine, like bank.com, type the whatever you want, like picture of a dog, click images. Let's find some nice image. I click this image. I click view image here. And I'm going to copy the browser address bar. That's the URL of this image. You're going to hear the term URL a lot. That just means this address here. Go back to just fiddle, paste that, HTTPS, whatever, so on. Now click run. And there's the picture, the image of the dog. Now images, typically, we need to set the width and the height because they might be just too big. If I had a bigger image would occupy the whole thing and even go beyond the bounds that are scrolling because it's too big. So you can use HTML to set the width attribute, space, width, equal sign, and you can add a number here, like 200. Click run. Now you can see the width was adjusted to 200 pixels, px. That's the unit we typically use to measure things in a computer. Screen. Now you notice the height I didn't even specify. Now if you omit one of the dimensions like the height, it will try to maintain the aspect ratio of the original image resolution. Aspect ratio is the width over the height, right? So that the image doesn't appear stretched or shrinked. Now if I specify height here as the attribute, I probably will shrink it if I put too small like that. Or if I put too big, I'm going to stretch like that. So therefore I choose to omit one of the dimensions, can be the width of the height, so that it adopts the auto dimension in proportion to the original. So it doesn't lose its original aspect ratio. And that's the image tag. Any questions so far? Now the attribute that's useful to the image tag is the auto attribute. Now you might say, what is the auto attribute? Let's see, what if I, for some reason, let's say this image is broken, meaning the link to which it points to no longer exists, something happened there. I can simulate that by just adding one to the end of the value there. Now you can see nothing showed up, got the broken image icon. Now this is not nice. So you want to add an auto attribute saying to describe the image. Okay, this was the picture of a dog of a certain breed, I don't know. Make sure to describe the picture very specifically. So when you click run, you're going to see instead of the image, the tags will appear that describe what the image that's broken was supposed to be showing. This auto attribute is also important for accessibility. There are people who have difficulties seeing things or they might be blind. So those people will use what's called a screen reader that goes through a website content and reads it out loud. So if they find the image here, because the person cannot see, they will read, they will listen to what the image is meant to be. So they come across this and they're going to hear the screen reader say picture of a dog of a certain breed, so that they understand this part of the website was supposed to be an image of this dog of a certain breed. So that they can navigate the website even though they might not be able to see. So it's important to always add auto attribute whenever you add an image. Any questions so far? Thank you. This lecture is dedicated to only using jasphoto.net here in the browser. We will not do anything with text editor. But if you're curious about that, just hang out in Discord and we can try to help you out. All right, so let's proceed to something more interesting. We got images. How about audio? Anybody want to take a guess of the name of the element for audio or sound is? Less than name of the element is audio. That's the name of the element. Now, if I say audio like that, not gonna see anything. So you must provide certain things to it. First, you must provide controls attribute. Now this attributes interesting. It doesn't have an explicit value. So you can just say the name of the attribute and it would just appear. So this is like a Boolean attribute in the sense that, okay, I want audio with controls. You can just say controls there. You don't even have to say a value because it doesn't need a value. It's just meant to be show controls. Okay, now I can see the controls here for the audio, play button and so on, the sound volume. Now we need to tell it like the image. What's the source of the audio? What do you want to play? Okay, so I found some audio for us to play around today and I'm going to post in the Zoom chat the link. So you're going to copy that and we're going to use it for the source of this audio. Okay, let's go here and add SRC like the image. I'm going to paste that link with the audio file. Now I'm going to click run. I'm going to click play. I don't know if you can hear in the recording. I can hear what some audio when I click play. So you can change the source of whatever audio you find on the Internet. Everybody was able to play the audio? Okay, nice. So that's pretty much it. If you want more information about the audio tag, just look it up in your search engine, HTML, space, audio, and you'll learn about other attributes and features. But that's the most basic one. So HTML is pretty much like this. It's always a tag. There are some attributes and that's how you build the whole document. Just combine them together and you build your own page. Yeah, you asked about video. That's what we're going to do next. Let's do video. Okay, anybody want to guess what the name of the element is? Yes, it's video. Less than video, greater than. Now if I click run, nothing appears. Why? I need to say like the audio controls. There you go. Now the player is appearing. So I need to say, okay, what's the video you want to play? I can do the same using the social attribute, but let me send you some video that I found on the Internet. I'm pasting the Zoom chat. You can use that one. So I'm going to say SRC attribute and I'm going to paste that and a click run. Now I can see the video. It's pretty big. You want to set the width so it doesn't take up the whole thing and it goes beyond bounds. So I'm going to set the width attribute here. Let's try 200. There you go. That may be 300. And I'll click play and I can see a video playing. Now I'm going to pause it, but that's the gist of it. It's very similar to audio. You know, this is very nice and convenient, but back in the early days, there was no video tag or any of these fancy easy tags to use. So back when we didn't have HTML version 5, we would have like YouTube use what's called a flash. If you ever heard of that flash player, that's how video was played in the browser before. We didn't have these tags for video, but then HTML5 came along and introduced a video tag. Everybody dealt away with the flash in the browser. Flash player. Okay, any questions? All right. So yes, if you want to continue your journey with HTML, I suggest you just do a tutorial online. Just go on the search end and HTML space tutorial and you're going to learn about more tags and attributes. In its essence, HTML is basically tags, tags and attributes like this and just combine them in the same file and then you build a page. If you're curious about other websites, how they're built, you can always right click in the browser anywhere you want to inspect. For example, I want to know how this run button is built. I can right click, can click inspect, and that will open the dev tools and select that specific element. And I can see, oh, this is actually built with a name tag. That's anchor link and that's inside a div and that's inside a nav element, a div element, H1. Oh, we've seen H1, right? And so on. So if you don't know a specific element, just look it up and you understand what it means. And you can just play around here in this DOM document object model and open things and see what's inside and it will highlight for you. And you can understand better the structure of how this was built with HTML. And I'll close the dev tools. All right, so that's it.