0 index
1 Using Attributes to Modify Tags
2 Examples:
3 Formatting Text
4 Physical Inline Style Tags
5 Headings
6 Centering Text Elements
7 Making an Unordered List
8 Changing the Bullet Shape
9 Ordered Lists
10 Changing the Numbering Scheme
11 Example of an Ordered List

outline
created using slideshow.cgi by Andy Harris















CSCI N241 Web Design: Manipulating Basic HTML
1. Using Attributes to Modify Tags
  • Attributes are added within a tag to extend or modify the tag's action.
  • You can add multiple attributes within a single tag.
  • Tag attributes, if any, belong after the tag name, each separated by one or more spaces.



































CSCI N241 Web Design: Manipulating Basic HTML
2. Examples:
  • <body bgcolor = "blue"> - changes the background color of the document to blue
  • <body bgcolor = "#0000FF"> has the same effect as "blue" above.



































CSCI N241 Web Design: Manipulating Basic HTML
3. Formatting Text
  • <font color = "#FF0000"> - specifies the font color using the hexadecimal RGB value. In this case it is red.
  • <font size = value > - sets the size of the type to an absolute value on a scale from 1 to 7 (3 is the default)
  • <I>… </I> - the text enclosed is italic
  • <b>… </b> - the text enclosed is bold



































CSCI N241 Web Design: Manipulating Basic HTML
4. Physical Inline Style Tags
  • <b> - Bold text display
  • <blink> - Blinking text
  • <sub> - subscript for displaying text slightly above the baseline and smaller in size



































CSCI N241 Web Design: Manipulating Basic HTML
5. Headings
  • Headings are displayed in bold text with automatic line breaks and extra space above and below.
  • There are 6 levels of HTML headings:

    Level One <h1>

    Level Three <h3>

    Level Six <h6>



































CSCI N241 Web Design: Manipulating Basic HTML
6. Centering Text Elements
  • There are two methods for centering text elements horizontally on a page--the align attribute and the <center> tag
  • <H1 ALIGN = "center">...</H1>

    Looks Like This

  • <CENTER>...</CENTER>
    Looks like this



































CSCI N241 Web Design: Manipulating Basic HTML
7. Making an Unordered List
  • Unordered lists begins <ul> and ends </ul>
  • Each items is indicated by an <li> tag. The closing </li> is usually omitted, but should be included if you are using Style Sheets to control list item display.

    • This is an example of an unordered list

    • Line two of the unordered list




































CSCI N241 Web Design: Manipulating Basic HTML
8. Changing the Bullet Shape
  • The type attribute allows you to specify one of three shapes:
    - disc (the default)
    - square
    - circle
  • <UL TYPE = disc>
    <UL TYPE = circle>
    <UL TYPE = square>



































CSCI N241 Web Design: Manipulating Basic HTML
9. Ordered Lists
  • Use an ordered list when you need to sequence data
  • The same basic structure is used for ordered lists as unordered lists
  • <ol>…..</ol> are the tags used to enclose the list
  • <li> is used for the individual list items



































CSCI N241 Web Design: Manipulating Basic HTML
10. Changing the Numbering Scheme
  • The type attribute has five possible values:
    - 1 (numbers)
    - A (uppercase letters)
    - a (lowercase letters)
    - I (uppercase roman)
    - i (lowercase roman)
  • Setting the first number
    - <OL START = 23>



































CSCI N241 Web Design: Manipulating Basic HTML
11. Example of an Ordered List
  • Veggie Soup
    1. Dice onions

    2. Slice carrots

    3. Peel potatoes

    4. Slice celery

    5. Brown meat



































outline

Using Attributes to Modify Tags

Examples:

Formatting Text

Physical Inline Style Tags

Headings

Centering Text Elements

Making an Unordered List

Changing the Bullet Shape

Ordered Lists

Changing the Numbering Scheme

Example of an Ordered List