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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

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

2 HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise

3 LES BALISES PRINCIPALES HTML <!DOCTYPE html>

4 COMMENTAIRES <--ceci est un commentaire

5 ORGANISATION DU TEXTE <p>paragraphe</p> <br/> <h1>mon plus gros titre</h1> <h2>un titre un peu moins gros</h2> <h6>tout petit minuscule titre</h6> <em>mots importants</em> <strong>mots super importants</strong> <mark>mots à faire ressortir</mark>

6 LES LISTES Puces sans ordre <ul> <li>élément1</li> <li>élément2</li> </ul> Numérotation <ul> <li>élément1</li> <li>élément2</li> </ul>

7 LES LIENS Vers une autre page: <a href=" autrepage.html">le lien</a> Vers une ancre dans la même page <a href="#labelancre">le lien</a> Nom de l ancre définit par attribut id L attribut title pour infobulle L attribut target pour l ouverture de la page

8 LES IMAGES De préférence PNG Balise orpheline: <img src="pathimage.png" alt="txt"/> Attribut title pour info bulle Dans <a></a> pour img cliquable

9 LES FIGURES <figure> <imgsrc= /> <figcaption>texte expliquatif</figcaption> </figure>

10 LES TABLEAUX <table> <caption> <thead> <tr> <th> <tfoot> <tbody> <tr> <td> Fusion avec colspan et rowspan: <td colspan="2">

11 MISEENFORMECSS Pour la mise en forme À mettre dans un fichier cssséparé Faire le lien dans la balise <head></head> <link rel="stylesheet" href="fichier.css">

12 SURCHARGE DE BALISE

13 SURCHARGE DE BALISE SPÉCIFIQUE Avec id (unique) et class Dans HTML: <p class="introduction">bonjour</p> Dans CSS: Si id -> #introduction

14 BALISES UNIVERSELLES <span> </span> balises inline <div> </div> balises block

15 SÉLECTION DE BALISES Sélecteur universel pour toutes les balises:* Balise inclus dans une autre: Balise qui suit une autre:

16 TAILLE DE TEXTE Propriété font-size Taille absolue : en px, en cm ou mm.(déconseillé) Taille relative : en pourcentage, emou ex 1em = taille normal ex comme emmais + petit Ou % Ou small, medium, large

17 POLICE Tous les navigateurs doivent l avoir Propriété font-family Plrsvaleurs pour le cas ou police absente CSS3 -> téléchargement auto possible: Fichier 1Mo fontsquirrel.com et dafont.com

18 POLICE PERSO

19 MISEENFORMEDETEXTE Avec font-style: Italique: italic Oblique : oblique Avec font-weight: Gras : bold Avec text-decoration: Souligné: underline Barré: line-through Ligne au-dessus : overline Clignotant : blink

20 ALIGNEMENT Propriété text-align: Left Center Right Justifty

21 ÇA FLOTTE Propriété float sur un élément Permet de faire flotter l élément: À gauche avec flaot: left À droite avec float: right On stoppe le flottement avec clear Flottement gauche avec clear: left Flottement droite avec clear: right Tout flottement avec clear: both

22 COULEUR ET FOND Couleur du texte avec propriété color: color: lacouleur Ou en hexa :#FF5A28 Ou fonction rgb(123,56,96) Couleur du fond : avec propriété background-color

23 IMAGE DE FOND background-image : url("imagedefond.png") S applique à tout block Comportement du fond avec: background-attachment: fixed: le fond reste fixe scroll : le fond défile avec le texte background-repeat: no-repeat: pas de répétition repeat-x : répète horizontalement repeat-y : répète verticalement Repeat: répète en mosaïque

24 IMAGE DE FOND(SUITE) Background-position: En px Ou avec top,left,right,bottom,center Ou en combinant (ex: top left) Possibilité de spécifier plrs fonds (CSS3): Séparer url par des virgules

25 TRANSPARENCE D UN ÉLÉMENT Propriété opacity(entre 0 et 1) Ou fonction RGBa(vR,vV,vB,vO)

26 LES BORDURES Border-width: 2px Border-color: blue Border-style: Solid Dotted Double Possibilité de spécifier une seule bordure Arrondi avec border-radius en px Ombres avec box-shadow et text-shadow

27 APPARENCE DYNAMIQUE nomelement:hover pour le survol nomelement:active pour le clic nomelement:focus pour le focus

28 BALISES STRUCTURANTES HTML5 <header></header> <nav></nav> <section></section> <aside></aside> <article></article> <footer></footer>

29 SCHÉMA BALISES STRUCTURANTES

30 REMARQUES Héritage Super propriété background et border

31 LES BOÎTES Différence balises inline et balises block Balises génériques autres: Inline-> <span></span> Block -> <div></div>

