GCUDV Project: Wilmette Historic Preservation Commission

Home | Introduction to Writing HTML | Using Dreamweaver | FTP | Style Sheets | Advanced

Introduction to Writing HTML this document:

Designing for a Variety of Web Browsers& Displays

Writing HTML Overview
WYSIWYG Authoring Tools
Document Structure
Color
Formatting Text
Specifying Font
Making Links
Adding Images
Mail to Links

Tables Versus Cascading Style Sheets
Tables
CSS

 

Designing for a Variety of Web Browsers & Displays

Writing HTML Overview

Information on the web plays an increasingly larger role in the planning process. You will undoubtedly encounter the opportunity to produce content for a web site and be asked to post it to the site as well.


WYSIWYG Authoring Tools

Web pages are created using a standard text editor such as Word pad or Simple Text. The html markup code is written in a document and saved as a html page for the web browser to interpret and display. This method can become complicated because you must save the file and view the code through a web browser each time you make a change to the document. There are a variety of software packages designed to help people produce web pages by displaying the markup code and the web browser design simultaneously. To see what HTML code looks like for this page, go to View/Source in your web browser. A pop up window with the code to create this page will appear.

WYSIWYG stands for "What You See Is What You Get." This is what a program is called, such as Macromedia® Dreamweaver®, that has been designed to help you produce web pages by laying out the page while the program creates the code for you. It is a web page editor like Microsoft® Word® for writing documents. This seminar will guide you through the steps to create web pages using the WYSIWYG, Macromedia® Dreamweaver®. First, it is important to understand the basic structure of a HTML document and how to produce a web document without an authoring tool.


Document Structure

An HTML document consists of text with embedded tags that provide instructions for the structure, appearance, and function of the contents. The document is divided into the head content and the body content. The head contains information about the document such as the author, keywords, and metadata about the content. The body contains everything you see when you view the content through a web browser.

The following example shows the tags that create the basic structure of a HTML document. Every document has at least these tags:

<html>
<head>
<title> Document Title </title>
</head>
<body>
This is the body
</body>
</html>

Open Notepad (Programs/Accessories/Notepad). Copy and paste the above content from <html> to </html> into Notepad. Save it as sample.htm. In order to save it as an html document, select save as, change the document type to all types. Type sample.htm as the file name then open Internet Explorer. Choose File/Open/Browse. Find sample.htm that you just saved and open it. You will see a white page with "This is the body" written. In the very top of the document window in the browser window, it says Document Title.

Tags
Every HTML tag consists of a tag name, followed by an option list of attributes which appear between brackets. An example would be <body bgcolor=#CC6600>. <body> is the basic tag, adding the background color attribute changes the default white background to a color with a hexadecimal value. Most colors are defined with the hexadecimal or numerical value of a color. Color is covered later in this document.

Containers
Most html tags have an opening of the tag and a closing of the tag. You would use a container to attribute Italics, Bold, Paragraph, or other types of attributes applied locally, not globally.

Consider, <I> This is a container!</I>

The <I> is used to italicize words. If I had not closed the tag, </I>, this text would be in italics until I end it.

Copy and paste the statement above from the <I> to the </I> in the sample.htm document right before the </body> tag. Add the bgcolor into the body tag like below.

Commonly Used Containers

<i>This is italics</i>
<strong>This is Bold</strong>
<u>This is underlined</u>
<p>This is the text within a paragraph</p>
<div>Division for special alignment</div>
<blockquote>

For offsetting text
</blockquote>
<font>Specifies a font </font>

Color

Color on web pages varies depending on monitor, browser, and operating system. Despite the differences in display of color, there is only one way to define color for the screen. Computer monitors display color in red, green, and blue. This color system is known as RGB. RGB is a 24-bit color system, meaning 8 bits of data is devoted to each of the 3 color channels. Eight bits of data describe 256 colors. This means there are 256 red channel x 256 green channel x 256 blue channel = 16,777,216 possible colors!

All colors on computer monitors are made up of combinations of red, green, and blue, which are defined numerically. Web colors are referred to by their numerical values in the hexadecimal numbering system. Hexadecimal is a base-16 system that requires only 6 characters to describe RGB color.

