XHTML & CSS

HTML/XHTML and Cascading Style Sheets (CSS) Course Syllabus & Assignment Sheet

Book: Head First HTML with CSS & XHTML - Part 1 - CSS: The Missing Manual - Part 2

Includes: HTML, XHTML and Cascading Style Sheets

Estimated Completion: 100 hours - Part 1

Text: Head First HTML with CSS & XHTML, ©2006, 1st Edition, Elisabeth Freeman & Eric Freeman, O'Reilly Publishing
ISBN: 0-596-10197

Cost: $26.00 - Search to see if you can find this book used.

It is recommended that you purchase additional text/reference books on each subject to further enhance your knowledge and meet your individual learning style. An Amazon store has been setup with recommended books to continue your studies.

General Notes - Before You Start the Book

This is a two part course.  Part one focuses on semantic HTML and XHTML and introduces the power of CSS or Cascading Style Sheets.  Part two focuses on advanced CSS topics. 

Important Class Resources

Your instructor provides extensive additional resources for Web design. You should familiarize yourself with and bookmark the following sites:

  1. Lecture notes are available at: http://www.robinsblog.com - This site is updated several times per week. Students should check this site daily for important class announcements and updates.
  2. Class forum - A place to discuss Web development. Please register to use the forum.
  3. Web design tutorials are available at: http://www.tinkertech.net. - Spend some time getting familiar with this site, it is a collection of topics discussed in class over the last several years.
  4. Solutions for the Case Problems can be found at http://robin.robinshosting.com.
  5. Free Web site hosting for current students is provided at http://www.robinshosting.com support forums can be found at http://robinshosting.com/forum/index.php.

  6. You may find this character set chart helpful.

All software that you will need during class can be accessed from the Web Design folder in the Start menu.

Bookmark this Glossary of graphic design and Web page design terms.

Homework

Homework is not required for this class. However, reading your lessons at home prior to completing them in class makes your classroom time more productive. If you would like to work at home bring in a CD or Flash Drive and we can make a copy of the necessary files for you.

Backing up Your Student Files

You should periodically back up your student files to CD. Stations along the windows have CD Burners. Instructions for writing files to a data CD can be found here.

Certificates

In order to earn a certificate in HTML/XHTML students must complete the XHTML Final Project. This project should be completed before starting another course module.

Files, Samples, and Errata

File management skills are absolutely necessary to create and maintain Web sites. Please download and print this file management information for use in class. If you need a brush up on file management, review the tutorials that I've listed here http://www.tinkertech.net/octWeb03.htm#file. If you have not already completed the HTML tutorial, please ask your instructor for the CD.

The book has a companion Web site @ http://www.headfirstlabs.com/books/hfhtml/. You should bookmark this site for future reference, it includes the completed files for your review. There is also a forum on the Head First site where book errors are posted and questions are answered http://www.headfirstlabs.com/phpBB2/viewforum.php?f=5&sid=d62f62dfcf3faf16a1319763e0b24122.

In the classroom we use a network. You will be assigned a folder on our network. To connect to your personal folder use drive O:\. Your instructor will copy a folder to your network drive called htmlcss. This folder will include all of the images and files referenced in the book. These are the same files mentioned on page xxxiii of the book. For your reference, completed files are included in a folder called Completed Files for Your Review; you can use these files if you need to check your work outside of class.

Working at home

If you would like to work at home and you don't have HomeSite here is a list of freeware HTML editors that you can download and use at home.

Working with Color

In the htmlcss folder you will find a subfolder called visbopop. This folder contains color charts and other helpful references. Using My Computer you can double click the file deskpop.htm to open a page that links to an HTML popup cheat sheet, a Hex Color cheat sheet, and an RGB cheat sheet.

Getting Help

While we encourage you to try and problem solve any errors that you may have with your Web pages, ask for assistance if you cannot figure out the problem within a reasonable amount of time; I do not want you to become frustrated.

Cheat sheets are wonderful when you're learning to code. You will find links to numerous cheat sheets on the class forum.

Chapter Notes

Complete all exercises in the book unless otherwise noted in the chapter sections below.

Chapter 1

Before you begin the book, review HTML and CSS: An Absolute Beginner's Guide. Then read Making your documents XHTML compliant.

