Advanced HTML

Presenter Notes

1.   Introduction

author:Pierre-Antoine Champin
date:2012
address:Département Informatique, IUT Lyon 1

Contrat Creative Commons

Presenter Notes

2.   Special characters

The following characters have special meaning in HTML, so a special code (entity) is needed to display them:

< &lt; lower than
> &gt; greater than
" &quote; quote
' &apos; apostrophe
& &amp; ampersand

NB: other entities exist for many non-ASCII character, for example &eacute; for é, &Agrave; for À, &ccedil; for ç...

However, HTML now supports unicode, so they are not strictly necessary (and they hinder readbility).

Presenter Notes

3.   Tables

A table is composed of rows, which are in turn composed of cells.

the table
a row
a header cell a data cell another data cell

This is described with the following tags:

table <table>
row <tr>
header cell <th>
data cell <td>

Presenter Notes

Example (code)

<table>
  <tr>
    <th>Product</th> <th>Price</th> <th>Available</th>
  </tr>
  <tr>
    <td>Beer</td> <td>3€</td> <td>no</td>
  </tr>
  <tr>
    <td>Wine</td> <td>5€</td> <td>yes</td>
  </tr>
</table>

Presenter Notes

Example (rendered)

Product Price Available
Beer 3€ no
Wine 5€ yes

Presenter Notes

4.   Meta tags

  • <meta> tags are located in the <head> of the document.
  • They contain metadata: data about the document itself (literally: “data about the data”), usable for example by search engines.
<meta name="description"
      content="learn advanced tricks in HTML">
<meta name="author"
      content="Pierre-Antoine Champin">
<meta name="keywords" content="html web iut">

Presenter Notes

Robot meta tag

The robot meta tag can be used to provide instructions to search engines:

  • index/noindex: whether they should index the page itself
  • follow/nofollow: whether they should follow the links in the page
<meta name="robot" content="index,nofollow">

Presenter Notes

Language of metadata

Metadata can be provided in different languages, specified with the lang attribute, with a language code as specified by BCP47.

<meta name="description" lang="en"
      content="learn advanced tricks in HTML">
<meta name="description" lang="fr"
      content="apprenez plus de toursen HTML">

Note

The lang attribute can be used on any HTML tag, including inside the body.

Presenter Notes

5.   Specifying different stylesheets

Different stylesheet can be specified for different media types:

<link rel="stylesheet" type="text/css"
      media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css"
      media="print" href="serif.css">

NB: this can be specified directly in the CSS as well:

@media screen {
   * { font-family: sans-serif }
}

Presenter Notes

Media types for stylesheets

aural
braille
handheld
print
projection
screen
tty
tv

For more details, see CSS3 Media Queries

Presenter Notes

Hiding elements in some stylesheets

CSS allows to completely remove some elements. This can be used in media-specific stylesheets (for example, hiding a site menu in the print media):

@media print {
  ul.menu {
    display: none;
  }
}

Presenter Notes