HTML_CSS_Rappel/base.html at main · GabinCleaver/HTML_CSS_Rappel · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!-- Elements, balises, attributs:

L'élement p définit un paragraphe,
L'élement h1,h2,h3,h4,h5,h6 définit un titre.
L'élement a définit un lien.

Les balises sont ouvrantes/fermantes:
    <p> Ouvrir
    </p> Fermer
Exeption:
Balises orphelines:
    <br/> Qui n'a qu'une balise.

Attributs:

- Propriété utilisé pour donner des indications supplémentaires aux éléments.
Exemple: Indiquer la cible d'un lien -->

<!-- <a href="https://www.youtube.com">YouTube</a> -->

<!-- ici, href est égal a l'attribut, et le tout a l'élement a.
    Les attributs toujours dans la balise ouvrante. -->

<!-- La Structure minimale d'une page HTML

Doctype: <!DOCTYPE html>

    Elements:
- html,
- head,
- title
- meta
- body -->

<!--
    strong = important pour le site
    em = important mais moins que strong
    mark = surligner
-->

<!--Les listes "non ordonnées":
        <ul>
            <li>Fraise</li>
            <li>Melon</li>
            <li>Pomme</li>
        </ul>
-->

<!--Les listes "ordonnées":
        <ol>
            <li>Intro</li>
            <li>Qui sommes nous</li>
            <li>A Propos</li>
        </ol>
-->

<!--Les listes de "définition":
        <dl>
            <dt>HTML</dt>
            <dd>HTML = Hypertext Markup Language</dd>
        </dl>
-->

<!--Les listes imbriqués:
        <ol>
            <li>Intro
                <ul>
                    <li>Coucou</li>
                    <li>C'est</li>
                    <li>Gabin</li>
                </ul>
            </li>
            <li>Qui sommes nous</li>
            <li>A Propos</li>
        </ol>
-->


<!--Les liens internes:

- Même dossier : href = "page2.html"
- Sous-Dossier : href = "sous_dossier/page2.html"
- Dossier parent : href = "../page2.html"

    Les liens externes:

La valeur de href est le lien du site.
Exemple: href = "www.google.com"
Exemple 2: <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a>

Pour ouvrir le lien dans une nouvelle fenetre, on utilise l'attribut target et sa valeur "_blank"
Exemple: <a href="https://developer.mozilla.org/fr/docs/Web/HTML target = "_blank">HTML</a>


    Les liens ancres:

    Ils permettent d'aller a un endroit précis du site sans pour autant changer de fichier.

    Comment l'utiliser ?

    <p>Pour aller a Hey direct <a href="#ancre1"cliquez ici</a></p>
        Ne pas oublier le # devant la valeur.
    <p id="ancre1">Hey</p>

    Les liens mails:

    Ils permettent d'envoyer un mail.

    Comment l'uiliser ?

    <p>Envoyez un <a href="mailto:gabin.schiro@gmail.com">mail</a></p>

    Les liens pour télécharger un fichier:

    <p> <a href="base.rar">Télécharger le code source</a> </p>


    Lier un fichier CSS a l'HTML:
        <link rel="stylesheet" href="base.css"/>

    Class:
        <p class="text">Ceci est mon site. <br/>Vous kiffez ? (:</p>
        Pour pouvoir utiliser .text en CSS
    Id:
        <p id="text2">Ceci est un paragraphe Important</p>
        Pour pouvoir utiliser .text2 en CSS

    On peut utiliser la meme class/id pour plusieurs balises:

    <p class="coucou">Salut</p>
    <p class="coucou">Comment vas-tu?</p>

    Une Id précise ne doit que etre utilisé qu'un seule fois par page.
    Une Class peut etre utilisée plusieurs fois.


    Type block = Commencent sur une autre ligne,
    Occupent toute la largeur possible,
    Peuvent etre imbriqués les unes dans les autres et peuvent contenir des éléments de type inline.
    Par exemple: p / h1,h2,h3 / header, article, footer / ol, ul, dl / table


    Type inline = Ne commencent pas sur une nouvelle ligne,
    Occupent seulement la largeur nécessaire,
    Peuvent contenir d'autres éléments de type inline mais pas block.
    Par exemple: em / strong / mark / a / img

    Div utilité
    De faire un conteneur pour le CSS

    Span utilité
    De faire un conteneur avec un ou plusieurs mots d'une seule et unique ligne.


-->

<!DOCTYPE html>
<html>
    <head>
        <title>Gabin WebSite</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="base.css"/>
    </head>
    <body>
        <!-- Body = Partie Principale du Site-->
        <h1>Gabin WebSite</h1>

        <p class="text">Ceci est mon <span class="site">site</span> . <br/>Vous kiffez ? (:</p>
        <p id="text2">Ceci <em>est</em> un <mark>paragraphe</mark> <strong>Important</strong></p>

        <div class="list">
            <ul>
                <li>Fraise</li>
                <li>Melon</li>
                <li>Pomme</li>
            </ul>

            <ol>
                <li>Intro</li>
                <li>Qui sommes nous</li>
                <li>A Propos</li>
            </ol>

            <dl>
                <dt>HTML</dt>
                <dd><a href="https://developer.mozilla.org/fr/docs/Web/HTML" target = "_blank">HTML</a> = Hypertext Markup Language</dd>
            </dl>
        </div>

        <p>Envoyez un <a href="mailto:gabin@gmail.com">mail</a></p>

        <p> <a href="base.rar">Télécharger le code source</a> </p>
    </body>
</html>