Le langage HTML, la structure et le contenu d’une page web

par | Jan 28, 2019 | Publication

I ) Présentation des langages HTML et CSS

Les langages HTML et CSS sont des langages informatiques de description.
Ils permettent de décrire la structure et l’apparence d’un document numérique destiné a être transmis par le web et affiché dans un programme appelé navigateur internet. (Mozilla firefox, Google Chrome, Internet Explorer, Safari … )

MANUEL-HTML

 

Le langage HTML décrit seulement la structure du document.

 

Le langage CSS décrit la présentation des éléments de la structure.

L’ensemble des présentations des éléments forme un style.

 

 

 
a ) Principe de description de la structure ( langage HTML )

balise-ouvrante-balise-fermante

Tous les éléments de contenu d’une page HTML sont encadrés par une balise ouvrante et une balise fermante.
Ces balises vont délimiter entre quelle zone et quelle zone, il y a par exemple
– un paragraphe <P> …………….. </P>
– un titre <H1> …………………… </H1>
– une partie soulignée <U> …………. </U>

 

 

b ) La structure générale d’une page HTML

head-body

<!DOCTYPE html>
<html>
     <head>
     <title>Titre de la page web</title>
     </head>
  <body>
     <p>
    Premier paragraphe
   </p>

  </body>
</html>

Pour que le navigateur sache que le codage est du type HTML et qu’il doit traduire ce langage il y a
<html> ….. </html> ——- tout ce qui est a l’intérieur des deux balises est du langage HTML
En première ligne <!DOCTYPE html> indique que c’est le langage HTML est la version 5 ( HTML5)

<head></head> —— c’est une partie codage qui ne sera pas visible dans le navigateur de l’internaute
Les balise <title></title> n’affiche pas un titre dans la page web mais sur l’onglet du navigateur web.

<body> …. </body> —– tout ce qui est a l’intérieur de ces balises s’affichera dans la page web.

 
c ) Les balises ouvrantes et fermantes et les balises orphelines

La plupart des balises ont une partie ouvrante et fermante, exemple ci-dessous avec la balise paragraphe

balise-paragraphe

Certaines balises n’ont pas de partie fermante car elles décrivent un endroit précis, pas une zone
par exemple, l’endroit ou placer une image, ou faire un retour à la ligne

Les balises qui ne se ferment pas s’appellent des balises orphelines

balise-aller-a-la-ligne

d ) Les attributs des balises

Pour certaines balises il est nécessaire d’ajouter des précisions à l’intérieur de la balise.
On ne peut pas décrire « mettre un lien » il faut décrire vers quelle adresse va aller le lien ?
On ne peut pas décrire « mettre une image » if faut décrire quelle image ? éventuellement avec quelle taille elle va s’afficher ?

attribut-anchor

La précision s’appelle un « Attribut« 

Pour cette balise anchor <a></a> qui sert à faire des liens, c’est l’attribut href (« hypertexte reference« ) qui va indiquer précisément vers quelle adresse faire le lien.

 

balise-image

Pour cette balise image <IMG> qui est une balise orpheline
c’est l’attribut :
src (« source« ) qui va indiquez de quelle image il s’agit
alt (« alternative« ) qui va proposer un texte décrivant l’image si celle ci n’est plus présente ou si la page est lut par un logiciel pour les aveugles.

 

II ) Premier exercice

Vous allez créer un document Web avec les langages HTML et CSS, ce document sera une recette de dessert simple.

1er étape : aller à la ligne et séparer le texte en paragraphes

Écrivez votre Nom puis allez à la ligne.
Ensuite écrivez votre prénom.
Puis mettez une balise pour indiquer que l’ensemble des deux lignes Nom et prénom doit être considéré comme un paragraphe.
Écrivez ensuite le titre de votre recette

 

Vous pouvez remarquer maintenant des lignes supplémentaires dans le code HTML

La ligne <html lang= »fr »> permet d’avoir une page web plus accessible pour les personnes non voyante.
préciser la langue de la page permettra ainsi au logiciel de synthèses vocales d’adopter le bon accent.

La ligne ci-dessous précise que les caractères seront codés avec une table de codage « utf-8 »
Ceci va permettre d’afficher les accents.

Ceci vous évitera des erreurs d’encodage, regarder la vidéo ci-dessous pour comprendre l’encodage des caractères.

Cette vidéo est un extrait d’une vidéo de la chaîne Youtube Grafikart
La chaine Youtube Grafikart propose une playlist de 16 vidéos pour apprendre le langage HTML, et d’autres vidéos pour apprendre d’autre langages du web. Je vous recommande également les vidéos qui expliquent comment mettre les pages Web dans un serveur.
Blog Grafikart : https://www.grafikart.fr/

 

