Introduction to Web Authoring

Introduction toWeb Authoring

Bill Hart-Davidson

[email protected]

AIM: billhd30

Session 2

www.msu.edu/~hartdav2/wa.html

Today in Class…

• Questions?• Discuss the first

project: Web Genre Analysis & Parody

• HTML basics

Choosing a Genre to Analyze

• Pick one that will be important to you in your career. Either one you will you use a lot or one you will be involved in creating.

• Past choices: online catalogue; automobile marketing site; news portal; gaming fan site; corporate intranent; e-learning site.

Project 1: Genre Analysis & Parody/Tribute

http://www.msu.edu/~hartdav2/wa/ga.html

For Next Time…

1. Play around with your project page and/or the simple pages

2. Choose a site to analyze for project 13. Start working with the Genre Analysis

questions, modifying them as needed to suit your project

Today’s Exercise

Add the following to your project page:

1. An image

2. A link that works (e.g. to our class page)

Also, change the text so that it is appropriate for you - adding your name, etc.

HTML Reference

The following pages provide an overview of the basic html tags.

Copy & Paste these into your html file, save the file, then view the file in a browser to see what they do.

HTML Document Basic Structure

<HTML>

<HEAD>

<!– Page title and hidden info </HEAD>

<BODY>

<!– Browseable, visible text </BODY>

</HTML>

Note: Any plain text file with this basic structure will do …name it with a .html extension and open it in any web browser

Header Tags

<HEAD>

<TITLE>

Should match Web page heading

</TITLE>

<META>

</HEAD>

Body Tags 1: How does the whole page look?

<BODYBGCOLOR=“#FFFFFF”

BACKGROUND=“background.gif”

LINK=“#CC3333”

ALINK=“#CCFFFF”

VLINK=“#C0C0C0”

TEXT=“#000000”>

Body Tags 2: Six levels of headings

Headings

<H1>Largest heading</H1>

<H2> </H2>

<H3> </H3>

<H4> </H4>

<H5> </H5>

<H6>Smallest heading</H6>

Body Tags 3: Basic “block” level tag, the paragraph

Paragraphs

<P> </P>

<P>This is a short example of a

paragraph</P>

A simple text-only menu bar<p>

<hr noshade size="1"><br>

Teams [

<a href="#team1">1</a> |



]

<br><br>

</p>

Body Tags 4: Lists, with numbers and with bullets

Lists Unordered<UL><LI>Apples</LI>

<LI>Oranges</LI></UL>

Ordered<OL><LI>Priority 1</LI><LI>Priority 2</LI></OL>

Body Tags 5: Other listsLists (continued)

Definition

<DL>

<DT>HTML</DT><DD>A tag language</DD>

</DL>

Example: Def. List for a team project, 1

<dl>

<dt><b><a name="team1">Team 1 -

<a href="">Buy_It.com</a></b></dt>

<br><br>

<dd>Here's a description of this Web site.

<p><b>Team members</b>

<br>

Example: Def. List for each team project, 2

Here are the names of the people involved.</p>

<p><b>Send us your comments</b>

<br>

Here's how to contact us.

<p><hr noshade size="1"></p>

</dd>

Body Tags 6: White Space!

Breaks

<BR>

<BR CLEAR=“left | right | all“>

Body Tags 7: Horizontal lines for dividing a page

Horizontal Rules

<HR>

<HR NOSHADE SIZE=“1“>

Body Tags 8: Inserting an inline image file

Graphics

<IMG SRC=“my.gif“

ALT=“My picture”

HEIGHT=“24“

WIDTH=“32“

ALIGN=“left | right | center“

HSPACE=“6”

VSPACE=“6”>

The SRC is the “source” of the image. The URL of the source tells the browser where to find the image. In this example, the image is stored in the same directory as the page it is sitting on.

Body Tags 9: Links, External & Internal

Anchors (Links) Within a Page

“From” Link

<A HREF=“#Section 1”>Go to Section 1</A>

“To” Link

<A NAME=“Section 1”>Section 1</A>

Body Tags 10: Links, absolute and relative

Anchors (Links) to Another PageAbsolute

<A HREF=“http://www.rpi.edu/ ~hartdw/”>Bill’s page</A>

Relative

<A HREF=“wwww4.html”>Writing to the World Wide Web, section 4</A>

Body Tags 12: The mailto link

Mailto Anchors

<A HREF=“mailto:[email protected]”>

Bill’s e-mail</A>

Body Tags 13: The old way to do page layout, tables!

<TABLE><CAPTION>Simple table</CAPTION>

<TR><TH>Column heading</TH></TR><TR>

<TD>Column data</TD></TR>

</TABLE>

TR = table row

TD = table cell

..actually, TD stands for “table data,” but you can have a cell with no data in it…

Body Tags 14: Table attributes

<TABLE

BORDER=“1”

CELLPADDING=“4”

CELLSPACING=“0”

WIDTH=“450”>

Body Tags 15: A table row

<TR

BGCOLOR=“#C0C0C0”

ALIGN=“left | right | center”

VALIGN=“top | bottom | center”>

Body Tags 16: A table cell

<TD

BGCOLOR=“#C0C0C0”

ALIGN=“left | right | center”

VALIGN=“top | bottom | center”

COLSPAN=“2”

ROWSPAN=“2”>

Body Tags 17: Styles you can apply to text

Text: We can specify

• Bold text

• Italics

• Font size

• Font face

• Font color

Body Tags 18: Style tags (override style sheets)

• <B>Bold text</B>

• <I>Italicized text</I>

• <FONT SIZE=“3”FACE=“ARIAL”

COLOR=“blue”>

Blue Arial text (normal/default size)

</FONT>

Body Tags 19: some codes for special characters

• Special Characters< <> >&&" “&#reg;registered trademark trademark non-breaking space (eg. blank

table cell)

Documents

Introduction to Web Authoring