Announcement

Collapse
No announcement yet.

HTML 101: pt5 - Structured Text

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML 101: pt5 - Structured Text

    Part 4: Display Data - Tables and Lists

    HTML has a large number of tags/elements which can be used to describe the content within them.

    We’ve already seen the <p> and <span> elements back in part 2. These a contextless elements – they do not describe their content.

    An example of a descriptive tag would be the <code> tag. This informs the browser (and search engine) that the contents of this element are a code example, and the browser will render it as such (usually as a fixed width font like Courier).

    Quotations

    Quotations are popular everywhere, it’s a way of saying “it’s not just us who think this!”.

    So, you will probably want to have a quotation somewhere in your site at some point.

    There are two methods for this. First the <blockquote>:

    <blockquote cite=’Anonymous’>
    <p>
    The quick brown fox jumped over the lazy dog.
    </p>
    </blockquote>
    The cite attribute informs users as to the source of the quote.

    Blockquotes can contain multiple paragraphs (<p> elements). Because blockquotes were (ab)used by early developers to indent text, browsers do not include quotation marks at the start or end of the element. Indentation should now be handled by CSS styling, but the quote marks are still missing.

    The second type of quote (example from http://www.w3.org):

    Code:
      John said, <q lang="en-us">I saw Lucy at lunch, she told me
      <q lang="en-us">Mary wants you
      to get some ice cream on your way home.</q> I think I will get
      some at Ben and Jerry's, on Gloucester Road.</q>
    In this case, we have a nested quotation. The browser places the correct quote marks in place of the elements when drawing the page, so the output would look like:

    Code:
      John said, "I saw Lucy at lunch, she told me 'Mary wants you
      to get some ice cream on your way home.' I think I will get some
      at Ben and Jerry's, on Gloucester Road."
    Subscripts and Superscript

    Code:
      H<sub>2</sub>0
    
      29<sup>th</sub> of January
    ‘Nuff said?

    Abbreviations and Acronyms

    Code:
      <abbr title=’Abbreviation’>abbr.</abbr>
    
      <acronym title=’Radio Detection and Ranging’>Radar</acronym>
    As you can see, the title for both tags is the full description of the abbreviation/acronym. I’m afraid that the argument between what constitutes an abbreviation or an acronym is for the linguists to answer.

    And the rest

    <em> - emphasis

    <strong> - stronger emphasis

    <dfn> - the defining instance of something


    <code> - a fragment of code

    <samp> - example output from a program

    <var> - definition of a variable

    <kbd> - indicates text for user input


    <cite> - used in conjunction with the <q> tags:

    Code:
      The book by <cite>J.R.R. Tolkien</cite> begins with <q lang=’en-us’>There was a hole…</q>

    Wrapping up

    There are a couple more elements for controlling how text is displayed, but they don’t carry any meaning with them.

    The pre-formatted text is a simple way of just having the output exactly as you wrote it in the editor:

    Code:
      <pre>Multiple whitespaces will be output                       exactly as the user put it in</pre>
    
      <p>Whereas in this element multiple                 whitespace will be condensed back into a single space</p>
    The above code will be display as:

    Code:
    Multiple whitespaces will be output                       exactly as the user put it in
    
    Whereas in this element multiple whitespace will be condensed back into a single space
    I think that about covers it for the 101’s – hope you’ve found all of this helpful.

    Some resources:

    http://www.w3.org

    http://www.w3schools.com

    http://www.htmlhelp.com

    http://www.htmlforums.com


    Once you have gotten used to web design in HTML, you should start looking at how CSS can be used to create some powerful designs.

    HK

  • #2
    Code:
     H<sub>2</sub>0
    
      29<sup>th</sub> of January
    I highlighted the incorrect closing tag, simple typo.

    Comment


    • #3
      nice tatorial stuart, easy to understand

      Comment


      • #4
        Wow, thanks, did helped me alot! However I'm still a newb ;| xD

        Sweet guide.

        Comment


        • #5
          thanks for sharing! this is really a great help

          Comment

          Working...
          X