html

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">

<title>Bienvenue!</title>
</head>
<body>
<h1> Bienvenue sur mon site</h1>
</body>
</html>
 Taille du texte
<h1>Titre niveau 1</h1>

1
 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

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

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
 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
 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
<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
<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
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
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>
<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
<!doctype html>
<html lang="en">
<head>
<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
<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
<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
<!doctype html>
<html lang="en">
<head>
<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
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

Langue

Bienvenue sur Scribd !

html

Transféré par

Informations du document

Description :

Date du transfert

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

html

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Titres liés

HTML5 2eme info Aymen Ben Haj Slama

Ouvrir un éditeur HTML puis taper le code suivant:

<h1>Titre niveau 1</h1>

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

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

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

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

<p>Bonjour et bienvenue sur mon site !

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

 Texte souligné et barré

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

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

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

Les liens hypertextes

Créer 4 pages web

Examining the nested list example

Ajoutez un titre de niveau 1

Centres d'intérêt liés

Documents similaires à html

Plus de Aymen Ben Haj Slama

Populaire dans World Wide Web

Titres liés

Évaluer

Partager