SMAD 202w - Web Development - Web Site One

Tasks

• Introduction to HTML and Exercise
• Web Site One
• Absolute and Relative Links
• Assignments

 

An Review to HTML

Now that you've gotten a simple Web page written, let's learn a bit more about the language. True, you will be using Dreamweaver for the second part of this class, but you still must learn enough HTML to make a simple page. There are a number of reasons

• No graphical editor is foolproof, and often you will need to fix the HTML code "by hand."
• All graphical editors realize this and give you access to the HTML code
• Graphical editors tend to lag developments in HTML by about a year.
• There are times when you need to enter HTML code, such as in BlackBoard messages. They can be much more expressive if you use the HTML option.
• There are times when it is faster to just write the code.
• I require you to do it

HTML Basics

Read and work through HTML Dog, a site full of web authoring tutorials. Note that these pages are constructed to allow you to print them out if you wish. This will help give you a quick introduction to the subject.

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

• Getting Started

Then, be sure to understand the following skills and tags:

• Tags, Attributes, and Elements
• Page Titles
• Paragraphs
• Headings
• Lists
• Links
• Images
• Tables

In each case, be sure to follow along with the exercises by making your own web pages.

Exercise

Create a simple web page (or expand the page from last week) that introduces yourself. It should use the above tags to create a pleasing format. Content should include:

• welcome message
• grades/content you intend to teach
• hobbies and interests
• a short biography
• other content along this line

You should use paragraphs, headlines, and background color as basic organizing elements. Experiment with bold/italics, blockquotes, aligning text and line breaks to give a more distinctive look.

 

return to top

Web Site One

Laying out the Personal Site

I have provided a sample resume and hotlist for you to work with during this exercise. We will first link the files together, then upload the site to the server. If time permits, we will create a folder structure and re-link the files according to the principles of relative linking.

1. Make a folder on your flash drive titled "yourname_website" (where yourname is your name)
2. Place the .html file we made Monday (the Simple Web Page) in the new "yourname_website" folder
3. Rename it index.html
4. Download (File->Save As [choose HTML Source]) this sample resume and save it in the new "yourname_website" folder
5. Download (File->Save As [choose HTML Source]) this sample hotlist and save it in the local "yourname_website" folder
6. Open each file and look for the text to link. Put in the correct <a href="filename"></a> tags (I'll help a lot). Each link is in brackets; remove the brackets when you insert the linking code.
7. Open the files in your browser and see if they work.

Perfect? Now try and create the structure for assignment one. Do this work in the local "yourname_website" folder you just created.

1. Create the structure
2. Drag the files into the proper locations as listed in 1.
3. Change the code on the links to reflect the relative path names. This file gives you a list of the exact code you need.
4. Test in a browser
5. We will upload this to your web account next week.

Find and Bookmark 5 - 10 Interesting Web Sites

Last week we started working on searching the web. This week we will continue the work, but now with a purpose. Your personal web site needs to contain a hotlist that consists of links found on the World Wide Web that relate to topic you are interested in. During the second part of class, complete the following.

1. Read Searching the World Wide Web
2. Read Bookmarking
3. Find and bookmark 5 to 10 sites you would like to include in your hotlist
4. Save the bookmark file into your personal site folder

Start Formatting your Personal Web Resume

Either take the example resume or your own resume and start experimenting with text formatting to make the document more legible.

 

return to top

 

Absolute and Relative Links

When writing html code, you will eventually need to create links. One of the most important things to keep straight are how to write absolute and relative links. Both use the <a href> tag, but to the actual linking in a different way. Take the following tutorial to be clear on this important concept:

• Absolute and Relative Link Tutorial

 

return to top

Assignments

Exercises

• Exercise to help find things
• Complete your simple Web site with links and content. It should work something like this, though your site may not yet be as elaborate. You can download and steal code from me as you like.

Readings

• HTML Intermediate Tutorial

Search SMAD 202