HTML Basics Summary

Okay, today we'll talk about HTML and what's going on here, and please go to jaspiddle.net. I'll post the link to the Zoom chat, that's where we do the examples. So when you go to any website today, be it in your phone or your computer, just stop. You are seeing websites that are built with HTML, CSS, and JavaScript, where we use HTML hypertext markup language to build all the structure of the document. The reason I say document is because the origin of HTML came from scientific documents. It was a way people found to share scientific documents among other scientists. So that's why it was created, but it has evolved into something other than that. And today we have all the dynamic and highly interactive social media applications, which is way beyond the original intent of HTML. Now HTML is built with markup language, and if you ever heard of XML, you can think of HTML as a special case of XML where just everything is built with tags, opening and closing tags, and in the case of HTML, they have to adhere to specific names for the tags. So let's start off just learning how to do, how to write a paragraph in HTML. So we're usually going to start the pattern of opening a tag, and then if there's content that's needed to be shown, we write it after the open tag, and then we close it with a closing tag. So in this case of paragraph, the name of the element is P, and the syntax is less than name of the element, in this case P, and then greater than. Now you can type everything after the opening of this tag, and this case would be the paragraph. This is a paragraph. Now once you're done, you can close this with pretty much the same as the open tag here, but with a slash after the less than. So less than slash same P greater than. In this environment here, jspital.net, you can click run in the top left, and you will see the output in the bottom right. Now as you can see, it's just the text. This is a paragraph. If you don't like this layout, you can click settings and choose a specific layout here. And I disabled some behavior of auto-closing HTML tags on auto-close brackets, by the way. So you probably will see this thing auto-closing for you, so be careful with that. All right. So it's always like this, less than name of the element, greater than, if there's something that needs to be shown, you can type it here after the open tag, and then you can close it with less than slash name of the element, greater than. Now you notice I've repeated the word element a lot. That's often interchanged with the tag, whereas I consider the tag to include the less than and greater than, so this is like the open tag. This is the closing tag, but you see it also being interchanged with element, although element would be more proper to say that's a paragraph or P element here. Now there are many kinds of elements in HTML, each of their kind of purpose, as we're going to see later on. So this is the paragraph. Now if you've ever read a book, usually there's a title to every chapter in big letters, and that's to denote that we're starting off a new section of the book. In HTML, it's no different. We can use a specific kind of element for that, and visually we'll see it as being different. Now keep in mind that the visual styles that we see here are determined by a default style sheet from the browser, and it could be changed at any time by the developer, but for the purposes of this class, we're just going to see the default styles here, because we're not using any CSS. That's for another class, CSS stands for cascading stylesheets, and this is a way for us to make, to change the visuals of our HTML document. Anyway, so if I want to add something before the paragraph here, I can do it so before the open tag or after the closing tag for the paragraph. So I could do it so in the same line where I can break a line. Let's say I want to add another paragraph here. I could start off afterward, less than p, that's the name of the element, greater than another paragraph, that's what I want it to show, and then less than slash p, greater than, click run, you will see visually that the another paragraph appears in a new line, and there's a lot of white space between them. Okay, so this is the default browser style, and you notice that the code is one line, but what is manifested here is in multiple. Okay, that's because the paragraph element by itself, by default, it takes over the whole row or line where it stands, so it will not let anything next to it appear. So if you try to put another paragraph there, it's going to be pushed to a new line with some space. So because of that, there's no, like if I have a lot of line breaks here, that won't matter, if I click run, it's always the same, or if I just put everything in one line or have some space, that's always the same as well. Okay, so the reason for adding space between these is just for us visually to better understand what's going on. So typically, if you have multiple paragraphs, you want to separate them one per line in the code, that's easier to see, instead of having everything in one line. You can click runs, the same thing, same outcome. Okay, let's learn about the heading thing. So before the paragraph, I'm going to use what's called an H1 element, so less than H1, greater than, and this is like the defining of a section. So this is heading level one. Now close it with less than slash H1, greater than, click run in the top left. You can see it manifests as a text in bold in big letters. The font size increases for that, and that's to denote, okay, the following is a section that I'm calling heading level one. Okay, and you know, as you go down and read a book or something, there's often a subsection of a main section. You can also do that. Let's say that after this is a paragraph, I want the another paragraph here to be part of a subsection. Now I could use H1 there, break a line here, subsection, but that's not the proper way, the proper way you want to use a subsection that's called H2. So the number here, the higher the number, the more subsection of a subsection it is, meaning H1 is the highest, the top level section, whereas if I want to add a subsection to that, I would use H1 plus one, which is two. So if I do that, you see it manifests visually with a slightly smaller font size than the original H1 here. Let me add some text, we've had in level two, so you know that we're using that. So it goes on and on, it goes from H1 to H6. So for the sake of time, I'm just going to write them all here. This is heading level three, and then close it, oops. So you can see visually what they look like. Just copy that and do H4, this is heading level four, and I'll put the three there. Last then slash H4, open the tag H5, this is heading level five, close the tag H5, then finally H6, this is heading level six, close the tag H6, click run to the top left, you can see the headings, as they go up all the way to six, get smaller and smaller visually in the font size to denote that's a subsection of a subsection of a subsection and so on. Okay, this is like the original intent, obviously today, websites have become web apps, very dynamic and so on, it's kind of difficult to make this kind of thing, subsection of a subsection to keep track of exactly things are, so you might not always see these being used properly for their original intent, because we don't have just static tags, documents anymore. Okay, often, for example, H1 would be used to improve search engine optimizations, SEO, something like that. All right, so one thing to keep in mind also about HTML is despite their original intent to be for documents, scientific documents, you're going to see a lot of stuff being used in a sense or different way than the original intent, and especially visually, the HTML, even though we have some browser default styles, people can change that anytime CSS, so you might see very different things, maybe they would style the H1 with a background color of red and text very small, which is kind of weird, if you think about the original purpose of each one, the semantic purpose, that's just the way it is, so take it with a grain of salt, how people use or modify the HTML elements, because they could look like anything visually, not necessarily what you see as the defaults. Okay, any questions so far? Oh, good, all right, thank you. Okay, this is great. Now let's look at something more exciting. What if I want to make some bullet point lists? Let's say I want to go to, this is a paragraph, after that, Alan adds a bullet point list. The way we do that with HTML is using the element called ul, so you would less than put the name of the element ul, which stands for unordered list, okay. Now this is a little bit different from what we've seen, in which we always have open tag, some text, closed tag, this one actually needs another tag or element inside it, when I say inside, I mean between the open and closing tag for the ul. So that also requires the list item or li, so to add a bullet point, you would say less than li, greater than, now keep in mind every time we open something, we have to remind ourselves to close it later. Now I open a list, right, ul, another list, now I'm opening a list item, because there's no closing for ul yet, that means the li is inside this ul. And then I can say first point here to say the, that's the text that we'll show next to the bullet point, and then when I'm done with this, I can say close the li tag with less than slash li greater than, okay, so this is the first point. Now to close the bullet point list, I can finally close the ul, so I do less than slash ul, greater than, now if I click run, you're going to see after this is a paragraph, that I see first point there. Let me make this some line break there so I can highlight to you what we're working on line for right now, okay. So ul, and then add all the bullet points inside li's and finally close the ul. Now if you want to add another bullet point, just follow the same pattern inside ul, right, after the closing of the first li, or before if you want to add it before, if it's before you would do it here, if it's after you would do it here, okay, so let's do after. Second point, and then less than slash li greater than, click run in the top left, now I added the second point. Now I notice it's going to get really messy to have everything in one line, it's really hard to see, so what people do is break a line like we did before and put one li definition per line in your source code, that way it's easier to see. Another thing that people often do is whenever they open a tag here, they would under it indent or add spaces to the left of the code, for example, at least two spaces, so that they know that, okay, whatever follows is contained or inside this ul. It gives like a sense of depth and that this thing is inside that, otherwise you're going to think that the li might be like a next to or a sibling to the ul, meaning they share the same what we call parent, okay, in this context when I say parent and child, ul is like the parent element and it has many things inside or you can think of them as children, so li is the first child of the ul and this other second point li is the second child of the parent ul, okay, so if the li was outside, which wouldn't make sense because li needs to be inside the ul, it would mean that this ul is like a sibling to this li, that's the terminology because their ul is not the parent, but it's next to it in the tree of the document object model that is the DOM of this HTML document. In any case, you can go on and add points like that, okay, now there's other kinds of lists that we can build in HTML like the order list ul and that's just like ul but with a numbering like 1 and then first point 2, second point so on and that's very easy to do, it follows the same pattern as ul except instead of saying ul, you say ul, make sure to also update the closing tag on line 7 to match the open one and then you click run there, you'll see that the bullet point became a 1, 2 and so on, so if you add a third point it automatically adds number 3 here, so you don't have to keep track of all the numbering and there you go, third point there. Any questions so far? Okay so let's go on to something more exciting which is links, any website you go to today there's always things to click that go to some other page and those are called hyperlinks or links for short, now to make them in HTML they're called anchor tags, anchor and we use the element a, now let's say after this is a paragraph I want to add a link to go to my favorite website for example yahoo.com, I am going to add less than a greater than and then say go to yahoo and then close it with less than slash a greater than, now you can see go to yahoo tags appear here except it doesn't do anything when I click, that's because the a tag or anchor tag doesn't know where you want to go, so you must provide information about where this link will go when you click and that's done via what's called attributes, so attributes are a way to add metadata to an HTML element, now the way to do that is the following, you locate the opening tag for the element you want to add an attribute to and then you see the name of the element you're going to go to the right hand side of it, add a space and then you can start typing all the attribute values, now attributes are usually pairs of a property name and a value separated by a equal sign, okay so in this case the name of the attribute is href, okay I think it stands for hyperlink reference if I'm not mistaken but anyway that's the way they call it, now equal sign and you got to give it value, now value is usually within double quotes, double quotes and you type the value between the quotes, in this case I have to do the URL or uniform resource locator for yahoo.com, you could choose whatever website you want, now this thing is usually you can get that from your browser, if you click the address bar and copy that, that's the URL, commonly referred colloquially as a link, so you could put it here and click run, you're going to see that go to yahoo has become underlined in kind of a bluish column, that's the default style for hyperlink and if I hover my pointer that is I don't click but just move the mouse pointer over the text, I can see in the bottom left of my browser you might not see it because it's too small, it says htps colon slash slash yahoo.com because it's the intent is if I click this it will go there, now if I do click here it will leave this page and I don't want to lose all my code here, so I'm going to hold control my keyboard so that it goes to a new tab or window and click, you see it open there, now I'm going to close it, all right, but the default behavior is opening in the same window or tab, now if you really want to force that to go to a new tab or window, without me having to press the control key in my keyboard while clicking it, you can always add the attribute target to the anchor tag and add the value underscore blank, so to add another attribute to the anchor you can either add to the left of the existing one like here or you can do it to its right, make sure to always add a space between the definition of each attribute, now we can follow the same pattern attribute name equals double quotes, double quotes and then type within double quotes underscore blank which means like open it in a new blank tab or window, click run, now I'm not going to hold control in my keyboard at all, I'm just going to click go to yahoo and it did open there in another window or tab, okay, so if I want to add hyperlink to a specific word example click here, so whatever is between the open anchor tag and the closing anchor tag will be linked, if you just want to link the word yahoo all you have to do is remove go to and move that outside of the open and closing A, that means before the open here you see what I did, I removed the go to, moved it outside, so if I click run now only the word yahoo is linked, go to is no longer clickable, all right, okay very nice, now let's get it, let's get to more exciting stuff, websites today have a lot of images, video, even audio and all that kind of stuff of media, how do we do images, so image is the img element, so let's look for image first that we want to display, usually to find an image I can use a search engine like bing.com in a new tab here and I look for a dog for example and I can click images tab and I can find one picture here for example this down mission dog, click there and it can click view image and it opens the image in a new tab, now I can copy the url from the browser here and then go back to jess fiddle and I can use that here for the source of the image, let me just paste it here and I'll move it in a bit, okay let me add a img element here and then greater than, now it needs to know where the image source is, where is it from, so you add an attribute as well, go to the name of the element, need the open tag and put a space and the attribute here is src, be careful it's not the same attribute as the anchor tag, it's src which stands for source, equal sign, double quotes, double quotes, now I'm going to take that url that I copied for the image of the dog, cut that and put inside the double quotes here and if I click run, uh oh what happened here, source, you'd like the image is broken, let's try it to be, okay that didn't work because the image seems to be broken, you see broken images, we can leverage this to debug what's going on and then we'll fix the image for you, so when the image for some reason is broken like the link no longer works, maybe they remove the image of the server, maybe they have some permissions that don't allow people to you know show their images outside their website like we're doing right now, what's going to happen is you're going to see the broken image icon and if we face yourself with that we don't really know what the image was meant for, so what you want to do is describe this image every time you add an image, so that's with the alt attribute, so you can use alt here to describe maybe Dalmatian dog or something, make sure to describe it very clearly what the image was meant to be, so that way I see this placeholder Dalmatian dog text there, okay, alt attribute is also useful accessibility that in a sense that people cannot have a hard time seeing or cannot see they're blind, they will use what's called a screen reader and that will read out loud all the website content and when they face they come across the image they will read out the alt let me say Dalmatian dog and in the person we understand this part of the website is meant to be the picture of a Dalmatian dog despite them not being able to see it, okay in any case let's fix the image seems like that one wasn't so good let's try another one here how about this click view image let's see if they allow us here I'm gonna replace the source there oops just the source okay don't forget don't remove the alt oh there you go that one worked there's no restrictions on that okay you can see the image here it's pretty big the dog obviously this is not good practice to always put the image without setting its dimensions so you must take care to do that and we can do that with an attribute on the image tag as well and you can go here add a space and say width let's say 200 and the unit here would be pixels or px for short but you don't have to say px here just 200 for the value and when you do that the width of the image is changed or resized to 200 pixels if you notice the image was resized as well as well because when you specify only one attribute dimension it will try to maintain the aspect ratio and change the height accordingly but if you wanted to really change the height you can specify the height here for example 100 and it would stretch or shrink the image like that I would look a little bit out of place uh uglier right because it's stretched if I omit the width it will try to maintain the ratio keeping the image height 100 and the other one variable so you can see it like that in any case let me revert back to width 200 so it looks like that okay you might have noticed that I didn't have a closing tag for image because this is a special kind of element in the sense that the image tag doesn't need a closing one it is called a self closing tag because there's really nothing to put in between the open and close you know and then there's no need to add a closing one so you're gonna see only the image open tag by itself like that that's a self closing tag okay all right any questions so far okay so let me show you how it can do just for fun videos and audio so we follow pretty much the same pattern every time we have elements we have attributes to add more information about the thing we're trying to show so if you want to do a video let's do it before this is a paragraph and the tag for this is just the video element so you're gonna see less than video greater than like this now if I click run nothing will show okay so you gotta add the attribute controls first to show the controls now you notice this attribute is all special in the sense that I didn't put any value okay this is like a what's called a Boolean a true or false attribute in the sense that it's implied that this means I want to controls to be true I mean show the controls okay so you're gonna see this a lot as well these attributes without defining an explicit value so this just means okay I want to see the controls for this specific now we also must provide what's the source of the video now the simplest way you can do this is if you find a url for any video now I don't know that might be a bit harder to find using a search engine so I already have a url for you I paste in oops not the other one that one is the audio sorry I placed the zoom chat the video of the big black bunny so if we add source here like image and paste that url let's see what we get you're gonna see this really big video if I click play the video is playing now because really big I want to also set the width here so you're gonna go outside the quotes okay make sure outside not inside because the quotes inside is the value for source you're gonna do with let's just do 150 and it will also like the image resize the height according to the original aspect ratio and click run there play and you see the video playing okay now one thing I didn't do here I should also think add a closing tag to the video it's not like the image you might notice if I didn't close the video everything the after that is lost in the page so you want to you want to add the closing tag for video there it's not like image that's self-closing and the reason for this is because you actually can place something within the open and closing tag and that's typically the source element so we can specify different formats for the video okay and that's a little bit more complex right now we're just doing a simple source attribute but it could add different formats for the video to play you know and that would be done to specify the source here inside the video and that's why we need to close that and that's it any questions so far all right uh let's also do the audio it like it follows the same pattern as video you're going to do pretty much almost the same thing except it replaced the name of the element of audio so let's go here after video and after this is a paragraph just so you have something here I'm going to add audio now I must if I just do audio and close it okay make sure to close it nothing's going to show because you need to show control so you add the controls attribute to audio and you're going to see the player see that now you must say okay where's the audio coming from src for source and then you paste the orl the audio file now I have some for you as an example I paste in the zoom chat and this this one here if I click run and I click play the audio I am hearing the audio playing you might not be hearing it but I am going to click play and like I said the reason for having open and closed because inside you would say the source element and specify different kinds of formats for the audio as well so you have one source for maybe OGG format another for mp3 and another for AAC or whatever okay but for the purposes of this introduction it suffices to adjust the source as an attribute to the audio tag there okay so going forward html is pretty much just like this you build a document leveraging all these kind of different tags and h1 h2 all the way up to h6 for headings you have paragraph b you have links with anchor tags a we have a image with img which you have video of video audio of audio it's very intuitive you know and if you don't know how to display something html I would suggest you just search for on a search engine for example I forget how to do video I would go here and say okay video space html and I would add some results one of them that's good w3 school so it goes to good tutorial I would have md and the mozilla developer network also great as well resource let's try w3 schools and here to give you an example of how to use it here's the example you see the video you can set width height and controls you can specify the different kinds of sources within the video tag and you can click this a button try for yourself and they have you on the left hand side of source code that you can actually modify and for example I put 600 here for the width and click run the right hand side will adjust accordingly and it can remove the height here and click run it's like that okay so it's very great resource to practice and remember refresh your memory about html elements I suggest you do the html uh tutorial from this website and the quiz as well at the end all right I'm gonna close it close it and back to this somebody asked can we increase the size of the video width and height it's better to be done using css so you can change the width and height with html but you can also do that with the width and height property in css if you can do with html it's good because you know it takes time to load a video or image or and if if it is to be figure out the width and height from uh it doesn't know the width and height beforehand so you always want to specify it so that there's a placeholder in the document as you're loading the page things won't jump around you might have noticed some pages as they're loading things jump and that's because initially it doesn't know exactly how things are gonna what's the size of things so you want to make sure to add the size the width and height for things like image and video so that while it's loading it doesn't know how much space it will take it takes the right amount and then when it's loaded it doesn't jump the content which is very annoying you know so make sure to always specify dimensions um in which cases should we use source element that's usually for a video or audio inside the tag you're going to specify different sources uh in which cases you should as a good practice you always do it because uh computer I don't know these days but before that might be someone cannot play a certain format maybe they don't have the codex installed or something like that maybe they cannot play a video in a certain video format but it can play in another so you want to offer alternatives to the user so that if one format fails to render the video another one will be tried out by the browser and so on other things like that are also useful in the case of like images in the case of images you would have different sizes of resolutions for the same image and the browser would pick the one according to how you're browsing through maybe if you ever heard of responsive design it's when the the content of the website adapts to the user uh device like if you use a small screen device or if you use a big desktop maybe the it would it could use a bigger image on a desktop but it should use definitely a smaller image on a smaller device so that it doesn't consume a lot of bandwidth as you download things I mean it used to be a lot more significant back you know uh many years ago if when we had a slow internet and that kind of stuff so we had to optimize optimize things a lot make things the files smaller so that they could be transferred faster and people wouldn't be waiting for the website to load in for a long time that kind of stuff a lot of optimizations you know all right how about we do a quiz all right I made this let's try the first time I don't know how it's going to work introduction to html quiz just three questions let's see if you get them first question how to make a paragraph in html second question how to build a bullet point list in html third question how to make a hyperlink in html all right looks like yeah yeah everybody got the right answer the paragraph is the p tag for bullet points as ul with allies inside and for the hyperlink is the anchor tag with the a right just a great thank you for participating all right so with that we'll wrap this up