HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40"

Transcription

1 HTML/CSS Louis-Claude CANON 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre / 40

2 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

3 Contexte introductif Internet C ANON HTML/CSS 16 et 17 septembre / 40

4 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). CANON HTML/CSS 16 et 17 septembre / 40

5 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d accéder directement à un autre document web. CANON HTML/CSS 16 et 17 septembre / 40

6 Internet Contexte introductif Internet Réseau : ensemble d équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d accéder directement à un autre document web. Navigateur web Logiciel conçu pour consulter des documents web et facilitant la navigation (i.e., le passage entre une succession de documents liés par des liens hypertextes). CANON HTML/CSS 16 et 17 septembre / 40

7 Page web Contexte introductif Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte,...). CANON HTML/CSS 16 et 17 septembre / 40

8 Page web Contexte introductif Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte,...). Une page, un fichier, une adresse Une page web est un fichier. Il est récupéré sur un site à partir d une adresse web. Le fichier est traduit par le navigateur en contenu visuel. CANON HTML/CSS 16 et 17 septembre / 40

9 Format Contexte introductif HTML Texte brut avec des informations sématiques et structurelles. Exemple : structure du document (délimitation du titre, des sections et des paragraphes) ; nature de portion de texte (acronyme, passage important, liens). CANON HTML/CSS 16 et 17 septembre / 40

10 Format Contexte introductif HTML Texte brut avec des informations sématiques et structurelles. Exemple : structure du document (délimitation du titre, des sections et des paragraphes) ; nature de portion de texte (acronyme, passage important, liens). CSS Spécifie la mise en page et l aspect graphique des structures définies dans le HTML. Exemple : largeur du texte, taille des caractères, police, couleur, agencement du contenu. CANON HTML/CSS 16 et 17 septembre / 40

11 Plan HTML 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

12 Édition de code HTML Texte brut Il s agit de texte brut sans aucune particularité (les traitements de texte allourdissent le texte brut d informations liées à la mise en page). CANON HTML/CSS 16 et 17 septembre / 40

13 Édition de code HTML Texte brut Il s agit de texte brut sans aucune particularité (les traitements de texte allourdissent le texte brut d informations liées à la mise en page). Éditeur de texte Notepad, Wordpad, Notepad++ (recommandé), KompoZer. Qualité d un éditeur de texte : coloration syntaxtique des éléments clés du langages (HTML/CSS ou autre), vérification du respect des normes. CANON HTML/CSS 16 et 17 septembre / 40

14 Balises HTML Balises Commencent par < et finissent par >. Par paire : ouvrante et fermante (la balise fermante contient un / en deuxième position). Invisible lors de l ouverture de la page par le navigateur (utilisé pour le traitement interne). Elles spécifient la nature des éléments qu elles délimitent. CANON HTML/CSS 16 et 17 septembre / 40

15 Balises HTML Balises Commencent par < et finissent par >. Par paire : ouvrante et fermante (la balise fermante contient un / en deuxième position). Invisible lors de l ouverture de la page par le navigateur (utilisé pour le traitement interne). Elles spécifient la nature des éléments qu elles délimitent. Exemple <titre>ceci sera interprété comme étant un titre</titre> Les espaces et retour charriots n ont aucune incidence. CANON HTML/CSS 16 et 17 septembre / 40

16 Validité HTML Particularités Les balises ne se recouvrent pas : <a><b>ceci n est pas valide</a></b> <a><b>ceci l est</b></a> On trouve aussi des balises seules : <c /> CANON HTML/CSS 16 et 17 septembre / 40

17 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. CANON HTML/CSS 16 et 17 septembre / 40

18 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. Syntaxe On rajoute le nom de l attribut après le mot-clé de la balise suivie de sa valeur. CANON HTML/CSS 16 et 17 septembre / 40

19 Attributs HTML Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. Syntaxe On rajoute le nom de l attribut après le mot-clé de la balise suivie de sa valeur. Exemple <citation auteur="martin">blabla</citation> Une citation de Martin. CANON HTML/CSS 16 et 17 septembre / 40

