You can't create a proper web page unless you know the secret languages used by your browser. One of these is the markup language HTML. This module will give you the essential codes necessary for every web page. (Other languages your browser knows include JavaScript and XML.)
Use the essential XHTML commands to create a web page.
Reading for this module. Do a web search for: XHTML tutorial
If you find a good site post it out on the Discussion Board under "Useful Links"
with a brief paragraph describing why it is so good as well as the URL.
Take the Self Quiz:XHTML as many times as you want. Use this as a learning tool to learn some of the facts covered in this module. The self quiz closes on Thursday before the graded quiz opens.
Work
through
Tutorial:HTML
Pay attention to your frustrations with Ladle Rat Rotten Hut
and jot down some notes for the next learning activity.
Resources:
LadleRat.txt
(right mouse click, "save target as")
LadleRat.html
Post your frustations and conclusions to Ladle Rat Rotten Hut
on the Discussion Board under the topic "Ladle Rat Rotten Hut" and
participate in the discussion by responding to each other's comments.
(1) If you got frustrated as you read the texts list as reasons why
you think this happened
(2)
What could be done differently to make this text more user friendly
You can also include answers to the following:
(1)
What
is the purpose of XHTML?
(2) Based
on the purpose of XHTML, what was your initial response to the
plain text version of Ladle Rat Rotten Hut?
(3) How
did this change when you viewed the XHTML version of the story.
What were some of the clues that made the XHTML page easier to
understand? How did the the hyperlinks help with your understanding
of the page?
(4) How
will this experience change how you write/present information
in the future?
(Note to the high achievers: Please don't answer
all the questions in one posting, answer one and then ask your own
question to encourage more discussion from others.)
(Note to low achievers: Okay, time to get with the program ;-) You
are missing all the fun! Just reading everyone's comments is not the learning you
want. You learn to swim by swimming, not by sitting on the beach watching everyone
else having all the fun...)
Work through Tutorial:xhtml - This
will show you what XHTML is and why it is important to write your web code to these
standards.
Work through Tutorial:Validating This
tutorial will show you a great XHTML Validation tool available with Firefox and how
to use it. You will be expected to use
the FireFox extension to validate all future projects. All your code
will be expected to meet XHTML standards with zero errors/ zero warnings
Note: The HTML Validator add-on tool has a tendancy to slow down
web pages. So, in the future if you are experiencing a browser slow down you might
want to go in and disable this addon, just enabling it when you are writing new XHTML
code. In fact, I disable all my FireFox addons so my browser will display as fast
as possible and only turn the tools on when I need them. It really makes a difference
in how fast I can get stuff done!
WRITE
a wild, crazy, story that will help you remember the essential HTML
tags: <html> <head> <title></title> </head> <body> </body> </html>.
POST
your story in the discussion area using a catchy title.
Remember, the tags should be presented in the correct order.
Here's some sample zany stories
others have written.
Create
a basic template using your favorite text editor. Include a
comment header and the essential elements for future reuse. Using templates
will save you LOTS of typing.
Name this file templateHTML.html.
(Later in the course you will be making special purpose template files such as
templateTable.html, templateImageMap.html, templateForm.html, etc.)
Optional for DreamWeaver users: Use
the Code view to create this template. Then do a
"save as" and select "Template files '*dwt' as the file type. This will
put your template in a folder named Template in your working directory.
To use your templates in DreamWeaver:
Select File/New
and select the Template tab. Your template should be listed in the middle
column.
You can later edit your templates just like regular html pages, its the
file extension (.dwt) and storing them in the Template folder that makes
them unique.
(Click on the image for a larger view.)
Tip: Don't check
the option "Update page when template changes" at the bottom of the
window. This may sound like a great idea, but it gets crazy if you are
constantly updating your template which is what you will be doing for
several weeks as you learn more things.
Optional: Web Collaboration - Free tools that allow you to share documents, ideas, and web pages. This tutorial was developed for a workshop I presented to the Mankato Leadership Institute.
| Activity | Due Date |
|---|---|
Take the Quiz: XHTML (This quiz can be found by clicking on the Navigation Menu/Quizzes.) |
Before 11:55 pm Sunday,
Feb 1st |
Complete
Project:xhtml Submit as an assignment using D2L. |
Before 11:55 pm Sunday, Feb 1st |
All done? Good going! You are now making web pages. Go ahead and do something that's not as fun (like writing that Composition paper you've been putting off) and then come back and start working with the next module: Lists |
--- |
Web Servers are picky about file names. Type in one wrong character
and the page won't display. On most servers even upper/lower case matters!
Because
of this you should have a set of rules that you follow so that your file names
are always consistent. This is especially true if other people will be working
with your files which is very common in web work and programming.
Here's the file naming conventions that I have developed over the years as a programmer and web person. What you do is not as important as being consistent. Using the same name convention will save you countless hours of "fixing" things and looking up to see how a filename was spelled. I recommend using these rules for filenames, folders and directories, and variable names.
You can read more out on my blog: http://webexplorations.com/blog/?p=7
Note: I can't emphasize how important this is. Many of our third and fourth semester students all the sudden "see the light" and understand why these rules have been emphasized over and over. It's really frustrating when your page doesn't display or a graphic won't display, especially when you find out it was as simple as a single letter capitalized one place and typed in lower case in another. One letter can make all the difference between success and failure.
Questions? Send me an email: peter.johnson@southcentral.edu
Read my blog at:
http:webexplorations.com/blog
Strong Start, Successful Finish