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

Folders
        For this class you have been asked to make 2 folders on your computer a "Web Stuff" Folder
        and "YourWeb-site" Folder
             1. The Web Stuff Folder is for images, buttons, backgrounds, text
... anything that might be potentionally useful in constucting your web site

        2. "YourWeb-Site Folder" is your web site Master
                        The FILES Located in 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...

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
and don't use the structure for BasicWD-Site on the CD as an example, it's way out of control...

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 exactly with capital and lowercase letters!

            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 and Vista

These two web pages explained the steps
http://www.indezine.com/products/other/windows/showfileextensions.html
http://teamtutorials.com/windows-tutorials/show-file-extension-in-windows-xp

Making Extensions visible in OS X (Mac)

open the Finder
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.

DOCTYPES THAT WORK
So what DOCTYPEs should we use? Glad you asked. The following complete DOCTYPEs are the ones we need:

HTML 4.01 STRICT, TRANSITIONAL, FRAMESET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 STRICT, TRANSITIONAL, FRAMESET

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


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


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

XHTML 1.1 DTD

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

<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 aaaand it's greeen.


Result:

This is a paragraph using the Georgia fontface size 4em aaaand it's greeen.

Adding CSS Styles to Text

The text

This element is used to apply style sheet properties only to the text between its opening and closing tags.

Syntax:


Example:
This paragraph has text of three different styles.

This paragraph has text of three different styles