EDUC 540 - Educational Technology: Agenda for June 26

 

HTML in a Day

By the end of class we will have created and published a complete web site that includes a home page, resume and hot list. To do this, we will use only a simple text editor. Here is an example of what you will have:

Introduction to the Internet

Creating an HTML Document

HTML Syntax

<TagName Properties>Content</TagName>


Example - <h1 align="center">Mary Taylor</h1> yields:

Mary Taylor


Making a Basic HTML Document Structure

  1. Create the required elements
    Type the following into a blank document in a text editor like NotePad:
    • Line 1: <html>
    • Line 2: <head>
    • Line 3: <title> </title>
    • Line 4: </head>
    • Line 5: <body>
    • Line 6: </body>
    • Line 7: </html>
  2. Give the page a title
    • Place the cursor between <title> and </title>
    • Type in a title, such as My Page
  3. Enter and format text
    • Place the cursor after <body> and press Return to make some space
    • Type <h1>Hello World!</h1>
  4. Save and view the page in a browser
    • Choose Save As (be sure you are saving the file as text if in a word processor)
    • Name the file index.html

Break

The Simple Site

Now that you know everything about HTML, it's time to make your personal web site. Follow these instructions:

FTP

A web page is just a local document until it is published. I have a place for you to place things on my web server. The following tutorial will help you post your web page on the Internet. I will distribute the ftp login information in class.

Resources

HTML Basics

For a perspective and a chance to practice some more use Webmonkey, a site full of web authoring tutorials. Note that these pages are constructed to allow you to print them out if you wish. The directions are a bit chatty, but give you a quick introduction to the subject.

First, read through the following to get a general understanding of HTML

Then, use the Webmonkey Teaching Tool to learn the following skills and tags:

In each case, be sure to practice the tag by completing the "try it" link at the end of the article if one is present.

 

Web Graphics

The HTML

You will always use "inline" graphics. They are placed using the <img src="url"> tag. The URL can be absolute or relative, but 99% of the time you will use relative (linking to another person's links is both bad form and risky, as who knows with they will move them?).

Exercise

  1. Download this file - sample.gif
  2. Place it in the same foler as last week's index.html
  3. Create a link on your index.html by typing <img src="sample.gif">
  4. Upload the new version of index.html and the sample.gif file
  5. View in browser

Graphics Work

I'd like you to take a fair amount of time and work on graphics. There are a number of links available to help you at any level. Please view the table on the right for places to help your graphics work.

I strongly suggest going through Graphics 101.

Technologies of Interest


Assignments due tomorrow

Hollenbeck Home

Last modified Friday, January 5, 2007 9:31 PM

Search 540


June 12
June 13
June 14
June 15
June 19
June 20
June 21
June 22
June 26
June 27
June 28
June 29
July 3
July 4
July 5
July 6