Remerciez-le!

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

Créez votre première page web en HTML En résumé  On utilise l'éditeur de texte

Créez votre première page web en HTML En résumé  On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension .html (par exemple : test.html ). Ce sera notre page web.  Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double- clic dessus.  À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.  Les balises peuvent avoir plusieurs formes : o <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple) ; o <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit précis (par exemple une image).  Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires (exemple : <image nom="photo.jpg" /> ).  Une page web est constituée de deux sections principales : un en-tête ( <head> ) et un corps ( <body> ).  On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnant Afficher le code source de la page Organisez votre texte En résumé  Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.  Les paragraphes sont définis par la balise <p> </p> , et les sauts de ligne par la balise <br /> .  Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6> , à utiliser selon l'importance du titre.  On peut mettre en valeur certains mots avec les balises <strong>(mettre en gras) , <em>(mettre en italique) et <mark> (mettre en surligne) .  Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item. En résumé  Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.  Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible. Exemple : <a href="https://openclassrooms.com"> .  On peut faire un lien vers une autre page de son site, simplement en écrivant le nom du fichier : <a href="page2.html"> .  Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre"> . # Cas pratiques d'utilisation des liens Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des liens. Par exemple, saviez- vous qu'il est très facile de faire des liens qui lancent un téléchargement ? Qui créent un nouvel e- mail ? Qui ouvrent une nouvelle fenêtre ? Non ? Eh bien nous allons voir tout cela ici. Un lien qui affiche une infobulle au survol Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif. Vous aurez un résultat ressemblant à la figure suivante. Une infobulle La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien. Voici comment reproduire ce résultat : <p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !">OpenClassrooms</a> ?</p> Un lien qui ouvre une nouvelle fenêtre Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> : <p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !" target="_blank">OpenClassrooms</a> ? </p> Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet. Notez cependant qu'il est déconseillé d'abuser de cette technique, car elle perturbe la navigation. Le visiteur lui-même peut décider s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien pour ouvrir dans une nouvelle fenêtre ou Ctrl + Clic pour ouvrir dans un nouvel onglet. Un lien pour envoyer un e-mail Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto . Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci : <p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p> Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail. Un lien pour télécharger un fichier Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier… En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger. Par exemple, supposez que vous vouliez faire télécharger monfichier.zip . Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier : <p><a href="monfichier.zip">Télécharger le fichier</a></p> C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien Insérez des images  En résumé  Il existe plusieurs formats d'images adaptées au Web : o JPEG : pour les photos ; o PNG : pour toutes les autres illustrations ; o GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.  On insère une image avec la balise <img /> . Elle doit obligatoirement comporter au moins ces deux attributs : src (nom de l'image) et alt (courte description de l'image).  Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise <figure> . La balise <figcaption> permet d'écrire la légende de l'image. uploads/S4/ resume-du-cours-html.pdf