Web - Introduction au HTML et au CSS 1

(1)

Web - Introduction au HTML et au CSS

¹

<blockquote>

<p><i>La vie est un mystère qu’il faut vivre, et non un problème à résoudre.</i></p>

<footer>Mahatma Gandhi</footer>

</blockquote>

I. Définition

L’HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web. Ce n'est donc pas un langage de programmation comme python par exemple. Il permet d’écrire de l’hypertexte, d’où son nom. HTML sert à indiquer au navigateur comment structurer les pages web visitées, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).

II. L'élément

Un élément HTML peut être soit constitué d'une paire de balises et d'un contenu, soit (plus rarement) d'une balise unique qu'on dit alors orpheline. Par exemple pour créer un paragraphe, il faudra envelopper de l'élément paragraphe (Figure 1).

Figure 1. Anatomie d'un élément HTML.

Travail à faire

1. Premier code HTML.

 Aller sur le site www.w3schools.com, cliquer sur « Try it Yourself ».

 Écriver le code HTML suivant^:

1 pixees.fr et developer.mozilla.org

(2)

SNT 2 Web

<h1>Hello World ! Ceci est un titre.</h1>

<p>Ceci est un <strong>paragraphe</strong>.</p>

 Appuyer sur « Run » pour voir le résultat.

Des éléments peuvent être à l'intérieur d'autres éléments : cela s'appelle l'imbrication. Dans l'exemple précédent, le mot paragraphe est en gras. Il faut faire très attention que les éléments soient correctement imbriqués.

Il est important de comprendre que chaque élément a une signification qu'il faut bien respecter (on parle de la sémantique). Par exemple le texte situé entre la balise ouvrante <h1> et fermante </h1> est obligatoirement un titre important. Il existe des éléments <h2>, <h3>, ... qui sont aussi des titres, mais des titres moins importants (sous-titre). La balise <p> permet de définir des paragraphes, enfin, la balise <strong>

permet de mettre en évidence un élément important.

III. L'Attribut

Les éléments peuvent aussi avoir des attributs, Ils sont ajoutés à la balise ouvrante (Figure 2).

Figure 2. Attribut.

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier. Il existe un autre attribut important à connaître c'est Id (pour Identifiant).

Autre exemple élément est <a>, Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il permet de créer des liens hypertextes. Il peut recevoir un certain nombre d'attributs, mais voici les principaux :

 href : cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple,

« href="http://lycee.mmtek.fr ».

 target : cet attribut définit le contexte de navigation utilisé pour afficher le lien. Par exemple, target="_blank" affichera le lien dans un nouvel onglet. Si cet attribut est omit, le lien sera affiché dans l'onglet courant.

 title : l'attribut title apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, title="Bibliothéque Lycée", qui apparaîtra comme une info- bulle lorsque le curseur passera sur le lien.

Travail à faire 2. L'attribut.

 Aller sur le site www.w3schools.com.

 Taper la phrase : « Cliquez ici pour vous rendre sur mon autre page ».

 Modifier la ligne ci-dessus pour la transformer en lien vers un site web (à choisir). Tout d'abord, ajouter l'élément <a>, puis l'attribut href, puis l'attribut title.

(3)

SNT 2 Web

IV. La page HTML

Pour créer une page HTML, il faut imbriquer un certain nombre d'éléments basiques.

<!doctype html>

<head>

<title>Ma première page</title>

</head>

<body>

<h1>Hello World! Ceci est un titre</h1>

</body>

</html>

1. <!DOCTYPE html> : le type de document.

Dans les années 1990, les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML Cependant, de nos jours, personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide.

2. <html></html> : l'élément <html>.

Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.

l'attribut lang="fr" permet d'indiquer que le français est utilisé pour écrire la page.

3. <head></head> : l'élément <head>.

Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Dans l'exemple, il contient :

 <meta charset="utf-8"> qui permet de définir l'encodage des caractères du document. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues.

 <title></title> qui définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.

4. <body></body> : l'élément <body>.

Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page.

Travail à faire 3. Une page Web.

 Ouvrer « notepad++ ».

 Vérifier l'« Encodage » du document (« UTF-8 ») et indiquer « HTML » pour le « Langage ».

 Taper le code le l'exemple ci-dessus.

 Enregistrer le fichier dans votre espace de travail sous le nom « index.html ».

 Dans votre espace de travail, « double-cliquer » sur le fichier « index.html ».

(4)

SNT 2 Web Bonne pratique : l’indentation.

Indenter correspond à créer des retraits en début de ligne de façon cohérente et logique. Contrairement à Python, il ne sont pas nécessaires. Indenter permet d’avoir un code plus propre et plus lisible, donc plus compréhensible. Indenter permet également de plus facilement détecter les erreurs potentielles dans un code.

V. Le CSS

CSS (Cascading Style Sheets) est utilisé pour styliser et composer des pages Web -par exemple, pour modifier la police, la couleur, la taille et l'espacement du contenu, le diviser en plusieurs colonnes ou ajouter des animations et d'autres éléments décoratifs.

