3.1: Basic HTML Layout

3.a-1 Basic HTML Layout

• HTML or "Hyper Mark Up Language" is the plateau that spawns all web development. No matter what language you start from or use if it ends up on the web you will be using HTML.

Figure 3.1.1

• Simply by taking a text file from notepad or textedit and changing the extension from txt to html you suddenly have made a web page that could for all intensive purposes could go live. All though it is not pretty it is all you need to start ruffing it on the WWW.

• So now you have seen the barebones lets throw the rest of the data in to get started:

Figure 3.1.2

• A basic HTML page can be broken in to 5 different tags

  • !doctype - the doctype tag is just telling the browser you are using the page type.

  • HTML - This begins the page content.

  • head - The head tag is a container for all metadata connected to the page

  • title - what will come up on the top of the web page, basically the name of the web page.

  • body - where all your content will be added

• 
• Figure 3.1.3

• So we do not have to dive too far into metatags and other types of head tag based links we are going to cover body tags and get out of HTML land.

Figure 3.1.4

• Now that you have been good and read all of that interesting information here is how the HTML code in figure 3.1.3 will render…feel free to sing along:

Figure 3.1.5 3.a-3 Organizing with divs, navigation, articles and sections.

• To finish up our trip through the magical land of HTML we are going to discuss divs, articles and sections. Sadly there is not too much pretty stuff that we can do with these tags without CSS but we are going to show you through code then we can show more in the CSS Section.

• All of these fantastic new tags lead in to one topic called sectioning.

  • div - A div tag is derived from the word division meaning just that. div's are used to divide or separate content in a html page.

Figure 3.1.6

Figure 3.1.7

• With these three tags you can organize content with direct tags instead of having to create custom div tags on all or your websites.

• Now lets take a look of a culmination of what we have learned.

Figure 3.1.8

Figure 3.1.9