Logo Club Elec Logo Digital Design

Initiation au HTML et au CSS

Brendan Abolivier - Club Elec
Konstantin Sidorenko - Digital Design

Brendan Abolivier

  • Étudiant en CIR3
  • Alternant chez Thomson Video Networks

keybase.io/BrenAbolivier - www.brendanabolivier.com

Konstantin Sidorenko

  • Étudiant en CIR3
  • Alternant chez Yellowcake

www.konstantin-sidorenko.fr

Buts de ce cours

  • Appréhender le développement Web
  • Vous apprendre les bases du HTML et du CSS
  • Que vous soyez en mesure de réaliser un site simple

Les outils

Firefox
Un navigateur (ex : Firefox, Chrome)
Notepad++
Un éditeur de texte (ex : Notepad++, gedit, Sublime Text, bloc-note)

Un peu d'histoire

Le World Wide Web

  • Créé en 1989 par Tim Berners-Lee
    • Tim Berners-Lee
  • Développé au CERN, maintenant géré par le W3C
  • Système hypertexte

Le tout premier navigateur

World Wide Web

Le HTML

  • HyperText Markup Language
  • Permet de décrire le contenu d'une page Web
  • Tous les sites Web utilisent du HTML
  • HTML5 sorti en octobre 2014

Un langage balisé

Balises ouvrantes/fermantes

<html>[mon contenu...]</html>

 

Balises auto-fermantes

<link rel="stylesheet" href="design.css" />

Et concrètement ?

Squelette d'une page Web :


<!DOCTYPE html>
<html>
    <head>
        <title>Ma super page Web</title>
    </head>
    <body>
        Hello world!
    </body>
</html>

Un peu plus loin


<!DOCTYPE html>
<html>
    <head>
        <title>Ma super page Web</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="design.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <section>
            <h1>Ma section</h1>
            <article>
                <h2>Mon premier article</h2>
                <p>Hello world!</p>
            </article>
            <article>
                <h2>Mon second article</h2>
                <p>Hello world!²</p>
            </article>
        </section>
    </body>
</html>

Tada !

Let's code!

Énoncé


Open

Corrigé


<!DOCTYPE html>
<html>
    <head>
        <title>Hello world</title>
    </head>
    <body>
        Hello world!
    </body>
</html>

Un code mieux organisé

  • <section> permet de fractionner une page
  • <article> permet de définir des éléments d'une section
  • <p> permet de définir un paragraphe

Des titres pour mieux se repérer

  • Démarrent une section et/ou un article
  • <h1>, <h2>, <h3>... en fonction de l'importance

Énoncé


Open

Corrigé


<!DOCTYPE html>
<html>
    <head>
        <title>Hello world</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <section>
            <h1>Ma section</h1>
            <article>
                <h2>Un premier article</h2>
                <p>Hello world!</p>
            </article>
            <article>
                <h2>Un second article</h2>
                <p>Hello world!²</p>
            </article>
        </section>
        <section>
            <h1>Mon autre section</h1>
            <article>
                <h2>Encore un premier article...</h2>
                <p>... encore "Hello world!"</p>
            </article>
            <article>
                <h2>Et encore un second article</h2>
                <p>Et un dernier "Hello world!" (ça devient répétitif)</p>
            </article>
        </section>
    </body>
</html>

Les liens

  • Permettent de naviguer d'une page à une autre
  • Une balise : <a> ... </a>

<a href="http://www.example.com">Voir mon site</a>
<a href="page2.html">Aller à la page 2</a>

Énoncé


Open

Corrigé


<!DOCTYPE html>
<html>
    <head>
        <title>Hello world</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <a href="http://www.duckduckgo.com">Quack</a>
    </body>
</html>

Aller plus loin

Les commentaires

  • Ignoré par le navigateur
  • Permet d'annoter son code
  • <!-- [mon commentaire...] -->

<section>
    <!-- Pemière section, sert à... -->
    <h1>Ma section</h1>
    <article>
        <h2>Un premier article</h2>
        <p>Hello world!</p>
    </article>

Les attributs

  • Données aditionnelles ("paramètres") d'une balise
  • Se trouve à l'intérieur d'une balise
    • 
<a href="http://www.example.com" id="monlien" target="_blank">Mon super lien</a>
  • Deux cas spéciaux :
    • class identifie un élément
    • id identifie de façon unique un élément

Les balises meta

  • Permet d'ajouter des données supplémentaires à la page
  • Interprété par le navigateur...
  • ... mais pas affiché !
  • Se place dans le <head></head>
  • <meta name="description" content="Mon superbe site !" />
  • L'intrus : <meta charset="utf-8" />

