Vous êtes sur la page 1sur 13

HTML5 2eme info Aymen Ben Haj Slama

HTML5

Format du texte

 Première Page

Ouvrir un éditeur HTML puis taper le code suivant:

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<!-- myFirst.html -->
<title>Bienvenue!</title>
</head>
<body>
<h1> Bienvenue sur mon site</h1>
</body>
</html>

 Taille du texte

<h1>Titre niveau 1</h1>


<h2>Titre niveau 2</h2>
<h3>Titre niveau 3</h3>
<h4>Titre niveau 4</h4>
<h5>Titre niveau 5</h5>
<h6>Titre niveau 6</h6>

1
HTML5 2eme info Aymen Ben Haj Slama
 Paragraphe

<p>Un pragraphe est un ensemble de mots.</p>


<p>Un mot est un ensemble de caracteres.</p>

 Italic

<p>Bonjour et bienvenue sur mon site !<br />


Ceci est mon premier test , j'apprends <em>petit à petit</em> comment cela
marche.</p>

 Mettre en valeur

<p>Bonjour et bienvenue sur mon site !<br />


Ceci est mon premier test , j'apprends <strong>petit à petit</strong> comment cela
marche.</p>

 Marquer un texte

<p>Bonjour et bienvenue sur mon site !<br />


Ceci est mon premier test , j'apprends <mark>petit à petit</mark> comment cela
marche.</p>

Indice exposant

 Ligne horizontal

<p>Bonjour et bienvenue sur mon site !


<hr/>
Ceci est mon premier test , j'apprends <mark>petit à petit</mark> comment cela
marche.</p>
2
HTML5 2eme info Aymen Ben Haj Slama

 Indice et exposant

<p>En 4<sup>eme</sup> année vous allez apprendre


E=MC<sup>2</sup>.</p>
<p>Le taux de CO<sub>2</sub> dans l'atmosphere
est en augmentation </p>

 Texte souligné et barré

<p>c'est mon <del>meilleure</del> <ins>meilleur</ins> ami.</p>

 Retour à la ligne

<p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test </br> j'apprends
petit à petit comment cela marche.</p>

 Quote

<blockquote cite="http://en.wikipedia.org/wiki/
Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start again?</p>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though.
That's the
problem.</q></p>

3
HTML5 2eme info Aymen Ben Haj Slama
 Abréviation

<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and


cosmologist.</p>
<p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do
some crazy
space stuff.</p>
cite
<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million
copies
worldwide.</p>

Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :

 les listes non ordonnées ou listes à puces ;


 les listes ordonnées ou listes numérotées ou encore énumérations.
Liste non ordonnée
Une liste non ordonnée ressemble à ceci :

 Fraises
 Framboises
 Cerises
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de «
premier » ni de « dernier »). Créer une liste non ordonnée est très simple. Il suffit d'utiliser la
balise<ul>que l'on referme un peu plus loin avec</ul>.
Commencez donc à taper ceci :

<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>

Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer<ul></ul>par<ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises<li></li>pour délimiter les
éléments.

L'ordre dans lequel vous placez les éléments de la liste est important. Le premier<li></li>sera l'élément n° 1, le
second sera le n°2 etc…
Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple (résultat à la figure
suivante) :
4
HTML5 2eme info Aymen Ben Haj Slama

<h1>Ma journée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois.</li>
<li>Je retourne me coucher.</li>
</ol>

Les tableaux

App5
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

5
HTML5 2eme info Aymen Ben Haj Slama

<table>
<tr>
<th></th>
<th >Samedi</th>
<th >Dimanche</th>
</tr>
<tr>
<th >Prix:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th >Total:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>

Table width
<table width="400" cellpadding="10" cellspacing="5">
<tr>
<th width="150"></th>
<th>Debit</th>
<th>Credit</th>
<th width="150">Balance</th>
</tr>
<tr>
<th>Janvier</th>
<td>250.00</td>
<td>660.50</td>
<td>410.50</td>
</tr>
<tr>
<th>Fevrier</th>
<td>135.55</td>
<td>895.20</td>
<td>1170.15</td>
</tr>
</table>

6
HTML5 2eme info Aymen Ben Haj Slama

Les liens hypertextes

<p>Moteur de recherche:
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
<li><a href="http://www.bing.com" target="_blank">Bing</a></li>
</ul>
</p>

