Cours Informatique Tle C,D,E,TI – Algorithme et programmation web – Langage HTML

Cours Algorithme et programmation web : Langage HTM – Le HTML (HyperText Markup Language) est un langage permettant de concevoir les pages web statique. HTML est un langage de description des pages web, un langage basé sur l’utilisation des balises.

Un algorithme est une suite d’opérations (dites instructions) qui décrivent la solution d’un problème informatique posé. Il s’agit du plan ou la structure d’un programme informatique. Un algorithme est indépendant de tout langage de programmation, mais il est étroitement lié à celui-ci car il en constitue la logique.

Compétences
♣ Énumérer quelques exemples de navigateurs ;
♣ Écrire la structure de base d’un document HTML ;
♣ Utiliser les balises de mise en forme du texte ;
♣ Utiliser les balises de liste ;
♣ Donner l’intérêt d’utilisation des formulaires dans un site web ;
♣ Insérer les éléments d’un formulaire ;
♣ Créer un formulaire d’inscription dans un site.

James, jeune écrivain souhaite créer un site web pour la publication de ses travaux. Il aimerait faire ces débuts dans le html mais, ne connait pas les fondamentaux du langage html qui est un langage de description des pages web.
Quels sont les éléments que James devra connaître en premier afin de débuter plus facilement dans le html ?

I. Définition
La balise, tag en anglais, désigne dans le domaine de la programmation une série de caractères destinée à déclencher, de façon automatique, l’exécution d’une action par un programme informatique. À la lecture d’une balise, un programme informatique exécute ainsi instantanément une commande spécifique.
Le HTML (HyperText Markup Language) est un langage permettant de concevoir les pages web statique.
HTML est un langage de description des pages web, un langage basé sur l’utilisation des balises. C’est dans le langage HTML, celui qui codifie le Web, que l’on retrouve principalement l’utilisation de balises (on parle alors de balises HTML). Celles-ci sont utilisées pour mettre en forme du texte, structurer et hiérarchiser le contenu d’une page Web, etc.
Page Web : Tout document pouvant s’ouvrir dans un navigateur, Fichier conçus à partir du langage HTML.
Site web : Ensemble de pages web liées entre elles par des liens hypertextes.
Attribut : Paramètre ou propriété d’une balise permettant de donner plus de précision sur l’action d’une balise. L’attribut permet d’enrichir l’action de la balise.

II. Création d’une page web html
Pour créer une page web statique, nous avons besoin de deux éléments logiciels :
Un éditeur de texte et un Navigateur.
• Un éditeur de texte est un logiciel permettant de saisir le texte ou code source d’un programme.
Il existe plusieurs éditeurs de texte :Visual Studio Code (celui que nous utilisons), Notepad++, Bloc note, wordpad, Dreamweaver, script édit etc.
Un Navigateur est un logiciel permettant d’interpréter et d’afficher une page web. Il permet d’accéder à une page web et de l’afficher sur l’écran de l’utilisateur.
Il existe plusieurs navigateurs : Internet explorer ; Google chrome ; mozilla firefox ; opéra ; safari, etc.
Une page html est un simple fichier texte contenant du texte formaté (marqué ou structuré) avec des balises html. Il existe des balises dites paire (elles sont ouvrantes et fermantes) et des balises seules ou orphelines.

II.1 Structure générale d’une page web
L’inventeur du HTML (1992) est Tim Berners-Lee, nous utilisons dans ce cours la version HTML5, développé par un groupe d’indépendant, le WHATWG (Web Hypertext Application Technology Working Group) dirigé par Ian Hickson.
Un élément a la structure suivante :
<non> Contenu </non>
Son contenu est précédé par une balise d’ouverture et suivi par une balise de fermeture .
Toutes les balises d’ouverture (ou marqueur) commencent par le signe < et se terminent par le signe >. La balise de fermeture suit la même règle mais le nom de l’élément est précédé d’un slash (/). Les navigateurs interprètent donc les contenus en fonction du nom de l’élément et attribuent un style par défaut à chacun de ses contenus.
Les caractéristiques de chaque élément peuvent être précisées par des informations complémentaires que l’on désigne en tant qu’attributs de l’élément.
La structure minimale d’une page web est composée de deux parties : l’entête et le corps.
• La déclaration DOCTYPE
La déclaration DOCTYPE, obligatoire dans tous les documents, précise le type de document qui va être créé.
L’élément <html> est l’élément racine du document. C’est donc lui qui est le parent de tous les autres, soit directement, comme <head> et <body> , soit indirectement par l’intermédiaire de ces derniers. Il est donc le conteneur de premier niveau placé en haut de la hiérarchie de tous les éléments du document. Il n’existe que deux éléments enfants de l’élément <html> : L’élément <head> et terminé par la balise </head>, puis par le corps du document introduit par <body> et terminé par </body>, comme nous pouvons le vérifier dans les exemples.
• L’entête
L’entête est délimité par la paire de balise <head> et </head> qui encadre la paire de balise <title> et </title>. La balise <title> permet de spécifier le titre de notre document html. Ce titre sera affiché dans le barre d’adresse du navigateur.
• Le corps du document html
Il est délimité par la paire de balise <body> et </body>
Le texte minimal de la page web donnée ci-dessus doit être enregistré dans un fichier avec une extension .html ou .htm.

