HTML
Déploiement d’une interface de communication web
Module SIN413: Programmation WEB HTML
Durée : 4h
Objectifs à atteindre : Acquérir les compétences indispensables au développement de sites internet en PHP.
Savoir manipuler les données d'une base de données relationnelle à partir de l'application.
Niveau des connaissances envisageable : Première
Pré requis : - Connaître la structure générale d'une page web, tableaux, liens, principe de fonctionnement..
- Connaître les éléments de programmation procédurale (langage C de préférence), algorithmique de base.
Logiciels utilisés :
- Notepad ++ ou VSCode
- XAMP
Outils mobilisés, le cas échéant : tous les tutoriels disponibles sur internet
Webographie :
http://www.siteduzero.com/tutoriel-3-13484-votre-premiere-page-xhtml.html (Par M@teo21, licence CC)
http://doc.ubuntu-fr.org/programmation (licence CC BY-SA v3.0)
Le langage HTML
Toute page Web comprend une base de langage HTML. Il s'agit d'un langage de balisage qui définit essentiellement la structure de la page web (titres, tableaux, paragraphes, etc…). Il permet en outre de créer des liens d'un document à un autre ou d'un endroit d'un document à un autre endroit du même document.
Le langage HTML est interprété au niveau du client par un navigateur web (Internet Explorer, Mozilla Firefox, Google chrome, Opéra, …). Il n’est donc pas nécessaire d’utiliser un serveur web pour lire une page HTML.
- Premier exemple
Dans un éditeur de texte (notepad++ sous Windows), ouvrez le fichier test.html du dossier html.
|
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/> <TITLE>Page Test SIN</TITLE> </HEAD> <BODY BGCOLOR="lavender"> <H2><CENTER><B>Hello World !</B></CENTER></H2> <P>Vous êtes ici sur une <B>Page de démarrage pour les élèves SIN d'Elisa Lemonnier</B></P> <P>Pour faire une recherche, <I>cliquez ici!</I></P> </BODY> </HTML> |
Enregistrer le contenu du cadre ci-dessus dans un fichier que vous appellerez index.html
Le navigateur interprète les différentes balises et produit le rendu graphique.
Ainsi, <BODY BGCOLOR="#2FAB66"> indique la couleur de fond du corps de la page, <H1><CENTER><B> indique que le texte qui suit (Hello World !) sera du premier niveau de titre (<H1>), centré (<center>) et en gras (<B>).
Une page HTML peut s'accompagner de feuilles de style en cascade (CSS : Cascading Style Sheets - Feuilles de style en cascade) qui sont des styles qui se chargent de la mise en forme de la page. Le fait de dissocier le formatage du contenu permet de faciliter le ré habillage du site. Il suffira de modifier les styles définis dans le fichier CSS pour impacter toutes les pages HTML du site.
La ligne <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/> permet au navigateur d’identifier le jeu de caractères utilisé.
UTF-8 est le jeu de caractère universel, qui permet de coder à peu près tous les caractères connus de toutes les langues.
Il faut donc veiller à ce que le fichier HTML soit bien écrit en utilisant ce jeu de caractères sous peine de voir les caractères spéciaux non codés selon la norme HTML (ê pour ê par exemple) de manière curieuse et illisible (é ou � par exemple). Avec Notepad++, choisissez le bon format lors de l’enregistrement de la page html, choisissez Format → Encoder en UTF-8.
Lorsqu’un fichier HTML est exécuté localement, la barre d’adresse indique file://. Lorsqu’il est hébergé sur un serveur, elle indique http://
Structure d’une page HTML
Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient également un en-tête décrivant le titre de la fenêtre du navigateur ou de l’onglet, puis un corps dans lequel se trouve le contenu de la page.
L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le corps est délimité par les balises <BODY> et </BODY>.
|
<HTML lang="fr"> <HEAD> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/> <TITLE>Titre de la page</TITLE> </HEAD> <BODY> Contenu de la page </BODY> </HTML> |
- Principales balises HTML
On trouvera sur internet de nombreux sites répertoriant les balises HTML de manière plus exhaustive.
La liste ci-après ne représente que les quelques balises indispensables de connaître.
- Structure de la page HTML
|
Balises |
Définitions |
|
<HTML>...</HTML> |
Début et fin de fichier Html |
|
<HEAD>...</HEAD> |
Zone d'en-tête d'un fichier Html |
|
<TITLE>...</TITLE> |
Titre affiché par le browser (élément de HEAD) |
|
<BODY>...</BODY> |
Début et fin du corps du fichier Html |
|
<BODY bgcolor="#XXXXXX"> |
Couleur d'arrière-plan (en hexadécimal) |
|
<BODY background="xyz.gif"> |
Image d'arrière-plan |
- Mise en forme des caractères
|
Balises |
Définitions |
|
<B>...</B> |
Texte en gras |
|
<I>...</I> |
Texte en italique |
|
<FONT color="#XXXXXX">...</FONT> |
Texte en couleur où XXXXXX est une valeur hexadécimale |
|
<FONT size=X>...</FONT> |
Taille des caractères où X est une valeur de 1 à 7 |
- Mise en forme du texte
|
Balises |
Définitions |
|
<!--...--> |
Commentaire ignoré par le navigateur |
|
<BR> |
Retour à la ligne |
|
<CENTER>...</CENTER> |
Centre tout élément compris dans la balise |
|
<P>...</P> |
Nouveau paragraphe |
|
<P align=center>...</P> |
Paragraphe centré. La balise align accepte left et right |
- Les liens hypertextes ou ancrages
|
Balises |
Définitions |
|
<A href="http://...">...</A> |
Lien vers une page Web |
|
<A href="mailto:...">...</A> |
Lien vers une adresse Email |
|
<A name="xyz">...</A> |
Définition d'une ancre |
|
<A href="xyz">...</A> |
Lien vers une ancre (ancre = lien verticale dans une page) |
- Listes
|
Balises |
Définitions |
|
<UL> <LI> ... </LI> <LI> ... </LI> </UL> |
Liste à puces Elément de la liste |
|
<OL> <LI> ... </LI> <LI> ... </LI> </OL> |
Liste numérotée Elément de la liste |
|
<HR> |
Barre horizontale |
- Images
|
Balises |
Définitions |
|
<IMG src="xyz.gif"> |
Insertion d'une image. |
|
<IMG ... width=x height=y> |
Mise à l'échelle de l'image en pixels |
|
<IMG ... alt="votre texte"> |
Texte alternatif lorsque l'image n'est pas affichée |
|
<IMG ... align=bottom> |
Alignement : bottom, middle, top, center, left, right |
- Tableau
|
Balises |
Définitions |
|
<TABLE>...</TABLE> |
Définition d'un tableau |
|
<TABLE width=x> |
Largeur du tableau en pixels ou en % (width=x) |
|
<TABLE border=x> |
Largeur de la bordure |
|
<TABLE cellpadding=x> |
Espace entre la bordure et le texte |
|
<TABLE cellspacing=x> |
Epaisseur du trait entre les cellules |
|
<TR>...</TR> |
Ligne du tableau |
|
<TD>...</TD> |
Cellule du tableau |
- Les formulaires
|
Balises |
Définitions |
|
< FORM>...</FORM> |
Définition d'un formulaire |
|
<FORM METHOD=x> |
Méthode de soumission des données au serveur (METHOD=POST ou METHOD=GET) |
|
<FORM ACTION=x> |
URL du script de traitement des données du formulaire. |
|
<input type="text" /> |
Définition d’une zone de saisie de texte. |
|
<input type="password" /> |
Définition d’une zone de saisie de mot de passe (caractères cachés). |
|
<input type="submit" /> |
Définition d’un bouton de soumission de formulaire. |
|
<input type="checkbox" /> |
Définition d’une case à cocher (cases carrées, plusieurs choix possibles). |
|
<input type="radio" /> |
Définition de cases d’options à cocher (cases rondes, un seul choix possible) |
|
<input type="reset" /> |
Définition d’un bouton de remise à zéro (effacement) d’un formulaire. |
|
<input type="hidden" /> |
Définition d’un champ caché. |
|
<textarea> |
Définition d’une zone de texte multi-lignes. |
|
<select name="pays"> <option value="c1">Choix 1</option> <option value="c2">Choix 2</option> <option value="c3">Choix 3</option> </select> |
Définition d’une liste déroulante. name : nom de la liste option : entrée dans la liste value : valeur renvoyée par le formulaire >...< : chaine affichée dans la liste |
- Exercice
Créez une page principale HTML de présentation de la spécialité SIN qui contient vos noms, prénoms, niveau d’étude, spécialité, lycée, ville et une photo (image de taille maxi 100ko).
Ajoutez :
- un lien vers ecosia.org pour faire une recherche
- un lien vers le site web d’Elisa Lemonnier via le logo du lycée
- un lien vers une seconde page (créer un nouveau fichier) qui présente une activité pratique de manière succincte (n’oubliez pas de créer un lien sous la forme d’une image cliquable pour revenir à la page principale).
- un lien que l'on va préparer pour la suite de l'exercice qui pointera vers une autre page
- une feuille de style pour externaliser la gestion du style
Vérifier que toutes vos pages sont valide au sens HTML 5 à l'aide du site https://validator.w3.org/, vous utiliserez la validation via un upload de fichier.
Récapitulatif de la navigation (à compléter tout au long de l'exercice) le fichier source se trouve ici 
- Exercice numéro 2 : modernisation à l'aide d'une bibliothèque javascript
Ajouter le support de la librairie bootstrap à votre site.
Au besoin, la documentation se trouve à cette page :
https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start
Il faut utiliser le fichier bootstrap SIN présent en ressource ainsi que les exemples de l'ensemble des éléments que l'on peut créer avec bootstrap à travers de répertoire d'exemple à télécharger ici ou dans les ressources.
Pourquoi bootstrap est dit "responsive" ?
Dézipper le répertoire dans votre espace de travail.
Il y a deux répertoires :
- le répertoire "asset" qui contient les librairies nécessaires au bon fonctionnement de Bootstrap. Ne rien modifier dans celui-ci.
- le répertoire "carousel" qui contient le code source HTML
On va utiliser le composant Carousel qui permet de faire tourner des informations sur une page.
Autour de l'un de vos hobbits ou passe temps, vous devrez :
- modifier les 3 sections tournantes (carrousel) pour les représenter
- modifier les 3 headings pour n'en laisser que deux avec des informations sur vous : photo avec un texte explicatif
- modifier les featurette donner deux informations sur la section SIN
La plus belle création servira de façade pour la journée porte ouverte et donnera un coup de pouce à leur créateur.
Pour aller plus loin, on utilisera un autre élément de bootstrap que l'on mettra en avant sur le site.
Notation : à l'issue des 4h, vous rendrez l'ensemble des fichiers zippés (nom_prenom_des_2_élèves_HTML.zip) ainsi que le fichier drawio mis à jour sur le filezilla.
Vous présenterez votre travail à la classe durant un autre moment, la liste des passages sera fournie dans un second temps.
- Les limites du HTML
Une page web créée en HTML est totalement statique et n'offre aucune possibilité d'interaction avec le visiteur. Chaque page doit être créée au préalable et doit être manuellement mise à jour.
Pour rendre une page web plus dynamique, il est possible d'y insérer des objets grâce aux balises <object>, <img>, <applet> ou <script>. Les objets peuvent être des animations flash, des vidéos, des programmes joints à la page web et exécutés soit dans le navigateur (scripts java, active X), soit par l’ordinateur client (applets java).
Les objets ne fournissent pas toutes les solutions aux besoins d'interactivité et de dynamisme des sites et peuvent parfois lourds à mettre en place.
Il faut alors avoir recours à la programmation coté serveur.
Plusieurs langages sont alors disponibles, nous étudierons uniquement ici le PHP que l’on peut associer à une base de données relationnelle pour fournir plus de puissance à nos applications.
Le TP suivant permettra de pallier à cette limitation du HTML.
Créé avec HelpNDoc Personal Edition: Outil de création d'aide puissant et convivial pour les documents Markdown