HTML Structure
Creating Your HTML Page Your html will be written in a file with the extension .html E.g. “home.html” You will open this file in a text editor like “notepad” in order to edit it’s contents You will view the complete version of your page on a web browser.
Doctype In an html file, the first line you write is the doctype The doctype is instructions to the browser on which version of html your code is written in. It looks like: <!DOCTYPE html> Your HTML tags will come after this line
HTML Tags You need to tell your web browser how to understand your document. E.g. Where a paragraph should start and end, or where to put a link, and where to link to. Tags are instructions to the web browser. Telling it how to interpret your document
<html> tags You need to tell your browser where your html code starts and finishes. The browser will interpret everything inside the html tags as html code <html> will be the first line in your file html code starts (Opening Tag) html code ends (Closing Tag)
<TAGNAME> Opening Tags The tag begins with an opening carrot Then you see the tag name, e.g. html And it ends with a closing carrot <TAGNAME>
</TAGNAME> Closing Tags The tag begins with an opening carrot Then you see the tag name, e.g. html Followed by a Slash And it ends with a closing carrot </TAGNAME>
Page Structure Below we have our basic page structure Inside our html tags we have a set of head tags, and body tags
Containers I like to think of this in terms of containers. Notice we indent each container! html Container head Container body Container
The head Tag Meta data
The head tag The head tag contains data that effects the page without actually being shown on the page, an example of this is the title tag. Add a title tag as illustrated below
Viewing the Title Notice that the title isn’t part of the document area. This is why it’s contained in the head tag Title Document
The Body Tag Creating the document
Adding Content to the body When we add content to the body tag it will appear in the document