Série d’exercices Le langage HTML. Structure de base d'un fichier HTML … éléments d'en-tête … éléments de corps.

Présentation au sujet: "Série d’exercices Le langage HTML. Structure de base d'un fichier HTML … éléments d'en-tête … éléments de corps."— Transcription de la présentation:

1 Série d’exercices Le langage HTML

2 Structure de base d'un fichier HTML … éléments d'en-tête … éléments de corps

3 Les commentaires <!–- Voici un commentaire HTML qui peut se placer sur plusieurs lignes -->

4 mon premier fichier hello world Ceci est la première ligne Ceci est la deuxième ligne Réaliser le fichier bienvenue.html Exercice 1

5 mon premier fichier hello world Ceci est la première ligne Ceci est la deuxième ligne Un fichier HTML Utiliser l’indentation L'indentation est un procédé de retrait de texte qui permet d'organiser et de rendre plus lisibles le texte

6 mon premier fichier hello world Ceci est la première ligne Ceci est la deuxième ligne Un fichier HTML

7 7 Exercice 2 Écrivez le texte suivant et expliquez ce qui se passe.

8 8 TP LPW. <meta http-equiv="Refresh" content="5; URL=http://www.univ-chlef.dz"> bienvenue sur notre site; vous allez être réorienter vers notre nouvelle adresse en 5 secondes: www.univ-chlef.dz

