Posted on : 23-09-2007 | By : Japh
Ok, so I promised you the basic structure of an HTML page. So here is it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First HTML Page</title> </head> <body> <p>This is the first paragraph on the page.</p> <p>This is the second paragraph on the page, and it's a little bit longer than the first one. Try resizing your window to make it narrower to see the text wrap but maintain the paragraph spacing.</p> </body> </html> |
Now I’ll explain what it all means!
The first line tells the user’s browser some basic information about how to treat the code it finds in the document. It’s HTML, in fact, it says that it’s XHTML 1.0 Transitional. At this point, that won’t mean much to you, and it also won’t really matter to you. Essentially, the internet is currently transitioning from using HTML, to using XML for defining or describing the structure of a web page. So if you’re interested in reading more about XHTML, check out Wikipedia.
The next line is the opening html tag. Everything on your page should be placed within your opening and closing html tags.
Within your html tags, you should have a set of head tags, and a set of body tags. Everything on your page should be within one of these two. Content between the body tags, and various other things that we’ll get to later, between the head tags.
Two things we can see here already in the head tags, are a meta tag, and a title tag. Meta tags have a number of different uses. This particular one is defining the character set to be used on the page (UTF-8 in this case), you can also use them to define keywords for search engines and things like that.
The title tag defines what will appear in the user’s title bar on their browser. For example, on this page if you look up in the title bar of your browser, you’ll see it says “Japheth Thomson”, possibly followed by some arrows and some other text (depending how you got to this article).
For now, you can just copy and paste the code above into a new text file, save it as template.html, and then open it in a browser to see what happens.
You should get a blank white page, with the words “Untitled Document” in your title bar. Once you’ve got that working fine, try having a play with inserting paragraph tags as I talked about in my previous post to see what happens.
As an example, you should end up with something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First HTML Page</title> </head> <body> <p>This is paragraph number on this HTML page.</p> <p>This is the second paragraph. It's a bit longer than the first so that if you resize your window at all, you'll be able to see the text wrapping and maintaining the paragraph spacing above and below it.</p> </body> </html> |
No related posts.
