C`est quoi le langage HTML

Transcription

Page Web statique « Le langage HTML »
Prof : HOUAS MAKRAM
Activité 1 :
1.
2.
Créer un répertoire sous le nom TPHTML dans le dossier 4TIC HTML de la racine D:\.
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 ?
Constatations :
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.
HTML
Hyper
Text
Markup
Language
II°| Structure (ou squelette) d’un fichier HTML
<HTML>
<HEAD>
<TITLE>
Titre du
document
Entête du
document
HTML


</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>
Lycée Secondaire 15 NOVEMBRE 1955
Corps du
document
HTML
1
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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.
BIENVENUE
AU SITE WEB DU
LYCEE 15 NOVEMBRE 1955
Balise
Fonction
<B> ……………. </B>
Afficher le texte en gras
<I> ……………. </I>
Cette balise permet de mettre un texte en italique.
Souligner le texte
<U> ……………. </U>
< CENTER > ……. </CENTER > Permet de mettre un texte au centre de la page Web.
<FONT color="#C0C0C0" size=”2”
FACE="arial" > tunisie </FONT>
< P align ="...."> …… </P>
<SUP > ……. </SUP>
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
Début et fin d’un nouveau paragraphe avec alignement
Permet de mettre un texte en exposant.
2
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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
2). Option trait horizontale.
<HR SIZE = 8 WIDTH = "25%" ALIGN =
RIGHT>
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 »
Constatations :
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
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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
Constatations :
 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
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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
INFORMATION SCOLARITÉ
NOMBRE D'ELEVES PAR NIVEAU
1.
2.
3.
4.
Première année :
Deuxième année :
Troisième année :
Quatrième année :
NOMBRE D'ELEVES PAR SECTION
A. 2ème année :
 Technologie de l'informatique :
 Sciences :
 Économie :
 Lettres :
ème
B. 3
année :
 Sciences de l'informatique :
 Math :
 Science :
 Économie :
 Lettres :
ème
C. 4
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é
informations présent ci-dessous :
information.html
contenant
les
INFORMATIONS
Membres du lycée:
Membres administratifs
Membre
Effectif
Cadres
……..
Ouvriers
…….
Effectif
……
Enseignants
Elèves
1
ère
année
Effectif par niveau
2
année
3ème année
ème
5
4ème année
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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 fusionner les cellules d’un tableau
Pour insérer un tableau avec FrontPage 2003
0). Début insertion d’un tableau.
0). Début fusion de cellules.
1). Choisir menu tableau / insérer/l’option tableau
1). Sélectionner le tableau
2). Remplir nombre des lignes et des colonnes
2). Choisir menu tableau /commande fusionner les
cellules
3). Remplir taille de bordure ainsi que son couleur
3). Fin fusion de cellules.
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
Constatations :
 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 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
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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 interne
Pour insérer un lien hypertexte externe
Avec FrontPage 2003
Avec FrontPage 2003
0). Début insertion d’un lien externe.
0). Début insertion d’un lien interne.
1). Sélectionner le texte
0). Sélectionner le texte cible
2). Menu Insertion
1). Menu insertion / commande signet
3). Commande lien hypertexte
2). Sélectionner le texte qui active le lien
4). Choisir page dans dossier en cours
3). Activer le menu insertion /commande lien
hypertexte
ou adresse url internet dans l’onglet adresse
4). Choisir l’option signet/choisir le signet déjà
5). Fin insertion d’un lien externe.
sélectionné
1). Fin insertion d’un lien interne.
La syntaxe est la suivante :
La syntaxe est la suivante :
< A HREF = >
"ADRESSE" < / A>
Pour créer le signet :
< A NAME = >
<"ADRESSE CIBLE">
ADRESSE CIBLE < / A>
Pour créer le lien interne :
<A HREF="#ADRESSE">ADRESSE</A>
Constatations :
< ………………………………………………………………>
………………………………………… < / …..>
 <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
Niveau: 4ème SI
Prof : HOUAS MAKRAM
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.
Syntaxe
Fonctions
< FORM ACTION=”sauve.html." NAME="form"
METHOD="GET" >
Balise comporte :
ACTION : action active le bouton envoyer
NAME : nom formulaire
METOHD : méthode d’envoi des données
POST OU GET
<INPUT type="text" name="T1" size="20">
C’est la syntaxe permettant d’insérer une
zone de texte dans un formulaire.
<textarea rows="2" name="S1" cols="20"></textarea>
Utilisée pour la définition d’une zone de
saisie à plusieurs lignes
<SELECT NAME="………" SIZE="……………………………">
<OPTION >…………………………</OPTION>
<OPTION>………………………….</OPTION>
<OPTION>………………………….</OPTION></SELECT>
Cette syntaxe est utilisée pour liste de
sélection
<INPUT TYPE="RADIO" NAME="R1" VALUE="V1" >
MASCULIN
Cette syntaxe est utilisée pour les cases
d’options
<INPUT TYPE=" checkbox " NAME="c1" VALUE="V2"
> dessin
Cette syntaxe est utilisée pour les cases à
cocher
<INPUT type="submit" value="Envoyer" name="B1" >
Cette balise est utilisée pour insérer un
bouton dans un formulaire
8
Niveau: 4ème SI
Prof : HOUAS MAKRAM
Constatations :
 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
Ca
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.
Constatations:
Pour créer une page de cadre
Avec FrontPage 2003
 Pour créer un jeux de cadre on utilise la
0). Début création d’une page de cadre.
balise <FRAMESET>
1). Accéder au menu fichier
La propriété ROWS PERMET DE DÉFINIR
2). Commande nouveau
CADRE HORIZONTAUX
3). Choisir l’option autre modèle de page
La propriété COLS
4). Choisir onglet cadre
CADRE VERTICAUX
5). Sélectionner le modèle de cadre selon votre choix
PERMET DE DEFINIR
 La balise <FRAMESET SRC =
6). Validez par le bouton OK
"NOUVELLEPAGE1.HTM"
7). Fin création d’une page de cadre.
Name = "BANNIERE" > permet
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 .………………………
9
………………………………………………………………
Niveau: 4ème SI
.

C`est quoi le langage HTML

Transcription

Documents pareils

Procédure d`insertion et de modification des images

Formation FrontPage

Fiche balise streetgirl

Contact Formation logiciels Création de page Web

L`aventure du rail

Frontpage - Initiation

microsoft frontpage

Il fallait créer un court texte amusant en employant au moins une

La Course d`Orientation