To make this easy for you, there is a chart with the color and associated codes available at web monkey.View colors and associated codes: http://webmonkey.wired.com/webmonkey/reference/color_codes/

You may also search for colors using Adobe™ Photoshop™ or any graphics program by using the color picker. You will notice in the screen shot of Photoshop™ below the hexadecimal value of the color located next to the # sign.


Formatting Text

This section lists the tags used for formatting text:

Paragraphs and Headings
Text Appearance (Inline Styles)
Spacing and Positioning
Lists

Paragraphs and Headings

Use the <p> Paragraph tag for block-level elements such as huge chunks of text.
Enclose text in a <blockquote> to indent.
Use the division tag <div> to define a unique style for each division. The div tag is used primarily with style sheets, discussed later in this document.

Paragraph

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Blockquote

<blockquote><blockquote><blockquote>I used the blockquote tag three times to intent this much. magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</blockquote></blockquote></blockquote>

Division

<div align="center">This is a division using the alignment property, Aligned Center</div>

Copy and Paste the above examples into sample.htm inside the body tags. Save and open in Internet Explorer.

Text Appearance (Inline Styles)

The following tags affect the appearance of text. All of these tags below can be applied to a string of characters within a block element witout introducing line breaks.

<b>The enclosed text is rendered in bold.<b>
<font face="Courier New, Courier, mono">This is a specified font</font>
<font size="1">Renders the type small</font>
<sub> Subscript</sub>
<u> This is underlined. </u>

Copy and Paste the above examples into sample.htm inside the body tags. Save and open in Internet Explorer.

Spacing and Positioning

These tags give you control over line breaks, alignment, and spacing within the web page.

<br> Known as break is a page break to enable single<br>
spacing between lines in a paragraph. <br>

<center>Centers the enclosed text</center>
<pre>
Delimits preformatted text, 

meaning lines are displayed 

exactly as they are typed in

</pre>


Lists

An order list is delimited by the <ul> tag with each item indicated by an <li> tag

<ul> </ul>

 

Specifying Font

The font tag is an inline style tag used to specify the size, color, and font face for the enclosed text using the size, color, and face attributes respectively.

<font face="serif" color="#99000" size="+2">This is really different!</font>
looks like this in the browser: This is really different!

The types of font faces are usually specified in groups. The face attribute does not guarantee the user will see the text in the specified font. The user must have the font installed on their system in order to view the specified font. There are several groups of fonts that most systems have installed.

Common font groups:

<font face="Arial, Helvetica, sans-serif">This is the font face</font>
<font face="Times New Roman, Times, serif">This is the font face</font>
<font face="Courier New, Courier, mono">This is the font face</font>
<font face="Georgia, Times New Roman, Times, serif">This is the font face</font>
<font face="Verdana, Arial, Helvetica, sans-serif">This is the font face</font>
<font face="Geneva, Arial, Helvetica, sans-serif">This is the font face</font>

Use Arial, Verdana, Helvetica, and Geneva (sans-serif fonts) for the web.

Making Links

Links are created with the anchor tag <a>. There are two types of links: absolute and relative. An absolute link provides a link to a document regardless of where the existing document is served. It includes the host name, the pathname, and the specific file name. When linking to documents on other servers, you will need to use absolute URL's. If your document is buried within folders and you want to link to a document that won't change, you will want to use an absolute link. A relative link links to documents stored on the same server, such as all the pages on one web site. The link from this page to the home page would be "index.htm." It is not necessary to include the server (www.uic.edu/cuppa/udv...) name in links that exist in close proximity on the server.

A link in html looks like this <a href="home.htm">Home</a>. The word Home appears as the link in the HTML document, and is defined in parenthesis in html.

An absolute link to the UIC web page looks like this: <a href="http://www.uic.edu">UIC Home Page</a>
A relative link looks like this: <a href="index.htm"> HTML Basics Home Page</a>
A relative link: <a href="mydocument.pdf">MyDocument PDF (126 KB)</a>

