La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Option SI, 3A XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite.

Présentations similaires


Présentation au sujet: "Option SI, 3A XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite."— Transcription de la présentation:

1 Option SI, 3A XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous devrez spécifier quelle DTD vous comptez utiliser avec votre document. Le contenu de votre document se trouvera alors entre les balises et. XHTML

2 Option SI, 3A Titre du document et en tête Le titre est définit à l'aide de l'élément title comme dans l'exemple suivant : Titre de mon document Pour tester ce que nous venons d'expliquer, créez un document test.html dans lequel vous copierez la code suivant : Titre de mon document Les navigateurs Web affichent généralement le titre dans la barre de titre de la fenêtre. XHTML

3 Option SI, 3A Corps du document, titres et paragraphes Le corps du document est la zone que l'on va trouver après l'en-tête. Il est définit par l'élément body. Les titres sont au nombre de 6, chacun ayant un niveau d'importance. Le plus haut niveau d'importance est le titre h1, suivit de h2 et ainsi de suite jusqu'à h6. Ces niveaux sont largement suffisants pour couvrir l'ensemble de vos besoins les plus courants. Un paragraphe est définit par l'élément p. Il sera affiché avec un espacement avant et après, permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des éléments du document. Titre très important Paragraphe. Titre moins important Second paragraphe un peu plus long que le premier. XHTML

4 Option SI, 3A Les liens L'aspect le plus intéressant du Web est cette formidable capacité à créer des liens de pages en pages, de sites en sites. Pour créer un lien on utilise l'élément a. Pour créer un lien vers un fichier test2.html se trouvant dans le même répertoire que votre fichier test.html il suffira de faire comme dans l'exemple suivant : Second fichier test Le navigateur affichera généralement le lien en bleu et le soulignera. Pour faire un lien vers un autre site Web on écrira le code suivant : Le W3C XHTML

5 Option SI, 3A Images Afin de rendre vos documents plus attrayants, vous pouvez y insérer des images à l'aide de l'élément img. le fichier de cette image s'appelant toto.jpg, voici le code à écrire pour insérer l'image dans votre page : XHTML

6 Option SI, 3A Les listes Les listes sont des outils bien utiles pour présenter des informations. XHTML en offre plusieurs types différents. Le premier type de liste est la liste non ordonnée, autrement appelée liste à puces. Le second exemple affiche un numéro au lieu d'un puce avant le texte de chaque élément. 1er élément 2ème élément 3ème élément 1er élément 2ème élément 3ème élément XHTML

7 Option SI, 3A Tableaux Un tableau XHTML est découpé en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit être le même. Voici un exemple de tableau très simple : ligne 1, colonne 1 ligne 1, colonne 2 ligne 1, colonne 3 ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 Les balises et délimitent les lignes du tableau. Dans les lignes suivantes, spécifie les cellules de données. XHTML

8 Option SI, 3A Feuille de style (CSS) Séparation du contenu et de la présentation Interopérabilité : affichage sur le Web,sur papier, BD, … Réutilisabilité/ durabilité : le document ne devient pas obsolète avec l'évolution des techniques informatiques ; il pourra être traité par des applications inexistantes au départ Feuilles de style

9 Option SI, 3A Types de média all, aural, braille, embossed, handheld, print, projection, screen, tty, print screen « style-print.css » « style-screen.css » screen;