Page 14 - You will use HomeSite+ to create your XHTML documents. To access HomeSite+ click Start > Programs > Web Design > Macromedia > Macromedia HomeSite+. Review the article, Getting to know HomeSite.

Page 17 - Open a blank new document in HomeSite by clicking File > New > Blank document. Type the text on page 17 into the document as shown.

Page 18 - There is already a folder for you to us to save your document. The file should be saved to O:\htmlcss\chapter1\starbuzz. Give the file the name index.html. Be sure to type the .html in the file name box.

Page 19 - To preview your page in Internet Explorer, click the Preview in Browser icon in HomeSite. Your page will display in Internet Explorer. You can also configure HomeSite to preview Web pages in the Firefox browser, another popular Web browser. To learn how to configure HomeSite to preview your pages in Firefox, review this article Getting to know HomeSite.

Page 30 - The dotted border is not supported properly in Internet Explorer 6. You can see the dotted border by using Firefox. Firefox Web browser. Read Using Mozilla Firefox. Setup Firefox as an external browser in HomeSite+.

Chapter 2

Page 44 - The source files are already in your user directory in a folder called htmlcss. Edit the files inside the folder chapter2\lounge folder.

Explore the class forum @ http://discuss.robinsblog.com/modules.php?name=Forums. You will need to register to post in the forum.

Chapter 3

Page 83 - Save your journal.html file in chapter3\journal.

Page 86 - The <q> element will only be visible in Firefox.

Chapter 4

Page 126 - Your instructor will provide you with a hosting account while you are enrolled in the program. To sign up visit http://www.robinshosting.com/ and select the 'Student' hosting plan. When you sign up for an account the subdomain and username you select must be eight characters or less.  Your account will not be approved if it's more than eight characters. Your hosting account should be approved within 72 hours and you will receive a "Welcome Email" that includes important account information and instructions.

Page 141 - You will use a free program called Filezilla to upload your files to your new Web site. I have created a movie that demonstrates how to upload files using Filezilla. I will review how to use Filezilla with you in class. Upload the Starbuzz folder from Chapter 4 to the public_html folder on your new Web site.  Do not upload the entire Chapter 4 folder.

I will host your accounts for free while you are enrolled in the course. At the end of the course you must sign up for hosting with another provider if you want to continue to have your site online. If you want to look for another provider here are some tips for finding a hosting company.

Your hosting account manager (CPanel) can be accessed via http://www.robinshosting.com/cpanel. You will need your username and password to access CPanel. There are video tutorials that I would recommend that you review.

Introduction to Firefox

If you have not been using Firefox, read Using Mozilla Firefox.

After reading the Firefox tutorial, install the following Firefox extensions (link: Flash SWF file 1,701kb) on your computer:

Web Developer Toolbar - Adds a useful toolbar to Firefox. Screen capture of the Web Developer toolbar.

ColorZilla - Adds a color picker to the status bar in Firefox. Screen capture of Colorzilla.

HTML Validator - Allows you to validate documents by clicking View > Page Source in Firefox. Screen Capture of HTML Validator.

Aardvark - Allows you to identify block level elements in Firefox. Right click any Web page and select Start Aardvark from the menu. Screen capture of the Start Aardvark menu.

Firebug - Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. To access this extension click View > Firebug or press F12

DevBoi - a handy HTML/XHTML, CSS, JavaScript, and DOM reference. This is very useful when you’re learning HTML/XHTML and CSS. There is even an additional PHP reference. If you find yourself having to lookup CSS properties and XHTML elements and tags frequently you should get this extension. Click View > Sidebar > DevBoi to access the reference.

Be sure to read the documentation/instructions about each of these extensions at the extension's homepage.

There are additional Firefox extensions that you may find useful as you're developing Web sites; review the article Firefox Extensions for Web Developers. There is also a browser section in the class forum with even more great Firefox extensions.

Note: Firefox extensions can be found in the folder J:\webclass\Firefox Extensions. Use My Computer to access this folder.  Double click the *.xpi file to install the extension.

Chapter 5

Image Resources - Read the article What Application Do I Use? to learn more about images for the web.

Explore the articles posted on the discussion forum on graphics and color.

