Web Development Tools 1.Microsoft FrontPage

There are many tools used to develop web sites. Most popular tools are

Microsoft FrontPage

Macromedia Dreamviewer

Adobe Fireworks

In this book we are going to discuss two of the most popular web developing tools. First we are going to discuss the Microsoft FrontPage

FrontPage Screen Layout

Below is a diagram of the default page layout in FrontPage.  You can change the view by selecting a different View Option.

Views

• Page view gives you a WYSIWYG editing environment for creating and editing web pages.
• Folders view lists all of the files and folders in your web for easy management.
• Reports view identifies problems with pages and links in the web including slow-loading pages, broken links, and other errors.
• Navigation view lists the navigation order of the site and allows you to change the order that a user would view the pages.
• Hyperlinks view allows you to organize the links in the web pages.
• Tasks view provides a grid for inputting tasks you need to complete in your web.

Color Names

Most browsers support a collection of color names.

Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.

 

Color	Color HEX	Color Name
	#F0F8FF	AliceBlue
	#FAEBD7	AntiqueWhite
	#7FFFD4	Aquamarine
	#000000	Black
	#0000FF	Blue
	#8A2BE2	BlueViolet
	#A52A2A	Brown

 

HTML Colors Color Values

Colors are displayed combining  RED, GREEN, and BLUE light sources.

Color Values

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

This table shows the result of combining Red, Green, and Blue light sources:.

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table columns
<col>	Defines the attribute values for one or more columns in a table
<thead>	Defines a table head
<tbody>	Defines a table body
<tfoot>	Defines a table footer

Headings in a Table

Headings in a table are defined with the  <th>  tag.

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

 

How it looks in a browser:

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

Tables and the Border Attribute

To display a table with borders, to use the border attribute:

 

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

row 1, cell 1	row 1, cell 2
row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

 

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

td>row 2, cell 1</td>

<td>&nbsp;</td>

</tr>

</table>

HTML Tables

With HTML you can create tables.

 

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

 

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr></table>

 

 

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

.

List Tags

List Tags

Tag Description

Defines an ordered list
Defines an unordered list
• 
  Defines a list item
  

  Defines a definition list

  
  Defines a definition term
  

  
  Defines a definition description
  
  Deprecated. Use

  insteadDeprecated. Use
  instead
  

Definition Lists

A definition list is not a list of items. This is a list of terms and explanations of the terms.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
 


<dl><dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt><dd>
White cold drink</dd>
</dl>


Here is how it looks in a browser:
Coffee

Black hot drink

Milk

White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

HTML Lists 2. Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

·         Coffee

·         Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Search Engine Submission - AddMe

HTML Lists 1. Unordered Lists

·           An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
·           An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

·         Coffee

·         Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Background

The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

<body background="clouds.gif">
<body background="http://www. schoolnet.com/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above).
When using a background image, consider the following:

·         Will the background image increase the loading time too much? 

·         Will the background image look good with other images on the page? 

·         Will the background image look good with the text colors on the page? 

·         Will the background image look good when it is repeated on the page? 

·         Will the background image take away the focus from the text? 

.

HTML Backgrounds

A good background can make a Web site look really great.

Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.