Développement web
HTML
1 Pr : EL HAYANI Salma
Une page Web c’est ..;
Un ficher HTML est un format de fichier « texte » éditable dont
les éléments ont du sens.
Au format .html
Peut contenir du texte , des images , des liens , des médias ,ect
Peut être liée à une autre page via des liens.
Pr : EL HAYANI Salma
Une site Web c’est …..
Un ensemble de pages liées entre elles.
Accessible en ligne depuis n’importe où.
Pr : EL HAYANI Salma
Qu’est-ce que le HTML
⦁ HTML
(HyperText Markup Language) n'est pas un langage
de programmation: c'est un langage de balisage qui
sert à indiquer au navigateur comment structurer les
pages web visitées.
Pr : EL HAYANI Salma
Générer du HTML avec un éditeur
⦁ Blocnote ou TextEdit si vous n’avez rien d’autre sous
la main:
pas de coloration syntaxique
Nécessite de connaître tout le syntaxe
Pr : EL HAYANI Salma
Les éditeurs de texte plus avancé et spécialisés
⦁ Sublimetext
Éditeur spécialisé
Auto-complétion
retour à la ligne
colorisation syntaxique.
Pr : EL HAYANI Salma
D’autre éditeurs
Coda : uniquement sur Mac
Notepad++
Komodo
Neatbeans
Pr : EL HAYANI Salma
Générer du HTML depuis un langage côté serveur
Pr : EL HAYANI Salma
Structure d’un document HTML simplifié
Pr : EL HAYANI Salma
Doctype , html
Doctype : souvent appelé DTD (déclaration ou définition de type de
document)
La balise <html> </html>: Tout document HTML commence par
la balise <html> qui se ferme en fin de document.
La balise <html> contient nécessairement deux balises définissant
l’entête <head> et le corps <body> du document.
L’attribut lang : permet de spécifier la langue de traitement du
document global :
Indexation dans la bonne langue par les moteurs de recherche
Vérification orthographique des formulaires.
Pr : EL HAYANI Salma
Head ,title
La balise <head> </head>: Cet élément a le rôle de conteneur pour
toute chose que vous souhaitez inclure dans la page HTML qui ne soit
pas du contenu à afficher aux visiteurs de la page : mots clés,
description de page que vous souhaitez voir apparaître dans les
résultats de recherche, style CSS..
La balise <title> </title>: c’est le titre du document
Pr : EL HAYANI Salma
Head , meta
La balise <meta charset=‘’ UTF-8’’ /> : permet de définir
l’encodage de caractére de la page (à mettre directement sous le
<head>)
La balise <meta name=‘’description’’ content =‘’ description
pour le référencement /> : affiché dans les résultats de recherche
Pr : EL HAYANI Salma
La balise <body> </body>
La balise <body> </body> : délimite le contenu de la page ,le
contenu est constitué de texte ,images et autres éléments qui seront
affichés.
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Le principe de balise
⦁ Les balises structurent le contenu de la page web
⦁ Chaque balise a un rôle et donne du sens au contenu
présenté
⦁ On peut imbriquer les balises les unes dans les autres.
Pr : EL HAYANI Salma
Le principe de balise
⦁ Toute balise ouverte doit être fermée (sauf exception)
⦁ Certaines balises bien particulières n’ont pas besoin
d’être fermées, on les dit « auto-fermantes » , elles
n’ont ni contenu ni balises fermante.
Pr : EL HAYANI Salma
Attributs et valeurs
⦁ Certaines balises peuvent être complétées par des
attributs précisant certains paramètres (l’adresse
des liens ,source d’une image à afficher ,etc ).
⦁ Une balise peut contenir plusieurs attributs.
⦁ Les attributs sont des éléments prédéfinis dans HTML
⦁ Les attributs sont toujours dans la balise ouvrante
Pr : EL HAYANI Salma
Exemple Attributs
⦁ src=" " : donner la source d’une image par exemple
<img src=" [Link] "/>
⦁ href=" " : donner la destination d’un lien
<a href="[Link] du lien </a>
Pr : EL HAYANI Salma
Exemple Attributs
⦁ id=" " : donner un identifiant à l’élément que l’on
pourra utiliser en CSS
les ids doivent être uniques par page
<p id=« monId">texte </p>
⦁ class=" " : donner une classe à l’élément que l’on
pourra utiliser en CSS
les classes peuvenr être dupliquées sur page
<p class=« maClasse">texte </p>
Pr : EL HAYANI Salma
Les éléments de liste
Les listes non ordonnées <ul>
La balise <ul> permet de créer une liste non ordonnée, il
faut l’ouvrir en début de liste et la fermer après le dernier
élément de la liste
La balise <li> permet de créer les éléments de la liste.
Pr : EL HAYANI Salma
Les éléments de liste
Les listes ordonnées <ol>
La balise <ol> permet de créer une liste ordonnée et
numérotée, il faut l’ouvrir en début de liste et la fermer
après le dernier élément de la liste
La balise <li> permet de créer les éléments de la liste.
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Lien vers la page
[Link]
Lien vers la page
[Link]
Lien vers la page
[Link]
Pr : EL HAYANI Salma
Page 1 .html
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Les tableaux
Un tableau sert à organiser des informations
structurées sous forme tabulaire.
Il se compose de lignes organisées elles-même en
cellules
Pr : EL HAYANI Salma
Créer un tableau
La balise <table></table> permet d’indiquer le début
et la fin du tableau.
La balise <tr> caractérise une nouvelle ligne
La balise <td> marque le contenu d’une cellule dans
une ligne
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Créer un tableau
Le nombre d’éléments <td> au sein des éléments <tr>
doit rester le même dans le mesure ou chaque ligne
possède un même nombre de cellules , nombre qui
correspond au nombre de colonnes du tableau
Pr : EL HAYANI Salma
Créer un tableau
<th> peut remplacer <td> pour créer une cellule d’entête
au tableau
Par défaut affiché en gras et centré dans les navigateurs
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Créer un tableau
On utilise la balise <caption> pour donner un titre au
tableau
La balise se place au début du tableau
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Fusion de cellules d’un tableau
Il est possible de fusionner certaines cellules entre elles
avec l’attribut colspan= ‘’nombreDeCellules’’ qui ce
place sur la cellule (th ou td)
La valeur numérique de cet attribut précise le nombre de
colonnes du tableau que couvre la cellule.
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Fusion de lignes d’un tableau
Il est possible de fusionner des lignes rowspan=
‘’nombreDeLignes’’ qui ce place sur la cellule (th ou td)
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Exercice 1
Créer le tableau suivant :
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Exercice 2
Créer le tableau suivant :
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Exercice 3
Créer le tableau suivant :
La référence de la couleur bleu est : #6A80D1
La référence de la couleur vert est : #B3F7CA
La référence de la couleur orange est : #F7D6B3
Pr : EL HAYANI Salma
Pr : EL HAYANI Salma
Exercice 4
Créer un tableau de 4 lignes et 4 colonnes
Fusionner les colonnes 1 et 2 de la deuxième lignes et la colonne 3 et
4 de la même lignes .
Fusionner les lignes 3 et 4 de la colonne 1
faire la fusion de la ligne 3 et 4 avec les colonnes 3 et 4
Pr : EL HAYANI Salma
Exercice 5
Créer le tableau suivant
3 4
2 6 7 5
Pr : EL HAYANI Salma
Solution Ex4
Pr : EL HAYANI Salma
Les formulaires
Le formulaire sert à récupérer des données
que l’utilisateur va entrer et les envoyer au
serveur pour un traitement (en PHP par
exemple) .
Pr : EL HAYANI Salma
Les formulaires
La balise <form>
• Balise principale du formulaire
• Deux méthodes:
method=‘’get’’ : limitée à 255 caractères, informations passées
dans la barre d’adresse URL
Method=‘’post’’ : envoie les données dans le corps de la
requête sans passer par la barre d’adresse , c’est la méthode
la plus utilisée
• Action : l’adresse du fichier qui va traiter les données
Pr : EL HAYANI Salma
Les formulaires
La zone de texte <input>
• Balise input est auto-fermante
• Ne génère pas de retour à la ligne
• Il faut lui donner un nom avec l’attribut « name » pour que l’on
puisse récupérer sa valeur (éviter les espaces dans le name). Le
nom n’est pas visible sur la page
Pr : EL HAYANI Salma
Les formulaires
Le label
• Son rôle est décrire à un être humain la fonction du champ
• Ajouter un for=‘’nom’’ au label
• Ajouter un id=‘’nom’’ au champ
Pr : EL HAYANI Salma
Les formulaires
L’attribut value=‘’ ‘’
• Value = ‘’ ‘’ : donne une valeur par défaut au champ
Pr : EL HAYANI Salma
Les formulaires
résumé
Pour n’importe quel champ il faut toujours au moins :
• Un label avec un for=‘’ ‘’ .
• Un champ avec :
Un id qui la même valeur que for
Un name pour entrer la valeur dans la base de donnée
• L’attribut Value = ‘’ ‘’ pour donne une valeur par défaut au
champ (facultatif)
Pr : EL HAYANI Salma
Les formulaires
Attribut supplémentaires
Maxlenght =‘’ ‘’ : le nombre de caractères maximum acceptés
dans le champ
placeholder =‘’ ‘’ : donne une indication de ce que devrait
contenir le champ.
Pr : EL HAYANI Salma
Les formulaires
La zone de texte multiligne <textarea>
• Une balise qu’il faut ouvrir et fermer
• Pas de retour à la ligne automatique
• Pas de value=‘’ ‘’ , le texte par défaut se met entre les deux
balises ouvrante et fermante .
Pr : EL HAYANI Salma
Les formulaires
Les cases à cocher <input type =‘’ checkbox ’’>
• Une case = input
• Plusieurs cases , toutes peuvent être cochées
• On peut mettre le label à gauche ou à droite
• On peut pré-cocher une checkbox avec checked
Pr : EL HAYANI Salma
Les formulaires
Les boutons <input type =‘’ radio ’’>
• Une case = input
• Un seul choix possible parmi tous les éléments
• On peut mettre le label à gauche ou à droite
Pour que le navigateur comprenne que des éléments forment un
groupe , il faut leur donner le même attribut name.
Pr : EL HAYANI Salma
Les formulaires
Les listes déroulantes <select>
• La liste se trouve entre les éléments <select id=‘’nomDeListe’’
></select>
• La balise <label for=‘’nomDeListe’’> permet de donner le nom
de la liste et est liée à <select>
• On crée un objet de la liste avec la balise <option> </option>
• L’attribut value permet de donner la valeur de l’option de la liste
Pr : EL HAYANI Salma
Les formulaires
Bouton d’envoi input type=‘’ submit’’
• Pour envoyer le formulaire on utilise input type=‘’submit’’
• L’attribut value=‘’ ‘’ est obligatoire et permet de donner le ‘’titre’’ du
bouton
• Le formulaire est envoyé pour traitement au fichier que l’on a
défini dans action=‘’ ‘’
Pr : EL HAYANI Salma