PALS3004/G308 Web Programming
SPEECH, HEARING & PHONETIC SCIENCES
UCL Division of Psychology and Language Sciences
PALS3004/G308 Web programming for research in psychology and language sciences

2. Introduction to HTML

Learning Objectives

By the end of the session you should:

Topics

  1. Structure of an HTML document

    2. HTML documents consist of plain text information and markup. The text represents the content of the document, while the markup represents its structure. Modern thought is that the markup should not represent the "look" of the document (fonts, colours, text size, margins, ...).

    HTML markup should form a strict hierarchy, with sequences of subordinate elements wholly contained within larger superordinate elements. Mandatory hierarchical elements include the DOCTYPE, HTML, HEAD and BODY components. 

       DOCUMENT
   +---DOCTYPE
   +---HTML
       +---HEAD
       |   +---CHARACTER-SET
       |   +---TITLE
       |   +---STYLESHEETS
       |   +---SCRIPTS
       +---BODY
           +---HEADINGS
           +---PARAGRAPHS
           |   +---BOLD
           |   +---ITALIC
           |   +---UNDERLINE
           |   +---LINKS
           +---LISTS
           +---TABLES
           +---IMAGES

    Markup is indicated by angle brackets: <>. Markup can come as paired or unpaired tags. Paired tags have the format: 

    <tag attribute="value" attribute="value"> ... </tag>

    Unpaired tags have the format: 

    <tag attribute="value" attribute="value" />

    Note that all tag names and attribute names are specified in lower case, and all attribute values are quoted (either with double or single quotes).

    To display a "<" symbol, you need to write "&lt;".

    To display a "&" symbol, you need to write "&amp;".

  2. Document Types

    3. There are now many "versions" of the HTML "standard". The DOCTYPE declaration tells the browser which standard is being used. Fortunately, most modern browsers support HTML version 5, for which the DOCTYPE is simply: 

    <!DOCTYPE html>

    Make sure that this is the very first thing in the HTML file, without even a newline or a space before it.

    When looking at other peoples' web pages you may see other DOCTYPEs. For everyday HTML pages, a fairly loosely defined document type is very common – this type includes support for tags which are "deprecated" (i.e. due to be phased out). This "loose" doctype would be given as 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    Another popular document type for HTML version 4 is for XHTML – a more formal version of HTML built on the XML standard. The loose version of this would be: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Whatever DOCTYPE you choose, you can submit your page to an HTML validator (e.g. http://validator.w3.org/) to check whether your code meets the standard.

  3. Character Sets

    4. All modern browsers support the Unicode character set. This is the preferred character set to use when writing web pages. However some text editors do not support Unicode.

    When using Unicode, it is essential that you let the client browser know which encoding is being used. The most common is called UTF-8. When you edit your document, be sure to select this encoding when you save your file. The Brackets editor does this by default. To specify the coding, put the following element into the HTML document HEAD section: 

    <meta charset="utf-8">

    If you are not using Unicode, then it is recommended that you only use plain roman characters in your file.

    Here is a complete example web page that uses Unicode characters: 

    <!DOCTYPE html>
<html>
  <head>
    <title>Demonstration of Unicode</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>The pronunciation of "hypertext" is /ˈhaɪpəˌtekst/.
  </body>
</html>

  4. Common HTML Elements & Attributes

    5. ElementAttributeDescription
    <html> ... </html> HTML container
    <head> ... </head> Document header
    <body> ... </body> Document body
    bgcolor="aqua|black|blue|fuchsia| gray|green|lime|maroon|navy|olive| purple|red|silver|teal|white|yellow"Background colour
    bgcolor="#RRGGBB"Background colour
    <link /> Links in a related document
    rel="stylesheet"Stylesheet relationship
    type="text/css"Stylesheet type
    href=URLStylesheet address
    <title> ... </title> Document title
    <!-- … --> Comment container
    <h1> ... </h1>
    <h2> ... </h2>
    <h3> ... </h3>    		 Headers, levels 1, 2, 3
    <p> … </p> Paragraph
    align="left|center|right|justify" Set paragraph alignment
    <br /> Break
    <hr /> Horizontal rule
    <em> ... </em> Emphasised text
    <strong> ... </strong> Important text
    <sup> .. </sup> Superscript
    <sub> … </sub> Subscript
    <pre> … </pre> Pre-formatted
    <ul> ... </ul> Unordered list (bulleted)
    <ol> ... </ol> Ordered list (numbered)
    type=a|A|i|I|1Number format
    <li> … </li> List item
    <dl> … </dl> Definition list
    <dt> … </dt> Definition term
    <dd> … </dd> Definition description
    <table> ... </table> Table container
    border=width Set table border width
    bgcolor="white"Background colour
    <tr> ... </tr> Table row container
    <th> ... </th> Table heading cell
    <td> ... </td> Table data cell
    align="left|center|right|justify" Horizontal alignment
    valign="bottom|middle|top" Vertical alignment
    colspan=count Span columns
    rowspan=count Span rows
    bgcolor="white"Background colour
    bgcolor="#RRGGBB" Background colour
    <a> ... </a> Hyperlink
    href=URL Target address
    <img /> Image
    src=URL Source address
    width=npixel Width in pixels
    height=npixel Height in pixels
    title="mouse-over description" Tooltip
    <div> … </div> Logical text division
    align="left|center|right|justify" Set division alignment
    <span> … </span> Logical text span

    Here a complete web page that includes example use of some of these: 

    <!DOCTYPE html>
<html>
  <head>
    <title>Demonstration of HTML</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Demonstration of HTML</h1>
    <p>This is some <strong>strong text</strong> 
      and some <em>emphatic text</em>
    <table border="1" bgcolor="ivory">
      <tr><th>Item</th><th>Price</th></tr>
      <tr><td>Wine</td><td>£7.50</td></tr>
      <tr><td>Chocolates</td><td>£5.25</td></tr>
    </table>
    <p>To see the full price list 
      <a href="full-list.html">click here</a>.
  </body>
</html>

  5. Images

    6. To generate or manipulate images, you will need access to (i) a vector-based drawing program (you can use Powerpoint for this if you like), and (ii) a bitmap-based painting program (a good free program for Windows is called Paint.NET).

    Types of image storage:

    JPEGLossy compression for photographs
    GIF, PNGLossless compression for graphics

    To download images displayed on an existing web page, right click on the image and choose "Save Image As …" to download a copy as a file.

    To copy an image displayed in an existing web page, you can usually right click and choose "Copy Image" to copy it to the Clipboard. Then paste the clipboard image into a new image in a paint program.

    To capture screen shots (on a Windows PC), make the window the current focus and press [Alt+Print Screen]. This captures a screen image of the window onto the clipboard. Then paste the captured window image into a new image in your paint program.

    Use your paint program to crop and resize your image, then save to your project folder as JPEG or PNG as appropriate. Remember that many users will have screens only 1000pixels wide, so there is little point in displaying images wider than this.

    To create a new vector image you can use the Drawing tools in Powerpoint, then export (i.e. 'Save As') the generated slide as a .PNG bitmap. Then you can use your paint program to change colours, resize, etc.

    To include an image into your HTML page, first save the image itself within a folder in your web space. Then create a link like the following: 

    <img src="file.png" width=ddd height=ddd alt="title">

    If you leave out the width and height attributes, the browser will use the full size of the image.

  6. Sounds & Video

    7. For short, simple sounds, it is probably easiest to record these as WAV files, using a program such as WASP (from the Department web site). Be sure to record at a reasonable quality, e.g. 16-bit 22050 samples/sec.

    For longer sounds, it is best to compress your WAV recording into an MP3 file. You can do this with the freeware program called winLAME. It is probably best not to go below a bit rate of 192kbps to preserve audio quality. This still gives a 7:1 compression over CD audio files.

    The simplest way to include a sound into a web page is to use a link, like this: 

    <a href="audio.wav">Click here to play sound</a>

    However this gives a rather awkward experience to users, since clicking on the link takes the browser to a new page and may also pop-up a dialog asking what to do with the WAV file. The recommended way to incorporate audio samples on your web page is to use the HTML5 <audio> element, like this: 

    <audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.wav" type="audio/wav">
  <a href="audio.mp3">Click to play audio</a>.
</audio>

    The audio tag inserts an audio player into the web page. The various source tags specify a set of alternative sound files. Different browsers support different file formats, and unfortunately no single format is supported by all browsers. Each browser chooses the first sound file that it supports. If the browser does not support any of the source files, then it displays the text in the last line of the audio block, in this case to revert to a simple link.

    A very similar approach can be used for video. You can provide a simple link to the video file, and users can download and play the file on their local machines. However because there are so many video file formats and video coding systems, it is hard to deliver a video in a format that is playable on all platforms. The <video> element solves this problem in an analogous way to audio: 

    <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support this video.
</video>

    The video tag inserts a video player into the web page with the dimensions specified. The source tags specify a list of alternative versions of the video in different formats. Each browser will play the first video format that it supports or report the message saying that no available format is supported.

    More details on audio and video format conversion can be found in Resources below.

    Lastly, if the video you want to show is available on a video sharing service like YouTube, you can embed HTML codes into your page so that the video is streamed from their site, removing the problems associated with video storage and format conversion.

    Here is an embedded YouTube video that explains how to embed YouTube videos on your page:

Resources

Exercises

  1. Build a web page ("ex2-1.html") to demonstrate the use of <h1>, <h2>, <h3>, <p>, <br> and the emphasis, strong, superscript and subscript tags.
  2. Build a web page ("ex2-2.html") to demonstrate (i) an unordered list, (ii) an ordered list, (iii) a definition list. Try embedding one list inside another list.
  3. Build a web page ("ex2-3.html") to demonstrate the use of tables. Experiment with border thicknesses and the use of table header cells <th>.
  4. Link your pages together with hyperlinks so that you can move between them.
  5. Take a photograph with a digital camera or find one on the web. Read the image into a paint program and change the size to about 300x300. Save as a JPEG image in your project folder (the eXtplorer toolbar allows you to upload files from your local machine). Create a web page ("ex2-5.html") which displays the image.
  6. Combine the use of tables and images to create a web page ("ex2-6.html") with a layout where text and images are intermixed, like the picture below. Try turning off the borders and giving the cells a background colour.

    textimage
    text
    imagetext
    text
    textimage

  7. Record a short sentence and save to your project folder as a WAV file. Create a web page ("ex2-7.html") with an <audio> element that allows users to play the sound. Using WASP, calculate a spectrogram of the sound and save it as an image to your project folder. Add the spectrogram to your page as an image above the audio controls.

Homework

  1. Complete the exercises you didn't finish in class.
  2. Watch at some more of the video course on HTML available at Lynda.
  3. Create a folder in your course web space to contain your answers to all the exercises (for example http://www.phon.ucl.ac.uk/courses/spsci/webprog/users/yourname/ex), and upload your HTML files and associated images & sounds to the folder. Then create an index page ("ex/index.html") with links to all your exercise answers.
  4. Practise with images:
    1. Find a nice photograph of large size and good quality and save it as a JPEG image.
    2. Using a paint program like Paint.NET change the size the stored image so that it fits nicely on a web page - maybe a maximum of 500 pixels in either height or width.
    3. Next try changing the quality of the stored image. In Paint.NET this is done in the File Save dialog. Typically JPEG images have a quality setting of 95% or 90%. Experiment with changing this to 80%, 60% and 40%, saving each version as a new file.
    4. Create a web page in your course web space that demonstrates the different versions of the image. Add a caption to each version listing the quality and the file size of each image. You might use HTML tables to lay out the page neatly. Link your page into your exercises index page.

Word count: . Last modified: 15:49 21-Nov-2017.

© 2017 Mark Huckvale UCL