III ) Imbriquer des balises HTML les une à l’intérieur des autres

poupees-russes

Si on veux par exemple que :

Un lien soit à intérieur d’une phrase soulignée qui elle même est à l’intérieur d’un paragraphe en gras.

Le principe c’est celui des poupées russes.
On ferme d’abord les petites poupées avant de les rentrer dans une plus grosse …

Regardez le dessin ci-dessous pour savoir comment imbriquer les balises.

 

imbrication-pere-enfant

a ) Un exemple de balises imbriqués, les listes

les-listes

liste-2

 

<ul> …. </ul> indique le début de la liste
et a l’intérieur <li> … </li> indique les éléments de la liste

On peut avoir une liste de textes ou une liste de liens hypertextes ou une liste d’images …
Dans ce cas on a encore d’autres balises imbriquées comme dans l’exemple ci-dessous ou les balises hypertextes <a href= » … « > … </a> sont imbriquées dans les balises <li> …. </li>

liste-3

Lorsque les listes avec liens hypertextes sont associés à des styles de présentation CSS on obtient des menus comme dans l’exemple ci-dessus.

b ) Si vous voulez savourez le dessert ne perdez pas de temps, il est temps de continuer la recette.

Vous allez créer un paragraphe ingrédients.
Dans ce paragraphe, il y aura le titre du paragraphe « Ingrédients : »
<aller à la ligne>puis<aller de nouveau à la ligne>
Une liste des ingrédients de votre recette.

Conclusion : vous devez remarquer que le fait de créer un paragraphe fait aller automatiquement le texte suivant à la ligne et intercale une ligne. Par contre à l’intérieur d’un paragraphe si on veut aller à la ligne et sauter une ligne il faut écrire 2 fois la balise orpheline <br>

IV ) Donner du sens au texte ( Les balises sémantiques )

Le web n’est pas seulement vu par les humains.
Vos pages web doivent être comprises des machines comme
– Les moteurs de recherche (exemple google ) qui va se connecter automatiquement a tous les sites web et les analyser pour les classer.
– Le logiciel d’un aveugle qui va utiliser les balises pour lire une page, va par exemple énoncer les titres plus ou moins fort ou sur un ton différent selon la balise. Donner une indication quand une portion de texte est balisée comme importante.

Tout comme le langage humain est composé d’une syntaxe ( les règles de grammaire ) et d’une sémantique ( son sens )
Le langage HTML à une syntaxe ( règles d’écriture ) et une sémantique ( la signification que les balises donne au texte )

a ) L’importance des titres

titres-h1

Les balises <h1> <h2>  <h3> <h4> <h5> <h6> viennent du mot « heading » en anglais qui signifie titre

Ces balises indiquent que le texte est un titre et le numéro donne l’importance de ce titre.

 

 

b ) Donner une signification au texte

Voici quelques une des balises sémantiques les plus utilisées (la liste n’est pas complète)

  • Donner de l’importance au contenu avec les balises <strong> ….. </strong >
  • Souligner un texte avec la balise <u>
  • Marquer du contenu pour attirer l’attention avec les balises <mark> ….. </mark>
  • Insister sur le contenu ou le mettre en évidence (en italique) avec les balise emphase <em>….. </em>
  • Indiquer que le texte a été supprimé, que c’était une erreur  avec la balise <s> …. </s>
  • Indiquer que le texte est moins important avec les balises <small> …. </small>  pour écrire par exemple un © copyright
  • Indiquer que un ou des chiffres sont en exposant  avec les balises <sup></sup>  pour écrire par exemple une formule mathématique E=mc2
  • Indiquer que un ou des chiffres sont  en indice  avec les balises <sub>….<sub> pour écrire par exemple la formule de l’eau H2o
c ) Indiquez ce qui est important dans la recette

Ce qui est le plus important c’est le titre de la recette dont entourez le titre avec la balise H1

Les titres de paragraphes sont de moindre importance vous pouvez leur mettre une balise H3

Après le paragraphe « les ingrédients » vous allez ajouter un second paragraphe « préparation« 
Dans ce paragraphe il faudra donner de l’importance, souligner ou marquer certains mots ou certaines phrases importantes pour réussir la recette.

 

V ) Gestion des espaces dans le langage HTML

Il n’existe pas en HTML d’éléments permettant de gérer les espaces. Cependant, il est possible d’utiliser les balises <pre> ….. </pre> qui servent à pré-formater un texte.
Le texte écrit à l’intérieur des balises <pre>  </pre>  va conserver la mise en forme que nous allons lui donner.

Par exemple

            