N.B : La déclaration <!DOCTYPE html> est utilisée pour informer le navigateur du visiteur que le document qui suit doit être affiché comme un document HTML.
L’essentiel des éléments de l’en-tête <head> ont un contenu invisible dans le navigateur. L’élément <body> au contraire est le conteneur de l’ensemble des éléments textuels et graphiques d’une page web.

II.2 Structure d’un texte dans une page web
Chaque élément HTML est membre d’un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques.
a) Contenu de méta-données
Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d’autres documents ou comportent des informations sur la structure même des données.
Les éléments appartenant à cette catégorie sont :
<link>,<meta>,<noscript>,<script>,<style> et <title>.
b) Contenu de flux
Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont :
<a><button><code><h1><sub><video><p><i><strong><small>...
c) Contenu sectionnant
Les éléments appartenant à cette catégorie sont les éléments <article><aside><nav> et  <section>.
d) Contenu de titre
Les éléments appartenant à cette catégorie sont <h1><h2><h3><h4><h5><h6> et <hgroup>.
e) Contenu interactif
Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l’utilisateur. Les éléments appartenant à cette catégories sont : <a><button><details><embed><iframe><label><texterea>.

Le tableau suivante représente quelques balise avec leurs différentes fonctions respectives :

 Syntaxe Signification
<b></b>
<strong>….</strong>
 Mettre un texte en gras
<i></i> Mettre un texte en italique
<u></u> Souligne un texte
<center></center> Centré un texte
<hn></hn> Insère un titre de paragraphe où n a pour valeur de 1 à 6 et correspond au niveau de titre. 1 étant le plus grand et 6, le plus petit titre
<p></p> Insère un Paragraphe
<br /> balise orpheline Insère une Ligne horizontale, elle n’est pas fermante
<sub></sub> Mettre un texte en indice
<sup></sup> Mettre un texte en exposant
<cite></cite> Met en évidence une citation
<pre></pre> Permet d’écrire un texte préformant en conservant les espaces, les retours à la ligne et les tabulations

III. Notion de liste en html
La présentation sous forme de liste permet une structuration de l’information telle qu’elle peut apparaître dans une table des matières. Les listes sont très utilisées dans les documents html et permettent afficher les informations de façon précise sous forme d’énumération.
Le langage HTML définit trois types de listes :
• La liste ordonnée ;
• La liste non ordonnée ;
• La liste de définition.
III.1 La liste non ordonnée ou liste à puces ;
Les listes non ordonnées sont définies par les balises
• <ul></ul> qui commence une liste
• <li></li> qui déterminera le contenu de chaque ligne

Les ustensiles de cuisine

III.1 La liste ordonnée
Nous avons parlé des attributs qui sont des paramètres ou propriétés d’une balise permettant de donner plus de précision sur l’action d’une balise. L’attribut permet d’enrichir l’action de la balise.
Pour créer une liste dans laquelle la notion d’ordre a une importance, nous pouvons utiliser une liste ordonnée dont chaque item sera numéroté par défaut à l’aide d’entiers incrémentés de 1 à N, suivis d’un point puis du contenu de chaque item.
Une liste ordonnée doit commencer par l’élément <ol>(pour Ordered List) qui doit obligatoirement contenir au moins un élément <li> qui lui-même renferme le contenu visible de chaque item. Cet élément possède l’attribut ‘’start’’ dont la valeur est un nombre pour que la numérotation ne commence pas à 1, comme c’est le cas par défaut, mais à un nombre ou une lettre précisés. Son attribut type permet de choisir le style de la numérotation ; nous avons les choix suivants :
• type= »l » : numérotation décimale : 1, 2, 3…
• type= »a » : numérotation alphabétique minuscule : a, b, c, d…
• type= »A » : numérotation alphabétique majuscule : A, B, C, D…
• type= »i  » : numérotation en chiffres romains minuscules : i, ii, iii, iv…
• type = T : numérotation en chiffres romains majuscules : I, II, III, IV…

Les ustensiles de cuisine

  1. Le couteaux
  2. Les assiettes
  3. Les plats

