Remerciez-le!

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

Informatique pour SMP-S4 Informatique pour SMP-S4 Le langage HTML Abdelhakim AL

Informatique pour SMP-S4 Informatique pour SMP-S4 Le langage HTML Abdelhakim ALALI Hakim.alali@gmail.com Mai 2012 Comment fonctionne le Web ? Comment fonctionne le Web ? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké – processus statique Le serveur peut aussi générer un fichier en fonction de la demande du client – processus dynamique Ecrire pour le Web Ecrire pour le Web Ce n'est pas uniquement écrire des pages en HTML, il faut penser en terme de projet: Définir le contenu Trouver une arborescence ergonomique Appliquer / Respecter la charte graphique Produire les pages Installer le site sur le serveur Maintenance, politique de mise à jour HTML, l'origine HTML, l'origine HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners Lee, " inventeur " du Web. HTML est basé sur SGML (Structured Markup Language), qui est une vieille norme utilisée pour la description de documents.Elle est conçue pour les grosses documentations techniques. HTML est une instance de SGML. HTML, les principes HTML, les principes Il contient des commandes, implémentées par des balises pour marquer les différents types de texte (titres, paragraphe, listes …) , pour inclure des images, des formulaires, des liens … C'est un langage à balisage qui décrit la structure logique d'un document hypertexte. Il a volontairement été conçu pour être simple. Il a évolué vers un langage de description de pages offrant des possibilités plus proches de la P.A.O. L'hypertexte L'hypertexte Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes, qui relient votre document à d'autres documents. En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on peut accéder à un nouveau document situé sur un autre ordinateur en n'importe quel point du globe. Exemple d’une page HTML Exemple d’une page HTML Exemple d’une page HTML (code source) Exemple d’une page HTML (code source) Introduction au marquage - 1 Introduction au marquage - 1 Pour décrire un fichier hypertexte, le langage HTML insère des balises dans le texte du document : Début de mise en forme Fin de mise en forme <marqueur> ici votre texte </marqueur> Synonymes: marqueur, élément, tag. Introduction au marquage - 2 Introduction au marquage - 2 Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases, mots, lettres … <gras>Le <italique> cours </italique> HTML</gras> Le cours HTML Introduction au marquage - 3 Introduction au marquage - 3 Il faut respecter une logique d'imbrication: Bon: Mauvais: <gras><italique> Le cours HTML</gras></italique> <gras><italique> Le cours HTML </italique> </gras> Introduction au marquage - 4 Introduction au marquage - 4 Le langage HTML est sensible à la casse, toujours écrire en minuscules. Bon: Mauvais: <GRAS><italique> Le cours HTML </italique> </GRAS> <Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras> <GRAS><ITALIQUE> Le cours HTML </italique> </GRAS> <gras><italique> Le cours HTML </italique> </gras> Les attributs Les attributs Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier l'action de la balise. Toujours mettre la valeur de l'attribut entre guillemets. <marqueur attribut="argument">texte</marqueur> <marqueur attribut1="argument" attribut2="argument">texte</marqueur> Ce texte sera en verdana. Exemple Ce texte sera en verdana. Résultat Les commentaires Les commentaires <!–- Voici un commentaire HTML --> <!–- Voici un commentaire HTML qui peut se placer sur plusieurs lignes --> Que choisir pour écrire de l‘ HTML? Que choisir pour écrire de l‘ HTML? A la main, avec un éditeur de texte Simple Text, Notepad++, Bbedit,Emacs ,WordPad … Avec un logiciel « assistant » au code HTML PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC … A l'aide d'un programme dit "WYSIWYG" Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ... A l'aide d'un filtre Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O. Que choisir pour lire HTML? Que choisir pour lire HTML? Le client doit pouvoir interpréter HTML et afficher le résultat. Ils sont divers, tournant sur des systèmes différents: – Netscape Navigator, Mozilla, Internet explorer, Safari, Opéra, iCab, Emacs mode www, Amaya, Lynx, links, w3m … Note sur les caractères accentués Note sur les caractères accentués Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme pour afficher les caractères accentués ou spéciaux. Ceux ci devront faire l'objet d'un codage spécial au sein du fichier HTML. é : é comme, s'écrit = s’ écrit ê : &eacirc; comme, être s'écrit = &eacirc;tre s’ é crit Les serveurs Web acceptent les caractères accentués de la norme iso-8859-1. On spécifie l'encodage dans le fichier HTML. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859- 1" /> Structure de base d'un fichier HTML Structure de base d'un fichier HTML <html> <head> … éléments d'en-tête </head> <body> … éléments de corps </body> </html> . Une balise <html> contenant une seule balise <head> et une seule balise <body>. Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques, sous forme de blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc. Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc sont dits "éléments de ligne". Analyse des balises Analyse des balises <html> .. </html> Délimite le début et la fin du document <head> .. </head> Entête du document, contient des méta- informations Ex: <title>. .</title> titre du document <meta> . .</meta> méta-informations <script> . .</script> script ou référence <body> . . </body> Corps du document Rappels Rappels Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules. Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur. Les balises fermantes sont obligatoires. Les éléments vides sont signalés par une balise spéciale. ( ex: ) Exercice Exercice On utilisera Notepad++ en mode HTML Vous mettrez vos pages dans un dossier sur le bureau : mon_repertoire/ Créez un fichier HTML de base. Pour visualiser le fichier: file:///mon_repertoire/exemple_html2.html Code source de Code source de exemple_html2.html exemple_html2.html Eléments de niveau bloc Eléments de niveau bloc <hn> . . </hn> Titre de niveau n, de 1 à 6 . . Paragraphe La mise en forme de texte -1 La mise en forme de texte -1 • Pour mettre le texte en gras on l'encadre de la balise : Texte en gras Ce texte s'affichera en gras. • Pour mettre le texte en italique on l'encadre de la balise : Texte en italique Ce texte s'affichera en italique. La mise en forme de texte - 2 La mise en forme de texte - 2 • Pour souligner le texte on l'encadre de la balise : Texte souligné Ce texte sera souligné. • Pour barrer le texte on l'encadre de la balise <s> : Texte barré <s>Ce texte sera barré.</s> La mise en forme de texte - 3 La mise en forme de texte - 3 • Pour modifier la couleur du texte on utilise l'attribut color de la balise : Texte en rouge Ce texte sera en rouge. Les couleurs peuvent être écrites de deux manières : • En hexadécimal de type RVB et précédées d'un dièse (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu. • Textuelles en anglais US ; Exemples : red, yellow, pink. La mise en forme de texte - 4 La mise en forme de texte - 4 • Pour modifier la police du texte on utilise l'attribut face de la balise : Texte en verdana Ce texte sera en verdana. • N.B: On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système différent du vôtre la police choisie ne soit pas installée et il faut qu'il puisse alors afficher le texte dans une police proche de celle que vous vouliez avoir. Eléments de listes Eléments de listes On distingue cinq types de listes différents, chacun prévu pour un usage bien précis : – Les listes non ordonnées, ou à puces. – Les listes ordonnées. – Les listes de définitions. – Les listes de répertoires. – Les listes de menus. Eléments de listes : Eléments de listes : Les listes non ordonnées-1 Les listes non ordonnées-1 Elles sont démarquées par la balise <ul> et chacun des items est entouré de la balise <li> : Exemple de liste non ordonnée: Résultat : Ma liste de courses : <ul> <li>Champignons</li> <li>Avocat</li> <li>Dentifrice</li> <li>Céréales</li> </ul> Eléments de listes : Eléments de listes : Les listes non ordonnées-2 Les listes non ordonnées-2 On va pouvoir jouer sur le design des puces à l'aide de trois types différents. On renseigne le type des puces avec l'attribut type de la balise <ul>. Les types sont : – disc (par défaut au niveau 1 d'imbrication) <ul type="disc"> …</ul> – circle (par défaut au niveau 2 d'imbrication) – square (par défaut au niveau 3 et suivants d'imbrication) Dans l'exemple précédent, nous avons donc vu une liste non ordonnée avec une puce de type uploads/s1/ fst-settat-cours-html.pdf