Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :

Présentation au sujet: "Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :"— Transcription de la présentation:

1 Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne : http://www.siteduzero.com/tutoriel-3-13666-apprenez- a-creer-votre-site-web.html Manuel : XHTML et CSS par Luc Van Lancker Editions ENI

2 Xhtml se compose en réalité de deux langages différents qui se complètent : (Xhtml=html+CSS) Le html sert à définir les différentes zones de la page web et leur contenu. (Ex : zones de titres, paragraphes, listes à puces, liens, tableaux, images, formulaires…) Le CSS sert à appliquer un style de présentation sur l'ensemble de la page ou certaines zones de la page. (ex : on veut que le titre soit en rouge, centré, en police arial…)

3 Pour bien comprendre : Voici une page avec seulement les instructions en html : http://www.siteduzero.com/uploads/fr/ftp/mateo21/3.4. 1.html Voici la même page en rajoutant le CSS (pour les garçons) : http://www.siteduzero.com/uploads/fr/ftp/mateo21/3.4. 8.html Voici encore la même page en modifiant uniquement le code CSS (pour les filles) : http://www.siteduzero.com/uploads/fr/ftp/mateo21/3.4. 9.html

4 Xhtml signifie Extensible Hypertext Markup Language. C'est un langage de balises destiné à l'écriture de pages web. Les pages web s'affichent à l'aide d'un logiciel appelé navigateur et en utilisant le protocole http (HyperText Transfer Protocol).

5 Le xhtml est la dernière évolution du langage html La première version de ce langage a été mise au point en 1989 par Tim Berners Lee Les évolutions du langage sont fixées par le W3C (organisme à but non lucratif crée en 1994 par …Tim Berners Lee) W3C : World Wide Web Consortium

6 Fonctionnement du web et des pages web Le WEB ou WWW (World Wide Web) est constitué de l'ensemble des pages Web accessibles partout dans le monde. Chacune de ces pages contient du texte, des images, du son et des balises html. Chacune de ces pages une fois encodée a été "déposée" sur un serveur Web

7 Pour pouvoir être accessible partout dans le monde, chaque page Web possède une URL (Uniform Ressource Locator) Pour récupérer une page Web il suffit de transmettre au serveur web l'URL de la page que l'on souhaite consulter. Le serveur transmet alors la page web contenant du code html au navigateur du poste client qui va l'exécuter et l'afficher.

8 Un schéma pour résumer : Le poste client et le serveur communiquent par l'intermédiaire du protocole http

9 Comment créer une première page web ? Pour écrire du code, on peut utiliser un simple éditeur de texte (ex : le bloc note ou notepad++) ou mieux, le logiciel CSE Html Validator qui a l'avantage de vérifier la syntaxe html. Une fois le code de la page écrit, il faudra enregistrer le fichier avec l'extension.htm Le nom du fichier doit être de préférence court, en minuscules et sans espaces.

10 Le document "minimum" Toute page web doit au minimum comporter les balises suivantes : Nom de la page …Instructions en CSS pour la présentation de la page ….Instructions en html

11 Principes du langage Une balise est une instruction entre chevrons qui sera exécutée par le navigateur. Ex : (ouverture)… (fermeture) Les balises fonctionnent généralement par paires (début/fin), mais il y a des exceptions (balises dites orphelines) Ex :, …

12 Les balises peuvent être imbriquées les unes dans les autres mais en respectant l'ordre de fermeture. Ex : anglais espagnol

13 Certaines balises peuvent comporter des "réglages" appelés attributs munis d'une valeur. Ex : Cette balise est orpheline.

14 Les "pièges" du En, un seul espace est pris en compte par le navigateur Si on souhaite ajouter des espaces supplémentaires, il faut utiliser l'instruction autant de fois que nécessaire En, le passage à la ligne dans l'éditeur est interprété comme un espace Pour passer à la ligne, il faut utiliser la balise (balise orpheline)

15 Astuce : pour ne pas encombrer le code avec de trop nombreuses balises, si on souhaite sauter plusieurs lignes, on peut utiliser la balise :

16 Un peu de présentation avec le CSS Insertion d'une couleur de fond pour la page Il suffit d'ajouter l'instruction CSS suivante : body {background-color:blue;} Rmq : on peut utiliser un code couleur à la place de blue Ex : #99ccff Insertion d'une image de fond à la page Il suffit d'ajouter l'instruction CSS suivante : body {background-image:url(bulles.jpg);}

17 Créer une bordure autour de la page body {border: 5px solid teal;} Définir une marge extérieure autour de la page body {margin: 20px;}

