Producing Web Pages using HTML The Computer as
Producing Web Pages using HTML “The Computer as an Educational Tool: Productivity and Problem Solving” ©Richard C. Forcier and Don E. Descy
Topics: Introduction The World Wide Web Basic HTML Editors Conclusions/Questions
WWW Pages: Easy to make Written in HTML: Hyper. Text Markup Language Saved as “text” or “ASCII” Typical student=8 minutes New page. 1 seconds!!
HTML: Hyper. Text Markup Language NOT a programming language!!! A markup language Tells browser how to display page Uses tags : <tag>
Markup Language: ¶This is the story about a big dog. The dog said: ¶Hi, I am the. I 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): Between lt < and gt > Not case specific Three Types: Informational: <html> Single: Paired: <center> </center>
HTML Tags Informational: Information for Browser Many not needed but good form <html> <head> </head> <body> </html>
HTML Tags - Single: Usually text change End text, don’t skip line <hr> Horizontal line
HTML Tags - Paired: Temporary change <h 1>largest heading</h 1> <center>center text</center> <i>italics</i> <b>bold</b> <p>stop line, skip next line</p> <u> ? </u>
Example: <html> <head> <title>My First Web Page</title> </head> <body> <center><h 1>Don's Web Page</h 1></center> <hr> </body></html>
Example 2: <html> <head> <title>My First Web Page</title> </head> <body bgcolor="#FFFFFF"> <center><h 1>Don's Web Page</h 1></center> <hr> </body></html>
<body bgcolor="#FFFFFF"> <body bgcolor="#OOFFOO">
Background Colors: <body bgcolor="#FFFFFF"> White = #FFFFFF Red = #FF 0000 Green = #00 FF 00 Blue = #0000 FF Mandarin Orange = #E 47833
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: <html><head> <title>My First Web Page</title> </head> <body bgcolor="#FFFFFF"> <center><h 1>Don's Web Page</h 1></center> <hr> XXXX </body></html>
<P> I like Don's Page! <p> I like <a href="http: //lme. mankato. msus. e du/ded/don. html">Don's</a> Page! <P>
<html> <head> <title>My First Web Page</title> </head> <body bgcolor="#FFFFFF"> <center><h 1>Don's Web Page</h 1></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: <img src=”image file name" > <img src="don. gif">
<html><head> <title>My First Web Page</title> </head><body bgcolor="#FFFFFF"> <center><h 1>Don's Web Page</h 1></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><h 1>Don's Web Page</h 1></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 Editors
HTML Editors: Use like a word processor Easily import pictures Most everything automated NO need to write HTML written in the background
Home. Page www. filemaker. com/products /homepage 3. html Windows, NT, Mac Clip art, templates, Applets Very easy to use $99
Page. Mill www. Adobe. com/prodindex/ pagemill/prodinfo. html Web site creation and management Integrates many packages $99
MS Front. Page www. microsoft. com/frontpag e/ Web site creation and management $49. 95 !
Netscape Composer www. netscape. com/ Built-in to Communicator Powerful, easy to use Free !!
Tool bars Home. Page Adobe Page. Mill Netscape Composer
Questions? ?
- Slides: 35