Summary of HTML Basics

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 of 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, jsphoto.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. So 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 p. 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 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 then sign. Okay, is that easy enough? Everybody got that? 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 or 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. And then you can click around at the top left. You can see we now see another paragraph appearing in a new line. Okay, 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.