Summary of HTML Lecture

Today, I will talk about HTML, hypertext, markup language. That's one of the core things that you need to build a website today, which can turn into a web application with highly interactive like social media, Facebook, Instagram, TikTok and all others. To demonstrate the examples, I will use this website, jsfiddle.net. I have posted to the Zoom chat. In this environment, we have the HTML panel where we will write the code for today. And then we have the CSS panel. That's more for another lecture. That's more for the styling of the document. And then we have the JavaScript panel here to make the website dynamic and manipulate the document. In the bottom right is the result of our code. We can click in the top left run and it will be running the bottom right. If you don't like this layout for some reason, you can go to settings and adjust it clicking one of these options. I will keep classic for today. For my examples, I will disable auto close HTML tags and I will disable auto close brackets because I find them to be annoying, especially as we are teaching a beginner class because you want to write everything by hand instead of having it autocomplete for you. So you can remember to always close your tags as we are going to see soon. Okay, so back in the early beginnings of the internet, they wanted to have a way to share scientific documents. So they created this way with HTML. So originally it just meant for documents, so that's why you're going to see us talking about a document, document object model, all these kind of things. So it came from that, but today is a totally different thing. It's not just plain text like a book. It's something that you can click on buttons. You can type text, post comments, interactive, other users, click something, something moves, we made it stuff, pictures, images, video, audio, and so on. So it has evolved into something beyond the scope of the original intent. Anyway, so to get started, the way we write HTML is basically by writing tags. If you ever heard of XML, that's the way we write HTML. HTML is just like a subset of XML, very specific tag names that we have to follow. So the first tag I want to introduce is the paragraph tag, so we can show some text in the screen. So what you do is you type last then, and then the name of the element, you know, element is also interchanged with tag, so you're going to hear that a lot. So the name, I want to show a paragraph. So the element for paragraph is the P element. Once you write the name, you have to finish off with a greater than sign. Some people call it angle brackets. Anyway, now we have to type what we want to show to the user. What's the paragraph text? And let's say I want to build like a playlist for music website, like I want to list all the songs that I like or that I'm playing. So I'm going to say here is my playlist colon. And then to finish off, once you're done with the text, what you have to do is close the tag. So to close the tag is very similar to opening it as less than sign, but you have to add a forward slash and then name of the element P and then greater than. Basically you have almost the same as the opening tag, but with the slash preceding the element name. Make sure the element name is the same for the opening close. So once you're done with this, you want to see the result of your code. Click run in the top left. And you're going to see the text here is my playlist colon appears. Okay. So that's the paragraph element, or you're going to hear paragraph or a P tag. Tag is just this thing with the angry brackets. So we have the opening tag, we have the closing tag. When we say something is contained in an element or tag, that means it's between the open and closing tag. So the thing that we're referring to, it comes after the opening, but it's also before the closing. Okay. So now we don't paragraph. Usually when we have documents, we have titles, right? Some bigger tags like a chapter of a book is usually in big text. Those are called headings to set, okay, this is a section about something. And name of that in HTML is heading, and it has several levels from one to six. So you can go h1, h2, all the way to h6. And visually what you're going to see is the text is really very big for the first one and it gets smaller and smaller because the levels two, three, and so on are meant to be a subsection of a subsection of a subsection and so on. So let's start off with an h1. So if I save here before the P, now you notice I broke a line. I made a new line here, but you don't have to. Let's do everything in one line just to show you that it doesn't matter. So less than, now the name and the elements h1, and then greater than, now that's the open tag. Now I need to say, okay, what do I want to display to the user? Let's just say audio playlist, you know, first letter capitalized of each word. Now once I'm done, okay, this is what I want to show to the heading. I can close it with less than slash the name of the element being h1, again, greater than. Then I click run in the top left here. Now I can see audio playlist in a font size that's bigger than the paragraph and it's also bold. And there's some space between them. Now this is, every browser has default styles for the document. And that's why you see them like this. But you're not always going to see like this, right? Usually websites today are very colorful, things are positioned in different places. Everything is pretty colorful and a lot of stuff moving from one place to another. So that's more done with the visuals of CSS, which we learned in another lecture, cascading style sheets. And with JavaScript, if you want to manipulate the document to remove things, add new things, move one thing from one place to the other, and so on. Okay, so if I break a line here, see everything, writing code, everything in one line is not so great for us as we're reading through. So usually you want to break a line here. So we have two separate lines. It doesn't matter for the computer. If you click run, it's the same outcome. You're not going to see extra space. If I add more lines like this, I have like one, two, three, four lines between them. The outcome is the same, visually is the same. It doesn't matter. So all this white space is just for us to better visualize the code. And there's even people who like adding a line break. Every time they see an opening tag, they will add a line break like this. And some people even go further to add what's called indentation, which is something very common to programming languages, which is simply spaces to the beginning of the line. Every time I open a tag, I add at least two spaces to the left. And then once I reach the closing tag, I kind of go back to my previous level, which is here, right? I don't need the two spaces anymore because I close the tag and then repeat. If I have a P, I add a space for indentation. When I close it, it goes back here, okay? So you write it any way you think is better for you to visualize. The outcome is the same as a click run, okay? Now that we got this very basic HTML thing, I want to open up for questions if you have any. You can use the chat or there might be this hand gesture. I don't know if you can use it. Okay. Nobody said anything. I will assume everything is good. Okay. Thank you for the thumbs up. I will continue now. Okay. This is cool. Now let's see, let's list the songs that we like or that are playing. So for that, I will use another element that's for lists. Have you ever seen like a bullet point list in a document? Let's learn how to build that. So I'll make a bullet point list of my playlist, audio playlist. So the element here is going to be UL. And this one is kind of special because we need to add another element inside the UL. So an element inside an element. So since it's a list, it has many list items. So UL stands for unordered lists because that's a list that has no specific order. So inside you have to add an open another element less than LI which stands for list item. And then finally I can type the name of my first song. I don't know something on top of my math. Let's just call it favorite song number one. You can type it whatever for you. Now that I've done this, I'm going to close the list item less than slash LI greater than and that's my first bullet point. Now I can keep going repeating the same pattern with LI and the text close LI, LI text close LI and so on. So let me just ask just another one here, LI within angle brackets, second song, less than slash LI greater than. Now once I've done all the bullet points, I can finally close the UL. Remember we opened the UL but never closed it. So we have to make sure slash less than slash UL greater than and then click run in the top left and you're going to see that. Now for somebody who just came late, we are using JS, fiddle.net to demonstrate the examples. And we just learned how to build a bullet point list. We learned a heading that's like a title for the document. We learned P tag which stands for paragraph. And now we're doing a UL another list with LI which are list items. In this case, it's a bullet point list so you can see here's my playlist. Supposedly this would be a website or application that would show the songs I'm either currently playing or it's like a shared playlist. You know if you ever use something like Spotify, something like that. This is like the bare bones of how that would be built without all the style, without all the interactivity. Okay, you might have noticed that everything is one line. Like I said, it doesn't matter. You can organize your code any way you want adding white space or line breaks. Usually I'd like to add one line break here and another there to have one list item per line and I like to add indentation which means one, two, at least two spaces to the left every time I open a tag. So that way I have the sense of depth that this list item here is within the UL. This list item here is contained within the UL. When I say contained or is inside, that just means this element appears between the open and closing tags. Okay, clicking around you're going to see the visual outcome is the same. It doesn't matter if I have the code in one line or break a part in like this. All right, how's everybody doing? All good? Can we go on? Okay, thank you. Nice. Before going on to something more interesting, I want to point out that there's also other kinds of lists. For example, have you ever seen that list? We have one, two, three and so on numbered list. So that's called OL or a list. And it's very simple. It's very simple to do once you learn the bullet point UL. It's the same pattern. You're going to write a container component, a element, sorry, and then list items inside. So in this case, you just change U for all. All stands for ordered. There's an order. So order list and make sure to change the closing tag as well because they have to match. The closing tag has to match the same element name as the opening. And if I do that and click run, now I can see my playlist has one, two and so on. If I keep adding another one here, like a break a line, a lie, third song, less than slash a lie greater than. It keeps increasing the number automatically. I didn't even type one. I didn't type two and then I didn't type three. So you don't have to. It automatically does that for you. Okay. Now, like I mentioned before, going back to this H1 here, there's H2, 3, 4, 5 and 6. You can try them out if you change instead of one, you can type a two. And you're going to see visually the text gets smaller and smaller because it's meant to be a subsection of the section. And if you go all the way to H6, the text will be really, really small visually. Now let me revert that. Just as an example to have an H2, I can just add here a subsection of this whole section and say something. I don't know, let's see. We could have like a comment. How about that? Maybe somebody want to comment on your playlist. So you would have like a subsection of the other playlist that would be just for comments. And then you could add the H2 here. And then you could add the comments that you would want, paragraph. You can make a UL, bullet point, whatever. Since we're not dealing with styles, we just deal with the color structure. And keep in mind one thing to keep in mind in HTML, what you see visually by default from the browser style is not usually what you're going to see in the real website because people change the styles of all the tags with CSS, cascading style sheets. So somebody might just want to, for some reason, display the H1 of really small letters. They can do that. And they can also use the tags in a way that was different from its original intent. So any HTML tag, you can do whatever that keep that in mind. So you might see some people doing crazy things with different tags which were meant originally for one thing, but they were actually used for another. That's also very common. Okay, so that's something good for us to do. How about moving on to, let's do links. So everybody knows about links. Let's go here, here's my playlist. So when you go to a website today, usually click links that go to another web page or another whole completely different website. In HTML, that's called an anchor tag, and the element's just A. Okay, very simple. So if I say less than A, greater than any type of tags that will be shown, let's say for some reason, you can say go to some website or this website. How about see my other playlist? Let's say this website is one playlist, but you have lots of other playlists saved in the website. So you add a link to see other playlists from this user. How about that? And right now, if I click, nothing happens, just plain text. So I have to tell it, okay, anchor tag, I want you to go somewhere else. But how can we point out where we want to go? That's when I have to introduce you to what's called an attribute. An attribute is a way to provide metadata or additional information to a tag, an HTML element. In this case of the anchor tag, we have to provide the destination to the link or the reference, hyperlink reference. So to add attribute to an element, go to the open tag and to the right hand side of its name out of space, and then you start typing the attribute name. In this case, it's going to be href, h-r-e-f. And then to define a value to associate with this attribute, you have to follow the syntax of typing equal sign, and then double quotes, type the value and finish off double quotes again. Actually, I always like to type double quotes first, so I don't forget to close it later. It's up to you. And I go back with my arrow key and type between the open and closing quote. So in this case, you have to copy or provide a URL. URL is what you see in the address bar. If you click here, you can copy that from any website in the browser, and you can paste it here. I don't have any particular website for this. So let's just put a random website. For example, your favorite search engine, HTTP, it's usually HTTPS, colon slash slash, for example, whatever, yahoo.com, or whatever your website that you like. And if you don't know any website, URL by memory, just copy from the address bar. Control C, and then Control V here, or Command if you're ZMac. Anyway, if I click Run, I'm going to see it's now highlighted, but don't click it yet. I can see in the bottom left of my browser where it's pointing to if you ever noticed that. It's always showing there. It's very small. I don't know if you can see. But if I click this, it's going to go to yahoo.com. And I don't want to do that because if I click here, I'm going to get out of this page, which is the code I'm working on, so I don't want to lose it. I don't think you would lose it if you press back. You just stay in the same place. But to get around that, I'm just going to open in a new tab. And to do that, just hold Control key in my keyboard and click. Hold Control key and click. That way I can open in a new tag, and you can see it's like this. All right, so I went to yahoo. So that's a link with an anchor tag and using the href attribute with the URL as its value. And before somebody asks how to open the link in a new tab or window by default without me pressing the Control key, you can add another attribute. And if you want to add another attribute to A, you can add it before or after an existing one. If you want to do before this href, simply write the attribute here and add a space between them. If you want to add before, just go to the right hand side of the closing quote, space, name of the attribute, and follow with the equal sign, so on. So you can choose before or after. It doesn't matter. Okay, let me revert and do it after. So after I'm going to say target, that's the attribute, so we can open a new tab. And the value for this has to be equal sign quotes, underscore blank, closing quotes. So underscore blank is like opening a blank page or new tab. Today is tabs, but back in the day it was just windows, right, new window. Now we have tabs. Now if I do that and click without holding the control, it goes to a new tab. How's everybody doing so far? Good? All right, let's go. Now let's do an exciting element that's images, img. So as you figure out, all the elements are usually abbreviations. And from, you know, back in the day, I guess they like abbreviations for many things. Probably to type less and probably to save space because resources for computing were constrained. Back in the days, not so available like today. That's probably why that's good. Be a good thing to look up. Anyway, less than img, greater than. Now I have to tell it, okay, image of what? Like the anchor tag, we need to tell it where, where is it source? Where is it coming from? Right? In this case, add an attribute, go to the right hand side of the name space. Now the attributes SRC. Okay, be careful. Don't confuse with href. href is for anchor tag. SRC is for image. Now equal sign and the double quotes, double quotes. Now what am I going to put here? Well, you're going to put the same thing URL as the anchor tag. Now to find an image, usually you can use a search engine. Let's just find an image of music or something related. I can go to my favorite search engine like bang.com. And I can type, you see the images tab. I can click that either before or after I type the keyword. Let's say audio playlist or something like that. And I can find some images. Okay. Let me find something better, audio playlist, icon or whatever about this one. And I can click the image. What's nice about Bing, I can click the view image and it will open in a new tab. And I can click to copy the URL for the address bar. If you don't have this feature in your search engine, you would have to right click, copy image link. That's another way. Okay. There are many different ways to accomplish the same thing. Or you can try clicking the image to see if it goes to the image. I don't know. Anyway, go back to the image, open in a new tag, tab by copy the URL from the address bar of the browser and go back to my jspittle and paste it into the source attribute value between the first double quote and the second. And I can click run now. And I see the icon here. It's really big. So that's not so nice for the user experience. You know, because we want that to be a little smaller, right? So when you're dealing with images, be careful. You always want to set the width and the height. So there's different ways. One way of HTML attributes, another way of CSS. We're going to do the attribute way. So add an attribute to the image. Let's say after space width. And you can specify the width here. Let's say 200. And this value is in pixels px. And that's a lot smaller and better to see, right? Doesn't overflow the page area. Let me make this better for you to see. So I set the attribute width to 200. You might have noticed that the aspect ratio of the image was kept intact. While the width was resized to 200, the height was also resized in proportion. If you omit one of the dimensions, it will try to keep the same original aspect ratio. But if you really want to change the height, you can do so with the height attribute. Let's say 100. But if I do that, it's going to be weird, right? Because it's squeezed, right? So you can choose one or the other. If I omit the height, it will try to maintain the aspect ratio for the width automatically. You see, it looks nice. So either way, width or height here, let me keep... I kind of like the 100, so I like that. Another attribute image is very common today is the ALT. And this is used to describe the image. For example, icon with music notes inside the square. Something very descriptive of the image. So the purpose is, what if the image gets broken for some reason? Somebody removes the file from the server, or I type an error. Intentionally, I type something wrong in the URL. For example, I put a 1 here. Let's see if that breaks it. I put a 1 here in the beginning of the source, and it's broken now. And it's showing the text, alternative text. And that's one of its purposes, to replace the image with what it was meant to be if it were actually showing. Another purpose today of the ALT attribute is for accessibility for people who have difficulty or are blind when they see things. Typically, when you cannot see, you use what's called a screen reader to read the website aloud. And it would go through the document and read things aloud. And when it reaches the image, it will read icon with a music note inside the square. So that the person who is visually impaired can understand what's the purpose of this part of the website. Even though they cannot see, they can hear and understand what it was meant to be if they could see. So important to set the ALT attribute today. How is everybody doing so far? Any questions? Okay, let's take this here. And I want to do something exciting, which is we're talking about playlists. How about we display an audio player so you can play music, song, audio. So let's scroll up here. After the H1, I'm going to put an audio player. And you can break a line here if you don't like seeing things together can make some space before and after with the blank line. Now the element is going to be very simple. Audio is the name. Now to keep it simple, we can just specify like the image on the audio source. And oh, I forgot to mention one thing before I move to audio. Going back to image, you notice I didn't put a closing tag. That's because it's a special tag. Images are self-closing. So when you have self-closing elements, they can only have the open tag. There's no need to have a closing tag. So that's why I didn't type a less than slash image here. Because if you think about it, there's really nothing to put between that would show like a text. Maybe you could think the alt, but that's not the way they did it. Anyway, that's a self-closing tag. You're going to see that too. And going back to audio, let's set the source. Now for the source, you need a URL again pointing to some audio file somewhere. If you don't have one, I'm just going to copy and paste one into the zoom chat just as an example. And you can use that URL as a wave file. So I can paste it here. And let's make sure to close the tag here. This is not self-closing. And if I click run, not going to see anything, okay? Why? Because I need to tell it, hey, I want to show controls. So that's why I need to add the attribute controls here. Notice this attribute is interesting because there's no value, right? It's implicitly saying controls shown true. So if you just say the attribute like that, it works to show the controls. Now these are like default controls for the browser. Every browser, I'm using Firefox right now, by the way, and it shows like this. If you're using another browser that's based on Chrome, it's probably going to show you in a different visual style. So that's totally fine because every browser has their own default appearance. And you might have noticed other sites might have a different audio player. That's because you can customize the style by defining your own customized audio player. And that's why we can omit the controls. And it doesn't show anything because expecting you to build your own. So you have to put between the audio tags your own controls and you have to control it with JavaScript. When I click the button play, when I click the sound, you can make your own. But if you want to use the default, so you don't have to make your own, just put controls there. Now if I click play, I can hear some sound, sample sound. To make it more interesting, you probably put a song here, music. And later on as you learn JavaScript, you can maybe click these different songs and we would play that specific song in the audio player. That's an exercise we have done before in the past. Okay. How's everybody doing? All right, so let's keep going. Let's about just finish off with a video and then I'll give you some quick quiz. So like audio, we have video as well and it's very simple follows the same pattern. Let's scroll down here after comments, after the image video within the angle brackets. Close the video tag, go back to video, add an attribute, call it SRC and paste the URL of the video. Now I have a simple one of the big buck bunny. If you find another video, that's fine as well. And I paste to the zoom chat and I paste it here. And if I click run, you're going to see nothing happens. Well, well, actually something happens. I would suppose the controls would appear, wouldn't appear. Yeah, I don't see anything, no controls here. So like the audio, you have to paste controls. So you can see some play button and other stuff. And it's really big, so it's really bad because it's too big. So we want to set the width. You can do it the way of attributes. Let's add it to 200, click run. Now it's finally better, smaller. And if I click play, I want to see the video. This will be for building sites like YouTube, web video, Instagram is for videos, big talk. So you would use this element and you would style it the way you want. Typically in these websites, they put it at the top, right? Especially mobile app. These videos appear in the top half of the screen. And then the comments are at the bottom. So you can play around and move things around. Okay, so let me just give you a quick quiz. Something I hope to be easy just for fun. And let me see if I can share. Yeah, for those of the recording, I don't know how to share. Doesn't let me share the specific window for the quiz. But just a question asking how to make a paragraph in HTML. And several choices. Para tag, p tag, p graph, paragraph. Second question, how to build a bullet point list. What would be the element? Is it bullet point list? Is it B list? Is it UL with allies inside? Is it list choices or list choice inside? Third question, how to make hyperlink in HTML. What's the tag? And what's the tag to display an image? So I hope everybody answered it. The tag to make a paragraph is p tag. The one for bullet point is UL with allies inside. And then to make a hyperlink is the anchor tag A. A tag with the href attribute. And then for the image, IMG. That might be very confusing to beginners. Why not just say image spelled out? But it's actually IMG, okay? Be careful, it's IMG. All right. Yeah, with that, I think we end this lecture. Thank you so much for watching and I will open for questions.