10 Option SI, 3A Définition dun style balise { propriété style: valeur; propriété style: valeur } Exemple : H3 { font-family: Arial; font-style: Italic } Le Texte « Cours XML » sera en Arial et en italique. Cours HML balise.nom_de_classe { propriété de style: valeur } Exemple p.toto {font-weight: bold; font-color: # } Le texte « exemple1 » sera en gras et bleu mais pas « exemple2 » exemple1 exemple2 Feuilles de style

11 Option SI, 3A Définition style (suite 1).nom_de_classe { propriété de style: valeur } Exemple.toto {color:blue; font-size:12px} Le texte « exemple1 », « exemple2 » et en bleu et de taille 12 mais pas « exemple3 » ni « exemple4 » exemple 1 exemple2 exemple3 exemple4 Feuilles de style

12 Option SI, 3A Définition style (suite 2) * { propriété style: valeur; … } Le sélecteur universel « * » agit sur toutes les balises. Exemple * {background-color:red} « exemple1 » et « exemple2 » sont sur fond rouge. exemple 1 exemple2 Feuilles de style

13 Option SI, 3A Type de propriété de style Couleur et image darrière plan : background-color :red, … Couleur davant plan : color:#008000, … Bordure: border:5px dotted:#0000FF, … Largeur, hauteur: width:250px; … Marge, espacement: margin:10px;… Alignement: text-align: center; … Positionnement: fload: left; … Typographie: font-weight: bold; … Feuilles de style

14 Option SI, 3A Positionnement

15 Option SI, 3A Boîte de type bloc en flux normal Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur : En HTML : Une boîte jaune Une boîte verte En CSS :.jaune { background-color: #ffff00; }.verte { background-color: #00ff00; } Le résultat : Feuilles de style

16 Option SI, 3A Marqueurs de boîtes blocs Les principaux éléments créant des boîtes bloc sont : l'élément div ; les titres h1, h2, h3, h4, h5, h6 ; le paragraphe p ; Les listes et éléments de liste ul, ol, li, dl, dd ; Le bloc de citation blockquote ; Le texte pré-formaté pre ; L'adresse address. Feuilles de style

17 Option SI, 3A Boîte de type en-ligne Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur : En HTML : Une boîte jaune Une boîte verte En CSS :.jaune { background-color: #ffff00; }.verte { background-color: #00ff00; } Le résultat : Feuilles de style

18 Option SI, 3A Marqueurs de boîtes en ligne Les principaux éléments créant des boîtes en ligne sont : l'élément span ; le lien a ; L'image img ; Les emphases em et strong ; La citation q ; La citation cite ; L'élément code ; Le texte entré par l'utilisateur kbd ; L'exemple samp ; La variable var ; Les abréviations et acronymes abbr, acronym ; Le texte inséré ins ; Le texte supprimé del. Feuilles de style

19 Option SI, 3A CSS : positionnement relatif Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements. En HTML : Lorem boîte en position relative ipsum dolor. En CSS :.jaune { position: relative; bottom: 5px; background-color: #ffff00; } Le résultat : Feuilles de style

20 Option SI, 3A CSS : positionnement flottant Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. En HTML: Une boîte jaune flottant Une boîte verte doté d'un contenu plus long… En CSS:.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; }.verte { background-color: #00ff00; } Le résultat : Feuilles de style

21 Option SI, 3A une mise en page à deux colonnes En CSS :.content { float: left; width: 70%; }.menu { margin-left: 80%; border: 1px solid #000000; padding: 1em; } En HTML … … lien_1 lien_2 lien_3 … Résultat : Feuilles de style

22 Option SI, 3A CSS : positionnement fixe et absolue Le fonctionnement de la position absolue : Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être : une boîte elle-même positionnée (position relative ou absolue) ; le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur. Feuilles de style

23 Option SI, 3A CSS : positionnement fixe et absolue Définissons un conteneur verte en position relative :.verte { position: relative; background-color: #00ff00; width: 15em; } Et un positionnement absolu jaune :.jaune { position: absolute; top: 1em; right: 1em; background-color: #ffff00; } HTML : … Boîte jaune en position absolue Résultat : Feuilles de style

24 Option SI, 3A Images et CSS Beaucoup d'images sont utilisées dans le but unique d'embellir les pages HTML. Ces images n'apportent rien au contenu, et en toute logique ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le ou les fichiers HTML à la recherche des images de présentation. Feuilles de style

25 Option SI, 3A Les images de fond En utilisant un élément div vide, on peut aisément remplacer une image purement décorative par une image de fond. Le principe consiste simplement à dimensionner le div à la même taille que l'image cible, et à lui appliquer l'image à remplacer comme image de fond. Code XHTML : Résultat : Feuille de style : div#avatar { background-image: url(avatar-p.png); background-repeat: no-repeat; width: 80px; height: 103px; padding: 0; } Feuilles de style

26 Option SI, 3A Création d'une bordure stylée CSS : div.bordure-top { padding-top: 15px; border-left: 1px solid; border-right: 1px solid; background-image: url(borderh.gif); background- position: top; background-repeat: repeat-x; } div.bordure-bottom { padding: 0px 7px 15px 7px; background-image: url(borderh.gif); background- position: bottom; background- repeat: repeat-x; } XHTML Texte d'exemple. Résultat : Feuilles de style

27 Option SI, 3A Ou mettre le CSS ? Il est possible d'inclure une feuille de style de deux manières différentes dans un document. La première possibilité, qui est probablement la plus simple, est de mettre la feuille de style directement dans l'entête du document, entre une paire de balises... La seconde possibilité est de mettre le code dans un fichier séparé, souvent nommé en.css, et de l'inclure avec dans l'entête une balise de la forme Feuilles de style

28 Option SI, 3A XML met laccent sur le contenu et non sur la manière de présenter les données. Exemple de code XHTML de la page css Zen Garden The Beauty of CSS Design A demonstration of what can be accomplished visually through CSS based design. Select any style sheet from the list to load it into this page. …. Feuilles de style

29 Option SI, 3A Zen Garden (XHTML Brut) Feuilles de style

30 Option SI, 3A Zen Garden (CSS N°1) Feuilles de style

31 Option SI, 3A Zen Garden (CSS 2) Feuilles de style

32 Option SI, 3A Zen Garden (CSS N°3) Feuilles de style


Télécharger ppt "Option SI, 3A XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite."

Présentations similaires


Annonces Google