20 Une première page HTML Structure général d un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. CANON HTML/CSS 16 et 17 septembre / 40

21 Une première page HTML Structure général d un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. Exemple <html> <head> <title>titre de la page</titre> </head> <body> Une première page. </body> </html> CANON HTML/CSS 16 et 17 septembre / 40

22 Charset HTML Jeu de caractère On constate que les accents passent mal. Rajouter ceci dans l en-tête (en dessous de la ligne title) : <meta http-equiv="content-type" content="text/html ; charset=iso " /> CANON HTML/CSS 16 et 17 septembre / 40

23 HTML Structurer son contenu Balises liées à la structure Le contenu peut être structurer grâce aux balises suivantes : p chaque paragraphe en est délimité h1 titre de niveau 1 (h2 pour les titres moins importants, h3... il y a 6 niveaux) em mise en valeur d un passage (souvent en italique) strong mise en valeur plus forte (souvent en gras) br pour passer à la ligne (ne pas en abuser) CANON HTML/CSS 16 et 17 septembre / 40

24 HTML Structurer son contenu Balises liées à la structure Le contenu peut être structurer grâce aux balises suivantes : p chaque paragraphe en est délimité h1 titre de niveau 1 (h2 pour les titres moins importants, h3... il y a 6 niveaux) em mise en valeur d un passage (souvent en italique) strong mise en valeur plus forte (souvent en gras) br pour passer à la ligne (ne pas en abuser) Mise en page Il s agit uniquement d informations structurelles (la correspondance em/italique est donnée à titre indicatif, c est le CSS qui spécifiera cette correspondance). CANON HTML/CSS 16 et 17 septembre / 40

25 HTML Exemple de contenu structuré Exemple <html>... <body> <h1>un titre important</h1> <h2>un titre un peu moins important</h2> <p> Un premier paragraphe.<br /> Noter le saut de ligne. </p> </body> </html> CANON HTML/CSS 16 et 17 septembre / 40

26 Autres balises HTML Plus rare sup mettre en exposant (XXI<sup>ème</sup> siècle) sub en indice (x<sub>n</sub> = x<sub>n - 1</sub> + 1) q citation courte blockquote citation longue acronym encadre un acronyme et utilise l attribut title pour indiquer l acronyme développé CANON HTML/CSS 16 et 17 septembre / 40

27 HTML Différent types de balises Inline Utilisées à l intérieur des paragraphes (c est le cas de q). CANON HTML/CSS 16 et 17 septembre / 40

28 HTML Différent types de balises Inline Utilisées à l intérieur des paragraphes (c est le cas de q). Bloc Structure le contenu en blocs (c est le cas de blockquote, h1 et p). CANON HTML/CSS 16 et 17 septembre / 40

29 HTML Différent types de liens Absolu/relatif Lien absolu adresse web pointant vers une page sur n importe quel site Lien relatif adresse web partielle permettant de pointer vers une page relativement à la page en cours de visite CANON HTML/CSS 16 et 17 septembre / 40

30 HTML Différent types de liens Absolu/relatif Lien absolu adresse web pointant vers une page sur n importe quel site Lien relatif adresse web partielle permettant de pointer vers une page relativement à la page en cours de visite Exemple Pour aller sur la page : on peut aussi aller sur le site puis aller sur : identite/identite.htm CANON HTML/CSS 16 et 17 septembre / 40

31 Faire des liens HTML Balise a Utilise l attribut href pour indiquer la cible (relative ou absolue) et l attribut title pour décrire le lien (apparaît dans la bulle d aide). CANON HTML/CSS 16 et 17 septembre / 40

32 Faire des liens HTML Balise a Utilise l attribut href pour indiquer la cible (relative ou absolue) et l attribut title pour décrire le lien (apparaît dans la bulle d aide). Exemple <a href="cible.html">lien vers un fichier local (dans le même dossier que le document HTML courant)</a> <a href=" vers un site externe</a> CANON HTML/CSS 16 et 17 septembre / 40

