producing web pages using html

Producing Web Producing Web Pages using HTMLPages using HTML

“The Computer as an Educational Tool: The Computer as an Educational Tool: Productivity and Problem Solving”Productivity and Problem Solving”

©Richard C.©Richard C. ForcierForcier and Don E. Descyand Don E. Descy

Topics:Topics:

IntroductionThe World Wide WebBasic HTMLHTML EditorsConclusions/Questions

WWW Pages:WWW Pages:

Easy to makeWritten in HTML:HyperText Markup LanguageSaved as “text” or “ASCII”Typical student=8 minutesNew page .1 seconds!!

HTML:HTML:HyperText Markup LanguageNOT a programming

language!!!A markup languageTells browser how to

display pageUses tags : <tag>

Markup Language:Markup Language:¶This is the story about a big

dog. The dog said: ¶Hi, I am theI big dog. I hope that you arel learning lots about HTMLThis is the story of a big

dog. The Dog said:Hi, I am the big dog. I hopethat you are learning...

HTML Tags (1):HTML Tags (1):

Between lt < and gt >Not case specificThree Types:

Informational: <html>Single: <br>Paired: <center> </center>

HTML Tags HTML Tags --Informational:Informational:

Information for BrowserMany not needed but good form <html>

<head> </head><body> </body></html>

HTML Tags HTML Tags -- Single:Single:

Usually text change<br> End text, don’t skip

line<hr> Horizontal line

HTML Tags HTML Tags -- Paired:Paired:

Temporary change<h1>largest heading</h1><center>center text</center><i>italics</i><b>bold</b>

<p>stop line, skip next line</p><u> ? </u>

Example:Example:<html><head><title>My First Web Page</title></head><body><center><h1>Don's Web

Page</h1></center><hr></body></html>

Example 2:Example 2:<html><head><title>My First Web Page</title></head><body bgcolor="#FFFFFF"><center><h1>Don's Web

Page</h1></center><hr></body></html>

Background Colors:Background Colors:<body bgcolor="#FFFFFF">White = #FFFFFFRed = #FF0000Green = #00FF00BlueBlue = #0000FFMandarin Orange =

#E47833

Adding Links:Adding Links:

<a href="location" > Hot link</a>

<a href="http://www.disney.com">

Disney Page</a><a href="don.html">

Don's Page</a>

Example 3:Example 3:<html><head><title>My First Web Page</title></head><body bgcolor="#FFFFFF"><center><h1>Don's Web

Page</h1></center><hr>XXXX</body></html>

<html><head><title>My First Web Page</title></head><body bgcolor="#FFFFFF"><center><h1>Don's Web Page</h1></center><hr><P>I like Don's Page!<p>I like <a

href="http://lme.mankato.msus.edu/ded/don.html">Don's</a> Page!

<P></body></html>

Adding Images:Adding Images:

<img src=”image file name" >

<img src="don.gif">

HTML EditorsHTML Editors

HTML Editors:HTML Editors:

Use like a word processorEasily import picturesMost everything automatedNO need to write HTMLHTML written in the background

HomePageHomePage

www.filemaker.com/products/homepage3.htmlWindows, NT, MacClip art, templates, AppletsVery easy to use$99

PageMillPageMill

www.Adobe.com/prodindex/pagemill/prodinfo.htmlWeb site creation and managementIntegrates many packages$99

MS FrontPageMS FrontPage

www.microsoft.com/frontpage/Web site creation and management$49.95 !

Netscape ComposerNetscape Composer

www.netscape.com/Built-in to CommunicatorPowerful, easy to useFree !!

Tool barsTool barsHomePage

Adobe PageMill

Netscape Composer

Questions??Questions??

producing web pages using html

Documents