Sectioning Your HTML Document

At this point we are ready to begin laying the groundwork for our new web site. The first step in the physical creation of the site, is to create blocks of code that we can reference externally via style sheets. To create these blocks we surround the content with a <div> tag

Example:

While this gives us a way to create code blocks, there is still no way to address a specific block unless we give it a name. To give a <div> tag a name, also known as an ID, we would write is like this.

Code blocks can also be nested inside one another which provides additional flexiblity and control when styling our document.

Code Blocks for Your Website

  1. Open Dreameaver and create a new html document with the document type set to XHTML 1.0 Transitional
  2. Change View to Code View at the top of the document window.
  3. In between the <body></body> tags enter the following code:

To get an idea of what this looks like visually see below.
Document Outline

  1. Save the document as index.html in the root of your website (inside the Personal Webpage folder)