-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml_css.html
More file actions
148 lines (107 loc) · 6.09 KB
/
html_css.html
File metadata and controls
148 lines (107 loc) · 6.09 KB
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
<!DOCTYPE html>
<!-- DOCTYPE est la première balise obligatoire dans une page HTML : elle désigne le type de document pour le navigateur, ici .html-->
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="html_css.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<!-- ceci est un commentaire (Atom => ctrl + /) -->
<!-- dupliquer une ligne (Atom => ctrl + maj +d) -->
<!-- Corps de la page -->
<body>
C'est ma première page web ! Le navigateur affiche le texte, les images... contenus dans le bloc de ma balise <body>.
<!-- les titres -->
<h1>Titre h1</h1>
<h2>Titre h2</h2>
<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6>
<p>Ceci est un paragraphe.</p>
<p>Les paragraphes sont délimités par la balise <p>.</p>
<!-- paragraphe préformaté -->
<pre> Les numériques de VLG 2017</pre>
<p> Les numériques de VLG 2017</p>
<!-- Les retours à la ligne -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin diam eget tempus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultrices mauris non erat lacinia finibus. Phasellus pharetra felis ut nisl dictum bibendum. In blandit enim vitae nunc condimentum cursus. Nulla varius eu nibh et semper. Fusce tellus metus, venenatis ut pharetra id, fermentum id quam. Donec scelerisque eros ut nisl cursus dapibus. Nulla hendrerit tristique nibh a imperdiet. Phasellus ullamcorper sem mi, nec finibus turpis feugiat eget. Nunc rhoncus euismod urna a commodo. Integer vitae erat non nunc accumsan euismod sed sed diam. <br/>Nunc sed eleifend diam. Nullam eu volutpat mi. Nunc nec rhoncus tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin
diam eget tempus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultrices mauris non erat lacinia finibus. Phasellus pharetra felis ut nisl dictum bibendum. In blandit enim vitae nunc condimentum cursus. Nulla varius eu nibh et semper. Fusce tellus metus, venenatis ut pharetra id, fermentum id quam. Donec scelerisque eros ut nisl cursus dapibus. Nulla hendrerit tristique nibh a imperdiet. Phasellus ullamcorper sem mi, nec finibus turpis feugiat eget. Nunc rhoncus euismod urna a commodo. Integer vitae erat non nunc accumsan euismod sed sed diam. Nunc sed eleifend diam. Nullam eu volutpat mi. Nunc nec rhoncus tortor.</p>
<!-- La disposition -->
<p style="text-align:right">Ce paragraphe sur deux</br> lignes est disposé à droite.</p>
<p style="text-align:center">Ce paragraphe sur deux</br> lignes est disposé au centre.</p>
<p style="text-align:left">Ce paragraphe sur deux</br> lignes est disposé à gauche.</p>
<p style="text-align:justify">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.
<br />
Ce paragraphe est justifié: aligné à droite et à gauche.</p>
<p>
Voici la structure de base d'une page HTML :<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title></title<br />
<head><br />
<body>
</body>
</html>
</p>
<p>
Quel est le rôlr de ma balise <hr /> ?
</p>
<hr/>
<p>
Elle insère une ligne séparatrice dans ma page HTML. <br />Elle est auto-fermante (ou orpheline)... à ne pas confondre avec la balise <br/> est effectue un retour à la ligne.
</p>
<!-- La mise en valeur -->
<!-- STRONG -->
<P>
Bonjour, ceci est mon premier fichier en html alors <strong>soyez indulgents</strong> SVP !
</p>
<!-- EM petite mise en valeur -->
<P>
Bonjour, ceci est mon premier fichier en html alors <em>soyez indulgents</em> SVP !
</p>
<!-- Mark fait ressortir visiuellement une portion de texte -->
<P>
Bonjour, ceci est mon premier fichier en html alors <mark>soyez indulgents</mark> SVP !
</p>
<!-- Les listes -->
<!-- non ordonnée (à puces) -->
<ul>
<li>Chat</li>
<li>Chien</li>
<li>Cheval</li>
</ul>
<!-- ordonnée (numérotée) -->
<ol>
<li>Chat</li>
<li>Chien</li>
<li>Cheval</li>
</ol>
<!-- Les couleurs -->
<p style="color:lightsalmon">H</p>
<p style="color:#4AD3C1 ">T</p>
<p style="color:darkgreen">M</p>
<p style="color:teal">L</p>
<br />
<p style="color:#FFA07A">H</p>
<p style="color:#4AD3C1 ">T</p>
<p style="color:#006400">M</p>
<p style="color:#000080">L</p>
<!-- La couleur du fond -->
<p style="background-color:cyan">Bonjour</p>
<p style="background-color:pink">Hello</p>
<p style="background-color:black; color:yellow">Biongiorno</p>
<!-- Les liens -->
<!-- Pour changer un fichier -->
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!-- Pour accéder à une URL (site web)-->
<a href="http://colorhunt.co/">site web color hunt</a>
<!-- Les images -->
<img src="../../arborescence/lib/img/chats/bengal.jpg" alt="un chat de type bengal"</p>
<img src="../../arborescence/lib/img/chats/siamois.jpg" alt="un chat de type siamois"</p>
</body>
</html>