Hey everybody, please go to jsfiddle.net in your web browser. Okay, I'm going to talk about HTML, hypertext, markup language today. That's what we use to build websites. Whenever you go to the internet in your browser, you go to any website today. That's how it's built. It's one of the core fundamentals for building them. It doesn't matter if you're using a mobile device, laptop, or computer. It's always written the same way with HTML as long as you're using the browser. HTML is to do more with the structure of a document. So it started out as a way to share scientific documents. That's why the terminology is all about documents and such. And then it evolved to what we see today with applications, with so much interactivity, like what we see in social media and so on. So going to this website, jsfiddle.net, we can try the examples out. We have several panels. We'll be focusing on HTML and the result panel in the bottom right. So whenever I type code in the HTML panel, I can click Run in the top left. And I should see the results in the bottom right of the screen. I'm going to start off with how to write a paragraph in HTML. Let me write it here and I'll explain. I'm going to click Run. And you can see there's a text. This is a paragraph. So HTML is driven by what we call tags, which are these things. This is the opening tag. This is the closing tag. And everything in between, in this case, is what we want to show to the user. So this is called a p tag or an element called e. It's meant for paragraphs. So whenever you need to add a paragraph to a document, all you have to say is less than, and then the name of the element being p, and then greater than to close this, type whatever text, and then finally you've got to follow with less than slash name of the element greater than. If you notice the opening tag here is almost the same as the closing. The only difference is the closing tag always has the slash after the last bin sign. What you see here is basically how HTML is written for pretty much every element that we have. We always have an opening tag and then a closing tag, and you write the name of the element between these angle brackets. Pretty much always the same pattern. What's going to change is what's between the angle brackets. Let's write another paragraph. So if you want to make another paragraph, all you have to do is keep writing another opening tag for p. So less than p, greater than, and then you can type another paragraph of whatever you want. And then don't forget to close it with less than slash name of the element, in this case p, and then greater than. Then you can click around in the top left. You can see we now see another paragraph appearing in a new line. Now I wrote everything in one single line, but you could actually break a line here to make it better for us to visualize. For the purposes of what the computer sees, it doesn't really care if we have a line break there or not, in this case. It will appear just the same if I click around in the top left. You see nothing change visually. So there are different ways to write your code, different styles. You know, you can write everything in one line, or you can break a line here and put the text between the opening and closing in a different line and so on. Some people also add indentation, meaning you add some spaces to the left whenever you open anything. In this case, opening a tag and everything under that has two spaces. And then once you close the tag, you go back to the same level as before. That's a common pattern in programming in general. Okay, easy enough. Let's talk about different tags. So let's say I want to make this word paragraph in bold. I can use a tag for that. All I have to do is enclose this word in an opening and closing. So opening at the left hand side and closing at the right hand side. And the name of the element we're going to use is strong. So less than the name of the element is strong, greater than. You notice it autocompletes for me. That's because this environment is kind of smart and it tries to always add a closing tag for me. But be careful that the closing should be on the right hand side after you finish writing the thing you want to make strong. Always write the slash there for the closing tag and the name of the element has to match the same name as the opening tag. So I'm going to click run in the top left. And if you notice the word paragraph is now in bold. So let's talk about emphasis tag. Let's say, you know, typically the way a bold, a strong manifest is by being bold by default. So these are the default styles that the browser provides. Okay, every browser will have different default visual for every HTML element. So usually when you use strong, it appears as bold. And then there's another one that's like to emphasize some word. It usually appears as italics, you know, the slanted. Let's try that one. Let's say the second paragraph here, the word paragraph. I want to emphasize that. I'm going to last then em greater than and then write the word. And then don't forget the closing tag last then slash and then em and greater than em stands for emphasis. So when I click run in the top left, you can see the word paragraph is now italicized or slanted. Okay, that's the way it manifests visually by the browser default style. In case anybody's wondering about the style, they can be changed with CSS. That's something I cover in a different session, but any style in a document can be changed or overridden with CSS. But for now, just deal with the default browser style. Okay, so we learned a p tag for paragraph. We learned a strong tag for bold. We learned the emphasis tag for italics. Back in the days, you know, the early days of the web, we also use different tags for bold and italics. And instead of strong, we would say be. So if I change the opening and closing name to be, this is how I manifest visually is the same thing. So if you ever see this B tag, that's what it means. It's the boat tag. But these days, people like using the strong because it's called a semantic tag has more meaning. Okay, many want to make this a strong word. And the same way for emphasize emphasize. Typically, we used to use I to instead of the end, we use I for I stands for italics. And that's how it manifests same way visually. But again, people like to be more semantic these days, meaning they want to add more meaning to what the tag really means, because italics by itself doesn't really means its emphasis or strong, depending on how the design for a website is, you know, you're not always going to see strong as a bold and emphasis as italics. Anybody could change that. So the AM is strong. Let's the computer know, you know, there's going to be a lot of computer like the search engines, they'll be reading your documents and analyzing them. So they will understand, okay, this word is meant to be strong. And that one was emphasized no matter what style it is, whether it's italics or bold. Let's talk about heading tags. Typically in a document, we have a title. It's called heading that indicates as a section or a subsection and so on. Think about a book. There's always, you know, chapter one in big letters, chapter two and so on. So the way we do that is with the heading tag. So what I'm going to do here is break a line and go to the first line. I'm going to say less than, I'm going to call it h1 and then greater than. Notice I already have my closing tag here written for me because this environment is kind of smart. Then I'm going to type the heading level one here. Now click run. So this is the way it manifests visually. It's really big letters in bold. This is called a heading level one in short h1. And you can use this to like indicate a, okay, this is the top level section of some something. And then you write some tags like we wrote a paragraph and so on. And then if you want to have more levels like nested sub-titers and so on, that's when we use what's called h2, h3 and so on all the way up to h6. So let's try h2. So I'm going to say less than, h2, greater than. And then type this is heading level two. And then don't forget the closing tag less than slash h2, greater than. And then let's add some paragraphs here, some paragraph with this subsection. And then click run. Now we can see we added this heading level two. You can notice visually heading level two by the default style is a literal smaller than level one because it's meant to be a subsection of level one. Think of level one as the top most. And then as you go increase the number, it gets smaller and smaller because you're going to a subsection of a subsection of a subsection and so on. Okay, and then we add some paragraph there. So proceeding this manner, we can try h3, h4, h5 and h6 kind of tedious. I'll just write really fast. So let's write h3. This is heading level three. And then h4, this is heading level four. h5, this is heading level five. Finally, open tag h6, close there. This is heading level six. Click in the top left run. Scroll down here, you can see this is heading level three. It's a little smaller. And then level four, even smaller. Level five, even smaller. Level six, really small. So if you like to organize your document into subsections of a subsection, you can leverage these kind of elements. Mind you, what you're going to see in the web, not everybody's going to follow what the element is meant to be. So keep that in mind, even though these are meant originally to be for this kind of purpose. Some people might use it different ways. So any HTML element can be changed to be whatever people want. Keep that in mind as well. And you can change their style as well, CSS. It doesn't have to be like this, but this is just the default. Okay, let's talk about a little more complex HTML element. And that's for lists. I'm going to delete the whole code because it's going to cramp. So let's talk about lists. So there are different kinds of lists. Have you ever seen a bullet point list? So that's called an unordered list. So to make that in the HTML, you have to open the tag called ul, which stands for unordered list. So less than ul, greater than. And make sure to put the closing tag as well. So between the opening and closing tag, we're going to write list item tags. So this is a kind of new to us because before we had just a simple one element. Now this is a tag within the tag. So we're going to write less than li, greater than. Don't forget the closing. And then we're going to type some text here, first point. And I click run on top left. So this is how it appears visually. So there's a bullet point and there's first point, whatever I typed between the li. Usually when I open this, I like to add indentation one, two spaces to make me visualize. Oh, okay. So this li is inside the ul. This is optional just for programming purposes. We'd like to do that. So we have a ul. And if you want more bullet points, all you have to do is add more li's inside the ul. So we can break a line or not. It's up to you. I can write it here or I can write in a new line. I think it looks better in a new line. So open the li, make sure to close it. And in between the tags, type second point, click top left run, you're going to see there's another bullet point. So you keep going following the same pattern and you can add more and more bullet points. So I can just go here, add another li, third point, run. So it's important that all these li's be within the between the opening and closing tag for the ul. Okay. If you put outside, it's not the proper way to do this. It has to be always inside or within the ul. When I say within, I mean between the opening and closing tags. Okay. When you see an element is inside another between the open and closing tag, or this element is a child of this element. This element, ul being the parent element, while all these li's are the children elements. Okay. That's another notation or way of saying these things. Okay. That's nice. There's also other kind of list. Right. Remember there's one, two, three kind of lists when there's a number one period or one dot two and then three. That's called the ordered list. And to do that's pretty much the same pattern. We have an element covering all the li's. And to change this bullet point list into that kind of list, it's very simple. Instead of ul, you're going to change it to ol. Don't forget to change the closing tag as well. So this is called ordered list. Click the top left run. And there you can see the bullet points turned into one, two, three and so on. If you want to add more, again, just add more li's within the open and closing ol. Let's talk about links or anchors. You've all used websites and usually we click links and they go elsewhere. So that's called an anchor in HTML. Let's delete this list. And let's say I want to go to my favorite website or whatever your favorite website is. So the tag is called the A tag. So less than A, better than. And then make sure you close it. And in between it's what the user is going to see. Let's say go to my favorite website. Let's click run. You're going to see the text go to my favorite website like a paragraph. But obviously I need to tell it where I want to go when I click. Right now it's not going anywhere. I cannot click it. So we have to introduce it to a new concept called attributes. So every element, they can get more information out of you via attributes. To add an attribute to an element, go to the opening tag. And then to the right hand side of the name of the element, add a space. And then you can start writing attributes separated by space. Usually attributes always go this way. You have the property name or attribute name equals sign, followed by double quotes. And within the double quotes, that's the value. So in this case, I want to use the attribute called href. And then the value I have to always say for the syntax of HTML equals sign, double quotes, double quotes. And within the double quotes, I have to say the value for this property. The value here has to be the URL or the link of where you want to go to. Typically that's what you see in the address bar in the browser. For example, this one is that. So let's say I want to go to Yahoo. So I can say HTTP here. s colon slash slash yahoo.com. You can use whatever website you want. I'm going to click run. Now you can see visually the text became highlighted in this kind of blueish color with the underline or underscore. So if I click that, you can see on the top left, I know it's so small. It says yahoo.com. So if I click that, it's going to go to yahoo.com. Now if I do that, I'm going to lose this page. So I don't want to do that. So I'm going to hold control in my keyboard and I'm going to click so that it goes to a new tab here. So you can see yahoo is now open there. All right. So I'm going to close that. So that's how you make anchor tags or, luckily, known as links. So you can pretty much write an anchor tag anywhere. It can be inside that list that we wrote. It can be inside a paragraph, wherever you want. You might notice when you go to websites, typically when you click a link, it either stays in the same window or tab in the browser or it opens a new one. Now I've just forced it to open a new one because I hold control in my browser. But you can actually change the default behavior of an anchor tag to always go to a new window or tab, no matter if I have the keyboard control key pressed or not. And that's with another attribute called the target. So you can go to the anchor tag. Let's add another attribute. Now always go to the opening tag, add some space after the name. Now you can either, because there's already the href here, I can either type the new attribute here to the left or to the right. But always separate of the space. Let me write it to the right. So I'm going to go to the right out of space. The attribute is target equals double quotes, double quotes. Within the double quotes, I'm going to say underscore blank. When I say underscore blank, I'm saying whenever the user clicks this, I want this to go to kind of like a blank page, you know, like a new tab or a new window. Let's click run. Now I'm going to click that and I'm not going to hold control. Here are my hands, no control. See it open a new tab? That's the point of that. All right, let's talk about images. The other link there will teach you how to do images. You see images everywhere, pretty much every website today. So the image element is called IMG. So we say less than IMG, greater than. Now this one is a special kind of element because it's self-closing, meaning we don't need to write a closing tag. So you can just write it like this. Now the image needs to know, okay, what is the image you're trying to show? So we need a source. Now that's the attribute. So add the attribute SRC equals sign, double quotes, double quotes. Now you've got to paste the URL here, right? Just like we did for anchor-tagged ref, it needs the image URL or link. Well, you can find one if you do a search in your search engine and you click images, find any picture you want or whatever you want. I'm going to choose this one. I'm going to click view image and I can copy from the address bar that URL. Now I'm going back here. Now I'm going to paste that here into the value for the SRC or source attribute. I'm going to click run now. You can see the image is now here, although very big. Now we added an image, but it's too big. Nobody is going to find this website very usable, right? So typically when you add images, you want to make sure to set the width and the height. So we can do that either using an HTML attribute or using CSS. For the purpose of this class, we'll do with an HTML attribute. So the image element can have an attribute for the width. So let's add an attribute here called width, equals sign, double quotes, double quotes. Now the width is usually pixels, px for short. That's the unit we typically use with computers. Let's try 100, see what we get. Now that's 100 pixels width. Now you see the height also changed. That's because by default, if you only specify the width, it will try to also change the height and keeping the same aspect ratio between width and height. If you really want to change the height, you can add height here. For example, 20, that's really small. Click run. You can see the height is now forced to be 20, and that's breaking the aspect ratio. Now the image kind of stretched, or it doesn't look very great. So you can either omit the width or the height if you want to let it automatically find out what the other dimension should be to maintain the aspect ratio. Now that's too small. I'm going to use 200. Maybe that's better. Now let's say for some reason this image becomes broken, meaning either whatever the image was coming from is no longer there, or I somehow wrote the wrong source. Let's deliberately write the wrong source, adding a 2 here. Now I can see nothing appears. That's like a broken image icon. So typically every time we do image today, we want to add an alt attribute to describe what the image is. For example, Dalmatian dog. I think that was what it was. So if I have an alt attribute, whenever the image is broken, I will see the text Dalmatian dog. Oh, that way I know, oh, this image was meant to be about a Dalmatian dog. So always add the alt to describe the image. This is also important for screen reader technologies, accessibility. For example, somebody who is using the internet or accessing a website, but they cannot see very well or they're blind. They typically rely on a screen reader that reads the contents of the website for them. So when they hit this image, they obviously cannot see, but they can hear the description of the image if you add the alt attribute. So they would hear Dalmatian dog and they would understand, okay, this was meant to be an image of a Dalmatian dog. So it's important today to always add an alt attribute to describe the image. Okay, I'm going to revert my SRC and remove the two to make it appear again. So I could go on and on about different kind of elements in HTML, like we have an element for video, we have an element for audio, and so on. I'll let you find out by yourself. You can always look it up, HTML, video, HTML audio in your search engine. And it's very simple. It's always the same pattern. We have tags and we have attributes. Now, for the purpose of sake of time, I'm going to talk about forms now, because they're very important in the web today. We usually fill a lot of forms, you know, so let's talk about them. So the first one I'm going to talk about is the text field, like single line. You know, when you type an email, type a password, or whatever information that fits into a single line in the text field. So usually we use what's called the input element. So less than input, greater than. Now input element is also self-closing, meaning we don't need to have a closing tag. When I say input like that, I'm going to see this text box. If I click on it, that means I focus on the text box. I can type text. Okay, now there's different kind of inputs. So input can get an attribute so we can specify, hey, what kind of input is this? So add a space here. The attributes called type and equal sign, double quotes, double quotes. The very basic one is text, the one that we just did. It's pretty much just for text. Now another one that you might have seen is for password. Remember when we type password, we cannot see. It's just bullet points or any other hidden character. So that's the type password. When I do that and click run, if I type, I only see bullet points. I don't see the actual thing. Obviously I can click this thing now that they have to show it or not. So pretty much you can control what kind of input you're going to see with the type attribute here. I think there's even date now. Let's try typing date there. You can see now it turned into a kind of calendar thing that can either type the month, day, and year, or I can click this calendar and pick and it autocompletes there for me. So this is very versatile and adaptable element that is controlled by the type attribute. There's yet another one called button. You have seen buttons, right? If you say type button there, now you're going to see a button. There's nothing there because we need to add a label. To do that, we can use the value attribute, like so. And you can see now click me there. So as I was saying, you can control the type of this input and I just did the button one and it needs the actual label inside so you can click. And that's with the value attribute and you can write the text here that appears inside the button. So very versatile, very important when you're making forms. Now let's do a challenge. Let's write a form for login. Typically you have email and password. So how would we go about that? First we need an input for the email. So we would write less than input type. Now it can be text, but actually there's also an input specialized for email, so you can type email there. So if I do that, I can see this and if I try to write something that's not an email, it will validate for me. Now this is nice, but I don't understand as a user what I'm being asked to fill out, right? I know it's an email because I'm writing and building it. But for somebody who's using this for the first time, they have no idea what this is. That's why we need to add labels to every form control. So there's an actual element for that. So we can add less than label, greater than, and then closing tag, and then in between you can add a label. In this case email. And I click run, I can now see email there. Okay. Now there's a nice way to associate this label with this input. When I click the word email, I should focus this input like this. So that's with the four attributes in the label. Now you need to give it an ID. So it has to be the ID of the element you want to associate this label with. In this case, it's the email here. Now this email input, we can add an ID attribute. Let's say form dash email. And then this same value has to be with the four for the label. That way we bind this label to this input. When I click run and I click the word email, it focuses that for me. Okay. Now we can do the same if we want to add a password. Let's add it here. Label. And I'm going to say password. And then I'm going to add another thing, input, or the password. Now if we do it this way, I see it there. And then I can say for, let's say form dash password. This is the ID of the element I want to associate the label with. So I have to add an ID to the password input element with the same value. And if I click the password, it focuses that for me. Okay. And you might have noticed, oh, this is ugly because it's all, I kind of want the password in its own line. Now there are ways to do that with CSS to change the visuals, but we can also do HTML. So usually when we have form controls, we group them one by one inside another tag. In this case, we could group them in what's in a generic tag called the div. If I do div like this, and then I'm going to close the label and the input within the opening and closing. That way I'm grouping these two. Okay, I want this to be a form control group. And then I can do the same for the other. And I place the password and the input. Now the benefit of this, you can see they now move to their own line. And that's because the div element, it occupies the whole row and doesn't let things appear side by side by default. So once you enclose these two in a div, each of them, right, it's going to take their own line instead of staying side by side. Typically when I open a tag, I visually like to add spaces to the left called indentation, usually two spaces, to make it better for me to visualize to understand, okay, this label's input is within the div, meaning between the opening and closing tags. Okay, and then the button here, we should add something like login or whatever. And it'll be like that. Now something I forget to tell you is when we have a form, form controls, everything must be within a form element because we want to control the submission. When you click submit, it should do some operation somewhere. So we must make sure to always add a form element and enclose all the controls within the opening and closing tag, okay? That way it's more proper and the form element itself, we can add attributes to control how this is going to be submitted. And for the button here, there's a special kind of type called the submit, and that's meant for the form as a whole. You can submit all of this. Now if I do that, I'm going to see that. Visually it doesn't change, right? But it's a way for us to control what's going on behind the scenes when we submit the form. So now this input being type submit is tied to the form as a whole. We guys still got some time. I want to give you some bonus and that's... Okay, so far these inputs are single line, but you typically have also seen inputs where you type multiple lines, right? Like a description of something, or you're writing some long text, multiple paragraphs within. So that's called a text area. It's different from the input. So it's a very unintuitive, you know, because you would think, oh, let's just do an input type text area. Actually, there isn't. You have to write text area element. So let's go here and add a text area. Now the text area has opening and closing, so you have to write it like this, and you click run, you're going to see it there. You see kind of multiple lines. I can break line and write things, I can scroll within it. That's called a text area. I can even expand it. Okay, that's the very bare bones. Now you can do the same as I did for inputs. You can add a label and tie to this. That's fine as well. Add a label, or form. I don't know what to say here. It's not usually usual to have a text area when you log in, but just make believers. I'm going to add a reason for logging. It's weird, but okay. Reason, and then you can add an ID to the text area. Form reason. Click run, click reason, it focuses the text area. Click reason, focus the text area. So they're tied together. You might have noticed the login is there. We can also add a div in closing the two. So it pushes the login to a new line. There you go. So you might have also seen when you type into inputs, that they provide kind of examples like a placeholder. And when you type, start typing, it goes away. That's called a placeholder. So let me show you how it works. So you go to whatever input you want to add a placeholder for. You add the attribute called placeholder. And then you can type whatever value. Let's say A and mail.com as an example. Example and mail.com. So these are meant to be tips or hints for the user to fill out the form. Like if you're unsure of this means of what examples should I write here. So click there, you can see now there's in gray letters. Example and mail.com, that's actually not what's typed. When I click there, it goes away. I'm going to start typing. So that's just meant to be a hint of what should go in there. And you can do the same for the others. Let's do for the text area. Placeholder. Describe the reason for login. Quick run, you can see now describe the reason for login. When I click there, start typing, it goes away. And it comes back if you make it empty again. That's the placeholder attribute for form controls. In this case, input or text area. Okay, I think that's it. Anybody have any questions? Before you do that, I just want to point out some people have asked how to connect with me. This is my link tree. If you go to that link tree and BK tech world, find all my links here, social media, whatever. You just go by the handle of the BK tech world. I have a course. When you're with me, if you like this session, consider donating. I appreciate that. And I open for questions if you have. Chad asked, do you have any recommended resources for continuing education? Well, you got the internet, so you can pretty much use the search engine to find whatever you want. You can, for example, HTML, right? You can type there HTML tutorial. Something like that. And then you can find some text resources. You can also go on YouTube and type HTML tutorial and it will get video based resources. So it's pretty much every art today. I can leverage this group as well, whatever. If you would like paid content, you can also do that. For example, udemy.com, Skillshare, all these websites. You can pay a subscription or buy courses. You can also get other people to help you out like me if you want to work with me. You can also set something up. Any more questions? If not, I'll be wrapping this up. Thank you so much for participating.