32 DIMENSIONNEMENT DE BOÎTES Dimensions: Widthet heighten px ou % Marges: Intérieures : padding Extérieures : margin Spécifique avec: Margin-top, margin-bottom Pareil pour padding-left, padding-right Centrer avec margin: auto Si dépassement du texte -> overflow: auto

33 MISE EN PAGE(INCOMPLET) Propriété display : inline-block Permet de positionner Les éléments les uns à côté des autres Ensuite avec vertical-align: Baseline, top, middle Positionnement: Absolute(z-index pour chevauchement) Fixed(suit la page) Relative (décalage)

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

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

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

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

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

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

<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

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

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

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

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

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

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

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

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

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

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 DE PROGRAMMATION DE SITE WEB 1

COURS DE PROGRAMMATION DE SITE WEB 1 COURS DE PROGRAMMATION DE SITE WEB 1 Chapitre 1 Les bases PLAN DU COURS 1.1 L histoire du WEB 1.2 Du HTML au XHTML et le CSS 1.3 Définition (HTML, XTML, CSS, ASP, PHP, FLASH, CGI, PEARL) 1.4 Les éditeurs

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

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

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

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

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

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

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

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

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40 HTML/CSS Louis-Claude CANON louis-claude.canon@loria.fr 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre 2009 1 / 40 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

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

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

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

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

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

Attribut : style. Attribut style Balise toutes

Attribut : style. Attribut style Balise toutes CSS 2.1 Attribut : style Attribut style Balise toutes !

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

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

CSS MEMENTO. Support de cours. rédigé par : Jonathan Fechner. Dernière mise à jour : 27 Aout 2012

CSS MEMENTO. Support de cours. rédigé par : Jonathan Fechner. Dernière mise à jour : 27 Aout 2012 CSS MEMENTO Support de cours rédigé par : Jonathan Fechner Dernière mise à jour : 27 Aout 2012 Jonathan Fechner - support de cours HTML / CSS - www.jonathanfechner.fr - tout droits réservés - page 1 sur

Plus en détail

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

- WEB / HTML - Annexe 1 : Définition des balises HTML

- WEB / HTML - Annexe 1 : Définition des balises HTML Balises d encadrement - WEB / HTML - Annexe 1 : Définition des balises HTML Encadre le code source. Encadre la zone d entête de la page Web dans laquelle

Plus en détail

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page!

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! Le langage Html : Chapitres HTML!!Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! L1-STS-Internet et Programmation! 47! Le langage Html : Mise

Plus en détail

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

Plus en détail

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis Mathieu Nebra Réussir son site web avec XHTML et CSS 3e édition Préface de Laurent Denis Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12485-9 Table des matières 1. UN SITE WEB, COMMENT ÇA MARCHE?...

Plus en détail

Conception de documents et d interfaces numériques

Conception de documents et d interfaces numériques CAEN 2016-2017 Conception de documents et d interfaces numériques TD n 10 WEB Les Feuilles de styles CSS 2 ANNE Jean-François D après le cours de Mme DRAFATE Style des tableaux Feuilles de Style (CSS)

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

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

UNIX ET PROGRAMMATION WEB Cours 5

UNIX ET PROGRAMMATION WEB Cours 5 Plan UNIX ET PROGRAMMATION WEB Cours 5 kn@lri.fr http://www.lri.fr/~kn 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

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

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

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

HTML CSS Fiche numéro 14

HTML CSS Fiche numéro 14 HTML CSS Fiche numéro 14 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Positionnement en CSS Avant de nous

Plus en détail

Mémento des propriétés CSS

Mémento des propriétés CSS Partie 5 : Annexes 238/246 Mémento des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce sont des propriétés que nous avons vues dans le

Plus en détail

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

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

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

Plus en détail

Partie 2 : La mise en forme avec CSS

Partie 2 : La mise en forme avec CSS Partie 2 : La mise en forme avec CSS Sommaire : Mettre en lace le CSS : Aliquer un style : sélectionner une balise Aliquer un style : class et id Aliquer un style : les sélecteurs avancés Formatage du

Plus en détail

Présentation Nous pouvons spécifier le style de l élément en trois endroits :

Présentation Nous pouvons spécifier le style de l élément en trois endroits : Javascript et CSS Présentation Nous pouvons spécifier le style de l élément en trois endroits : En attribut de l élément : c est le style dit inline. Dans une

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

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

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

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

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

<link rel =" stylesheet " type =" text / css " href =" monstyle. css " />

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

TP : Zoning HTML / CSS

TP : Zoning HTML / CSS RETROUVEZ L INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.FR LIAM TARDIEU TP : Zoning HTML / CSS Si l'on souhaite créer un site web, cela commence par apprendre à créer des zones (un zoning). Avant d'intégrer

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

Les tableaux et les pseudo-classes CSS

