1. Web Page Validation File management and Referencing
Creating Web Pages with XHTML
CIS 133 Web Programming Concepts

2. Overview http://validator.w3.org
Many validation services exist to help ensure your HTML follows standards
W3C Markup Validation service is free
Validates according to your DOCTYPE tag
Shows all errors

3. File management Files are organized and saved in a systematic manner
All web pages are stored in one ‘master’ folder, called the main ‘ROOT folder’
Within the ROOT folder, several subfolders exist, to organize multi-media content
Images folder
Audio folder
Video folder
HTML files are typically saved in the main ROOT, but may be saved in separate subfolders as well, to better organize the site
The home page is ALWAYS stored in the main ROOT

4. CIS133 folder
HTML Folder
Images Folder
HTML5Guy
RockClimbing
Donations
PiggyBank
PettingZoo
MobilOilChange

5. Finding content Path Two ways of locating web files
Describes the location where files can be found
Main ROOT folder is the start of the path
Two ways of locating web files
Absolute path
Relative path
<a href=“pettingzoo.html”>
CIS133 folder
HTML Folder
Images Folder
HTML5Guy
RockClimbing
Donations
PiggyBank
PettingZoo
MobilOilChange

6. Absolute Path Absolute path
Specifies the exact location of a file (a compete address, such as Boylston Avenue, Boston, MA 01101)
Use absolute paths when referencing content on other websites

7. Relative Path – traversing sideways
Used to find content within your own site
Path depends on which page is being used
If pettingZoo.html has a link in it to MobilOilChange.html, then, how does it get there?
Both PettingZoo and MobilOilChange are in the same folder, HTML
The path PettingZoo would take would be <a href=“MobilOilChange.html>
ROOT folder
CIS133 folder
HTML Folder
Images Folder
HTML5Guy
RockClimbing
Donations
PiggyBank
PettingZoo
MobilOilChange

8. Relative Path – traversing down
If pettingZoo.html has a link in it to piggybank.jpg, then, how does it get there?
Both PettingZoo and images are in the same folder, HTML
But PiggyBank is inside the images folder, so PettingZoo needs to go into the images folder to find piggybank
The path PettingZoo would take would be images/piggybank.jpg
ROOT folder
CIS133 folder
HTML Folder
Images Folder
HTML5Guy
RockClimbing
Donations
PiggyBank
PettingZoo
MobilOilChange

9. Relative Path – traversing up
Suppose it were the other way around, as in Donations.jpg wanted to find pettingZoo.html?
PettingZoo is NOT in the images folder with donations, it is up a level,
Donations then needs to go up a level, to be on the same level as PettingZoo , HTML
The path Donations would take would be ../pettingZoo.html
../ goes up one folder level
ROOT folder
CIS133 folder
HTML Folder
Images Folder
HTML5Guy
RockClimbing
Donations
PiggyBank
PettingZoo
MobilOilChange

10. Suppose we had this file management structure
What would the path be from
Donations.jpg to Savings.html?
Savings.html to MobilOil.html
Savings.html to Petting.html?
FoodBank.html to default.html
Default.html to HTML5Guy.jpg