III.3 La liste de définition avec <dl><dt> et <dd>
Il suffit d’écrire le code HTML suivant : En général, le code HTML d’une liste de définition est le suivant :
Pour insérer la liste de définition suivante :
Ordinateur : C’est une machine électronique.
Informatique : C’est la science du traitement automatique.

Quelques définitions

Ordinateur :C’est une machine électronique.Informatique :C’est la science du traitement automatique.

III. Insérer des images et du multimédia dans une page html
L’image est la reproduction visuelle d’un objet réel.
L’image numérique désigne toute image (dessin, icône, photographie …) acquise, créée, traitée et stockée sous forme binaire.
Un format d’image est donc une représentation informatique de l’image, associée à des informations sur la façon dont l’image est codée et fournissant éventuellement des indications sur la manière de la décoder et de la manipuler (métadonnées).
III.1 Les types d’images
On distingue essentiellement deux types d’images :
• Les images matricielles (ou images bitmap)
Les formats matriciels les plus utilisés sont : JPEG, GIF, PNG et TIFF.
• Les images vectorielles
Le format vectoriel le plus utilisé est : SVG.
La balise permettant d’insérer une image dans une page web est la balise <img/>
Cette balise doit être accompagnée d’au moins deux attributs :
– src : qui signifie source. Il permet d’indiquer le chemin conduisant à l’image qu’on veut insérer.
alt : qui signifie texte alternatif. Il permet d’indiquer un texte court qui décrit le contenu de l’image.
Deux autres attributs sont à préciser ici, ils permettent de redimensionner une image. Il s’agit de :
width : pour définir la largeur de l’image
• height : pour définir la hauteur de l’image
La syntaxe d’insertion est la suivante

.

III.2 Insertion d’un son et d’une vidéo
• Pour insérer un son, on utilise la balise <audio> … </audio>
Ces deux attributs acceptent obligatoirement l’attribut src.
On peut lui ajouter des particularités avec les attributs supplémentaires. controls = "controls" qui permet d’afficher des éléments de contrôle (lecture , pause, retour, durée…) en dessous de la vidéo.

<audio src= »/images/cours _html.mp3″ controls= »controls » type= »audio/mpeg »></audio>

• Pour insérer une vidéo, on utilise la balise <video> … </video>

<video src= »/images/cours _html.mp4″ controls= »controls » width= »90% » height= »300″ type= »video/ mp4″></video>

IV. Créer un lien hypertexte dans une page web
Les documents sont repérés par une adresse unique appelé URL.
L’élément HTML 5 primordial pour la création de liens est l’élément <a>, dont le contenu, situé entre les balises <a> et </a>, est la partie visible, texte ou image, sensible au clic. Ses attributs permettent de définir la cible du lien et les moyens de le déclencher.
Pour indiquer l’adresse URL de la cible d’un lien, il faut donner une valeur à l’attribut href de l’élément <a>.

<a href= »https:// www.google.com » target= »_blank » > rechercher </a>

Quelques attributs de l’élément <a>
• target : indique dans quelle fenêtre du navigateur doit s’ouvrir la cible du lien ; il prend les valeurs suivantes :
o _b1ank : cible dans une nouvelle fenêtre ;
o _self : cible dans la même fenêtre ;
o _parent : cible affichée dans la fenêtre parent immédiat de celle du lien ;
o _top : cible affichée dans la fenêtre parent de plus haut niveau de celle du lien.
• accesskey : permet de créer un raccourci clavier pour ouvrir le document cible sans effectuer de clic sur le contenu de l’élément <a>.

VI. Créer des tableaux dans une page html
• L’élément essentiel dans la création de tableaux est <table>.
• Chaque ligne est déclarée par un élément <tr>
• La création de chaque cellule d’une ligne est déclarée par un élément <td>
• L’élément <th> définit une cellule d’un tableau comme une cellule d’en-tête pour un groupe de cellule.
La structure générale d’un tableau

<table table style= »width: 90%; margin-left: auto; margin-right: auto; » border= »1″>
<tr>
<td> Ligne 1 Colonne 1 </td> <td> Ligne 1 Colonne 2 </td><td> Ligne 1 Colonne 3 </td>
</tr>
<tr>
<td> Ligne 2 Colonne 1 </td> <td> Ligne 2 Colonne 2 </td><td> Ligne 2 Colonne 3 </td>
</tr>
<tr>
<td> Ligne 3 Colonne 1 </td> <td> Ligne 3 Colonne 2 </td><td> Ligne 3 Colonne 3 </td>
</tr>
</table>

Ligne 1 Colonne 1Ligne 1 Colonne 2Ligne 1 Colonne 3
Ligne 2 Colonne 1Ligne 2 Colonne 2Ligne 2 Colonne 3
Ligne 3 Colonne 1Ligne 3 Colonne 2Ligne 3 Colonne 3

