Class Topics
- Create HTML template
- Empty tags vs. Container tags
- !DOCTYPE for XHTML complaint code
- W3C required <meta> tag
- Document attributes
- Styles and intrinsic events
- Headings as design elements
- Paragraphs
- Link breaks
- Horizontal rules
- Background colors and images
- Indentation and making your HTML/XHTML code readable
- HTML/XHTML Validator at http://validator.w3.org
Online Topic (Due Week 3)
Provide the URL for a well-designed Web site and describe at least one feature you think looks good, works well or in some way makes the site worth visiting.
Only the Chapter 2 readings and quiz need to be completed by the above due date. I am actually giving you two weeks to get your first Web page written, tested, validated and posted on your College Web site. What I would like you to do this week is get the Web page written, tested and validated. We can then spend next week installing the FTP (File Transfer Protocol) software and using it to get your new Web page transferred to the college server for the world to see. I'll be grading the online version in two weeks and will email you my feedback at that time.
- Read Chapter 2, be able to define the Key Terms
and answer the end of chapter Review Questions. I would recommend trying the Exploration exercises that are interspersed throughout the chapter.
- BONUS: Complete Chapter 2 Explorations 1 thru 8, validate the code and email Dr. T. an error-free copy of chapter2.htm.
- Create a XHTML complaint web page that will become your personal homework homepage.
This HTML file must be named index.htm--all lower case characters. Starting next week a validated and error-free
version of this file should always be posted on your Web site as part of your weekly homework.
Use the file homepage.htm
as an example of the information that must be included on this page.
DO NOT copy this code and just add your name! I expect you to use your own creativity to determine how this information is presented.
At a minimum, the following information must be included on the homework homepage:
- Your name
- Your email address
- Processor:
- Processor speed (MHz):
- Memory:
- Hard disk capacity:
- Modem type and/or speed:
- Removable storage media and capacity:
- Word processor/text editor:
- Internet browser:
- Internet service provider:
Your name, the instructor's name, class hour and due date should be
included as comments immediately after the <head> tag. Somewhere
within your home page the following tags or attributes must be used:
Tags
- <hr /> = Horizontal Rule
- <p> </p>= Paragraph
- <br /> = Break
- <h1> </ h1>= Heading level of your choice
Attributes
NOTE: Please limit your code for the next weeks to the HTML tags we have covered in our readings. The idea here is to challenge you to design good-looking Web pages within these limits. I will deduct points from this assignment if I see frames, tables, images and other elements we have not covered in class.
This week we want to create an HTML template you can reuse when creating new Web pages. Since every Web page contains the same basic structure, you can use the following code as a starting point for creating your first Web page.
Basic HTML/XHTML Structure
<html>
<head>
<title> Your Title Goes here< /title >
</head>
<body> This is where the majority of your work on your web page belongs. TEXT, IMAGES, GRAPHICS, FRAMES, and TABLES go here.
</body>
</html>
When using HTML tags you must use these brackets "< >" to enclose all tags. Furthermore, HTML container tags appear as a pair of open and close tags.
The close tag must have a forward slash " / " to show that the associated feature
is being closed.
Creating an HTML Template
Your computer should be turned on and an Internet browser open. You will also need to open a text editor. If you are using a PC running Windows open NotePad.
Finding Notepad in Windows
Use the following steps to open NotePad as your text editor:
- Press the Start button
- Press the All Programs button
- Press the Accessories button
- Press The Notepad button
Minimum HTML/XHTML Tags for a Web Page
The following HTML/XHTML text and tags need to be saved in the ANSI text format :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
>
<head>
<!-- your name -->
<title> </title >
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Using your text editor, type the basic HTML/XHTML structure (see above) into your computer using a text editor as outlined below:
- With the text editor, type your name and any class information provided by Dr. T. after the <!-- comment tag.
- Save this text file as htmltmp.htm using the File menu's Save As option. Your can use this file in the future as your HTML template.
- Place "Your Name's Homework Homepage" in between the title tags.
- Save this file as index.htm using the File menu's Save As option. Your can use this file for next week's assignment.
Testing and Debugging Your Code
After you get a little code entered into the body tag you should open your favorite browser to see if the new code is working as expected. One secret to any type of computer coding is to check your code often. It is much harder to find errors in dozen of lines of new code then it is a few lines of new code. So get into the habit of entering a few lines, saving the new code and then refreshing your browser to see how the new code looks. Do this by following the steps outlined below:
- Use your browser to open index.htm using the File menu's Open option.
- Using the text editor, place the rest of your homework homepage between the body tags.
- As you are working on your HTML file using the text editor, you will want to periodically save your work using the File menu's Save option.
- After saving an updated version of your text file, update the browser's display by clicking on the Refresh button (Internet Explorer) or the Reload button (FireFox/Opera/Chrome).
HTML/XHTML Validator
Just because your code works on one browsers does not mean you are done. The popular browsers are often very forgiving when it comes to errors in your HTML/XHTML coding. Unfortunately, they are not forgiving in the same ways. As a result, missing closing tags (and other errors) that are overlooked by Internet Explorer cause problems when using FireFox or Opera. An easy way to identify errors is to use an HTML/XHTML Validator to find mistakes and non-complaint code. Use the World Wide Web Consortium's HTML Validator at http://validator.w3.org to check for errors. I validate your code when grading and mark down if I find validation errors.
I would recommend validating all of your code on your personal computer as "Local Files" and correcting problems before you FTP the HTML/XHTML file to your Web site next week. Here is how you go about it after your Web page is working on your computer:
- Use your browser to open the W3C validator found at http://validator.w3.org. Note: The validator may not work with Internet Explorer when using Windows XP with Service Pack 2. Therefore it is best to use Opera or FireFox for validating local Web pages.
- Click on the Validate by File Upload tab as shown below.
- Use the Browse button to find and select the Web page on your computer
- Click on More Options.
- Click on the Show Source check box. This will show your code as part of the results with line numbers that correspond to error messages.
- Click on the Check button--see image below.
- Hopefully your HTML/XHTML code is perfect and you will see a validation message like the one below. If not, scroll down the page, read the error messages and scroll further down the page to find the line number with the code in question. Remember that the validator is just a computer program and sometimes the error is actually in a line above and it only runs into problems later in the code. If you don't see anything wrong with the identified line of code, look above it for the error.
Keyboard Shortcuts
Dr. T. has a cartoon in his office with an older man bending over a younger man's computer screen and whispering to him
"A word to the wise kid, put that mouse down and learn to hot key from app to app, if you expect to get any respect around here."
|
Most experienced PC users know how to use hot keys, also known as keyboard shortcuts. An easy way of reusing HTML code is learning how to use these shortcuts for copying and moving of code from one place to another. Since writing code and editing it is primarily done at the keyboard, it is almost always more efficient to use the keyboard to highlight text, copy it, and save the results. Make sure you know some common keyboard shortcuts if you aren't familiar with them already. You can learn about others from the drop-down menus if you find the shortcuts useful. Dr. T. uses the following shortcuts all the time:
- Ctrl + x = Cut what is highlighted to clipboard
- Ctrl + c = Copy what is highlighted to clipboard
- Ctrl + v = Paste what is in clipboard to current position of the Insertion cursor in your document
- Ctrl + s = Save active file
- Shift + Arrow Key = highlights text