Application

Créer 4 pages web

<p>Mes liens:
<ul>
<li><a href="page1">Accueil</a></li>
<li><a href="page2" target="_blank">Contact</a></li>
<li><a href="page3" target="_blank">Services</a></li>
</ul>
</p>

7
HTML5 2eme info Aymen Ben Haj Slama
Les images

<h1>Koala :</h1>
<p>
<img src = "Koala.jpg" height = "480" width = "640" alt = "Koala image" />
</p>

App8

Audio

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio.html</title>
</head>
<body>
<h1>Audio Demo</h1>
<audio controls = "controls">
<source src = "Allemande.mp3" type = "audio/mpeg">
<source src = "Allemande.ogg" type = "audio/ogg">
Your browser does not support HTML5 Audio
Please use this link instead:
<a href = "Allemande.mp3">Allemande.mp3</a>
</audio>
<p>
Music: J.S. Bach "Allemande" Partita for Violin #2
</p>
</body>
</html>

8
HTML5 2eme info Aymen Ben Haj Slama

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basicUL.html</title>
</head>
<body>

<h1>Liste de base</h1>
<h2>navigateur web</h2>
<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Safari</li>
</ul>
</body>
</html>

App3

Examining the nested list example

<h1>Nested Lists</h1>
<h2>Nom des chats</h2>
<ul>
<li>
<h3>USA</h3>
<ol>
<li>Tigger</li>
<li>Tiger</li>
<li>Max</li>
<li>Smokey</li>
<li>Sam</li>
</ol>
</li>
<li>
9
HTML5 2eme info Aymen Ben Haj Slama
<h3>Australia</h3>
<ol>
<li>Oscar</li>
<li>Max</li>
<li>Tiger</li>
<li>Sam</li>
<li>Misty</li>
</ol>
</li>
</ul>

Here are a few things you might notice in this code listing:
✦There’s a large <ul> set surrounding the entire main list.
✦The main list has only two list items.
✦Each of these items represents a country.
✦Each country has an <h3> element, describing the country name inside
the <li>.
✦Each country also has an <ol> set with a list of names.
✦The indentation really helps you see how things are connected.
Definition list
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
<dt>Scale</dt>
<dd>A device used to accurately measure the
weight of ingredients</dd>
10
HTML5 2eme info Aymen Ben Haj Slama
<dd>A technique by which the scales are removed
from the skin of a fish</dd>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)</dd>
</dl>

Spanning colomn
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
Spanning row
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>

11
HTML5 2eme info Aymen Ben Haj Slama

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basicTable.html</title>
</head>
<body>
<h1>A Basic Table</h1>
<h2>HTML Super Heroes</h2>
<table border = "1">
<tr>
<th>Hero</th>
<th>Power</th>
<th>Nemesis</th>
</tr>
<tr>
<td>The HTMLator</td>
<td>Standards compliance</td>
<td>Sloppy Code Boy</td>
</tr>
<tr>
<td>Captain CSS</td>
<td>Super-layout</td>
<td>Lord Deprecated</td>
</tr>
<tr>
<td>Browser Woman</td>
<td>Mega-Compatibility</td>
<td>Ugly Code Monster</td>
</tr>
</table>
</body>
</html>

position
<img src="images/bird.gif" alt="Bird" width="100" height="100" />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic. Many species undertake
long distance annual migrations, and many more
perform shorter irregular journeys.</p>
<hr />
<p><img src="images/bird.gif" alt="Bird" width="100"
height="100" />There are around 10,000 living
species of birds that inhabit different
ecosystems from the Arctic to the Antarctic. Many
species undertake long distance annual
migrations, and many more perform shorter

12
HTML5 2eme info Aymen Ben Haj Slama
irregular journeys.</p>
<hr />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic.<img
src="images/bird.gif" alt="Bird" width="100"
height="100" />Many species undertake long
distance annual migrations, and many more perform
shorter irregular journeys.</p>

Ajoutez un titre de niveau 1


A la suite du titre, ajoutez un paragraphe indiquant "Voici mes animaux préférés :"
Ajoutez une liste ordonnée d'au moins trois de vos animaux préférés
Mettez en valeur (emphase forte) le premier animal de la liste

13