Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Arachne's Web Academy (- threads, 693 posts)
    Tutorials - HTML/XHTML (317 posts)
    Social Thread

    Expand your own skills and aid others in learning HTML to XHTML by offering us a tutorial of your own! ...
    26 Members have made 107 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: 08 - Hyperlinks
    Prev: 06 - Getting Started
    07 - Headings
    Sankira.gif
    Author: * Sankira Qin - 15 Posts on this thread out of 1,337 Posts sitewide.
    Date: Jun 15, 2005 - 17:48

    Looking at the source code of our sample file, you'll see that I've used unless I wanted single spacing, in which case I've used This is simply to make formatting the individual paragraphs easier should we decide we want to make changes to them.

    As it is, this is a pretty dull document. So let's beef up the main heading titles by making them bigger and bolder...like the headings you would see in a textbook.

    Headings

    Headings (not to be confused with the header of the HTML file) are a quick means of formatting text. HTML recognizes six pre-formatted heading tags, each providing a slightly different style. The available heading tags are: and are applied like this:

    Text for Heading

    H1 looks like this

    H2 looks like this

    H3 looks like this

    H4 looks like this

    H5 looks like this
    H6 looks like this

    As you can see, the formatting of the tag creates the largest text, while gives you the smallest. (Just remember, the smaller the number, the larger the text.)

    Adding headings

    In our document, the first sentence, "Tree of Life Garden" is the title of the page, so we'll make it the largest by applying the tag, like this:

    The next line, "Designing with HTML", is the document name. We don't want that as large as the main title, so we'll step it down one level and apply to that one. The other eight headings (A Lesson from Psyche, Why are we doing this?, Signing up for lessons, What's in it for me?, What do I need to participate?, Academy Lessons, Miscellaneous Goodies, and External Resources) are all subsections of the document, so we'll go down one more level and apply to those.

    Headings, like paragraphs, require a closing tag and are automatically formatted to create a double line break when the tag is closed. So, since they're no longer needed, don't forget to remove the tags from the various headings, before applying the appropriate heading tag, like this:

    After you've added the tags to all the sub-headings. Your document should look like this:

    Tree of Life Garden

    Designing with HTML

    Arachnes's Web presents a tutorial designed to help the (as yet) technologically challenged overcome HTML stage fright and begin to enjoy coding at home.

    You can download a copy of the blank html file here.

    A Lesson from Psyche

    CSS, the Aphrodite of web coding, says...

    Academy Lessons


    HTML/XHTML
    Cascading Stylesheets....


    Some of the Available Attributes for Heading Tags
    AttributeValueUse
    align left, center, right, justify specifies the alignment of the text in the header.


    NEXT: 08 - Hyperlinks
    PREV: 06 - Getting Started
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2008 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff