Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

  • learn how to use HTML attributes
  • learn the tags and attributes for links, images, etc.
  • learn the tags and attributes for complex tables

A Simple Web Page


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Welcome!</title>
</head>
<body>
    <h1>Welcome to my web page!</h1>
    <p>
        This is a paragraph. Good, isn't it?
    </p>
</body>
</html>

HTML Attributes and Values

Start tags can contain attributes with their values.

Attributes provide extra information about the element. 


<html lang="en">

<meta charset="utf-8" />

The lang Attribute

Always specify the language of your web pages.
This helps browsers, screen-readers and crawlers. 


<html lang="en">

But you can specify the language for any element,
e.g. a particular paragraph, or a word or phrase: 


<p lang="fr">
    La majeure partie de cette page Web est en anglais.
    Mais ce paragraphe ne l'est pas.
</p>

<p>
    I'd like to say Bonjour! to visitors 
    from France.
</p>

Hyperlinks

  • Without hyperlinks, it wouldn't be a web!
  • HTML uses 'anchor' elements for hyperlinks:
    • Tag: <a>
    • Attribute: href
    • Attribute value the Uniform Resource Locator (URL) of the target document.
    • Content: the word or phrase or element the user will click.

Example Hyperlinks

E.g. a link to a web page elsewhere on the web: 


<a href="http://www.example.org/animals/wombats.html">wombats</a>

E.g. a link to a web page in the same folder: 


<a href="contact_us.html">Contact Us</a>

Media

Media include:
images (GIF, JPEG, PNG, WebP, SVG, …)
favicons
videos (MP4, WebM, …)
audio files (MP3, AAC, …)

Typically, these are external resources
— stored separately, in their own files.
They might be on the same server as the web page, or on a different server.

Images

  • Typically, images are stored in files, separate from the web page itself.
    • Tag: <img>
    • src attribute: its value is the URL of the image file
    • Other attributes, e.g.: alt, title, width, height, …
    • It's a void element

<img src="sea_photo.jpg" title="A calm sea."
     width="250" height="167"
     alt="A calm sea: gently rippling waves under a clear sky." />

Accessible images

  • Images in HTML must have an alt
  • If an image conveys information, the alt must describe its content for screen-readers and search engines.
  • If an image is purely decorative:
    • You can use alt=""
    • But do you really need the image?

Display of Images

By default, images are displayed 'inline'
— continuing on the same line, like a word. 


Here is an image:
<img src="sea_photo.jpg" alt="..." />
Nice isn't it?

Display of Images

One of the best ways to arrange for an image to be displayed on a newline is to nest the <img> within a <figure> element. 


Here is an image:
<figure>
    <img src="sea_photo.jpg" alt="..." />
</figure>
Nice isn't it?

The <figure> element can also contain a <figcaption> element.

Favicons

The images that appear in browser tabs are favicons

Once you have a suitable image in PNG or ICO file format (e.g. favicon.ico) then,
in the <head> of your HTML, use a <link> element: 


<link rel="icon" href="favicon.ico" />

Video

Video sites such as YouTube and vimeo will give you HTML that you can copy-and-paste into your web page. (Right-click and choose Copy embed code)

In this case, you are displaying videos that are hosted on, and streamed from, their servers.

Video

Suppose instead you have your own video files, hosted on your own server.

HTML5 has the <video> element, e.g. 


<video controls>
    <source src="sea_video.mp4" type="video/mp4" />
</video>

Similarly, there is an <audio> element.

Being a Good Person

Another HTML Table

This table has a caption.
Its rows, as well as its columns, have headers.

Results for October
Team Played Won Lost Drawn
Rovers 10 5 2 3
Wanderers 7 1 0 6

Accessible HTML Tables


<table>
    <caption>
        Results for October
    </caption>
    <tr>
        <th scope="col">Team</th>
        <th scope="col">Played</th>
        <th scope="col">Won</th>
        <th scope="col">Lost</th>
        <th scope="col">Drawn</th>
    </tr>
    <tr>
        <th scope="row">Rovers</th>
        <td>10</td>
        <td>5</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <th scope="row">Wanderers</th>
        <td>7</td>
        <td>1</td>
        <td>0</td>
        <td>6</td>
    </tr>        
</table>

The scope attribute helps screen-readers.

More Complex Tables

Using colspan and rowspan attributes,
a cell can span more than one column or row.

Life Expectancy
Current age
At birth At 65
Ireland Women 84 21
Men 82 19
UK Women 83 21
Men 81 18

G'luck!