Deug STPI 1ère année 1 Écrire ses pages Web en quelques leçons… http://lita.uni

Deug STPI 1ère année 1 Écrire ses pages Web en quelques leçons… http://lita.univ-metz.fr/~paris/ D'après le cours de Jean-Philippe GURECKIHTML Deug STPI 1ère année 2 Sommaire • Qu'est-ce que HTML ? 4 • Convention d'écriture 5 • Structure HTML 6 • Le codage des couleurs 7 • Les noms de fichiers 8 • L'entête <head></head> 11 • Le corps <body></body> 14 • Les listes 22 • Les Lignes horizontales 27 • Les liens 29 • Les images 34 • Les tableaux 40 • Les cadres 48 • Les feuilles de styles (CSS) • Projet 57 Deug STPI 1ère année 3 Table des matières • Qu'est-ce que le langage HTML ? 3 • Conventions d'écriture 4 • Structure d'un document HTML 5 • Le codage des couleurs 6 • Les noms de fichiers 8 • L'entête : <HEAD> </HEAD> 11 • La balise META 12 • Le corps : <BODY> </BODY> 13 • Les options du BODY 14 • Le texte 15 • Le codage des caractères accentués 16 • Mise en forme des caractères 17 • Mise en forme des paragraphes 18 • Les listes 19 • Les options des listes 20 • Création de lignes horizontales 21 • Les liens externes 22 • Les liens internes 23 Deug STPI 1ère année 4 Table des matières • Les images 24 • Les images animées et images-map 25 • Les tableaux 26 – Structure générale d'un tableau 27 – Les tableaux : <TABLE> </TABLE> 28 – Les lignes : la balise <TR> </TR> 29 – Les cellules : la balise <TD> </TD> 30 – Un exemple de tableau complexe 32 • Les cadres 33 – La structure des cadres : <FRAMESET> </FRAMESET> 34 – Le contenu des cadres : <FRAME> 37 – Un exemple de cadres complexe 39 • Les feuilles de style CSS – La création de style – Les feuilles de style externes – Les propriétés de style Deug STPI 1ère année 5 Qu'est-ce que HTML ? • Langage de description de page qui permet de coder de manière simple : – le texte de la page – les instructions de mise en forme – les appels aux fichiers externes – les appels aux pages liées • Une question ? Un site http://www.commentcamarche.net/ • Besoin d'un logiciel ? Un site http://framasoft.org/ Deug STPI 1ère année 6 Qu'est-ce que HTML ? • Universel car les mises en forme sont exprimées à l'aide de balises qui modifient l'affichage interprété au moment de l'utilisation et non compilées. – Les balises sont des mots-clés écrits entre un < et un > – Par exemple : <body>, <b>, <br>) • Peut être enrichi à l'aide de langages de programmation (Java, Javascript, ActiveX) • Fonctionnalités multimédia automatisées (normalement :-) Deug STPI 1ère année 7 Conventions d'écriture • Une page HTML est un fichier ASCII (texte) • Elle est tapée avec un traitement de texte (ex : Notepad++) et enregistrer avec le suffixe .html ou .htm • Mais surtout ne pas utiliser le format HTML de World! • Un commentaire s'écrit entre <!-- et --> Deug STPI 1ère année 8 Structure HTML • Commence toujours par la balise <html> pour activer l'interprète HTML • Finit toujours par la balise </html> • Comporte toujours 2 parties. Deug STPI 1ère année 9 Structure HTML • Pour les pages sans frames – L'entête entre les balises <head> et </head> – Le corps entre les balises <body> et </body> • Pour les pages avec frames – L'entête entre les balises <head> et </head> – Les cadres entre les balises <frameset> et </frameset> Deug STPI 1ère année 10 Le codage des couleurs • Pour être universel, le codage des couleurs en HTML s'appuie sur le modèle RVB (Rouge - Vert - Bleu). • Chaque couleur affichée est décomposable en 3 couleurs primaires • Chaque couleur primaire prend sa valeur entre 0 et 255. • La couleur décrite par (0,0,0) est le noir. • La couleur décrite par (255,255,255) est le blanc. Deug STPI 1ère année 11 Le codage des couleurs • La palette complète des couleurs est décrite par toutes les valeurs de triplet possible entre le noir et le blanc. – Le rouge est décrit par (255,0,0) • Le codage se fait en hexadécimal sur 3x2 chiffres (2 par couleur primaire) précédés par le caractère # – Le noir est représenté par #000000, le blanc par #FFFFFF et le rouge par #FF0000 Deug STPI 1ère année 12 Les noms de fichier • Les fichiers HTML ont deux extensions possibles : .htm et .html • La première page d'un site est en général appelée index.html • Si aucun fichier n'est précisé lors de la visite d'un site, c'est ce fichier qui est recherché par défaut sur le site par l'interprète HTML Deug STPI 1ère année 13 Les noms de fichier • Les fichiers images sont de deux types : – Les images JPEG, principalement pour les images de qualité photographique • Leur extension est .jpg • Elles offrent une possibilité de compression intéressante pour les utilisateurs ayant une connexion à faible débit. – Les image GIF, pour les images de tout type et pour les images animées. • Leur extension est .gif • Elles sont plus lourdes. Deug STPI 1ère année 14 Les noms de fichier • Les pages Web qui sont atteintes par des liens, les images qui sont affichées, les sons ou vidéo qui sont joués à l'aide de plugins sont des fichiers dont il faut donner le nom dans certaines balises. Deug STPI 1ère année 15 Les noms de fichier • Si le fichier est stocké sur le même site que la page appelante, il faut toujours indiquer les noms de fichiers sous leur forme relative, c'est à dire indiquer en plus de leur nom, leur chemin d'accès par rapport à la page qui est affichée – . pour désigner le même répertoire – .. pour le répertoire père • Si le fichier est stocké sur site web différent de la page appelante, il faut utiliser la notation absolue – toujours commencer le nom du fichier par http://… – il faut reprendre ce qui est affiché dans la barre d'adresse du navigateur Deug STPI 1ère année 16 Les noms de fichier japelle.html www.toto.com www.tutu.com encore_plus_bas plus_bas jerecois.html http://www.tutu.com/plus_bas/enco re_plus_bas/jerecois.html encore_plus_bas plus_bas_aussi jerecois.html www.toto.com plus_bas japelle.html ../plus_bas_aussi/encore_plus_bas/jereco is.html Deug STPI 1ère année 17 L'entête <head></head> • Contient des données "informatives" sur la page • Est placé immédiatement après la balise <html> • <title>…</title> change le titre de la fenêtre dans laquelle la page s'affiche Deug STPI 1ère année 18 L'entête <head></head> • En fonction des options déclarées, <meta> va permettre de faciliter la recherche de la page ou de passer automatiquement à une autre page. Deug STPI 1ère année 19 La balise META • <meta name="Author" content="auteur1[,auteur2,…]"> permet de rechercher la page dans certains moteurs de recherche en se basant sur les noms des auteurs indiqués Deug STPI 1ère année 20 La balise META • <meta name=" Keywords " content="mot-clé1[,mot-clé2,…]"> permet de rechercher la page dans certains moteurs de recherche en se basant sur les mots-clés indiqués Deug STPI 1ère année 21 La balise META • <meta http-equiv="Refresh" content="n;url=adresse de page"> permet de passer automatiquement à un autre site après un certain délai –n = délai en seconde avant l'appel de la deuxième page. –adresse de page = adresse (absolue ou relative) de la deuxième page Web à afficher Deug STPI 1ère année 22 Exercice 1 et 2 Écrivez le texte suivant et expliquez ce qui se passe. Ensuite lancez votre moteur de recherche préféré Tapez les mots clefs STPI, Deug et HTML et expliquez ce qui se passe. Deug STPI 1ère année 23 <html> <head> <title>TP Bureautique : Deug STPI.</title> <meta name="Keywords" content="STPI, Deug, HTML"> <meta name="Author" content=" Paris & Sahnoune"> <meta http-equiv="Refresh" content="5; URL=http://www.lita.univ-metz.fr/~paris/"> </head> <body> Dans quelques instants vous allez passez automatiquement à une nouvelle page. </body> </html> Deug STPI 1ère année 24 Le corps <body></body> • Permet de définir l'apparence du fond de l'écran et la couleur des éléments textuels • 1 balise Body et 1 seule par page • Elle peut s'employer seule ou avec une ou plusieurs de ses options • Est placée immédiatement après la balise </head> Deug STPI 1ère année 25 Le corps <body></body> • </body> est placé immédiatement avant la balise </html> • Est absent dans les pages décrivant des frames Deug STPI 1ère année 26 Les options du BODY <body bgcolor="#RRVVBB" background="nom de fichier" text = "#RRVVBB" link = "#RRVVBB" vlink = "#RRVVBB" alink = "#RRVVBB"> BGCOLOR couleur de fond de la fenêtre BACKGROUND image répétée sous forme de mosaïque en fond TEXT couleur du texte ordinaire (si omis, utilisation des couleurs standards) LINK couleur du texte/de la bordure d'une image qui est un lien (si omis, utilisation des couleurs standards) VLINK couleur du texte/de la bordure d'une image qui est un lien amenant sur une page déjà vue (si omis, utilisation des couleurs standards) ALINK couleur prise par un lien tant qu'on clique dessus (peu utilisé) Toujours mettre un uploads/s3/ 0077-cours-html-css.pdf

Tags
Administrationannée fichier style balise l'option
Documents similaires
  • 34
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager