Creating Web Pages

- With -

HTML

New Perspectives Series
Edited by Nguyen Vu
©May 30, 2000




Tutorial 1: Creating a Web Page       1 2 3 4 5 6 7 Top


The Fundamentals about HTML

The Internet is the World Wide Web, which is made up of millions of interconnected computers for users to communicate and share information. To share your thoughts and ideas you can create your own web site with hypertext document that web browsers can interpret and display. To create these hypertext documents you first must have some knowledge of HTML coding and the understanding of how Web pages work.

Web documents consist of pages like that of a book with the exception that a book turns from page to page while Web documents are hyper link to the next page with or without sequence.

The Internet consist of mainly two components, they are the Web server that stores the Web page and the Web browser or software that accesses and display the contents of the Web page.

Web documents are made up of Hypertext Markup Language, short, HTML. These codes may be slightly interpreted differently among Web browser, as a result, a page may be displayed with different fonts, colors, text, etc.

HTML can be written with just a text editor like Notepad in Windows and saved with the file extension html.

The template for every HTML document appears as follow: where in between TITLE is the name for the page and codes for the pages are written inside the BODY.

HTML TEMPLATE
<HTML>
<HEAD>
<TITLE>PAGE TITLE</TITLE>
</HEAD>

<BODY>
     Web Page document here
</BODY>

</HTML>

<H1> Header size 1 = 6pt, bold </H1>

<H2> Header size 2 = 5pt, bold </H2>

<H3> Header size 3 = 4pt, bold </H3>

<H4> Header size 4 = 3pt, bold </H4>

<H5> Header size 5 = 2pt, bold </H5>
<H6> Header size 6 = 1pt, bold </H6>

<P> Paragraph tag add a blank line before the document </P>





CREATING LISTS
Ordered List
<OL>
      <LI>List1                                                             1. List1
      <LI>List2                                                             2. List2
</OL>
Unordered List
<UL>
      <LI>List                                                               ·  List
      <LI>List                                                               ·  List
</UL>
Definition List
<DL>                                                                         Term
      <DT>Term<DD>Definition                                              Definition
      <DT>Term<DD>Definition                                 Term
</DL>                                                                                      Definition


LOGICAL TAGS
TAG DESCRIPTION SAMPLE
<EM> Indicates that characters should be emphasized in some way. Usually displayed with italics. example
<STRONG> Emphasizes characters more strongly than . Usually displayed in a bold font. example
<CODE> Indicates a sample of code. Usually displayed in a Courier font or a similar font that allots the same width to each character. example
<KBD> Used to offset text that the user should enter. Often displayed in a Courier font or a similar font that allots the same width to each character. example
<VAR> Indicates a variable. Often displayed in italics or underlined. example
<CITE> Indicates short quotes or citations. Often italicized by browsers. example


PHYSICAL TAGS
TAG DESCRIPTION SAMPLE
<B> Indicates that the text should be bold. example
<I> Indicates that the text should be italic. example
<TT> Indicates that the text should be used with a font like Courier that allots the same width to each character. example
<BIG> Indicates that the text should be displayed in a big font. Available only in HTML 3.0 and above. example
<SMALL> Indicates that the text should be displayed in a small font. Available only in HTML 3.0 and above. example
<SUB> The text should be displayed as a subscript, in a smaller font if possible. Available only in HTML 3.0 and above. example
<SUP> The text should be displayed as a superscript, in a smaller font if possible. Available only in HTML 3.0 and above. example


SPECIAL CHARACTERS
TAG DESCRIPTION SAMPLE
&#169 Copyright symbol ©
&#174 Registered trademark ®
&#183 Middle dot ·
&#186 Masculine ordinal º
&#153 Trademark symbol ™
&nbsp Non-breaking space, useful when you want to insert several blank spaces one after another  
&LT Less than sign <
&GT Greater than sign >
&AMP Ampersand &


HORIZONTAL LINE
<HR ALIGN=CENTER SIZE=pixel WIDTH=percent COLOR=color>

INLINE IMAGE
ALT text <IMG SRC="file_name"> Alternate text <IMG SRC="apple01.gif"> ALT='text to appear' <IMG SRC="ani-alarmclock.gif">




Tutorial 2: Adding Hypertext Links to a Web Page       1 2 3 4 5 6 7 Top


Creating Anchors
ANCHOR
<A NAME="Anchor_name">text/graphic</A>

Creating Links
LINK
<A HREF="#Anchor_name">text/graphic</A>

Web Page Structures

Linear structure - system of Web pages where each page is linked to the next and previous pages in an ordered chain of pages.
Hierarchical structure - system of Web pages where it starts with a general topic that includes links to more specific topics.
Augmented linear structure - system of Web pages where it uses the linear structure with the exception that it has a third link in each page that link to the beginning.
Combination of linear and hierarchical structure -
Multi-page document with no coherent structure - the most confusing structure for users because it gives users no idea of what to expect when clicking a link.

Creating Links Between Documents
<A HREF="filename">text/graphic</A>

