Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Dimension: px

Commencer à balayer dès la page:

Download "Introduction à HTML. 27 Février Damien DURVILLE HTML 1"

Bénédicte Lacroix
il y a 7 ans
Total affichages :

1 Introduction à 27 Février 2004 Damien DURVILLE 1

2 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière de communiquer un contenu But : support du web : échanger des informations (textes, images, documents, etc.) pouvoir renvoyer à d'autres documents (liens) 2

3 Ce que ce n'est pas Ce n'est pas un traitement de texte on ne produit pas un document mis en page pour toujours de manière fixe, mais un document avec des indications de mises en page Ex : pour écrire un titre : <H1> Voici mon titre </H1> le titre peut apparaître de manière différente suivant les navigateurs. 3

4 Manière de procéder Attribution de caractéristiques à tout le contenu à l'aide de balises balises : couple de délimiteurs de type <balise> et </balise> entre deux balises, le contenu a la caractéristique de la balise : <bal1> uda dgy igéloiuyéeg eyg gegyuy <bal2> dù d jmoidj joei iio hd nd lod ijdloi </bal2> </bal1> bal2 bal1 4

5 Difficultés Rien n'est fixe a priori il faut se mettre du côté de l'utilisateur final : que verra-t-il sur son ordinateur? la taille de la fenêtre d'affichage est variable les polices et leurs tailles sont variables tous les navigateurs ne comprennent pas de la même manière 5

6 Les normes suit des normes définies par le W3C (World Wide Web Consortium) traduction française de la norme 4.0 : rester au maximum dans la norme les navigateurs n'affichent pas forcément de la même manière ensuite... 6

7 Pour apprendre Utiliser des logiciels de composition (Dreamweaver, ou la plupart des navigateurs) voir le code généré, essayer de comprendre, modifier Des tutoriels sur le web, ou la norme ellemême Décortiquer les codes sources des pages intéressantes vues sur le web 7

8 Structure d'un document Une page web doit avoir la structure suivante <html> <head> (informations sur la structure du document, utilisées par le navigateur, mais non affichées) <title> Titre qui apparaît souvent sur la barre en haut de la fenêtre </title> </head> <body> Corps du document lui-même </body> </html> 8

9 Insertion d'images Pour insérer une image, doit indiquer où elle se trouve <img src="img/gif/image.gif"> 9

10 Création de liens On crée un lien avec la balise <a> pour aller sur le site du labo <a href= " Voilà un chouette site </a> même chose, mais en cliquant sur une image : <a href= " <img src="img/gif/logo.gif"> </a>

11 Mises en forme de texte Changer de taille de police <font size=3> Ecrit en plus gros </font> Sauter une ligne <br> Carctères spéciaux é : é è :è à : &agrave, etc... espace blanc :

12 Les tableaux Comment organiser la mise en page d'un document? a priori, tout est mis en ligne pour structurer une page : rien de tel que des tableaux Que permettent les tableaux? de créer des colonnes, des lignes de positionner les éléments de donner des indications de mises en page locales

13 Les tableaux Les balises pour les tableaux <table> : ouvre un tableau <tr> : ouvre une rangée (ligne) <td> : ouvre une cellule dans la rangée <table> <tr> <td> lkds kzdk dodu u </td> <td> :l dzio zij dpzoo </td> </tr> <tr> <td> Pjkld d odap </td> <td> kmld d,op pjdpu </td> </tr> </table>

14 Tableaux Les attributs des tables bgcolor : couleur de fond border : épaisseur des traits width : largeur cellspacing : espace entre les cellules cellpadding : marge à l'intérieur des cellules etc. Ex : <table border="3" cellspacing="0" bgcolor="#cc0000">

15 Tableaux Regroupements de colonnes avec colspan et rowspan <table width="800"> <tr> <td width="20%" rowspan="2">cell1</td> <td>cell2</td> </tr> <tr> <td>cell3</td> </tr> </table>

16 Mise en forme de blocs On peut donner des attributs de mise en forme à un bloc avec les balises div Ex : <div align="center" bgcolor="#f4567b" width="200"> </div> kj hwxh :o nua jios hdao daio ois h <img src=""> jsjijus jd jidp wjkxhxh cela permet de maîtriser localement la présentation

17 Feuilles de styles Fortement préconisées Permettent de regrouper la définition des styles dans un fichier indépendant Type : CSS (Cascading Style Sheets) traduction française de la norme :

18 Fonctionnement des feuilles de styles Appel de la feuille de styles dans le fichier html Dans l'entête du fichier <head> <link rel="stylesheet" href="styles_mssmat.css" type="text/css"> </head> appel d'un style <div class="mon_style"> kj hwxh :o nua jios hdao daio ois h <img src=""> jsjijus jd jidp wjkxhxh </div>

19 Fonctionnement des feuilles de styles Dans le fichier de styles (styles_mssmat.css).mon_style { } font-family:arial, Helvetica; background-color:#67d43a; font-style:italic; color:#000000; le nom commence a priori par un point "." le style est défini entre deux accolades : {} il faut absolument un point-virgule après chaque caractéristique

20 Fonctionnement des feuilles de styles On peut définir le style d'éléments prédéfinis redéfinir les liens pour tout le document : a {color:#ff0000;} a:hover {color:# ;} lien lien en survol donner un style de liens particulier localement : a.sommaire {color:#ff0000;} a:hover.sommaire {color:# ;} et dans le sommaire : <a href=" class="sommaire"> Le site </a>

21 Fonctionnement des feuilles de styles Dans le même esprit, définition du style de cellules : définir un style de cellules «navigation» td.navigation { } background-color:#2376a3; border: #67986 solid; border-width: 5px; dans le fichier html <table> <tr> <td class="navigation"> contenu </td> </tr> </table>

Documents pareils

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?