9 Balises de documents … le corps du document Options : background="image"image de fond d’écran bgcolor="couleur"couleur du fond d’écran text="couleur"couleur du texte link ="couleur"couleur des liens non consultés alink ="couleur"couleur des liens actifs couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white, yellow) Les autres couleurs sont définie en hexa (#FF0000 =rouge)

10 Exercice 3 Écrivez le fichier html test.html pour avoir le résultat suivant.

11 Solution Mon super site bla bla bla et que je te raconte ma vie

12 Balises de mise en page Un paragraphe Premiere ligne Deuxieme ligne <hr size="3" width="50%" align="left"> Exemple

13 Balises de mise en forme C’est un titre de niveau 1 C’est un titre de niveau 2 c’est gras en italique souligne 1 er Exemple

14 Balises de mise en forme … titre de niveau n (1 à 6) … afficher en gras … afficher en italique … afficher en souligné … barrer le texte … Le texte est agrandi d’une unité de taille … Le texte est diminué d’une unité de taille … afficher en clignotant … exposants … indices

15 Les règles de syntaxe HTML Les accents lors de la rédaction d’une page Web, il ne faut pas écrire les accents directement dans le code Voici la page Web des étudiants en Biologie âa accent circonflexe äa trema ( ä ) ëe trema ( ë ) çc cédille ( ç ) àa accent grave áa accent aigu êe accent circonflexe èe accent grave ée accent aigu Code HTMLLettres

16 Les Caractères Accentués un caractère accentué, on entre une combinaison précédée du caractère & ….. terminé par un ; (point virgule) é se code é Extrait de tableau caractères > 128 HTML

17 Caractères spéciaux << >> && &nspb; (un blanc) <<« >>» ©&copy éé èè êê àà ïï çç ññ

18 Les listes.. Liste non triée, liste à puces unordered list (a bulleted list).. Liste triée, liste à numéros.. Elément de la liste

19 Exemple : Listes Liste1 Liste 2 Liste 3 Les Listes Numérotées Numero 1 Numero 10 Numero 11 Numero 12 Numero 2 Numero3

20 Les éléments HTML Exemple de liste Les mois du printemps Avril Mai Juin Les mois d’automne Octobre Novembre Décembre

21 Mise en forme des caractères Remarque sur les balises – Elles peuvent être imbriquées : …...... – Permet de changer des paramètres ponctuellement (couleur ou taille) – SIZE : taille de la police 1 … 7 (taille absolue) +1, +2... (taille relative par rapport à la valeur par défaut)

22 Mise en forme des paragraphes … – Centre les éléments inclus entre la balise ouvrante et la balise fermante … – Justifie les éléments inclus entre la balise ouvrante et la balise fermante – À utiliser avec prudence ! – Pas de balise fermante ! – Retour à la ligne – : 2 retours à la ligne = 1ligne d'espacement

23 Exercice Dans la page Présentation ajouter ce texte en utilisant la balise pour le titre et pour le texte : Imaginactif accompagne les professionnels dans la gestion de leur communication. Notre passion : vous accompagner dans votre développement et vous apporter les solutions les plus adaptées à vos problématiques. La communication est un métier nécessitant rigueur, méthode, recherche, réflexion, créativité… Et ce, pour vous fournir des prestations de qualité et toucher vos cibles.

24

25 Les liens ( anchor )

26 Les liens – 1 ( anchor ).. insertion d'un lien hypertexte, ou vers un point d'ancrage du document Principaux attributs: href = url ; name = chaîne de caractères L’université de Chlef

27 Les adresses URL Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type: http://www.univ-chlef.dz/ seqanal/LicenceInf/intro-fr.html#Partie1 Le protocole: http Le serveur: www. univ-chlef.dz Le fichier: / seqanal/LicenceInf/intro-fr.html Un ancrage: #Partie1

28 L'adresse indiquée dans le lien ( URL) peut être Absolue, elle inclut tout le chemin en commençant par le protocole: http://www.univ-chlef.dz/pub_social.htm Ou relative, elle n'inclut qu'une partie du chemin: Mon_repertoire/monfichier.html Les adresses URL ( absolue ou relative )

29 Les noms de fichiers  japelle.html www.toto.com www.tutu.com  encore_plus_bas  plus_bas  jerecois.html http://www.tutu.com/plus_bas/encore_plus _bas/jerecois.html  encore_plus_bas  plus_bas_aussi  jerecois.html www.toto.com  plus_bas  japelle.html../plus_bas_aussi/encore_plus_bas/ jerecois.html

30 Les liens internes Lien interne – Lien qui amène à un endroit spécifique de la page HTML en cours. Deux étapes : – Mise en place d'une étiquette à l'emplacement à atteindre avec la balise : – Appel du lien de manière classique, mais où l'adresse de la page à atteindre est remplacée par le nom de l'étiquette précédée d'un # …

31 Les liens - 2 référence... Vers la référence

32 Les liens internes Exemples... Le sujet abordé ici est...... Contrairement à ce qui était mentionné au paragraphe 1 On peut aussi accéder au paragraphe 1 d’un autre document. http://www.toto.com/ExempleLienInterne.html http://www.tutu.com/AccesExterne.html

33 Agrandissez l’image qui se trouve dans la page presentation en uitilisant

34 cliquer sur l’image pour agrandir

35 Tableaux HTML Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Le tableau Le titre du tableau Chaque ligne (Table Row, traduisez par ligne du tableau) Les cellules d'en-tête (pour Table Header : En-tête de tableau) Les cellules de valeur (Table Data: Donnée de tableau)

36 Voici le titre du tableau Titre A1 Titre A2 Titre A3 Titre A4 Titre B1 Valeur B2 Valeur B3 Valeur B4

37 Exercice : Dans le dossier « TP2 », vous allez créer un nouveau sous-dossier que vous nommerez "exercice". En vous basant sur les exemples précédant, vous créerez 4 pages html que vous nommerez : index.html presentation.html realisation.html contact.html 1.Pour chacune des pages, vous organiserez le contenu texte et les sous titres en exploitant les balises h1 et h2, 2.Modifier les titres et les textes en y insérant des balises des mises en forme testez les mises en forme proposées précédemment.

38 3. Ajoutez des images 1.Créez un dossier "images" dans votre sous-dossier "exercice". 2.Enregistrez les images ci-dessous dans le dossier « images« 3.Dans chaque page, insérez la balise en pointant la source vers l'image correspondante. 4.Enregistrez et visionnez le résultat dans votre navigateur Internet

39

40 4. Ajoutez des liens comme suite : 1- La page "index.html" servira de page de regroupement. Dans cette page, ajouter un menu pointant vers chacunes des pages du site. Vous nommerez les titres du menu du même nom que leurs pages correspondantes (Présentation, Réalisations, Contact) 2- Sur la page "realisation.html", vous insérerez un lien vers le site de universite de chlef http://univ-chlef.dz. 3- Sur la page Contact, vous insérerez un lien vers le page "realisation.html" sur le texte 'nos réalisations' 4- Sur chaque page, vous ajouterez un bouton retour, redirigeant le visiteur vers la page d'index du site. 5. Ajouter un tableau pour la page "contact.html"

41