33 Encore des liens HTML Mail Pour faire un lien ouvrant le mailer pour composer un message : <a href="mailto cliquez ici</a> CANON HTML/CSS 16 et 17 septembre / 40

34 Encore des liens HTML Mail Pour faire un lien ouvrant le mailer pour composer un message : <a href="mailto cliquez ici</a> Ancre Pour faire un lien vers une position spécifique d un document, créer une ancre : <h1 id="ancre1">... </h1> Pour pointer vers cette ancre : <a href="#ancre1">... </a> <a href="page.html#ancre1">... </a> CANON HTML/CSS 16 et 17 septembre / 40

35 Insérer des images HTML Balise img Attributs : src lien vers l image à insérer alt description alternative pour ceux qui ne visualiserons pas l image title bulle d aide On peut faire une image cliquable en encadrant les balises img par des balises a. CANON HTML/CSS 16 et 17 septembre / 40

36 Insérer des images HTML Balise img Attributs : src lien vers l image à insérer alt description alternative pour ceux qui ne visualiserons pas l image title bulle d aide On peut faire une image cliquable en encadrant les balises img par des balises a. Exemple <img src="image.png" alt="une figure" title="description de la figure" /> CANON HTML/CSS 16 et 17 septembre / 40

37 Commentaires HTML Doumenter son code Pour rajouter des descriptions qui ne seront pas traiter pas le navigateur comme faisant partie du HTML : <!-- Description sur plusieurs lignes --> CANON HTML/CSS 16 et 17 septembre / 40

38 Plan CSS 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

39 Introduction CSS Séparation du fond et de la forme Toute la mise en page est définie dans une feuille de style (fichier CSS). Possibilité de manipuler le fond (e.g., rajouter du code HTML) sans se soucier de l aspect visuel. Possibilité de changer la charte graphique sans rééditer chaque fichier HTML. CANON HTML/CSS 16 et 17 septembre / 40

40 CSS Référencer le fichier CSS Balise link dans l en-tête Attributs : rel type de relation (stylesheet dans notre cas) media technologie de rendu concernée (media) type type de document lié (text/css) title nom donné au CSS href lien vers le CSS CANON HTML/CSS 16 et 17 septembre / 40

41 CSS Référencer le fichier CSS Balise link dans l en-tête Attributs : rel type de relation (stylesheet dans notre cas) media technologie de rendu concernée (media) type type de document lié (text/css) title nom donné au CSS href lien vers le CSS Exemple <head> <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" /> <head/> CANON HTML/CSS 16 et 17 septembre / 40

42 CSS Structure d une feuille de style Trois éléments sélecteur balise dont l apparence sera affectée propriété caractéristique graphique à modifier valeur style CANON HTML/CSS 16 et 17 septembre / 40

43 CSS Structure d une feuille de style Trois éléments sélecteur balise dont l apparence sera affectée propriété caractéristique graphique à modifier Exemple valeur style Pour que les paragraphes soient écrits en bleue avec une taile de police de 18 pixels : p { } color : blue ; font-size : 18px ; CANON HTML/CSS 16 et 17 septembre / 40

44 Commentaires CSS Doumenter son code Pour rajouter des descriptions qui ne seront pas traitées pas le navigateur comme faisant partie du CSS : /* Description sur plusieurs lignes */ CANON HTML/CSS 16 et 17 septembre / 40

45 CSS Spécifier des classes graphiques Gérer finement l aspect visuel L attribut class est utilisé pour limiter la porté des styles à certains éléments seulement. Comme sélecteur dans le CSS, on utilise le nom de la classe précédé d un point. CANON HTML/CSS 16 et 17 septembre / 40

46 CSS Spécifier des classes graphiques Gérer finement l aspect visuel L attribut class est utilisé pour limiter la porté des styles à certains éléments seulement. Comme sélecteur dans le CSS, on utilise le nom de la classe précédé d un point. Exemple <p class="specific">... </p>.specific {... } CANON HTML/CSS 16 et 17 septembre / 40

