Scribd
Importer
6 vues14 pages

HTML

HTML5 et CSS3 sont des technologies fondamentales pour la création de pages Web, où HTML fournit la structure et CSS la présentation. Le document aborde la syntaxe des balises HTML, l'utilisation d'un éditeur de code, la structure de base d'un document HTML, ainsi que des éléments comme les listes, les liens, les images et les formulaires. Il inclut également des travaux pratiques pour appliquer ces concepts dans un environnement de développement.

Transféré par

Romaric SOME
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues14 pages

HTML

HTML5 et CSS3 sont des technologies fondamentales pour la création de pages Web, où HTML fournit la structure et CSS la présentation. Le document aborde la syntaxe des balises HTML, l'utilisation d'un éditeur de code, la structure de base d'un document HTML, ainsi que des éléments comme les listes, les liens, les images et les formulaires. Il inclut également des travaux pratiques pour appliquer ces concepts dans un environnement de développement.

Transféré par

Romaric SOME
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 14

HTML5 et CSS3

HTML est un langage à balises pour hypertextes. HTML signifie HyperText Markup Language. Il est utilisé pour créer des
pages Web. Autrement dit, les pages Web du monde entier se composent de HTML.
Le HyperText Markup Language (HTML) est le langage de publication du World Wide Web. La première version de HTML
a été décrite par Tim Berners-Lee, fin 1991.
Le Cascading Style Sheets (CSS : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation
des documents HTML di ii c e ice
HTML (Hypertext Markup Language) et CSS (Cascading Style Sheets) sont deux technologies de base pour la création de
pages Web.
HTML fournit la structure de la page, et CSS la mise en page.
Le World Wide Web Consortium (W3C) standardise les protocoles, et les technologies utilisées
pour construire le web.
Le validateur W3C vérifie la validité du balisage des documents HTML et CSS.
http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

1. La syntaxe de la balise HTML


Balises paires et seules (ou auto fermantes)
HTML utilise des balises pour sa syntaxe. On distingue deux types de balises : les balises en paires et les balises orphelines.
Une balise (tag) est composée avec des caractères spéciaux :
< Chevron ouvrant > chevron fermant / permet de définir la balise fermante
Balise ouvrante Balise fermante

Exemple :
<Nom du tag> Contenu </Nom du tag> <html> </html>

Balise paire
Les éléments HTML viennent habituellement par paires de balises.
Les balises orphelines : balise seule ou auto fermante <br> ou <br /> <hr>

Attribut = "texte"
Les éléments peuvent être complétés par des attributs Le a ib affi e e e de é é e

Exemple : <abbr title="Lycée du Pays de Saint-Omer ">LYPSO</abbr>


Ces attributs sont spécifiés sur la balise ouvrante. Ils se composent d'un nom et d une valeur, séparés par un "="
Certains attributs sont communs à tous les éléments :
title i f ai e e e e c e de é é e
class a cie e ie c a e à é é e
id nomme un élément de manière unique dans le document

Da e écifi e à éé e
src éé e i g dé ig e a ce de i age
href éé e a

Ne pas faire chevaucher les balises

LYPSO 1 HTML5 & CSS3


2. Editeur de code HTML
Ce édi e de c de g a i e f c i e e è e
de iai OS
C e un environnement de développement « intégré » (abrégé EDI en français
ou IDE en anglais, pour integrated development environment).
Certaines extensions peuvent-être téléchargées et installées : Bracket Pair Colorizer, Live Server, French Language Pack,
Material Icon Theme
Thème de couleur : One Dark Pro

3. Structure de base du document HTML

Le (DTD : Document Type Declaration) DOCTYPE doit être spécifié pour les
navigateurs, et placé en haut dans le document HTML, ici version 5

L'élément html représente la racine d'un document HTML avec son attribut langue

L'élément de e tête représente un ensemble de métadonnées du


document.
Le contenu dans la balise head e a affiché da a iga e Web

L'élément body représente le corps du document.


Le <body> ... </ body> contient le balisage du contenu visible.

L i de a i e a ai e da Vi al Studio Code.
Travail à réaliser :
Té écha ge Vi a S di C de i i a e
Taper le fichier indexBase h da IDE
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox.
Valider le fichie HTML à aide d a ida e W C

Con en ion d écri re : Le camel Case


Les mots sont liés sans espace. Chaque mot commence par une majuscule à l'exception du premier.
Exemples : indexBase, myVariableName (aucun accent ou caractères spéciaux)

LYPSO 2 HTML5 & CSS3


Les balises HTML

3 modes d'affichage pour les éléments HTML. Par défaut, les éléments HTML sont affichés selon l'un
des modes suivants :
Bloc / block
Éléments superposés Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils
sont positionnés (par défaut) l'un sous l'autre.
En ligne / inline
Éléments côte à côte. N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de
retour à la ligne. Lorsque 2 éléments se suivent dans une page, ils sont positionnés l'un à côté l'autre.
Invisible / not displayed
Élément invisible. Certains éléments ne servent qu'à apporter des informations invisibles pour l'internaute.

1. Les balises dans l en ê e invisibles)


Les balises META servent à placer des métadonnées (metadata) dans une page HTML. On placera ces informations dans
é é e head e e e e e a affichée a age
À qui sont destinées ces informations ? À tous les outils susceptibles de les exploiter. Et notamment :
Aux navigateurs web.
Aux moteurs de recherche.
À e i d i de a i ia a e age ide ifie di e e i f ai

LYPSO 3 HTML5 & CSS3


2. Les balises dans le corps : les titres (blocs)
Les titres (heading) sont précisés par <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Les paragraphes sont spécifiés par <p>.
Le séparateur horizontale (trait horizontal) est <hr />
Ce sont des balises de type bloc.

Référence des éléments HTML


Liste des balises HTML5

Travail à réaliser :
Ta e e fichie i de h da IDE
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Va ide e fichie HTML à aide d a ida e W C
T e e ca ac è e écia d e ace insécable, du guillemet français ouvrant «, du
guillemet français fermant », et guillemet double (anglais) ".

LYPSO 4 HTML5 & CSS3


3. Créer des Listes (blocs)

Travail à réaliser :
Ta e e fichie Li e h da IDE
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à aide d a ida e W C

LYPSO 5 HTML5 & CSS3


Travail à réaliser :
C ée e fichie Li e h afi d b e i éc a ci-dessus dans votre navigateur.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Va ide e fichie HTML à aide d a ida e W C

4. Créer des liens (En ligne)


Lien absolu
O a e e ie ab e ad e e c è ee ifiée ie e a e ie :
https://pfranck.pagesperso-orange.fr/

LYPSO 6 HTML5 & CSS3


Liens relatifs
On appelle lien relatif lorsque la cible du lien se trouve sur le site.
Ils permettent d'aller vers une page selon la position de la page actuelle. On se sert donc de l'emplacement de la page qui
contient le lien pour définir la destination.

Racine du site : Dossier html Contenu du dossier test


du disque réseau H

Contenu du dossier image

Travail à réaliser :
Créer les dossiers et copier les fichiers.
Créer le fichier test2.html avec 2 liens relatifs pointant sur le fichier liens.html et le fichier
test3.html
Vérifier le résultat dans Mozilla Firefox, Explorer et Edge.
Va ide e fichie HTML à aide d a ida e W C

LYPSO 7 HTML5 & CSS3


Lien (signet) sur la page courante
Il est également possible de créer un lien vers un endroit précis de la page courante, ou d'une autre page afin
de positionner correctement le navigateur.

5. Insérer une image (En ligne)


Une image est insérée avec la balise img en spécifiant avec l'attribut src (source) le chemin de l'image à inclure
et avec l'attribut alt, l'éventuel texte de remplacement de l'image.
La balise img peut avoir divers attributs facultatifs. Seuls les attributs src et alt sont obligatoires.
alt : texte de remplacement (affiché si le navigateur ne peut afficher l'image) ; cet attribut est obligatoire,
il permet notamment à un malvoyant de comprendre l'image qu'il ne peut voir (son logiciel lit le texte à
voix haute ou le transforme en braille) ;
title : titre de l'image (s'affiche en info bulle dans le navigateur) ;
height : hauteur de l'image (si aucune valeur spécifiée, l'image garde sa hauteur normale) ;
width : largeur de l'image (si aucune valeur spécifiée, l'image garde sa largeur normale).
Les différents formats d'images
Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi et de la qualité de l'image.
Ce ai f a ada é eda e e i age h de i i age a i ée
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées.
Le JPEG (Photos)
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour
réduire le poids des photos (c'est-à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de couleurs
différentes.
Le PNG (Images)
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques.
Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.
Le PNG a été inventé pour concurrencer un autre format, le GIF. Depuis, le PNG a bien évolué et c'est devenu le format le
plus puissant pour enregistrer la plupart des images.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :
PNG 8 bits : 256 couleurs ;
PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG).
Le GIF (Images animées)
C'est un format assez vieux, qui a été néanmoins très utilisé. Aujourd'hui, le PNG est globalement bien meilleur que le GIF
: les images sont généralement plus légères et la transparence est de meilleure qualité.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).
Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.

