Scribd
Importer
2 vues3 pages

Balises HTML

Ce document présente les balises HTML essentielles pour les débutants, y compris la structure de base d'un document HTML et des éléments tels que les titres, les paragraphes, les liens, les images, les listes et les formulaires. Il aborde également la création de tableaux, en expliquant la structure de base et les balises associées, ainsi que des exemples de fusion de cellules. L'objectif est d'initier les lecteurs à la syntaxe et à l'utilisation des balises HTML pour créer des pages web simples.

Transféré par

salimaelhou
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
2 vues3 pages

Balises HTML

Ce document présente les balises HTML essentielles pour les débutants, y compris la structure de base d'un document HTML et des éléments tels que les titres, les paragraphes, les liens, les images, les listes et les formulaires. Il aborde également la création de tableaux, en expliquant la structure de base et les balises associées, ainsi que des exemples de fusion de cellules. L'objectif est d'initier les lecteurs à la syntaxe et à l'utilisation des balises HTML pour créer des pages web simples.

Transféré par

salimaelhou
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

Balises HTML de base pour débutants

Prof : Salima EL HOU

Balises HTML essentielles pour débuter


1. < !DOCTYPE html> — indique le type de document (HTML5).
< ! DOCTYPE html >

2. <html lang="fr"> — balise racine du document.


< html lang = " fr " >
< / html >

3. <head> — contient les métadonnées.


< head >
< meta charset = " UTF -8 " >
< title > Ma page < / title >
< / head >

4. <body> — contient le contenu visible.


< body >
< p > Bienvenue sur mon site ! < / p >
< / body >

5. <h1> à <h6> — titres de différents niveaux.


< h1 > Titre principal < / h1 >
< h2 > Sous - titre < / h2 >

6. <p> — paragraphe de texte.


< p align = " center " > Ceci est un paragraphe c e n t r . < / p >

7. <a href="url"> — lien cliquable.


< a href = " https :// www . google . com " target = " _blank " > Aller sur Google < / a >

8. <img src="[Link]" alt="description"> — insère une image.


< img src = " chat . jpg " alt = " Photo ␣d ’ un ␣ chat " width = " 200 " >

9. <ul>, <ol>, <li> — listes à puces ou numérotées.


< ul >
< li > Pomme < / li >
< li > Banane < / li >
< / ul >

< ol >
< li > tape 1 < / li >
< li > tape 2 < / li >
< / ol >

1
10. <form> — formulaire avec champ de texte et bouton.
< form action = " traitement . php " method = " post " >
< label for = " nom " > Nom : < / label >
< input type = " text " id = " nom " name = " nom " placeholder = " Votre ␣ nom " >
< button type = " submit " > Envoyer < / button >
< / form >

Les tableaux en HTML


Les tableaux permettent d’organiser les données sous forme de lignes et de colonnes.
1. Structure de base d’un tableau :
< table border = " 1 " >
< tr >
< th > Nom < / th >
< th > ge < / th >
< th > Ville < / th >
< / tr >
< tr >
< td > Salima < / td >
< td > 23 < / td >
< td > Mohammedia < / td >
< / tr >
< tr >
< td > Ayman < / td >
< td > 24 < / td >
< td > Casablanca < / td >
< / tr >
< / table >

2. Explication rapide des balises :


— <table> : crée le tableau.
— border="1" : ajoute une bordure autour du tableau.
— <tr> : définit une ligne du tableau.
— <th> : cellule d’en-tête (texte en gras et centré).
— <td> : cellule de données.

2
3. Exemple avec fusion de cellules :
< table border = " 1 " >
< tr >
< th colspan = " 3 " > Informations Personnelles < / th >
< / tr >
< tr >
< td > Nom < / td >
< td > P r n o m < / td >
< td > ge < / td >
< / tr >
< tr >
< td > Elhou < / td >
< td > Salima < / td >
< td > 22 < / td >
< / tr >
< / table >

4. Exemple avec fusion de lignes :


< table border = " 1 " >
< tr >
< th rowspan = " 2 " > Nom < / th >
< td > Salima < / td >
< / tr >
< tr >
< td > Ayman < / td >
< / tr >
< / table >

Vous aimerez peut-être aussi