Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Bureautique – Gestion commerciale – Images – Sites Internet HTML pour les nuls

Bureautique – Gestion commerciale – Images – Sites Internet HTML pour les nuls et les impatients (v1.0) Introduction Le langage HTML est très simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer à l'utiliser. Objectifs de l'article Cet article s'adresse à toute personne désirant optimiser un peu la rédaction d'articles ou de pages dans WordPress, ou de soigner la présentation de ses commentaires dans les blogs pour les rendre plus attractifs. Les limites de l'article Cet article n'est pas un tutoriel HTML, beaucoup de notions importantes sont laissées de côté. Il ne vous permettra pas, à fortiori, de vous lancer dans la création d'un site Web. Il existe sur le net quantité d'excellents sites permettant l'apprentissage en profondeur du HTML1. Il m'arrive souvent, tout au long de l'article, de donner en exemple des instructions fausses. Je traduis par exemple « display:none; » par « affichage : ne pas afficher ». Mes instructions de code sont pédagogiques et ne doivent pas être prises au pied de la lettre. HTML Première approche À quoi sert le HTML ? Le HTML est le langage utilisé par votre navigateur (Firefox, Chrome, Internet Explorer, Safari...) pour afficher sur votre écran le contenu d'un document. Pour ce présent texte, par exemple, le navigateur a besoin de savoir ce qu'il doit afficher en titre, en sous titre, en texte ordinaire, en image... Sans HTML, imaginez le début de cet article, cela donnerait quelque chose comme : HTML pour les nuls et les impatients Introduction Le langage HTML est très simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer à l'utiliser. Objectifs de l'article Cet article s'adresse à toute personne désirant optimiser un peu la rédaction d'articles ou de pages dans WordPress, ou de soigner la présentation de ses commentaires dans les blogs pour les rendre plus attractifs. Les limites de l'article Cet article n'est pas un tutoriel HTML, beaucoup de notions importantes sont laissées de côté et il existe sur le net quantité d'excellents sites permettant l'apprentissage du HTML. À quoi sert le HTML ? 1 Voir quelques liens en fin de document HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activité de formation enregistrée sous le n° 53 56 08151 56 auprès du préfet de région de Bretagne (Ne vaut pas agrément de l'état) Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 info@formation-auray.fr www.formation-auray.fr Le HTML est le langage utilisé par votre navigateur (Firefox, Chrome, Internet Explorer, Safari...) pour afficher sur votre écran le contenu d'un document. Pour ce présent texte, le navigateur a besoin de savoir ce qu'il doit afficher en titre, en sous titre, en texte ordinaire, en image... Fonctionnement imagé du HTML : Très sommairement, le HTML va fonctionner ainsi : (voir tableau ci-dessous) On distingue les éléments de structure (à gauche) et les éléments de contenu - le fond (à droite). Nous allons donc reprendre les premiers mots de ce présent article en séparant le contenu en plusieurs blocs auxquels seront accolés des informations de structure et de mise en forme. Document HTML STRUCTURE CONTENU Titre principal Saut de ligne avant et après, Taille de police très grosse, couleur noire, police avant garde, texte centré, HTML pour les nuls et les impatients Titre de niveau 2 Saut de ligne avant et après, Taille de police assez grosse, couleur noire, police Helvetica, texte aligné à gauche, Introduction Paragraphe Saut de ligne avant et après, Police Times, de taille 10, Texte justifié Le langage HTML est très simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer à l'utiliser. Titre de niveau 2 Saut de ligne avant et après, Taille de police assez grosse, couleur noire, police Helvetica, texte aligné à gauche, Objectifs de l'article Paragraphe Saut de ligne avant et après, Police Times, de taille 10, Texte justifié Cet article s'adresse à toute personne désirant optimiser un peu la rédaction d'articles ou de pages dans WordPress, ou de soigner la présentation de ses commentaires dans les blogs pour les rendre plus attractifs. Titre de niveau 2 Saut de ligne avant et après, Taille de police assez grosse, couleur noire, police helvetica, texte aligné à gauche, Les limites de l'article Le navigateur va afficher chaque bloc de contenu en ajoutant les enrichissements (forme) indiqués en regard. Un mot sur les CSS : Un document CSS (feuille de styles) va simplifier le travail de l'humain rédacteur de l'article et du logiciel de navigation en regroupant toutes les instructions de mise en forme à un seul endroit. Reprenons notre tableau ci-dessus : Les informations de structure vont être regroupées (factorisées HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activité de formation enregistrée sous le n° 53 56 08151 56 auprès du préfet de région de Bretagne (Ne vaut pas agrément de l'état) page 2 sur 11 diront certains) et stockées à proximité. Nous allons donc créer un document CSS qui contiendra par exemple : Feuille de style CSS Titre principal Saut de ligne avant et après, Taille de police très grosse, couleur noire, police avant garde, texte centré, Titre de niveau 2 Saut de ligne avant et après, Taille de police assez grosse, couleur noire, police Helvetica, texte aligné à gauche, Paragraphe Saut de ligne avant et après, Police Times, de taille 10, Texte justifié Notre document HTML deviendra donc Document HTML STRUCTURE CONTENU Titre principal (voir feuille de style CSS) HTML pour les nuls et les impatients Titre de niveau 2 (voir feuille de style CSS) Introduction Paragraphe (voir feuille de style CSS) Introduction Le langage HTML est très simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer à l'utiliser. Titre de niveau 2 (voir feuille de style CSS) Objectifs de l'article Paragraphe (voir feuille de style CSS) Cet article s'adresse à toute personne désirant optimiser un peu la rédaction d'articles ou de pages dans WordPress, ou de soigner la présentation de ses commentaires dans les blogs pour les rendre plus attractifs. Titre de niveau 2 (voir feuille de style CSS) Les limites de l'article Autre avantage : Si vous avez un document assez long et que vous voulez changer la couleur de tous les sous-titres de niveau 2, il suffira de modifier un seul élément dans la feuille de style CSS. Langage à balises Le HTML est un langage à balises. Chaque élément de contenu concerné par une structure ou par une mise en forme particulière sera délimité par une balise de début et une balise de fin, que l'on nomme respectivement « balise ouvrante » et « balise fermante » Les balises se reconnaissent par les signes < et > Les balises fermantes sont quasi-identiques aux balises ouvrantes, avec un </ en début. Exemples : Bloc affiché en caractères gras Bloc affiché en italiques Bloc de paragraphe HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activité de formation enregistrée sous le n° 53 56 08151 56 auprès du préfet de région de Bretagne (Ne vaut pas agrément de l'état) page 3 sur 11 <h>Bloc de titre</h> Attention à la différence avec les shortcodes Les « shortcodes » que l'on trouve souvent dans les blogs ne sont pas des balises hmtl, mais des raccourcis de programmation qui peuvent parfois, mais pas toujours, avoir des résultats équivalents. Ils sont délimités par des crochets [ et ]. Exemples assez fréquent : [b]xxxx[/b] est équivalent à xxxx [i]xxxx[/i] est équivalent à xxxx Arguments dans la balise Outre son titre, la balise peut contenir des « arguments » (instructions complémentaires). La lecture de ces arguments est parfois assez déroutante et nous allons nous y attarder un peu. Il ne suffit pas toujours d'indiquer que tel bloc de contenu appartient à un certain type d'élément, un lien doit avoir une adresse, une image doit avoir un lieu de stockage... Prenons le cas d'un lien hypertexte (la balise des liens est <a>) Exemple : Utilisons le code HTML ci-dessous : Pour en savoir plus, <a>suivez ce lien</a> Le navigateur affichera ce texte : Pour en savoir plus, suivez ce lien Cela semble correct, les mots « suivez ce lien » s'affichent bien dans une forme standard indiquant la présence d'un lien hypertexte (coloration et soulignement), mais si on clique sur le lien, il ne se passe rien. Il va falloir ajouter une information de destination dans la balise <a>, cette information supplémentaire s'appelle un argument et est de la forme « href=''destination'' » Le code HTML devra donc être : Pour en savoir plus, <a href="http://www.google.fr" >suivez ce lien</a> Les arguments se mettent dans la balise ouvrante, les uns à la suite des autres, séparés par une espace. Dans l'exemple ci-dessous, on indique en plus de l'argument de destination un argument cible (target) qui ordonne au navigateur d'ouvrir le lien dans une autre nouvelle fenêtre. uploads/s3/ html-pour-les-nuls-et-les-impatients.pdf