Page Web statique «Le langage HTML» Activité 1 : 1. Créer un répertoire sous le nom TPHTML dans le dossier 4TIC HTML de la racine D:\. 2. Dans le dossier HTML créer un nouveau fichier Document texte. a. Activer ce fichier puis l enregistrer sous le nom tp2.html. b. Faire un double clic sur le fichier tp2. Que constatez-vous? Le fichier texte s est transformer en page web ce qui signifie q une page web n est rien d autre q un fichier texte enrigistré avec l extension html I C est quoi le langage HTML? Le langage HTML n'est pas un langage de programmation proprement dit! Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau,...) du texte et des images! Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs. H T M L Hyper Text Markup Language II Structure (ou squelette) d un fichier HTML Titre du document <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Entête du document HTML Corps du document HTML 1
III Les balises du langage HTML 1 ) L e s b a l i s e s d e m i s e e n f o r m e : Activité 2 : 1. Lancer le logiciel de création de pages Web «Microsoft FrontPage». 2. Saisir le texte ci-dessous, faire la mise en forme demandée et complétez le tableau ci-après: Rendre le texte en gras, italique et centré. Mettre le premier et le troisième texte avec une taille = 5. Mettre le premier texte en couleur rouge et le troisième en bleu. 3. Ajouter après le troisième texte une ligne séparatrice de couleur Gris clair et de hauteur =4. 4. Ajouter après la ligne séparatrice le texte «Élaboré par la classe 4 ème Sciences de l'informatique» aligné à droite et avec une taille =2. 5. Ajouter à la suite une ligne séparatrice de largeur =31%, hauteur =3 et aligné à droite. 6. Enregistrer le fichier sous le nom lycee.html sous le répertoire TPHTML. B I E N V E N U E A U S I T E W E B DU LYC E E 1 5 N O V E M B R E 1 9 5 5 B a l i s e <B>. </B> <I>. </I> <U>. </U> < CENTER >. </CENTER > <FONT color="#c0c0c0" size= 2 FACE="arial" > tunisie </FONT> F o n c t i o n Afficher le texte en gras Cette balise permet de mettre un texte en italique. Souligner le texte Permet de mettre un texte au centre de la page Web. Définit la couleur du texte en code hexadécimale : 000000 = noir, FFFFFF= blanc, C0C0C0= gris clair, FF0000= rouge, 00FF00=vert. Taille de 2 avec police arial du mot tunisie < P align ="..."> </P> Début et fin d un nouveau paragraphe avec alignement <SUP >. </SUP> Permet de mettre un texte en exposant. 2
Pour insérer une image on utilise la balise : <IMG SRC= "Loupe.gif" BORDER="0" WIDTH="100" HEIGHT="50"> BORDER : l épaisseur de la bordure ou de cadre défini en pixel. WIDTH : largeur de l image. HEIGHT : hauteur de l image Pour modifier les propriétés d une image : Avec FrontPage il suffit de sélectionnez l image bouton droit à partir du menu déroulant sélectionnez propriété de l image Ou bien ; afficher le mode code et ajouter à la balise d insertion les propriétés : WIDTH = largeur de l image : WIDTH="100" HEIGHT = hauteur de l image : HEIGHT="50" BORDER = l épaisseur de la bordure ou de cadre défini en pixel : BORDER="0" ALIGN =Alignement de l image : left ;right ; center Pour ajouter une ligne séparatrice : 0). Début ajout d une ligne séparatrice 1). Menu insertion <HR SIZE = 8 WIDTH = "25%" ALIGN = RIGHT> 2). Option trait horizontale. 3). Fin ajout d une ligne séparatrice Notez bien : Pour modifier les propriétés d une ligne séparatrice il suffit d afficher son menu contextuel et choisir la commande «propriétés de la ligne horizontale» Front Page est un éditeur de pages Web qui fonctionne en WYSIWYG (What You See Is What You Get). On pourra à tout moment passer au code HTML, et apporter les modifications désirées 2 ) L i n s e r t i o n d i m a g e s a v e c l e l a n g a g e H T M L : Activité 3 : Dans le même fichier lycee.html ajouter les modifications suivantes : 1. Insérer l image lycée.jpg du dossier TPHTML. 2. Attribuer à l image les propriétés : largeur =400, hauteur =300, Alignement = Milieu, et un épaisseur de bordure =4. 3. Afficher le mode code et déterminer la balise qui permet d insérer une image avec HTML. <img border="4" width="400" height="300" align="center" border="4"> 3
3 ) L a j o u t d u n a r r i è r e p l a n : Activité 4 : 1. Dans le fichier lycee.html ajouter un arrière plan de couleur Rouge foncé. 2. Créer un nouveau document dans lequel vous allez : Saisir le titre «VILLE SFAX» avec une taille maximale. Insérer l image Carte.gif au centre, de largeur =600 et de hauteur =300. Saisir à la suite le texte ci-dessous de taille =5 et de couleur Bleu azur: «La ville de Sfax, 2ème ville de Tunisie, à 270 Km au sud de Tunis, capitale du sud et capital de l industrie en Tunisie.». 3. Ajouter comme arrière plan l image mer.jpg du dossier TPHTML. 4. Enregistrer la page sous le nom sfax.html sous le répertoire TPHTML. Pour ajouter un arrière plan à une page Web : 0). Début d ajout d un arrière plan avec FrontPage 2003 4). Cliquez menu format 5). Option arrière plan 6). Onglet mise en forme 7). Option couleur arrière plan 8). Choisir un couleur à partir d une palette et validez par bouton OK 1). Fin d ajout d un arrière plan avec FrontPage 2003 On utilse la propriété de la page couleurs/arrière plan pour mettre une couleur unie pour le fond d une page Web. On utilse la propriété de la page arrière plan/image pour mettre une image comme étant arrire plan d une page Web. Bgcolor et Background sont deux propriétés de la balise <BODY BACKGROUND> 4
4 ) L e s l i s t e s : Activité 5 : 1. Créer un nouveau fichier nommé Scolarité.html contenant les informations présent ci-dessous de couleur d arrière plan gris clair : VOIR LIVRE PAGE 61-62 NOMBRE D'ELEVES PAR NIVEAU 1. Première année : 2. Deuxième année : 3. Troisième année : 4. Quatrième année : INFORMATION SCOLARITÉ NOMBRE D'ELEVES PAR SECTION A. 2 ème année : Technologie de l'informatique : Sciences : Économie : Lettres : B. 3 ème année : Sciences de l'informatique : Math : Science : Économie : Lettres : C. 4 ème année : Sciences de l'informatique : Math : Science : Économie : Lettre : 5 ) L e s t a b l e a u x : Activité 6 : 1. Créer un nouveau fichier nommé information.html contenant les informations présent ci-dessous : Membres du lycée: INFORMATIONS Membres administratifs Membre Effectif Cadres.. Ouvriers. Enseignants Elèves Effectif Effectif par niveau 1 ère année 2 ème année 3 ème année 4 ème année 5
2. Modifier les propriétés des tableaux comme suit : appliquer une bordure =4, la couleur d arrière plan des cellules est le Gris clair. Pour insérer un tableau avec FrontPage 2003 0). Début insertion d un tableau. 1). Choisir menu tableau / insérer/l option tableau 2). Remplir nombre des lignes et des colonnes 3). Remplir taille de bordure ainsi que son couleur 4). Choisir alignement en pourcentage ou en pixel 5). Remplir le nombre des marges intérieur 6). Remplir nombre de l espacement 7). Remplir couleur de l arrière plan 8). Fin insertion d un tableau avec FrontPage 2003 La définition des tableaux avec HTML se fait par la balise <TABLE> </TABLE> La balise <TR> </TR> est utilisée pour définir une ligne. La balise <TD> </TD> est utilisée pour définir une cellule. Pour fusionner les cellules d un tableau 0). Début fusion de cellules. 1). Sélectionner le tableau 2). Choisir menu tableau /commande fusionner les cellules 3). Fin fusion de cellules. Pour modifier les proriétés d un tableau HTML présentes l ensemble des proprietés suivantes : CELLSPACING : définit l espace entre les cellules (en pixel). CELLPADING : répresente l espace entre le contenu de la cellule et le bord extérieur de la cellule BORDER : pour définir l épaisseur de la bordure du tableau. WITH: définit la largeur du tableau en pixel ou pourcentage. HEIGHT : définit la hauteur du tableau en pixel ou pourcentage. BGCOLOR : pour définir la couleur d arière plan du tableau ou bien des différents cellules. ROWSPAN : Fusionner des cellules horizontalement COLSPAN : Fusionner des cellules verticalement 6 ) L e s l i e n s h y p e r t e x t e s : Activité 7 : 1. Créer une nouvelle page nommé liens.html contenant les information cidessous : En savoir plus Sfax Informations Lycée Scolarité Google Exercices HTML 2. Créer les liens hypertextes entre les différents textes et les pages déjà créées. Le fait du clic sur le mot Google permet de se connecter sur l Internet à l adresse www.google.fr. 6
Le fait du clic sur le texte Exercice HTML permet de télécharger le fichier Word exercice.doc du dossier TPHTML. 3. Lancer le fichier scolarité.html. Créer un lien interne entre les textes Quatrième année et 4 ème année et les textes Troisième année et 3 ème année de la même page. Pour insérer un lien hypertexte externe Avec FrontPage 2003 0). Début insertion d un lien externe. 1). Sélectionner le texte 2). Menu Insertion 3). Commande lien hypertexte 4). Choisir page dans dossier en cours ou adresse url internet dans l onglet adresse 5). Fin insertion d un lien externe. La syntaxe est la suivante : < A HREF = > "ADRESSE" < / A> Pour insérer un lien hypertexte interne Avec FrontPage 2003 0). Début insertion d un lien interne. 0). Sélectionner le texte cible 1). Menu insertion / commande signet 2). Sélectionner le texte qui active le lien 3). Activer le menu insertion /commande lien hypertexte 4). Choisir l option signet/choisir le signet déjà sélectionné 1). Fin insertion d un lien interne. La syntaxe est la suivante : Pour créer le signet : < A NAME = > <"ADRESSE CIBLE"> ADRESSE CIBLE < / A> Pour créer le lien interne : <A HREF="#ADRESSE">ADRESSE</A> <A HREF="HTTP://WWW.GOOGLE.COM/"> GOOGLE/</A> est utilisée pour se connecter à une adresse Internet. La syntaxe : <A href = mailto : adresse email > est utilisée pour Le courrier électronique 7
7 ) L e s f o r m u l a i r e s : Activité 8 : 1. Créer la page Inscription.html contenant les informations ci-dessous : Les champs Nom et Prénom sont deux zones de saisie de tailles maximale = 20. Le champ Adresse est une zone de saisie à plusieurs lignes. Masculin et Féminin sont deux cases d options. Classe est une liste de sélection dont les éléments sont : Bac SI, Bac Sc Exp, Bac Math, Bac économie et Bac lettre. Allemand, Italien, Espagnol et Dessin sont des cases à cocher. Envoyer est un bouton de type «Submit» et Annuler est un bouton de type «Reset». 2. Afficher le mode code et terminer le tableau ci-dessous. S y n t a x e F o n c t i o n s < FORM ACTION= sauve.html." NAME="form" METHOD="GET" > <INPUT type="text" name="t1" size="20"> Balise comporte : ACTION : action active le bouton envoyer NAME : nom formulaire METOHD : méthode d envoi des données POST OU GET C est la syntaxe permettant d insérer une zone de texte dans un formulaire. <textarea rows="2" name="s1" cols="20"></textarea> <SELECT NAME=" " SIZE=" "> <OPTION > </OPTION> <OPTION>.</OPTION> <OPTION>.</OPTION></SELECT> <INPUT TYPE="RADIO" NAME="R1" VALUE="V1" > MASCULIN <INPUT TYPE=" checkbox " NAME="c1" VALUE="V2" > dessin <INPUT type="submit" value="envoyer" name="b1" > 8 Utilisée pour la définition d une zone de saisie à plusieurs lignes Cette syntaxe est utilisée pour liste de sélection Cette syntaxe est utilisée pour les cases d options Cette syntaxe est utilisée pour les cases à cocher Cette balise est utilisée pour insérer un bouton dans un formulaire
L attribut METHOD peut avoir les valeurs GET ou bien POST qui sont deux méthodes d envoi des données saisies dans le formulaire vers le serveur. Les cases d option sont utilisés pour faire un et un seul choix parmi plusieurs. Les cases à cocher sont utlisés pour faire pour faire un ou pleusieur choix parmi plusieurs. Le bouton de type RESET permet d annuler et de restaurer les valeurs par défauts 8 ) L e s c a d r e s : Activité 9 : 1. Créer la page de cadre Accueil.html ci-dessous : Cadre 1 Sfax Cadre 2 Cadre Cadre 3 1dre 3 Le premier cadre comporte la page15novembre.html contenant le texte 15 NOVEMBRE animé. Le deuxième cadre comporte la page liens.html. Le cadre 3 contient le texte BIENVENUE AU SITE WEB DU 15 NOVEMBRE. P o u r c r é e r u n e p a g e d e c a d r e A v e c F r o n t P a g e 2 0 0 3 0). Début création d une page de cadre. 1). Accéder au menu fichier 2). Commande nouveau 3). Choisir l option autre modèle de page 4). Choisir onglet cadre 5). Sélectionner le modèle de cadre selon votre choix 6). Validez par le bouton OK 7). Fin création d une page de cadre. Pour créer un jeux de cadre on utilise la balise <FRAMESET> La propriété ROWS PERMET DE DÉFINIR CADRE HORIZONTAUX La propriété COLS CADRE VERTICAUX La balise <FRAMESET SRC = "NOUVELLEPAGE1.HTM" Name = "BANNIERE" > permet PERMET DE DEFINIR 9 De définir un cadre en spécifiant le fichier à contenir et son nom La création d un système de cadre nécessite n+1 fichiers HTML séparés. TARGET est utilisée pour..