47 Pour un usage unique CSS L attribut id Utilisé en tant qu ancre en HTML, il peut aussi être utilisé pour caractériser une partie du contenu. On précède la valeur par un dièse. CANON HTML/CSS 16 et 17 septembre / 40

48 Pour un usage unique CSS L attribut id Utilisé en tant qu ancre en HTML, il peut aussi être utilisé pour caractériser une partie du contenu. On précède la valeur par un dièse. Exemple <p id="unique">... </p> #unique {... } CANON HTML/CSS 16 et 17 septembre / 40

49 Diviser son HTML CSS Les balises div et span Ces balises n ont pas de signification au niveau HTML. Elles permettent d encadrer des parties de contenu nécessitant une mise en page similaire. div est un balise de type bloc, tandis que span est de type inline. CANON HTML/CSS 16 et 17 septembre / 40

50 Diviser son HTML CSS Les balises div et span Ces balises n ont pas de signification au niveau HTML. Elles permettent d encadrer des parties de contenu nécessitant une mise en page similaire. div est un balise de type bloc, tandis que span est de type inline. Exemple <p> <span class="c1">ce contenu précis sera formatté</span>, mais pas celui-ci</p>.c1 {... } CANON HTML/CSS 16 et 17 septembre / 40

51 Imbrication de balises CSS Structurer davantage On peut enchaîner les sélecteurs en CSS pour signifier que les styles s appliquent de façon restreinte. On peut aussi spécifier qu un style s applique à plusieurs classes. CANON HTML/CSS 16 et 17 septembre / 40

52 Imbrication de balises CSS Structurer davantage On peut enchaîner les sélecteurs en CSS pour signifier que les styles s appliquent de façon restreinte. On peut aussi spécifier qu un style s applique à plusieurs classes. Exemple p.c1 { /* S applique aux parties c1 si elles sont contenues dans un p */ } p,.c1 { /* S applique aux parties p et c1 */ } CANON HTML/CSS 16 et 17 septembre / 40

53 Taille du texte CSS font-size On définit les tailles de plusieurs manières : pixel hauteur maximale en pixel (18px) relative xx-small, x-small, small, medium, large, x-large, xx-large em 1.3em est 1.3 fois la taille normale pourcentage même principe que pour em (100%) CANON HTML/CSS 16 et 17 septembre / 40

54 Taille du texte CSS font-size On définit les tailles de plusieurs manières : pixel hauteur maximale en pixel (18px) relative xx-small, x-small, small, medium, large, x-large, xx-large em 1.3em est 1.3 fois la taille normale pourcentage même principe que pour em (100%) Exemple p { font-size : 1.3em ; } CANON HTML/CSS 16 et 17 septembre / 40

55 Police CSS font-family Utilise les polices par priorité (une police peut être absente sur un système). CANON HTML/CSS 16 et 17 septembre / 40

56 Police CSS font-family Utilise les polices par priorité (une police peut être absente sur un système). Exemple Pour avoir du Arial Black en priorité : p { } font-family : "Arial Black", Arial, Verdana, seri CANON HTML/CSS 16 et 17 septembre / 40

57 Formatage du texte CSS Mise en forme du texte text-align left, center, right, justify text-indent pour rajouter une indentation (en pixel, cm, mm) word-spacing l espace entre les mots (en pixels,...) letter-spacing l espace entre les lettres (en pixels,...) font-style italic, normal font-weight bold, normal font-variant small-caps, normal text-transform uppercase, lowercase, capitalize, none text-decoration underline, line-through, overline, blink, none CANON HTML/CSS 16 et 17 septembre / 40

58 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. CANON HTML/CSS 16 et 17 septembre / 40

59 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. En notation hexadécimal Composantes Rouge-Vert-Bleu aggrégées en un unique nombre commençant par dièse. Exemple : #FF5A28 (FF rouge, 5A vert et 28 bleu). CANON HTML/CSS 16 et 17 septembre / 40

