Initiation HTML-CSS

Cours issu de : http://fsincere.free.fr/

Préambule

Le HTML (Hypertext Markup Language) est un langage de balisage qui sert à représenter les pages Web (WWW : World Wide Web).

Le HTML donne la structure d'une page Web.

Le HTML est généralement associé avec :

des feuilles de style CSS (Cascading Style Sheets) pour la mise en page (la présentation, le design)
des scripts en langage JavaScript pour obtenir un comportement dynamique

Les langages HTML et CSS font partie des langages de description (contrairement à Python, C++, ou JavaScript qui sont des langages de programmation).

Versions

Dans la suite de ce cours, nous utiliserons la version HTML5.

Les langages HTML et XHTML sont largement compatibles, XHTML possédant une syntaxe plus rigoureuse.

Notez que la version actuellement la plus utilisée est HTML5.

Question 1 ☆

Recherchez sur le Web :

– De quand date le HTML et plus globalement le Web ?

– Qui en est le principal inventeur ?

Les outils pour coder en langage HTML

Le code d'une page HTML est stocké dans un fichier texte avec l'extension .htm ou .html

Un éditeur de texte est donc nécessaire pour écrire le code source :

sous Windows, on pourra se servir d'un éditeur avec coloration syntaxique comme l'excellent NotePad++ (logiciel libre et gratuit téléchargeable ici).
sous Linux : GEdit ou Geany (la page que vous êtes en train de lire a été conçue avec Geany)...

Pour interpréter le code HTML, il faut simplement un navigateur Web (c'est-à-dire un client HTTP HyperText Transfer Protocol).

Je vous propose Firefox (logiciel multiplateforme, libre et gratuit) car il possède par défaut des outils de développement Web très pratiques (sans parler des modules complémentaires tel que Firebug).

Squelette d'une page HTML5

La langage HTML manipule des balises (markup) :

<!DOCTYPE html>

<html>

    <head>

        <!-- en-tête de la page -->

        <!-- encodage des caractères -->

        <meta charset="UTF-8">

        <title>Titre de la page web</title>

    </head>

    <body>

        <!-- corps de la page -->

    </body>

</html>

Commentaires

Le doctype indique au navigateur la version HTML utilisée par la page (ici HTML5).

L'en-tête (élément <head>) donne l'encodage des caractères (ici UTF-8).

La structure de la page est contenue dans l'élément <body> : pour l'instant la page est vide.

Question 2 ☆ Quel est le doctype d'une page en XHTML 1.0 Strict ?

Question 3 ☆ Quels sont la version HTML et l'encodage des caractères de la page Web actuelle, située à l'adresse Web (ou URL Uniform Resource Locator) :

http://fsincere.free.fr/isn/html/cours_html.php ?

Remarque : avec le navigateur Firefox, pour accéder :

au code source : Menu → Développement → Code source de la page (ou CTRL + U)
aux informations sur la page : Clic droit → Informations sur la page (ou CTRL + I)

Ma première page Web

<!DOCTYPE html>

<html>

    <head>

        <!-- en-tête de la page -->

        <meta charset="UTF-8">

        <title>Ma première page web en HTML5</title>

    </head>

    <body>

        <!-- corps de la page -->

        <p>Bonjour à tous !</p>

    </body>

</html>

Question 4 ☆

Dans un éditeur de texte, copier-coller le code ci-dessus et enregistrez-le dans le fichier premierepageweb.html

Ouvrir la page avec votre navigateur.

Le rendu de la page est-il correct ? (normalement non, vous devriez voir : Bonjour � tous !)

Quelle grosse erreur faut-il corriger ?

Quelques règles de syntaxe

Toute balise ouverte doit être refermée :

contenu de la balise

est la balise ouvrante, est la balise fermante.

Certaines balises sont vides (elles n'ont pas de contenu), la fermeture se fait alors immédiatement :

La valeur des attributs doit être entourée de guillemets ou d'apostrophes :

<a href="http://fr.wikipedia.org">Un lien hypertexte vers le site de Wikipédia</a>

Les balises doivent être correctement imbriquées :

Cette syntaxe est bonne

~~Cette syntaxe est mauvaise~~

Eléments de type bloc et de type en-ligne (inline)

Eléments de type bloc

Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.

Exemples : <h1>, , <ul>, <table>, <hr>, <pre>, <form> ...

Le code suivant affichera deux paragraphes, l'un en dessous de l'autre :

Premier paragraphe.Deuxième paragraphe.

Eléments de type inline

Les éléments de type inline se placent normalement l'un à côté de l'autre (pas de saut de ligne).

Exemples : , , <a>, <img>, , ...

Propriétés

Les éléments de type bloc peuvent contenir des éléments de type bloc ou de type inline.

Exceptions : les paragraphes et les titres <h1> ... ne peuvent contenir que des éléments inline.

Donc pas de titres dans un paragraphe, pas de paragraphes dans un paragraphe !

Exemple : un élément bloc (paragraphe) qui contient un élément inline :

Ceci est important

Les éléments inline ne peuvent contenir que des éléments inline.

Exemple : un élément inline <a> (lien hypertexte) qui contient un élément inline :

<a href="http://fr.wikipedia.org">Un lien hypertexte vers le site de Wikipédia</a>

Un outil de vérification de la syntaxe

Pour vérifier que votre page Web est conforme aux spécifications HTML5, rendez-vous sur le site du W3C (World Wide Web Consortium) : http://validator.w3.org

Pour une page Web locale (pas encore publiée sur le Web) :

Validate by File Upload → Check

S'il y a des erreurs, elles vous seront indiquées, avec des explications (en anglais, of course).

Conseil : vérifier et corriger systématiquement vos pages Web avec cet outil.

C'est contraignant au début, mais cela vous fera prendre rapidement de bonnes habitudes.

Question 5 ☆

Votre page premierepageweb.html est-elle valide ?

Une deuxième page Web

Vous trouverez ici une page Web qui contient les balises les plus courantes.

Travail à réaliser

Etudier le code source de cette page.

Vous pouvez enregistrer la page sur votre bureau, puis l'ouvrir et la modifier avec un éditeur de texte.

Vous pouvez également examiner la page avec un des outils de Firefox : Menu → Développement → Inspecteur

En synthèse, compléter le tableau (à télécharger ici) :

Mise en page avec les feuilles de style CSS

Les règles de style CSS permettent de personnaliser les couleurs, de définir les polices de caractères, de positionner les éléments les uns par rapport aux autres, etc.

Insertion des styles dans les balises HTML

On peut incorporer les styles CSS directement dans les balises HTML avec l'attribut style.

Cette technique est simple mais peu pratique.

Exemple :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Une page web en HTML5</title>

    </head>

    <body style="background-

color: beige; font-family: 'Times New Roman';">

        <h2 style="text-

align: center; color: brown;">Les feuilles de style CSS</h2>

        <p style="margin-left: 100px;">Bonjour

à tous !<br>

        Ceci est un exemple d'utilisation des feuilles de style <span style="color: blue; font-weight: bold;">CSS</span> (Cascade Style Sheet).</p>

    </body>

</html>

Voir le résultat

Note : est un élément inline générique.

Il existe aussi un élément bloc générique : <div>

Lier des styles à partir d'une feuille séparée

C'est la technique la plus efficace, celle que l'on rencontre dans la plupart des sites Web.

Reprenons l'exemple précédent :

– Code HTML :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Une page web en HTML5</title>

        <link rel="stylesheet" type="text/css"

href="style.css">

    </head>

    <body>

        <h2>Les feuilles de style CSS</h2>

        <p>Bonjour à tous !<br>

        Ceci est un exemple d'utilisation des feuilles de style <span class="important">CSS</span> (Cascade Style Sheet).</p>

    </body>

</html>

Notes :

L'élément <link> fait le lien avec la feuille de style CSS (ici le fichier externe style.css)

L'attribut class de l'élément permet d'utiliser des règles CSS personnalisées.

– Code CSS :

La feuille de style se trouve dans le fichier style.css

La syntaxe du langage CSS est très simple à comprendre :

body {

background-color: beige;

font-family: 'Times New Roman';

h2 {

text-align: center;

color: brown;

p {

margin-left: 100px;

/* classe */

.important {

color: blue;

font-weight: bold;

Voir le résultat

Travail à réaliser

Modifier la feuille de style style.css de manière à afficher :

le titre en italique avec la police Arial
les paragraphes avec une couleur de fond jaune

On s'aidera des outils que propose Firefox :

Menu → Développement → Editeur de styles (ou MAJ + F7)

Vous validerez votre code CSS en vous rendant sur le site du W3C :

http://jigsaw.w3.org/css-validator

Google Sites

Report abuse

Initiation HTML-CSS

Propriétaire du site : Didier MATHONAT