HTML Review

CSC 342 - Web Technologies

HTML elements

  • <element attribute="value">Content</element>

    • < ... >: is an opening tag

    • </ ... >: is a closing tag

    • element: is the name of the element

    • attribute: is a property of an element, there can be zero or more attributes associated with a tag

    • value: is the value of an attribute

Semantic Markup

  • The purpose of HTML is to add meaning and structure to the content

  • HTML is not intended for presentation, that is the job of CSS

  • When marking up a document, choose the element that provides the most meaningful description of the content

Block and inline elements

  • Block elements start on new lines

  • Inline elements do not start a new line

  • Each type of element has a default value, but this can be modified with CSS

Paragraphs and Headings

  • <p>...</p> a paragraph

  • <h1>...</h1> a heading

  • There are six levels of headings: h1, h2, h3, h4, h5, h6

  • Headings should be used semantically – change the size with CSS

Unordered Lists

  • <ul>...</ul> an unordered list

  • <li>...</li> a list item

  • Example:

    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ordered Lists

  • <ol>...</ol> an ordered list

  • <li>...</li> a list item

  • Example:

    <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

Description Lists

  • <dl>...</dl> a list containing name and value pairs

  • <dt>...</dt> the name or term

  • <dd>...</dd> the value or description

  • Example:

    <dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>

  <dt>Term 2</dt>
  <dd>Description 2</dd>

  <dt>Term 3</dt>
  <dd>Description 3</dd>
</dl>

Elements for Organizing Page Content (HTML5)

  • <section>...</section> a thematic group of content

  • <article>...</article> a self-contained composition

  • <nav>...</nav> primary navigation links

  • <header>...</header> introductory material

  • <footer>...</footer> a footer

Inline Text Elements

  • Recommended:

    • <em>...</em> stressed emphasis

    • <strong>...</strong> strong importance

  • Not Recommended:

    • <b>...</b> visual emphasis

    • <i>...</i> alternate voice

    • <s>...</s> incorrect text

    • <u>...</u> annotated text

    • <small>...</small> legal text; small print

Generic Elements

  • <div>...</div> generic block-level element

  • <span>...</span> generic inline element

  • Usually given a class or id attribute to indicate purpose

HTML Special Characters

Character Named Entity Numeric Entity
&nbsp; &#160;
& &amp; &#038;
< &lt; &#060;
> &gt; &#062;

Images

  • <img> the image element

  • Required attributes:

    • src: source URL

    • alt: alternate text

  • Example:

    <img src=/image.gif" alt="an image">

  • Some additional attributes:

    • height: height in pixels

    • width: width in pixels

Tables

  • <table>...</table> tabular content

  • <tr>...</tr> table row

  • <th>...</th> table header

  • <td>...</td> table cell data

Table Example

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  <tr>
  <tr>
    <td>Row 1 Column 1 Data</td>
    <td>Row 1 Column 2 Data</td>
    <td>Row 1 Column 3 Data</td>
  <tr>
  <tr>
    <td>Row 2 Column 1 Data</td>
    <td>Row 2 Column 2 Data</td>
    <td>Row 2 Column 3 Data</td>
  <tr>
</table>

Spanning Table Cells

  • Spanning is stretching a table cell to cover multiple rows or columns

  • Attributes for th and td:

    • colspan

    • rowspan

  • Example:

<table>
  <tr>
    <th colspan="2">Two Columns</th>
  <tr>
  <tr>
    <td>Row 1 Column 1 Data</td>
    <td>Row 1 Column 2 Data</td>
  <tr>
</table>

Forms

  • <form>...</form> is a container for all the content of a form

  • Attributes:

    • action: the URL of the action page

    • method: the HTTP method used to send data

  • Example:

    <form action="/process.php method="post">
FORM ELEMENTS
</form>

Form Controls

  • Form controls facilitate the data submission

  • Example form controls

    • Text entry fields

    • Buttons

    • Menus

  • The name attribute is used in form controls to provide a variable name for the server application

Text Entry

  • <input type="text"> a single line text entry control

  • <textarea>...</textarea> a multiline text entry control

  • <input type="password"> password text control

  • <input type="search"> a search line text entry control

  • <input type="email"> an email text entry control

  • <input type="tel"> a telephone number text entry control

  • <input type="url"> a URL text entry control

Submit and Reset Buttons

  • <input type="submit"> submits the form data to the server

  • <input type="reset"> resets the form

  • The value attribute can be used to change the text displayed on the buttons

  • Example:

    <input type="reset" value="Start Over">

Radio Buttons

  • <input type="radio"> is a radio button

  • The name attribute binds multiple radio inputs into a set

  • Example:

<input type="radio" name="x" value="1" checked>
<input type="radio" name="x" value="2">
<input type="radio" name="x" value="3">
<input type="radio" name="x" value="4">

Checkbox Buttons

  • <input type="checkbox"> is a checkbox button

  • The name attribute with brackets sends the checkbox data as an array to PHP

  • Example:

<input type="checkbox" name="x[]" value="1">
<input type="checkbox" name="x[]" value="2">
<input type="checkbox" name="x[]" value="3">
<input type="checkbox" name="x[]" value="4">