Remerciez-le!

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

Initiation à la fabrication de sites web Table des matières Plantons le décor !

Initiation à la fabrication de sites web Table des matières Plantons le décor !........................................................................................................... 1 Concepts de base du HTML ........................................................................................... 2 1. Les liens hypertexte........................................................................................................ 2 2. Les balises ...................................................................................................................... 2 3. Ossature d’une page HTML........................................................................................... 3 Une première page web .................................................................................................. 5 1. Les balises indispensables.............................................................................................. 6 2. Balises bloc, balises en ligne.......................................................................................... 9 3. Hiérarchie et propriétés des blocs d’informations........................................................ 10 Mise en page et feuilles de style ................................................................................... 11 1. Structure d’une feuille de style..................................................................................... 11 2. Unités de mesures et couleurs ...................................................................................... 14 2.1 Mesures absolues.................................................................................................. 14 2.2 Mesures relatives.................................................................................................. 14 2.3 Indications de couleurs......................................................................................... 15 3. Positionnement des blocs ............................................................................................. 15 3.1. Marges externes, marges internes et dimensions ................................................. 15 3.2. Positionnement flottant ........................................................................................ 18 3.3. Positions absolues, fixes et relatives .................................................................... 19 4. Cascade de styles et priorités des styles....................................................................... 20 Ecriture des pages d’un site .......................................................................................... 21 1. Matériel nécessaire....................................................................................................... 21 2. Etapes de la fabrication d’un site ................................................................................. 21 Créer des menus simples............................................................................................... 22 1. Un menu vertical .......................................................................................................... 22 2. Un menu horizontal...................................................................................................... 24 Maîtriser les liens.......................................................................................................... 27 Liens internes à une page ................................................................................................. 27 Liens vers une page différente ......................................................................................... 27 Liens externes au site ....................................................................................................... 28 Liens e-mail...................................................................................................................... 28 Balises HTML............................................................................................................... 29 1. Les balises bloc ............................................................................................................ 29 2. Les balises en ligne ...................................................................................................... 30 Propriétés CSS .............................................................................................................. 31 1. Marges.......................................................................................................................... 31 2. Positionnement des blocs ............................................................................................. 31 3. Alignement de texte ..................................................................................................... 33 4. Formatage d’écriture .................................................................................................... 33 5. Bordures ....................................................................................................................... 34 6. Arrières-plans............................................................................................................... 34 7. Formatage des listes ..................................................................................................... 35 8. Formatage des tableaux................................................................................................ 36 Glossaire Internet.......................................................................................................... 37 Codification des caractères spéciaux ............................................................................ 44 Initiation à la fabrication de sites web 1 Plantons le décor ! Visiter un site web, c’est un peu comme aller au théâtre. On peut d’ailleurs tenter d’établir un parallèle entre ces deux spectacles : • La pièce de théâtre / le site consulté • Les différents actes / les pages du site • Le livret / le code source des pages • Le producteur / Internet • La scène / l’écran de l’ordinateur • Le metteur en scène / le navigateur • Le public / l’ensemble des internautes. Les pièces de théâtre du producteur Internet sont interprétées sur toutes les scènes de notre planète. L’écriture du livret utilise donc un langage reconnu par tous les metteurs en scène : le HTML (Hyper Text Markup Language). Le World Wide Web Consortium, plus connu sous l’acronyme W3C est l’organisme qui définit les normes du HTML et ses évolutions. La dernière version est appelée XML 1. S’il est normal - comme au théâtre - que le résultat final diffère selon le metteur en scène, l’auteur (celui qui a conçu le site) doit veiller à ce que le metteur en scène respecte le livret et ne dénature pas l’œuvre. Nous verrons en effet que tous les navigateurs ne traduisent pas le code source HTML dans un parfait respect des normes qui le définissent… Un fichier contenant du code source HTML se caractérise par l’extension .html . Initiation à la fabrication de sites web 2 Concepts de base du HTML Le langage d’écriture des pages web permet d’implanter des liens vers d'autres pages, de décrire la forme du texte (gras, italique, polices, ...), comme les premiers traitements de texte et d’inclure des images fixes ou animées, du son, de la vidéo et même des programmes interactifs (à l'aide de Javascript). Le langage HTML est également utilisé pour fournir une interface aux CD ROM multimédia et aux DVD ROM. 1. Les liens hypertexte Ils constituent la base de la navigation sur les sites de la toile mondiale. Un lien hypertexte peut être constitué d’un mot (ou d’un ensemble de mots) généralement souligné qui réagit avec la souris et renvoie automatiquement vers un endroit appelé cible qui traite le sujet. La cible du lien peut se situer dans la page courante, dans une autre page du même site ou dans un site différent. Un dictionnaire sur le web illustre bien la notion de lien hypertexte : 2. Les balises Les balises constituent le principe même du HTML (langage à balises). Les navigateurs permettent de visualiser le code source correspondant à une page affichée. Dans le code source, une balise (ou tag) est facilement identifiable : elle est constituée d'un ou plusieurs mots encadrés par les signes inférieur (<) et supérieur (>). Définition : (nf) *Ensemble de propositions qui font accéder à la compréhension d’un concept. *Explication précise de ce que le mot signifie Concept : (nm) *Représentation mentale générale et abstraite d’un objet. Voir aussi idée Proposition : (nf) *Action de proposer un projet, une offre *énonciation d’un jugement, affirmation *mot ou groupe de mots, généralement ordonné autour d’un verbe, constituant une phrase Abstrait : (adj) * Se dit d’une notion de qualité ou de relation considérée par abstraction Initiation à la fabrication de sites web 3 Exemple : <p align="center"> Fabriquer un site web </p> texte p est un élément du langage HTML. align est un attribut de l’élément p. ="center" affecte la valeur center à l’attribut align. Certains éléments peuvent avoir plusieurs attributs. Chaque balise doit être ouverte puis fermée ; les balises <br /> <hr /> ou <img … /> (respectivement saut de ligne, trait horizontal et insertion d’une image) sont parmi les rares exceptions. On parle alors de balises "auto-fermantes". Bien que majuscules et minuscules soient autorisées, les minuscules seront toujours utilisées dans ce document pour être conforme au XHTML (eXtended Hypertext Markup Language) et assurer la compatibilité avec les évolutions du langage. 3. Ossature d’une page HTML <!DOCTYPE …… >  <html> <head>  </head> <body>  </body> </html> Important: • Les balises <head> et <body> sont imbriquées dans la balise <html>. Dans les pages HTML l’imbrication des balises est systématique. L’indentation (non obligatoire) permet de s’assurer du respect de la règle absolue : La première balise rencontrée dans le source est aussi la dernière fermée. Réciproquement la dernière balise rencontrée est la première fermée. Commentaires  Balise d'ouverture Balise de fermeture Initiation à la fabrication de sites web 4 Un exemple d’écriture incorrecte : <html> <body> ............ </html> </body> • Les commentaires ne sont pas obligatoires et leur couleur est sans importance. Cependant la présence d’un commentaire peut faciliter la compréhension du code source et les modifications de la page… Déclaration du standard HTML utilisé La déclaration du "doctype" qui spécifie le standard HTML utilisé dans la rédaction des pages de site n’est pas obligatoire. Elle est nécessaire pour effectuer auprès du W3C une validation qui consiste à vérifier le respect des normes d’écriture du standard choisi. Elle aide aussi le navigateur à interpréter la page le plus correctement possible. Dans ces feuillets, il sera toujours question de XHTML, qui est la dernière version du langage HTML. D’où la "formule" doctype correspondante : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> L’en-tête du document (<head>) Après la balise <html>, début de tout code source, la balise <head> donne des informations générales : • la balise <title> donne le titre de votre page tel qu’il apparaît au-dessus de la fenêtre du navigateur ou dans les favoris du visiteur qui rajoute votre site à sa liste de favoris. • les balises <meta /> : <meta http-equiv="Content-Type" content="text/html; charset=UTF8" /> précise le jeu de caractères utilisés pour l’affichage des textes. <meta name="keywords" content="festival, gospel, midi-pyrénées, france" /> énumère des mots clés judicieux permettant aux moteurs de recherche (Google et autres) de référencer votre site. • les balises <link /> : <link rel="stylesheet" href="habillage.css" type="text/css" media="screen" /> donne le lien du code avec une feuille de styles réalisant la mise en page. Il peut y avoir plusieurs fichiers CSS pour une page. Le corps du document (<body>) C'est ici que se trouvent les données à afficher (titres, textes, images, tableaux, liens...) Initiation à la fabrication de sites web 5 Une première page web Pour écrire le code HTML un éditeur élémentaire tel que le Bloc notes sous Windows convient. Exemple de page minimale (sans doctype ni balises meta) : <html> <head> <title> Ma première page</title> </head> <body> Voici ma première page web! </body> </html> Il faut ensuite enregistrer la page sur le disque dur en lui donnant un nom de fichier. Une page d’accueil de site se nomme généralement "index.html". Dès lors, un double-clic sur le nom du fichier source de cette page suffira à ouvrir le navigateur Internet et à afficher à l’écran : Ce premier succès encourage à composer une page avec un peu plus de contenu. Il est possible de faire un copier-coller pour récupérer une partie d’un document .doc ou .rtf et l’insérer à la place de la phrase actuelle. Hélas l’affichage de la nouvelle page par le navigateur ne reflète pas exactement la mise en forme du texte: • les passages à la ligne suivante et les tabulations sont ignorés. • les espaces consécutifs sont réduits uploads/s3/ cours-html-css-pdf.pdf