Bases de HTML et de CSS

L’objectif de cette activité est de vous donner quelques notions sur :

  • HTML (pour HyperText Markup Language)

  • CSS (pour Cascading Style Sheet)

HTML est un langage de description (et non de programmation) qui sert à représenter les pages web à l’aide de balises (→ <body>…​</body>, <h1>…​<h1/>, .

Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques. Le HTML offre également la possibilité de créer des documents interopérables avec des équipements très variés et conformément aux exigences de l’accessibilité du web.

— Wikipedia
Hypertext Markup Language

CSS est un langage à bases de règles — utilisé conjointement avec HTML — pour mettre en forme le contenu des pages web (couleur du texte, taille et type de la police de caractères, placement des éléments…​).

Même s’il est possible de mêler HTML et CSS au sein d’un même fichier, ceci est fortement déconseillé : il vaut mieux les placer dans des fichiers distincts de façon à bien dissocier structure/contenu et présentation des pages web.

Ci-dessous un exemple basique de page web dont le contenu et l’aspect sont définis respectivement dans le fichier index.html et la feuille de style style.css:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"> (1)
    <title>Ma page web</title>
</head>
<body>
    <h1>Un titre de niveau 1</h1>
    <button class="btn" id="btn1">Premier bouton</button><br>
</body>
</html>
1 inclusion de la feuille de style CSS
style.css
.btn (1)
{
    height: 50px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    border: 20px;
    border-radius: 10px;
}
#btn1 (2)
{
    background-color: rgb(164, 152, 255);
}
#btn1:hover (3)
{
    background-color: rgb(68, 0, 169);
}
1 règle CSS qui s’applique aux éléments dont l’attribut class vaut btn
2 règle CSS qui s’applique aux éléments dont l’attribut id vaut btn1
3 règle CSS qui s’applique aux éléments dont l’attribut id vaut btn1 et qu’on survole avec la souris
first page

💻 Travail n° 1 Navigation entre pages

Le travail consiste à créer 2 pages web qui permettent de naviguer de l’une à l’autre.

Vous pouvez vous aider des ressources sur HTML fournies dans Webographie pour répondre aux questions.

Le code source demandé est à déposer sur Moodle (→ “Bases de HTML et de CSS  Travail01”) sous forme d’archive .zip avec le nom :
<NOM_DE_FAMILLE>-BasesHtmlCSS-Travail01.zip

🎯 Travail à faire :

  1. Créer 2 fichiers index.html et contact.html dans le répertoire racine de votre site web personnel (normalement : C:\Users\Documents\public_html si vous avez bien suivi ce qui était demandé dans l’activité précédente Mise en place de l’environnement de développement PHP)

  2. À l’intérieur de chaque fichier .html, créer un menu de navigation (→ balises <nav>…​</nav>) — dans une section <header>…​</header> du document — en utilisant une liste non ordonnée (→ balises <ul>…​</ul>) et des balises d’ancrage (→ balises <a>…​</a>) avec le nom de la page.

  3. Spécifier un titre de niveau 1 (→ balises <h1>…​</h1>) pour chaque page

  4. Chaque page doit contenir un ou plusieurs paragraphes de texte avec contenu arbitraire

    Vous pouvez utiliser le site Lorem ipsum link pour générer du texte arbitraire.

  5. La page de contact doit aussi contenir des images cliquables représentées dans un tableau (→ balise <table>…​</table>) renvoyant vers :

travail01 attendu
Exemple de résultat attendu

💻 Travail n° 2 Feuille de style

Le travail consiste à compléter la feuille de style d’un site web comportant 2 pages pour les mettre en forme conformément à ce qui suit :

N° page web Rendu sans CSS Rendu avec CSS

1
site accueil without style
site accueil with style

2
site contact without style
site contact with style

Le code source demandé est à déposer sur Moodle (→ “Bases de HTML et de CSS  Travail02”) sous forme d’archive .zip avec le nom :
<NOM_DE_FAMILLE>-BasesHtmlCSS-Travail02.zip

🎯 Travail à faire :

  1. Décompresser l’archive fournie zip dans le répertoire racine de votre site web personnel C:\Users\Documents\public_html

  2. Compléter la feuille de style ./css/style.css pour obtenir un rendu conforme à celui représenté dans le tableau ci-dessus.

    Consignes :

    • Vous utiliserez autant que possible le modèle de positionnement de type flex pour placer et dimensionner les éléments.
      (Voir les ressources sur Flexbox dans Webographie)

    • La barre de navigation sera définie à partir de la balise standard <nav>…​</nav> de HTML5

    • Vous pourrez vous appuyer sur les exemples suivants sur le site CodePen.io pour la mise en forme de la barre de navigation :

    • Pour les “boîtes” au centre des pages, vous pouvez vous inspirer de ce que propose le framework Bootstrap au travers de son composant nommé “Card”.
      Voir Cards link

      En utilisant l’inspecteur des outils de développement web de votre navigateur, vous pouvez avoir une idée des règles CSS utilisées pour obtenir le rendu de ces “Cards”.

🞄  🞄  🞄