CS3226

Web Programming and Applications

Lecture 03 - HTML5

Dr Steven Halim
stevenhalim@gmail.com

Try this HTML quiz @ W3Schools for self check

Outline

HTML5

HyperText Markup Language, version 5*,
is the first language to be discussed in details in CS3226

This is the most frequently requested/served resource by client/server, respectively (from previous HTTP/S lecture)

In a nutshell, HTML documents are plain text files (created by a text editor*) typically stored on a web server

Key concepts: HTML tags, HTML document structure, URLs and hyperlinks...

HTML5 References

  1. The official but very technical
    HTML5 specification at the W3C website
  2. Some easier-to-digest references:
    1. HTML5 Element List at developer.mozilla.org
      (recommended)
    2. html5rocks
    3. html5demos
    4. Dive Into HTML5
    5. w3schools.com
    6. Google around for much more...

HTML element

element is a fundamental component of the structure of a text document

elements can contain plain text, other elements, or both, e.g. head, table, p (paragraphs), etc

HTML tag

tags mark the elements of an HTM(arkup)L file for your (web) browser and they look like this: a left angle bracket (<), a tag name (e.g. table), and a right angle bracket (>)

tags are usually paired (start and end tag)
— although some exception exists

The end tag looks just like the start tag except a slash (/) precedes the text within the brackets,
e.g. <table> and </table>

attribute

attribute can be included in some elements

We can write those attributes in the start tag to convey additional information or set those attributes via separate Cascading Style Sheets (CSS) file(s),
e.g. <table cellpadding="2px">

Important attributes for dynamic websites are
id (each element must have unique identifier) and
class (several elements can have the same class)

Notes (1)

HTML is not case sensitive (in general)
Examples: <table> is equivalent to <TABLE> or <TaBlE>,
but just use all lowercase to avoid confusing yourself

Notes (2)

(Web) browser support of HTML tags varies

If a browser does not support a tag, it is designed to ignore it (and thus writing a good cross-browser HTML5 file can be sometimes frustrating, but you can try this)

To test if your browser is good in handling HTML5 tags, you can check it by pointing your browser to: http://html5test.com/

PS: Let's just use Google Chrome web browser in CS3226

HTML Document Structure (Basic)

The standard HTML5 document structure is like this:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Document Title</title>
  </head>
  <body>
    <p>Page Content Goes here!</p>
  </body>
</html>

Copy paste the code above to a text editor, save it (as .html),
and open it with your browser

HTML Document Structure (Basic)

The <!DOCTYPE html> tag at the beginning of an HTML5 document alerts the web browser of the specific type of HTML document to follow

The <!DOCTYPE html> is for the HTML5 standard Document Type Definition (DTD)

There are a few other options for <!DOCTYPE>
for legacy HTML (GIYF — the HTML history is quite long)

HTML Document Structure (+CSS and JS, external)

We can add reference to external Cascading Style Sheet (CSS) and JavaScript (JS) file(s) like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
    
    
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <p>Page Content Goes here!</p>
  </body>
</html>

HTML Document Structure (+CSS and JS, internal)

We can also put the style and script internally in the HTML file itself

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
    <style>
      p { font-family: Courier; font-size: 77px; }
    </style>
    <script>
      alert('Hello world'); // pop up an alert
    </script>
  </head>
  <body>
    <p>Page Content Goes here!</p>
  </body>
</html>

Notes (1)

You can use W3C markup validation service to check if your HTML(5) documents are valid

What are the pros/cons of external/internal CSS/JS files?

Notes (2)

Is <script> best placed in <head> element?

Memorize These (1)

You need to memorize some of the common HTML tags
and some of their important (usually styling) attributes

Why should I do that?

  • Comments:
    <!--, --> (already used before)
  • Document metadata and scripting:
    <head>, <title>, <link>, <meta>, <style>, <script>
    (some are already used before, but we will explore more,
    e.g. <meta keyword="the keyword">,
    <meta http-equiv="refresh" content="5">,
    favicon <link rel=icon" href="iconfile"/>))
  • Must-remember text-related tags:
    <h1/h2/h3/h4/h5/h6>, <p>, <br>, <hr>, <pre>, <code>, <b>/<strong>, <i>/<em>, <u>, <del>/<ins>, <sub>/<sup>
    (some have been used before)
  • Grouping tags:
    <div> (division, block-level, the green border)
    versus <span> (inline, the red border here)
  • Unordered, Ordered, and Description Lists:
    <ul>/<ol>/<li>/<dl>/<dt>/<dd>
    (this is an example of unordered list
    important attributes: type, start, value)
  • Links:
    <a> (this is an example of a link
    important attributes: href, target)
  • Images:
    <img>, <map>, <area>
    (example at Steven's Globetrotter page with help of jQuery
    —to be discussed soon in JavaScript lecture,
    important attributes: src, height, width, alt)
  • Tables:
    <table>/<tr>/<th>/<td>/<thead>/<tbody>/<tfoot>/<caption>
    (example at CS3226 Lesson Plan
    important attributes: colspan, rowspan)
  • New Semantic/Structural Elements:
    <section>, <aside>, <nav>, <header>, <footer>, <article>, <figure>, etc
  • Graphics:
    <canvas> (<svg> is optional for CS3226)
    The chessboard below is NOT a picture
    It is an HTML5 canvas drawn using JavaScript
    More details of HTML5 Canvas in JavaScript lecture

If your web browser cannot handle this HTML5 canvas element, you will see this text instead
  • Form elements:
    Key element: <input> with various types: submit, radio, checkbox number, range, url, datetime, etc and their built-in verifier
    Other important elements: <form>, <textarea>, <button>, <fieldset>, <legend>, etc...

    This sample form contains a few HTML5 form elements and relevant attributes, please view the page source of that HTML file

    More details of HTML5 Form in PHP lecture

Other HTML5 Features

  • Media: <audio>, <video>
  • Inline Frame: <iframe>
  • Geolocation, try this
  • Drag and Drop, try this

The End

Try this HTML quiz @ W3Schools for self check