HTML 5+CSS 3
IMSP 2017-2018
PRESENTED BY : Dr. Amadou T. SANDA MAHAMA
Site web : Qu’est-ce que c’est ?
Ensemble de pages web
Structurées et Reliées entres elles
Situées sur une machine serveur
Identifié par un URL (universal ressource locator)
Page web ???
Fichier text
Écrit en langage HTLM
Contenu affiché dans un navigateur
HTML : Qu’est ce que c’est
HTML est le langage standard( universellement reconnu
sur toutes les plateformes) de creation de pages Web.
HTML se définit Hyper Text Markup Language
HTML décrit la structure des pages web en utilisant les
markup
HTML elements are the building blocks of HTML pages
HTML est interprété par les navigateurs qui affichent le
contenu informationnel codé,
Les navigateurs
EI
Mozila firefox
Google chrome
Opera
…..
Le HTML5 quoi de neuf ???
Version Années
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML 5 quoi de neuf ???
Faire le point à la fin du cours
Mon premier code HTML
<!DOCTYPE html>
<html>
<head>
<title>titre de la page</title>
</head>
<body>
<h1>Premier entête </h1>
<p>Premier paragraphe.</p>
</body>
</html>
HTML 5 : syntaxe générale
<baliseattribut= valeur
>information...</balise>
<p>Mon paragraphe .</p>
<!– ceci est un commentaire -->
HTML: formatage de texte
•<b> - gras
•<strong> - mettre en exergue
•<i> - Italique
•<em> - Emphasized text
•<mark> - Marked text
•<small> - petite taille
•<sub> - en indice
•<sup> - en exposant
<b> je suis en gras </b>
HTML : les titres et les paragraphes
<hn> . . </hn> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe
HTML : les listes
<ul> . . </ul> Liste non triée, liste à puces
<ul>
<li> . . </li> Eléments de la liste
<li> . . </li> Eléments de la liste
</ul>
Attention aux attributs type: disc, square, circle
<ol> . . </ol> Liste triée, liste à numéros
Attribut type A, I, 1, …
Attribut start
HTML : insertion d’une image
<img> . . </img>
Principaux attributs:
align = left, bottom, middle, top, right
height, width = n
src = chemin vers le fichier image
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt=« des fleurs " >
</picture>
née avec HTML 5 présente plus de souplesse: affiche les images selon que
nous avons la taille de l’écran, l’image appropriée
HTML: Insertion d’une image
Formats acceptés :
GIF (pour les illustrations)
JPEG (pour les photos)
<IMG SRC=« monimage.gif" ALT= ‘’ image 1"
ALIGN="LEFT">
HTML: les liens
<a> . . </a>
attributs : href, name
Les liens peuvent être interne au site ou à la page ou
externe au site
HTML: les liens(suite)
Lien internes :entre 2 pages du site
<a href = ‘’nom_complet_page’’> message_du_lien </a>
<a href = ‘’autre_page,html’’> cliquer ici pour aller à l’autre page </a>
HTML: les liens(suite)
Lien internes :dans une même page du site
Marquage de l’ancre
<a name = ‘’nom_emplacement’’> </a>
<a name = ‘’point_marque’’> </a>
Accès par lien
<a href = ‘’point_marque’’> cliquer ici pour aller au point marqué </a>
HTML: les tableaux
<table> . .
<tr> . .
<td> une cellule sur la première ligne . </td>
<td> une autre cellule sur la première ligne . </td>
</tr>
<tr> . . </tr>
</table>
HTML: les tableaux (suite)
De manière plus complète on a :
<table> . .
<thead> . .
<td> une cellule sur la première ligne . </td>
<td> une autre cellule sur la première ligne . </td>
</thead>
<tbody> . .
</tbody>
<tfoot> . .
</tfoot>
</table>
HTML : les tableaux
Fusion de cellules ( colspan = ‘’n’’ comme attribut de td)
Fusion de lignes (rowspan = ‘’n’’ comme attribut de td)
Balise <caption> donne un titre au tableau </caption>
HTML : les formulaires
<form>
</form>.
HTML : les formulaires (les zones de
texte)
<label for="pseudo">Votre pseudo :</label>
<input type="text" name=« xxxx" id=« yyyyy" placeholder="Ex: toto"
size="30" maxlength="10" />
HTML : les formulaires (mot de passe)
<label for=‘’mp">Votre mot de passe :</label>
<input type="password" name=‘’mp" id="ps" />
HTML : les formulaires (texte )
<label for=‘’mlab">mettre ici vos commentaires
?</label><br />
<textarea name= " mlab " id=" ’mlab "></textarea>
HTML : les formulaires (autre variantes
input )
<input type="email" />
<input type="url" />
<input type="tel" />
<input type="number" />
<input type="range" />
<input type="color" />
<input type="date" />
<input type="search" />
HTML : les formulaires (case à cocher )
<input type="checkbox" name="jeux" id="jeux" /> <label
for=« jeux">Jeux</label><br />
<input type="checkbox" name="losir" id="loisir" /> <label
for="loisir">Votre loisir</label><br />
<input type="voyage" name="voyage" id="voyage" />
<label for="voyage">Voyage</label><br />
<input type="checkbox" name=« autre" id="autre" />
<label
for="autre">Autres</label>
HTML : les formulaires (boutons radio )
<input type="radio" name="age" value="moins15" id="moins15"
/> <label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
id="medium15-25" /> <label for="medium15-25">15-25
ans</label><br />
<input type="radio" name="age" value="medium25-40"
id="medium25-40" /> <label for="medium25-40">25-40
ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" />
<label for="plus40">Encore plus vieux que ça ?!</label>
HTML : les formulaires (liste de
sélection)
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>
</p>
</form>
Utiliser <optgroup label="Europe"> pour regrouper l es options de la liste
HTML : les formulaires (regroupement
de champs)
<fieldset>
<legend>titre du regroupement </legend>
</fieldset>
HTML : audio et vidéo
<audio controls>
<source src=« fichier1.mp3"></source>
<source src=« fichier2.ogg"></source>
</audio>
<video src= " monfichier.webm" controls width="600"></video>
Il existe plusieurs formats audio et vidéo
pour l'audio : MP3 et Ogg Vorbis ;
pour la vidéo : H.264, Ogg Theora et WebM.
Références
https://www.w3schools.com
