Cours de HTML suite. Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan.

Présentation au sujet: "Cours de HTML suite. Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan."— Transcription de la présentation:

1 Cours de HTML suite

2 Sommaire...  Tableaux : le chevauchement de cellules (avec colspan et rowspan). Tableaux : le chevauchement de cellules (avec colspan et rowspan).  Initiation. Initiation.  Mise en page d'un site Web grâce aux tableaux. Mise en page d'un site Web grâce aux tableaux.  Les formulaires. Les formulaires.  Structure basique du formulaire, balise. Structure basique du formulaire, balise.  Les différents champs dans un formulaire. Les différents champs dans un formulaire.  Alignement vertical du formulaire. Alignement vertical du formulaire.  La validation. La validation. 2

3 Tableaux : le chevauchement de cellules (avec colspan et rowspan). Initiation.  On peut faire en sorte qu'une cellule d'un tableau chevauche deux cellules adjacentes, en largeur ou en hauteur. on utilise pour ça l'attribut colspan des balises et pour le chevauchement en largeur (c'est le cas du tableau de gauche dans le dessin ci-dessous), et l'attribut rowspan pour le chevauchement en hauteur (c'est le cas du tableau de droite dans le dessin ci-dessous). 3

4 Exo 1  Mettez ici le code HTML qui correspond au tableau de gauche: 0 0 4 Mettez ici le code HTML qui correspond au tableau de droite : 0 0 0

5 5 Mise en page d'un site Web grâce aux tableaux Dans les sites Web, la mise en page globale est effectuée :  Soit par des cadres (frames en anglais) : méthode obsolète avec HTML 5..  Soit par du CSS, méthode la plus répandue qui sera vue dans le cours et l'atelier CSS.  Soit par des tableaux, méthode simple que je vais expliquer ici et que je recommande d'utiliser pour les projets cette année. Par exemple, le code de gauche permet d'obtenir la mise en page de droite (pour simplifier, les attributs bgcolor pour spécifier la couleur de fond des cellules ont été supprimés. Beaucoup d'attributs obsolètes sont utilisés ici, on verra bientôt leur équivalent en CSS) : LOGO MENU CONTENU Pied de page

6 Explications sur l'utilité de chaque attribut : 6  Les attributs leftmargin='0' rightmargin='0' topmargin='0' de la balise permettent de supprimer la marge blanche autour de la page.  L'attribut width=100% de la balise fait que le tableau occupe toute la largeur de la fenêtre du navigateur.  L'attribut cellspacing='0' de la balise supprime l'espace blanc entre chaque cellule.  L'attribut colspan='2' de la balise fait que la cellule du logo (puis du pied de page) chevauche les cellules "menu" et "contenu".  L'attribut align=center de la balise fait que le logo (puis le pied de page) sont centrés horizontalement dans leurs cellules.  L'attribut height=100 de la balise n'est pas indispensable. Lorsque vous aurez un contenu réel, la hauteur des cellules "menu" et "contenu" s'agrandira automatiquement.  Les attributs width=20% et width=80% des cellules "menu" et "contenu" font que le menu est beaucoup moins large que le contenu.

7 A vous de jouer … 7 A vous de jouer, écrivez le code HTML qui permet d'obtenir la mise en page suivante exo5 LOGO Menu Contenu NEWS Pied de page

8 8 exo5 LOGO NEWS Menu Contenu Pied de page Ecrivez le code HTML qui permet d'obtenir la mise en page suivante

9 Suite exo 9 Ecrivez le code HTML qui permet d'obtenir la mise en page suivant

10 10 exo7 LOGO TITRE NEWS menu Menu 4 Menu 5 Menu 6 Contenu Pied de page