cours_html_css/images.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
65
66
67
<!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="Mes iamges 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>Ma page en image</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">Texte</a>
        <a href="selecteurs.html">Selecteurs</a>
        <a href="images.html" class="couleur">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>images</h2>
            <section class="imageFond">
                <h3>Image de fond en css</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>
            <section>
                <h3>Image en HTML</h3>
                <img src="img/toureiffel.jpg" title="Cette photo montre la Tour Eiffel de Paris" alt="Cette photo montre la Tour Eiffel de Paris">
            </section>

            <section class="rotationImg">
                <h3>Image en HTML / CSS</h3>
                <img src="img/image.jpg" class="image" alt="">
                <img src="img/image.jpg" class="image" alt="">
                <img src="img/image.jpg" class="rotation360 image" alt="">

            </section>


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