HTML5 Resources

This slide show is used as a reference. It can guide you from one lesson to the next. Miss Anderson will use it to aid your understanding and to help you progress through the lessons.


Page Contents

Heading Tags <h1>

Heading tags are numbered from 1 to 6. Heading tag size 1 appears largest.  Do not mistake heading tags for font size. Heading tags give importance/hierarchy to titles and help with the organization of a document.  Heading tags are formatted as follows:

<h1>Heading importance</h1> (most important)
<h2>Heading importance</h2>
<h3>Heading importance</h3>
<h4>Heading importance</h4>
<h5>heading importance</h5>
<h6>Heading importance</h6> (least important)

Superscript Tag <sup>

When you type a date, such as May 10th, you can make the “th” appear smaller and in the upper right-hand corner near the zero by coding as follows:

May 10<sup>th</sup>

Result: May 10th


Emphasis Tag <em>

The emphasis tag is used to make text appear italicized. It is coded as follows:

I told you <em>not</em> to leave this house!

Result: I told you not to leave this house!


Strong Tag <strong>

The strong tag is used to make text appear bold. It is coded as follows:

<strong>On Sale Now</strong>

Result: On Sale Now


Bugs in Your Code

You will have bugs in your code if you…

  • spell tag names or attribute values wrong
  • are missing end tags
  • use incorrect attribute names
  • place text in the wrong place

Here are some examples of bugs:

<h1>My Heading</h2> (the heading numbers don’t match) When this happens, your text editor will default to the number typed in the first tag.

<h1>My Heading<h1> (the closing tag lacks the forward slash) When this happens, everything below the tag, unless you have correctly added heading codes to the titles you’ve written below this heading)  will appear as an h1 heading.

<h1>My Heading<h1/> (the forward slash is in the wrong position in the closing tag)

<h1My Heading</h1> (the opening tag lacks a closing angled bracket)


Personal Notes Tag <!–unseen content–>

You can add notes on a web page as a reference. While you can see your note, it is not published. Here is how it is coded:

<!–This is my personal note to myself–> (inside the opening angled bracket, you must type an exclamation mark and two hyphens; near the closing angled bracket, you must type two hyphens)


Lists <li>

Unordered Lists <ul>

with bullets

<ul>

<li>dogs
<li>cats
<li>birds
<li>tropical fish

</ul>

Here’s the result: (by default the unordered list is bulleted, but this can be removed with additional code) Notice in the coding for the unordered list above: 1) the line items appear indented because The Google Style Guide recommends using the space bar twice 2) a closing tag </li> is not required.

  • dogs
  • cats
  • birds
  • tropical fish
with squares

<ul style=”list-style-type:square”>

<li>dogs
<li>cats
<li>birds
<li>tropical fish

</ul>

Result:

  • dogs
  • cats
  • birds
  • tropical fish
with circles

<ul style=”list-style-type:circle”>

<li>dogs
<li>cats
<li>birds
<li>tropical fish

</ul>

Result:

  • dogs
  • cats
  • birds
  • tropical fish

Ordered Lists <ol>

with numbers

(Simply replace the u in the opening and closing tags with the letter o. This will automatically replace the bulleted list with numbers)

<ol>

<li>dogs
<li>cats
<li>birds
<li>tropical fish

</ol>

Result:

  1. dogs
  2. cats
  3. birds
  4. tropical fish
with uppercase Roman numbers:

<ol type=”I”> (simply replace your info in your opening tag)

with lowercase Roman numbers:

<ol type=”i”> (simply replace your info in your opening tag)

with uppercase alphabet:

<ol type=”A”> (simply replace your info in your opening tag)

with lowercase alphabet:

<ol type=”a”> (simply replace your info in your opening tag)


Horizontal Rule

The horizontal tag creates a horizontal line across your web page. It helps separate sections on a page. It is coded as follows:

<hr>

Result: (notice the gray line shown below)


Break Tag <br> and  Paragraph Tag <p>

Two tags can be used to create space between lines of text: the break tag <br> or the paragraph tag <p>.

Here’s an example of three lines of text, with each line coded to sit on a separate line, using the break tag:

Dogs are clever creatures.<br>They wake at odd hours.<br>They bark at odd times.

Result:
Dogs are clever creatures.
They wake at odd hours.
They bark at odd times.

Here’s an example of the same three lines of text, with each line coded to sit on a separate line, using the paragraph tag:

<p>My dog’s name is Cooper.<p>He puts holes into my blankets.<p>He will defend himself aggressively while chewing on his blanket.

Result:

My dog’s name is Cooper.

He puts holes into my blankets.

He will defend himself aggressively while chewing on his blanket.

Here’s the example above coded with double break tags:

My dog’s name is Cooper.<br><br>He puts holes into my blankets.<br><br>He will defend himself aggressively while chewing on his blanket.

Effect:

My dog’s name is Cooper.

He puts holes into my blankets.

He will defend himself aggressively while chewing on his blanket.

While two break tags can be used to create more space, the paragraph tag is the preferred method: it’s neater and succinct. No closing break tag or paragraph tag is required because the Google Style Guide recommends not using optional tags.


Make a Table With Data

Miss Anderson’s Table of Sweetness

Cookies Donuts CandyBars
Snicker Doodle Glazed Dark Chocolate Milky Way
Ginger Snap Custard Filled Look
Chocolate Chip Jelly Donut Big Hunk

Here is the code that creates the table and title shown above:

<h3>Make a Table with Data</h3>
<h4>Miss Anderson’s Table of Sweetness</h4>
<table>
<tbody>
<tr>
<th>Cookies</th>
<th>Donuts</th>
<th>CandyBars</th>
</tr>
<tr>
<td>Snicker Doodle</td>
<td>Glazed</td>
<td>Dark Chocolate Milky Way</td>
</tr>
<tr>
<td>Ginger Snap</td>
<td>Custard Filled</td>
<td>Look</td>
</tr>
<tr>
<td>Chocolate Chip</td>
<td>Jelly Donut</td>
<td>Big Hunk</td>
</tr>
</tbody>
</table>

Now, browse back to the table and you’ll notice it lacks lines. You can create thin or thick lines, add cell spacing, and text alignment. Try adding the following properties and values to your table tag. It will look like this:

<table border:”1″ cellspacing: “0” text-align:”center”>


Add Background Color to Your Web Page

Simply open up your body tag and type:

<body style=”background-color:#E6E6FA”>

This code uses color number FF00FF, which is fuschia.


Add a Hyperlink to a Web Page.

This code adds a hyperlink to CRESTek.net.

<a href=”blogs.egusd.net/creslab”>CRESTek</a>

Here’s the result: CRESTek

Print Friendly, PDF & Email