-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML1.html
92 lines (87 loc) · 4.44 KB
/
HTML1.html
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
<!-- Annonce du Langage -->
<!DOCTYPE html>
<!-- Base du code -->
<html>
<!-- En tête (non affiché) -->
<head>
<!-- Indication pour afficher tout les symboles et caractères possibles -->
<meta charset="utf-8" />
<!-- Titre de la page Web -->
<title>Apprentissage HTML</title>
</head>
<!-- Corps du site (Tout ce qui est affiché) -->
<body>
<!-- Titre (de 1 à 6 en fonction de l'importance)(ne fait pas attention au <a> pour l'instant) -->
<h1><a href="#ancre">SPEEDRUN</a> POUR APPRENDRE LE HTML ET LE CSS</h1>
<!-- Délimitation de paragraphe -->
<p>
<!-- Mettre en Gras -->
<strong>
Ce site te servira de mémo pour te rappeler comment utiliser le Html ^^
</strong>
<!-- Saut de lignes -->
<br />
</p>
<!-- Mettre en Italique (possible au sein d'une même phrase) -->
<em>
Je te conseille de regarder le code source du site, j'y ai mit pleins d'indications qui devraient te rafraichir la mémoire.
</em>
<!-- Surligner -->
<p>
On est le 20/07/2021, je me suis décidé à me mettre au travail pour devenir <mark>un plus de dix $_$</mark>
</p>
<h2>Listes non ordonnées :</h2>
<p>
<!-- Délimitation d'une liste non ordonnée -->
<ul>
<!-- Délimite 1 élément de la liste -->
<li>Gnar</li>
<li>Yuumi</li>
<li>Neeko</li>
</ul>
<h3>Listes ordonnées :</h3>
<!-- Délimitation d'une liste ordonnée (tu remplace juste le "u" par "o") -->
<ol>
<li>Gnar</li>
<li>Yuumi</li>
<li>Neeko</li>
</ol>
Tu l'a surement remarqué, mais moins le titre est important, moins il sera grand.
</p>
<p>
<strong>Voyont ensuite comment faire des liens :</strong>
<br /><br />Lien vers un joueur <a href="https://u.gg/lol/profile/euw1/nizimeepyy/overview">Silver MMR Challenger</a> (d'après gzofo)
<br /><br /> Ca c'est pour nous menez vers une page en http, mais ma page n'est pas en http ;(
<br /><br /> Donc faut que tu mette ta deuxieme page dans le meme dossier que ta première page, ou en tout cas pas trop loin si possible, sinon ca devient galère.
</p> Par exemple, si tu veux voir la page 2, tu clique <a href="HTML2.html" target="_blank">ici</a>
<h4>ANCRE :</h4>
<p>
<em>Arrivé au titre h4, les titres deviennent plus petit que du texte normal, donc je vais arrêter d'en utiliser</em>
<br /><br /> Alors, l'ancre c'est un raccourci pour éviter de regarder tout la page.
<br /><br /> En gros, tu clique sur quelque chose qui te redirigera sur quelque chose d'autre sur la page (à condition que le scroll soit possible)
</p>
<p>
<strong>Exemple :</strong> Si tu clique sur le mot "SPEEDRUN" tout en haut de la page, ca te redirigera <a id="ancre">ici</a>
<br /><br /> Ou encore, si tu veux voir une ancre d'une autre page, tu peux aussi cliquer <a href="HTML2.html#ancre2" target="_blank">la</a>
</p>
<p>
Avec ca, tu a des <emf>tonnes de possibilités</emf> :
<ul>
<li> <a href="mailto:znagui.nizaar@outlook.fr">Envoyer un mail</a> </li>
<li> <a href="img/Gnar5.jpg">Télécharger un fichier</a> </li>
</ul>
</p>
<p>
Bref, à toi de d'adapter en fonction de ce que tu veux faire :)
</p>
<p>
Pour <strong>insérer une image</strong>, tu dois juste indiquer ou elle se trouve.
<br /><br /> Comme ca : <br /><br /><img src="img/Yuubee.jpg" title="Miel Diff" />
<!-- La j'ai pas réussit a indiquer le chemin de l'image, ducoup j'ai juste mis l'image dans le meme dossier que le site -->
</p>
<p>
<!-- Je force l'ouverture d'une nouvelle page du navigateur avec "target" -->
Maintenant que tu a les bases du html, je t'invite à regarder la page avec du CSS <a href="HTML+CSS1.html" target="_blank">-></a>
</p>
</body>
</html>