If you need free images to use on your sites check this article on free photos and graphics for the web.

Page 184 - We have Photoshop CS installed on all classroom computers. It is located in the Web Design folder in the Start menu. To learn more about resizing photos complete the tutorial Basic Photo Editing Techniques in Photoshop.

Review the Photoshop tutorial on your computer by clicking Start > All Programs > Individual Software > Professor Teaches Photoshop. If you would like to learn Photoshop while you are learning XHTML and CSS you can; ask your instructor to purchase the book Exploring Photoshop or order it used online at Amazon; you can work on Photoshop for a couple hours a day and XHTML and CSS the remainder of the time. You will also find a variety of Photoshop tutorials in the class forum.

Page 192 - The eye.jpg file may be missing from the chapter 5 folder; you can get a copy of the file at the Head First Labs site.

You will find lots of articles on design in the Web design section of the class forum.

Order the book “The Principles of Beautiful Web Design”. You can order this book in class, but it is much cheaper used on Amazon. This book is required reading. This book is to be read as homework). We also have the book Graphic Design Basics for students who would like to pursue more of the artistic side of Web development. You may also want to consider the book Design Fundamentals for a New Media or The Elements of Graphic Design: Space, Unity, Page Architecture, and Type as a supplemental books on design. There are also a variety of art and design resources on TinkerTech.

Ask your instructor to view the other design books available in class.

This is a good time to learn about color on the Web. Review the article Color Resources - Designing for Your Audience and the associated resources.

Do you need some photos for your Web site or to practice your Photoshop skills? Check the Photography section of the class forum.

Upload the completed MyPod Web site to your robinshosting.com account.

Chapter 6

Page 250 - Some of the Firefox extensions that you installed will help you to quickly validate your Web pages.

Open your lounge.html file in Firefox. Click the Tools menu on the Web Developer toolbar and select select Validate Local HTML.

or

Click View > Page Source to access the HTML Validator.

Head First Labs has a list of CSS resources that you may find useful.



Browsershots will allow you to see what your Web site will look like in different browsers, across multiple platforms (Windows, Mac, Linux), in different resolutions for free.

It is extremely important to check your sites in different browsers across multiple platforms. This tool allows you to do that without having to purchase multiple computers. Try it out on one of your validated pages at http://v03.browsershots.org/.

Upload the completed lounge Web site to your robinshosting.com account, if necessary replace the existing lounge folder.

Chapter 7

You will need files from both the lounge and journal folders for this chapter. On pages 268-275 you will use the lounge files. On page 276 you will need to use the files found in the journal folder.

Upload your updated work to your robinshosting.com account.

Chapter 8

Page 285 - You can view the CSS of any Web page using the Web Developer toolbar. Click the CSS button and select View CSS or Edit CSS to display a page's CSS.


Page 297 - You can learn more about selectors by reviewing the select tutorial.

Page 323 - Exercise - Use the elixir.html file, not the lounge.html file.

You should start to view the CSS of other developers. In this blog entry I have listed some extraordinary CSS showcase sites. Visit them, especially the CSS Zen Garden, and start to study the CSS source code.

Upload your updated work to your robinshosting.com account.

Chapter 9

Page 364 - Color - Review the color resources available on my blog, especially the article Color Resources Designing for your Audience. I would highly recommend that you use the Color Blender to help you to design color schemes for your web sites. Also bookmark the article Designing a Rainbow - Sexy Hot Colors by Lorelle on WordPress.

You will find many of the resources that I've posted on the class forum helpful as you study CSS. Visit the CSS Discussion section of the forum and explore the resources. Also look at the CSS resources on the instructor blog.  I know that all of the resources seem a bit overwhelming, but try to read a few of the article each day.

While not required yet, you may find it helpful to order CSS: The Missing Manual from Amazon. You may find the book very useful when you're learning about positioning and other more advanced CSS features.

Review the tutorial Introduction to Firebug. Firebug is a Firefox extension that helps to troubleshoot, XHTML, CSS, and other coding issues you may encounter while developing Web sites. The Firebug extension is installed on all workstations and can be accessed by clicking Tools > Firebug > Open Firebug from the Firefox menu. 

Upload your updated work to your robinshosting.com account.

Chapter 10