60 Couleurs CSS Exprimer une teinte par son nom Directement par un nom : white, silver, gray, black, red, maroon, lime, green, yellow, olive, blue, navy, fuchsia, purple, aqua, teal. En notation hexadécimal Composantes Rouge-Vert-Bleu aggrégées en un unique nombre commençant par dièse. Exemple : #FF5A28 (FF rouge, 5A vert et 28 bleu). En notation RGB Exemple : rgb(243,65,243) CANON HTML/CSS 16 et 17 septembre / 40

61 Fond d écran CSS background-color couleur de fond background-image image à charger (exemple : url("../images/degrade.png")) background-attachment fixed, scroll background-repeat no-repeat, repeat-x, repeat-y, repeat background-position position de l image (couple de valeurs en pixels ou modalité : top, bottom, center, left, right) CANON HTML/CSS 16 et 17 septembre / 40

62 Héritage CSS Application des styles en cascades Les styles s appliquant à un sélecteur s appliquent à l ensemble de son contenu même si d autres balises et d autres classes sont présentes à l intérieur. Pour appliquer un style à l ensemble du document, il faut l appliquer à body. Chaque nouveau style modifiera celui de plus haut niveau. CANON HTML/CSS 16 et 17 septembre / 40

63 Style des liens CSS Plusieurs états possible Un lien peut avoir été visité. On utilise la pseudo-classe visited pour appliquer un style aux liens visités. CANON HTML/CSS 16 et 17 septembre / 40

64 Style des liens CSS Plusieurs états possible Un lien peut avoir été visité. On utilise la pseudo-classe visited pour appliquer un style aux liens visités. Exemple a {... } a :visited { color : green } CANON HTML/CSS 16 et 17 septembre / 40

65 Pseudo-classes CSS Ajouter de la flexibilité Les pseudo-classes offrent plus de souplesse dans la définition des styles. CANON HTML/CSS 16 et 17 septembre / 40

66 Pseudo-classes CSS Ajouter de la flexibilité Les pseudo-classes offrent plus de souplesse dans la définition des styles. Exemple link pour les liens, lorsqu ils n ont jamais été visités focus pour les liens, lorsqu ils sont sélectionnés active pour les liens, lorsque l on clique dessus hover lorsque le curseur survole une partie (lien ou autre) first-letter première lettre (exemple p :first-letter) first-line première ligne (exemple p :first-line) before à utiliser en conjonction de la caractérisque content qui permet d ajouter du contenu avant une partie after inverse de before CANON HTML/CSS 16 et 17 septembre / 40

67 Plan Synthèse 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON HTML/CSS 16 et 17 septembre / 40

68 Synthèse Synthèse http :// http :// http ://en.wikipedia.org/wiki/html http :// http :// http ://en.wikipedia.org/wiki/cascading_style_sheets CANON HTML/CSS 16 et 17 septembre / 40

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

CSS. Karima Boudaoud IUT- R&T

CSS. Karima Boudaoud IUT- R&T CSS Karima Boudaoud IUT- R&T Plan Plan Références bibliographiques Introduction à CSS Sélecteurs Propriétés et valeurs Responsive design Conclusion Karima Boudaoud IUT R&T - Sophia Antipolis 3 Références

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

CMS : Content Management System

CMS : Content Management System CMS : Content Management System Louis-Claude CANON louis-claude.canon@loria.fr 15 septembre 2009 CANON CMS 15 septembre 2009 1 / 36 Plan Contexte introductif 1 Contexte introductif 2 Contenu numérique

Plus en détail

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML CSS CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention

Plus en détail

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

Plus en détail

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15 Web Bruno BEAUFILS 2017/2018 Web 1 / 15 1. World Wide Web HTML CSS Web World Wide Web 2 / 15 1. World Wide Web HTML CSS Web World Wide Web 3 / 15 Exercice Ecrivez un document vous décrivant à la forme

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

