Pendant les séances nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets). Elles sera découpé en trois activités successive réparti sur trois séances de 1h30.
Première activité : Le HTML
Premier pas en HTML
Dans cette activité, nous allons exclusivement nous intéresser au HTML.
Qu’est-ce que le HTML ?
Voici la définition que nous en donne Wikipedia :
L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
Pour l’instant, nous allons retenir deux éléments de cette définition « conçu pour représenter les pages web » et « un langage de balisage ».
Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, ou autre affiliation), afficher du texte, afficher des images, proposer des hyperliens (liens vers d’autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l’HTML5).
HTML n’est pas un langage de programmation (comme le JavaScript par exemple), donc pas question de conditions ou de boucles, c’est un langage de description.
La balise image
Comme vous devez déjà vous en douter, la balise image sert à insérer des……images :
<img src= »mon_image.jpg » alt= »description de l’image »/>
La balise img est à la fois ouvrante et fermante comme la balise et elle possède 2 attributs :
➢ src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier).
➢ alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisés par les non-voyants), il faut donc systématiquement renseigner cet attribut.
Deuxième activité : Le CSS
Premier pas en CSS
Le HTML n’a pas été conçu pour gérer la mise en page (c’est possible, cela rapidement devenir long et fastidieux à réaliser, c’est donc une mauvaise pratique). Le HTML s’occupe uniquement du contenu et de la sémantique (voir activité précédente), pour tout ce qui concerne la mise en page et l’aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).
La ligne <link rel= »stylesheet » href= »monStyle.css »> indique quel fichier de style CSS il faut appliquer à cette page.
Il est possible de cibler un paragraphe et pas un autre en utilisant l’id du paragraphe (en CSS l’id se traduisant par le signe #).
Il est possible d’utiliser l’attribut class à la place de l’id.
Dans le CSS on utilisera le point . à la place du #.
L’attribut « class » permet de donner le même nom à plusieurs reprises dans une même page.
Quelques normes à respecter
En informatique, pour que tous les appareils et logiciels se comprennent il est très important de respecter quelques normes.
Le code se trouvant entre les balises <body> … </body>. Tout votre code HTML devra toujours se trouver entre ces 2 balises <body> code here ! </body>.
Les autres balises sont encore inconnues. Passons-les en revue :
➢ La première ligne (< !doctype html>) permet d’indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.
➢ La balise <html> est obligatoire, l’attribut lang= »fr » permet d’indiquer au navigateur que nous utiliserons le français pour écrire notre page.
➢ Les balises <head> … </head> délimitent ce que l’on appelle l’en-tête.
L’en-tête contient, dans notre exemple, 2 balises :
➢ la balise <meta charset= »utf-8 »> qui permet de définir l’encodage des caractères (utf8) et
➢ la balise <title> qui définit le titre de la page (attention ce titre ne s’affiche pas dans le navigateur, ne pas confondre avec la balise <h1> !).
Troisième activité : HTML Avancée + CSS
L’Hyperlien
Nous avons vu les bases de la mise en page avec le couple HTML/CSS et il nous manque juste quelques connaissances pour faire des sites web évolués comme ceux que nous voyons quotidiennement.
Commençons par ajouter des liens hypertext qui permettent de passer d’une page à l’autre lors de la navigation.
<a href= »fichier_a_lancer.html »>texte à afficher pour cliquer dessus</a>
<a href= »url »>texte à afficher pour cliquer dessus</a>
Les formulaires
Les formulaires sont des éléments importants des sites internet, ils permettent à l’utilisateur de transmettre des informations. Un formulaire devra être délimité par une balise form (même si ce n’est pas une obligation) :
<form> … </form>
Il existe différentes balises permettant de construire un formulaire, notamment la balise input. Cette balise possède un attribut type qui lui permet de jouer des rôles très différents. La balise button nous sera aussi d’une grande utilité.
Les balises div et span
Ces 2 balises sont très utilisées (surtout la balise div car elle permet des mises en page moderne). Elles n’ont aucune signification particulière, ce sont des balises dites “génériques”. Elles servent à organiser la page, à regrouper plusieurs balises dans une même entité.
La balise div est une balise de type “block” alors que span est une balise de type “inline”.
Sans vouloir trop entrer dans les détails, Il faut bien comprendre que l’ordre des balises dans le code HTML a une grande importance. Les balises sont affichées les unes après les autres, on parle du flux normal de la page.
C’est ici qu’entrent en jeu les balises de type « block » et les balises de type « inline ».
➢ Les contenus des balises de type « block » (p, div,h1,…) se placent les uns en dessous des autres.
➢ Les contenus des balises de type « inline » (strong, img, span, a) se placent les uns à côté des autres.
Cela revient à dire qu’une balise de type “block” prend toute la largeur de la page alors qu’une balise de type “inline” prend juste la largeur qui lui est nécessaire.
Quatrième activité : Javascript
A venir prochainement