I don't think this article needs much,of an introduction HTML is of course the,language used on the internet mainly for,the structure and content of websites,just to demonstrate how easily you can,create an HTML document hopefully by the,end of this tutorial you'll have a good,understanding of the structure of HTML,you'll not be an expert but you should,have good knowledge of essentially how,HTML works which you can then build on,and progress from there so we've got a,blank document here in notepad HTML is,
made up of tags now tag is how HTML,defines different areas and sections of,the document and the Tau a web browser,would read and interpret the code,essentially so the first tag you need in,HTML is simply the HTML tag,now most tags in HTML need opening and,closing so see up here we've got the,opening HTML tag simply the word HTML in,between these symbols and then down here,we've got the closing HTML tag which is,nearly the same of course with a forward,slash put in there and that's defined a,closing tag so everything in this,particular HTML file will now go in,between these tags so I'm gonna use tab,to indent the tags within it and it's,good practice and makes HTML much easier,to read so within the HTML tags we have,two sections we have the head section so,we have an opening and closing head tag,and then the body which sorry needs an,opening and closing body tag so this is,simply the the basis and the basic,structure of an HTML file so I'm just,going to go through some vital tags and,some really basic ones that you need to,know to start building websites in HTML,so in the head section this is where,like information about the page would go,in the body section this is where the,actual content which is displayed to the,user would go so we'll start on the head,section all we really need up here for,now is the title tag now this is the,text displayed in a web browser title,bar I'm going to stick in there hello,world for example so if we were to save,this now you must remember to save it as,an HTML file you can just change in,notepad to save as type to all files and,then type dot HTML and simply as the the,file extension so if we were to save,that and then open it in a web browser,we would get a blank page but it would,it should say hello world in the title,bar okay so we've got a blank page but,it says hello world up here in the title,bar so now we want to add some content,to the page so usually the first thing,you would want is a title HTML has some,handy heading tags we've got h1 which,would create the biggest heading a,heading in terms of style simply,increases the font size and makes it,bold so that would be opened and closed,just the same as the other tags we've,used so far,then after h1 you have h2 h3 h4 h5 and,h6 which get smaller each time so h6,will be the smallest heading you could,have so h1 will be the main heading then,
you'd use h2 as a subheading for exam,so we're just we're just going to use,one for now on stick hello world in,there,and I keep switching to Internet,Explorer so you can see the progress,we're making so now we have a heading,hello world obviously that's what we'll,just create that so after the heading,you'd want some text potentially and,maybe a paragraph of text I would use,the P tag P of course for paragraph this,is also open and then closed with the,text inside so we could do that and if,we save it refresh the page we get a,paragraph of text underneath and because,we're using the correct tags the heading,tag in the paragraph tag and the h1 and,the P the web browser and HTML,automatically sets the line spacing that,indents everything as we would expect to,see it if you wanted another paragraph,it would be a simple case of adding more,P tags and then if I'll just do that,you'll see there's another paragraph,there again with with the line spacing,automatically added for us so you're,building an HTML web based website you,may want an image so we're going to,create an image again I I'm doing all of,this from scratch so you can hopefully,help you understand exactly how it works,so I'll just create a new image let's,call it image dot BMP,of course it's just an empty file at the,moment so we're going to just create an,image it of course it doesn't really,matter what in it because it's the HTML,we're working with here so we've got an,image we're now going to look at the tag,we need to put the image into the web,page so this uses the IMG tag but of,course an IMG tag alone wouldn't get us,much of an image the way this one works,is we set properties within the tag,itself so we set the path to the image,file we use SRC for this method equals,and open and close quote and within the,course we put the path so I can just use,a relative path I'm not going to go too,much into how relative and absolute path,to work but essentially relative path I,can simply type image dot BMP and since,it's in the same folder as this HTML,file it will work,I could of course go through the full,thing by typing like C colon backslash,Documents or whatever it is in your,version windows etc but there's no need,since they're in the same folder if it,was in kind of an image folder it will,be images slash images dot BMP it was in,a folder one level up you use dot dot,slash to go up a level this is when,using relative file paths which is,usually much easier so also in the image,tag you can set things like width you,would do it in the same way you could do,it in pixels ended in percent if you,don't put those properties in then it,just displays the original size of the,image so the image tag doesn't actually,have a closing tag because if you think,about it we've we define everything,about the image within the tag itself so,that if we open and close the tag though,there's nothing to go inside so what we,do we can't just leave it like that,so we,
it's a self-closing tag we just put a,forward slash at the end of the tag,before like essentially closing the,opening tag and that makes it open and,close all at once so if we save that and,go back to our webpage we can see that,lovely image I just created in paint so,it's as simple as that to add an image,to a web page using the IMG tag so I'm,going to quickly go over a couple more,tags that you would use on a regular,basis if for example we had another,sentence in this paragraph this is my,first webpage I hope you like it just so,you can see what that looks like as,you'd expect this is my first webpage I,hope you like it but what if we wanted,that second sentence on the next line,yes we could use another paragraph tag,and put it in a new paragraph but that's,not just the next line that's a couple,of lines down if you want to do that we,use the break tag for just a line break,and that's simply BR now again there's,nothing that could go inside of a break,so this is another self closing tag now,you could just do it like that,that would work in HTML but that's,probably a better way to do it so if we,save that and have a look at the results,you can see it just goes on to the next,line without leaving any spaces so the,final tag I'm going to show you in this,tutorial probably not one you'd use,loads the HR tag now this creates a,horizontal line across the page so again,there's nothing that could go inside a,horizontal line so it's self closes it's,as simple as that it'll sort out the,spacing for us,hopefully and we see we get a gray line,across so you could use that to separate,different sections or a webpage so we,created a basic HTML page just a recap,we've got the HTML tags which everything,else goes in and then inside the HTML,tag we've got the head on the body tags,inside the head tag we put the title tag,which is what displays in the title bar,of a web browser and inside the body tag,we have the heading the paragraph the,horizontal line in this case another,paragraph and an image another fantastic,web page but that is the basic structure,of HTML this is the kind of thing you,need to know to start building advanced,websites so hopefully you now understand,how tags work you open them and close,them various tags self closed off don't,need to be closed because they have no,end tag of course this web page is not,on the internet it's just on my hard,drive or in your case on your hard drive,
Congratulations @masoodanwar! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPTo support your work, I also upvoted your post!
Do not miss the last post from @steemitboard:
Vote for @Steemitboard as a witness to get one more award and increased upvotes!