Introduction to HTML - HTML Elements

Danial Pervaiz
A free video tutorial from Danial Pervaiz
Instructor at Udemy & YouTube
4.0 instructor rating • 7 courses • 18,544 students

Learn more from the full course

HTML and CSS for Beginners - Web Design & Development

Html and CSS for beginners - Learn the power of creating your own website within 1 week!! Enroll now to Learn

04:09:55 of on-demand video • Updated August 2017

  • you will be able to make websites
  • you will be able to work with html and css
  • you will be able to work with javascript
  • you will be able to create responsive web designs
  • you will be a pro front- end web developer
  • you will be hire-able as a front end web developer
English [Auto] What is up guys this is your boy Daniel and welcome to another lesson of age to him all and he has us for beginners. And in this video we are going to cover our age. OK it's pretty simple easy. It's going to be a little bit complicated in the beginning but it's not complicated. OK. Trust me on this. All right guys so Himmelstein read HyperText Markup Language And if you go on to Google and search for Timo W3 schools you will be able to see this first link. Click on this link and you will see a bunch of different examples for HMO. OK. So now is Chimo is everybody is using a Steimle 5 and I'll teach you everything OK. But the syntax is a little bit different with the basic HMO. The structure is a little bit different and HVM all fine but don't get confused. So hypertext markup language is language of a browser that you that your browser read. OK. So as you can see right here this is a Web site. OK. You can see a bunch of different Web sites on the Internet and every Web site and this wall are created with HDMI out. OK let me show you the source code of this website. OK let me show you the code running behind this website. OK. So what I'm going to do. Look at control. You control you when you will hit that you will be able to see the page code. OK as you can see right here this is a bunch of different lines. OK so this page has like 1000 and 10 lines of code. This on the page as you can see right here this is a pretty small page but it has a thousand lines. OK but don't get confused OK. It's pretty simple and most of the fields are repeated repetitive and you know everything is repeating again and again OK so not why you bother. So Hypertext Markup Language your browser reads the code and can work that into a interface. OK. And it showed that interface to the user. So this is an interface. Ok we are watching this interface if you will watch this code right here. We will get confused and you know nothing is understandable. Nothing this you know looks clean nothing is looking beautiful. You know it's all messed up. OK. So the browser do all the hard work and it will show you lay out OK. So it reads all the code OK. And show show you how this lay out OK. So it's a combination of HMO and CSSA and all covert. SS in the upcoming wheels basically you design your website with. Yes. OK pretty simple but I'll stick with HMO and see OK. So we are going to start coding our team all in just a moment into our text editor. But let me just give you an example. OK. So the basic the basic structure is this code snippet right here OK. So you use less than and greater than sign in each code. OK. So as you can see we're here this is a team. This is head. I'm sure that you are not clear with these things but I'll tell you everything in just a moment. So every code start with less than and greater than signs OK. These are call the HMO elements. OK. So as you can see you are here this is a tumult Hagel case. This is the opening tag. And as you can see right here as if you come down you will see the closing tag. OK and everything comes inside of this age html tag OK. So if you make a tag you will make two tags actually. And it's going to call a human element. And once you open this tag you will close this time. OK. So when you open this tag you will type less than and greater than and the name of the tag which I will tell you. And when you will close that tag you will type less than forward slash. The name of the tag and greater than sign. OK and I'll teach you everything in the Sublime Text Editor and you actually made the children at that age Chimo and the subcellar on and the grandparents and I'll tell you everything ok. Don't worry about that. So out guys as you can see we're here. This is just a basic structure and I'll tell you everything in my Sublime Text editors so just go ahead and open your text editor and go on to your desk top real quick and what I'm going to do here is I'm going to go ahead and create a new folder. OK I'll go ahead and create a new folder. Let me just cancel this. I'll go ahead and create a new folder and I'll type the name HMO and see it says for beginners. OK I'll go ahead and drag this folder on the top right corner. You will see this folder right here for the rest of the previous year. OK so I will just click on open my folder I'll go ahead and create a new file. OK. So this is going to be our main page html file that you are going to use for the rest of this video series. And every every project every website that you make has a main basic file that the browser always read OK. So I'll just name it. Index dot each T.M. all OK so we are going to create an HMO file so you know if you are using Chrome as a default browser or Firefox as your default browser it will automatically convert that file into your browser. OK default browser. OK. So if I open it you want to be able to see anything because we didn't do anything yet. OK. So as you can see are here we create our index start extremophile you can name it whatever you want you can name name yourself or put your last name or do anything but make sure you put the extension dot HDMI. OK I'll just go ahead and open this folder. Let me just go ahead and open my sublime. OK I'll just minimize this and I'll drop this folder right on this gray area and you will be able to see our index that HMO file just double click on that. And as you can see right here you can open and close this folder and you can create new files from here. OK. If I click on you I will be able to create new file or rename it to lead folder do everything. OK. Pretty simple. All right guys. So the basic structure. OK the basic structure is create an HMO tag and it tells the browser that we are using ASTM all. OK so we already told the browser that the file is a index that is too small as you can see right here but the browser need more stuff to display the data. OK. So the first thing is going to be make less than time explanation mark and type doc type Tiamat don't get confused about this stuff right here. OK. I'm not going to tell you about this stuff until you reach age Timo 5. Or you can get confused with this. OK. So just go ahead and type this as it is OK it's not going to hurt you. All right. So you will just copy this OK. If in a soft shot description and this tag right here tells the browsers that we are using a team of five OK so everybody recommends using a team of five but you are a beginner you have to learn the basic chased him all and then you can jump into each Timofei. OK. So this is a necessity nowadays for the latest websites. And I have to make sure that you learn the latest stuff from my side. OK. As you can see we're here doctype ASTM all and I go ahead and create a new tag which is ECMO. So this is an opening tag and I'll create a closing time with the forward slash. OK I'll make some space in here. OK. So we create our rep site inside of the stack. OK. So the next thing I'm going to do here is I'm going to go ahead and create another tab which is going to be a hash tag. OK so head tag as you can see you are here. This is a hash tag which contains your stylesheets your title of the website and I'll tell you everything about that. So let's just go ahead and Quader had taught us right. Tag. Go ahead and create an ad tag with the forward slash off and then OK and make some space and then you create a tag try to indent it. OK so indentation you can just highlight the whole tag and hit tab and it will indent it automatically so you know indentation makes your code readable OK. So I'll covered the topic of indentation in the upcoming Meteo. So let's just go and continue with it. OK. So the head contains your title of the website and style sheets OK I'll quick my own and open my browser. And as you can see right here if you see this tab. This is called HMO Tauriel K.. And as you can see we're here the files we created is indexed ational. Of course we are creating our Web site so we don't need indexed on age HTML to want to change the title of this tab. So go ahead and create a new tab which is called Title. OK. So in title you will go ahead and create the title of the website of all time. OK. Save this file. Open my browser and refresh my browser. And as you can see we're here now it's changed to welcome to my website. You can whatever whatever you want. OK. So let me tell you about the children and parents nation chip. So the title is The children of red tag and the head tag is the child ran off. Him a lag. OK. So 20:00 is the parent off had tag and the grandparent of title tag. OK so this is called a parent relationship with the children. OK. So the children all of this comes in Titov parents and the grandparents. OK. If you get confused don't worry you will get used to it. All right guys so the next thing is going to be the body tag or because the body tags contain contain all of Europe that you can see right here. This is the body of the browser. The body of your web site. OK so I'll go ahead and create a body tag a body tag and inside of this body tag I will go ahead and just tie my. Go ahead and save open my browser and refresh on page as you can see right here my first website text is coming. OK. So now we are going to work with headings. Now I'll show you what is heading. OK. As you can see we're here. You can see different example off heading. You can see this text right here. You can see these links and I'll just cover that in just a moment. Pretty simple. OK. All right guys so now go ahead and create a heading tag. So for the heading and you use H one h to age 3 4 8 5 and age 6 OK. So these are the different sizes of headings and all stype start with age one tag all type each one. And I'll try adding one. OK I'll just copy this and I'll paste that in right below my Each one tag and I'll just rename it to h to K and let me show you the difference. I'll go ahead and save my file. Hit control S and you will be able to save your file. Refresh my page. And as you can see right here you can see two different headings which is different. Which is in different sizes. If I go back to my text editor I'll create H-3. I'll type the heading three. I'll go ahead and type or type heading for. OK. Type 8 5 6 3 5 and 8 6. This is the last heading that you can use into our HMO. I'll go ahead and refresh my page. And as you can see you can see different sizes or headings and different Sorry different types of hearing and you would be wondering that if you want to make a big big font How can you do that. We can do that with. Yes that's OK. I'll cover that when we will hit the c section. But for now this is just for the testing of wanted to show you the heading sizes. You can use Hedding H1 for bigger heading to 4 smaller and you can just reduce the size of the heading with the tags. OK so the next thing is going to be the paragraph OK paragraph is something as you can see right here. This is a paragraph. This is a paragraph OK. If you go to the key you will be able to see different lines of paragraphs. OK. I'll try. OK. As you can see right here paragraphs paragraphs different paragraphs as you can see where here we have links in the paragraphs up. I'll cover that worry. So the next thing is we are going to Korea is the paragraph I'll go ahead and create a tag with the alphabet of P. OK. Peace dance or paragraph. And you can put dummy daks. OK. So just type Lorem and hit tab button and you'll be able to see dummy text. Ok so this is just for testing purposes and I'll just hit enter and I'll type lower again and hit tab and I will it will create dummy text for me automatically I'll go in and save this file go into my browser refresh my page and as you can see right here we can see a paragraph OK. But we created two paragraphs as you can see here but it's not showing exactly like these. OK so we created some space. So Espinal doesn't read these spaces too if you want to make a space you have to make your self closing tags so self-closing tags are the tags that opens and closes in the same hat. OK so let me show you that. So as for making a brake line or making some space we use B R for break and we will do just for a slash and close the tag. And this is called a self close tag. I'll go ahead and save this file. I'll go and refresh the page. And as you can see we're here now you can see a break between these two paragraphs. OK. So if you want to make more space you can just go ahead and copy this and paste it right below the B Our tag and paste this and refresh the page in and you can see you will be able to see the spaces. OK. All right. So the next thing is going to be the link. Ok so I sure you will keep the example of Donald Trump. I don't know if you support Donald Trump or not. OK. It doesn't matter. OK. So I'm not a fan of Donald Trump. So as you can see right here these are the length of our quick on it will take me to another page. OK. So let's just make some links inside of paragraphs. So let's just make this text a paragraph OK. Oh sorry. OK so if you want to make this link so for creating links we use anchor tag. OK so anchored tag is a tag that contains your links. OK. So at this stage if you get stuck if you get confused ok don't watch this video. You know don't cover this video in just a single attempt. Just you can watch this in different times. You know you can watch ten minutes and five minutes you know after a few hours. Taking some rest and to can zoom this that R.K. or either you can just ride this onto your paper or pencil. OK. You know it's pretty easy it's going to be complicated in the beginning but trust me it's going to be so easy for you once you will be familiar with these tags. OK. So for anchor tag you type a and opening tag and closing cavalcade anger tag. So in this tag we are going to cut this text and pasted in title for anchor tag and to put this as a link OK so we are going to provide this link so it will hold a link for us when we will click on the stack. We will be able to see different link or different page. OK. So to create a link we use attributes ookie attributes is something that you can use inside of your tag to do certain task or gays all cover attributes in the upcoming release in details. So for now to use our link we will use an attribute which is call each reference. OK so a reference is equal to the link. OK. So we will define the link inside of this a reference. This is the attribute of this anchor tag which contains our link. OK. So let's just go ahead and open the door. OK. So just copy this link OK and paste inside of our text editor and save the file OK. Once you will save the file go back to your browser refresh your page. And as you can see right here you can now see a link. And if I click on this link it will take us to Google dot com OK. Output weekly media OK. If outpolled keep me it will take me to Wikipedia or dot are. OK let me just go ahead and do this. I'll get back into my browser closed this opus I'll go back into our Web site. I'll go ahead and refresh this page and click on this and it will take me to Wikipedia. Dot org OK. All right guys so the next thing is going to be the images. OK let's just cover images. OK. So to create an image as you can see right here. This is an image I think this is an image This logo is an image. OK. This is an image. No this is text ok. Don't worry. So you create an image. All of this go ahead and jump into my text editor and create an image which is going to be the image tag an image tag is a self-closing tag as we created. So it starts and then with this within one tag OK so I'll go ahead and create an image tag and close this image out OK. So to give a path to the image. OK so if we have a desired image let's just go out and find an image diagram. Is click on images and you will be able to see different images. So let's just find. Click on this click on view image and just download this image or save image as I'll save that into my desktop for a while and see his or for beginner's I'll go ahead and type. Image is the name of the image is image. OK. I'll close this. I'll close this. I think I accidentally closed my index staatliche HTML file. So as you can see we're here file with my folder this is image. Dot de JPT OK so I'll go into my text editor at all type the name of the image and the extension which is the dot. JP OK so I'll just define the whole AM are I. So now we are going to do here is we are going to use attribute again for this time to give the path of our image just read like we did in our anchor tag. OK. So go ahead and click image and really use the attribute called source source stands for the source of the image OK so where to find the source. Ok so you have to tell the team that this is the path of this Aimee's that I want into my browser and I'll just define the name of the image image dodgy. Make sure this image is inside of your aged HTML and see this book for beginners folder OK. If it's going to be outside of your folder it's not going to work OK. So I'll go ahead and save this file or go back into my browser and refresh my page. And as you can square here this is a beautiful image that we got into our browser. OK. So now we are going to occur on our lists. OK. On order lists are pretty simple. OK. Pretty simple. Let me get the example for you from here. OK. To our right. So this is a team lists as you can see right here. There are two types of list items. The first is the Orderless. If you are familiar with Microsoft Word you will be able to see this bullet points and the order list is comes with the numbers. OK. Again if you are familiar with Microsoft Word. If you are familiar with making your resumes or you know if you did some accounting or data entry you will be familiar with these terms. OK. So this is the bullet points if you want a bullet points you know if you want something with the bullet points into your website you can use an ordered list on our list are used for navigation I'll show you how to do that. And our list is pretty much the numbers. OK. So the example of an auto waste is you create a you O tag OK you close that and for creating each item. So this is for items so you will create for our eyes. So this is a list that in your an order list so this list item will create the bullet points with your tax rates. Let me show you that. OK. I'll go back into my browser and let me. OK. So let me make some space so I'll go ahead and create an Honors list for the bullet points and inside of for an hour or less I will create a list item to make the bullet points. OK. So I'll type First I don't I'll just go ahead and copy this and pasted right below this like three to four times. I'll just say know I don't always mean to write down forward. OK. I'll go ahead and say this and I'll go ahead and open my browser refresh my page. And as you can see right here you will be able to see four different items. OK. So now we are going to create our audit list if you want to go with the numbers just can word this from on our list to orderless. OK I'll type O L for the list and 12 for the Orderless say my file refresh my page. And as you can see right here this is not going to add to the number of a number. All right so the next thing is going to be the attribute look. Let me tell you about the attributes. Pretty simple. So all these HTML elements can have attributes that show you. We created an anchor tag with some attribute which contains your path off the Web site and you use the attribute image with which holds your source of the image. And as you can see right here attributes provide additional information about an element. Attributes are all it's a specified in the Star tag which is right here. We created everything in the Star tag tart tag. If as you can see where this is a cell flows tag. So we just use that inside of this tag. But as you can see we're here we use the attribute in the starting tag so attributes usually come in name or in values as you can see right here we just use this example you know. So this is a basic stuff right here. You can go ahead and take a look as you can see where this is an anchor tag with the link of W3 outcome size attributes. You can use sizes we can cover this and upcoming videos and all kinds of stuff. OK so the basic age HTML is code in there sweetie OK. You know everything about the age team all basic stuff. OK in this video. Now next thing we are going to do we are going to start creating our website which is pretty simple and easy. OK. But before going to further I'm going to go go ahead and give you an introduction Doocey SS which is pretty awesome. And after that we are going to start creating our website. OK. So I'll tell you in the next video by.