Plus en détail

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents Université de Nice-Sophia Antipolis Jeudi 15 mars 2007 Polytech CiP1 Durée: 1h30 Création et Manipulation de documents (Hélène Renard / Sylvain Schmitz) Travaux Dirigés Séance n o 6 1 Objectifs du TD Utiliser

Plus en détail

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

Plus en détail

Les feuilles de style

Les feuilles de style 1 Les feuilles de style 1. introduction... 1 2. déclaration de style dans le document... 1 3. définitions de style dans les fichiers externes... 5 4. Les attributs de définitions de style... 6 1. introduction

Plus en détail

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

Plus en détail

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

Développement web avec XHTML et CSS

Développement web avec XHTML et CSS Déveloement web avec XHTML et CSS Pierre Dorbais Table des matières I Fond avec XHTML 3 1 Une age minimale 3 2 Les commentaires 3 3 Paragrahes 3 4 Titres 3 5 Saut de ligne et ligne horizontale 4 6 Mise

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

LE RECAP ಠ_ಠ. C est trop facile! LE RECAP ಠ_ಠ C est trop facile! POUR COMMENCER... Quand on commence un fichier HTML (HyperText Markup Language), on écrit en premier le DOCTYPE!! sans oublier les balises

Plus en détail

Bases de données et Internet

Bases de données et Internet Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 2 Feuilles de style en cascade

Plus en détail

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais]

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais] GUIDE HTML ADMINIS TRATIO N DE VO TRE SITE Ce document présente les principales balises HTML pour vous permettre d enrichir la présentation des textes gérés par formulaire d administration. > L usage de

Plus en détail

Langages de l Internet

Langages de l Internet Langages de l Internet http://sebastien.mavromatis.free.fr/ Les feuilles de style CSS : Cascading Style Sheet Recommandation du W3C CSS1 (1996), CSS2 (1998), CSS2.1 (2005), CSS3 Support par les navigateurs

Plus en détail

Les outils de création de sites web (suite)

Les outils de création de sites web (suite) Tuto 3ème séance - p1 Les outils de création de sites web (suite) 8. Les feuilles de style Alors que le langage HTML a pour objet de coder le contenu (texte, images, etc.) d'une page web pour la rendre

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur

Plus en détail

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

Plus en détail

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS ISN ISN Informatique et Sciences du Numérique LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS 1 INTRODUCTION AUX FEUILLES DE STYLE Le langage HTML est à la fois un langage permettant de décrire la structure

Plus en détail

Développement. Web. Gaël Mahé. UFR math-info. automne 2005

Développement. Web. Gaël Mahé. UFR math-info. automne 2005 Développement Client Web Gaël Mahé UFR math-info automne 2005 Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

Technologies de l Internet. Partie 3 : CSS Iulian Ober

Technologies de l Internet. Partie 3 : CSS Iulian Ober Technologies de l Internet Partie 3 : CSS Iulian Ober iulian.ober@irit.fr Introduction au langage CSS permet de changer la mise en forme d'une page (X)HTML sans modifier son contenu gain de temps, de simplicité

Plus en détail

3/ ATELIER WEB LANGAGE CSS

3/ ATELIER WEB LANGAGE CSS 3/ ATELIER WEB LANGAGE CSS *Cascading Style Sheets : feuilles de style en cascade. Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments

Plus en détail

CSS 3. Mai Jérôme GUY

CSS 3. Mai Jérôme GUY CSS 3 Mai 2013 Jérôme GUY CSS Contenu Introduction... 3 Où écrire le CSS?... 3 Inclure un fichier CSS... 3 Les commentaires... 4 Class et Id... 4 Les balises SPAN et DIV... 4 Les sélecteurs avancés...

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain Feuilles de style en cascade Utilisation des CSS Cascading Style Sheets Yan Bodain (Yan.Bodain@polymtl.ca) Chercheur-développeur Maison des technologies de l'information et des communications pour la formation

Plus en détail

INF2005 Programmation web CSS. Jacques Berger

