Vous êtes sur la page 1sur 46

CHAPITRE 1

HTML 5
Imen Balti
Introduction
Qu'est-ce que le W3C ?
Le W3C ou World Wide Web Consortium, est un
organisme international qui développe des
standards pour le Web afin que les gens puissent
communiquer efficacement à travers Internet,
autour de formats ouverts garantissant une
meilleure inter-opérabilité
Qu'est-ce que HTML,
réellement ?

HTML ou Hyper-Text Markup Language peut être


désigné comme le langage principal du Web.
Le standard HTML a été développé par le W3C ou
le World Wide Web Consortuim en 1997.
te.En HTML, les balises sont utilisées pour définir
des structures de tex
Qu'est-ce que HTML,
réellement ?

HTML n'est pas un langage de programmation.


C'est un langage de balises qui définit la structure
de votre contenu.
On parle alors de langage de balisage.
Dans un langage de balisage, tout contenu, tels que
les blocs de texte, les images, les
tableaux,paragraphes et autres,doivent être
renfermé dans un élément .
HTML a vu de nombreuses mises à jour au fil du
temps, et actuellement, la dernière version HTML est
HTML5.

1 2 3 4 5
1995 1997 1999 2000 2014
HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML 5

HTML5
HTML
HTML5 supporte les SVG, et autres HTML, l’utilisation d’images vectorielles n’était
formats d’image vectorielles. possible qu’avec certaines technologies comme
HTML5 utilise des bases de données Web Flash, VML ou Silver-light.
SQL pour le stockage temporaire (en HTML, ne pouvait utiliser que le cache du
cache) des données. navigateur à cette fin.
Permet un type d'apprentissage plus HTML ne permet pas au JavaScript de
s’exécuter nativement dans un navigateur Web
personnalisé pour les étudiants.
HTML 5 fournit un support complet pour
que JavaScript s’exécute en arrière-plan
(grâce à l’API JS de HTML5).
HTML5 prend en charge de nouveaux
types de contrôles de formulaire : les dates
et heures, les e-mail, les numéros, les
plages (range), les téléphones, les url, les
champ de recherche etc.
Principaux avantages offerts
par HTML5

HTML5 SE VEUT PLUS SOUPLE LORS DE LA


CONCEPTION DE SITES WEB. CERTAINES
AMÉLIORATIONS MÉRITENT D’ÊTRE
MENTIONNÉES:

1. Gestion des erreurs persistantes: Les algorithmes


d’analyse dans le HTML 5 sont meilleurs et leurs
résultats ne sont même pas quantifiables.
2.Amélioration de la sémantique des éléments:
Section, article, nav et header sont des nouveaux éléments
qui ont remplacé la plupart des éléments div
maintenant obsolètes,

3.Attributs de données personnalisables:


Maintenant, des données personnalisées peuvent être incluses,
et il donne aux développeurs plus de chance de rendre
leurs pages Web attrayantes et efficaces
Ça sert a Quoi une
Balise ?

Alors les balises HTML structurent le contenu du document,


en délimitant les blocs qui seront amenés à contenir des paragraphes,
des titres, différents types de médias(images, sons, vidéos),
des contrôles de formulaires ou encore des liens hypertextes.
Syntaxe: <nom_de_la_balise> texte , balise , etc </nom_de_la_balise>

Exemple de balises : <br>, <p>, <h4>, </h4>, </br>

Un élément c'est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises),
et de la balise fermante correspondante.
Qu'est-ce que CSS ?

CSS (CASCADING STYLE SHEETS)


PERMET DE CRÉER DES PAGES WEB
À L'APPARENCE SOIGNÉE.
À quoi sert CSS ?
CSS est un langage de mise en forme des documents.

Les documents en question sont des fichiers texte structurés


avec un langage de balises — HTML est le plus connu de ces
langages,
Syntaxe de CSS

CSS est un langage basé sur des règles — on définit des règles
de styles destinées à des éléments ou des groupes d'éléments
particuliers dans la page. Par exemple, « Je veux que le titre
principal de ma page s'affiche en rouge en gros caractères. »

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

