 cours html pour débutants 1introduction 2mise en forme du texte 3les images 4les liens 5les listes 6les tableaux 7les formulaires 8les cadres 9vidéo son 10deplacez vos pages vers un serveur web introduction tout d abord qu estce qu une page web eh bien c est un fichier texte avec l extension htm ou html qui contient du texte et l emplacement des images pour définir la manière dont tous ces éléments seront affichés on utilise un langage de balisage le html c est bien un langage de description et non un langage de programmation les fichiers html ne sont pas compilés et on peut toujours voir le code de la page tel quel l a écrit son auteur une page basique une page web qui affiche juste un mot bonjour ouverte avec un éditeur de texte tel que blocnotes de windows contient ceci bonjour les mots incompréhensibles en tout cas pour l instant qui se trouvent entre les signes et sont des balises du langage html vous avez sûrement remarqué que pour chaque balise on retrouve la même balise mais précédée par un slache par exemple et la première balise s appelle ouvrante et l autre fermante ce qui ce trouve entre la balise ouvrante et la balise fermente est modifié par ces balises par exemple  bonjour  bonjour sera affiché en gras car il est entre les balises et  c est le principe du html principes du html toutes les balises d une page web écrite en html sont placées entre les balises et les lettres peuvent être écrites en majuscules et ce qui signale au navigateur qu il a affaire à du code html ensuite la page se divise en deux parties et head tête en anglais est la partie entête de la page tout ce qu elle contient n est jamais affiché elle peut contenir des feuilles de style que nous verrons plus loin des applets java ou les balises et le texte qui se trouve entre ces dernières est affiché dans la barre de titre tout en haut de la fenêtre du navigateur la partie body contient tout le contenu qui sera affiché avec ce schéma vous devriez y voir plus clair indique le début d un document html début de l entête u document le titre de la page titre affiché dans la barre de titre fin de l entête début du corps du document html bonjour contenu du corps sera affiché fin du corps du document fin du document html astuce pour afficher le code source d une page web que vous visitez dans votre navigateur cliquez sur le menu affichage puis sur code source ou afficher le code source la plupart des balises peuvent avoir des attributs leur propriétés ces attributs sont ajoutés à la balise ouvrante bonjour la balise permet d affecter une police une couleur une taille et un alignement on ajoute à la balise un attribut face et on lui donne la valeur de verdana donc se qui se trouve entre et sera affiché en verdana voici un schéma de cette syntaxe balise la balise utilisée par exemple ou attribut attribut de cette balise par exemple l attribut face pour la balise font nous verrons ensuite d autres attributs de font un attribut a toujours une valeur il est donc suivi d un signe une balise peut avoir plusieurs attributs qui doivent être séparés par un espace valeur la valeur d un attribut est toujours place entre guillemets voilà vous connaissez maintenant les principes du html vous pouvez à présent passer à la leçon suivante mise en forme de texte les marqueurs font et basefont on peut créer maintenant une page web qui affichera la phrase c est un essai pour cela procédez comme suit cliquez sur démarrer programmes accessoires blocnotes et tapez le code suivant c est un essai puis cliquez sur fichier enregistrer pour le format choisissez tous écrivez le nom de votre fichier suivi de l extinction htm ou html personnellement je choisis html et cliquez sur enregistrer comme sur l image en dessous nous procéderont ainsi pour toutes les pages qu on va faire ensuite doublecliquez sur votre fichier et il se chargera dans votre navigateur par défaut revenons à notre page si vous écrivez simplement du texte entre les balises body le texte sera affiché dans la police par défaut de votre navigateur il sera aligné à gauche et aura la taille par défaut qui est de 3 3 n est exprimé ni en points ni en pixels mais en unité spéciale qu va de 1 à 7 la taille ne sera cependant la même dans tous les navigateurs elle dépend de la configuration du navigateur voici un texte de la taille 7 texte pour voir le changement de la taille cliquez sur affichage taille du texte choisissez une valeur différente de la précédente vous verrez alors que la taille de ce texte change la taille 3 avec un affichage normal correspond à 12 points vous pouvez changer la taille par défaut de votre page à l aide de la balise qui n a pas de balise fermante son seul attribut est size elle doit être placé au début de la page après exemple bonjour vive le html les deux phrases seront affichées en taille 4 au lieu de 3 essayons maintenant de affecter une police à notre phrase c est un essai nous avons mis notre texte entre les balises font avec un attribut face qui permet d affecter une police à une chaîne de caractères et nous lui avons affecté la valeur comic sans ms notre texte est maintenant affiché en comic mais que se passeratil s il n y a pas cette police sur l ordinateur de l internaute qui visite votre page les caractères seront affiché dans la police par défaut une police que ne contrôlez pas pour résoudre ce problème vos pouvez choisir une police de remplacent en utilisant la syntaxe suivante vive le html si la police comic est absente le message sera affiché en verdana et si cette dernière manque le texte sera affiché dans n importe quelle police avec empattement shérif et si vous voulez afficher votre texte en n importe quelle police sans empattement la valeur de font est alors sanssherif voici les différentes propriétés de face la police de la chaîne de caractères exemple test size la taille de la chaîne de caractères exemple test la taille peut aussi être exprimé de manière relative à la taille par défaut ou à la taille basefont si vous l avez définie exemple test si basefont est 2 test sera affiché en en taille 42 2 align l alignement de la chaîne de caractères ses valeurs possibles sont right aligner à droite left sa valeur par défaut à gauche center centrer et justify pour justifier le texte exemple test color la couleur de la chaîne de caractères regardez plus bas dans ce chapitre pour savoir comment exprimer la couleur en html les couleurs la couleur en html s exprime de deux manières par un nom voici les noms des 16 couleurs les plus utilisées nom de la couleur nom html code hexa echantillon bleu ciel aqua 00ffff noir black 000000 fuchia fuchsia ff00ff gris gray 7f7f7f vert green 007f00 vert citron lime 00ff00 marron maroon 7f007f bleu marine navy 00007f olive olive 7f7f00 pourpre purple 7f007f rouge red ff0000 gris clair silver 7f007f vert sarcelle teal 007f7f blanc white ffffff jaune yellow ffff00 bleu blue 0000ff par la valeur hexadécimale basée sur 16 qui va de 0 à f de la couleur 0000ff est la valeur hexadécimale du bleu pour obtenir le code hexa de la couleur que vous voulez il faut connaître sa valeur rvb rouge vert bleu vous pouvez l obtenir dans votre logiciel d édition d images à part microsoft paint choisissez la couleur qu il vous faut normalement quand vous cliquez dessus on doit vous montrer ces informations par exemple dans paint shop pro dans ce logiciel on montre la valeur rvb et on dit tout de suite le code html si ce n est pas le cas dans votre logiciel ouvrez la calculatrice windows dans les accessoires entrez d abord la valeur de r puis cliquez sur hex notez le résultat puis faites pareil pour entrer une des trois valeurs cliquez sur decdecimal pour indiquer que vous entrez une valeur décimale puis cliquez sur hex pour convertir pour v et b enfin mettez le résultats dans l ordre en les précédant d un ff0099 r v b attention vous devez avoir 6 signes en tout 2 pour le rouge 2 pour le vert et deux pour le bleu si vous obtenez un seul signe pour le bleu par exemple mettez un zéro devant pareil si la valeur est nulle mettez deux zéros vous pouvez aussi modifier la couleur de tout le texte de la page en ajoutant à l attribut text affectez à cet attribut comme valeur une couleur hexa d autres balises de mise en forme pour mettre un texte en gras mettez le entre le balises et  vous pouvez utiliser en même temps la balise et pour mettre votre texte en italique par exemple l important quand vous appliquez plusieurs balises sur le même texte c est de respecter une certaine symétrie  mon texte à moi  ce n est pas bon si vous commencer par la balise  vous devez placer la balise en dernier après vient donc doit être placé juste avant etc voici le bon exemple  mon texte à moi il y a beaucoup d autres balises comme pour modifier le texte les voici balise description   italique  gras préférable à  police fixe caractères de même largeur le i sera de la même largeur que le k souligné barré  paragraphe distinct en retrait etc titres en html il y a aussi 6 niveau de titres différents voici la syntaxe  mon titre  mon titre sera affiché sur une ligne distincte et aura la taille d environ 36 points pour diminuer cette taille il faut modifier le chiffre après h ça va de 1 à 6 plus le chiffre est proche de 6 plus la taille sera petite lignes horizontales pour tracer une ligne horizontale sur votre page vous avez à vote disposition la balise elle possède plusieurs attributs width la largeur de la ligne en pixels vous pouvez l indiquer en par rapport à la largeur de la fenêtre exemple size la l épaisseur du trait par rapport au trait d origine si vous mettez size 3 l épaisseur du trait sera trois fois plus grande que l épaisseur par défaut color la couleur de la ligne noshade ajoutez ceci comme un attribut mais il n as pas de valeur si vous voulez enlever l ombrage par défaut passages à la ligne pour forcer le passage à la ligne suivante mettez simplement sans balise de fermeture vous utiliserez la balise faire des paragraphes en faite la balise revient à deux balises donc entre deux paragraphes vous aurez une ligne vide caractères spécieux certains caractères comme à ou é sont propres à la langue française ils ne seront donc pas toujours affichés de la même façon sur tous les navigateurs au monde pour éviter ce probleme dans votre code vous devez écrire un nom spécial pour chaque caractère français par exemple dans le code de ma page je ne vais par écrire télécharger mais télécharger on peut aussi écrire le code de la lettre à la place de son nom le code é est 201 la plupart des éditeurs de cites même simples font cette opération automatiquement voici les noms des caractères spécieux caractère spécial code iso html nom html à à à â â â ä ä ä æ æ æ ç ç ç è è è é é é ê ê ê ë ë ë î î î ï ï ï ô ô ô ö ö ö ù ù ù û û û espace insécable les images dans ce chapitre vous allez apprendre à insérer des images dans vos pages web les redimensionner et les positionner les formats d images du web tous les navigateurs qui supportent les images peuvent afficher les images gif et des images jpeg les deux sont des formats bitmap l information sur couleur est enregistrée pour chaque pixel ce qui n est pas le cas des images vectorielles qui occupent moins de place mais ne sont pas supportées par les navigateurs on utilise généralement le format jpeg pour des photos et le format gif pour les images à traits réguliers qui n utilisent pas beaucoup de couleurs le format gif gère également la transparence on peut choisir une couleur qui sera transparente c est intéressent quand on une image d arrière plan mais une image gif ne peut pas comporter plus de 256 couleurs voilà la syntaxe élémentaire pour afficher une image l image sera affiché que si l image se trouve dans le même répertoire que la page web sinon vous verrez ce signe il y a deux manières d indiquer l emplacement de l image de manière absolue sur internet exemple http moncitecom images monimagegif cette méthode est inefficace quand vous allez déplacer vos pages vers le serveur vous allez devoir changer touts les chemins d accès de manière relative à l emplacement de la page dans le répertoire ou se trouve notre page il y a un sousdossier appelé images et l image qui s y trouve s appelle 1gif le chemin de l image s écrit ainsi sousrépertoire l image cette méthode est beaucoup plus efficace que la précédente vous créez vos pages sur votre ordinateur ensuite vous déplacez le répertoire qui contient toutes les pages et les sousrépertoires d images et vous n aurez pas changer les chemins d accès texte de remplacement si votre image ne peut pas être affichée soit car un vieux navigateur n affiche pas les images soit car les chemins d accès sont incorrects vous pouvez écrire un texte de remplacement qui sera alors affiché on utilise pour ça l attribut de img alt ca donne ceci dans internet explorer si l image ne peut pas être affichée dimensions des images le texte est aussi affiché quand l image n est pas encore chargée t la plupart des navigateurs affichent ce texte dans une infobulle quand la souris passe sur l image vous pouvez indiquer les dimensions de l image si les dimensions initiales ne vous conviennent pas à l aide des attributs de img width pour indiquer la largeur en pixels height pour indiquer la hauteur e pixels bordure autour de l image vous pouvez indiquer la bordure de l image en pixels à l aide de l attribut border alignement de l image vous pouvez aligner l image par rapport au texte à l aide de l attribut align il ne peut avoir qu une des ces valeurs left à gauche par rapport au texte right à droite par rapport au text center pour mettre l image au milieu top pour aligner en haut et bottom en bas enfin pour définir l espacement horizontal entre le texte et l image en pixels vous utiliserez l attribut hspace de img et vspace pour l espacent vertical résumé les attributs de src le chemin du fichier de l image alt texte de remplacement width largeur de l image height hauteur de l image border la bordure autour de l image hspace espacement horizontal autour de l image vspace espacement vertical autour de l image liens hypertexte dans ce chapitre vous allez apprendre à créer des liens et des signets à partir de ce chapitre vous allez pouvoir vraiment commencer à créer des pages web et à les relier entre elles par des liens hypertexte les signets commençons par les signets un signet permet de marquer par un nom une ligne de la page et d y envoyer le visiteur de la page lorsqu il cliquera sur un lien voici la syntaxe pour créer un signet   nom du signet est le nom que vous voulez donnez au signet entre les balises et vous pouvez mettre la première lettre de la ligne à marquer et continuer le texte après le lien vers un signet de la même page pour faire un lien qui va pointer vers un signet on utilise la même balise  mais avec un autre attribut  texte cliquable nomsignet est le nom du signet vers lequel pointe le lien précédé d un texte cliquable est le texte sur lequel on va cliquer pour aller vers le signet désigné dans href lien vers une page web maintenant faisons un lien vers une autre page web le chemin d accès s écrit exactement de la même manière que pour les images soit de manière relative par rapport l emplacement de la page si les deux pages sont dans le même dossier mettez juste le nom du fichier soit de manière absolue sur internet exemples  ma page d accueil yahoo  lien vers un signet d une autre page web vous pouvez faire pointer un lien vers un signet d une page distincte en utilisant la syntaxe suivante  chapitre 5 de la page 3  donc dans la valeur de href vous mettez l adresse du fichier puis un dièse et le nom du signet target il existe un autre attribut qui s emploie avec   c est target qui précise si le lien doit s ouvrir dans la même ou dans une nouvelle fenêtre si vous voulez que le lien s ouvre dans une fenêtre distincte affectez a target la valeur blanc couleurs des liens malheureusement on ne peut pas modifier la couleur des liens avec la balise mais on peut modifier la couleur de tous les liens de la page en ajoutant à l attribut link vous pouvez lui affecter comme valeur une couleur hexa ceci modifiera la couleur des liens qui n ont pas encore étés visités en revanche les liens visités seront affichés en marron couleur par défaut si vous n ajoutez pas l attribut vlink a c est le même principe que link il faut lui affecter une couleur il existe un autre attribut de pour modifier la couleur des liens au moment quand vous cliquez dessus c est alink image cliquable on peut aussi placer entre les balises  une image à l aide de la balise cette image sera cliquable astuce quant votre lien est une image l image est automatiquement détourée d une bordure bleue si vous voulez l enlever ajouter l attribut border à img et affectez lui la valeur 0 les liens email on peut créer un lien vers une adresse email pour faire ça affectez à href come valeur une adresse email précédée de mailto quand on cliquera sur un lien email un nouveau message s ouvrira dans le client de messagerie par défaut ayant pour destinataire l adresse email du lien les liens de téléchargement pour faire un lien vers un fichier affectez href comme valeur le chemin du fichier à télécharger voilà vous savez maintenant comment faire des liens listes il existe deux sortes de listes en html les listes numérotées et les listes à puces listes à puces voici un exemple de liste à puces elément 1 elément 2 elément 3 voilà cette liste elément 1 elément 2 elément 3 comme vous le voyez pour créer une liste à puces on utilise la balise et on place ensuite chaque élément de la liste entre les balises et il existe un attribut de pour changer la puce c est type ses trois valeurs possibles sont disc valeur par défaut un point noir circle un point blanc avec un contour noir square un point noir carré liste numérottée pour créer une liste numérotée la syntaxe est la même mais au lieu du marquer on utilise order list en anglais voici un exemple de liste numérotée elément 1 elément 2 elément 3 voici cette liste 1 elément 1 2 elément 2 3 elément 3 il existe aussi l attribut type pour les listes numérotées ses valeurs possibles sont différentes a les éléments de la liste seront numérotés a b c d a pareil que le précédent mais en minuscules a b c d i numérotée en chiffres romains i ii iii iv i en chiffres romains minuscules i ii iii iv v 1 numérotée en chiffres normaux 1 2 3 4 si vous n utilisez pas l attribut type la liste sera numérotée de cette manière il y a un autre attribut de start il sert à définir le début de la liste numérotée si la valeur de type est i et vous voulez que la numérotation commence par iv il faut donner cette valeur à start plusieurs niveaux de listes on peut imbriquer plusieurs listes les unes dans les autres pour avoir plusieurs niveaux de liste exemple elément 1 elément 2 sousélement1 sousélement2 sousélement3 elément 3 voici cette liste 1 elément 1 2 elément 2 sousélément 1 sousélément 2 3 elément la liste à puces sera décalée à droite par rapport à la liste numérotée créant ainsi plusieurs niveaux de liste vous pouvez imbriquer le nombre de listes que vous voulez sur internet on trouve rarement plus de trois niveaux de liste astuce chaque élément d une liste peut être un lien et être modifié par une autre balise comme ou  accueil téléchargements nous contacter les tableaux les tableaux sont des éléments très importants du web même si vous ne les voyez pas toujours la plupart des mises en page sophistiquées utilisent des tableaux pour placer les différents éléments sur la page dans ce chapitre vous allez apprendre à créer des tableaux et à les cacher pour créer des mises en page tableaux simples pour déclarer un tableau en html on utilise les marqueurs et ensuite pour faire une ligne du tableau on ajoute les marqueurs et enfin pour créer une cellule sur une ligne on se sert des balises et ainsi on obtient la syntaxe d un tableau élémentaire ce tableau sera une simple cellule qui ne sera affiché que s il y a des caractères entre les balises et les navigateurs n affichent pas des cellules vides voici la syntaxe d un tableau deux sur deux cellules le début du tableau définit le début d une ligne 1 2 crée 2 cellules sur la 1ère ligne met fin à la 1ère ligne début de la 2ème ligne 3 4 crée 2 cellules sur la 2ème ligne met fin à la 2ème ligne met fin au tableau fusionner les cellules maintenant qu on sait faire un tableau standard comment faire de tableaux avec des cellules de tailles différentes ou fusionnés comme ça pour obtenir ce résultat il faut fractionner ou diviser les cellules pour ça on va utiliser les attributs du marqueur colspan et rowspan on utilisera colspan pour fractionner une cellule horizontalement et rowspan verticalement voici un exemple de fractionnement horizontal deux cellules normales une cellule fusionnée elle prend la place de deux cellules son code on a mis comme contenu de la cellule un espace insécable pour forcer l affichage de la cellule une cellule n est jamais affichée en html si elle ne contient rien donc la valeur de colspan est le nombre de cellules que la cellule fractionnée doit occuper sur sa ligne voilà un exemple de fractionnement vertical 1 3 2 1cellule sur la 1ère ligne 2cellule sur la 2ème ligne 3 cellule fractionnée sur la 1ère ligne quand vous ajoutez un rowspan a une cellule la cellule ou les cellules qui est sont en dessous sera automatiquement decalée à droite et une partie de la cellule fractionnée prendra sa place s il avait une cellule sous la cellule 3 elle serait automatiquement décalée vers la droite et le tableau serait comme ça 1 3 2 4 il est très important de comprendre le principe de division des cellules alors relisez bien ce chapitre liste des attributs de table et de td il existe plein d autres attributs pour ou les voilà mdash border très important pour cacher les tableau il définit la bordure en pixels du tableau mdash cellspacing l espace en pixels entre les cellules mdash cellpadding l espacement en pixels entre le contenu du tableau et les cellules mdash background l image d arrière plan du tableau mdash bgcolor couleur d arrière plan du tableau mdash width largeur du tableau en pixels ou en pourcentage par rapport à la largeur de la fenêtre du navigateur mdash height hauteur du tableau en pixels ou en pourcentage mdash bordercolor couleur de la bordure du tableau mdash bordercolordark couleur de l ombrage du tableau mdash bordercolorlight couleur de l ombrage en haut de la bordure astuce si vous voulez enlever l effet 3d de la bodure affectez la même valeur aux trois derniers attributs mdash align l alignement du tableau peut avoir comme valeur left right ou center mdash rules cet attribut spécifie quelles bordures internes d un tableau doivent être affichées les valeurs possibles sont none aucune bordure valeur par défaut groups bordures apparaissent seulement entre les groupes de lignes thead tfoot et tbody que nous verrons plus tard rows bordures horizontales entre chaque paire de lignes cols bordures verticales entre chaque paire de colonnes all bordures entre toutes les cellules mdash title titre affiché sous le tableau mdash width la largeur de la cellule en pixels ou e pourcentages par rapport à la taille du tableau mdash height la hauteur de la cellule en pixels ou en pourcentages par rapport à la taille du tableau mdash align l alignement horizontal du contenu dans la cellule mdash valign l alignement vertical du contenu dans la cellule ses valeurs possibles sont top bottom ou middle par défaut mdash rowspan expliqué plus haut mdash colspan expliqué plus haut mdash background image d arrière plan de la cellule mdash bgcolor couleur d arrière plan cellules de titres une cellule de titre est la même chose qu une cellule normale auf que le texte de cette cellule est en gras mettez simplement à la place de td th possède les mêmes attributs que td division d un tableau en parties logiques on peut diviser un tableau en trois parties mdash en tête du tableau mdash le corps du tableau mdash le pied du tableau si votre tableau organise les éléments de votre page vous pouvez placer les lignes de votre tableau ou se trouve le titre entre les balises et les lignes ou se trouve le texte entre les balises et et le texte en bas sur le copyright entre les balises et voici un tableau organisé en trois parties logiques titre mon contenu tout droits réservés c 2003 en fait ces balises ne sont pas très importantes je vous les montre juste parce que dans ces cours je présente toutes les balises et attributs du html enfin presque toutes certaines ne s utilises qu avec d autres langages de programmation le seuls avantages de ces marqueurs sont une meilleure organisation des éléments du tableau et l attribut rules de table ne fonctionne que si vous divisez votre tableau avec ses marqueurs utilisation de tableaux pour créer des mises en pages maintenant que vous connaissez bien les tableaux je vais montrer comment les cacher pour faire des mises en pages tout d abord mettez les attributs cellpadding cellspacing et border à 0 ensuite ajoutez l attribut valign à chaque balise td et donnez lui la valeur de top les formulaires le seul moyen de recueillir des information sur vos visiteurs reste les formulaires pour créer un formulaire vous utiliserez les balises et form possède plusieurs attributs obligatoires method la méthode utilisée pour envoyer les données du formulaire elle peut avoir la valeur get ou post on utilisera toujours la seconde valeur action indique au formulaire ou envoyer les données elle peut les envoyer vers un programme de traitement dans ce cas indiquez l emplacement de ce fichier les formulaires peuvent aussi envoyer les données sur une adresse email dans ce cas mettez comme valeur l adresse email précédé de mailto pour créer un élément du formulaire on utilise la balise qui ne comporte pas de marqueur de fermeture pour indiquer la nature de input on utilise l attribut type voici ses différentes valeurs text champ de saisie password mot de passe checkbox case à cocher submit bouton pour envoyer les données du formulaire reset bouton efface les données saisies et ne les envoie pas radio un bouton radio chaque élément du formulaire doit avoir un nom pour l indiquer on utilise l attribut name de input pour faire un champ multiligne on utilise les marqueurs et le texte qui se trouve entre ces balises sera affiché dans le champ avant que le modifiez ces balises possèdent comme les autres marqueurs des formulaires l attribut name et deux autres attributs encore cols pour la largeur du champ en caractères et rows poua la hauteur en lignes pour faire un menu déroulant on utilise les marqueurs et ce marqueur a l attribut name pour faire une sélection du menu on utilise les marqueurs et pour regrouper les boutons radios li faut leur affecter le même nom et leur ajouter à chacun l attribut value dont la valeur sera envoyée si le bouton est sélectionné les boutons envoie et effacer ont un attribut value sa valeur sera affichée sur le bouton voilà un exemple d un formulaire utilisant tous ses éléments entrez votre nom entrez votre mot de passe je visite netall tous les jours combien de fois par semaine visitezvous netall 1 3 5 tous les jours aimezvous mes cours oui non un commentaire entrez votre commentaire cliquez ici pour voir cet exemple les cadres l utilité des cadres les cadres ou les frames permettent d afficher plusieurs pages dans la même fenêtre du navigateur c est très pratique quand votre site comporte beaucoup de pages pour modifier le menu de navigation par exemple vous devez modifier toutes les pages en utilisant la méthode classique alors qu avec les frames vous modifiez juste page qui contient le menu mise en place des cadres voici le code d une page composée de deux cadres dans le cadre d en haut on affiche la page menuhtml et en bas la page contenuhtml cliquez ici pour afficher cette page je vais expliquer ce code plus loin cadres le code de menuhtml ici doit se trouver le menu de navigation le code de contenuhtml le contenu comme vous pouvez le constater on remplace et par et on ajoute à ce marqueur l attribut rows qui indique au navigateur qu il faut afficher les cadres les uns sous les autres la valeur de rows indique le nombre de cadres et leurs dimensions on indique les dimensions des cadres en pourcentages par rapport à la largeur de la fenêtre on met une pour indiquer que le cadre occupe l espace restant et on sépare les dimensions des cadres par une virgule dans notre exemple la valeur de rows est 20 ça veut dire que le 1èr cadre en haut occupe 20 de l écran et le 2ème l espace restant soit 80 maintenant pour indiquer la page à afficher dans chaque cadre on utilise les marqueurs il n a pas de balise de fermeture et il a deux attributs src sa valeur est le chemin d accès au fichier à afficher dans le cadre et name il donne un nom au cadre vous verrez plus loin pourquoi comme vous le voyez sur l exemple si frameset indique qu il y a 3 cadres il faut ensuite 3 marqueurs pour indiquer quelle page afficher dans chaque cadre si vous remplacez l attribut rows de frameset par cols les cadres seront verticales et les uns à coté des autres cliquez ici pour voir le deuxième exemple astuce vous pouvez aussi indiquer la taille des cadres en pixels mais la taille d au moins d un cadre doit occuper l espace restant comment combiner des cadres verticaux et horizontaux je veux faire par exemple une page composée de trois cadres d une ligne en haut et deux colonnes en bas je commence par définir la ligne les deux colonnes en bas en occupent bien une donc je suis obligé d indiquer deux lignes maintenant j indique l emplacement de la page à afficher dans la première ligne et enfin au lieu de mettre un autre marqueur frame je mets un 2ème frameset mais celuici composé de deux colonnes j indique l emplacement des pages à afficher dans les colonnes et je mets deux balises de fermeture puisque on a mis deux frameset d ouverture finalement on obtient ceci voici le schéma de cette page 1ère ligne 20 normale 2ème ligne 80 composée de deux colonnes définie par un frameset cols 30 70 empêcher le redimensionnement des cadres vous avez sûrement remarqué que quand vous pointez la souris sur la ligne entre deux cadres le curseur change et vous pouvez redimensionner les cadres pour interdire à l utilisateur de redimensionner les cadres ajoutez au marqueur frame qui représente le cadre dont vous voulez interdire le redimensionnement noresize vous pouvez aussi régler les ascenseurs de chaque cadre avec l attribut scrolling ses valeurs possibles sont yes l ascenseur apparaît toujours no jamais et auto juste si tout le contenu du cadre n est pas visible les liens et les cadres si une page affichée dans un cadre comporte un lien et on clique dessus la page de destination sera affichée dans le même cadre pour afficher la page dans un cadre de votre choix ajoutez au lien l attribut target et donnez lui comme valeur le nom du cadre dans lequel la page de destination doit être affichée par exemple le lien se trouve dans le cadre qui contient le menu de navigation et les pages doivent être affichées dans le cadre dont la valeur de name est content la syntaxe du lien sera suivante  nouscontacter vidéo et son dans ce chapitre vous allez apprendre à insérer du multimédia dans vos pages web le son pour insérer un son d accompagnement dans votre page vous utiliserez la balise elle n a pas de marqueur de fermeture voici les attributs de embed src source du son chemin d accès au fichier son autoplay donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement loop répétition du son donnez lui comme valeur le nombre de fois qu il faut répéter le son vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu une fois la vidéo pour insérer une video dans votre page vous utiliserez comme pour le son la balise voilà ses différentes valeurs pour la video src source de la vidéo chemin d accès au fichier vidéo autoplay donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement ou false si vous ne le voulez pas loop répétition du son donnez lui comme valeur le nombre de fois qu il faut répéter le son vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu une fois height hauteur en pixels du cadre dans lequel la vidéo sera affichée width largeur en pixels du cadre dans lequel la vidéo sera affichée controller donnez lui la valeur true si vous voulez qu une barre avec les boutons play stop pause soit affichée sous la vidéo sinon donnez lui comme valeur false insérer une animation flash dans votre page vous pouvez insérer dans votre page une animation flash fichiers swf voilà le code à mettre remplacez les mots largeur hauteur et monanimflashswf par vos paramètres et l animation sera affichée conclusion vous savez maintenant pas mal de choses sur le html et même si vous n avez retenu que la moitié des choses vous étés déjà bon en html et vous êtes capables de faire de belles pages web pour ces cours je me suis servi de quelques bons livres m holzschlag html4 série création express editions first interactive 2000 m martin comment créer son site web série comment faire campuspress 2001  