Using HTML on your Page

HTML ("HyperText Markup Language") provides "tags" to mark-up plain text to pretty-up the formatting and layout. This page describes the most commonly-used HTML tags. If you want to know more gory details about HTML, just google "basic HTML reference". To look at the HTML used on the SKEA website, just click the Edit tab. To look at HTML on other peoples' websites, use your browser's View > Page Source (this is on Firefox - other browsers have something similar).


Common HTML tags to Use
    Most HTML tags are "bookends", i.e., you surround the text you want to change with matching "start" and "end" tags. The "start" and "end" tags are the same, except the end tag has a forward slash in front of it, as shown below.
    tag what it does how to write the mark-up result looks like ...
    <b> boldface I am <b>bold</b> I am bold
    <i> italics I am <i>really</i> smart I am really smart
    <big> bigger font I am a <big>big boned</big> girl I am a big boned girl
    <small> smaller font I have <small>very little </small> money I have very little money
    <p> paragraph (note: this is only needed if you want additional line breaks)
    line one
    <p>
    line two
    line one

    line two

    <br> line break (note: this is only needed if you want additional line breaks)
    line one
    <br>
    <br>
    line two
    line one




    line two


How to make a Link to another Page or Website
    If you type a URL (URL = a website address) into the Body of a page, for example "http://skea2.org", it will automatically be made into a link. So you don't need to do anything special if you just want to turn a URL into a link. But sometimes you want to turn a word or phrase or a photo into a link.

    Basic idea: Bookend the text or image with <a href> and </a> to make a link, like so:

    1. Link to another page on the SKEA website:

      First get the URL for the page you want to link to. You can omit the "http://" part of the URL. Instead just use what comes after. Note it must start with a slash. Example: make a link to the SKEA "Classes" page:

      For more information, see <a href="/classes">SKEA Classes</a>

      which gives this result:

      For more information, see SKEA Classes

    2. Link to another website:

      You always need the "http://" part of the URL. Example: link to the State of Hawaii's website

      <a href="http://www.ehawaii.gov/">State of Hawaii Website</a>

      which gives this result:

      State of Hawaii Website

    See the next section for how to make a photo into a link.


How to Embed a Photo in your Page
    1. Upload the photo and get the URL
    See "How to Add a Photo to your Page" on How to Edit a Page.
    Example photo URL: /sites/default/files/blue.jpg

    2. Create an "img" tag for the photo

    <img src="/sites/default/files/blue.jpg">

    This will embed the image into the page at the spot where you put the img tag.

    3. Additional things you can do to the embedded image

    • Make it smaller: specify a height or width (not both) in pixels like this:
      <img width=100 src="/sites/default/files/blue.jpg">
    • Make your photo be a link by bookending it with an "a href" tag (don't forget the </a> at the end!)
      Example: link a logo to the State of Hawaii website
      <a href="http://hawaii.gov"><img width=100 src="/sites/default/files/logo.jpg"></a>
    • Put some text to the right of the image: you will need to use a table for this. See How to Use a Table for Layout below.


How to Make a List
    There are two main kinds of lists:
    "ordered list" (tag = "ol" - the list items are numbered 1, 2, 3, etc.) and
    "unordered list" (tag = "ul" - the list items are bullets).

    Here is how to make an ordered list:

    <ol>
    <li>First item</li>
    <li>Second item</li>
    </ol>

    It looks like this:

    1. First item
    2. Second item

    The unordered list is exactly the same, except substitute "ul" for "ol":


    <ul>
    <li>First item</li>
    <li>Second item</li>
    </ul>

    It will look like this:

    • First item
    • Second item

    Note: Sometimes you want to leave a line break between each list item, such as when your items are long sentences. In this case, use a paragraph tag and put your closing "li"s on a separate line, like so:


    <ul>
    <li>First item
    </li>
    <p>
    <li>Second item
    </li>
    </ul>

    It will look like this:

    • First item
    • Second item


How to Use a Table for Layout
    The "table" tag is very useful because it lets you arrange text and photos into a more pleasing layout. This page uses a table at the top for "Common HTML tags to Use". If you click the Edit tab, you can look at the mark-up I used to make it. The table on this page uses a "border" (the vertical and horizontal lines that make up the grid for the table.) However, most tables used on the SKEA website do not have a border because they are used solely for layout.

    There are only 3 main table tags:

    • <table>: marks the beginning and end of a table
    • <tr>: "table row" marks the beginning and end of one row in the table
    • <td>: "table data" marks the beginning and end of one cell in the table

    Example: Suppose you want to embed a photo in your page, and align some text to the right of it. You can use a table!

    Here is the mark-up:

    <table>
    <tr>
    <td><img src=/sites/default/files/kidspaintinghandbrush_1.jpg></td>
    <td>
    <b>Kids Painting</b>
    This is a shot of kids painting with ink on paper. It was probably taken in a classroom by one of the teaching artists in the Art of Learning program. It must be cold outside because the little girl has a hoodie on. So it may have been taken in December or January.</td>
    </tr>
    </table>

    Here's what it looks like:

    Kids Painting
    This is a shot of kids painting with ink on paper. It was probably taken in a classroom by one of the teaching artists in the Art of Learning program. It must be cold outside because the little girl has a hoodie on. So it may have been taken in December or January.

    Additional things you can do with this table

    1. Align the text with the top of the photo, and put in some additional spacing.

    Inside the "td" tag you can use two kinds of alignment:
    - "align" - side-to-side alignment (left, right, center)
    - "valign - vertical alignment (top, bottom, center)

    I will add a "vertical alignment=top" to the text by changing this:
    <td>
    to this:
    <td valign=top>

    I also added a line break between the "Kids Painting" and the text.

    And I added some padding to the table, by changing this:
    <table>
    to this:
    <table cellpadding=10 cellspacing=10>

    Now it looks like this

    Kids Painting

    This is a shot of kids painting with ink on paper. It was probably taken in a classroom by one of the teaching artists in the Art of Learning program. It must be cold outside because the little girl has a hoodie on. So it may have been taken in December or January.

    2. Make the image smaller without having to re-size it using Photoshop or some other application on your computer. You can add a "width" or "height" to the img tag as explained above. I will change this:
    <td><img src=/sites/default/files/kidspaintinghandbrush_1.jpg></td>
    to this:
    <td><img width=200 src=/sites/default/files/kidspaintinghandbrush_1.jpg></td>

    and now it will look like this:

    Kids Painting

    This is a shot of kids painting with ink on paper. It was probably taken in a classroom by one of the teaching artists in the Art of Learning program. It must be cold outside because the little girl has a hoodie on. So it may have been taken in December or January.