Summary of HTML Introduction Transcript

Okay, so HTML, today when you go to any browser, be it in your laptop, your phone, you access a website, but how is that website made? So what you see is made with three essential things, HTML, CSS, and JavaScript. HTML defines the structure of what we call the document. In the early days, HTML was created so that scientific community could share scientific documents among the network, like the internet. And then it grew so much that now we have all these web applications, social media that's so interactive and rich, then just plain static text. So HTML is more about the structure, like the text, plain, and then if you want to add style, make it pretty, that's CSS. And then make it interactive, JavaScript, the programming language. And they are just focused on HTML, the structure of the documents. All right, so hypertext, markup language is what HTML means. And essentially, if you ever heard of XML, that's the way we write HTML with what we call tags. And they have an opening and closing tag. For example, if I want to make a paragraph in this document, I have to put an open p-tag and a closing p-tag here and type the text. This is a paragraph. Let me type everything in one line. Now in this environment, what I call what's called jesphoto.net, you can click in the top left run so you can see the output here in the bottom right. If you don't like this layout, you can click settings and pick a different layout. I will stick to classic. So we're focusing on the HTML panel here so we can write the HTML code. So as you can see, I can see this is a paragraph here. We wrote a paragraph to this document. The way we do it is it's called an opening tag and a closing tag. So to start off, you always say less than sign and then a name of the tag. And then you close it with greater than sign. These are also called angle brackets, so people like to call them that. And then you type whatever tags you want the user to see. And then finally, you have to finish it off with what's called the closing tag, which is basically the open tag. But you have to have the forward slash preceding the tag name. You will also hear the name element, which is what we call these tag names. So if I say tag name, I'm also talking about element name. So this is an HTML element called p, which stands for paragraph. Okay, so it doesn't matter if I put space here like a new line. It appears just the same. So some people like to style it like this with what's called indentation, adding two, at least two spaces to the left every time they open a new tag. And then once they close it, they go back to the same level like here. It doesn't matter in this context, in a situation, the output is the same visually. We learn about tags. Let's learn about some tag to make some piece of the text strong. So let's say I want the word paragraph to appear in bold. So I can surround this word with less than and then the element name here is strong, and then greater than sign. Now this environment keeps adding the closing tags for me because it's a smart environment, but usually that might not happen for you. So you have to type everything out. So you have the opening tag, element name is strong, and then the text I want to make it stronger, in this case visually it's going to appear as bold. Now I have to finish it off with the closing tag. So I repeat what is the opening tag, but I have to have the slash preceding the element name. And this environment is kind of acting crazy because I'm typing things that it's auto-completing for me, but I just need the forest slash there after the greater than. And I'm going to click run in the top left. You can see visually, if you cannot see this, not clear for you, let me know, I'll make the text bigger. That the word paragraph is now in bold. So the visual effect of the strong element is to make the word bold. Now this is the default browser style. Mind you that anybody can go ahead and change this default with CSS. But for now let's just assume that's what it does. It's meant to make some text as the name suggests strong. Now there's another one called the EM tag that's meant for emphasis. So if you want to emphasize anything, just add EM. For example this, the word this I want to make that emphasize. So I'm going to add the element here, EM preceding the word. And then after that I put the closing tag. So it's always the same, less than the name of the element, greater than sign, and then type whatever in between, and then finish it off with the last then slash, the name of the element, and then greater than. So if you click in the top left run, you can see where this is now italicizes, kind of slanted. This is the visual effect of the emphasis tag. Now let's talk about headings. So usually when you have a book, there are chapters, right? And usually there's a big heading there, like the text in big caps, chapter one, whatever. Usually documents have sections and subsections of those sections. So if you want to emulate that in an HTML, we have the H tags for that. So it goes from level one to level six. So before the paragraph here, I can break a new line and type before that. It doesn't matter if I type right here, or if I type in a new line, it will be just the same, which the mail won't care about that line breaker space. In any case, this is the H1 element, and then with the closing tag and in between them, you're going to type what's this is heading level one. Click run, and what you're going to see is some text in really big letters. Visually, that's what an H1 looks like by the default browser style. I'm using Firefox browser, by the way. You might be using Chromial Base, like Chrome. Levels go from one to six. So visually the text becomes smaller and smaller because they're meant to be subsections of a section. For example, the H1 here, you would have some text in this section. If you want to add a subsection, you can go here and add an H2 like this. This is heading level two, and then you can write some paragraphs saying, describe this subsection, click run, and you can see the heading level two here. So let it be smaller than level one, but it's meant to be like a subsection of this whole section here that's under the level one. Now, Chris, you said you cannot get the bold. Can you post what you wrote? Did you click the top left run? Make sure to click the run button in the top left after you write the code. Every time you make a change to the code, make sure to click run in the top left so it gets reloaded here. So the next heading I want to show is level three, and I'm going to show all the way through six. It's very tedious. I'm just going to repeat the same pattern. Let's say H3, this is heading level three, and then I'm going to do H4, this is heading level four, and then this is H5, this is heading level five. And then finally, H6, this is heading level six. Now click top left run. You can see if I increase that level three is even smaller than two, which is meant to be like a subsection of that subsection. And then four is a subsection of the three, and then five and six, you can see you get smaller and smaller visually. Yeah, Chris, so your code, you have two closing tags for the H1. So when you say this is heading level one, make sure to remove the greater than slash H1 greater than after the word level space one, because you have two closing tags there. The way, for example, the way I see your code, you have the H1 like this. And then you added the closing H1 here, which is repeated. You have two closing ones. So make sure to remove either this one or the other one. So maybe it's easy if you remove the one after the word level one. Okay, make sure there's only one closing tag for the one opening. If you have multiple closed tags for more than one opening, it's not going to work. Okay, so open, make sure there's a closed somewhere that matches that. If you have too many, for example, like you had one closed here, one another without opening it previously, that won't work. All right, I'm glad I worked. We can go on now. Okay, let's talk about lists. I'm going to delete this whole code. You probably came across bullet point list sometime. And how do we do that in HTML? Well, this is a little bit more complex than the just paragraph tag that has an opening closing tag. In this case, we first got to start off with a tag that's going to contain the whole list. And then for each item in the list, that's also going to require one list item tag. So started off less than now the name of the element here is ul and then greater than and make sure to add the closing tag as well. And my environment adds it automatically. But if you didn't have that, you have to type it out. So don't forget anyway, in between the opening closing tags. Now we have to say the list items. So we're going to make an element here less than the name is li greater than. And then it always adds the closing is kind of annoying, but that's the way it is. And then I type in between the opening and closing tag first point. Now you L stands for unordered list and li stands for list item. And if I click and run in the top left, you can see now first point what I typed between the li tags. Now appears in a bullet point list and see the bullet there on the left hand side. Okay, so if you want to add another bullet point, all you have to do is follow with another li here. So either before or after, for example, second point here after the closing of the first li, I open another one less than li greater than type in. Second point, which is the text I want to make appear in the list point and then finish it off with the less than slash li greater than that's the closing tag. Now I can click run at the top left and now see second point. Okay, if you notice, I wrote them in the same line in the code, but they appear in different lines. Okay, so the code lines, the spacing doesn't really matter. So I could have them in another line and the effect. The outcome would be the same. So some, I think this is the best way to visualize a list instead of having everything in one single line. So I always like to add one line break there and have one list item per line. So you can go ahead and add a third one, follow the same pattern, make an ally here, close the ally in between the opening and closing. You can write the text third point, like running the top left and you see the third point now appear. So you can keep going forever and it will keep adding bullet points. All right, so you probably also seen other kind of lists like a numbered list that, you know, one dot, whatever, two dot, second point, three dot. That's very easy to do. We follow the same pattern as the unordered list, but in that case we call it a not a ordered list. So instead of ul, you just say ol. So replace the open tag name with ol and also the closing tag name with ol. Okay, make sure they both are changed to the name ol. And then you click run in the top left, you will see that numbers appeared to the left hand side of each point, of each list item element here. So it does the number automatically, you don't have to type one, two, three and so on. It does everything for you. So if I were to add like after the first point, an ally in between, you will see that it will push all the other numbers down to be three and four and this one is going to be take the number two. Okay, now let's, that's lists. Let's talk about making links. Everybody goes to a website and there are things to click that go to another page. Those are called anchor tags in HTML. The name of the element is simply a. So you can say less than a, greater than type click me, for example, and then finish it off. With the closing tag less than slash a, greater than sign, click run. Now if you have it like this, nothing's going to happen if you click right. That's because we didn't tell it. Okay, where do you want to go? So an anchor tag, you need to have what we call an attribute. Now if you want to provide additional information to an HTML element, we need to add an attribute to it. Now the attributes there are written, you locate the opening tag for the element in this case, less than a greater than, then you go to the right hand side of its name at a space. And then you write the name of the attribute. In this case, the attributes called href, h-r-e-f. Now to give that attribute a value, you have to follow the following, the syntax equals sign, double quotes, double quotes, and within the double quotes, you type your value. In this case, it has to be the, what we call URL or the link to where you want to go. That's typically what you see in the browser address bar. So you can just copy that. And for example, if I want to go to Google, that will be http colon slash slash www.google.com. Okay, find your favorite website and copy the value from the address bar in your browser and you can paste it here. Okay, so the attribute href syntax is equal sign, and then you type the value within double quotes. Okay, every character here matters. So make sure you're following just like this. Now I click run at the top left. And if I hover my mouse and I see in the bottom left of my browser window, it's very small. I don't know if you can see it says where it's going to go to www.google.com, right with the href s prefix there. Now if I click this, it's going to go to Google. I don't want to do that because I don't want to lose this environment I'm working with. So I'm going to hold the control key in my browser and click. What that does is open the link in a new tab or window. And then you can see here it opened Google. Okay, so it's working. I'm going to close that. Now let me teach you about another attribute you can give to the anchor tag. Now HTML elements, you can provide more information with attributes, but it doesn't have to be just one attribute like I wrote here. You can add many more attributes. Another attribute is called the target attribute. Now if I want to add another attribute, I can just follow what I did before to the right of the name, add a space, and then type the name of the attribute, in this case target. Or if you want to do it after the href, that's also okay. But make sure there's a space between each pair of attribute value. So I'm going to add a space here after the double quotes and then say target. And then I'm going to follow the same pattern to specify a value for this attribute. Equal sign, double quotes, double quotes. And then within the double quotes, you're going to say underscore blank. Now I have to say specifically underscore blank because that means when you click the link, it will try to open it in a new tab or window, like a blank page. That way I don't have to hold control as I click the link for it to go to a new page, to a new tab. So I'm going to click run at the top left. Now without holding the control key in my keyboard, I'm going to click the link and you can see it went to another page in a new tab or window. Traditionally we used to have windows and then they added tabs later, so that's why it's a new tab now. Alright, let's talk about images. So every website today have a lot of images. So let's learn how to do that. Chris said I got block side too. Yeah, don't worry about that. That's okay. Okay, so let's do images. So less than, now the name of the element here is IMG. Like that. Now I need to, again, like the anchor tag. Okay, you want to show an image. What image? Where is it? So for the image tag, you have to specify an attribute called SRC, which stands for source. So add a space after the name in the opening tag, SRC and then equal sign double quotes, double quotes. Now you need to give an URL or colloquially a link to the image. Now I can find one if you go to your favorite search engine. For example, I want to look for an image of a dog. I'm going to click images tab here and I'm going to find one of these images. For example, this one. And then if you right click it, you can see copy image link, for example, in my browser. Some search engines have a link here, a button that says view image, you can also do that. And then I'm going to, you can see I open a new tab and I pasted that. And you can see this is the URL. This is what I want for the source attribute. So you can just copy that. We'll back to JS fit. I'm going to paste that. Now, if you notice the image tag, I didn't write a closing tag, because this is a special kind of element that is self closing, meaning it doesn't need a closing tag. So you can just have the opening tag like this. So if I click on the run at the top left, I can now see the picture of the dog here, although it's very big. So you usually want to set the width and height of the image. So to prevent it from taking the whole website, because it's too big here. So to do that, you can use an attribute. Let's go here and add another attribute, add a space, make sure it does a space, width and equals sign, double quotes, double quotes, let's say 200. Quick run. Now I specify that the width of this image should be 200. And the unit here is pixels. Okay. So from left to right is 200 pixels. Now we notice the height also changed accordingly, even though I didn't say height here as an attribute, although I could have said height here, for example 100. But that would stretch the image and it would lose its aspect ratio, you break the aspect ratio, right? So if you omit one of the dimension attributes, it will try to fit the other one to comply with the aspect ratio, so it doesn't stretch or shrink the image. So in this case, it adjusted the height so that the proportion of the width 200 kept up with the original proportion of width over height. Are you talking about the value for the source attribute? Yeah, how did I get that? So if you go to any search engine, for example, Bing.com, I look for what I okay, I want to find an image of a dog, I type dog their answer. Now I click the images tab of my favorite search engine. In this case, I'm using Bing. And find one of these pictures. You can click them. And then in this case, there are different ways to go about this. Now Bing makes it easy, if you click view image, you see that? Click view image and Bing will open it in a new tab. Then I can go here in the address bar and I can copy that. And then that value goes into the value for the source or SRC attribute here. And I paste it there, click run and see the dog there. Okay. Now the other way, the way I first did it with Google was right click and click copy image link. I'm using Firefox. So if you're using another browser, it might have a different label, but copy image URL copy image link something like that. Copy image location. Okay. But these are ways to click view image here, at least in Bing. You can use any image you want. I just picked one random image of a dog. Anyway, going back to the code here, let's talk about the alt attribute for images. Now what let's say I go here and for some reason, you know, have you heard of broken images? Sometimes the images in a website are broken. Many they no longer exist. That file is gone. Or maybe somebody made a mistake like I'm about to do now. And I type the two at the end of the source value here and I click run. Oops. Why did that work? Let's put JP to. Oh, okay. Okay, I know why. Let me remove. Let me remove this stuff here. That's very strange. What? Maybe remove the whole source. Okay. Let me remove everything or partially. Okay, so I typed I removed some part of the URL. It's gone. It's wrong. Okay, so I made a mistake here and you can see the image now is appearance broken. There's the broken icon there. Now it'd be nice if at least we could get some description of what the image was supposed to be. So we can go here, add one attribute called alt. And let's say picture of a dog of I don't know the breed here specific breed. If I knew the breed, I would type it here. So it's essentially, it's a description of the image that I had placed there. Now when I click run at the top left, the image is broken, but at least I get a description of what the image was supposed to be. Picture of a dog of a specific breed. Okay, so these days that whenever you add a new image element, make sure to add an alt attribute and describe that image. So that in case it gets broken, you can see what it was meant to be. Now another use of the alt attribute is for accessibility. You know, some people might have a hard time looking at the screen or they might be blind. In that case, they was what's called a screen reader. A screen reader goes through the whole website and reads it out for the user. So when it passes through this image, it will read out loud the alt attribute. So a blind user, even though they can't see, they can hear the description of the image and understand this was what's in the website. Picture of a dog with a specified breed. That's what it would say. So then the person would be able to understand what the content of that specific element for the website is. Okay, so very important attribute to have these days. Now, this is just an introduction to HTML. So there are of course a lot of different kind of elements. You've seen YouTube. YouTube has a video element. So if you want to learn more about that, you can find out on your own. We're out of time, but it's falling basically the same pattern. If you want a video, use the video element. If you want audio, use the audio element and so on. Okay, if you're unsure how to do something, just go into favorite search engine. For example, HTML video type that keyword and you'll see, okay, this first result from H3 schools. Teachers, you have to do it. Some example here. Oh, uses the video tag attribute with height and then controls. And then you got to play some other elements inside to specify the sources like the different kind of formats for video. And you can click try for yourself. And here's the code in left hand side. And then the right hand side is what you see as the output. So you can click play. There's a video there. Okay, that's a good website to learn more about different HTML elements. Okay, so yeah. All right, there's no more questions and I'm happy to go and hope you have a good day wherever you are. Bye.