Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an...
-
Upload
prudence-sims -
Category
Documents
-
view
221 -
download
0
Transcript of Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an...
![Page 1: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/1.jpg)
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
![Page 2: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/2.jpg)
Topics:Topics:
IntroductionThe World Wide WebBasic HTMLHTML EditorsConclusions/Questions
![Page 3: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/3.jpg)
WWW Pages:WWW Pages:
Easy to makeWritten in HTML:HyperText Markup Language
Saved as “text” or “ASCII”Typical student=8 minutesNew page .1 seconds!!
![Page 4: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/4.jpg)
HTML:HTML:HyperText Markup LanguageNOT a programming
language!!!A markup languageTells browser how to
display pageUses tags : <tag>
![Page 5: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/5.jpg)
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...
![Page 6: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/6.jpg)
HTML Tags (1):HTML Tags (1):
Between lt < and gt >Not case specificThree Types: Informational: <html> Single: <br> Paired: <center> </center>
![Page 7: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/7.jpg)
HTML Tags -HTML Tags -Informational:Informational:
Information for BrowserMany not needed but good form <html>
<head> </head> <body> </body> </html>
![Page 8: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/8.jpg)
HTML Tags - Single:HTML Tags - Single:
Usually text change <br> End text, don’t skip
line <hr> Horizontal line
![Page 9: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/9.jpg)
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>
![Page 10: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/10.jpg)
Example:Example:<html><head><title>My First Web Page</title></head><body><center><h1>Don's Web
Page</h1></center><hr></body></html>
![Page 11: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/11.jpg)
![Page 12: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/12.jpg)
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>
![Page 13: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/13.jpg)
<body bgcolor="#FFFFFF">
<body bgcolor="#OOFFOO">
![Page 14: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/14.jpg)
Background Colors:Background Colors:<body bgcolor="#FFFFFF">White = #FFFFFFRed = #FF0000Green = #00FF00BlueBlue = #0000FFMandarin Orange =
#E47833
![Page 15: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/15.jpg)
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>
![Page 16: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/16.jpg)
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>
![Page 17: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/17.jpg)
<P>I like Don's Page!<p>I like <a
href="http://lme.mankato.msus.edu/ded/don.html">Don's</a> Page!
<P>
![Page 18: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/18.jpg)
<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>
![Page 19: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/19.jpg)
![Page 20: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/20.jpg)
![Page 21: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/21.jpg)
Adding Images:Adding Images:
<img src=”image file name" >
<img src="don.gif">
![Page 22: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/22.jpg)
<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>
![Page 23: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/23.jpg)
<hr><p><center><img src="don.gif"></center><p><hr>
![Page 24: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/24.jpg)
<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>
![Page 25: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/25.jpg)
![Page 26: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/26.jpg)
![Page 27: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/27.jpg)
HTML EditorsHTML Editors
![Page 28: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/28.jpg)
HTML Editors:HTML Editors:
Use like a word processorEasily import picturesMost everything automatedNO need to write HTMLHTML written in the background
![Page 29: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/29.jpg)
HomePageHomePage
www.filemaker.com/products/homepage3.html
Windows, NT, MacClip art, templates, AppletsVery easy to use$99
![Page 30: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/30.jpg)
PageMillPageMill
www.Adobe.com/prodindex/pagemill/prodinfo.html
Web site creation and management
Integrates many packages$99
![Page 31: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/31.jpg)
MS MS FrontPageFrontPage
www.microsoft.com/frontpage/
Web site creation and management
$49.95 !
![Page 32: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/32.jpg)
Netscape Netscape ComposerComposer
www.netscape.com/Built-in to CommunicatorPowerful, easy to useFree !!
![Page 33: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/33.jpg)
Tool barsTool barsHomePage
Adobe PageMill
Netscape Composer
![Page 34: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/34.jpg)
Questions??Questions??
![Page 35: Producing Web Pages using HTML The Computer as an Educational Tool: “ The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C.](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649eb35503460f94bbb2d2/html5/thumbnails/35.jpg)