0 HTML

HTML5 2eme info www.mathinfo.
tn
 Première Page
Ouvrir un éditeur HTML puis taper le code suivant:
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">

<title>Ma première page title>
</head>
<body>
<h1> Bienvenue sur mon site</h1>
</body>
</html>
 Taille du texte
<h1>Titre niveau 1</h1>

 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>
1
HTML5 2eme info www.mathinfo.tn
 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>
 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>
2
 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>
 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
3
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…
<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
Exemple 1 :
<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>
4
Exemple 2 :
<table>
<tr>
<th></th>
<th >Samedi</th>
<th >Dimanche</th>
</tr>
<tr>
<th >Prix:</th>
<td>120</td>
<td>135</td>
</tr>
</table>
Exemple 3 :
<table width="400" ">
<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>
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>
5
Application
Créer 3 pages web
 Accueil
 Contact
 Services
<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>
Multimedia
 Les images
<h1>Koala :</h1>
<p>
<img src = "Koala.jpg" height = "480" width = "640" alt = "Koala image" />
</p>
 Audio
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="son.mp3" >
</audio>
</body>
</html>
6
 Video
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>

<source src="vid.mp4" >
</video>
</body>
</html>
Les formulaires :
<h2>Saisir un texte</h2>
<form>
Nom:<br>
<input type="text" name="nom">
<br>
Prenom:<br>
<input type="text" name="prenom">
</form>
<p>Note:Form n'est pas visible.</p>
<p>Largeur du champ du saisie est de 20 caracteres</p>
Radio button
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="fruit" value="Orange" checked> Orange<br>
<input type="radio" name="fruit" value="Banane"> Banane<br>
<input type="radio" name="fruit" value="Pomme"> Pomme
</form>
Bouton
<h2>HTML Forms</h2>
<form action="/action_page.php">
Nom:<br>
<input type="text" name="Nom"
<br>
Prenom:<br>
<input type="text" name="Prenom" ">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button,

the form-data will be sent to a page
called "/action_page.php".</p>
7
Case à cocher
<form>
<input type="checkbox" name="choix1" value="1"> glace
vanille</br>
<input type="checkbox" name="choix2" value="2"> chantilly </br>
<input type="checkbox" name="choix3" value="3"> chocolat chaud
</br>
<input type="checkbox" name="choix4" value="4"> biscuit </br>
</form>
Text area
<form>
<textarea name="nom" >Valeur par défaut</textarea>
</form>
Groupe de bouton
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>

0 HTML

Transféré par

Informations du document

Titre original

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é ?

Droits d'auteur :

Formats disponibles

0 HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML5 2eme info www.mathinfo.

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>

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

Les liens hypertextes

Créer 3 pages web

<video width="320" height="240" controls>

<p>Note:Form n'est pas visible.</p>

<p>Largeur du champ du saisie est de 20 caracteres</p>

<p>If you click the "Submit" button,

Vous aimerez peut-être aussi