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
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.
| Windows | Mac |
![]() |
![]() |
Be consistent, be neat!
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
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
Must always be
written with capital and lowercase letters! File names are Case Senstive!
| ; + = [ ] ' , \ " * \\ <> / ? : | . # |
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
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
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.
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.
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...
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!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 modehttp://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
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>
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">
A comma-separated list of
keywords used by search
engines to index the
document.
Example:
<meta name="keywords" content="planetarium, shows,
production">
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>
<p style="font-family: georgia serif; font-size: 4em; color: 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.
This
element is used to apply style
sheet properties only to the text
between its opening and closing tags.
This paragraph has text with three different styles