Imaginez que votre recette à beaucoup de succès, vous pouvez ouvrir un restaurant et gagner de l’argent.
Vous allez ajouter une signature ASCII en bas de votre page Web la même signature ASCII que celle que vous mettez à la fin de vos mail.

Regardez l’exemple ci-dessous et remplacez le par votre signature que vous pourrez faire en allant sur le site
http://www.desmoulins.fr/index.php?pg=scripts!online!boxes

 

 

VI ) Ajouter une photo et un lien hypertexte

 

Ajoutez une photo de votre recette entre le titre et les ingrédients

Ajoutez un lien hypertexte vers le site web du restaurant.

 

VIII ) Ajouter du contenu Youtube

Le web que vous utilisez actuellement est nommé le Web 2.0, celui qu’utilisait vos parents avant les années 2000 était un web différent
Regarder la vidéo ci-dessous pour comprendre les différences.

Cette vidéo provient de la chaîne Youtube Ionisx https://www.youtube.com/user/IONISx/videos
Ionisx est une entreprise privé qui propose des formations via l’internet 2.0

Il y a une chose que beaucoup de personnes oublient quand elles parlent du Web 2.0 c’est la possibilité pour l’utilisateur de faire de l’intégration de contenu.

C’est ce que vous allez faire maintenant en intégrant une vidéo Youtube à l’intérieur de votre page Web.
Bien entendu si ce n’est pas une vidéo de vous même expliquant comment faire la recette postée sur votre chaine Youtube, il faudra en dessous de la vidéo citer la provenance de la vidéo.

1 ) Vous allez ajoutez un nouveau paragraphe , et donner comme titre à ce paragraphe « La recette en vidéo« 
2 ) Ajoutez la vidéo venant de Youtube  en dessous du titre de paragraphe en intercalant une ligne vide
3 ) Éventuellement ajoutez une ligne immédiatement après la vidéo pour en indiquer la provenance.

Comment intégrer le code d’une vidéo Youtube à l’intérieur d’une page HTML ?

Il faut cliquer sur le bouton « partager » ( 1 ) puis choisir « intégrer » ( 2 ) et enfin copier le code dans la fenêtre de droite ( 3 )

Si vous souhaitez activer le mode confidentialité avancé, activez l’option ( 4 )
Alors dans le code à copier « https://www.youtube.com » sera remplacé par « https://www.youtube-nocookie.com »

 

VIII ) Joindre une présentation à la structure et au sens

STRUCTURATION-HTML-CSS

La présentation d’une page web est assurée par le langage CSS
L’ensemble des présentations forme un style.

La structure du langage HTML c’est le squelette d’une page Web c’est à dire l’essentiel.
Mais ce n’est pas très attrayant un squelette.

Pour que la page web puisse savoir ou trouver un style, il faut que cela soit indiqué entre les balises <HEAD> ….. <HEAD>

 

 

 

 

Il est temps d’ajouter un peu de couleur a la page de recette.

Pour cela il va falloir ajouter un fichier de style pour la présentation.
Donnez un nom pour ce fichier de style cohérent par rapport à ce qui est indiqué dans la tête du fichier HTML

Ajoutez dans ce fichier de style le code ci-contre pour rendre tout le texte de la page bleu :

Votre navigateur connais plein de couleurs comme blue, yellow (jaune) et même lightgreen (vert clair), mais savez vous que le navigateur connais en faite les noms de 500 couleurs différentes ?

Il existe une liste de toutes les couleurs que vous pouvez utiliser à l’adresse https://htmlcolorcodes.com/color-names/

Le navigateur connais énormément de couleurs, mais en faite il connais les valeurs de couleurs de plus de 16 millions de couleurs!

Peut être le savez vous, mais toutes les couleurs sont fabriqués a partir de trois couleurs primaire: rouge, vert et bleu.
Pour indiquer au navigateur quelle couleur afficher, il y a aussi la solution de définir la quantité de chaque couleurs primaires

La quantité de rouge, vert et bleu peuvent s’écrirent en chiffres compris entre 0 et 255.

Par exemple le code   background: rgb(250,250,210);    affiche une couleur jaune léger pour l’arrière plan de toute la page.

 

 

 

a ) Indiquer quels éléments de structure HTML vont être concernés par le style

Dans le langage CSS, c’est le rôle des sélecteurs

regle-css-1

Dans la déclaration d’une règle de style CSS on peut avoir une propriété avec plusieurs valeurs.
Comme par exemple celui ci-dessous :
span encadrement
La bordure a comme valeurs : 1 pixel, ligne continu de couleur rouge

Le sélecteur peut être le nom d’une balise HTML

