Cours XHTML/CSS Lundi 9 Février 2009

Slides:

Advertisements

Présentations similaires

Lundi 8 Décembre 2008 Aujourd'hui, nous finirons la mis en forme du texte.

Advertisements

Lundi 15 Décembre 2008 Aujourd'hui, les balises et.

Création de site internet

DTD Sylvain Salvati

Gérer un site avec Kompozer

Feuilles de style CSS - XHTML est un langage impur

Le CSS : un complément au HTML

Cours du 28/09/2009. Le dossier système des gadgets Pour accéder au dossier système des gadgets, cliquez sur Démarrer, tapez %userprofile%\appdata\local\microsoft\windows.

Lundi 2 Mars 2009 Aujourd'hui, les menus

Lundi 9 Mars 2009 Aujourd'hui, la manipulation des images.

Lundi 12 Janvier 2009 Aujourd'hui, la balise et la superposition Image/Texte.

XML, et HTML, comme langages de structuration

1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll

11:06:28 Programmation Web Programmation Web : Feuilles de style CSS Jérôme CUTRONA

RETOUCHE DE PHOTOS ET PEINTURE AVEC LES STYLES DE CALQUE

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

ANIMATION PAR JEUX DE LUMIERE

Cascading Style Sheets (CSS)

CORRESPONDANCE DES VUES

Applications Internet – cours 3 La page web

Python Interfaces graphiques

Les feuilles de style La mise en page

Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre.

Découverte de la feuille de style. CSS Cascading Style Sheets Il ne s'agit pas ici de faire un cours de code CSS ! Il faudrait un certain nombre de chapitres.

Conservatoire National des Arts et des Métiers de Paris Représentation et édition de documents XML.

HTML / CSS Gestion des systèmes d’information Classe terminale

M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006.

Cascading Style Sheets (CSS)

Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.

Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.

31 octobre 2012 Grégory Petit

 Créer une page html nommé index  Cette page doit contenir  Partie de l’entête Titre Métas(description et mots clés) Lien vers une feuille de style.

EXERCICE D'ANIMATION AVEC POWER POINT

Dans la barre des messages, cliquez sur Activer la modification,

Exemples photofiltre.

Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.

Création et présentation d’un tableau avec Word 2007

Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.

Création de sites web I. Site statique : Généralités :

LE CSS ISN Terminale S CSS Types de styles.

2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS

Introduction aux langages Html et CSS

Template joomla Leblanc 2011.

Plan de la leçon Réf. p. WRD- 149 Les styles Les listes hiérarchiques

Auteur : Frédéric Thériault 1. Les boîtes 2 Les attributs 3 width height margin margin-top margin-right margin-bottom margin-left border-style border-width.

Zone 1 Zone 2 Zone 3 Zone 4 Zone 5 Zone 6. La zone 1 : le bandeau devra faire 741 pixels de largeur et ne pas comporter de motifs à sa droite afin de.

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

Auteur : Frédéric Thériault 1. Page à intégrer 2.

Page d’accueil. Blanc cassé Indigo Vert Couleurs.

HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.

1.Conception graphique du site 'Algoma' par la technique des tableaux Réalisez la page d'accueil du site suivant le modèle et les images ressources fournis.

IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Les tableaux>Créer des tableaux Intérêt : Les tableaux en HTML peuvent servir à : - présenter/organiser.

T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.

HTML Création et mise en page de formulaire Cours 3.

Cour préparé par Melle Zineb SAALAOUI HTML/CSS.

Auteur : Frédéric Thériault 1. L’attribut « color »  Permet de modifier la couleur du contenu d’un élément html { color: blue; } Roger Rabbit: … 2.

Conception des pages Web avec

Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.

Les solides Définition:

DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.

Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.

Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements

INF2005– Programmation web– A. Obaid CCS 3. INF2005– Programmation web– A. Obaid 2 L'état d'implantation de CSS 3 Le standard de CSS 3 n'est pas très.

Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.

Création de site web Feuilles de style.

Feuilles de style Cascading Style Sheets

Les différents types des éoliennes - Eoliennes à axe vertical - Eoliennes à axe horizontale.

Transcription de la présentation:

Cours XHTML/CSS Lundi 9 Février 2009 Aujourd'hui, l'arrière-plan des balises <div>

Un arrière-plan dans un div Pour définir une image d'arrière-plan dans une balise <div>, il suffit de préciser son URL dans la propriété background-image : <div style="background-image: url(chute-eau.jpg); ">

Exercice Définissez une balise <DIV> en utilisant un arrière-plan JPG de votre choix. Définissez les propriétés suivantes pour ce DIV : Taille du texte : 40 px Couleur du texte : red

Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <div style="background-image: url(image.jpg); font-size: 40px; color: yellow;"> Ce texte est affiché au dessus de l'arrière-plan image.jpg. </div> </body> </html>

Répétition de l'arrière-plan Pour répéter un arière-plan sur toute la surface d'un <DIV>, il suffit de le positionner en flottant à gauche du <DIV> : <div style="width: largeur_du_div; height: hauteur_du_div; background-image: url(image.jpg); float: left;"></div>

Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis http://lem.korp.free.fr/mulots/texture.jpg Style de bordure (border-style) initialisé à solid Positionnement float: left Vous devriez obtenir ce résultat :

La solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <div style="width: 300px; height: 200px; background-image: url(20.jpg); border-style: solid; float: left;"></div> </body> </html>

Répétition partielle de l'arrière-plan Pour ne répéter l'arrière-plan qu'horizontalement, vous utiliserez un positionnement flottant et vous initialiserez la propriété background-repeat avec la valeur repeat-x. Bien évidemment, la valeur repeat-y limite la répétition à l'axe vertical. <div style="background-image: url(image.jpg); background-repeat: repeat-x; float: left;"></div>

Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis http://lem.korp.free.fr/mulots/texture.jpg Style de bordure (border-style) initialisé à solid Positionnement float: left Répétition horizontale seulement (background-repeat: repeat-x) Vous devriez obtenir ce résultat :