Introduction to Web Authoring
description
Transcript of Introduction to Web Authoring
![Page 1: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/1.jpg)
Introduction toWeb Authoring
Bill Hart-Davidson
AIM: billhd30
Session 2
www.msu.edu/~hartdav2/wa.html
![Page 2: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/2.jpg)
Today in Class…
• Questions?• Discuss the first
project: Web Genre Analysis & Parody
• HTML basics
![Page 3: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/3.jpg)
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.
![Page 4: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/4.jpg)
Project 1: Genre Analysis & Parody/Tribute
http://www.msu.edu/~hartdav2/wa/ga.html
![Page 5: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/6.jpg)
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.
![Page 7: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/9.jpg)
Header Tags
<HEAD>
<TITLE>
Should match Web page heading
</TITLE>
<META>
</HEAD>
![Page 10: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/10.jpg)
Body Tags 1: How does the whole page look?
<BODYBGCOLOR=“#FFFFFF”
BACKGROUND=“background.gif”
LINK=“#CC3333”
ALINK=“#CCFFFF”
VLINK=“#C0C0C0”
TEXT=“#000000”>
![Page 11: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/11.jpg)
Body Tags 2: Six levels of headings
Headings
<H1>Largest heading</H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6>Smallest heading</H6>
![Page 12: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/12.jpg)
Body Tags 3: Basic “block” level tag, the paragraph
Paragraphs
<P> </P>
<P>This is a short example of a
paragraph</P>
![Page 13: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/13.jpg)
A simple text-only menu bar<p>
<hr noshade size="1"><br>
Teams [
<a href="#team1">1</a> |
<a href="#team2">2</a> |
<a href="#team3">3</a> |
]
<br><br>
</p>
![Page 14: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/14.jpg)
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>
![Page 15: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/15.jpg)
Body Tags 5: Other listsLists (continued)
Definition
<DL>
<DT>HTML</DT><DD>A tag language</DD>
</DL>
![Page 16: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/16.jpg)
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>
![Page 17: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/17.jpg)
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>
![Page 18: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/18.jpg)
Body Tags 6: White Space!
Breaks
<BR>
<BR CLEAR=“left | right | all“>
![Page 19: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/19.jpg)
Body Tags 7: Horizontal lines for dividing a page
Horizontal Rules
<HR>
<HR NOSHADE SIZE=“1“>
![Page 20: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/20.jpg)
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.
![Page 21: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/21.jpg)
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>
![Page 22: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/22.jpg)
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>
![Page 24: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/24.jpg)
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…
![Page 25: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/25.jpg)
Body Tags 14: Table attributes
<TABLE
BORDER=“1”
CELLPADDING=“4”
CELLSPACING=“0”
WIDTH=“450”>
![Page 26: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/26.jpg)
Body Tags 15: A table row
<TR
BGCOLOR=“#C0C0C0”
ALIGN=“left | right | center”
VALIGN=“top | bottom | center”>
![Page 27: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/27.jpg)
Body Tags 16: A table cell
<TD
BGCOLOR=“#C0C0C0”
ALIGN=“left | right | center”
VALIGN=“top | bottom | center”
COLSPAN=“2”
ROWSPAN=“2”>
![Page 28: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/28.jpg)
Body Tags 17: Styles you can apply to text
Text: We can specify
• Bold text
• Italics
• Font size
• Font face
• Font color
![Page 29: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/29.jpg)
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>
![Page 30: Introduction to Web Authoring](https://reader035.fdocuments.net/reader035/viewer/2022062309/56813bee550346895da51e20/html5/thumbnails/30.jpg)
Body Tags 19: some codes for special characters
• Special Characters< <> >&&" “&#reg;registered trademark™ trademark non-breaking space (eg. blank
table cell)