Intro to Dreamweaver – part II

There are three basic parts to your HTML document. The first is your DOCTYPE, which is basically just information about what version of HTML your document complies with. Though this fits outside of the actual code and can be left out, it’s often helpful to browsers since it specifies not only the version but where the “rules” for this particular document are located (i.e. where on the W3 website the extra information about this doctype is located – “http://www.w3.org/1999/xhtml” or similar).

Parts of an HTML document

The most important information is contained within the tags. All of the information herein has something to do with how your page looks or what it says.

The Head of the document generally contains most of the instructions for your document. This is where, in this simple layout we are starting with, the Styles we just set are contained, as well additional browser information on how it should display your document. You will also find tags here which we will cover later.

Below the Head you find the Body of your document. This contains all of the actual information that will be displayed (images, type, charts, etc.) Depending on what your document Head contains, the Body section will display its contents in different ways. For example, if the style in the Head specifies that your general type will be Verdana, 12pt, and a maroon color, then all of the unaltered type within the Body section will be Verdana 12pt in maroon.

Style section of HEAD
This is how the type is displayed

Within the Body section there are “tags” that we can use to help control how our text and graphics are displayed. Some of the old school tags were simple abbreviations of the actions. For example to make your type BOLD you would use “B” and “/B” or to create italics “i” and “/i” was used. These have been changed since there are other tags which are similar to these. Consecutively, Bold would use “strong” “/strong” and italics “em” “/em”. These sit within a set of brackets, to distinguish that they are tags.

What tags do
The "p" "/p" tags tell you this is a paragraph. I hit return after the first line to start the second line.

At this point we have a fully functional, if rather bland, webpage. We will add images and start covering the basics of tables in the next Dreamweaver post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s