regle-css-2Dans le cas ci-contre, tous les titres h1 des pages HTML seront de couleur bleu avec une taille de police de 12px.

Cette fois ci dans la règle ont à 2 propriétés qui ont chacune une valeur.

Le sélecteur peut être une partie des balises HTML

TITRE-VERT

Pour cela il faut ajouter à l’intérieur de la balise HTML un attribut class dont le nom correspond à la class dans le fichier de style CSS
Dans cet exemple seuls les titres H1 ayant la class « titre vert » s’afficheront en vert

Le sélecteur peut désigner n’importe quelle partie de contenu de la page HTML même des morceaux de texte ou il n’y a pas de balise.

SPAN

On ajoute des balises <span> …. </span> dans la page HTML et des class span également dans le fichier de style CSS
Ces balises <span> sont des balises de présentation, elles ne contribuent pas à donner du sens, de la signification au texte de la page web.

VIII ) Les polices de caractères des pages web

a ) Les polices génériques

Polices-generiques

Certains ordinateurs, téléphones, tablettes n’ont pas le même nombre de polices disponibles.  Si vous préparez un site web avec des polices exotiques il se peut que certaines parties ne s’affichent pas ou que le design soit totalement changé pour certaines personnes.

Les polices des familles génériques du tableau ci-dessus sont des valeurs sûres, elles sont disponibles partout.

b ) Choix autre que police d’une famille générique

Police de caractère en anglais se dit « font »

plusieurs-choix-police

Si vous choisissez une autre police qui n’est pas dans la liste des polices génériques vous pouvez utiliser la propriété font-family
Si la police de votre choix 1 n’est pas disponible sur l’appareil de l’utilisateur c’est le choix suivant qui est affiché et si aucun ne peut être affiché et bien ce sera finalement une police générique.
Par rapport à l’image de la question précédente vous pouvez mettre en choix 1, choix2 et choix3   « Myriad pro« , « Impact« , Tajoma« ,
Mais n’oubliez pas de mettre à la fin de la liste une police générique entourée en vert sur la photo.

c ) les familles génériques

serif-san-serif

Lorsque vous choisissez une charte graphique pour un site web, ce n’est pas seulement un choix de couleurs mais aussi de polices de caractères.

Il y a des critères d’esthétisme mais aussi de visibilité, avant de choisir une police précise vous décidez la famille de police :
– police avec empattement ( famille de police Serif )
– police sans empattement ( famille de police Sans-serif )
– police Monospace ( donne l’impression que l’écriture est réalisée mécaniquement )
– police cursive ( donne l’impression que le passage du texte provient de la main d’un humain )
Il conviens donc dans les choix de polices de font-family de rester dans la même famille.
dernier-choix-police
Dans l’exemple ci-contre si les deux premiers choix qui sont sans-serif ne s’affichent pas et bien c’est n’importe quelle police sans-serif disponible qui sera affichée.

d ) Les polices exotiques qui s’affichent à partir de bibliothèques en ligne

Si vous voulez une police exotique qui ne sera probablement pas dans les ordinateurs des visiteurs.
Il y a la solution que la page HTML aille chercher cette police sur un serveur internet qui met à disposition ses polices.

Il y a plusieurs bibliothèques en ligne et la plus connue est celle de Google dont voici l’adresse https://fonts.google.com/

Voici un article qui explique comment utiliser ces polices  https://developers.google.com/fonts/docs/getting_started

C’est en anglais comme beaucoup d’articles, de blog, textes qui abordent les nouvelles technologies
Essayez de comprendre d’abord les explications en Anglais, si certaines choses vous échappent vous avez la possibilité d’utiliser le navigateur Google Chrome et sa petite icône de traduction automatique.
Traduction
Voici tout de même ci-dessous quelques explications visuelles

FONT-GOOGLE

 

la-belle-ecriture-html-css

Il faudra dans cet exemple dans la partie <head> …. </head> de la page HTML ajouter un lien vers l’emplacement de la police sur le serveur google.  C’est juste un copier coller à effectuer.

Dans la partie CSS c’est indiqué d’utiliser la police Tangerine pour l’ensemble de la zone body du document HTML.
Cependant si vous choisissez une police exotique c’est probablement pour des parties spéciales particulières du document.
Dans ce cas il est préférable dans la règle CSS d’utiliser une classe span et dans le document HTML délimiter une zone avec les balises <span><span> comme cela a été vu dans le chapitre précédent.

 

 

 

 

La suite ici : https://codeclub.ca/fr/resourcesWebPages/intro_to_css_html.html

https://projects.codeclubworld.org/fr-FR/05_html_01/04/Recette%20de%20cuisine.html

Imprimer