Les tableaux et les pseudo-classes CSS Les tableaux et les pseudo-classes CSS Introduction : Pendant longtemps, la mise en page des sites reposait sur l utilisation de tableau. En effet, face à l absence ou l interprétation parfois fantaisiste

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

Références HTML et CSS

Références HTML et CSS Références HTML et CSS Balises HTML 1. Les balises bloc Titre hiérarchique à Affiche en caractères gras le titre contenu dans la balise. La balise correspond aux titres de niveau 1. La taille

Plus en détail

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table>

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

Plus en détail

Contrôle final Développement Web

Contrôle final Développement Web Université de Batna 3 ème année Licence Pro IIM Faculté des sciences Département d informatique 2015/2016 Durée : 1h30 Le 30/05/2016 Question de cours (4.5 pts) Contrôle final Développement Web 1. Le cycle

Plus en détail

Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Introduction à HTML. 27 Février Damien DURVILLE HTML 1 Introduction à 27 Février 2004 Damien DURVILLE 1 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière de

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

Les feuilles de style

Les feuilles de style Les feuilles de style 1. Références Pour des informations plus complètes vous pouvez aller voir : [1] http://mammouthland.free.fr/cours/css/ (tutorial avec beaucoup d'exemples) [2] http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Plus en détail

Programme Formation WebDesign

Programme Formation WebDesign Programme Formation WebDesign Objectif : Connaître les règles et les techniques de création d'une charte graphique. Savoir utiliser une charte graphique pour le développement web. Compétences visées :

Plus en détail

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Les feuilles. de styles CSS. Castanet Thomas - Année scolaire 2009/ page 1

Les feuilles. de styles CSS. Castanet Thomas - Année scolaire 2009/ page 1 Les feuilles de styles CSS Castanet Thomas - Année scolaire 2009/2010 - page 1 Sommaire : Présentation 4 Les propriétés de styles 4 Formatage de police................................... 4 Contrôle du

Plus en détail

Titre 1 Titre 2 Titre 3 Titre 4 Titre 5 Titre 6

Titre 1 Titre 2 Titre 3 Titre 4 Titre 5 Titre 6 HTML / CSS titre Code de base pour une page blanche avec titre d'onglet

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Documents HTML Mise en forme CSS

Documents HTML Mise en forme CSS Département Éducation et Technologie Documents HTML Mise en forme CSS Feuilles de style en cascade Guy Vastersavendts 5.62 Novembre 1999 Centre pour la Formation à l'informatique dans le Secondaire Document

Plus en détail

HTML - FONCTIONNALITES AVANÇEES SOMMAIRE

HTML - FONCTIONNALITES AVANÇEES SOMMAIRE HTML - FONCTIONNALITES AVANÇEES https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 http://www.w3schools.com/html/default.asp Open Class Room SOMMAIRE Fonctionnalités

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

HTML 5 CSS 3 Responsive

HTML 5 CSS 3 Responsive HTML 5 CSS 3 Responsive Programme de formation Microsoft Partner France Belgique Suisse - Canada Formez vos salariés pour optimiser la productivité de votre entreprise Dernière mise à jour : Avril 2014

Plus en détail

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné Le (X)HTML 5 LPCEL promotion 2016/2017 Vincent Peigné Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou 4. L encodage et les accents 1. HTML 5 1. HTML 5 1.1. Définition et historique 1.2. Définition

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

Plus en détail

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

HTML. Alexandre Benoit TS 2016/2017. D après openclassrooms HTML D après openclassrooms Alexandre Benoit TS 2016/2017 Introduction Télécharger à partir de la page web du cours le fichier pageoueb.html Ouvrir le fichier avec Notepad++. Ouvrir le fichier avec Firefox.

Plus en détail

TITRAGE EDIUS TITLE MOTION. Menu Elément / Layer control / Vertical text processing Le curseur apparaît en haut et à droite Taper le texte

TITRAGE EDIUS TITLE MOTION. Menu Elément / Layer control / Vertical text processing Le curseur apparaît en haut et à droite Taper le texte TITRAGE EDIUS TITLE MOTION CRER UN TITRE Caractères spéciaux Menu Edit / character map Clic sur le caractère à insérer OK Taper des caractères verticalement Menu Elément / Layer control / Vertical text

Plus en détail

LISTE DES BALISES EN HTML5

LISTE DES BALISES EN HTML5 LISTE DES BALISES EN HTML5 AIDE-MÉMOIRE HTML&CSS www.multiforme.eu BALISE DEFINITION DES BALISES DESCRIPTION Pour un commentaire L inclusion du DOCTYPE dans un document HTML assure

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

XML DTD CSS Aide-mémoire

XML DTD CSS Aide-mémoire XML DTD CSS Aide-mémoire Bernard JACQUEMIN SCIMEC/CREM UHA Bernard (pt) Jacquemin (at) uha (pt) fr Langage XML Notions Le langage XML est un langage informatique strict qui permet de structurer des données

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