02exoshtml/blogdefabrice.html at master · Fabgraph/02exoshtml · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Le blog de Fabrice</title>
    </head>
    <body>
        <a id="haut_de_page"></a>
        <a href="#bas_de_page" title="le bas de la page du blog de Fabrice">Bas de page</a>
        <!--si je veux écrire ma grand-mère fait du vélo. il faut que je code ma_grand_mere....-->
            <ul>
                <li>
                <a href="images.html" title="Le blog de Fabrice : une page avec des images">Menu 01 - La page des images</a>
                <!--a herf="images.html" est une balise qui permet d'aller d'une page à une autre-->
                </li>
                <li>
                <a href="ferrari.html" title="Le blog de Fabrice : une page avec des images de Ferrari">Menu 02 - La page des images de Ferrari</a>
                </li>
                <li>
                <a href="panorama.html" title="Le blog de Fabrice : une page avec un panorama">Menu 03 - La page du panorama</a>
                </li>
            </ul>
        <hr>

        <h1>Bienvenue sur mon blog les amis !</h1><!--ceci est un titre de niveau 1-->

        <h2>Mon blog de derrière les fagots</h2><!--ceci est un titre de niveau 2-->
            <p>Voici quelques petites lignes à l'attention de mes visiteurs.<br><!--breaking row pour aller à la ligne-->
            Je voudrai partager avec vous mes <em>passions</em>, <em>mes idées</em> et mes <em>projets</em>.
            </p><!--un paragraphe-->

        <h2>Ce que j'aime faire</h2>
            <ul><!--unordered une liste non ordonnée liste à puce -->
                <li>Ecouter de la <strong>musique</strong></li><!--list item un élément de liste-->
                <li>Faire du <strong>dessin</strong></li>
                <li><strong>Ecrire</strong></li>
            </ul>

        <h2>Quand je me lève le matin</h2>
            <ol><!--ordered list une liste ordonnée-->
                <li>Je bois du café</li>
                <li>Je regarde les info</li>
                <li>Je fume une cigarette</li>
            </ol>

        <h2>Aparté; la devise des Trois Mousquetaires</h2>
            <q><!--bloc de citation courte-->Un pour tous, tous pour un !</q>

        <h2>Le début de la <em>&Agrave; la recherche du temps perdu</em> de Marcel Proust</h2>
            <blockquote><!--bloc de citation longue-->
                <p>Notre «moi» est fait de la superposition de nos états successifs. Mais cette superposition n'est pas immuable comme la stratification d'une montagne. Perpétuellement des soulèvements font affleurer à la surface des couches anciennes.</p>
            </blockquote>

        <h2>Les jurons du capitain Haddock</h2>
            <ul>
                <li>Moule à gaufres !</li>
                <li>Bachibouzouk !</li>
                <li>Tonner de Brest !</li>
                <li>Pignoufs !</li>
                <li>Polygraphes !</li>
                <li>Troglodytes !</li>
                <li>Ectoplasu !</li>
            </ul>

        <h2>J'ai fait une carte postale de Venise avec Gimp</h2>
            <img src="img/venise02.jpg" alt="une gondole à Venise"><!--la balise img requiert toujours les attributs src et alt-->

        <h2>La liste de mes sites préférés</h2>
            <ul>
                <li>Le site de : <a href="https://www.youtube.com/?gl=FR&hl=fr" title="Youtube" target="blank">Youtube</a></li><!-- hypertext permattant d'aller d'une page à un site. -->
                <li>Le site de : <a href="https://fr.freepik.com/" title="Freepik" target="blank">Freepik</a></li>
                <li>Le site de : <a href="https://www.dafont.com/fr/" title="Dafont" target="blank">Dafont</a></li>
                <li>Le site de : <a href="http://www.leparisien.fr/" title="Le Parisien" target="blank">Le Parisien</a></li>
                <li>Le site de : <a href="http://www.lemonde.fr/" title="Le Monde" target="blank">Le Monde</a></li>
                <li>Le site de : <a href="http://www.cnews.fr/" title="CNews" target="blank">CNews</a></li>
            </ul>
            <hr>
        <h2>Une image d'un jeune homme optimisé avec Gimp</h2>
            <img src="img/gamin.jpg" alt="Un jeune homme image faite avec GIMP" width="350" height="244" border="5"><br><!-- la balise <br> est un retour à la ligne-->
        <h2>Une image de montagne et sa Mrie-Louise</h2>
            <img src="img/montagne08.jpg" alt="une image de montagne" width="350" height="244"><br>
        <h2>Une image de ruelle retravaillée sur GIMP</h2>
            <img src="img/ruelle02.jpg" alt="une image de ruelle"><br>
        <h2>Une image retouchée dans GIMP pour un petit test</h2>
            <img src="img/domoison_san_gimignano.jpg" alt="une image de San Gimignano" width="350" height="240"><br>

            <a id="bas_de_page"></a><!--une ancre en bas de page nommée avec id-->
            <a href="#haut_de_page" title="le haut de la page du blog de Fabrice">Haut de page</a><!--le lien "hypertext" avec son hyper référence en href-->


    </body>
</html>