Lesson 03 Gotchas, Meta Tags, Doctypes, Quirks and Fonts

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!

Some 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 also 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

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 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...

So you need to set that up first

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.

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

6. Keep the files names short as possible.

<!DOCTYPE>

The very first line on an html page is always a <!DOCTYPE> description

Syntax:

<!DOCTYPE TopElement Availability "-//Organization//Type LanguageVersiondefinition//LanguageCountry" "URL to stay in Standard mode">

Correct syntax requires that the attribute values be specified without attribute names, as in the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> (If there is NO URL as shown here, the Browser is switched into Quirk Mode (Old rules mode))

Tag-Specific Attributes:

TopElement
This attribute specifies the markup language used in the document. The default value is HTML.

Availability
This attribute specifies whether the DTD (Document Type Definition) is publicly accessible or is available as a system resource.

Values:

PUBLIC    Indicates the DTD is publicly accessible; this is the default value
SYSTEM    Indicates a local DTD file or a URL that points to a DTD file Organization
This attribute specifies the organization responsible for the creation and maintenance of the DTD being used.

Values:

W3C or IETF

Type
This attribute specifies the type of object used in the page. The default value is DTD.

Language Version
This attribute specifies the version of the markup language used for the document. The default value is HTML 4.0.

Definition
This attribute defines the document type. If no value is specified, the document can make use of any of the types.

Values:

frameset          For frameset documents
strict               Supports mainly style sheets
transitional    Does not contain frameset elements
Language Country
This attribute specifies the language used in the document (Spanish, English, and so on). See the hreflang attribute for possible values.

<!Doctype> and Doctype Switching

If your web page doesn't include a doctype or uses one with out a URI (a Uniform Resource Identifier, a string of characters used to identify or name a resource on the Internet.) Internet Explorer will switch or revert to "Quirk's Mode" and emulate IE 5. If your web page uses the box model, the boxes will then render or display incorrectly. Internet Explorer 4 and 5, the first browsers to support CSS got some of the details wrong. The problem was corrected in IE 6, but to ensure that web pages that use IE 4 or 5 rules don't break MicroSoft invented document switching... a double edged sword...

Triggers Standard Mode

<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Triggers an Almost Standards Mode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

In this "strict" mode (Almost Standard) tables are less likely to fall apart in Internet Explorer --The layout of images inside table cells is handled the same way "quirks" mode operates, instead, which is fairly consistent with legacy browsers such as Internet Explorer 7 (and earlier). This Almost Standard "doctype" is recommended for all your web pages. For more <!Doctype> information about document switching and Quirks mode

http://www.ericmeyeroncss.com/bonus/render-mode.html

http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

https://developer.mozilla.org/en/Mozilla's_DOCTYPE_sniffing

<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.

Syntax:

<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 typefaces

Main article: Serif
Serif, 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 typefaces

Main article: Sans serif
Sans 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>

Result:

This is a heading using Impact for grabbing attention

Other Example

This is a paragraph using the Georgia fontface size 4em, It's BIIIIG aaaand it's greeeeen.