Linking to a Section of a Document
<A HREF="XXX.htm#anchor">text/graphic</A>

Linking to Documents in Other Folders

Absolute pathnames - shows exactly where the file is on the computer and starts with a back slash.
Relative pathnames - gives a file's location in relation to the current Web document. If the file is a higher level folder than the location path is written with two dots proceeding the path.

Linking to Documents on the Internet
<A HREF="URL">text/graphic</A>

Linking to FTP Servers
<A HREF="FTP://FTP_Hostname">text/graphic</A>

Linking to Gopher Servers
<A HREF="GOPHER://Host_name">text/graphic</A>

Linking to Usenet News
<A HREF="NEWS:newsgroup:">text/graphic</A>

Linking to Email
<A HREF=MAILTO:e-mail_address >text/graphic</A>





Tutorial 3: Designing a Web Page       1 2 3 4 5 6 7 Top


Working with Color in HTML

HTML identifies a color in one of two ways: either by the color's name or by a description of the color's appearance called an RGB triplet (Red, Green, and Blue). The RGB is a numerical expression that exactly describes a color's appearance based on mixed of the three primary colors Red, Green, and Blue. The color values are then expressed in a hexadecimal number so that HTML can understand.

Hexadecimal is a number that is represented using 16 as a base rather than a 10. In base 10 counting, you use combinations of 10 characters (0 - 9) to represent all of the integers, whereas hexadecimals include 6 extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15). For values above 15, you use a combination of the 16 characters.

SAMPLE HEXADECIMAL COLOR TRANSLATION
Color Name RGB Triplet Hexadecimal Color Name RGB Triplet Hexadecimal
BLACK 0,0,0 000000 RED 255,0,0 FF0000
BLUE 0,0,255 0000FF YELLOW 255,255,0 FFFF00
GREEN 0,128,0 008000 WHITE 255,255,255 FFFFFF


Defining a Color Scheme


<BODY BGCOLOR=color TEXT=color LINK=color VLINK=color>

           BGCOLOR - page background color
           TEXT - page text color
           LINK - hyper link color
           VLINK - visited hyper link color

Modifying Text Appearance
<FONT SIZE=sizevalue COLOR=color FACE=fontname>text</FONT>

Inserting a Background Image
<BODY BACKGROUND="image">

Understanding Image Formats

GIF (Graphics Interchange Format)


JPEG (Joint Photographic Experts Group)

Image Tags
<IMG SRC="image" ALT="alternate_text" ALIGN=alignment VSPACE=value HSPACE=value HEIGHT=value WIDTH=value>

     SRC - name of image file
     ALT - text to appear in place of picture
     ALIGN - controls text around image in either TOP; MIDDLE; BOTTOM
                  - controls the position of the image either LEFT; RIGHT with text wraps
     VSPACE - increases the space above and below the image in pixels
     HSPACE - increases the space left and right of the image in pixels

Image Maps

Image maps list the coordinates on the image that define the boundaries of the hotspots which is the defined area of the image that acts as a hypertext link.

Server-side image map - is when the coordinate is process by a program on the server.
Client-side image map - is when the image map is inserted into the HTML file and the image map is processed locally by the Web browser.

CLIENT-SIDE IMAGE MAP
<MAP NAME="mapname">
<AREA SHAPE="shape" COORDS=coordinates HREF=URL>
<AREA ……………ADDITIONAL HOTSPOT…………….>
</MAP>

          SHAPE
          RECTANGLE HOTSPOT
          <AREA SHAPE=RECT COORDS="x_left, y_upper, x_right, y_lower" HREF="URL">
          CIRCLE HOTSPOT
          <AREA SHAPE=CIRCLE COORDS="x_center, y_center, radius" HREF="URL">
          POLYGONAL HOTSPOT
          <AREA SHAPE=POLY COORDS="x1, y1, x2, y2, x3, y3…" HREF="URL">

<IMG SRC="image" USEMAP="#mapname">






Tutorial 4: Designing a Web Page with Tables       1 2 3 4 5 6 7 Top


In a Web page, there are two ways to insert a table: text table which has only text character and graphical table which can have color, shading, and borders elements.

CREATING TEXT TABLE
<PRE>
          text
</PRE>


CREATING GRAPHICAL TABLE
<TABLE>
          <TR>
                    <TD> First Cell      </TD>
                    <TD> Second Cell </TD>
          </TR>
          <TR>
                    <TD> Third Cell    </TD>
                    <TD> Fourth Cell  </TD>
          </TR>
</TABLE>


Creating a Table Caption
<CAPTION ALIGN=value>caption text</CAPTION>

          ALIGN=TOP; BOTTOM

Changing Table Appearance
<TABLE BORDER=pixel>

           BORDER=pixel - Controlling table border thickness in pixels
           CELLSPACING=pixel - Controlling border around individual table cell in pixels
           CELLPADDING=pixel - Controlling the gap between cell text and surrounding cell border in pixels
           ALIGN=alignment - Controlling the placement of the table LEFT or RIGHT
           WIDTH=pixel/percent - Controlling the whole width of the table
           HEIGHT=pixel - Controlling the height of the whole table in pixels
           BGCOLOR=color - Adding colors to the whole table

CENTERING TABLE
<CENTER>
<TABLE>
</TABLE>
</CENTER>


Spanning cell - is a cell that occupies more than one row or column in a table.
<TD ROWSPAN=value COLSPAN=value> Cell text </TD>

           ROWSPAN - is the number of cell row that it will occupies
           COLSPAN - is the number of cell column that it will occupies
           ALIGN - align the table data LEFT; CENTER; RIGHT
           VALIGN - align the table data TOP; MIDDLE; BOTTOM

Inserting Comment
<! Comment text>

Nested table - just like a table structure, except that it is placed inside a <TD> tag





Tutorial 5: Using Frame in a Web Page       1 2 3 4 5 6 7 Top


Frames are windows appearing within the browser's display area, each capable of displaying the contents of a different HTML file therefore it allows the user to view information from two or more pages simultaneously on one screen.

FRAME TEMPLATE
    <HTML>
    <HEAD>
    <TITLE>page_title</TITLE>
    </HEAD>

    <FRAMESET>

      <FRAME SRC=URL>
      <FRAMESET>
      </FRAMESET>
        <FRAME SRC=URL>

    </FRAMESET>

    </HTML>
Note: There are no <BODY> tag because a page with frames displays the content of other pages.



To create a frame page, you can only starts with either the ROW frameset or the COLUMN frameset.
<FRAMESET ROWS="row1 height, row2 height, row3 height, …">
</FRAMESET>

<FRAMESET COLS="column1 height, column2 height, column3 height, …">
</FRAMESET>

Note: height can be pixels, percentage, and " * ".

<FRAME SRC=document SCROLLING=value(YES/NO)>
Controlling frame scroll.

<FRAME SRC=document MARGINWIDTH=pixel MARGINHEIGHT=pixel>
Controlling frame space b/w frame source and frame boundary.

<FRAME SRC=document NORESIZE>
Prevent resize of frame by users.

<FRAME SRC=document NAME=frame_name>
Assigning a name for the frame.

<A HREF=document TARGET=frame_name>
Specifying the frame for the link to open in.

MAGIC TARGET names (can be use in place of frame_name)
_blank loads document into a new browser window resulted in two windows
_self loads document into same frame
_parent loads document into the page with hyperlink tag
_top loads document into full display and replace current window


USING THE SAME TARGET for ALL LINKS in a PAGE
<HEAD>
<BASE TARGET=frame_name>
</HEAD>


NOFRAMES tag for use with NON-FRAME BROWSER
<FRAMESET>
    Frame Definitions
</FRAMESET>

<NOFRAMES>
<BODY>
    Page Layout
</BODY>
</NOFRAMES>


Netscape Navigator and Internet Explorer have what is call "Frame Extensions" where you can modify the border color of the frame and the thickness of the frame in pixels with the following tags.




Tutorial 6: Creating Web Page Forms with HTML       1 2 3 4 5 6 7Top


CGI (Common Gateway Interface) - is any program or set of commands running on the Web server that receives data from the Web page and then acts on that data to perform a certain task. Such task can be processing the information inputted by user on a registration form and then sending it to the desire destination.

FORM TEMPLATE
<FORM NAME=form_name>
    Form elements and layout tags
</FORM>


WORKING with INPUT BOXES
<INPUT TYPE= NAME=Name_of_field VALUE=default_value SIZE=#Character MAXLENGTH=#Character>

SIZE=2       SIZE=15


<INPUT TYPE=OPTIONS VALUE=Options-Box>


<INPUT TYPE=PASSWORD>
To hide character so that input resulted in only asterisks.

SELECTION DROP-DOWN BOX TEMPLATE
<SELECT NAME=Name_of_field>
    <OPTION>Name_of_option1
    <OPTION>Name_of_option2
</SELECT>

To show more than just one item in a select box upon opening
<SELECT SIZE=Number_of_item_to_display>

To allow for multiple items to be select in a select box.
<SELECT MULTIPLE>


RADIO BUTTON
RADIO       <INPUT TYPE=RADIO VALUE=RADIO>

To make a particular radio button as default.
<INPUT TYPE=RADIO CHECKED>

TEXTAREA (To create text box)

<TEXTAREA ROWS=#Of_rows COLS=#Of_columns NAME=Name_of_field> Comment </TEXTAREA>

Controlling of word wrap in text box.
<TEXTAREA WRAP=Option(OFF, SOFT, HARD)>

Button for submitting form.
<INPUT TYPE=SUBMIT VALUE="Button_name">

Button to reset.
<INPUT TYPE=RESET>

Button that perform an action.
<INPUT TYPE=BUTTON>

Image field as acting button
<INPUT TYPE=IMAGE SRC="URL" NAME=text VALUE="text">

Using MAILTO action for returning form data
<FORM ACTION=mailto:sent_to_email_address METHOD=POST>





Tutorial 7: Programming with JavaScript       1 2 3 4 5 6 7Top








THE END






BACK HOME