EDU221IntroToHTML

1. Start a new Word document. (Or use //Notepad// in the accessories folder on a Windows machine.) 2. Type in what you see below. Replace Mahildabob's name with your name. Mahildabob's Website Under Construction 3. Click on "File", drag down to "Save As" 4. For "Format" select "Text Only" (or "Plain Text") 5. Name your file "sample.html" (no quotation marks) 6. When it tries to warn you that this isn't going to work well, click on "Yes" to do it anyway. //(Don't close the Word document!)// 7. Open Firefox (or open a new tab in Firefox). 8. click on "File," drag down to "Open File" 9. Pick your sample.html file 10. Put your Word and Firefox windows side by side. Compare the two looks of sample.html What's the same? What's different? Why?

Notice how Mahildabob's Website Under Construction is all on one line, even though you put a return after the word website. HTML coding does not recognize the return character, so you have to add the code for a break to tell it where to insert a line break: 1. Put a break in your Word document (insert after the word website or before the word under) 2. Save your Word document again (and still don't close it) 3. Click the refresh/reload button in Firefox Did you see the change? :-)

Try adding some of these codes and see what happens. Feel free to try different text, different numbers, etc. Remember to save the Word document after you add the code, then click the refresh/reload button in Firefox to see the change.
 * Add a horizontal rule or horizontal line:
 * Add a headline or "header": My first page
 * Add a different sized header: By Mergatroy
 * Make text bold: these words are important
 * Make text italicized for emphasis: these words are important, too
 * Center some text: this text will be in the middle of the webpage

Try changing colors... Remember to save the Word document after you add the code, then click the refresh/reload button in Firefox to see the change. [Note: Not all color words are "universal". If you pick a color besides yellow and it doesn't work, try a different color name or use a [|color hex value]]
 * Change the background color:

TRY THIS ONE INSTEAD AND SEE IF IT WORKS BETTER ON THE COLORS: http://www.homepagemadeeasy.com/color_chart.html

http://www.web-source.net/html_codes_chart.htm
 * Still have time to play?** Check out some of this code (keep scrolling . . . there's a LOT on this page):


 * Want to see some of the endless possibilities for web page design (not just pure html code)?** Check out http://del.icio.us/texastheresa/html.code?

http://www.countmyvisitors.com/help/nvu/index.php http://www.pax.com/free-counters.html
 * Save this info for later, but here's how to put "counters" on your page that count how many visitors come look at what you've created** (Thanks Stephanie L. from EDU 221 spring 2009):