A. Feuille de style interne

Une feuille de style est dite interne quand il n'y a pas de fichier CSS indépendant, mais que le CSS est placé dans un élément <style>, contenu dans l'en-tête du HTML.

<!doctype html>

<head>

<title>Ma première page</title>

<style>

h1 {

color: white;

background-color: blue;

border: 1px solid black;

} p {

color: red;

} </style>

</head>

<body>

<h1>Hello World! Ceci est un titre</h1>

</body>

</html>

Travail à faire 4. Le CSS interne.

 Ouvrer le fichier index.html créé dans le « Travail à faire 3 » avec Notepad++.

 Ajouter l'élément <style> à l'intérieur de l'élément <head>.

 Visualiser le résultat dans un navigateur.

(5)

SNT 2 Web

Cette manière de faire peut être intéressant dans certaines situations mais lors de la création d'un site Web, il est préférable d'utiliser la feuille de style externe pour ne pas avoir à réécrire le style pour chaque page.

B. Feuille de style externe

Une feuille de style est dite externe quand le CSS est écrit dans un fichier séparé avec une extension « .css » et que vous y faites référence à partir d'un élément HTML <link>.

Travail à faire 5. Le CSS externe.

 Créer un nouveau fichier « style.css » dans lequel est écrit le contenu de l'élément <style> du « Travail à faire 4 ».

 Dans le fichier « index.html » remplacer l'élément <style> par <link rel="stylesheet" href="style.css">.

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise, par exemple l'élément <link>. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis.

Remarque

Les styles en ligne sont des déclarations CSS qui ne portent que sur un élément uniquement ; ils sont contenus dans un attribut style : <p style="color:red;">. Par contre, cette façon de faire, même si elle fonctionne et à éviter. Les informations des CSS de présentation avec les informations structurelles du HTML sont mélangées, le CSS sera d'autant plus difficile à lire et comprendre et donc à modifier.

C. Vocabulaires

Figure 3. Règle CSS décomposée.

À leur niveau le plus bas, les CSS se fondent sur deux briques :

 les propriétés : identifiants lisibles par tous définissant la caractéristique stylistique (par ex., police de caractères, largeur, couleur de fond) à modifier.

 les valeurs : données à chaque propriété indiquée, elles définissent quelles modifications apporter aux caractéristiques stylistiques (par ex. , en quoi modifier la police, la largeur ou la couleur de fond).

Une propriété appariée à une valeur s'appelle une déclaration CSS. La propriété et la valeur dans chaque déclaration sont séparées par deux points « : ». Les déclarations CSS, séparées des autres par un point-virgule

« ; », sont placées dans des blocs de déclarations. Ils sont identifiés par une accolade ouvrante « { » au début

(6)

SNT 2 Web

du bloc et une fermante « } » en fin. Enfin, les blocs sont associés à des sélecteurs afin de créer des jeux de règles CSS (ou règles CSS). Un sélecteur est un motif qui établit une correspondance avec certains éléments (un élément) de la page. Les déclarations associées ne s'appliqueront qu'à ces éléments (cet élément).

D. Les sélecteurs

Le sélecteur de type, insensible à la casse dans son écriture, établit une correspondance entre le nom d' un élément HTML donné et le nom du sélecteur. C'est le moyen le plus simple pour cibler tous les éléments d'un type donné. Dans le « Travail à faire 5 » la déclaration « color: red; » est appliquée à tous les éléments <p> du document.

p {

color: red;

}

Le sélecteur de classe est composé d'un point « . », suivi d'un nom de classe. Un nom de classe est une valeur, sans espace, placée dans un attribut HTML class. Plusieurs éléments d'un document peuvent avoir la même valeur de classe et un seul élément peut avoir plusieurs noms de classe séparés par une espace.

Travail à faire

6. Le sélecteur de classe.

 Dans le fichier « index.html » ajouter (au bon endroit) le code :

<ul>

<li class="first done">Créez un document HTML</li>

<li class="second done">Créez une feuille de style CSS</li>

</ul>

 Dans le fichier « style.css » ajouter les lignes : .first {

font-weight: bold;

} .done {

text-decoration: line-through;

}

Le sélecteur d'identifiant est composé d'un croisillon (#), suivi du nom d'identifiant d'un élément donné. Tout élément peut posséder un nom d'identifiant, qui doit être unique, avec l'attribut id. C'est la façon la plus efficace de sélectionner un seul élément.

Travail à faire

7. Le sélecteur d'identifiant.

 Dans le fichier « index.html » ajouter (au bon endroit) le code :

<p id="polite"> — "Bonjour."</p>

<p id="rude"> — "Sortez !"</p>

 Dans le fichier « style.css » ajouter les lignes :

#polite {

(7)

SNT 2 Web font-family: cursive;

}

#rude {

font-family: monospace;

text-transform: uppercase;

}