Gotchas
Naming Folders
For this class you have been asked to make a folder on your computer a "YourWeb-site" Master Folder
You should also have a "Web Stuff" Folder
- The Web Stuff Folder is for images, buttons, backgrounds, text … anything that might be potentially useful in constructing your web site
- "YourWeb-Site Folder" is your web site Master
- The FILES Located in/on your computer are often referred to as "local" files.
- The on-line web server files are often referred to as the "remote" files.
- FOR YOUR WEBSITE TO WORK PROPERLY The LOCAL files on your computer must mirror the REMOTE files that are on your server
- and the url's (links) used must be relative to the location of the html page file…
Hints
If a graphic or link doesn't work, (the graphic doesn't show up or the link doesn't work) it's because the path (url) to it is not correct, or the target file is missing, or it's a spelling error or you used an illegal Character in the name path.
Here's another example on how to organize your files
Mywebsite(folder) >
index.html
images(folder) >
xyz.jpg
logo.gif
products(folder) >
products.html (or index.html)
productimages(folder) >
supercomputer.jpg
styles(folder) >
mymainstyles.css
photo.css
print.css
like this
| Windows | Mac |
 |
 |
Be consistent, be neat!
Naming your HTML files
First a word about the URL (Uniform Resource Locator) Your Domain Name May contain both capital and small letters, AND NO spaces up to the single forward slash
http://www.BillyBobTrains.com/
and
http://www.billybobtrains.com/
are the same….
But,
After the first single slash the address is case sensitive AND File names and folder names should CONTAIN NO SPACES…
Most browsers these days can handle the space issue, but it can lead to problems and confusion…
the browser will add The Characters %20 to the url (%20 = space)
Eg.)
The address path and would look like this
http://uofgts.com/BasicWD/lesson%203.html
instead of
http://uofgts.com/BasicWD/lesson 3.html
http://www.BillyBobTrains.com/BigChooChoo.html
BigChooChoo.html
Must always be
written with capital and lowercase letters! File names are Case Senstive!
Rules
for naming your files and folders in your Site Folder
and on the web server.
1. Only use lower
case letters and numbers
2. "Funny" characters
are illegal as they are used by
the computer to perform various internal computer operations.
Never
use apostrophes, colons, bullets, slashes
and never use the following
characters
| ; + = [ ] ' , \ " * \\ <> / ? : | . # |
3. Never
use a space in any file name
4. The "home" page is normally named index.html
but check with your provider as some name the home
page default.html
5. Make
sure all files have their proper
extensions
All the web pages MUST have
the extension .htm or .html
Photos,
graphics, etc must end
in .jpg, .gif or .png
6. Keep the
files names short as possible.
Making Extensions visible in WindowsXP, Vista and Win7
You need to do a few things before inserting your image(s) on your web page
Mac and Windows OS's by default hide the 3 letter file extension for all files… You need to know what they are as the extensions are part of the filename and is needed by ALL browsers so they knows what to do with the file… Here's how you set that up…
On Windows XP
- Open My Computer, and select Folder Options from the Tools menu
- Click on the View tab, turn off Hide MS-DOS file extensions for known file types, by unchecking the box
- Press OK.
On Windows Vista
- Go to My Computer and choose Organize > Folder and Search Optionsv
- Select the View tab and deselect "Hide extensions" for known file types
- Press OK.
On Windows 7
- Open an Explorer window and choose Organize > Folder and Search Options
- Select the View tab -- and deselect the Hide extensions for known file types
- Press OK.
To see the above with pictures and arrows go to Indezine.com
Making Extensions visible in OS X (Mac)
- open the Finder, then choose Menu Finder > Preferences
- Choose the Advanced Tab
- Check the Show all file extensions box
<meta> tags
Every HTML page contains special HTTP header information. This
information is used by the browser in the client computer or by the
server computer to perform a variety of tasks, or to pass additional
information back and forth between servers. The <meta> element allows you to include additional HTTP
header
information about the document. This element is placed in the
<head> section of the document.
<meta
attributes events>
name
This attribute is used to include other types of non-header information (such as the author, a description of the document, copyright information, keywords, and so on) in the document. Search engines usually look for the following names: author, copyright, description, and keywords. Other possible names are generator, progid, robots, and template.
Syntax:
<meta name="value" content=". . .">
author
Identifies the author of the document.
Example:
<meta name="author" content="Your Name">
copyright
An unqualified copyright statement.
eg
<meta name="copyright" content="Copyright description">
description
This describes the
document in the browser
window.
This is used by some
search engines to provide a document description to the users
performing searches.
Example:
<meta name="description" content="photographs of china">
keywords
A comma-separated list of
keywords used by search
engines to index the
document.
Example:
<meta name="keywords" content="planetarium, shows,
production">
Fonts
Stick with
the basic Fonts
These fonts or font-family's are available on any
Windows or Macintosh computer
Serif :
Georgia,
font-family: "Georgia", Serif
Times New
Roman
font-family: "Times New Roman", Serif
Sans-serif:
Arial,
font-family: "Arial", Sans-serif
Arial
Black,
font-family: "Arial Black", Sans-serif
Trebuchet MS, font-family:
"Trebuchet MS", Sans-serif
Verdana,
font-family: Verdana, Arial, Helvetica, Sans-serif
Monospace:
Andale,
font-family: "Andale
Mono", monospace
Courier
New
font-family: "Courier
New" , monospace
Display:
Comic
Sans
font-family:
"Comic Sans MS", cursive
Impact
font-family: "Impact", sans-serif
Use
San-serif for headings
Use Serif for body of text for easy reading
eg
Compare the two styles which do you like the best?
Serif typefacesMain article: SerifSerif, or "Roman", typefaces are named for the features at the ends of their strokes. Times Roman and Garamond are common examples of serif typefaces. Serif fonts are probably the most used class in printed materials, including most books, newspapers and magazines. Serif fonts are often classified into three subcategories: Old Style, Transitional, and Modern. Old Style typefaces are influenced by early Italian lettering design. Though some argument exists as to whether Transitional fonts exist as a discrete category among serif fonts, Transitional fonts lie somewhere between Old Style and Modern style typefaces. Transitional fonts exhibit a marked increase in the variation of stroke weight and a more horizontal serif compared to Old Style, but not as extreme as Modern. Lastly, Modern fonts often exhibit a bracketed serif and a substantial difference in weight within the strokes. Examples of these are Times, New Baskerville, and Bodoni, respectively. Roman, italic, and oblique are also terms used to differentiate between upright and italicized variations of a typeface. The difference between italic and oblique is that the term italic usually applies to serif faces, where the letter forms are redesigned. |
Sans serif typefacesMain article: Sans serifSans serif (lit. without serif) designs appeared relatively recently in the history of type design. The evolution of the sans serif font very likely stemmed from the slab serif font. The earliest slab serif font, "Antique", later renamed "Egyptian", designed in 1815 by the English typefounder Vincent Figgins was succeeded one year later by the first sans serif font, created by William Caslon IV. The evidence of this is clearly shown in the uniform strokes in the letter forms. Sans serif fonts are commonly but not exclusively used for display typography such as signage, headings, and other situations demanding legibility above high readability. The text on electronic media offers an exception to print: most web pages and digitized media are laid out in sans serif typefaces because serifs often detract from readability at the low resolution of displays. A well-known and popular sans serif font is Max Miedinger's Helvetica, popularized for desktop publishing by inclusion with Apple Computer's LaserWriter laserprinter and having been one of the first readily available digital typefaces. Arial, popularized by Microsoft, is a widely used sans serif font that is often compared to and substituted for Helvetica. Other fonts such as Futura, Gill Sans, Univers and Frutiger have also remained popular over many decades. |
Always use CSS style to declare font-family, size, color…
Example
<h1 style="font-family: Impact; color: purple;
font-size: 2em;">
This is a heading using Impact for grabbing attention
</h1>
This is a heading using Impact for grabbing attention
Other Example
<p style="font-family: georgia serif; font-size: 4em; line-height: 1emcolor: green;">This is a paragraph using the Georgia fontface size 4em, It's BIIIIG aaaand it's greeeeen.</p>
Result:
This is a paragraph using the Georgia fontface size 4em, It's BIIIIG aaaand it's greeeeen.
Adding CSS Styles to Text
<Span> The text </span>
<span></span>
This
element is used to apply style
sheet properties only to the text
between its opening and closing tags.
Syntax:
<span attributes events>
Example:
<p>This <span style="color: #FF0000; font-family: sans-serif; font-size: 50pt; text-transform: uppercase; ">paragraph</span> has text with <span style="color: blue; font-size:18pt; text-transform: uppercase;">three</span> different <span style="color: yellow; font-size: 14pt; text-decoration: underline;">styles</span>.</p>
This paragraph has text with three different styles