- This cell
- And the next cell
- And the next cell
Local bgcolor = FF0000 and colspan=2
This course will demostrate how to build a web site. Such sites can be used for e-commerce, on-line information, advertising or any other purpose that a web site may have. You will learn to present information in a unified, logical way that maximizes ease of use. Later in the course you will learn how to gather information from users and distribute information to designated individuals.
The first two weeks of the course will emphasize a unified look to your site. As part of your final project, you will find 5 sites that have the same purpose as the site you will create. You will analize how these sites unify the appearence of their pages. In order to do this you have to know what tools can be used to unify the look of a site.
There are three major ways to unify a site.
In this list, the bold elements appear in red while the rest of the type is in black. This was accomplished by the style sheet used for this course.
All HTML (HyperText Markup Language) documents are pure asci text documents. These documents when viewed from a web browser display various format and hyperlink attributes that are established by HTML tags. All tags begin with a less than sign (<) and end with a greater than sign (>). Many tags must be paired with an end tag that closes the section of the document that that tag applies to. If you want to create a bold item, you do not want everything that follows the bold tag to be bold, so you must include an end tag that ends the bold section. The end tag is the same as the first except it starts with </. This sentence contains one bold word. In the HTML code that underlies this sentence is shown here. Notice that the command <B> starts the bold section and the command </B> ends it.
This sentence contains one <B>bold </B> word.
Some tags like the line break (<BR>) and the list item (<LI>) do not have the end tag since they don't need to be terminated. Other tags such as the paragraph (<P>) have optional end tags. I recommend using all optional end tags for clarity. Block tags (next section) begin and end with tags.
Every HTML document begins with the HTML tag and ends with its end tag. Without this tag, browsers will not realize that this is an HTML document. At the next level, you find the HEAD and BODY tags. This leads to the basic layout of a standard HTML document
<HTML> <HEAD> The header </HEAD> <BODY> The Body </BODY> </HTML>
The main block tags you will use now in the HEAD section are the TITLE and STYLE tags. The TITLE tag establishes the caption that appears in the window of the browser when you are viewing the page and also can be used by browsers as the name of the bookmark for that page. STYLE will be explained at length during the next two weeks.
Most of the action occurs in the BODY. Here the main block tags are <P> for paragraph <TABLE> for a table and the format tags. Tables will be discussed when you learn to design pages since they are one of the basic layout tools. Paragraph might be thought of as a format item. Other format items include bold (B), italic(I), Code (CODE) a monospace type (normally courier) and blockquote (BLOCKQUOTE). There are many other variations of these, but most just implement one of these styles. CITE is for example equivalent to italic. In addition to these standard format items there are the standard font designators H1 through H6 that represent different header styles from the largest to the smallest. There is also the font tag (FONT) that allows you to set various font properties.
Use Red Edit to create the page you see by clicking here .
There are three basic types of list in HTML,
The list above is an example of an ordered list.
Ordered lists can have integers, capital or small Roman numerals and capital or small letters. The following is an example with nested lists using different types of labels
Look at the source to see how this was done.
Entries for unordered lists start with a bullet. The standard bullet is a disk •. Youalso have a circle º or a square. You will see how to create the circle and square bullet next week. This is an unordered list.
Definition lists are used to display a list of definitions where the word being defined is listed first and the definition second. This is an example of a definition list.
Tables are the simplest (and most universally implemented by browsers) tag used for page layout. You can use a table to layout your page on a rectangular grid. Blocks within this grid can be sized, can stretch across gridlines, have borders and padding as well as special text and background color. The following is a simple table.
|
Make up the first row Local background color white | |
| The Second row and third start with this cell. This table has Border = 5, Cellspacing =5, Cellpadding =5, BGColor =808080 and BorderColor = FF8040. | Local bgcolor = FF0000 and colspan=2 |
|
| The last Row Doesn't do much | This is the end | |
The code for this table follows:
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=5 BGCOLOR=808080 BORDERCOLOR=FF8040> <CAPTION ALIGN=TOP> This is a caption </CAPTION> <TR> <TD><UL> <LI>This cell <LI>And the next cell <LI>And the next cell </UL> </TD> <TD BGCOLOR=FFFFFF > Make up the first row Local background color white</TD> <TD><IMG SRC = "../Fall.jpg" ALT = "Picture of our studio at sunrise"> </TD> </TR> <TR> <TD ROWSPAN=2 >The Second row and third start with this cell. <B><FONT SIZE=+1 COLOR=00FF00>This table has Border = 5, Cellspacing =5, Cellpadding =5, BGColor =808080 and BorderColor = FF8040. </FONT> </B> </TD> <TD COLSPAN=2 BGCOLOR=FF0000> <IMG SRC = "../port.jpg" ALT= "Picture of the old port of Nice taken at the top of the chateau" WIDTH=400> <BR><B><FONT SIZE=+1 COLOR=FFFFFF>Local bgcolor = FF0000 and colspan=2 </FONT> </B> </TD> </TR> <TR> <TD>The last Row Doesn't do much </TD> <TD>This is the end </TD> </TR> </TABLE>
While the general appearence of these tables is the same in Netscape and Internet Explorer, notice the differences. Whenever you do things for the web, the browser that the view uses determines much of how your page will look. You should try to get an acceptable appearence in all of the major browsers. Don't overlook the Mac versions of the browsers, since they will also have a different view of the same page. Click here to see an example of a web site designed using tables to unify the site.
One of the most complex design aids is the frame. When you create a page using the FRAMESET, you main page no longer has a body other than a small page used to warn those whose browsers don't support frames. The frame set is a grid of links to other pages. These pages are displayed in the indicated spot in the grid. You can see an example of a frame page by clicking here. The source for this page is.
<HTML> <HEAD> <META NAME="GENERATOR" CONTENT="Red Edit version 2.7"> <TITLE>Created by Red Edit</TITLE> </HEAD> <FRAMESET COLS="30%,*" ROWS="50%,*" > <!-- Frames go here --> <FRAME SRC="index1.htm" NAME="INDEX" FRAMEBORDER = "0"> <FRAME SRC="layout1.htm" NAME="MAIN" FRAMEBORDER = "0"> <FRAME SRC="syllabus.htm" NAME="SYLLABUS" FRAMEBORDER = "1"> <FRAME SRC="week1.htm" NAME="WEEK" FRAMEBORDER = "1"> <!--Frames above here --> <NOFRAMES><BODY> <P>This page is designed to be viewed by a browser which supports Netscape's Frames extension. This text will be shown by browsers which do not support the Frames extension.</P> <!-- Recommend link to main page or non-frame version of this page here. --> </BODY></NOFRAMES> </FRAMESET> </HTML>
Frames are frequently used when you want to display an index on the screen at all times to allow the user to navigate from place to place. They are also useful when one or more of the pages will change from time to time and the user only wants to update one page at a time.
Use Red Edit to create the page you see by clicking here .