In this video, I want to give you an introduction to HTML and show you how you can view the page using HTML and how you can tag elements to let the system know what type of elements are present in your page. So, if you want to create a HTML page, the first thing that you're going to need to create the actual HTML tag. So, everything in your page is going to be inside those two tags. So, we have HTML and we have a closing tag. And then usually, we're going to have two main sections. The first section is the head. They contain informations that are not visible in your page when they are accessing it, but contain information that a robot or a system can read in order to better understand your page or show some hint to the user. So, for example, here, what I can do is add a title and then say that's my website. So in this case, this word <title> Site </title> is going to show up here on the top of your page and even though it's not usually very visible to the user. If they save as a favorite or if they download something, the system is going to use this name as well to try to guide the user which page they were saving. So, if I want to show something on the main part of my page, this is called the body and then I have to create my tag <body>. So, everything that I put inside my tag <body>, is going to be shown here. So, for example, if I want to add a title I can say, for example, <h1> Welcome </h1>. And then I'm going to get the title on the top with the word welcome. So, everything that I add, is going to be here and the order that I add, is the same order that things are going to be shown. So, for example, if I want to add a paragraph, I can say, for example, <p> Please enter info </p> So, now I get a paragraph from the bottom and the order is the same order that they appear in my html. If I want to add an image, for example, I can also use a tag for that. And what we can do is <img>, that is the tag for an image, but now, I have to provide an attribute that is the name of the image that I'm loading. So, in this case, we're going to do <img src="logo.png"/> and I have an image logo.png, that is my image that I want to show. So, this image could be in any place in the internet, given that is accessible. It can be a full URL, http everything or in my case, since my field, my file, with this image is in the same server, in the same place that my page is, I don't need to provide anything. I just provide the name of the file and the system is going to download the file and show the image to the user. But as I said, the order that I add things is the order they are shown on the page. So, if I want my image to show first, I can just move this tag above <h1>Welcome</h1> and now I have the image first and then I have my text. Another important thing is, how can we capture user information? So you also can use HTML to tell the system that something should be an input where the user can provide information. So, for example, if I want the name of the user, I can write Name: <input /> and then I can provide an input where the user can type his or her name. So, for example, here now when I save I get name and I get an input where the user can enter and type in the name. But what about if I want some other information like date of birth, for example? So, I can add a new one but you're going to see that as you add new elements, your HMTL may become complex and also hard to manage. So, one thing that you can do is group things that goes together. So, for example, name and my input goes together. So, I can add a <div>Name: <input /></div> around them in order to conveying this information that those two are the same thing. So, this doesn't really have any practical effect right now, but when I add a new group, the system is going to note, is going to use a new line. Because a <div> causes a new line. And then I can add date of birth, <div>DoB: <input type="date" /></div> and then I can say that I need an input. And now I can say the type of this input is date. So, now we're going to see that instead of showing just an input, some browsers is going to show a different information. Like here, is telling the user that is expected this kind of format of data. And when I try to edit it, the system may even show me a calendar that I can use to choose which date I want and then it's going to fill the date back to my input. So, this is a way to facilitate and if your page is being accessed via mobile device, for example, even the keyboard on the mobile is going to adapt as well to whatever information it's expecting the user to provide. Also, you have the information. One thing that may want you to do is to save. And you can add buttons by just using the tag <button>Save</button>. So, then I would have a button where the user could just click and the information will be saved. But sometimes you want the user to not click and do some action, but maybe click and go to another page or go to another part of your website. And that's why we have links. So, in order to create a link, you can just use the tag <a></a>, and the tag represents a link. You can say, for example, <a href="http://nyu.edu" >Learn more </a> and you can provide a URL here by using href. So, now we have a link that the user can click, and when the user click, it going to be redirected to a new page. And it's going to follow all the standard styles that we have in browsers. So, for example, here we are getting it either blue or violet. Depends if you have visit or not the website. And how they order elements as well follow the default style that the browser provides. But that doesn't mean that you have to keep those style or that you have to use those elements in order to get this style. The way your page look, is responsibility of CSS. HTML tells what your page is, what each element of your page is supposed to do or is supposed to represent. That facilitates other system to understand your page, index searchers to index your page so your page is easily searchable when people are looking for it. So, it's important to build your HTML with the goal of telling what things is, and then later we can use CSS to say how are things are going to look.
