producing web pages using html the computer as an educational tool: “ the computer as an...
TRANSCRIPT
Producing Web Producing Web Pages using Pages using
HTMLHTML“The Computer as an Educational The Computer as an Educational
Tool: Tool: Productivity and Problem Solving”Productivity and Problem Solving”
©Richard C. Forcier and Don E. ©Richard C. Forcier and Don E. DescyDescy
Topics:Topics:
IntroductionThe World Wide WebBasic HTMLHTML EditorsConclusions/Questions
WWW Pages:WWW Pages:
Easy to makeWritten in HTML:HyperText Markup Language
Saved 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 HTML
This is the story of a big dog. The Dog said: Hi, I am the big dog. I hope that 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 - Single:HTML Tags - Single:
Usually text change <br> End text, don’t skip
line <hr> Horizontal line
HTML Tags - Paired:HTML Tags - 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>
<body bgcolor="#FFFFFF">
<body bgcolor="#OOFFOO">
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>
<P>I like Don's Page!<p>I like <a
href="http://lme.mankato.msus.edu/ded/don.html">Don's</a> Page!
<P>
<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><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>XXXX</body></html>
<hr><p><center><img src="don.gif"></center><p><hr>
<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><hr><p><center><img src="don.gif"></center><p><hr></body></html>
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.html
Windows, NT, MacClip art, templates, AppletsVery easy to use$99
PageMillPageMill
www.Adobe.com/prodindex/pagemill/prodinfo.html
Web site creation and management
Integrates many packages$99
MS MS FrontPageFrontPage
www.microsoft.com/frontpage/
Web site creation and management
$49.95 !
Netscape Netscape ComposerComposer
www.netscape.com/Built-in to CommunicatorPowerful, easy to useFree !!
Tool barsTool barsHomePage
Adobe PageMill
Netscape Composer
Questions??Questions??
