Différences

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

--- clubinfo:html [2023/07/19 08:12]
mrcjl [Références]
+++ clubinfo:html [2024/08/19 17:17] (Version actuelle)
mrcjl [Activités]
@@ Ligne 7: / Ligne 7: @@
 {{https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png?50|}}
 La version 4 est restée longtemps la référence. Aujourd'hui on utilise la version 5 qui a pris le pas sur la version XHTML.
-===== Référence =====
-  * [[https://www.w3schools.com/html/|Référence du langage]] sur w3schools
-  * [[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3|Cours sur le HTML et le CSS]] sur OpenClassrooms
-  * [[https://www.w3.org/html/|Page officielle du HTML]] sur le site du W3C
-  * [[https://validator.w3.org/|Validateur de page HTML]] sur le site du W3C
 ===== Présentation =====
 ==== Les balises ====
-Le contenu du site doit être placé entre des balises qui en organisent les différentes parties. <BALISE_début>Parti du site</BALISE_fin>
+Le contenu du site est placé entre des balises **<BALISE>Texte</BALISE>**. Elles permettent de décrire les différentes informations composant la **page web**. Elles ne sont pas affichées à l'écran.
-  * Des précisions sur les balises peuvent être données au début <BALISE_début attribut='Précision'>.
+  * Des précisions sur l'information concernée peuvent être indiquées au début <BALISE attribut='Précision'>Texte</BALISE>.
-  * Parfois, une balise peut ne pas avoir de contenu <BALISE_vide />
+  * Parfois, une balise peut se suffire à elle même et ne pas avoir de contenu <BALISE />
-  * Une indentation (décalage du début de la ligne) est utilisée pour faciliter la lecture des balises.
+  * Une indentation (décalage du début de la ligne comme pour les algorithme) est généralement utilisée pour faciliter leur lecture et elles s'écrivent alors une par ligne.
 <WRAP round tip>
   * **Balise standard** <balise>Contenu</balise>
   * **Balise vide** <balise />
-  * **Balise personnalisée** <balise attribut="info" ...
+  * **Balise personnalisée** <balise attribut="info">Contenu</balise>
 </WRAP>
 ==== La structure minimale d'une page HTML ====
-Elle comprend un entête (informations non affichées à l'écran) et un corps (contenu affiché). \\
+Elle comprend un entête (informations non affichées à l'écran et destinées au navigateur) et un corps (contenu affiché destiné au visiteur). \\
-L'affichage comporte principalement des titres <Hx>, des textes <P> et des images <IMG>.
+L'affichage comporte principalement des titres <Hx>Tite</Hx>, des textes <P>Texte</P> et des images <IMG source='image.jpg' />.
 On trouve aussi des liens vers d'autres pages <A href='nouvelle_page'>Lien à cliquer</A>.
 <code html >
 <!DOCTYPE html> <!--Déclaration de la page HTML -->
-<html> <!-- Début de page -->
+<html lang="fr"> <!-- Début de page écrite en français -->
   <head> <!-- Début entête -->
     <meta charset="UTF-8"> <!-- Codage des caractères (important mais sera vu plus tard) -->
     <title>Titre de la page</title>
+    <link href="style.css" rel="stylesheet" type="text/css" /> <!-- Autre fichier (ici mise en forme) utile à la page -->
   </head> <!-- Fin de entête -->
   <body> <!-- Début du corps -->
-    <h1>Titre du chapitre (niveau le plus haut)</h1>
+    <h1>Titre du chapitre (niveau le plus haut puis h2 à h6)</h1>
     <p>Texte du chapitre avec <a href='adresse de la nouvelle page'>un lien</a> vers une nouvelle page</p>
     <img src='adresse de image' />
@@ Ligne 47: / Ligne 42: @@
   * La balise initiale **<!DOCTYPE html>** (d'un format particulier qui ne se ferme pas) indique un document HTML 5.
-  * La balise **<!– Commentaire –>** (elle aussi d'un format particulier) indique des commentaires qui ne seront pas affichés.
+  * La balise **<!–- Commentaire -–>** (elle aussi d'un format particulier) indique des commentaires qui ne seront pas affichés.
-  * La balise **<meta charset="UTF-8">**. Le codage des caractères est défini par le logiciel utilisé pour créer la page. Il est généralement spécifiques aux alphabets des pays ou régions. **UTF-8** est le codage le plus polyvalent (utilisé par "SublimeText"). En Europe nos accents ont été initialement prévus dans le codage **ISO-8859-1** puis ensuite dans **ISO-8859-15** avec le symbole "€" (utilisé par "Notepad" de Windows).
+  * La balise **<meta charset="UTF-8">**. Le codage des caractères est généralement spécifiques aux alphabets des pays ou régions. Il est défini par le logiciel utilisé pour créer la page. En Europe de l'ouest, les accents et caractères spéciaux ont été initialement prévus dans le codage **ISO-8859-1** puis ensuite dans **ISO-8859-15** (mise à jour avec avec le symbole "€"). Le codage **UTF-8** est le plus polyvalent et permet de gérer l'ensemble des alphabets existants.
   * Les titres de chapitres vont de **<H1>** le plus haut à **<H6>** le plus bas.
+Le fichier contenant la page HTML doit avoir pour extension .html (la page par défaut ou d'accueil doit s'appeler index.html).
 <WRAP round tip>
@@ Ligne 57: / Ligne 54: @@
   * <HEAD>,
   * <TITLE> Titre de l'onglet dans le navigateur
+  * <LINK> Lien vers un fichier de description
 ===Corps===
   * <BODY>
@@ Ligne 63: / Ligne 61: @@
   * <IMG src="adresse image" /> Image
   * <A href="adresse du lien">Nom du lien</A> Lien vers une autre page
+L'ensemble est placé dans un **fichier avec l'extension .html** (index.html pour la page d'accueil).
 </WRAP>
-===== Références =====
+===== Compléments =====
+Il existe beaucoup d'autres balises et attributs qui seront découverts au fur et à mesure de notre apprentissage.
+Depuis le HTML1 au HTML5 qui est la norme aujourd'hui (en passant par le XHTML), les balises ont évoluées et de nouvelles ont été ajoutées. Certaines balises utilisées dans les premières versions et qui étaient destinées à la mise en forme ne le sont plus actuellement (<B><I><S>...). Elles sont aujourd'hui remplacées par le CSS. D'autres introduites par les éditeurs de navigateurs et spécifiques à ses derniers n'ont pas été reprises par le W3C lors de la normalisation du langage.
 <WRAP round info>
-  * [[http://www.w3schools.com|Référence du HTML sur w3schools]]
+=== Référence ===
-  * [[https://developer.mozilla.org/fr/docs/Web/HTML|Référence du HTML sur Mozilla]]
+  * Référence du langage [[https://www.w3schools.com/html/|sur w3schools]]
-  * [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3|Tuto complet sur Openclassrooms]]
+  * Référence du langage [[https://developer.mozilla.org/fr/docs/Web/HTML|sur Mozilla]]
-  * </WRAP>
+  * [[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3|Cours sur le HTML et le CSS]] sur OpenClassrooms
+  * [[https://www.codeshttp.com/toutes-les-balises-html-liste-complete-avec-syntaxe.html|Liste des balises sur CodesHTTP]]
+  * [[https://www.w3.org/html/|Page officielle du HTML]] sur le site du W3C
+  * [[https://validator.w3.org/|Validateur de page HTML]] sur le site du W3C
+</WRAP>
 ===== Activités =====
-  * Création d'un [[premier site en HTML]]
+  * Les [[clubInfo:html2|formulaires]] et leurs différents champs.
-  * Les [[formulaires]] et leurs différents champs.
+  * Création d'un [[clubInfo:html3|premier site en HTML]]

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Différences

Outils de la page