18 Les titres et les paragraphes  Une page web doit être structurée avec des titres et des paragraphes. Un titre se définit grâce à la balise Titre de la page Il existe 6 tailles de titres de 1 à 6.  Pour créer un paragraphe, il suffit de placer la partie de texte concernée entre les balises et Exercice : Structurez le texte contenu dans le fichier exo1.htm en utilisant les balises que vous venez d'apprendre.

19 Pour améliorer la présentation des titres ou des paragraphes, on peut utiliser un ou plusieurs éléments de style. Exemple : p {background-image:url(gris.jpg); font:italic 25pt arial; color:teal; text-indent:50pt; text-transform:uppercase; text-align:center; border:20px green double; }

20 Le trait horizontal de séparation On peut afficher un trait horizontal de séparation dans une page web grâce à la balise qui est une balise orpheline. Pour améliorer la présentation, on peut utiliser les styles suivants : hr {height:20px; width:50%; background-image:url(gris.jpg);} Exercice : améliorer la présentation du texte contenu dans le fichier exo1.htm en utilisant les balises et les styles que vous venez d'apprendre.

21 La balise de commentaire Il est parfois utile d'insérer dans le code un commentaire servant à repérer certaines parties de pages à mettre à jour. Ex : Le contenu de cette balise ne sera pas affiché par le navigateur.

22 Les classes et la balise Les classes s'utilisent lorsqu'on veut appliquer un style précis à une zone précise de la page web ou si on souhaite appliquer des styles différents pour une même balise. La balise permet de définir une zone à l’intérieur d’un élément (titre, paragraphe…) sur laquelle on pourra appliquer une présentation bien précise.

23 Pour utiliser un style précis à un endroit précis, il faut créer un style en lui donnant un nom commençant par un point qu'on appelle une classe. Exemple :.souligne {text-decoration:underline;}

24 Pour utiliser le style, on aura par exemple : Lycée général et technologique : Dans cet exemple, la balise a été utilisée à l'intérieur d'un paragraphe.

25 La balise Cette balise sert à indiquer un texte défilant. Exemple : Ce texte défile vers la gauche Pour la présentation on peut utiliser les styles : marquee {font:80px script; color:red; background-color:teal; }

26 Les listes à puces Exemple : on souhaite créer la liste suivante : Chapitre 1 Chapitre 2 Chapitre 3 Chapitre 4

27 Pour créer ce type de liste en, il faut utiliser les balises et Chapitre 1 Chapitre 2 Chapitre 3 Chapitre 4

28 Il est possible d'appliquer des styles sur ces listes. Exemples : ul {list-style-type: upper-roman;} Autres valeurs possibles pour ce style : decimal, upper- alpha… ul {list-style-image:url(oui.gif);} Ce style utilise une image comme puce.

29 Insertion d'une image Pour insérer une image dans une page web, il faut utiliser la balise. Exemple : La balise est une balise dite "in line" ; elle doit donc toujours être placée dans une balise de type bloc comme,,, …

30 Pour centrer et/ou tracer une bordure autour de l'image, il faut utiliser un style sur la zone contenant l'image : On utilisera par exemple :.image{width:221px;height:158px;margin:auto;border:3px black solid;}

31 Les liens hypertextes Lien vers une autre page du site : Exemple : Message du lien

32 Lien vers une page d'un autre site : Exemple : Message du lien

33 Lien vers une adresse email : Contacter le webmaster mailto:jacques.durand@free.fr

34 Lien vers un fichier à télécharger : Télécharger la documentation

35 Quelques styles sur les liens : a:link {text-decoration: none; color:teal;} Applique le style sur les liens non encore visités a:visited {text-decoration: line-through;} Applique le style sur un lien déjà visité a:hover {font-weight: bold; color: purple;} Applique le style en cas de survol du lien avec la souris a:active {color: red;} Applique le style au moment du clic sur le lien

36 Les ancres Les ancres sont une catégorie particulière de lien hypertexte. Elles permettent d'amener l'internaute vers un endroit précis d'une page web.

37 Etape 1 : il s'agit de poser une ancre (repère) à des endroits précis du document. Pour créer une ancre, il suffit d'utiliser :

38 Etape 2 : Une fois l'ancre créée, on définit à un autre endroit du document (généralement au début, comme sommaire), un lien vers cette ancre. Pour créer ce lien, il suffit d'utiliser : Histoire Si l'ancre est située sur une autre page que le lien, il faut faire précéder le nom de l'ancre par le nom de la page : Histoire

