Différences

Ci-dessous, les différences entre deux révisions de la page.

--- html [2016/01/02 13:13] – [Sources et tutoriels] simon
+++ html [2016/01/03 10:26] – simon
@@ Ligne 3: / Ligne 3: @@
 L'[[HTML]] est le langage qui **structure** les pages web. Un page se découpe essentiellement
+==== Éléments de structure ====
+=== Structure principale ===
 <code html>
 <!DOCTYPE html>
@@ Ligne 14: / Ligne 16: @@
 </code>
-On peut rajouter des titres, de la couleur, choisir la taille du texte, ...
+=== Paragraphes ===
 <code html>
-<!DOCTYPE html>
+<p></p>
-<html>
-	<!-- commentaire -->
-	<head>
-		<!-- Titre de la page -->
-		<title>Récapitulatif</title>
-	</head>
-	<body>
-		<!-- Un paragraphe -->
-		<p>Paragraphe simple</p>
-		<p style="font-size:14px">Paragraphe en 14 pixels</p>
-		<p style="color:red">Paragraphe en rouge</p>
-		<p style="font-family: Bodoni">Paragraphe en "Bodoni"</p>
-		<p style="background-color:red">Paragraphe avec un fond en rouge</p>
-		<p style="font-size:20px; color:blue; font-family: Arial">Un paragraphe</p>
-	</body>
-</html>
 </code>
-{{ :20160102-html-1.png?800 | Capture d'écran de Codecademy.com}}
-L'argument "style" dans la balise paragraphe ci-dessus peut prendre beaucoup de paramètres. On peut par exemple centrer un titre (de niveau 3) :
+=== Listes ===
-<code html>
-<h3 style="text-align:center">Titre au centre</h3>
-</code>
-On peut aussi aligner le texte à gauche (''left'') ou à droite (''right'').
-==== Gestion des images ====
-Pour insérer une image, on utilise la balise ''img'' :
-<code html>
-<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/img>
-</code>
-==== Listes ====
 == Listes ordonnées ==
 On utilise la balise ''ol'' pour créer une liste ordonnée. Tous les éléments de la liste sont signalés par la balise ''<li>'' :
@@ Ligne 79: / Ligne 50: @@
     <li>yup</li>
 </ul>
+</code>
+=== Tableaux ===
+Pour créer un tableau, on utilise la balise ''<table>''. Chaque ligne est créée avec la balise ''<tr>'' et chaque colonne dans une ligne est créée avec la balise ''<td>''. Ici le tableau a une bordure de ''1px''.
+<code html>
+<table border="1px">
+            <thead>
+                <tr>
+                    <th colspan="2">Les monstres célèbres par année de naissance</th>
+                </tr>
+                <tr>
+                    <th>Monstres célèbres</th>
+                    <th>Année de naissance</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>King Kong</td>
+                    <td>1933</td>
+                </tr>
+                <tr>
+                    <td>Dracula</td>
+                    <td>1897</td>
+                </tr>
+                <tr>
+                    <td>Frankenstein</td>
+                    <td>1935</td>
+                </tr>
+            </tbody>
+        </table>
+</code>
+=== Div ===
+''Div'' permet de **div**iser une page en plusieurs "conteneurs" afin, par exemple, de leur attribuer un style différent, de les faire pointer vers des liens, etc. Ici, un exemple avec quatre ''<div>'', avec chacun une couleur différentes. Le dernier est aussi un lien qui pointe vers [[http://korben.info|Korben.info]].
+<code html>
+	<body>
+		<div style="width:50px; height:50px; background-color:red"></div>
+		<div style="width:50px; height:50px; background-color:blue"></div>
+		<div style="width:50px; height:50px; background-color:green"></div>
+		<a href="http://korben.info/"><div style="width:50px; height:50px; background-color:yellow"></div></a>
+	</body>
+</code>
+==== Mise en forme ====
+=== Gras et emphase ===
+On peut mettre un mot ou un groupe de mots en gras avec la balise ''<strong>'' et en italique (emphase) avec la balise ''<em>'' :
+<code html>
+<p>Du texte avec du <strong>gras</strong> et une partie <em>italique</em>.</p>
+</code>
+=== L'argument "style" ===
+Pour presque chaque élément de la structure, on peut rajouter des titres, de la couleur, choisir la taille du texte. On utilise l'argument ''style'' dans les balises correspondantes, comme par exemple :
+<code html>
+<!DOCTYPE html>
+<html>
+	<!-- commentaire -->
+	<head>
+		<!-- Titre de la page -->
+		<title>Récapitulatif</title>
+	</head>
+	<body>
+		<!-- Un paragraphe -->
+		<p>Paragraphe simple</p>
+		<p style="font-size:14px">Paragraphe en 14 pixels</p>
+		<p style="color:red">Paragraphe en rouge</p>
+		<p style="font-family: Bodoni">Paragraphe en "Bodoni"</p>
+		<p style="background-color:red">Paragraphe avec un fond en rouge</p>
+		<p style="font-size:20px; color:blue; font-family: Arial">Un paragraphe</p>
+	</body>
+</html>
+</code>
+{{ :20160102-html-1.png?800 | Capture d'écran de Codecademy.com}}
+=== Alignement ===
+L'argument "style" permet également d'aligner un titre, un paragraphe, etc.
+<code html>
+<h3 style="text-align:left">Titre à gauche</h3>
+<h3 style="text-align:center">Titre au centre</h3>
+<h3 style="text-align:right">Titre à droite</h3>
+</code>
+==== Gestion des images ====
+Pour insérer une image, on utilise la balise ''img'' :
+<code html>
+<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/img>
 </code>
 ==== Sources et tutoriels ====
-[[https://www.codecademy.com/fr/learn/web|Le cours HTML & CSS de Codecademy]]
+  * [[https://www.codecademy.com/fr/learn/web|Le cours HTML & CSS de Codecademy]]
-[[http://www.codeshttp.com/baliseh.htm|Toutes les balises HTML]]
+  * [[http://www.codeshttp.com/baliseh.htm|Toutes les balises HTML]]