INF2005 Programmation web CSS. Jacques Berger INF2005 Programmation web CSS Jacques Berger Objectifs L'utilité de CSS La syntaxe de CSS L'intégration à HTML Prérequis HTML CSS Cascading Style Sheets Version courante : CSS 3 Le problème initial Pollution

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs

Plus en détail

<div id="nom_id" class="ma_classe">texte affiché</div>

<div id=nom_id class=ma_classe>texte affiché</div> Rappel - Les sélecteurs de base La syntaxe de CSS est simple, elle est composée de 3 éléments: un sélecteur des propriétés des valeurs sélecteur { Il existe 3 sélecteurs de base: le sélecteur de balise

Plus en détail

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE ICN ICN Informatique et Création Numérique LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE 1 MISE EN SITUATION 1.1 Page Web «Une page Web est une ressource du World Wide Web

Plus en détail

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS Couleurs, polices et autres attributs Les feuilles de styles CSS Jusqu à HTML 3.2 : on utilise les attributs des balises. Exemples : ... ...

Plus en détail

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

Plus en détail

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille

Plus en détail

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information Les bases du CSS o Syntaxe générale : balise1 balise2 balise3 o Taille du texte : font-size En pixels : c'est

Plus en détail

Une page web utilisant uniquement du XHTML

Une page web utilisant uniquement du XHTML 1 Une page web utilisant uniquement du XHTML 2 La même page avec le CSS en plus Source: http://www.csszengarden.com/ 3 Séparer le fond de la forme a plusieurs avantages : Personnalisation du design du

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

Plus en détail

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

Langage HTML (suite).

Langage HTML (suite). Langage HTML (suite). Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 36 Plan de la partie 1 (2 séances) Internet et le Web (cours 1) Un outil pour

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Les Feuilles de Styles

Les Feuilles de Styles Chapitre 6 Les Feuilles de Styles http://chaker707.googlepages.com/ BEN MAHMOUD Chaker Chaker707@yahoo.fr Principe des feuilles de style Même idée que les styles des traitements de texte distinction entre

Plus en détail

Introduction aux feuilles de style CSS

Introduction aux feuilles de style CSS Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr Jean-Philippe Pernin - DIP -

Plus en détail

PROPRIETES DES STYLES

PROPRIETES DES STYLES PROPRIETES DES STYLES POLICES DE CARACTERES font-family Polices de caractères. On peut mettre une liste de police dans l ordre de préférence. Les noms des polices doivent dans ce cas être séparées par

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur :

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur : Consignes : le sujet est séparé en deux : la partie HTML et la partie CSS. Pensez bien à rendre les deux. Les réponses aux questions se fait sur le sujet qui est ensuite ramassé. Tous documents autorisés.

Plus en détail

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 -

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 - Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE - 1 - LES BALISES DE SECTIONNAGE - 2 - LES BALISES DE DISPOSITIONS - 2 - LES BALISES - 3 - LES DIFFÉRENTS TYPES DE BALISES - 3 - LES TABLES - 5 - LES

Plus en détail

CSS = Cascading Style Sheets

CSS = Cascading Style Sheets CSS = Cascading Style Sheets = ecrit dans un fichier.css exemple style1.css un meme fichier peut etre partage par plusieurs pages ( uniformite) ajouter dans head page HTML qui utilisera le css :

Plus en détail

Principales balises HTML5

Principales balises HTML5 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise , et s achève avec la balise . DOCTYPE et HTML : Le DOCTYPE : La déclaration

Plus en détail

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3 HTML5 et CSS3. Table des matières : CE qu'est l'html5 page 2 Déclaration De Page page 3 Ossature D'une Page page 3 Les Balises...page 4-6 Les Nouvelles Balises...page 4-6 CSS3 page 7-9 Page 1/9 HTML5 Le

Plus en détail

Cours 11 Feuilles de styles CSS

Cours 11 Feuilles de styles CSS École de bibliothéconomie et des sciences de l information SCI6052 Information documentaire numérique Cours 11 Faculté des arts et des sciences 22 novembre 2016 Christine Dufour, 2016 1/ 30 SCI6052 2/

Plus en détail

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés.

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés. Mise en forme CSS3 Copyright 2017 - Cédric Lefrancq - Tous droits réservés. 1 TABLE DES MATIERES Les bases de la feuille de style... 3 Les commentaires en CSS... 3 Intégrer la page CSS dans la page HTML...

Plus en détail

I/ Une première très brève introduction au WEB :

I/ Une première très brève introduction au WEB : TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page

Plus en détail

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel HTML-CSS Claude Petitpierre, André Maurer, complété par Brice Canvel Automne 2010 ii Table des matières 1 Pages du Web 1 1.1 Introduction......................................... 1 1.2 Le langage HTML......................................

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

Chapitre 7. extended HyperText Markup Language (XHTML)

Chapitre 7. extended HyperText Markup Language (XHTML) Chapitre 7 extended HyperText Markup Language (XHTML) Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML

Plus en détail

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter Conception de Site Webs Interactifs Conception de Sites Web dynamiques Cours 3 Patrick Reuter Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmationcôté

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

Le CSS : un complément au HTML

Le CSS : un complément au HTML Le CSS : un complément au HTML CSS est l'abréviation de «Cascading Style Sheets». CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs,

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

Introduction au langage HTML

Introduction au langage HTML Introduction au langage HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /80 Thibault MARZAIS,

Plus en détail

Cours N 6 Le langage HTML

Cours N 6 Le langage HTML Cours 6: Technologies web - le langage HTML Cours N 6 Le langage HTML Concepts de Base 1. Généralités HTML (pour HyperText Markup Language) est un langage de description de documents hypermédia. Un document

Plus en détail

Programmation Web TD8- CSS

Programmation Web TD8- CSS ²Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD8- CSS Objectifs - Développer des pages Web HTML5 validées - Mettre en place des fichiers CSS pour une meilleure présentation

Plus en détail

Séance 13: Conception de sites web Partie 2

Séance 13: Conception de sites web Partie 2 : Outils de bureautique, logiciels et Internet Séance 13: Conception de sites web Partie 2 Chargée de cours: Ange Adrienne NYAMEN TATO Département Informatique Session Été 2017 Groupe 20 1 Notions abordées

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Cours de I21 SOMMAIRE

Cours de I21 SOMMAIRE Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création

Plus en détail

XHTML. et CSS 2. Michel Martin

XHTML. et CSS 2. Michel Martin XHTML et CSS 2 Michel Martin 1 Les bases du XHTML/CSS Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsque l on se lance dans la programmation XHTML/ CSS, depuis la déclaration de types

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

Classe de première SI CSS

Classe de première SI CSS CSS Table des matières 1. La petite histoire du CSS...2 2. Déclaration du CSS...2 2.1. Fichier.css...2 2.2. En-tête du fichier HTML...3 2.3. Directement dans les balises...3 3. Appliquer un style...3

Plus en détail

BDW1 - Programmation web - CSS

BDW1 - Programmation web - CSS BDW1 - Programmation web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2016-2017 http://liris.cnrs.fr/fabien.duchateau/ens/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

Technologies du Web Master COMASIC CSS

Technologies du Web Master COMASIC CSS Technologies du Web Master COMASIC CSS Antoine Amarilli 1 27 novembre 2014 1. Matériel de cours inspiré de notes par Pierre Senellart et de code par Pablo Rauzy. Merci à Pierre Senellart et Pablo Rauzy

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

Annexe : Balises HTML et CSS

Annexe : Balises HTML et CSS Annexe : s HTML et CSS Cette partie contient une liste non exhaustive des balises HTML et CSS les plus utilisées. Nous avons déjà certaines dans le cours, néanmoins il y en a d'autres que nous n'avons

Plus en détail

Conception d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

Plus en détail

Mémento. Balises de premier niveau

Mémento. Balises de premier niveau Mémento s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une page web. principale

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail