Hardcore HTML for Web Page Design

 

HTML (Hyper Text Markup Language)

 

The HTML, developed by Tim Berners-Lee in 1991, uses a fixed set of tags to mark up documents for formatting purposes. In the today's Internet age, HTML became a fundamental part of the medium for encode corporate information dissemination (i.e. product advertising, reports, etc) for WWW.

 

 

·         A Web page normally includes text (content of the page) that mixed with "markup" tags for describing its structure, appearance, and function of the content.

·         The HTML is a document-layout and hyperlink-specification language for encoding Web pages or documents, which may include text, image, and other supported media.

·         The HTML defines syntax and placement of a WWW document for Web browser, such as Internet Explorer or Netscape, to identify the document elements of a Web page and display that page on the computer screen.

·         The HTML syntax containing definitions of tags and attributes that allow the separation of the presentation and structure of a document and enable the creation of machine independent WWW documents.

·         The basic syntax and semantics of HTML can be found at from the following sites:

·         http://www.w3.org/pub/WWW/TR/REC-htm132.html                    HTML 3.2

·         http://www.w3/org/TR/WD-html140/                                     HTML 4.0

·         http://www.w3.org/pub/WWW/TR/WD-frames                           Frames

·         http://developer.netscae.com/library/documentation/htmlguid/index            Netscape

·         http://msdn.microsoft.com/workshop/author/newhtml                                 Microsoft

 

Web Browsers

·         Web clients for getting information from a server

·         Web Browsers can be downloaded through:

     Netscape Navigator:                      http://home.netscape.com/download/

     Microsoft Internet Explorer:             http://www.microsoft.com/ie/download/

     Sun HotJava:                         http://java.sun.com/products/hotjava/

     IBM WebExplorer:                http://www.networking.ibm.com/WebExplorer/

 

·         Other Alternative Displays

WebTV                   http://www.webtv.net/primetime/           

      Hand-Held Devices -- palm-top computers, cellular phones, etc

 

 

Homepage and Web Pages

 

·         Each Web site has a homepage normally saved with as DEFAULT.HTML or INDEX.HTML. From this page many other HTML document pages are structured with a combination of the following organizations: hierarchy organization, linear organization, linear with alternative, and Web.

·         Each “Web Page” that we load from the Web is a single HTML document that includes the text of its document, its structure and any links to other documents, images, and other media. In addition, some script languages can be inserted for creating interactive and dynamic Web pages.

·         Frames format display may be used to allow the document window to be divided into rectangular regions, each associated with a separate HTML document.

 

Web Page Authoring Tools

·         Notepad text editor       -- Microsoft Windows

·         Microsoft Word      -- Microsoft Windows

·         FrontPage         -- Microsoft Windows

·         Microsoft InterDev      -- Microsoft Windows and Mac environments

·         WebCT             -- http://about.webct.com

·         DreamWeaver   -- http://www.macromedia.com

·         Adobe GoLiive         -- http://www.adobe.com

·         Web design toolsWeb Site for Web Authoring Tools

http://dir.yahoo.com/computers_and_internet/software/reviews/titles/internet/web_authoring_tools/

Other Tool Packages

LiveMotion for creating Flash (.swf) files: www.adobe.com

Photoshop 5.5

 

 

 

Web Page Design

1. Planning

            Objectives

User: how many, type

Web Hosting issues: where, how much

Identify support: technologies and resources

Web page publishing tools:

Page management

Collecting feedback

           

2. Define the Page Content and Layout

            Static or Dynamic/Interactive page

            Images, graphics

            Links to other WWW documents

            Single page/Frame

            Email feedback to Webmaster

            Forms for gather user information: name, address, phone, Email, etc

 

3. Develop the page content

            Web page editor selection

 

           

4. Test the Web Page

            Consider the other old version Web browsers

            Try it on various Web browsers

 

5. Publish the pages

 


Publishing Web Pages (HTTP Server)

 

·         Install a computer and connected it to the Internet (TCP/IP protocol support, IP address, and domain name) and running an HTTP server

·         The HTTP server takes the URL (Uniform Resource Locator, the web address) specified by the client's browser and translates it into a specific filename on the server's system

·         Create a "www" or "public_html" directory for files

·         Create documents from remote system on the Internet and upload files using FTP client or working on the same HTTP server systems in the target directory

·         Some commonly used defaults are: index.html, Welcome.html, default.html

·         Notice that Microsoft uses "htm" extension as default

·         Set file and directory permissions

·         Allows you to setup password access restrictions

·         Validate the documents using web wage validators

http://www.webtechs.com.html-val-svc/

http://ugweb.cs/ualberta.ca/~gerald/validate/

http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_Checkers

http://validator.w3.org/

            http://www.websitegarage.com/

            http://www.macromedia.com/

 

HTML Server Support Tools

·         LiveWire from Netscape is an online development environment for Web site management and client-server application development. It uses JavaScript, Netscape's scripting language, to create server-based applications similar to CGI programs.

·         Sun's Java Web server support a similar capability in Java

·         Microsoft Internet Information Server (IIS) support Active Server Page for building dynamic documents

·         UNIX HTTP servers support "Server-Side Include"

 

Supporting Sites:

Active Server Pages

http://www.microsoft.com/ntserver/web/default.asp

 

LiveWire

http://developer/netwscape/com/library/documentation/livewire

 

Microsoft: VBScript, JScript

http://msdn.microsoft.com/scripting/default.htm

 

Server Side Includes

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

 

Sun's Java Web Server

http://jserv.javasoft.com/index.html

 

 

The HTML Document Element

 

Head -- Elements

Body -- Main document

Heading

Text Sections: Paragraph, fonts, color, position, lists (numbered, bulleted, and indented) Tables

Fill-Out Forms

Specifying Hypertext Links to other files (text, image file, sound file, video files)

Embedding Images

Embedding other objects

 

 

Example 1: A simple page example shows basic structure of a HTML document or Web page.

<HTML>

<!-- basicshtmltruct.html -->

<HEAD>

<TITLE> Basic HTML Document Structure/Template </TITLE>

</HEAD>

<BODY>

<!-- Contents of HTML Document -->

<H1> Basic HTML Document Structure/Template </H1>

</BODY>

</HTML>

 

Types of Tags 

·         Tags are keywords contained in pairs of angle brackets

·         Standalone tags do not have end tags.

·         Example of standalone tags are image tag <img>, linebreak tag <br>, horizontal rule <hr>, document information tag <meta>, and language information tag <base>.

 

Attributes

Attributes are added within a tag to extend or modify the tag's action. Most attributes can take values, which follow an equal sign (=) after the attributes name

 

Summary of Structured Tags

 

·         Structured Markup Tags (for overall document)

Begin Tag           End Tag            Meaning

 

<HTML>       </HTML>     Placed at the beginning and end of the document

 

<HEAD>       </HEAD>     Define the header portion

 

<TITLE>     </TITLE>      Define the title of the document

 

<BODY>      </BODY>     Define document body

 

<!--        -->         One line comment

 

<!-- This is a comment   -->

 

 

Optional HEAD Elements

The following tags may also be placed within the <HEAD> tag:

<BASE>            -- Establish the document base location

<META>            -- Provide keywords, descriptions to search engines, and client pull functions

<LINK>             -- Link a document to another document or an external style sheet

<SCRIPT>             -- Add JavaScripts and VBScripts

<STYLE>             -- Add embedded style sheet

 

 

BASE

<BASE HREF=" www.microsoft.com/PR/">

 

Using <META> Tags

 

The <META> tag can be used for a variety of applications:

 

Attributes

CHARSET=name            CONTENT=string            DIR=direction

LANG=language            NAME=string                SCHEME=scheme

HTTP-EQUIV=string

For specifying the HTTP equivalent name for the meta-information and cause the server to include the name and content in the HTTP header for this document when it transmitted to the client.

 

Keywords, Description for Search Engine

<META NAME="keywords" VALUE="Web, TCP/IP, HTML, JavaScript, Opto22">

<META NAME="keywords" CONTENT="Web Programming, JavaScript Applications, Visual Basic Applications">

<META NAME="description" VALUE="Web Programming For Industrial Applications">

<META NAME="description" VALUE="Web Programming Applications">

<META NAME='author", CONTENT="Paul I-Hai Lin">

<META NAME='copyright", CONTENT="2000, Paul I-Hai Lin">

<META NAME-"robots' CONTENT="noindex, nofollow">

 

 

Client Pulls

 

HTTP-EQUIV=refresh

 

<META HTTP-EQUIV="refresh" CONTENT="20">

 

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://another.html">

 

To create a slide show effect:

An example -

In showlin1.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin2.html">

In showlin2.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin3.html">

In showlin3.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin4.html">

In showlin4.html contains

<META HTTP-EQUIV="refresh" CONTENT="5; URL=e:\html5\showlin1.html">

 

Expire Attribute

For indicating the expiration date and time of a document that may be used by Web agents or Web robots:

<META HTTP-EQUIV="expires" CONTENT="October 10, 2000 10:20:00 EST">

 

CONTENT-TYPE

For internationalization of a Web page to indicate the 8-bit encoded Japanese character sets are used:

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=SHIFT_JIS">

 

For internationalization of a Web page to indicate the 16-bit encoded character sets are used:

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-8">

 

CONTENT-LANGUAGE

The Web content is prepared with French natural language

<META HTTP-EQUIV="content-language" CONTENT="fr">

 

Other languages:

jw - Japanese

 

 

Attributes for <BODY> Tag

Colors

<BODY BGCOLOR="color">      -- Background color

<BODY TEXT="color">              -- Text color; default - black

<BODY LINK="color">                -- Hyperlink color; default - blue

<BODY VLINK="color">              -- Visited link; default - purple

<BODY ALINK="color">             -- Clicked active link; default - red 

 

Background Tile Graphics (use small size file)

<BODY BACKGROUND="background.gif">

            or

<BODY BACKGROUND="background.jpg">

 

Browser Margin (10 to 12 pixels)

To turn off margin:

<BODY MARGINWIDTH=0             MARGINHEIGH=0            LEFTMARGIN=0            TOPMARGIN=0>

 

·         Text Formatting

Begin Tag           End Tag            Meaning

 

<H1>          </H1>       Heading 1

<H2>          </H2>       Heading 2

<H3>          </H3>       Heading 3

<H4>          </H4>       Heading 4

<H5>          </H5>       Heading 5

<H6>        </H6>       Heading 6

 

<p>         </p>        Paragraph

 

<HR>                    A horizontal rule line

 

<BR>                    A line break

 

<ADDRESS>       </ADDRESS>      Signature of a authorship

 

<BLOCKQUOTE> </BLOCKQUOTE>     Long quotes

 

<q>         </q>        Designate enclosed text as an inline short

quotation

 

<PRE>       </PRE>      use its original,preformatted style, retaining

line break and spacing

 

<PLAINTEXT>             Render the remainder of the document as

preformatted plain text

 

<XMP>       </XMP>      Turn off HTML interpretation for the paragraph;

                        for displaying program code or scripts

 

 

·         Physical Character Styles Specification

Begin Tag           End Tag            Meaning

 

<B>        </B>        Boldface text

 

<BLINK>      </BLINK>    Cause text to flash on and off

 

<FONT>       </FONT>     Change Font size, color, and typeface

 

<I>         </I>        Italic text

 

<TT>        </TT>       Fixed width, monospaced font

 

<CENTER>      </CENTER>   Center the display text

 

<STRIKE>      </STRIKE>   Draw a line through the text

 

<S>         </S>        Same as <STRIKE> and may replace <STRIKE>

 

<U>         </U>        Underline the text

 

<SUB>       </SUB>      Display the enclosed text as Subscripts

 

<SUP>       </SUP>      Display the enclosed text as Superscripts

 

<BIG>       </BIG>      Increase font one size biger

 

<SMALL>      </SMALL>      Decreade font one size smaller

 

·         Logical Character Styles Specification

Begin Tag           End Tag            Meaning

 

<EM>        </EM>          Emphasis

 

<STRONG>  </STRONG>      Stronger emphasis

 

<CODE>      </CODE>      Display computer code in fixed-width font

 

<SAMP>       </SAMP>     Sample program output display in a monospace

font like <CODE>

 

<VAR>       </VAR>      A variable to a function

 

<CITE>      </CITE>     A citation or reference to another document

 

<KBD>       </KBD>      Keyboard input to be entered; fixed-width

 

·         Stand alone Tags

Tag                               Meaning

 

<IMG  SRC=”…” >   Insert an inline image into the document

 

Hypertetx Linking (Anchor)

 

Begin Tag           End Tag            Meaning

 

<A>         </A>             

 

Absolute Link:

where the attribute HREF refers to the URL address of the HyperText REFerence document:

HREF=”address”   

 

<P> Indiana University-Purdue University Fort Wayne:

<A HREF = "http://www.etcs.ipfw.edu/~lin">  http://www.etcs.ipfw.edu/~lin </A>      </P>

 

<P>   Yahoo: <A HREF = "http://www.yahoo.com"> 

http://www.yahoo.com </A> </P>

 

<a href="http://www.w3.org/">W3C</a>

 

Relative Link:

In the same directory

<A HREF = "mynewpage.html">  ..</A>     

 

In a higher level directory

<A HREF = "../newpage.html">  ..</A>     

 

Linking within a Document:

 

Give a section with a NAME so that other links can reference:

<A NAME="Web Programming" > Web Programming for Industrial Applications </A>

 

 

·         Numbered, Bulleted, and Indented Lists

Begin Tag           End Tag            Meaning

<OL>       </OL>       An Ordered (numbered) list

                        TYPE="a"  -- lower case a, b, c, etc

                        TYPE="A"  -- upper case A, B, C, etc

                        TYPE="1"  -- number 1, 2, 3, etc

                        TYPE="I"  -- Roman numbered I, II, etc

                        TYPE="i"  -- Roman numbered I, ii, etc

 

<UL>       </UL>         An unordered  (bulleted) list

                        TYPE= "DISC", "CIRCLE", and "SQUARE"

 

<MENU>       </MENU>     A menu list of items

 

<DIR>       </DIR>          A directory listing

 

<LI >       </LI>          A list item

 

<DL>       </DL>       A definition list or glossary list

 

<DT>                    A definition term

 

<DD>                    The correponding definition to a definition term

 

·         Tables

 

Begin Tag           End Tag            Meaning

<TABLE>       </TABLE>    Create a table

                        Attributes: BORDER, ALIGH, WIDTH, CELLSPACING,

                        CELLPADDING, BGCOLOR, RULES, FRAME

 

<CAPTION>   </CAPTION>      Caption of a table

 

<TR>        </TR>       Define table rows

                        Attributes; ALIGN (left, right, center), VALIGN

(top, middle, bottom)

 

<TH>        </TH>       Table heading cell

                        Attributes; COLSPAN, ROWSPAN, ALIGN, VALIGN,

WIDTH, HEIGHT

 

<TD>        </TD>       Table data cell

 

 

 

·         User Forms

Begin Tag           End Tag            Meaning

 

<FORM>       </FORM>      Indicates a form

                        Attributes; ACTION, METHOD, ENCTYPE, TARGET,

NAME, ONSUBMIT, ONRESET

 

<INPUT>                 An input widget for a form

                        Attributes: TYPE, NAME, VALUE, ALIGN, CHECKED,

MAXLENGTH, SIZE, SRC, ONCLICK, ONDBCLICK,

ONSELECT, ONCHANGE, ONFOCUS, OBBLUR

 

<TEXTAREA>       </TEXTAREA> Create a multi-line text field

                        Attributes: NAME, ROWS, COLS, WRAP, ONSELECT,

                        ONCHANGE, ONFOCUS, ONBLUR, ONKEYDOWN,

ONKEYPRESS, ONKEYUP

 

                        <TEXTAREA NAME=".." ROWS=xxx, COLS=yyy>

                         </TEXTAREA>

 

<SELECT>       </SELECT>   Create a combo box or a list box to let user

select among predefined options.

Attributes: NAME, SIZE, MULTIPLE, ONCLICK,

ONFOCUS, ONBLUR, ONCHANGE

 

<OPTION>      </OPTION>   Used or valid inside the <SELECT> element.

                        Attributes: SELECTED, VALUE

 

·         Input Types  and Variables

 

Text Box for Input

<INPUT TYPE="text" NAME="lastname">

 

Submit and Reset Buttons

<INPUT TYPE="SUBMIT">

<INPUT TYPE="RESET">

 

·         Script and Added Programming Language Features

 

<script>      </script>   Define a script within the document

 

Attributes

charset=name            Define character set used to encode the script

defer                   Defer execution of the script

language=lang           Specify the language used

src=URL                 Specify the URL of an external script to be

loaded

type=type               Specify the MIME type of the script

 

<param>      </param>    Supply a parameter to the <applet> or <object>

surrounding the tags

 

Attributes:

Id = name

Name=string

Type=type

Value=string

Valuetype=type

 

 

Sending Email

 

<P> Send Email? <A  HREF= "mailto:lin@ipfw.edu" lin@ipfw.edu </a>

 

 

Embedded Java Applet Programs

 

The APPLET tage enables us to embed a Java program into a page and send over to client computer.

 

<APPLET CODE="…"

   WIDTH= xxxx

    HEIGHT=xxxx ….>

    </APPLET>

 

 

Embedding ActiveX Controls

 

<OBJECT CLASSID="clsid: …"

                WIDTH = xxx

                HEIGHT = xxx

                VPAGE = 0

                  ALIGN="LEFT" >