<head>
    <title>Mon super site</title>
    <meta charset="utf-8" />
    <meta name="description" content="Bienvenue sur mon site ! :-)" />
    <meta name="author" content="Brendan Abolivier" />
</head>

Balises inline/block

  • inline : S'affiche à la suite du contenu (exemples : <span>, <a>)
  • block : Marque un retour à la ligne à son début et à sa fin (exemples : <div>, <section>, <h1>)

Le CSS

  • Cascading Style Sheet
  • Définit le style d'une page
  • Est arrivé après le HTML
  • Nécessite du HTML

Exemple de style


h1 {
    color: grey;
    font-size: 150%;
}

#id {
    height: 500px;
    width: 75%;
    margin: auto;
}

.class {
    background-color: grey;
}

Du style dans ma page

Le plus propre : séparer le CSS du HTML

Lier HTML et CSS : 

<link rel="stylesheet" href="style.css" />

Les sélecteurs

Un sélecteur peut être...

... un nom de balise (h1)
... un attribut "id" (#id)
... un attribut "class" (.class)

Un peu de mise en page

Le texte : font-size, text-align, font-family...

La couleur : color, background-color, background-image, ...

Il y a plusieurs couleurs prédéfinies en CSS : blue, grey, green, white, black, pink, red...

Énoncé

Open

Corrigé (HTML)


<!DOCTYPE html>
<html>
    <head>
        <title>Hello world</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="ex5.css" />
    </head>
    <body>
        <section>
            <h1>Ma section</h1>
            <article class="article1">
                <h2>Un premier article</h2>
                <p>Hello world!</p>
            </article>
            <article class="article2">
                <h2>Un second article</h2>
                <p>Hello world!²</p>
            </article>
        </section>
        <section>
            <h1>Ma section</h1>
            <article class="article1">
                <h2>Encore un premier article...</h2>
                <p>... encore "Hello world!"</p>

            </article>
            <article class="article2">
                <h2>Et encore un second article</h2>
                <p>Et un dernier "Hello world!" (ça devient répétitif)</p>
            </article>
        </section>
    </body>
</html>

Corrigé (CSS)


h1 {
    color: red;
}

h2 {
    text-align: center;
}

section {
    background-color: grey;
}

.article1 {
    color: white;
}

.article2 {
    color: green;
}

Les sélecteurs composés

  • sélecteur1 sélecteur2 : sélecteur2 dans sélecteur1
    
section article { ... }
  • sélecteur1sélecteur2 : sélecteur1 de type sélecteur2
    
article.article1 { ... }

 


section.section1 article { ... }

Les pseudo-classes

Certains éléments ne peuvent pas être sélectionnés par un sélecteur classique


a:hover {
    color: pink;
}

Exemples : visited, first-child, last-child, checked...

Précision du sélecteur

Le navigateur appliquera toujours la règle la plus précise.

article < article.maclasse < section article.maclasse

Énoncé

Open

Corrigé (HTML)


<!DOCTYPE html>
<html>
    <head>
        <title>Hello world</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="ex7.css" />
    </head>
    <body>
        <article>
            <h2>Un article pas comme les autres</h2>
            <p>Attention, cet article n'est pas dans une section !</p>
        </article>
        <section>
            <h1>Ma section</h1>
            <article id="top">
                <h2>Un premier article</h2>
                <p>Hello world!</p>
            </article>
            <article>
                <h2>Un second article</h2>
                <p>Hello world!²</p>
            </article>
        </section>
    </body>
</html>

Corrigé (CSS)


h1 {
    color: red;
}

h2 {
    text-align: center;
}

section {
    background-color: grey;
}

section:hover {
    background-color: pink;
}

section article#top {
    color: green;
}

section article {
    color: white;
}

Pour aller plus loin

  • width, height : Modifier la taille d'une balise block
  • sélecteur1[attribut=valeur] : Sélectionner toutes les occurrences de sélecteur1 où l'attribut attribut vaut valeur
  • position + left/right/bottom/top : Positionner relativement ou absolument un block
  • border : Ajouter une bordure à un block
  • animation : Animer un élément
  • margin, padding : Ajouter des marges externes et internes (respectivement) d'un block
  • ... (le CSS est plein de surprises)

Volez de vos propres ailes

  • MDN (Mozilla Developper Network)
  • OpenClassrooms (ancien Site du Zéro)
  • Codecademy
  • W3Schools (mais attention !)
Slides disponibles sur https://club-elec.github.io/2015-cours-html-css/

Des questions ?