LYPSO 8 HTML5 & CSS3


Travail à réaliser :
Créer le dossier image et copier les fichiers des images.
C ée e fichie i age h e aida d b d de i age ci-dessus.
Vérifier le résultat dans Mozilla Firefox, Explorer et Edge.
Valider le fichie HTML à aide d a ida e W C

6. Insérer un tableau
Tableau simple
Un tableau est un ensemble de lignes elles-mêmes constituées de cellules.
Défi i i d e ig e a ec e ba i e ab e : <tr> </tr>
Défi i i d e ce e d e ê e (table head) : <th> </th>
Défi i i d e ce e de d ée ab e da a : <td> </td>
Une légende peut être ajoutée au tableau : <caption> </caption>

LYPSO 9 HTML5 & CSS3


Il est possible également de définir 3 zones :

Z ede ê ed ab ea

Zone de corps du tableau

Zone de pied du tableau

Tableaux à cellules recouvrantes


On fusionne des cellules (<td> ou <th>) :
La ib colspan qui fusionne plusieurs colonnes
La ib rowspan qui fusionne plusieurs lignes

Travail à réaliser : Créer la page WEB tableau.html sur le modèle suivant :

7. Les formulaires
Formulaire de base
La balise form représente un formulaire. L attribut method est utilisée pour envoyer les données au serveur.
L a ib action qui traite URL d fichie d'envoi du formulaire.
L e ef ai e e a idé e e b e de i f ai e a i a a é h de POST éfé ab e à GET a
fichier cible.php. Tous les attributs name c ie e e d ée de ii a e

<label> e é e e é i e e cha de i é à
i i a e ici e de e e I e a cié à a ib
for afi d ide ifie e abe

La balise <input> est le type de champ, ici une zone de texte mono ligne : text
L attribut id e e de a cie à é i e e abe a a ib for.
Attribut name est le nom qui sera rattaché à la donnée envoyée via le formulaire.

LYPSO 10 HTML5 & CSS3


Formulaire avec différents champs

La balise <legend> La balise <fieldset> (le cadre) regroupe plusieurs étiquettes

Un champ texte à compléter


L a ib required indique que le champ doit être
renseigné avant de pouvoir envoyer le formulaire.

Un champ mail à compléter


L a ib placeholder est un indice supplémentaire sur le
champ à compléter.

LYPSO 11 HTML5 & CSS3


Un champ web à compléter
L a ib placeholder est un indice supplémentaire sur le
champ à compléter.

Un champ avec des boutons radio et un champ avec des


boites à cocher checkbox
L a ib checked sélectionne par défaut

U cha e é e e e i ed i
Chaque élément <option> doit avoir un attribut value qui
contient la valeur qui sera transmises
2 groupes distincts ont été créés avec la balise
<optgroup>

LYPSO 12 HTML5 & CSS3


Travail à réaliser :
Taper le fichier formulaire h da IDE
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Va ide e fichie HTML à aide d a ida e W C

8. Balises génériques
Balise de type block <div> </div>
La ba i e di défi i e di i i La ba i e di a a de ig ifica i e e ê e i i é eg e diffé e
éléments (tableaux, images, texte, multimédia). La balise <div> est utilisée comme partie de bloc de la page Web.
Elle peut contenir d a e ba i e di e b i e e ie e e de iè e e a e
Ces balises ne produisent aucun effet visuel, mais seront exploitées par les styles CSS.
Balise multi-usage en ligne <span> </span>
La balise <span> est un conteneur générique (en ligne - inline) pour les contenus phrasés. Elle peut être utilisée
pour grouper des éléments afin de les mettre en forme. Cette balise est très pratique pour appliquer un style CSS à une
portion de texte.

9. Structuration d'une page web


Les balise de c ai d e age eb i i ib e ai e e e e e de eg e e de i de a age
WEB.
Entête <header> </header> Pied de page <footer> </footer>
Section <section> </section> Section de navigation <nav> </nav)
Article <article> </article> Aparté (notes) <aside> </aside>

LYPSO 13 HTML5 & CSS3


Une feuille de style est
nécessaire en CSS.

10.Autres balises HTML5

Travail à réaliser :
Taper le fichier balises5 h da IDE
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Va ide e fichie HTML à aide d a ida e W C

LYPSO 14 HTML5 & CSS3

Vous aimerez peut-être aussi