VII. Créer des formulaires dans une page html
Un formulaire HTML est une partie du document constituée d’un contenu normal, d’un balisage, d’éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes. Il facilite la communication entre l’internaute et le site web, en recueillant des informations d’un utilisateur.
Le formulaire est composé de plusieurs éléments de l’interface homme-machine :
• Champ de saisie,
• Boutons à cliquer,
• Liste de choix,
• Radio bouton,
• Case à cocher.
Ces éléments sont tous placés entres les balises <form> et </form> qui délimitent le formulaire.
L’élément <fieldset> est très souvent inclus dans un formulaire. Il a pour vocation de délimiter les groupes de composants actifs du formulaire.
Chaque titre est le contenu d’un élément <legend> inclus dans <fieldset>.
Les attributs de l’élément <form>
• action : cet attribut est obligatoire car il désigne le fichier qui est chargé de traiter les données du formulaire côté serveur.
  <form action="camerecole.php">
L’attribut action peut aussi avoir la valeur mailto: qui provoque l’envoi des données (leur nom et leur valeur) à une adresse e-mail qu’il faut préciser à la suite du mot-clé mailto:,
<form method="post" action="mailto: ">
Pour que la transmission vers une adresse e-mail ait lieu, il faut que l’attribut method soit utilisé et qu’il ait la valeur post.
• method détermine la méthode d’envoi des données vers le serveur. Il peut prendre les deux valeurs get ou post. La méthode get est celle qui est utilisée par défaut
La manière la plus courante de créer les éléments d’un formulaire est d’utiliser l’élément <input/> et c’est son attribut type qui permet de lui assigner une fonction particulière.
1) Bouton d’envoi et de réinitialisation avec type qui vaut submit
Le bouton d’envoi, généralement nommé Envoi ou OK, est indispensable car il est le seul qui, après un clic, peut déclencher l’envoi des données vers le serveur

<form>
<fieldset>
<input type= »submit » value= »Envoi » name= »soumission » title= »Bouton d’envoi »/>
</fieldset>
</form>
<form>
<fieldset>
<input type= »reset » value= »Réinitialisation » name= »efface »/>
</fieldset>
</form>

2) La saisie d’une ligne de texte
Un formulaire permet le plus souvent la saisie de texte, par exemple pour indiquer son nom ou son adresse. Comme il est nécessaire de préciser à l’utilisateur le type d’information attendue, il faut introduire le libellé de l’information dans un élément <label>. Il possède l’attribut for dont la valeur est l’identifiant du champ auquel il se rapporte, et l’attribut form qui fait référence à l’identifiant du formulaire auquel il appartient dans le cas où il y en a plusieurs sur la page.

<form name= »formulaire »>
<1abel for= »nom » form= »formul1aire »> Votre nom : </label>
<input type= « text » id= »nom »/>
</form>

3) La saisie de mot de passe
Les champs de saisie de mot de passe sont quasi identiques aux champs de saisie de texte. Ils ne comportent qu’une seule ligne et sont créés avec le même élément <input>
La différenciation entre ces deux champs réside dans la valeur de l’attribut type qui prend la valeur password au lieu de text.
Pour l’utilisateur le champ a le même aspect visuel, mais quand il frappe son mot de passe, les caractères qu’il utilise ne sont pas affichés dans la zone et sont remplacés par un astérisque (*), ce qui le protège des regards indiscrets.
4) La saisie de texte long
L’élément <textarea> crée un champ de saisie de texte sur plusieurs lignes. Contrairement au précédent, ce n’est pas un élément vide et son contenu n’est autre que le texte écrit par le visiteur.
Les dimensions de la zone de saisie doivent obligatoirement être définies. Pour cela, il faut utiliser les attributs suivants.
• col s= »N » qui fixe la largeur de la zone à N caractères. Le retour à la ligne est automatique dans la zone.
• rows= »N » qui fixe la hauteur à N lignes.

<form name= »formulaire »>
<label for= »nom » form= »formulaire »> Votre mot de passe : </label>
<input type= « password » id= »nom »/>
</form>
<form >
<textarea rows= »3″></textarea>
</form>

5) Les boutons radio et les cases à cocher
Pour créer un bouton radio, nous utilisons encore une fois l’élément aaaa <input /> dont l’attribut type prend la valeur radio.
Il faut que tous les attributs name de ses éléments aient la même valeur. L’attribut value de chaque bouton radio contient la valeur que l’on veut associer à chacun d’eux.

 <form>
<fieldset>
<label>Monsieur</label>
<input type= »radio » name= »sexe » value= »Monsieur » checked= »checked »/>
<label>Madame</label>
<input type= »radio » name= »sexe » value= »Madame »/>
</fieldset>
</form>

Quitter la version mobile