Afficher la pageAnciennes révisionsLiens de retourExporter en PDFHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur. [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ==== WEB - Les bases du HTML ==== [Mise à jour le 29/9/2022] * **Source** * <html><a href="https://developer.mozilla.org/fr/" target="_blank">MDN web doc</a></html> * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html> <callout type="primary" icon="true">"//Pour développer un site web, la première chose à faire est de maîtriser le langage structurant les pages, le HTML//((Apprendre le développement WEB au lycée - Cyprien Accard - ellipses))".</callout> === 1. Définition === <callout type="primary" icon="true">**HyperText Markup Language** (HTML) est le code utilisé pour structurer une page web et son contenu.</callout> === 2. Anatomie d'un élément HTML === * **Source** * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html> * Exemple {{ :web:chat-grincheuxl.png?nolink&400 |}} * Les éléments peuvent avoir des "**attributs**" {{ :web:attribut-chat-grincheux.png?nolink&400 |}} * Les éléments **vides** <callout type="primary" icon="true">Certains éléments n'ont **pas de contenu**. Ces éléments sont appelés **éléments vides**.</callout> //Exemple// <code html *.html> <img src="images/firefox-icon.png" alt="Mon image test" /> <!-- Cet élément contient deux attributs mais, les balises ouvrantes <img> et fermante </img> sont remplacées par une balise autofermante <img /> et il n'y a aucun contenu interne. --> </code> === 3. Anatomie d'une page Web === * **Source** * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML" target="_blank">Les bases de HTML</a></html> <code html *.html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ma page de test</title> </head> <body> <img src="images/firefox-icon.png" alt="Mon image de test"> </body> </html> </code> * **<!DOCTYPE html>** précise que la page est en HTML5. * **<html></html>** encadre tout le contenu de la page. * **<head></head>** contient les éléments qui ne sont pas du contenu (mots-clés, description de la page pour les moteurs de recherche, etc.). * **<meta charset="utf-8">** définit le jeu de caractères utilisé par le document. * **<title></title>** définit le titre de la page. * **<body></body>** contient le contenu affiché sur la page. === 4. Le bon usage des balises (pour un document syntaxiquement bien formé) === Quelques règles simples sont à respecter lors de l’écriture des balises HTML. <callout type="warning" icon="true">**Règle 1** : écrire les **balises en minuscule**.</callout> //Exemple// <code html *.html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title> Exemple de tableau </title> </head> <body> </body> </html> </code> <callout type="warning" icon="true">**Règle 2** : toutes les balises ouvertes par //**<nom_balise>**// doivent être fermées par //**</nom_balise>**// sauf s’il s’agit d’une balise unique //**<balise_unique/>**// ou //**<balise_unique>**//.</callout> //Exemple// <code html *.html> <!-- Exemples de balises devant être fermées --> <html></html> <head></head> <!-- Exemples de balises uniques --> <br> <hr> </code> <callout type="warning" icon="true">**Règle 3** : Les **balises** doivent être correctement **imbriquées** et **indentées**.</callout> //Exemple// \\ Dans le code ci-dessous, <h1></h1> est imbriquée avec <td></td>, <tr> et <td> sont indentées. <code html .html> <!-- Le développeur est responsable de l'imbrication --> <!-- L'indentation est réalisée automatiquement par les IDE modernes tels que VSCode --> <!-- Clic droit sur la page puis sélection de "Mettre le document en forme --> <tr> <td><h1> Le secret de la licorne </h1></td> </tr> </code> <callout type="warning" icon="true">**Règle 4** : les **valeurs** des **attributs** doivent toujours figurer entre des **guillemets**.</callout> //Exemple// : UTF-8 est la valeur attribuée à l'attribut charset. <code html .html> <meta charset="UTF-8" /> <table border = "1"> </code> === 5. Chemins relatifs et chemins absolus === Voir : <html><a href="https://www.alsacreations.com/astuce/lire/78-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html" target="_blank">Quelle est la différence entre les chemins relatifs et absolus ?</a></html> === Pour aller plus loin ... === * <html><a href="https://espritweb.fr/liste-des-balises-html-faut-il-toutes-les-connaitre-la-reponse-est-non/" target="_blank">Les balises à connaître</a></html> web/baseshtml.txt Dernière modification : 2022/11/14 07:54de phil