cours_html_css/texte.html at master · jeuneyannick/cours_html_css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="fr"><!-- signifier la langue dans laquelle est écrite la page !-->
<head><!-- toutes les informations relatives au document, le nom de la page, le nom de fichier à notre fichier, la description de notre page, lien vers des google font, liens vers javascript,insertion des fabicons !-->
    <meta charset="UTF-8">
    <!-- pour l'encodage, gérer les accents etc !-->
    <meta name="description" content="Mon texte en HTML/CSS"> <!-- Meta= donnée; valeur= description ; éléments récupérés par google !-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mon texte</title>
    <link rel="stylesheet" href="css/style.css"> <!-- Link c'est une information !-->
    <link href="https://fonts.googleapis.com/css?family=Lato&Lemonada&Oswald" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!-- les moteurs de recherche s'en servent pour les recherches !-->
</head>
<body> <!-- Corps du document !-->
    <header>
        <div id="logo">
            <a href="index.html"><img src="img/logo.png" alt="logo"></a>
        </div>
        <div id="slogan">
            <h1>Mon premier site en HTML/CSS</h1>
        </div>
        <div id="reseauSociaux">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            <i class="fa fa-instagram" aria-hidden="true"></i>
        </div>

    </header>

    <nav>
        <a href="index.html">Structure</a>
        <a href="texte.html" class="couleur">Texte</a>
        <a href="selecteurs.html">Selecteurs</a>
        <a href="images.html">Image</a>
        <a href="Position.html">Position</a>
        <a href="tableau.html">Tableau</a>
        <a href="listes.html">Liste</a>
        <a href="zoning.html">Zoning</a>
        <a href="ancres.html">Ancres</a>
        <a href="Multimedia.html">Multimedia</a>
        <a href="Animations.html">Animations</a>
    </nav>

    <main>
        <h2>Texte</h2>
        <section>
            <h3>Titre de ma première section</h3>
            <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  <i class="fa fa-quote-right" aria-hidden="true"></i></blockquote>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>

        <section class="Oswald">
            <h3>Titre de la section n°2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>


    </main>
    <footer>
        <!-- Zone du bas, ex : liens administratifs, mentions légales, plan du site, CGU, CGV, contact, copyright etc !-->
    </footer>
</body>
</html>