Menu
Accueil
Page 1
Menu & CSS
Page 2
Iframe
Zones réactives
Cadres + menu
Explication 1
Menu + Expl.
Pages applet
Menu tableaux
3 tableaux
Tableau 4
Cadres théorie
Menu théorie
Pages théorie
Formulaire
Évaluation

Autres formations

Formations en ligne

Grille d'évaluation

Nous vous souhaitons la bienvenue sur notre site !

 

Trois premiers tableaux

Notions expérimentées dans cette fiche
  • Créer une page
  • Lier une page à une feuille de style .css
  • Créer un tableau
  • Régler la largeur des cellules
  • Changer la couleur des cellules
  • Modifier les bordures
  • Utiliser le style Titre 1
  • Enregistrer une page

Cet exercice vous fera pratiquer l'utilisation des tableaux. Il n'est pas difficile, mais il vous aidera à devenir plus habile dans leur maniement. 

Étape 1: Créez une nouvelle page dont l'arrière-plan est blanc. Liez cette page à la feuille de style int_ascenseurs2.css.

Étape 2: Inscrivez sur la première ligne, aligné à gauche, le texte suivant: Les aliments. Utilisez le style Titre 1 et la police Verdana

Étape 3: Créez un tableau de quatre lignes et trois colonnes. Il occupe 100% de la largeur de la page et la taille des bordures est 1. Leur couleur est le bleu

Étape 4: Sélectionnez les trois cellules de la rangée du haut. Cliquez dedans avec le bouton droit de la souris et choisissez Propriétés de la cellule. La couleur d'arrière-plan de ces cellules est le bleu. Le texte doit quant à lui être blanc, centré et en caractères gras. Il utilise la police Verdana. Voici le texte à taper: Aliments simples dans la cellule 1, Source importante dans la cellule 2 et Fonction dans la cellule 3.

Étape 5: Sélectionnez les trois cellules sous Aliments simples, Attribuez-leur un alignement centré et la police Verdana, gras, bleue. Tapez les mots suivants: Protéines dans la deuxième rangée, Glucides dans la troisième rangée et Lipides dans la quatrième rangée.

Étape 6: Vous devez compléter le tableau par vous-même en indiquant 3 sources importantes de chacun de ces aliments simples et leur fonction. Ces informations complémentaires doivent être centrées dans la cellule et utiliser la police Verdana rouge.

Étape 7: Enregistrez la page sous le nom Tableau_Alim.htm. Voici le genre de résultat que vous devriez obtenir.

Étape 8: Fermez la page et créez-en un nouvelle réalisée sur le même modèle. Le texte à utiliser est: Le tube digestif.

Étape 9: Le tableau est constitué de 3 colonnes et 6 lignes. Les couleurs à employer sont exactement les mêmes que pour la page précédente. Vous devez utiliser la police Verdana. Le texte à écrire est le suivant:

  • Colonne 1: Organe du tube digestif, Bouche, Oesophage, Estomac, Intestin grêle, Gros intestin

  • Colonne 2: Moyen de digestion, Mastication - glandes salivaires, - , - , Le foie et le pancréas se déversent dans l'intestin, -

  • Colonne 3: Type de digestion, Mécanique - chimique, - , - , Chimique, -

 Voici une représentation du tableau. 

Étape 10: Il ne reste plus qu'à compléter les cases vides et  à enregistrer la page sous le nom Tableau_digestif.htm.

Étape 11: Créez enfin une troisième page dont le titre est: Les groupes sanguins. Voici le modèle du tableau à y insérer. Pour ne pas avoir de difficulté, sélectionnez les 8 colonnes de droite et réglez leur largeur à 9%. Sélectionnez ensuite la première colonne et réglez sa largeur à 28%. N'utilisez pas les signes + et - si vous ne voulez pas provoquer d'erreur. Le texte à taper est celui que vous pouvez lire dans l'exemple ci-dessous.

Étape 12: Complétez les cases blanches de ce tableau en utilisant la police Verdana rouge d'une taille de 8 pts.

Étape 13: Enregistrez cette dernière page sous le nom Tableau_sang.htm.

 

Théorie
Ajouter un applet
Ajouter un style
Arrière-plan
Bordure - Trame
Cadres
Clip vidéo
Composants
Date et heure
Éléments
Enregistrement
Feuille de style
Fond sonore
Formul. assisté
Formul. courriel
Formul. manuel
Hyperliens
Images
Impression
Liste à puces
Menu Édition
Mise en forme
Modèle de page
Modifier thème
Ouvrir
Page Web
Rech. - Rempl.
Retrait, interligne
Tableau
Thèmes
Titre page
Zones réactives
Copyright © http://www.internetservices-fr.net