Okay, today I will talk about HTML, hypertext markup language. Now before I do that, I encourage everybody to download the text editor. In my case, I'll use Visual Studio Code. Here's the link. Okay, so I'll do some HTML, which is used to build web pages today. So just as an overview, if you go in the browser, in your computer, or in your phone, be it anywhere where you can see a browser, and you go to a page or website, application, social media, whatever it is, how's that built? Well, that's built. What you see is built HTML, CSS, and JavaScript. What are these elements, these three basic elements for the front end, what we call the front end, what everybody sees, what the HTML has to do with the structure of the document? How is it going to be laid out? Whereas the CSS is what makes it 3D, and then the JavaScript makes it interactive and dynamic. So we're going to touch upon those topics each in different sessions. Today, it's dedicated to just HTML, because you've got to learn how to do that. It's a very core foundation. Okay, so let's open VS Code and find somewhere where you want to start a project. In my case, I'm going to use the repository. Remember, this is the repository I'm going to use to keep all the code. And it's going to be available there. If you go get there on GitHub after class, you will see it there. So I'm going to go here and share. Let me share my thing, somebody's waiting. Wow, where is it? This new Zoom UI is really bad. I cannot find the thing I want to share. There you go. So basically, in my file system, I created a directory for my, which is what you see on GitHub, and this is where I'll be writing the code. So first, you've got to create a new file called index.html. But before I do that, I'm going to move on to VS Code. I just wanted to show you this, that you can do it on Mac with Finder, or you can do it on Windows with File Explorer, whatever, or you can do it from Visual Studio Code itself. I don't know how familiar people are with navigating the file system and creating new files, so that's why I have to show you this. Anyway, I'm here. I open Visual Studio Code. I open File, open Folder with that directory that I'm going to use for the project. And let me create a folder here called SRC, which stands for Source, for the source code. And I'm going to go inside there and create a file called index.html. Now this is where we're going to write the code for the HTML page. Basically, whenever you have a web page, you've got to create one file with the extension.html. And then we start writing the HTML code, which is basically what we're going to see later as tags. But let me show you in the browser before I move on, because maybe some people have never seen it. So I'm going to open Chrome. So any web page that you want to see how it was built, it's actually open source. For example, this is the code I can right-click anywhere and click View Page Source. This function should be available in any browser. And this is actually how this page was built with all this code. And this code that you're seeing right now is what we call HTML, hypertext, markup language. If you haven't heard of XML, HTML is like a special case, which specific tag names. Anyway, we're going to learn how to do this. Let's go back to the code here. So it's nice to write the code, but we want to see how it looks like. How do we see what it looks like? Well, you could open this file in your browser, but that's kind of tedious. So another way of having a live preview is if you go VS Code Extensions and you install Microsoft Live Preview Extension. This one here, if you install that, you can go to the File, Control, Shift, B. I'm on Windows, so I can type a live preview with the internal browser. And that should show me on the side a browser window. So I don't have to have separate ones, okay? If you don't want to do this way, you would have to go into and open this file in the browser. For example, I can right-click here, Reveal in File Explorer, and that should open the File Explorer window. And here I'm in File Explorer. I can go right-click, index.html, open with any browser of your choice, Chrome, Firefox, whatever. Right-click there, and then it should open that page in the browser. Obviously, there's nothing right now. So whenever you make a change to the code, make sure to click Refresh afterwards. So you're going to write the code, save the file, go to the browser, refresh. Okay? If you're doing this way without the live preview. Okay, now with that out of the way, going back to VS Code. Let's do some HTML. Basically, you've got to do some boilerplate first. So please be patient. So the first thing you've got to do is tell, okay, what version of HTML are we using? These days, it's HTML5, okay? So to do that, we're going to say the doc type tag. So you have to say less than, exclamation, and then all caps, doc type, like this, okay? And then space HTML. Okay? That's how, hey, I want a browser. When you read this file, I wanted to interpret that using the version 5 of HTML. Okay, and finish off with the greater than. That's out of the way. Break a line there. I mean, disable my co-pilot thing, because out of completing that, and I don't want us, because we're beginners right now, we don't want to be helped, otherwise we don't know what we're doing. It's best we write from scratch. Let me just reload this, give me one second. Reload. Okay. I'm back. All right, with that out of the way, now we got to write what's called a HTML tag. So what are you going to do is less than HTML, greater than, and then break a line there. Usually it adds the space, which is called indentation. Whenever you open a tag, this is called a tag, by the way, when you have the angle brackets or the less than or greater than, that's a tag. That's the open tag. And then it's always usually at least two spaces on the left. And then we're going to open another tag called ahead. So the HTML page has two sections under the HTML. So it has the head and has the body. The body is what everybody sees on the screen. And the head is used for more metadata stuff about the document. And metadata could be something like, what do we see in the tab title in the browser? That's metadata under the head, under the title tag. Now I talk about document because HTML originally was created to share scientific documents. So that's the terminology you're going to see a lot when you talk about websites and web pages. You're going to talk about documents. Okay? Okay, so let's add the head tag with less than, head, greater than. Now under the head, remember, we're open another tag. So it adds automatically two spaces indentation for me because I'm using VS Code. So then finally I want to add the title. So we have the title for this document. That's an intro to HTML. And did you notice as I'm typing the tab here is changing? That's because of the title here. So basically I have an open tag for title, which is basically the angle brackets surrounding the word title. Type whatever you want to show in the tab here. And then you finish off with what's called the closing tag. And the closing tag is almost the same as the open, except there's a slash right after the first angle bracket or less than sign. Okay? It's always like that. So that defines the title for this document. And you can see on the right hand side, intro to HTML appears there. And if I change it, you'll see it changed it as well. Anyway, we're finished off with the head. I don't need to specify anything else. So I'm going to say, I'm going to go back indentation because I'm going to close it. That's then slash, that's a closing tag for head. And the reason people do indentation, it's not, that's, it's necessary. It's just that it's easier on, on our eyes as humans to read the code. And also you can see when we put the open tag lining up vertically on the same level as the closing, you can see that this, oh, this one is closing this one because you see that vertical line there added by visual studio code. So that's the reason we usually do that. Maybe you could write the code like this, and it will be just the same, or even like this. Okay. But I just think it's easier to see when everything is structured a certain way using indentation. Okay, we're finished off with the head, now let's open the body, angle brackets body, close angle brackets. And then this is where we're going to type the content of the website. But before I do that, let me just close it with the body like this. And did you notice that VS code automatically removed the indentation because I put a closing tag. And let me close the HTML there. And this one, it didn't do it. So I got to do it manually. So this way I know, okay, this HTML closing that, this body closing this. Now under the body is what people are going to see, the content. So let's learn how to write a paragraph. That's the easiest thing I can think of. So angle brackets, P, that's the name of the element. Close end of brackets. And then type something. Let's type Laura Apsin. And then close off with the closing tag like this. So this is an open tag for the paragraph. This is a closing tag. Now you can see it uses abbreviation. Okay, so we call it P not paragraph spelled out. That's just the way it is. So in HTML, we have build things with what we call elements. Okay, so under the body, we have a paragraph element here, and we have its opening tag. And then we have the tags that will be shown as a paragraph. And then finally, you close this, that is you tell it, hey, I finished my paragraph, therefore I'm closing the tag. You're closing with the closing paragraph tag. Angle brackets slash, okay. It's always the same. Name of the element for both of them as we do the same. Okay, so in HTML, you just got to know what elements are available, and then you can start writing and building. Okay, now you can see on the right hand side, Laura Apsin appears. And that's a paragraph. Now I'm going to open this in a separate browser so you can see it works the same. If you recall, I had opened the file, right, in Finder on Mac, our file explorer, open with a browser, I'll choose Google Chrome. And then what I'm going to do is go to Chrome, let me find it. And I have the file open here. I had the older version, so I have to click refresh to actually get the latest. Great, I'm going to show you how to, you can see, you already saw that if I right click, click view page source, I am able to see how this website was built. And you can see it's the exact same code we wrote just now. Okay, so this is the view page source function. So actually you can go to any website, your favorite website today, right click view page source to see how it's built, because all the front end code is open source. Another way to see the live document, instead of the original that was loaded, is if you open the developer tools, one way is right click and click inspect. And it should open this panel here, usually at the bottom, but you can change it if you click the three dots, you can choose to be on the sides, three dots, or even as an external window. I'm using Chrome right now. So if you're using Firefox, this will read the inspector tab. Okay, so it's the same thing, same functionality, but some different names for the tabs that you see. And this section is very important under elements, which is the live document view. This is where you can see the actual document as it is right now at this point in time. And you can see, you can expand and collapse things to see what's inside each of the tags. That's very convenient. You can even go further and change stuff here. If you double click Lauren Ibsen, you put one, two, three, four, click outside. It should, you should see it change it here. So it's very powerful. Now keep in mind, although it changes here, if I click to reload, it will be reloaded with the original version. So that doesn't mean that somebody else will get the same change. It's just temporarily for you only. And the right hand side here is something about style that we won't talk about much today. It's about the CSS. You can see what default styling is applied to this element. And if you highlight with the mouse pointer here and click there, you can see it highlights in the content. It's telling, basically it's telling you this is the element P, which stands for paragraph. Here's the width, here's the height, right, width, X height, cross height. And there's some spacing out of above and below. And as we later learned, that's the margin, the space outside. Okay. So going back to what we had, for those who just came in, we just created a file in a directory called it index.html. And we have visual studio code open with the file here index.html open. We wrote this boilerplate that I can copy it based there in the zoom chat. And this sidebar here with the preview, it's from the extension Microsoft live preview. If you look, click this kind of building blocks icon. So for Microsoft live preview, this one install. And then you, you can do the command palette, control shift B, and live preview, show preview internal browser to show it. Command palette can also be accessed from view command palette. If you don't know how to press the keys, exactly. Okay. View command palette should bring that up and live preview. Okay. If you don't want to do that, just open the file in the browser, right click here, reviewing that file explorer, and then right click the file, open it with any browser you want. Okay. So that's HTML in nutshell. We have tags that we usually have open and close and something in between for the content that will be shown. And also for the content of the website under the body tag here, when I say under the body tag that means between the open and closing tags, okay, whenever say, oh, something's inside an element within an element that just means between the open and closing. Okay. So if I had put the P out here, be outside body, right? That's incorrect because it's right after the closing of the body. I have to be before the closing either here or here or here as long as before the closing and after the open. Anyway, how's everybody doing? So far, so good, too easy. Most of you is too easy. Okay. So you can write more paragraphs very easily just, okay, let's add another one. Same deal. What's the name of the element? It's P. Therefore, I put the angle brackets P and then start typing. One nice feature about VS Code that somebody taught me in the last boot camp is Lauren Ibsen like this. Lauren, say I want to generate seven random words. I can put Lauren seven and tab and it generates that. So somebody taught me in the last boot camp, I'm using it. Otherwise, I would have to go to a website to generate random texts, Lauren Ibsen. And then finish off with the closing tag last in slash name of the element that matches the opening tag, which is P and then close it with the greater than. And there you go. We have a second paragraph. Notice I put them side by side in the code, but they actually appear in separate lines and that's due to the default styling of the browser. Every browser has some default styles and the default style is that the paragraphs, they occupy their own row. And if anybody tries to stay, stick next to it, they'll be pushed to the next row. And also with that spacing at the above and below, which is the margin. And yeah, so my code, I can structure like this or like this or like that or like that like that doesn't matter. Always the same outcome. Usually we like to do like one per line. It looks nice instead of having everything in a very, very long line. That sucks. By the way, I'm using the view would wrap option right now. If I don't have that, I would have to scroll to a really long line like that. So I don't like this. I don't like scrolling. So I click view word wrap. That's how I get that to appear to have multiple lines. But it's actually one. If you'll notice this is the line number seven. It occupying the whole thing due to word wrap. Okay, now the breaking line, I think it's nicer to see like that. Yeah, and keep going, building stuff. Obviously we have other kind of elements that we have to learn. So let's learn another one to put like a title to the document. And that's called the heading element. And there are several levels from one to six. I'm going to do the first level. So less than, and I'm going to say h1 greater than and start typing the title here. Let me put Lauren three for three random things and I close it with less than slash h1 greater than. So this is like a heading tag. It's something like the title of a section and you see it appears visually as something in bold letters with font size bigger than the usual paragraph ones. I think it's like maybe denoting a chapter in a book, some subcontent. And it can go further. Maybe this is a section from this section and then it can have like subsections. For example, subsection of that would be h2 subsection. And I don't know if you notice it's slightly smaller in size visually. And then it can keep going and add subsections of subsections of subsections and so on with h3. Let me add Lauren three there. And I'm going to just duplicate and change the tags, making sure to change the open and close. By the way, I can use control D on visual studio code to select the next thing. And I can change it like this. So I changed both the open and close. So I double click here to select and then control D and select this and that. And I can right arrow and then h5. Finally, the other one, control D, right arrow, backspace, h6. So just so you know what the other h ends are, it goes from h1 to h6. And visually, it's just stacks that get smaller and smaller to denote this is a subsection of that thing as you're talking about. You know, all this was originally meant for document, scientific documents, but these days not really what people use them for. So you might see people using HTML elements for a purpose different than original purpose. So you have to keep that in mind. Anything can be manipulated in HTML. So we're not always going to be what they're originally meant for. Okay, easy enough. Let's talk about links. Oh, actually, before that, I have to tell you how to make things bold and emphasize text and whatever. So let's say ipsum here. I want to mark this word as what they call strong importance. So I would surround this by the tag called strong and then close it like this. That way ipsum here becomes kind of bold visually. So this is just marking this part of the document, this specific word has strong importance. So the reason for having this semantic tag is so that when a computer or any other program like a search engine reads your document, they'll understand that this might be some word that's important to when people are searching for things trying to find information. So maybe they'll give more emphasis to this. Otherwise, if you didn't have that, I wouldn't understand this as something more special than usual. Anyway, the manifestation of that visually is just bold. And then you can also do the kind of emphasis, which is em. For example, maybe this word constructor, I want to make emphasize. I don't know, we have to look it up. What do you want to use as strong? What do you want to use as emphasis? We could put em in angle brackets, surround that word and put the closing tag like this. And it will appear visually like italics, slanted text. And that's those tags. Back in the day, people like to use for both like the B tag and for idiomatic text or italics, the I tag. So you can do that. For example, Dolor here, I can put a B, you know, slash B, like that, and it will appear bold. And then this adipitis, sizing, whatever you're saying, with I, then back slash I, and that becomes slanted. But this is like just using HTML to change style, not necessarily adding any meaning semantically to this word. So that's why people prefer today using strong and em, because they want to isolate the semantic meaning from the visuals. So you could have a word that's strong importance, not necessarily appear visually as bold, because anybody could change the style. So that's the meaning of having to use strong versus B. So prefer the semantic one. Okay. And same thing for EM. Just because it's seen italics doesn't mean necessarily that you could write, you could not have it italicized and could still be of emphasis if you still had the EM. Whereas this other one is purely kind of visual kind of thing. Although this tag here, you might see it later on if you're doing icons like font awesome. This tag has been repurposed, kind of to add icons. Yeah, so you're going to see that a lot some HTML elements, they can be repurposed for whatever thing they want to do. Okay, great. Now let's talk about links. Let's a link to another page. Let's say here. I will do let first I'll do like link to an external website and I'll do internal about that. So let's say here under this h3. I want to say I want to go to Google, for example. So the tag to links create hyperlinks or colloquially links right something that you click and go somewhere is the anchor tag or short a. So angle brackets a and then you type the label, let's say go to Google, then close it with the less than slash name of the element in this case a and greater than. And you see go to Google but nothing happens when you click right does not highlight it usually a link is highlighted by the photo appears kind of bluish letter so you have to give okay more information about this. How do we tell anchor tag where to go. So that's the problem here because the way we know how to add information so far is between the tags right, but how else we give additional information on metadata. Well, you can actually give information here in the open tag inside. If you go to its name, put a space and then to the right, you can add what are called attributes, and the attribute that the link expects is href. And then to give it a value, you have to use equal sign double quotes double quotes and then type the value between the quotes. In this case, you would type the URL to Google URL something that you go to the browser, and you see in the address bar, right, if you go to browser, you see this part here that's the URL, right, go here, this is URL so you can copy that. Obviously, remember it's htp colon slash slash www.google.com for example for Google. I can use that htp. I can use as to that's htp secure. Google.com. So if I click that should go to Google obviously this environment I think it's going to open a page and it's going to be all blanked out here it's kind of weird. So I'm just going to do in a separate browser window. So let's go there. Here, my tab here refresh because I changed the code and you see go to Google there back legs going to go to Google. There you go. I can go back. Okay, that's the hyperlink. Now obviously you can have hyperlinks to your own pages. So let's learn how to do that. Basically the same thing except the path or URL is different. Back to VS code. I'm going to create a new file here under SRC. Let's call a sign up. Make a sign up page. Sign up dot html. Okay, let's add the boilerplate. I think VS code you can type html and tab and it will make the open and closing tag. That's kind of nice trick. And then head tab to create both. And then I'm going to add the body tab to create the body there. If you want to add a title here go between the tags title tab. It should add the open and close and let's say sign up. And this is the sign up page about that for now. Somebody would sign up or register an account. Great. Now how can we link from index to that page? Let me put it here at the bottom so you can see it's there. You can split down and it should have different panels. So let's see. Let's say here up there. I'm going to add a link, right anchor tag. And then I have to say href equals sign double quotes, double quotes. Okay, now what I put here for a page local like it's relative. So you just got to think about, okay, where's index dot html right now. It's under SRC and where's sign up where it's under the same directory. If they are in the same directory, I can just use relative path, which is basically the name of the file, sign up dot html. And then you can close that open tag, write the link, maybe sign off. And then close with the angle brackets. And there's a sign up link for click should go to the sign up page. Because it's relative it works here fine. It doesn't go anywhere else. So I can click to go back. Now let's say I want to, I go to sign up, but I want to have click a link to go back to home. How would I do that? So I'm here, sign up. Let's add a link here to home. So anchor tag, href, what's the name of the file, index dot html. They're in the same directories. Therefore I can just say index dot html and give it a label. Let's call it home like that. Save it. You can refresh this by the way. It should open there. Okay. Click home. It goes back. Click sign up. Goes to sign up. Click home. It goes back. Okay. That's how you link pages together. If you have any questions, let me know. Okay. Now let's do some more tags that are interesting about images. Let's go here back to index and under subsection, I will add an image. How do I add an image? It's the img element. Img. So angle brackets, img. Close it. Now nothing appears because you've got to tell it. What's the image you want to show? Click the link. It needs metadata. Attributes. So we're going to add an attribute by going to the open tag and space. And you're going to add a src. That's the name of the attribute that the image uses. It's not href. Don't confuse. src stands for source. Okay. Let me give you an image here. Find one. The Dalmatian dog image. I found this image on a search engine, by the way. Let me show you how you can get an image if you don't know. Go to your browser, any search engine, for example, go Bing.com. You can click images, search, and you can find dog, for example, whatever you want. Click one of them. Right. Click this one. And you can click view image. And it should open the image in a new tab. And you can click the address bar. Copy that. This is the URL. That's what you want for the source of the image. Okay. With that out of the way, moving back, I can go here. Let me put it down there. For the source, based on that, you're going to see the image. It's just too big. Hard to see. So you want to resize it always. Okay. So pure HTML can add more attributes, actually, to tell more about this image. So it can add another attribute either before here, or after the quotes here. Either way, it should work the same way. Now, the attribute is called width, if you want to change the width, for example, 100. And the unit will be pixels, but you don't have to say px. If you want to change the height, you can add height here, like 50. But if you notice, if I change the height as well, it will stretch, kind of squeeze the image. So if you omit one of them, it will try to adjust the other dimension, obeying the original aspect ratio. That is the width over height. Okay. So if you want to increase a little bit, 150, like that. That way, the user can see it. You don't have to scroll. It's not just too big. Another thing you want to add for images is to describe it with the alt attribute. You want to describe the image like a very specific, like a Dalmatian dog, useful for many things. For example, if I, for some reason, the image is broken, that is no longer exists. It appears a broken image icon usually, and a description what was meant to be there. Another use case for accessibility, people who cannot have a hard time seeing or are blind, they would actually use a screen reader, which is a program that reads out loud the website. So as they go through this, even though they can't see the image, they would read, they would hear a Dalmatian dog, and they would understand that this part of the website was meant for the picture of a Dalmatian dog. Okay, so that's images. Let me show you how to do audio. So under the dog here, I want to add an audio tag like this, and this is to play sounds like audio player. No, Spotify, you want to play music. So you can add audio like that. But by the way, before I move on, notice the image, I didn't put a closing tag like this, because image, a special case called a self-closing tag, you don't have to have a closing tag for image. Okay. Moving on, the audio, you have to have closing tag like that, but you don't see anything by default. So you got to add controls to attribute like this, and I'll notice this attribute doesn't have a value. So it's kind of implicit. It's kind of like a true or false Boolean value. So it just means please show controls. You can just say controls and it will see the player there now. Now you got to tell it like the image source. Where's the audio to play? Let me give the audio here that I have of the dog barking. That's from my repository. And if I click play, the dog barks. All right, you can't see here in the recording, but if I click play, the dog is barking. Okay, let me show you how to do video now. Let me put in a different section. I want to go lower and it's after this paragraph here. We're going to add, it's called the video tags of video. It's very similar to audio. Close it and then add controls to show something. There you go, the video player. And then source, just like audio. Let me give you a video of big bug bunny that you find on the internet. Like that. Paste it. And it's like the image is very big. So I want to add width here attribute. Let's say 150 and then the height adjusts accordingly. Maybe that's to make it bigger like that. And then click play and the video will play. I'm going to pause that. Now I noticed the source I used was from the web, but if you want a relative one from your, you can actually use relative ones by just putting them in this source directory. And then you can just say their file name. Like that big bug bunny.mp4 here and under source. I could play the video that was there. You can do your own local video or audio or whatever. Or images even, right? You can have an image locally here and just give its path in the file system or relative. Okay, I hope that's clear so far. Now let's think about this. Here a video under the video. I want to add some lists, probably the same bullet point lists or numbered lists. How do we do that in HTML? It's so you need two elements. First is the container for the list. And then you need the at each list item. So it's going to be interesting because you have two separate elements. One for the container and then you've got to include inside multiple list items. So for the bullet point, the bullet at least is angle brackets as well. It stands for unordered lists, no particular order. And then inside that, make sure to close it here. Otherwise you forget. Inside that, between the open and close, you've got to add the list items. And that's just called ally. For example, let's add Lauren three here that and a close of ally. And you should see a bullet point followed by this text. If you need more bullet points, just add more allies like this ally. Let type some random text Lauren to ally. You can break a line have them separate in each line. That's easier to see. That's what I do usually. Let's see a second bullet point. If you want to do that trick of creating open and closing tag, you just type a line VS code and type tab and it should generate the open and close and type some random text Lauren one, for example. And there you go. Another bullet point. Okay. Now, if you want to convert this to the numbered list, you can just change the container element and it will change accordingly. Change it to all L which stands for ordered list, which means that keeps some order. Don't forget to change the closing time. Now you can see 123. And automatically you see the numbers as you add more, for example, ally, the fourth one. It will add the four dots here four point. Well, that's very nice. So that those are lists. Obviously, there are other kinds of lists in HTML. So here's how I would do it about finding out about other elements. Let me show you one way is go to the browser. Let's say how to make bullets list HTML and we'll point it to several websites. W3 schools is a good one. MDN is another one. So let's see this one. So you would go here, read about that. You can even try for yourself. The left hand side, you can change the code and it will manifest on the right hand side. So for example, change coffee to something else. Hello, I click run and she'll see hello here. So very nice website. So you can go like this. If you want to everyone, how do I make a link in HTML, just search. Obviously, these days, people have AI chatbots. I can always ask your AI chat to be T whatever. How do I do something HTML and it will tell you. Okay, another way is you can actually inspect other people's website. Let's let's say I want to how do they build this try for yourself button here. I can right click inspect and open the dev tools. It will actually highlight for me and it can read. Oh, this is element a, which is anchor. Oh, okay. How about how do they build this list? Right click inspect. Oh, it's actually ally inside a UL like we just did. Okay, then you can play around that and understand how other people build their websites. So you can click this P and click the other stuff to investigate. Okay, very powerful to developer tools. Okay, with that, I think it's time for us to take a break.