39 Les tableaux en xhtml Les tableaux se composent de cellules qui pourront contenir tous types de données (texte, images, liens…). L'annonce d'un tableau s'effectue par la balise. Si on souhaite ajouter un titre au tableau, on utilise la balise Titre du tableau

40 Un tableau se construit ligne à ligne avec la balise, et pour chaque ligne, on ajoute les cellules nécessaires avec la balise ou (pour les intitulés des colonnes). Pour la présentation des tableaux, on utilise les instructions CSS, en particulier de type "border" et "padding". Exemple : réaliser un premier tableau avec comme contenu les données 1, 2, 3, 4 ; le titre du tableau sera "Mon beau tableau en xhtml".

41 caption {font-size: 50px; background-color:silver; } table {width:60%; border: 4px black double; background-color:teal; margin:auto; } td {border:2px black solid; text-align: center; padding:20px; font-size:25px; }

42 Dans un tableau, il est possible de fusionner des colonnes (colspan) ou des lignes (rowspan) Voir manuel TD p 116 Mon beau tableau en xhtml 1 2 3 4 5 6

43 Exercices Faire l'exercice 5 du manuel TD p 38 Créer le tableau p 101 et le rajouter à la page web de l'exercice 5 dans la section BTS.

44 Les cadres (frames) Principe : Les cadres permettent de diviser l'écran du navigateur en plusieurs zones et d'afficher plusieurs pages simultanément à l'écran. Chaque zone affichera sa propre page (une page web par zone). La division de l'écran en plusieurs zones ou cadres doit être définie dans un fichier xhtml spécial qui définira la stucture de cadre souhaitée (ex : 2 colonnes, 2 colonnes et 1 ligne…)

45 Cadres en deux colonnes Pour obtenir cette structure de cadre, il faut avoir recours au code suivant à enregistrer dans un fichier spécial que l'on nommera par exemple cadres.htm :

46 Commentaires : la balise définit un jeu de cadres organisé en colonnes, chaque colonne occupant 50 % de l'écran. Il est possible à la place de l'un des %, d'utiliser le caractére * qui évalue automatiquement la zone restante. La balise sert à définir chaque zone, à lui attribuer un nom et à indiquer la page web qui s'affichera dans cette zone. Pour rajouter d'autres colonnes, il suffit de rajouter une valeur en % pour l'attribut cols et rajouter une balise Il n'y a pas de balise dans le fichier du jeu de cadres

47 Cadres en lignes Pour un jeu de cadres sur deux lignes, le code est le suivant :

48 Cadres avec 1 colonne et 2 lignes Dans ce cas, le code est plus complexe car il faut imbriquer deux balises pour diviser l'écran en deux colonnes, puis la colonne de droite est ensuite divisée en deux lignes :

49 Cadres avec 2 colonnes et 1 ligne Cette fois, il faut d'abord diviser l'écran en deux lignes, puis diviser la deuxième ligne en deux colonnes, ce qui donne :

50 Cadres avec 1 colonne et trois lignes Ici, il faut d'abord diviser l'écran en deux colonnes, puis diviser la deuxième colonne en trois lignes :

51 Quelques réglages sur les cadres Il n'y pas d'instructions CSS prévues pour la page du jeu de cadre (pas de balise ) Les réglages sont à insérer dans les balises ou concernées. border="4" (règle l'épaisseur de bordure, si zéro, la bordure est masquée) noresize=noresize (empèche le redimensionnement des cadres) bordercolor="teal" (modifie la couleur des bordures)

52 Affichage des liens dans un jeu de cadres Lorsqu'une ou plusieurs des pages affichées dans les cadres contiennent des liens vers une autre page, se pose la question de savoir où va s'afficher cette nouvelle page.

53 Il existe plusieurs possibilités : La nouvelle page peut s'afficher dans le cadre d'origine où figurait le lien (cas par défaut) La nouvelle page peut s'afficher dans l'un des autres cadres. Dans ce cas, il faut rajouter dans la balise de lien un attribut target="nomCadre" nomCadre correspond au nom du cadre dans lequel devra s'afficher la nouvelle page. Exemple : Ouvrir Google

54 La page peut s'afficher dans une fenêtre entière du site courant (solution recommandée). Dans ce cas, il faut utiliser l'attribut target="_top" dans la balise de lien. Exemple : Ouvrir Google

55 La page peut s'afficher dans une nouvelle fenêtre (nouvelle instance) du navigateur. Il y aura donc 2 fenêtres ou deux onglets ; la fenêtre du site courant et la nouvelle fenêtre. Exemple : Ouvrir Google