HEAD | BODY | Forms | Frames | Images | Layout | Links | Lists | Tables | Text: Logical & Physical TAGS | ATTRIBUTES ( Common ) | VALUES       ENTITIES       INFO | HELP | AUTHOR

DETAILED INSTRUCTIONS

Take the Tour

Screen Layout The Menu Menu Links: Tag Syntax Items (Top Section) Syntax Links: Tag Names Syntax Links: Attributes Syntax Links: Attribute Values Menu Link: TAGS (Tag Glossary) Menu Link: ATTRIBUTES (Attribute Descriptions) Menu Link: Common (Common Attributes) Menu Link: VALUES (Acceptable Attribute Values and Data Types) Menu Link: ENTITIES (Special Character Codes) Menu Links: INFO, HELP, and AUTHOR

or Jump to a Section

Screen Layout

When using a frames-enabled browser, the screen is divided into three areas with these files loaded by default:

• MENU Frame (on left): The Menu file, with links to the various sections.
• MAIN Frame (on top right): The Tag Syntax file, with details about each HTML tag.
• FOOTNOTES Frame (on lower right): The Notes file, with Tag Glossary, Attribute Descriptions, Common Attributes, and Acceptable Attribute Values.

As you click on links across the site, the MAIN frame and FOOTNOTES frame will be scrolled to particular sections of these three files and a few others:

• The Entities file, listing the codes used to insert special characters (©, ®, →, θ, etc.).
• The Info file with Information About The Sunshine HTML Resource.
• The Help file with Detailed Instructions (the file you're reading right now).
• The Author file with more About The Author.

Let's begin by looking at the Menu . . .

The Menu

The first group of links load the Tag Syntax file into the MAIN frame and scroll to the proper syntax for that type of tag.

The second group of links load the Notes file into the MAIN frame and scroll to the associated sections:

• TAGS scrolls to the Tag Glossary section.
• ATTRIBUTES scrolls to the Attribute Descriptions section.
• (Common) scrolls to the Common Attributes section.
• VALUES scrolls to the Acceptable Attribute Values section.

The ENTITIES link loads the Entities file into the MAIN frame, listing the codes used to insert special characters (©, ®, →, θ, etc.).

The final group of links load some supplementary files into the MAIN frame:

• INFO loads the Info file with Information About The Sunshine HTML Resource.
• HELP loads the Help file with Detailed Instructions (the file you're reading right now).
• AUTHOR loads the Author file with more About The Author.

NOTE: These links are also available at the top and bottom of each file.

Now let's click on the Menu item "Lists" . . .

Menu Links: Tag Syntax Items
After clicking the Menu item "Lists" . . .

The MAIN frame has now scrolled the Tag Syntax file to the Lists section.

Next is the syntax for the LI tag. These links scroll the Notes file in the FOOTNOTES frame:

• LI (Tag Name): Tag name links scroll to the Tag Glossary entry for that tag.
• TYPE, VALUE (Attributes): Attribute links scroll to the appropriate Attribute Description.
• LIStyle (Attribute Values): Some attributes must have values from a specific set of choices, which I have nicknamed. These values have links that scroll to the Acceptable Attribute Values entry for that nickname.
• number (Non-Linked Values): Other attributes can take any value of a basic data type and so aren't linked.
• *, §, ¤, ¶, » (Common Attributes): These symbols represent groups of general attributes that aren't specifically related to the function of that tag.
• </LI> (End Tag, if any): Some end tags are required (bolded), some are optional (not bolded), and some don't exist at all.
• ... (text) ... (Contents of Tag, if any): If a tag could have an end tag, italicized text represents the types of text and tags that are typically enclosed by them.

CAUTION: Pay attention to quotes -- Any attribute values other than plain numbers must be enclosed in quotes.

NOTE: The bolded parts are required, including any required end tags.

FYI: Any colored tags or parts of tags are common but frowned upon because they aren't official or were official but have gone out of style.

We'll examine each of the syntax link types
(tag names, attributes, values, and common attributes).

First, let's click on the "LI" tag name . . .

Syntax Links: Tag Names
After clicking on the tag name "LI" . . .

The FOOTNOTE frame has now scrolled the Notes file to the Tag Glossary entry for LI.

Tag Glossary entries may include:

• Tag Name: The tag name has a link that loads the Tag Syntax file into the MAIN frame and scrolls to the syntax for that tag, if not already showing.
• Tag Function: A description of what the tag does or how it is used.
• Contents: If the tag could have an end tag, the contents describe the types of text and tags it would typically enclose.
• Containers: Other tags that typically enclose the entry tag.
• Additional Information: Usage, end tag info, warnings, examples, etc.
• Cross-reference Links: Links to other tags will scroll the Notes file in the FOOTNOTE frame to the associated Tag Glossary entry.
• [WDG]: These links load the detailed tag syntax from The Web Design Group into the MAIN frame.

NOTE: Some tags have multiple entries because the function is determined by which attributes are included.

FYI: Don't be confused by the entry for LINK — It just happens to be the next entry in the Tag Glossary.

Looking back at the MAIN frame,
this time let's click on the attribute "TYPE" . . .

Syntax Links: Attributes
After clicking on the attribute "TYPE" . . .

The FOOTNOTE frame has now scrolled the Notes file to the Attribute Description of TYPE.

Attribute Description entries include:

• Attribute Name (TYPE)

• Container Tags (LI, OL, UL): The tags which contain the attribute as it is described in the entry. These tags have links that load the Tag Syntax file into the MAIN frame and scroll to the Tag Syntax. Exploring these links, you can see how the attribute is used in the various tags.

• Attribute Description: What the attribute defines and when it is used.

NOTE: Some attributes have multiple entries because the attribute's function depends on which tag it's in.

FYI: Colored attributes are common but frowned upon because they aren't official or were official but have gone out of style.

Looking back to the List Item (LI) syntax in MAIN frame,
this time let's click on the Attribute Value nickname "LIStyle" . . .

Syntax Links: Attribute Values
After clicking on the nickname "LIStyle" . . .

The FOOTNOTE frame has now scrolled the Notes file to the Acceptable Attribute Values entry for the nickname LIStyle.

Acceptable Attribute Values entries may include:

• Nickname: Capitalized nicknames are official data types.
  Lowercase nicknames are my own invention, typically including or identical to the attribute name.
• Tag Names (OL, UL): Sometimes the options depend on which tag the attribute is in.

• Options: Specific values that are acceptable.
• Options in Parentheses ( ): Free-response options such as (pixels) or (number) or (filename).

• Pipes | : Pipe symbols separate options in a given set.
• Braces { }: Braces enclose a fixed set of available options.
• Brackets [ ]: Brackets enclose sets within sets and other complicated stuff.

NOTE: If an attribute is not specified, the bolded option is the default value.

FYI: Colored options are common but frowned upon because they aren't official or were official but have gone out of style.

The LIStyle attribute value nickname includes many options:

• In an Ordered List (OL): numbers (default), capital letters, lowercase letters, capital roman numerals, and lowercase roman numerals.
• In an Unordered List (UL): disc (default), circle, and square.

Now, let's look at the Menu links
TAGS, ATTRIBUTES, and VALUES . . .

Menu Link: TAGS (Tag Glossary)

The MAIN frame has now scrolled the Notes file to the Tag Glossary.

This provides a broader view of the Tag Glossary, which you could only peek at in the FOOTNOTE frame.

As we saw before, Tag Glossary entries may include:

• Tag Name: The tag name has a link that loads the Tag Syntax file into the MAIN frame and scrolls to the syntax for that tag.
• Tag Function: A description of what the tag does or how it is used.
• Contents: If the tag could have an end tag, the contents describe the types of text and tags it would typically enclose.
• Containers: Other tags that typically enclose the entry tag.
• Additional Information: Usage, end tag info, warnings, examples, etc.
• Cross-reference Links: Links to other tags will scroll the Notes file in the FOOTNOTE frame to the associated Tag Glossary entry.
• [WDG]: These links load the detailed tag syntax from The Web Design Group into the MAIN frame.

NOTE: Some tags have multiple entries because the function is determined by which attributes are included.

For example: The A tag can become a link with the HREF attribute, an anchor with the ID or NAME attributes, or part of an image map with the SHAPE attribute.

FYI: Colored tags are common but frowned upon because they aren't official or were official but have gone out of style.

Next, let's look at the Menu link ATTRIBUTES . . .

Menu Link: ATTRIBUTES (Attribute Descriptions)

The MAIN frame has now scrolled the Notes file to the Attribute Descriptions.

This provides a broader view of the Attribute Descriptions, which you could only peek at in the FOOTNOTE frame.

As we saw before, Attribute Descriptions include:

• Attribute Name

• Container Tags: The tags which contain the attribute as it is described in the entry. These tags have links that load the Tag Syntax file into the MAIN frame and scroll to the Tag Syntax. Exploring these links, you can see how the attribute is used in the various tags.

• Attribute Description: What the attribute defines and when it is used.

NOTE: Some attributes have multiple entries because the attribute's function depends on which tag it's in.

FYI: Colored attributes are common but frowned upon because they aren't official or were official but have gone out of style.

Let's look at the Menu link (Common) . . .

Menu Link: Common (Common Attributes)

Some attributes can be used in almost all tags, so they aren't specifically related to the function of a particular tag.

In an effort to save space I chose symbols to represent sets of these attributes:

• The Asterisk (*) represents the TITLE attribute, which discloses the title of a link target or image, etc.

• The Section Symbol (§) represents the Core attributes: CLASS, ID, and STYLE.
  
  • The CLASS attribute assigns the item to a class of items, used to apply a style to a whole group of items using Cascading Style Sheets.
    
  • The ID attribute is a way to name an item, useful for cross-referencing.
    
  • The STYLE attribute sets the style or formatting of a particular item.

• The Paragraph Symbol (¶) represents the LANG attribute, which indicates the appropriate language for an item or section.

• The Double Greater Than (») represents the DIR attribute, which specifies the text direction for an item or section.

• The Generic Currency Symbol (¤) represents the Event attributes: ONCLICK, ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP.
  
  • The Event attributes determine what computer responses are associated with specific user input by keyboard or mouse.

Let's look at the Menu link VALUES . . .

Menu Link: VALUES (Acceptable Attribute Values and Data Types)

The MAIN frame has now scrolled the Notes file to the Acceptable Attribute Values section.

This provides a broader view of the <Acceptable Attribute Values, which you could only peek at in the FOOTNOTE frame.

As we saw before, Acceptable Attribute Values entries may include:
Acceptable Attribute Value entries may include:

• Nickname: Capitalized nicknames are official data types.
  Lowercase nicknames are my own invention, typically including or identical to the attribute name.
• Tag Names (OL, UL): Sometimes the options depend on which tag the attribute is in.

• Options: Specific values that are acceptable.
• Options in Parentheses ( ): Free-response options such as (pixels) or (number) or (filename).

• Pipes | : Pipe symbols separate options in a given set.
• Braces { }: Braces enclose a fixed set of available options.
• Brackets [ ]: Brackets enclose sets within sets and other complicated stuff.

NOTE: If an attribute is not specified, the bolded option is the default value.

FYI: Colored options are common but frowned upon because they aren't official or were official but have gone out of style.

Let's look at the Menu link "ENTITIES" . . .

Menu Link: ENTITIES (Special Character Codes)

blah

Finally, let's look at the Menu links "INFO", "HELP", and "AUTHOR" . . .

Menu Links: INFO, HELP, and AUTHOR

• The Info file with Information About The Sunshine HTML Resource.
• The Help file with Detailed Instructions (the file you're reading right now).
• The Author file with more About The Author.

HEAD | BODY | Forms | Frames | Images | Layout | Links | Lists | Tables | Text: Logical & Physical TAGS | ATTRIBUTES ( Common ) | VALUES       ENTITIES       INFO | HELP | AUTHOR

© Sunny Snaith    Post Office Box 681727, Fort Payne, AL 35968