Well our HTML file does include HTML tags but it’s still not proper or not properly set up yet because most HTML documents have some set up tags that we use to establish the page for the browser. So, what I would like to do is, take our page that we are working on and let’s add those setup tags.
The entire page should be enclosed in HTML tag so, let me add space at the top and I’ll go up there and add my HTML tag and like all the other tags that we worked so far I need a closing tag for it also which I’m gonna put down at the bottom of my document. We are using </HTML> so the ending tag is formatted just like the paragraph and strong and em tag that we used before.
<html>
my first <strong><em>web page</em></strong>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
</html>
The HTML tag is referred to as the root and it basically contains the entire document itself.
Now we can break up the HTML tag in two big parts in our document. At the top we generally put the head tag. So let me add a line under HTML and now add an open head tag (<head>) and I would go down a line or two and will add a close head tag (</head>). The head tag is used to establish the information about the page for the browser and this is the information that doesn't necessarily appear on the page itself. One very common use of the head tag is to add a tittle for the page. If we look over to the browser we can see that in the tab it just shows the file address which looks ugly. I just go in there and add a title tag, it’s not a bad idea to add the close tag at the starting, and then in between those two tags I can add a normal page title I’ll just add my first web page, lets save that.
<html>
<head>
<title>My First Web Page</title>
</head>
my first <strong><em>web page</em></strong>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
</html>
The other section inside the HTML tag is the body tag, and that goes bellow the head tag. So, let me add a line and I’ll add the start body tag (<body>) there. The body is going to enclose all the visible elements on the page. So, I’m gonna add the end body tag (</body>) down here bellow all the paragraphs and before the HTML tag closes.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
my first <strong><em>web page</em></strong>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
</body>
</html>
We have got the </body> so that it’s formatted just like the other elements.
Now we have divisions for the setup of our page and the content of our page. Now there is really only one more tag that we need to add and that's up there at the top. This one isn't really a tag but it’s the only thing that's going to exist outside of the HTML root tag that we setup and that is a doctype declaration. This one looks a little bit different, we start off just like a tag but we have an exclamation point at the beginning and then the name doctype which is followed by the declaration of what type of document we have and since we are using HTML5 we can use a simple one which is just HTML. The function of this tag is to tell the browser not only what type of document we are working with i.e. HTML but also what version of HTML we are using to code with and HTML5 has one of the simplest doctype declaration with just the word HTML added to it.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
my first <strong><em>web page</em></strong>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
</body>
</html>
Now we have got a document that looks a lot like a typical webpage. We have got our HTML tag inclosing all the contents of our page, except the doctype. We have got a head tag for setting up our page with a title and we have got a body tag that's establishing all the visible content that we want to include on our page. Now let’s just save it like before and we can go out to our browser and refresh the page to see our changes.
The first thing u will notice that, all the code that we added didn't really change the content on the page but they did change the setup. We can see that our title now appears up there in the tab and as a nice bonus if we had our web page added on the web live and a user wanted to bookmark the page it would use this title as the bookmark text instead of the big address that we saw before
Posts
0 comments:
Post a Comment