CSS 3

LA NOUVELLE IMPLÉMENTATION DE CSS


INCLUT LA POSSIBILITÉ DE
PERSONNALISER LES ÉLÉMENTS
DISPONIBLES DE PAGE. UN CONTRÔLE
ACCRU SUR LES COULEURS,
L'OBSERVATION ET LE SOUTIEN À
GRADIENT (FADING) LES EFFETS ET LA
CAPACITÉ À ARRONDIR LES COINS SUR LES
BOÎTES SONT DEUX CHANGEMENTS
IMPORTANTS POUR DE NOMBREUX
DESIGNERS.
Avez-vous des
questions ?
Envoyez-les-nous ! Nous espérons que vous
avez appris quelque chose de nouveau.
Les balises HTML de base
Balise <html>
La balise <html> est la balise de premier niveau.

Balise <head>
La balise <head> représente l'entête du document.

Balise <body>
C'est la plus importante parmi les balises vues précédemment.
la balise <body> renferme le contenu du corps.
Les paragraphes
La balise <p> permet de définir un paragraphe au sein d'un code HTML. Il engendre un
retour à la ligne avant et après.

Pour construire un formulaire, nous aurons besoin des éléments HTML suivants : <form>, <label>,
<input>, <textarea> et <button>.
La balise declaration du type !DOCTYPE
Démo
La déclaration DOCTYPE n'est pas une balise HTML, c'est une instruction au
navigateur web sur la version du langage de balisage dont la page est écrite

En HTML5 il n'existe qu'un seul:


<!DOCTYPE html >
Les balises sémantiques

Balise <footer>
La balise <footer> est le pied de page. Elle doit normalement être placée en bas de
celle ci ou en bas d'un bloc. Elle contient des informations en guise de conclusion. Elle
peut aussi contenir des liens du bas de page.

Balise <nav>
La balise <nav> renferme les liens du menu de navigation principal du site Web. On peut la placer
n'importe où sur notre page, mais il est fréquent que le menu principal soit placé sur les cotés ou sur
le bord de la page d'une manière assez visible pour faciliter la navigation.
Balise <section>
La balise <section> constitue un bloc principal qui traite le même sujet ou contient des informations
de même nature. C'est généralement la partie dont le contenu change d'une page à une autre. Une
section peut contenir sa propre entête (<header>) et son propre pied de page (<footer>).

Balise <aside>
La balise <aside> renferme du contenu supplémentaire à un bloc. Elle peut
être placée dans la balise <section> ou déclarée à part.
Balise <article>

La balise <article> est destinée à accueillir des informations externes au site Web. En
effet, une page ne contient pas toujours que notre propre contenu. On peut, au choix,
mettre des blocs qui contiennent des données provenant d'autres site Web comme la
météo, les flux RSS, les annonces ou la publicité. Le meilleur endroit pour mettre ce
contenu c'est dans la balise <article>.
Exercice
Exemple
créer votre premier tableau
<table> : l'élément de tableau
L'élément HTML <table> permet de représenter un tableau de données, c'est-
à-dire des informations exprimées sur un tableau en deux dimensions.
Démonstration

<tr> </tr> : indique le début et la fin d'une ligne du


tableau ;

<td> </td> : indique le début et la fin du contenu d'une


cellule.

En HTML, un tableau se construit ligne par ligne. Dans


chaque ligne ( <tr> ), on indique le contenu des
différentes cellules ( <td> ).
Excercice
Créez cetableau en HML
Nom Prénom Âge Niveau Intérêts

Bou Ali Ahmed 20 Bac Sport

Jebali Mariem 25 Licence Musique

Mestiri Mouna 26 Master Voyage

Gharbi Khaled 22 Licence Art

Bouzouita Souhir 21 Bac Dance


Apprenez à créer votre site web avec HTML5

<form> </form> . C'est la balise principale du formulaire,


elle permet d'en indiquer le début et la fin.
Problème n° 1 : comment envoyer le texte saisi par le visiteur ? Par quel moyen ?

Problème n° 2 : une fois que les données ont été envoyées, comment les traiter ?

Souhaitez-vous recevoir le message automatiquement par mail ou préférez-vous qu'un


programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible
par tout le monde ?
Pour fournir les réponses à ces deux problèmes, vous devez ajouter deux attributs à la balise <form>

method : cet attribut indique par quel moyen les données vont être
envoyées, Il existe deux solutions pour envoyer des données sur le
Web :

method="get"

method="post"

action : c'est l'adresse de la page ou du programme qui va traiter les informations


Exemple

type="email"
Email *
compléter votre email

<input name="Email" type="email" placeholder="compléter votre email" required class="form-control">


type="tel"
Téléphone *
Votre téléphone

<input name="telephone" type="tel" placeholder="Votre téléphone" class="form-control" required>


type="url"
Votre site web *
votre site web
<input name="adresse" type="url" placeholder="votre site web" required class="form-control">
type="search"
Recherche *
Mot clé
<input name="recherche" type="search" placeholder="Mot clé" required class="form-control">
type="number"
Votre âge *
Votre âge
<input type="number" name="age" placeholder="Votre âge" required class="form-control">
Formulaire Exercice
Nom
Prénom
Email
Numéro de téléphone
Adresse
Login
Mot de passe
Envoyer
<a> : l'élément
d'ancre
L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut
href, crée un lien hypertexte vers des pages web, des fichiers, des adresses
e-mail, des emplacements se trouvant dans la même page, ou tout ce
qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer
la destination du lien. Si l'attribut href est présent, appuyer sur la touche
entrée en se concentrant sur l'élément <a> l'activera.

Vous pouvez utiliser href="#top" ou le fragment vide


(href="#") pour créer un lien vers le haut de la page
actuelle
Créer un lien vers un élément de la même page

<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#P1">Mission</a></li>
<li><a href="#P2">Qui sommes nous?</a>
</li>
<li><a href="#P3">Contact</a></li>
</ul>
</nav>
Créer un lien avec une adresse électronique
Créer un lien avec les numéros de téléphone
<p>You can reach Michael at:</p>

<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
Balises sémantiques
Pour mettre en œuvre le marquage
s ́emantique, HTML fournit des balises d ́edi ́ees.
main (contenu principal : avec diverses sous-sections de
contenu)
article
section
aside (souvent mise `a l’int ́erieur de l’ ́el ́ement main)
header (en tant que enfant de body, ou de section et
article)
nav (barre de navigation)
footer
L'entête du site avec <header>

Sur un site internet, on peut observer la partie haute,


appelée ‘entête’ ou ‘header’ en anglais, que l’on retrouve sur
l’ensemble des pages du site. Cette zone peut alors être
définie à l’aide de la balise <header>. De manière générale,
on retrouvera dans cette zone le logo, et au minimum, la
navigation principale du site.
main (Balise s ́emantique)
Repr ́esente le contenu majoritaire du body.
Un document ne peut pas avoir plus d’un seul ́el ́ement main
Les menu de navigation avec <nav>

Dans la balise <header> vu précédemment, nous pouvons


ajouter une zone servant à délimiter la navigation principale
du site web. Cette zone peut être définie à l’aide de la balise
sémantique <nav>. Il faut tout de même savoir que la balise
<nav> n’est pas forcément placée dans le header d’un site,
on peut la retrouver n’importe où et à plusieurs endroits de
la page comme par exemple dans le footer ou dans une
barre latérale de contenu (sidebar).
Créer un découpage plus précis avec <section>

Le contenu de notre site présent dans une des balises <main>


ou <article> peut être plus ou moins complexe, c’est pour cela
qu’il est important de correctement structurer le contenu
principal de la page en plusieurs zones. Pour cela, il existe la
balise <section> permettant un découpage plus thématique que
les balises <main> et <article> vues précédemment.
aside (Balise s ́emantique)

Contient les composantes non directement li ́ees au contenu


principal mais pouvant fournir des informations suppl
́ementaires
indirectement en relation avec ce dernier (entr ́ees de
glossaire,
biographie de l’auteur, liens connexes, etc).

Vous aimerez peut-être aussi