Explanation of a Basic Web Page by OF6eor4


									Explanation of a Basic Web Page
                                                                                    September 17, 2012

A web page is ultimately what is rendered in a web browser. It is the purpose of this document to
explain in a general way how a web page is structured and how the different elements work together to
render a web page.

Using Dreamweaver
Dreamweaver does a fantastic job of managing the markup language. In using Dreamweaver we will
very seldom get into the Code View, however there will be opportunities for us to insert and edit Tag
Attributes. It is important to feel somewhat comfortable working with the markup language directly.

The example web page used in this document is extremely basic. The purpose is to make it easier to see
distinguish the individual elements of the page. Your actually web pages will be far more complex;
however all of these principles are applicable to pages of any complexity.

What is HTML and XHTML?
HyperText Markup Language (HTML) and eXtensible HyperText Markup Language (XHTML) are the
methods by which web pages are laid-out and formatted. XHTML is a markup language not a
programming language. XHTML is the current web page standard. Over the next several years, HTML 5
will slowly replace both HTML and XHTML. Both standards are used in standard (static) web pages with
file name extensions of .htm and .html. The initial page declaration tells the web browser exactly what
type of language the page will use.

                                              Page 1 of 6
Explanation of a Basic Web Page
                                                                                   September 17, 2012

You can expose the markup language of a page by selecting View, Source in Internet Explorer. There are
similar commands in other web browsers.

If you are using Dreamweaver, you can click on the Code View or Split View options when you are
actively editing a page.

                                              Page 2 of 6
Explanation of a Basic Web Page
                                                                                    September 17, 2012

Web Page Structure
Web pages are broken into two parts: the Head and the Body. The Head is the part of the document that
is not “seen.” In the following example, a Dreamweaver “Split View” is selected so that we can see both
the markup language and the rendered page. Notice that the elements of the Head do not render into
the visible part of the page in the right window pane.

Page Title
The Title tag is found in the Head of the document and is probably the most notable element of the
Head. The Title tag renders the page name in the “Title Bar” in the web browser and is possible one of
the most important elements with regard to Search Engine Optimization (SEO). Each page on your web
site should have a distinct Title.

                                              Page 3 of 6
Explanation of a Basic Web Page
                                                                                  September 17, 2012

The Body is the part of the markup language that renders the web page.

What is a Tag?
A tag is a basic element of an HTML or XHTML document or page. Each tag can have attributes. Tags can
contain content such text, images or embedded objects, such as Flash or Java applications. In XHTML,
tags are always written in lowercase.

                                             Page 4 of 6
Explanation of a Basic Web Page
                                                                                        September 17, 2012

Tags begin with a less-than sign (<) and ends with a greater-than sign (>). The Head tag is an example of
a basic tag. Note that the Head tag has an opening tag <head> and a closing tag </head>. The
information between the opening and closing tag are part of the Head element.

 Some tags consist of a single entry such as the Break tag <br />. When this is the case, there is an
opening tag and no closing tag. The Break tag has the effect of moving the following elements to the
next line. Dreamweaver can display the Break tag as a “shield” with a “BR” in it to let you know that
there is an essentially “invisible” element in the page at that point. The shield is not displayed in the web
browser. Note that the Break tag is written as <br> in HTML.

Tag Attributes
Tags can “Attributes” and Attributes can have values. In the case of the Paragraph tag <p> there is a
“class” attribute with a value of “RedText.” “RedText” refers to a rule in a Cascading Style Sheet (CSS)
that renders the text red. Note that although the tag itself is written in all lowercase letters, the
Attribute Value can be of mixed case. Tag Attribute Values should always be enclosed in double
quotations (""). As an aside, it needs to be noted that the quotations used in tags are not the “Smart
Quotes” rendered in this word processed documents, but rather they are “Straight Quotes.”

                                                Page 5 of 6
Explanation of a Basic Web Page
                                                                                     September 17, 2012

In this example, the red text rendered by the CSS rule is limited to the text in the paragraph as bounded
by the opening and closing Paragraph tags <p></p>. Text in subsequent paragraphs would revert to the
default color, black.

Though web pages can become very complex and represent literally thousands of lines of markup
language, the basic structure is the same for all. All pages have Head and Body sections that are
comprised of tags. These tags may or may not have attributes and the attributes may or may not have
values. These are important concepts for the web designer and developer to understand.

Creative Commons
                      This document was created by Scott Nelson for the purpose of assisting students
                      of the Santa Barbara City College, Multimedia Arts and Technologies, Web Design
                      I, (MAT153) class.

This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0
Unported License. You are free to copy, distribute and transmit this work and to adapt this work. You
must attribute the work to Scott Nelson, Scott@WebDesignSB.com (but not in any way that suggests
that I endorse you or your use of the work). You may not use this work for commercial purposes. This
license verbiage is attributable to Creative Commons (http://www.CreativeCommons.org/).

Registered Trademarks found in this document and are the sole property of their respective legal

                                               Page 6 of 6

To top