Page 404 - The correct background.gif image is in the lounge-work\images folder. Or you can download it from the Head First Web site.

After you complete this chapter visit the CSS Zen Garden again. The CSS Zen Garden is a showcase of CSS designs.

"The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file."/blockquote>

Designers are invited to submit their designs to the CSS Zen Garden. They may submit an external CSS file and images; the XHTML file cannot be altered in any way. Designers must use existing classes and ids when they create the site design.

You can view the designs by clicking the links in the menu on the right-hand side of the page. Remember to view the XHTML source code and the CSS. The Web developer toolbar in Firefox will allow you to view the CSS and the Aardvark extension is a wonderful tool to help you to understand the structure of the page. There are hundreds of designs at the CSS Zen Garden, a comprehensive list of designs is available..

There are other showcase sites that you may want to visit, here are some additional sites.

I cannot tell you how important it is to visit other web sites and review designs and code.

Upload your updated work to your robinshosting.com account.

Chapter 11

Page 429 - Aardvark is a very useful tool for viewing IDs, classes, and other block level elements on a Web page. Right click the Web page and select Start Aardvark. As you move your mouse over the Web page each block level element will be enclosed in a red outline and the ID, Class, or selector name will be displayed. You will find this extension very useful when you're working with CSS.

You can also view block level elements using the Web Developer toolbar. Click the Outline button and explore the different options.

After you complete chapter 11, create a page that has links to all of the chapter work that you have completed thus far. Review chapters 2 and 4 for help with folders, linking, and uploading. Use XHTML and style the page with an external CSS file. The XHTML page should validate as transitional. Save the page as index.html and upload it to the public_html\html folder of your robinshosting.com account.

Page 465 - Add the CSS code to the bottom of the lounge.css file, not the html file.

Upload your updated work to your robinshosting.com account.

Chapter 12

If you have not already ordered  CSS: The Missing Manual order it now from Amazon or your favorite book store.

Page 495 - You can learn more about floats by reviewing the float tutorial. Review the articles mentioned in CSS Multi-Column Layout Resources.

Page 508 - The #main code example includes an unnecessary margin property/value pair. You do not need to add margin: 10px; to your CSS file.

If you want to see some really cool examples of CSS in action visit CSSPlay. There are awesome CSS demonstrations. I love this site!

Upload your updated work to your robinshosting.com account.

Chapter 13

Page 552 - There is no table.html file in the chapter13/journal/ folder. Create a new file called table.html with the code on page 552.

CSS Table Gallery - The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Some cool examples of what you can do with data tables. There are download files for you to use.

Page 578 - You can learn more about styling lists at the list tutorial.

Take some time to explore Fantastico. Fantastico automatically installs Web site scripts like WordPress (blogging system), PHPBB and SMF (forums), Xoops (Content Management), Coppermine (image gallery), and Zen Cart (e-commerce). Are you unsure of what a blog is? Read Introduction to Blogging and WordPress - Part I. There is also a section on the class forum for blogging and content management tools.

Upload your updated work to your robinshosting.com account.

Chapter 14

The form chapter of this book is brief, I would recommend that you review additional articles on forms. Here are a few to get you started:

XHTML Forms

Accessible Form Guidelines

Form Processing with PHP

Here is an article on creating pretty and accessible forms. CSS Play also has a nice form with style.

Upload your updated work to your robinshosting.com account.

Appendix

Don't skip it! There is a lot of useful information in the appendix.

Page 643 - To learn more about using the <object> tag with media read the article Bye Bye Embed at A List Apart.

Page 645 - To learn more about JavaScript review the W3Schools JavaScript Tutorial.

Next Steps

If you haven't already, order the book CSS: The Missing Manual from Amazon or your favorite book store. Print and review the CSS assignment sheet.

Create a page named index.html that links to your work from chapters 11, 12, 13, and 14. Upload this page to your xhtml folder on robinshosting.com and ensure that all of the links work. This page should use CSS and validate as XHTML transitional. You can see a sample @ http://robin.robinshosting.com/xhtml/index.html. Send a link to your instructor.

Advanced Studies

Take the time to learn more about CSS and XHTML In addition to the CSS resources listed on this page I have some recommended books at my Amazon Store.