Copy and Paste the above example links into sample.htm inside the body tags. Put the paragraph tag <p> around the entire anchor tag to create a new paragraph in the document. Save and open in Internet Explorer, test the links.

In notepad, you would do this:

Linking within a Document

You might have noticed the table of contents links at the top of this page take you to a specific place within this document. You can use the anchor tag to create links within the same document.

First, create an anchor within the document, which is placed somewhere within the document you want to link to. It looks like this: <a name="images"></a>. This anchor is invisible. It is the landing place from a link. The above example describes the invisible anchor for the next section, Adding Images.

Second, create the link that enables us to jump to the anchor. The link at the top of the page: <a href="#images">Adding Images</a>. Notice the "#" sign in the link. This link jumps to the invisible anchor below.

Adding Images

The <img> tag places an image in the document. There are several attributes you will use to control the image. These are as follows:

align="absbottom", "absmiddle", "baseline", "bottom", "center", "left", "middle", "right", "texttop", or "top".
alt="A strong of alternative text appearing for those who can not see the image"
border="the number for the border thickness"
height="the height of the image, not required but recommended"
width="the width of the image, not required but recommended"
src="the source of the image, it is required"

Right click on this image and save it to your computer in the same place you saved sample.htm.


In your sample.htm document, paste the below code:

<img src="california_ave.jpg" width="390" height="275" align="left">

The image will be linked inside the sample.htm page and searches for the image within the code. The above src tells the computer the image is located in the same folder as the file. If you put it in a folder called images, inside the folder where sample.htm exists, the src address would be "images/california_ave.jpg"

 

 


Mail to Links

Many novice web designers have no clue how mailto links work. It is quite simple. Here is a link to my email address: Contact Crystal

It looks just like a regular link and acts like one too. The code looks like this: <a href="mailto:crystal@urbanvisualization.com">Contact
Crystal </a>

The only difference between the mailto link and a regular link is that mailto is a part of the document name, and the document name is actually an email address.

Tables Versus Cascading Style Sheets

The following are a conceptual introduction to tables and style sheets. You will explore creating examples of both in the Style Sheets Tutorial.

Tables

Tables were used to lay out pages in the beginning days of web design. They could be a hassle if your design was complicated because you would be forced to nest tables inside of tables to pull off amazing design feats. Complicated designs nested inside of tables can be difficult for screen readers (used by those with visual disabilities) to interpret.

Today, widespread adoption of Web standards dictates how we layout web pages. THe growing consensus is that tables should be used for tabular data and not for layout while style sheets should be used for layout and afford the designer greater control over the web page. Style sheets can be difficult and time consuming. You do not have to use style sheets to layout all of your web pages. Take a look at the GCUDV home page through a WYSIWYG below. The double dashed lines indicate the table cells. Style sheets and a table were used for the layout. The style sheets control the look of the links, the fonts, and headings.

"Much is being said about standards and CSS. Like every good buzzword, they're being hailed as the next big thing. It started with Douglas Bowman's redesign of Wired, and went from there. In 2003, Zeldman wrote Designing with Web Standards, and we all saw the light. Designers everywhere are embracing this new direction. It's syntactic. It's semantic. It's speedy and lightweight. " http://www.sitepoint.com/article/tables-vs-css


CSS

Cascading Style Sheets (CSS) is a language for specifying various aspects of the style of HTML elements. Font, color, background, and links can be defined using CSS either as inline, embedded, or linked.


· Inline: Applies the style to the object at the beginning of the object
· Embedded: Applies the style to the page in the <head> tag
· Linked: Applies a link to an external style sheet in the <head> tag, enabling the style to be applied to all pages within the site. This method is recommended.

Here is an example of code you would define in the head tag of a file to control the entire file:

<style type="text/css">
<!--
p{FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: verdana,arial,helvetica,sans serif}
-->
</style>

Copy and paste the above code between the head tags in the sample.htm file.

This means everything within the paragraph tag (defined by the p above) will be font size 11pixels, dark grey in color, and face verdana, as the first preference.

What is in grey through the browser is being controlled by the style you just pasted into the document. You can control other things besides what lies in between the paragraph brackets. We will cover this in detail in the Style Sheets Tutorial.