Construction Page HTML
I) Première Page Site Web
- La première page d’un site Web doivent être nommé
index.html tout en minuscule on doit faire l’enregistrement du
fichier avant le commencement du développement pour avoir
la coloration syntaxique dans le logiciel
- Il faut vérifier que langage utiliser part le logiciel est HTML non
Txt
II) Les éléments Fondamentaux
1) Type de document
chque page HTML commence avec
l’indication du type de langage
utiliser et la lange du contenu de la
page
< !DOCTYPE html> : l’utilisation du
langage HTML 5
<html> : début de la balise
Lang= ‘’fr ‘’ langue du contenue en Français
</html> : fin de la baslise
2) l’entête du document :
L’entête du document contient tous les information que le
navigateur a besoin pour bien afficher la page correctement
tous ses informations ne sont pas afficher dans le contenu de
la page ses informations sont stocké entre <head> et
</head>
3 ) Corps du document :
Le corps du documents contient tous le contenu qui sera
afficher dans la page web ils sont stockés entre <body> et
</body>
4) Meta sharset & title
a) Titre : le titre du document sera visible dans l’onglet
navigation ce situe entre <tile> ..titre.. </title>
b) Meta charset : il existe plusieurs Meta qu’on utilisent
ils sont entre <meta name= ‘’méta sharset’’
contenant=’’ valeurs’’>
III) Document Model Object ( DOM)
Définition : le DOM rend le document HTML accessible aux scripts pour
qu’on puisse manipuler la page et ajouter des scripts comme java ,
lorsqu’on ouvre un fichier HTML le navigateur remplie 2 missions
construire l’arbre DOM et la stocker dans le processeur et afficher les
éléments de la page dans la fenêtre
IV) Hiarchie des éléments HTML
Définition : le premier parent de l’arbre d’une page HTML est l’élément
<HTML> tous les éléments qui se situent en dessous sont les enfants .
V) Les Balises structurantes
Les Balises Structurantes sont utilisées pour structurer la page
Web
Toutes les balises structurantes sont situées dans la partie Body
du HTML
- <Main> : c’est la partie principal du Body il peut y’avoir un seul
main
- <Header> : c’est une introduction qu’on le retrouve soit pour
la page entier ou un article ou section de page
- <Footer >: c’est la conclusion de la page ou article ou section
de page
- <Nav> ; on l’utilise pour naviger soit contenu dans la page soit
pour des pages du même site
- <Article> : représente une composition autonome dans un
document, une page, une application ou un site, destinée à
être distribuée ou réutilisée de manière indépendante (par
exemple, dans le cadre d'une syndication).
- <Section> : Représente une section générique d'un document,
par exemple un groupe de contenu thématique. Une section
devrait généralement commencer avec un titre.
- <aside> : représente une partie d'un document dont le
contenu n'a qu'un rapport indirect avec le contenu principal du
document
VI) Les balises de Base HTML
Les Titres : on utilise la balise <hx> titre</hx> et il existe 6
Niveaux de titre Le <H1> : généralement le titre de la page et il
faut respecter l hyarchie il ne peux pas y’avoir H3 sans H2
Les paragraphes : <P> texte </P> on l’utilise généralement
pour les gros texte on peut aussi utiliser <br> pour les sauts lignes
Les Listes : il existe 3 type de listes : liste ordonnée , liste désordonné et
liste définition
Liste Ordonné : <Ol> - </OL>
Liste désordonnée : <Ul> - </Ul>
Liste définition : <Dl> - </Dl>
liste ordonnée on utilise <li>-</li> pour les élément
de la liste
liste définition on utiliser<dd>-</dd> pour les
éléments de la liste
Attribut start permet de définir le compteur <ol
start=4>
Attribut riversed définir un compte a rebour <ol
reversed>
VII) Les balises de mise en valeurs
Strong : <Strong> </strong> : le contenu sera en Gras et
mieux référencé
Em :<em> </em> : texten en italique relief
Les deux balises ont de l’importance dans l’indexation et
recherche
Ils ne coupe pas la ligne comme la balise br
Hr : <Hr> : permet de faire une trait horizontale sur toute la
page
Sup : <sup> </sup> : permet de mettre en exposent 12ème
Sub : <sub> </sub> : permet de mettre en indice H2
small : <small> </small> permet de presenter mention legal
mark : <mark> <mark> permet de souligner
pre : <pre> <pre> afficher le texte entre les deux balise
identique a la code.
Si on ajouter des espace ou tabulation ils seront afficher
dans la page
VIII) Les tableaux
Les balises de base
-Table : <Table> </Table> : balise tableau
-Caption :<Caption> <Caption> : le titre du tableau
-Tr : <tr> </tr> : ligne d’un tableau
-Td : <td></td> : cellule d’une ligne
Fusionner les Cellules dans un Tableau
Colspan : colspen= ‘’Valeur’’ : fusionner nb de cellule de la même ligne
Rowspan : rowspan= ‘’Valeur’’ : fusionner nb de cellule de la même
colone
Tableau sEn Tête
Thead : <thead> </thead> : l’entête du tableau
Tboddy : <tbody></tbody> : le corps du tableau
Tfoot :<tfooter></tfooter> : bas du tableau
IX) Les Formulaires
Les balises de base
- la partie Formulaire ce compose de la balise principal
<from></from>
- la balise se compose de 2 méthode et action
Les Méthodes & actions
Les méthodes
Get : envoie des données clair qui sont afficher dans la barre de
navigations
Post : envoie des données qui ne sont pas afficher dans la barre de
navigations
Actions : consiste a introduire le lien du fichier PHP ou autre
Organisation d’un formulaires
fieldset : permet de sections dans un formulaire
<filedset> </filedset>
legend : le titre de la selection du formulaires
les Composants d’un formulaires
Input
Label : c’est identifier le texte devant input :<label>
</label>
For : donner une identification a label il doit être unique dans
formulaire
input :est une balise seul elle est utiliser part : <input
type= ‘’ ‘’ />
type de input : peut être texte , bouton , case a cocher :
Id : il fait la liaison entre input et label il doit être le même que
for
Placeholder : expliquer ordre du format a intrdouire dans
zone input
Required : indique que le champs est obligatoire a remplir
Name : l’identificateur de la valeur qui sera envoyer vers la
partie action
Value : valeur part défaut a appliquer au champs de texte
Required : champs obloigatoire dans le formulaires
Search : champs de recherche
Textarea :
Label : c’est identifier le texte devant textearea :<label>
</label>
For : donner une identification a label il doit être unique dans
formulaire
Bouton Formulaire
< input button =’’submit ‘’ value=’valider’/>
<button type=’submit’ value=’valider’/>
<button type=’submit’>valider</button>
Bouton Radios
o Input type = “radio” : c’est le bouton radio
o Id : c’est l’id unique lier a la label
o Name : identifiant du bouton radio
o Value : valeur envoyer part le bouton radio
o Checked : la valeur défini part défaut bouton radio
Avec le bouton radio le label on l’ajoute après l’attribut
Les Cases a cocher
o Input type = “checkbox” : c’est case a cocher
o Id : c’est l’id unique lier a la label
o Name : identifiant du bouton radio
o Value : valeur envoyer part le bouton radio
o Checked : la valeur défini part défaut bouton radio
Avec cases a cocher le label on l’ajoute après l’attribut
Les Menus déroulants
o Select = pour déclarer menu déroulant
o optgroup : pour créer un group dans le menu déroulant
(optionnel)
o label : titre du groupe de menu déroulant
o option value : l’élément du menu déroulant
o selected : l’élément sélectionner part défaut
X) Créer les liens et les ancres
XI) Integrer les media avec les bons attribut
Utiliser et mettre en place des images
<img src= ‘‘images\...jpg’’ alt=’’descrpition image’’> : balise
orphelin
o Img : balise Image
o SRC : chemain accès image
o Alt : alternative description image
Extension des images : jpg, png , gif, svg
Utiliser les images et les figures
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
o figure : balise Image qui permet de rendre image
adaptif a l’écran
o SRC : chemain accès image
o Alt : alternative description image
o Figcaption : légende de l’image
o Height & width :taille en Pixel de la photo
XII) Insérer de l'audio et découvrir ses formats
<audio src= ‘’chemin fichier controls> votre navigateur ne supporte
Pas MP3</audio>
o audio : balise pour l’audio format MP3 ou ogg
o SRC : chemain du fichier
o controls : afficher lecteur MP3 obligatoire
o muted : Permettre au utilisateur couper le son
o autoplay : déclencher le son automatique :
déconseiller
o loop : jouer le son en boucle
