HTML 1: Web Design for Beginners
Assignment: Week 1
Click to go to another homework page, the Spring 2007 page or the Home Page
Topics on this page
Tag Reference
Tag Examples
Tag Attributes, Values
Other Tag Examples
Rules and their attributes
Special Characters
Online References
But first ...
The template on which this page has been created will serve at the starting point for all subsequent Web pages.
The html, head, title and body tags on this page represent the skeleton of a Web page. All of these tags come in sets -- opening and closing. The closing tags can be identified by the forward slash that follows the opening bracket.
In the first lesson, there are links to Web pages that give hints, definitions and other kinds of help relating to the design of Web pages.
Additionally, there is a list of tips to help establish a routine that should go a long way toward aiding the designer in creating working pages with coherent style and structure on the first shot.
Below is the link to Virtual University's homepage. Just click on the logo. The "center" tag set was used to position it, whereas on the page heading the "align" attribute was used to accomplish the same thing.
A Web page I like ...
When it comes to Web pages, my tendency is toward pages that are straightforward, functional and informative. Occassionally, I see pages that strike me as being quite creative, but that only works for me if my three basic criteria have been met. Following are links to two newspaper sites. The first, the Albany Times-Union, defines the criteria to which I refer. It has lots of information, is formatted in a modular design much like many front pages, it emphasizes news stories with colored type and has a useful navigation bar. It even makes some money with advertising that does not interfere with the content. If you look at just the first screen, there is a bunch of information, all neatly defined.
Here is the link to the Times Union home page: : Times Union
... and one I don't
The second is the Schenectady Gazette. It wastes space with margins that I think are much too wide, by promoting itself with a large box in the middle of the page and by putting too much space between the insufficient navigation buttons which means I have to scroll down to see more of them and when I do it's not worth the trouble. I do like that their video scroll is at the top of the page, but that doesn't make up for the paucity of stories up there. And, I have to wait to see if there is a video that will interest me. At the bottom of the page, the list of stock market story links is very hard to read. Compare that with the story listing links on the Times Union page. The home page for "subscribers" may be better, but now I have to go to extra effort -- and is there a charge? The Times Union is upfront and, to me, is a much better marketing tool because of that.
Here is the link for the Gazette is: : Gazette
My biggest problem with both these pages, in fact with many pages, is that they are too long and require too much scrolling.
Ok, so I'm picky, but it's my time being wasted.
Tag Reference
<html> and </html> is the tag set to alert the browser that the document is an html document.
<head> and </head> is the tag set that encloses the title, meta and other tag sets used, but not displayed, by the browser.
<title> and </title> is the tag set that assigns a title to the page's title bar when displayed.
<body> and </body> is the tag set that encloses the coded text and images that will be displayed by the browser.
<h1> and </h1> is the largest heading tag set. The numbers that define heading sizes are 6 down to 1 with 6 being the largest. <h4> is equivalent to default body type size in some browsers.
<p>: and </p> is the tag set that defines a paragraph. It inserts a blank line following the paragraph.
<b>: and </b> is the tag set to make body type bold.
<i> and </i> is the tag set to italicize body type.
<u> and </u> is the tag set to underline body type.
<center> and </center> is the tag set that centers the material it encloses.
<br> is the tag to break a line. It also can be used to insert a blank line. It is does not have a closing tag.
<font> and </font> is the tag set to modify text in the body of the page. The opening tag has several attributes that are explained in the attributes section of this page.
<table> and </table> is the tag set to open and close a table.
<tr> and </tr> is the tag set to call for a row in a table.
<td> and <'td> is the tag set to call for a cell in a tabular column.
<th> and </th> is the tag set to call for a heading on a table.
<caption> and </caption> is the tag set that calls for a caption to go under the table. It must follow immediately the table tag set.
Tag set examples
The coding to center body type that is boldface italic and underlined is as follows:
<center><b><i><u> And it looks like this </u></i></b></center>
Notice that the tags are closed in the reverse order they are opened. That is, the first opened is the last closed.
Tag attributes and values
Tag attributes and values determine how tags are interpreted.
For example, the attribute to determine how text and images are aligned is align. It has four possible values: "center", "left", "right and "justify". The values must be enclosed by quotes and can be used on "h", text tag sets.
The coding for the attribute and its accompanying values to align an h3 heading left, center and right is as follows:
<p align="left"> aligned left </p>
<p align="center"> aligned center </p>
<p align="right"> aligned right </p>
<p align="justify">Here is an example of the "justify" attribute used with a text block to make the left and right margins straight. It is especially effective in making sure that the left and right margins are straignt. It is especially effective in making sure that the left and right margins are straignt. It is especially effective in making sure that the left and right margins are straignt. Say, am I repeating myself?</p>
bgcolor is the attribute to select a background color for the page and is part of the opening body tag. If using a background image, select a bgcolor that is close to the color of the image so that the type is legible. The color value is expressed in hexidecimal code such as bgcolor="#FFFFCC".
link is the attribute to set the color of a link before it is selected. The default color is blue.
alink is the attribute to set the color of an active link, that is one that is currently selected. The default color is red.
vlink is the attribute to set the color of a link after is has been visited. The default color is purple.
text is the attribute to set the color for all the text on the page. It is only used in the opening bodytag. Use the hexidecimal code for a color to select it. text="FFFFCC".
background is used to select an image to be used as a background for the page. It is only used in the opening body tag and takes the form: background="image.gif".
color is the font attribute to set the color a text. It uses the hexidecimal color code and takes the form: color="#FFFFCC".
size is the font attribute to set text size and takes the form: size="3". The sizes, from largest to smallest, are 7, 6, 5, 4, 3, 2 and 1 with 3 being the default.
face is the font attribute to select the face of the text. It is best to give the browser choices since they don't all have the same faces. It would take the form: face="courier new, courier". The browser will chose the first face it comes across that it has. If it doesn't have any of them, it will use its particular default face. In the previous example, a browser using the Windows OS would display in "courier new" and one using a MAC OS would display in "courier." You can give the browser up to 3 choices. For unusual text, make it a graphic using it and display it as an image.
cellspacing is the table attribute to set the amount of space between the cells.
cellpadding is the table attribute to set the amount of space between data and images and the sides of the cells in which they are placed.
width and height are the attributes to set the width and height of tables, rows, cells and images. The width can be expressed as a percentage, such as width="33%", or in pixels, such as width="200". The height is expressed in pixels.
height is the attribute to set the height of tables, rows, cells and images. It can be expressed as pixels in the form height="150".
colspan and rowspan are the attributes to determine how many rows or columns a table cell will consume. The
rowspan value is one greater than the actual number. So if there are three rows, the correct call is rowspan="4".
Note that attributes and their values are only used in the opening tag.
Some tag other examples
How the "p" tag set works:
This is the first line enclosed by the "p" tag set.
This is the second line enclosed by the "p" tag set.
This is the third line enclosed by the "p" tag set.
Note that there is no indent but each line is followed by a blank line.
How the "center" tag set works:
This is the first line enclosed by the "center" tag set. This is the first line enclosed by the "center" tag set. Note that the "center" tag set does not insert a blank line following its use.
How the "br" tag works:
There is a "br" tag right here.
Notice that a new line starts but a blank space was not inserted. However, if we insert three "br" tags right here,
not only do we get a new line, we also get two blank lines. The same thing can be accomplished by using a "p" tag set followed by a "br" tag right here.
See?
How the "h" tags work:
h1
h2
h3
h4
h5
h6
Note that the "h" tag set inserts a blank line following its use.
How the "u" tag set works:
The word u tag set was used to underline the word underline.
How the "strong" and "em" tag sets works
The "strong" tag set was used to enclose the word strong. In an aural browser it would add emphasis to the the spoken word. In visual browers it usually makes the word bold.
The "em" tag set was used to enclose the word emphasis. In aural browsers it adds emphasis to the spoken word. In text browsers it usually puts the word in italics.
How the "blockquote" tag set works:
The "blockquote" tag set yields slightly wider margins in the text. It really, really does make the margins of the text slightly wider as is illustrated by the narrower width of the following text. The "blockquote" tag set yields slightly wider margins in the text. It really, really does make the margins of the text slightly wider as is illustrated by the narrower width of the following text. The "blockquote" tag set yields slightly wider margins in the text. It really, really does make the margins of the text slightly wider as is illustrated by the narrower width of the following text.
See how the "blockquote" tag set made the margins of this text slightly wider? It really, really did make the margins of this text block slightly wider that the foregoing text block. The "blockquote" tag set yields slightly wider margins in the text. It really, really does make the margins of the text slightly wider as is illustrated by the narrower width of the following text. The "blockquote" tag set yields slightly wider margins in the text. It really, really does make the margins of the text slightly wider as is illustrated by the narrower width of the following text.
Rule tag, attributes and values
The "hr" tag creates a horizontal rule. Among the available attributes and their values are:
- width
- It refers to the length and is expressed as a percentage in quotes such as: width="50%"
- size
- It refers to the thickness and is expressed as a number in quotes such as: size="10"
- align
- It refers to its position on the line and is expressed as "left", "center" and "right"
- noshade
- noshade makes the rule solid rather than grooved. Note that it is not in quotes. Type as simply noshade for a solid rule. Leave it out for a grooved rule
Some examples and their coding:
<hr width="25%" size="5" noshade align="left" color="#FF0000"> results in a rule that looks like this:
<hr width="50%" size="10" align="center" color="#FF0000"> results in a rule that looks like this:
<hr width="33%" size="15" noshade align="right color="#FF0000" > results in a rule that looks like this:
Some special characters
< and > result in opening and closing brackets that can be used in the representation of html code such as <p>
& is used to make sure an & appears on a Web page. For example: rock & roll. (Just FYI, the generally accepted way to type the name of that kind of music is: rock 'n' roll.)
© results in the © symbol that indicates material is protected by a copyright.
£ results in the £ symbol used to represent the British monetary unit of the "pound sterling".
results in spaces being inserted like this, see?
Some handy online reference sites
More handy sites coming later
Back to Top
Got questions?
How about comments?
Random thoughts?
