Cours // 14 / les bases du HTML
- Travail du jour : Analyse et lecture de documents
- Durée : 3h — Séance n°1 { 3h
- Absent : Chamontin, Gilardot Retard : Rousset (2h)
Le Web a été inventé au début des années 1990. Il permet d’accéder à des données partagées en réseau à l’aide d’un navigateur. Pour créer un site web, il existe deux principales méthodes : l’utilisation d’un CMS (système de gestion des contenus) type Joomla, Wordpress ou Blogger ou la programmation de codes.
- HTML (Hyper-Texte Markup Language) : permet d'écrire et organiser le contenude la page (paragraphes, titres, images, vidéos, animations…) ;
- CSS (Cascading Style sheets ou feuille de style): permet de mettre en formela page et les textes (couleur, taille…).
1_ Les Balises HTML
Le contenu d’une page internet est composé d’une série de balises. Celles-ci sont invisibles à l'écran, mais permettent à l'ordinateur de comprendre ce qu'il doit afficher. On les repère facilement car elles sont entourées de chevrons. Les balises indiquent la nature de ce qu'elles encadrent : « Ceci est le titre de la page », « Ceci est une image », etc. Les balises peuvent avoir deux formes :
· Balise en paire :elles s'ouvrent et se ferment pour délimiter un contenu (exemple un paragraphe, un bloc ou une page)
· Balise orphelineAttention : Une balise en paire non fermée provoquera une erreur d’affichage. De plus, comme pour des parenthèses, il faut veiller à l’ordre des balises.elles permettent d'insérer un élément à un endroit précis (exemple saut de ligne).
Pour créer une page HTML type, il faut rédiger quelques lignes obligatoires :
< ! DOCTYPE html >_________ lue en premier, elle indique que le fichier HTML
< meta charset="utf-8" />_______ indique l’encodage et la norme utilisés
< html >, < head >et< body > ___ balises de la page, de l’en-tête (masqué) et du corps (partie visible)
Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires comme une couleur, une dimension, une position, un lien, etc.
< a href="http://m-daveiga.blogspot.fr/IMG.JPG" img border="0" src="https:// m-daveiga.blogspot.fr/IMG.JPG" height="480" width="640" />
Ce code indique que la photo IMG.JPG situé dans mon blog s’affichera sans bordure avec une taille de 640x480 pixels.
2_ Le CSS
Bien que l’on puisse définir et forcer le style d’une balise avec les attributs, il est conseillé de traiter la mise en forme via un fichier CSS (feuille de style). Ainsi, le code CSS va gérer l’apparence du site et les styles de son contenu sans l’affecter. Pour attribuer une feuille de style à une page HTML, il faut :- Associer le fichier HTML à une feuille de style CSS en rédigeant un code dans la balise de l’en-tête du fichier HTML : < link rel="stylesheet" href="style.css" / >
- Ecrire le code CSS de mise en forme dans un fichier style.css et le placer dans le même dossier que le fichier HTML.
En CSS, on indique les éléments de la page HTML que l’on veut mettre en forme puis on définit la propriété et la valeur à attribuer comme suit :
balise1___________________ nom de la balise (p, h1, autre)
{
propriete1: valeur1;____ mise en forme n°1 (ex définir une couleur)
propriete2: valeur2;____ mise en forme n°2 (ex définir une position)
}
Il existe de nombreuses façons de sélectionner l’élément que l'on veut mettre en forme. Par exemple, on peut viser :
- toutes les balises d'un même type, en écrivant simplement leur nom (h1, p) ;
- certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id (.nomclasse ou #nomid ).
