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

par | Oct 17, 2017 | Langages du web

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> …………………… </H>
– 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

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 ) Une 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.

 

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

 

VI ) 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

            HTML : le HTML est un langage utilisé pour marquer
                   sémantiquement un contenu.

            CSS : le CSS sert à mettre en forme des éléments en
                   leur appliquant des styles.

 

VII ) 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>

 

 

 

 

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.

 

 

 

 

Imprimer