Conception de sites webs statiques 2023/2024

Cours

Support de cours

Cours 1	Lecture écran	Introduction, HTML5
Cours 2	Lecture écran	Séparation structure et présentation avec feuilles de styles CSS
Cours 3	Lecture écran	Framework Bootstrap

TDs

Feuilles de TD

TD 1	feuille de TD et résultat attendu	HTML5 : Introduction
TD 2	feuille de TD et résultat attendu	HTML5 + CSS : Séparation de structure et mise en page
TD 3	feuille de TD et images	Famework Bootstrap : Initiation

Feuilles de TD optionnelles

HTML 5 : page vierge

helloworld.html source résultat

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <p>Premier exemple HTML5</p>
    </body>
</html>

TD2 : Exemple Flexbox composé

Illustration de la mise en forme

flex-compose.html source


        
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Mise en page avec Flexbox</title>
        <link href="flex-compose.css" rel="stylesheet" type="text/css" />

    </head>
    <body>


    <div id="x">x</div>
    <div id="a">
        <div id="b">
            <div id="d">d</div>
            <div id="e">e</div>
            <div id="f">f</div>

        </div>
        <div id="c">
            <div id="g">g</div>
            <div id="h">h</div>
            <div id="i">i</div>
        </div>
    </div>
    <div id="y">y</div>

    <p><em>Remarque : </em>a, b, c sont contiennent uniquement des balises <b>div</b>, il ne servent qu'à hierarchiser la mise en forme.</p>

    </body>
</html>

flex-compose.css source


        
div
{
    border: 1px solid black;
    width: 100%;
}
#a
{
    display: flex;
    flex-direction: row;
}
#b
{
    display: flex;
    flex-direction: column;
}
#c
{
    display: flex;
    flex-direction: row;
}

Conception de sites webs statiques 2024/2025

News

Cours

TDs

Feuilles de TD optionnelles

HTML 5 : page vierge

TD2 : Exemple Flexbox composé