LE LANGAGE HTML ET CELUI CSS - tiprof · 2013-09-23 · Cours sur le langage HTML L'objectif de ce...

en coursde construction

mercredi3 novembre 2004

/

Cette initiation au HTML est prévue sur 4 séances. Elle s'adresse à des étudiants en formation dans le domaine del'impression. Ces étudiants ont déjà un bonne connaissance dans les logiciels de pré-presse, mais n'ont pas encore étéconfrontés à un langage de description de documents.

Les étudiants étant habitués à utiliser des logiciels de composition de document, cette initiation s'appuie surl'observation synchrone du code HTML et de son rendu par un navigateur.

L'apprentissage des bases du langage HTML est aujourd'hui indissociable de celui du langage CSS, tous les éditeursincorporant un mode "WYSIWYG" générant du HTML contenant du CSS.

Les connaissances acquises dans cette initiation constituent les pré-requis d'enseignements ultérieurs à suivre par lesétudiants, comme XML, ou la création basique de pages Web dynamiques avec Php et mySQL.

Les logiciels utilisés pour les parties pratiques de cette initiation sont :

Éditeurs HTMLSeaMonkey (sous Windows ou Mac)

Éditeurs de texteNotePad++ (sous Windows)TextWrangler (sous Mac)

NavigateurFireFox (sous Windows ou Mac)et son extension (plugin) FireBug

references.html

01-ctp-1h30 HTML : un langage à baliseStructure générale d'une page WebQuelques balises et des attributs :Titres, lien, image, map, tableaux, 'frames' et 'targets'

02-ctp-1h30 Présentation d'une page Web : polices(/fontes), styles, tableaux et CSSPassage du code source à la réalisation en Aperçu, en passant par les manipulationsWYSIWYG

03-ctp-1h30 Modification des styles par défaut, en les factorisant dans des classes Association d'unefeuille de style (fichier .css) à un document

04-ctp-1h30 Supports de cours sur les différents langages

TP-rendus

examen Examen HTML et initiation CSS - 08-09

materiel Exemples (HTML, CSS)

ressources Les supports de cours et des miroirs de pages d'autres sites

LE LANGAGE HTML ET CELUI DES CSS

1

Le langage HTML et celui des CSS 23/09/13 16:14

1 sur 1 http://www.tiprof.fr/HTML-CSS-court/

Références pour l'initiation au HTML

consorsium W3http://www.w3.org/

HTML

outils pour les auteurs en HTMLhttp://www.htmlhelp.com/site du cerig (sur la typographie)http://cerig.efpg.inpg.fr/ICG/Dossiers/Typo/chap2.htm#debut_2sur les lienshttp://www.cci-grenoble.artxtra.info/formation/creasiteweb/demo/liens.php ( copie locale)entités HTML et jeux de caractèreshttp://openweb.eu.org/articles/jeux_caracteres/sur les couleurs et leur choixhttp://www.cci-grenoble.artxtra.info/formation/creasiteweb/demo/couleurs.php ( copie locale)

CSS

Introduction aux CSS, avec des explications en français sur toutes les proriétéshttp://www.css-faciles.com/liste-proprietes/white-space.phptout CSS1 - traduction française de la normehttp://www.yoyodesign.org/doc/w3c/css1/Les sélecteurs en CSS2 - traduction française de la normehttp://www.yoyodesign.org/doc/w3c/css2/selector.htmlLes flotants etc ; très précis et explicitehttp://www.yoyodesign.org/doc/w3c/css2/visuren.htmlPasser aux feuilles de stylehttp://openweb.eu.org/articles/initiation_css/Les feuilles de style en cascadehttp://openweb.eu.org/css/site du cerig (css 2004)http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/sommaire.htmsite du cerig (css 1999)http://cerig.efpg.inpg.fr/Note/1999/CSS_14-09-99.htmLes boîtes des CSShttp://openweb.eu.org/articles/initiation_display/Les tables sur le site du W3Chttp://www.w3.org/TR/CSS2/tables.htmlfont-weighthttp://www.w3schools.com/Css/pr_font_weight.asp

Références http://tiprof.fr/HTML-CSS-court/references.html

1 sur 1 26/09/11 14:08

mardi2 octobre 2007

/materiel

essai.html

ifstyle.css

CV-simulHTML Reproduire le fichier HTML dont CV_fr.gif est une copie d'écran. Les "boutons" sontsimplement des liens. La maison pointe vers une page d'index, et le drapeau anglais vers laversion anglaise du CV qui est sensée être dans le même dossier que la version française.

Navigation Utilisation et effet des

OssEtStyle_sPerso Exemple d'ossature de site perso, utilisant une feuille de style .css

Ossature_sitePerso Exemple d'ossature de site perso

PremSite Navigation depuis une image cliquable

Recup_malPresentee Définition d'une présentation pour une page Web récupérée sur la toile

form Tableaux et Formulaires en HTML

gauche_droite-css Vers une simulation de tableau en CSS(utilisation de display:float et de clear:both)

images

lycos-pour-css Exemple d'utilisation de feuille de style .css (modèle à la word) pour un document genre"cours"

mini_site

site_cv

EXEMPLES SUR HTML

1

Exemples sur HTML http://tiprof.fr/HTML-CSS-court/materiel/

1 sur 1 26/09/11 14:09

mardi2 octobre 2007

/01-ctp-1h30

Quelques tutoriels vidéos ont été créés pour l'entrée en matière.

Qu'est-ce que le suite Mozilla, contenant les logiciels FireFox et SeaMonkey ?TutosVideo/HTML-avec-SeaMonkey/presentProjSeamonkey/

Présentation de l'interface de SeaMonkeyTutosVideo/HTML-avec-SeaMonkey/presentInterfaceSeamonkey/

Présentation de l'interface du composeur de SeaMonkeyTutosVideo/HTML-avec-SeaMonkey/interfaceComposeurSeamonkey/

Introduction aux balises HTMLTutosVideo/HTML-avec-SeaMonkey/introStrucHTMLetBalises/

Au sujet des entités HTML et de l'encodage UTF-8TutosVideo/HTML-avec-SeaMonkey/entitesHTMLetEncodageUTF8/

TD-debutHTML.html

cours-debutHTML.html

PREMIERS PAS EN HTML

1

Premiers pas en HTML 23/09/13 16:30

1 sur 1 http://tiprof.fr/HTML-CSS-court/01-ctp-1h30/

Cours sur le langage HTML

L'objectif de ce premier cours est de comprendre les principes de fonctionnement du langage HTML.

Après un bref parcours encadré de la synthèse de présentation du langage,il vous est demandé de réaliser quelques pages Web en exercice d'application.

Vous devrez aussi vous familiariser avec la désignation des pages Web au travers de l'utilisation des liens relatifs et absolus,en vous appuyant sur la lecture de cette page.

On verra aussi comment afficher dans un encodage correct une page Web, et on expliquera ce que sont les entités HTML par oppositionà ce en quoi consiste l'encodage d'un fichier (voir ressources/Annexe-HTML/entites_HTML.html).

Vous pouvez aussi consultez quelques annexes.

Les consignes concernant les travaux à réaliser sont décrites dans la page cette page.

Cours sur le langage HTML http://tiprof.fr/HTML-CSS-court/01-ctp-1h30/cours-debut...

1 sur 1 26/09/11 14:11

TP de base sur HTML

Objectifs

avoir compris les principes du langage HTML (langage à balises)connaître les principales balises (structure d'un document HTML + balises de titres, paragraphe et polices)se familiariser avec les chemins absolus et relatifsconnaître les balises qui font référence à des fichiers (images, liens et ancres)

Pré-requis : utilisation d'un navigateur

A faire

Exercice 1 :

Construire une page HTML avec une entête et un corps de document, contenant

dans l'entête :les balises <title>, <meta>, avec quelques attributs appropriés (à vous d'en trouver)dans le corps :les balises

<h1>, <h2>, <p>,<pre>, <tt>,<ul> et <li>, <ol> et <li>,

avec, entre les balises ouvrantes et fermantes une petite description de l'effet

Méthode

Ouvrir cette page dans le navigateur Mozilla1.Dans le menu Affichage (ou View en anglais), demander à voir le "code Source"2.Lorsque la fenêtre de code source est la fenêtre active (celle du dessus), dans le menuFichier (ou File en anglais), choisir le sous-menu Nouveau puis Composer

3.

Dans la fenêtre du "composer", essayer les différents types d'affichage (onglets proposésen bas de la fenêtre), et s'arrêter sur l'onglet "Source"

4.

Travailler sur ce type d'affichage pour faire des essais5.Sauvegarder localement votre document de travail dans un fichier6.Tester votre fichier dans plusieurs navigateurs (Mozilla, Internet explorer, Safari,Firefox...)

7.

Exercice 2 :

Contruire plusieurs pages qui se renvoient les unes aux autres. Pour cela, vous devez

Récupérer un code et les faire marcher localement. Les pages à récupérées sont celles-ci.Créer un dossier et mettre dedans une copie de votre fichier de tests et une imageContinuer de faire évoluer votre page initiale et sa copie en utilisant les balises

<img>, avec l'attribut src et d'autres attributs appropriés (à vous d'en trouver)<a>, avec les attributs href, target,name,<img> et <map> avec les attributs appropriés

Vous devez en particulier mettre un lien de retour dans les pages 1 et 2 qui s'appuientrespectivement

pour la page 1 sur une textepour la page 2 sur une image

Vous pouvez

utiliser les images groupées dans le dossier ../materiel/images/télécharger un fichier pdf qui présente les différentes pages et le code source de la pageprincipale ../materiel/PremSite/pdf/composition.pdfvoir le résultat à obtenir (mais là, c'est tricher...) ../materiel/PremSite/index.htmltélécharger un fichier zip avec tous les fichiers (mais là, c'est encore plus tricher ! )../materiel/PremSite/PremSite.zip

Plus...

Pour aller plus loin, vous pouvez essayer d'utiliser des "frames" (voir ../materiel/Navigation ).

Premier TD sur le langage HTML http://www.tiprof.fr/HTML-CSS-court/01-ctp-1h30/TD...

1 sur 2 26/09/11 14:18

Conseils d'organisation

Travailler localement,mais sauvegarder systématiquement vos travaux sur le serveur de l'école en fin de séance

A me rendre (note)

Pour le vendredi de la fin de la semaine courante :

faire un Compte Rendu de TP quirésume en quelques lignes ce qu'est le langage HTMLdécrit la "syntaxe" d'une balise (balise ouvrante et fermante, balise simple oubalise unaire, attributs et valeurs)explique ce qu'est un arbre du documentliste des différentes balises testées et décrit ce qu'elles fontdécrit les attributs de la balise <a>fait la différence entre les termes : ancre, lien interne et externe, lien relatif etabsoluexplique comment on insère une image

et éventuellement si vous avez eu le temps de les utiliser

explique ce qu'est une "frame" (mot anglais) et comment on en utiliseexplique ce qu'est une "map" (mot anglais) et comment on en utilise

faire un dossier zippé avec vos travauxle nommer avec votre nom de famille (deux noms si par binome)et me l'envoyer en courrier électronique

Les exercices sont à terminer pendant la semaine, avant la prochaine séance

Premier TD sur le langage HTML http://www.tiprof.fr/HTML-CSS-court/01-ctp-1h30/TD...

2 sur 2 26/09/11 14:18

Cours pour agir sur la présentation en HTML

L'objectif de ce cours est

d'atteindre un peu plus de familiarité avec l'utilisation d'un langage à balise pour décrire un documentde se familiariser avec les différentes vues d'un document HTML (normal/source)de découvrir et parcourir les différentes manières d'agir sur la présentation d'une page Web avec les techniques liées àHTMLde remarquer que la description de la présentation à l'aide des attributs des balises rend le code lourd et difficile à lire parl'humain

On insistera sur les tableaux et commencera à parler du langage de présentation complémentaire au HTML : CSS

Cette séance est essentiellement pratique.

Sur PC avec Windows, les logiciels utilisés seront Internet Explorer et FrontPage.Sur Mac avec OSX, les logiciels utilisés seront Mozilla (navigateur et composeur - accessible par l'item New du menu Fichier) etéventuellement en fin de séance BBEdit ou TextWrangler.

Les consignes concernant les travaux à réaliser sont décrites dans cette page.

Les documents à consulter sont

sur les possibilités d'agir sur la présentaion directement en HTMLet le résumé sur les Css

Cours pour agir sur la présentation en HTML http://tiprof.fr/HTML-CSS-court/02-ctp-1h30/cours-pr...

1 sur 1 26/09/11 14:19

Présentation d'une page Web

Objectifs

utilisation d'un composeur de pages Web (différence entre le code source et une présentation WYSIWYG)utilisation des balises pour les tableauxfactorisation de propriétés de style grace à l'attribut style

Pré-requis : les bases du langage HTML

A faire

Exercice

Reproduire le fichier HTML dont est une copie d'écran.

Les "boutons" sont simplement des liens.La maison pointe vers une page d'index,et le drapeau anglais vers la version anglaise du CV qui est sensée être dans le même dossier que la version française.

A me rendre (note)


un compte rendu de TP quiexplicite de quoi vous êtes parti (où trouver la copie d'écran)donne la consignedécrit l'organisation de votre travail (quels logiciels pour faire quoi)explicite votre démarche (quelle stratégie : passage d'un onglet à l'autre - normal/HTML/... )décrit un à un les points du tp nécessitant des réalisations plus compliquéesfait le tour des fonctionnalités qui vous avez utilisé dans chaque logiciel

le nommer avec vos noms de famille (par binome)et me l'envoyer en courrier électronique

TD pour se familiariser avec les CSS http://tiprof.fr/HTML-CSS-court/02-ctp-1h30/TD-html...

1 sur 1 26/09/11 14:19

Cours pour agir sur la présentation d'une page Web

Dans ce cours, on apprendra utiliser une autre langage que HTML, complémentaire à celui-ci , pour agir sur la présentation d'undocument par les navigateurs

Ce langage s'appelle CSS : il permet de définir des feuilles de styles en cascade (Cascading Style Sheet)

Cette séance sera essentiellement pratique, mais elle permettra de présenter un nouveau vocabulaire, utilisé pour désigner leséléments du langage :

sélecteurssuite de nom désignant des noeuds d'un arbre HTML

propriétésmots prédéfinis et réservés pour affecter la présentation de balises fixées

On introduira la notion de bloc, et les différentes zones qui les composent (voir dans le résumé sur les CSS)

Enfin, on verra les différentes façons d'appeler une feuille de style ou des propriétés de style

On prendra un point de vue incrémental, en faisant évoluer des documents uniquement en html :

d'abord en utilisant le plus souvent possible l'attribut stylepuis en définissant des classes pour factoriser des propriétés de styles à l'aide d'un sélecteur


le résumé sur les Csset les sites Web donnés en référence


Cours pour agir sur la présentation en HTML http://tiprof.fr/HTML-CSS-court/03-ctp-1h30/cours-css...

1 sur 1 26/09/11 14:23

Utilisation d'une feuille de style pour présenter d'une page Web

Objectifs

séparation de la présentation dans une feuille de stylebien respecter la forme stricte (XHTML)

Pré-requis : les bases du langage HTML et un minimum de familiaritéavoir lu et testé les exemples du résumé sur les Css

A faire

Exercice 1

Partir du fichier HTML suivant et factoriser ...

Exercice 2

Partir du fichier HTML suivant et factoriser ...

A me rendre (note)


un compte rendu de TP quiexplicite de quoi vous êtes parti (où trouver la copie d'écran)donne la consignedécrit l'organisation de votre travail (quels logiciels pour faire quoi)explicite votre démarche (quelle stratégie : passage d'un onglet à l'autre - normal/HTML/... )décrit un à un les points du tp nécessitant des réalisations plus compliquéesfait le tour des fonctionnalités qui vous avez utilisé dans chaque logiciel

le nommer avec vos noms de famille (par binome)et me l'envoyer en courrier électronique

TD pour se familiariser avec les CSS http://tiprof.fr/HTML-CSS-court/03-ctp-1h30/TD-css.html

1 sur 1 26/09/11 14:24

Les formulaires en HTML

L'objectif de ce cours est de savoir écrire un formulaire en HTML, et récupérer les valeurs entrées par le visiteur dans les différentschamps


sur les balises HTML qui décrivent des formulaireset la manipulations des valeurs portées par les champs


Les formulaires en HTML http://tiprof.fr/HTML-CSS-court/04-ctp-1h30/cours-fo...

1 sur 1 26/09/11 14:25

TD sur les formulaires en HTML

Objectifs

bien respecter la forme stricte (XHTML)balises pour produire des formulairesrécupération des valeurs mises dans les champs

Pré-requis : les bases du langage HTML et des Css

A faire

Exercice 1

Reproduire le formulaire du poly sur HTML Faire un formulaire pour entrer un nouveau favori dans le site perso. Ce formulaire nedoit rien produire, mais permettre de remarquer le contenu de l’URL généré par le navigateur à la suite du clic sur le bouton.Comparer la methode get et la methode post

Exercice 2

Faire un formulaire pour modifier la couleur de fond de la page du formulaire elle-même, comme dans l'exemple

A me rendre (note)

En fin de séance,

faire un dossier zippé avec vos travauxle nommer avec vos noms de famille (par binome)et me l'envoyer en courrier électronique

TD sur les formulaires en HTML http://tiprof.fr/HTML-CSS-court/04-ctp-1h30/TD-form...

1 sur 1 26/09/11 14:25

HTML

Sommaire

Concepts1.Structure générale d'une page Web2.Quelques balises de l'entête3.Quelques balises du corps4.Tableaux5.Quelques attributs6.Caracteres spéciaux7.Insertion d'images8.Navigation hypermédia9.Images clicables10.Formulaires11.Feuilles de style12.Bibliographie13.

Introduction

Ce cours n'est pas exhaustif, mais il cherche à faire un tour synthétique des possibilités de HTML.

Concepts

Une page Web est un document structuré composé d'éléments (textes, images, liens hypertextes,...) à afficher selon une présentation.

La structure du document définit le rôle des différents éléments qui le composent : des titres, dessous-titres, des paragraphes, des illustrations, des légendes, des renvois, des animations définiesdans des scripts...

Le langage HTML permet d'associer la strucure du document à son contenu, au moyen d'unmarquage de chacun de ses éléments : il ajoute des "marques" (en anglais tags), parfois appelées"balises", à du texte ASCII (texte simple, sans mise en page).

La plupart des balises vont par paire: une balise ouvrante <TRUC> et une balise fermante</TRUC>, dont l'action porte sur ce qu'elles encadrent.

Les balises peuvent être imbriquées hiérarchiquement, mais pas n'importe comment. Par exemple :

<TRUC><MACHIN></MACHIN></TRUC>

<TRUC><MACHIN></TRUC></MACHIN>

est correct n'est pas correct

Une balise comporte obligatoirement un nom, éventuellement suivi d'une série d'attributs avec,pour certains attributs, une valeur associée. Par exemple, pour <IMG SRC="URL_de_l'image">, lenom de la balise est IMG et l'attribut a pour nom SRC et pour valeur une URL désignantl'emplacement du fichier contenant l'image.

La spécification officielle de la syntaxe HTML (http://www.w3.org/TR/1999/PR-html40-19990824/)

HTML http://www.tiprof.fr/HTML-CSS-court/ressources/HTML...

1 sur 10 26/09/11 14:13

stipule, pour chaque balise, quels attributs sont autorisés et quelles valeurs ces attributs peuventprendre. Pour les balises allant par paire, la fermeture ne mentionne que le nom de la balise(</TRUC>), sans aucune mention d'attribut.

Structure générale d'une page Web

Les documents HTML sont des documents structurés et l'imbrication des marques a son importanceet ses contraintes:

La partie head doit précéder la partie body et les deux parties doivent être imbriquées dans lapartie html.La partie title doit être imbriquée dans la partie head.Certaines marques délimitent des paragraphes complets et ces parties ne peuvent donc pasêtre imbriquées dans d'autres parties correspondant à des paragraphes complets.Deux parties ne peuvent pas se chevaucher partiellement. Suivant les marques utilisées, ellespeuvent être imbriquées.En cas de non-respect des règles de syntaxe, il se peut que votre programme de visualisationaffiche malgré tout le document correctement. Mais il peut en être tout autrement avec unautre programme de visualisation ou simplement avec une autre version du mêmeprogramme.

Début<HTML>

Entête :

description de documentset insertion de scripts

<HEAD> <TITLE>ma page Web</TITLE> <SCRIPT>...</SCRIPT> <META NAME="..." CONTENT="..."></HEAD>

Corps :

partie visible du document

<BODY> bla bla bla .. ... ...  <P></P></BODY>

Fin</HTML>

<HTML> . . . </HTML> indique le début et la fin d'un document HTML

<HEAD> . . . </HEAD> indique la section des informations non-affichables

<TITLE> . . . </TITLE> indique le titre (non-affichable) du document

<BODY> . . . </BODY> indique la section des informations affichables

Quelques balises de l'entête

L'élément TITLE

Il définit le titre du document, et est toujours requis. C'est lui qui est affiché dans lebandeau de la fenêtre du navigateur.

<TITLE>A study of population dynamics</TITLE>

L'élément META


2 sur 10 26/09/11 14:13

Il est utile pour inclure des paires de noms/valeurs qui décrivent des propriétés d'undocument, comme l'auteur, la date d'expiration, une liste de mots clés, etc. L'attributNAME specifie le nom de la propriété, alors que l'attribut CONTENT specifie sa valeur.par exemple :

<META NAME="Author" CONTENT="Valerie Bellynck">

L'élément BASE

Il permet de définir une base URL pour les URL relatives, par exemple :

avec dans l'entête :

<BASE href="http://www.serveur.fr/intro.html">

et dans le corps :

<IMG SRC="icons/logo.gif">

L'image référencées est à l'URL :http://www.acme.com/icons/logo.gif

Quelques balises du corps

Titres:

<H1> . . . </H1> titre de niveau 1

<H2> . . . </H2> titre de niveau 2

... ...

Effects locaux:

<blockquote> . . .</blockquote>

démarque un paragraphe qui sera indenté commel'est souvent une citation.

<i> . . . </i> indique une portion de texte en italique

<B> . . . </B> indique une portion de texte en caractères gras

<EM> . . . </EM>indique une portion de texte mise en évidence(EMphasis, en anglais). C'est souvent équivalent à del'italique

<STRONG> . . .</STRONG>

indique une portion de texte fortement mise enévidence

Marques solitaires

Ce sont des balises qui n'ont pas besoin de balise de fin. Elles indiquent, par exemple,une séparation dans le texte:

<P> saut de paragraphe (retour à la ligne + saut de ligne)

<BR> retour à la ligne (line BReak)

<HR> trait horizontal (Horizontal Ruler)

Les énumérations (listes et définitions):

<UL> . . . </UL> indique une liste non numérotée (Unnumbered List)


3 sur 10 26/09/11 14:13

<OL> . . . </OL> indique une liste numérotée (Ordered List)

<LI> précède chaque élément de la liste

<DL> . . . </DL> indique une série de défintions de termes

<DT> précède un Terme

<DD> précède une Définition

<dl compact>...</dl> permettra d'éviter autant que possible un retour à la ligne entre lapartie <dt> et la partie <dd>.A chaque marque <dt> peut correspondre au plus une marque <dd> (il peut n'y en avoiraucune, c'est-à-dire que plusieurs marques <dt> peuvent se succéder sans marque <dd>entre elles). Par contre, on n'a pas le droit d'avoir plusieurs marques <dd> qui se suiventsans marque <dt> entre elles. Si l'on désire forcer un retour à la ligne, il faut plutôt utiliser lamarque <br>.

Les tableaux (nouveautés de HTML 3.2 )

Les tableaux permettent d'arranger des informations en lignes et en colonnes de cellulesindividuelles. Sauf indication particulière, toutes les cellules d'une même colonne ont la mêmelargeur et toutes les cellules d'une même ligne ont la même hauteur. Largeurs et hauteurs sontnormalement déterminées automatiquement par le "client" (butineur) en fonction du contenu desdiverses cellules et des dimensions de la fenêtre d'affichage.

Le contenu du tableau est décrit ligne après ligne. Au sein d'une ligne, les cellules sont fournies degauche à droite.

<TABLE> . . .</TABLE>

delimitent la description d'un tableau

<TR> . . . </TR> (Table Row) indique le début d'une nouvelle ligne

<TH> . . . </TH>(Table Heading) indiquent le début d'une cellule detitre

<TD> . . . </TD> (Table Data) indiquent le début d'une cellule

<DT> précède un Terme

<DD> précède une Définition

Les marques de fermeture </TH> et </TD> peuvent être omises car la prochaine marque <TH>,<TD>, <TR> ou </TABLE> suffit à délimiter le contenu de la cellule.

L'exemple suivant est celui du titre de ce document. Il fait apparaître différents attributs associésaux balises. Il y a bien d'autres possibilités. Pour les détails, voir la spécification 4.01,http://www.w3.org/TR/1999/PR-html40-19990824/struct/tables.html.

<TABLE BORDER=1 CELLPADDING=5 bgcolor="3399dd"> <TR> <TD bgcolor="ffcccc"><FONT COLOR="#AF0000"></FONT> <H1><CENTER><FONT COLOR="#AF0000">HTML</FONT></CENTER></H1> </TD></TR></TABLE>

Quelques attributs

Les attributs de couleur


4 sur 10 26/09/11 14:13

la marque <BODY> peut avoir l'attribut BGCOLOR pour définir la couleur du fond de la fenêtre detexte;la marque <FONT> peut avoir l'attribut COLOR pour définir la couleur du texte qui va suivre;les marques <TH> et <TD> peuvent avoir l'attribut BGCOLOR pour définir la couleur du fondd'un élément de tableau.

Les attributs COLOR et BGCOLOR peuvent prendre des valeurs hexadécimales de six positions (deuxpositions hexadécimales pour chacune des composantes rouge, vert et bleu), par exemple COLOR="#FF0000" pour du rouge vif, ou un des symboles prédéfinis de couleur:

White, Black, Maroon, Green, Olive, Navy, Purple, Teal, Gray, Silver, Red, Lime, Yellow, Blue,Fuchsia, Aqua

Couleur Symbole apparence Couleur Symbole apparence

blanc white jaune yellow

argent silver bleu ciel aqua

gris gray bleu marine navy

noir black bleu blue

vert jaune lime marron maroon

vert green pourpre purple

gris vert teal rouge red

olive olive rose fuchsia fuchsia

L'attribut d'image de fond

La marque <BODY> et les marques <TABLE> et <TD> peuvent avoir l'attribut BACKGROUND pour définirl'URL d'une image qui servira de fond au document, au tableau ou à la cellule respectivement. Sicette image est plus petite ce qui doit la contenir, l'image est automatiquement répétée, aussi bienhorizontalement que verticalement. Si l'on utilise cette possibilité, il est bon de bien contrôler lecontraste entre le texte et l'image et l'effet de la répétition éventuelle de l'image en cas de fenêtretrès grande.

Changer de police de caractères

Initialement introduite par Microsoft dans Internet Explorer, la marque <FONT> permet aussi dedéfinir la police de caractères à utiliser à l'aide de l'attribut FACE. Cet attribut n'est toutefois pasmentionné dans la spécification officielle 3.2, mais uniquement dans la spécification 4.0, avec lamention "déconseillé" (deprecated). La valeur associée à cet attribut est le(s) nom(s) d'une ouplusieurs polices de caractères, séparés par des virgules (par ex. <font face="Helvetica,sans-serif"> indique que l'on désire utiliser une police Helvetica ou, à défaut, une autre policesans-serif). Evitez d'utiliser l'attribut FACE pour passer à un autre alphabet (par ex. pour dessymboles grecs). De plus, évitez d'utiliser des polices trop spécifiques à une certaine plateforme,car si cette police n'est pas disponible sur la machine de l'utilisateur, le butineur va utiliser unepolice par défaut qui convient mal pour ce que vous vouliez obtenir.

Caractères spéciaux

Les fichiers HTML doivent être en ASCII, les lettres accentuées et certains caractères spéciaux fontdonc l'objet d'un marquage spécial:


5 sur 10 26/09/11 14:13

< pour < > pour > & pour & " pour "

Les blancs consécutifs et les retours à la ligne ne sont généralement pas significatifs. Ilscomptent comme un seul caractère blanc (sauf entre <pre> et </pre>).La raison pour laquelle les lettres accentuées sont représentées par des séquences decaractères plutôt que par les lettres accentuées elles-mêmes est que les ordinateursn'utilisent pas tous la norme ISO Latin 1 pour la représentation des caractères. Il y auraitdonc le risque que certaines lettres apparaissent de manière bizarre sur la machine d'unlecteur alors qu'elles paraissaient parfaitement correctes sur la machine de l'auteur.

D'une manière générale, tous les caractères ISO Latin 1 peuvent être représentés sous la forme&#n; (où n est un nombre décimal compris entre 32 et 255). Par exemple, © correspond à©

Insertion d'images

Les images peuvent être insérées dans le texte à l'aide de la marque <img src="URL_de_l'image"align=alignement alt="Description_textuelle">, où alignement est top, middle ou bottom (valeurpar défaut). La description textuelle sert de remplacement pour le cas ou le programme devisualisation n'a pas la capacité d'afficher des images. Exemple:

<img src="Smouse2.gif" align="top" alt="petite souris"> avec du texte à la suite

qui continue éventuellement sur la ligne suivante.

<img src="Sbird4.gif" align="middle" alt="oisillon"> avec du texte à la suite qui continue

éventuellement sur la ligne suivante.

<img src="Smouse.gif" align="bottom" alt="petite souris"> avec du texte à la suitequi continue éventuellement sur la ligne suivante.

Les formats les plus universellement acceptés sont le GIF et le X bitmap. Mais le format JPEG estdevenu assez communément accepté et un nouveau format est apparu pour remplacer le GIF: leformat PNG (Portable Network Graphics) (voir aussi la PNG Home Page)

Navigation hypermédia

On peut "ancrer" un hyper-lien sur un sous-ensemble du document ou d'un autre document. Cesous-ensemble peut se limiter à une seule lettre, mais peut tout aussi bien inclure un mot, unephrase, tout un paragraphe, une image, etc.

Une ancre (ou point de repère) doit préalablement avoir été définie. Par exemple, dans cedocument, le sommaire est constitué d'hyperliens qui dirigent vers des ancres définie juste avantchaque titre. Pour le titre précédent , le code est :


6 sur 10 26/09/11 14:13

<H4><CENTER><A NAME="NavigationHypermedia"></A>Navigationhypermédia</CENTER></H4>

Et le code de l'hyperlien #NavigationHypermedia est :

<A HREF="#NavigationHypermedia">#NavigationHypermedia</A>

Les images "cliquables"

Il s'agit de définir, pour une image donnée, des zônes "sensibles" qui agiront comme des hyper-liens.

Exemple:

La norme HTML 3.2 a entériné la façon de procéder de Netscape, à savoir que la définition etl'utilisation des zônes sensibles d'une image peuvent se faire à des emplacements très éloignésdans le même document, voire dans deux documents séparés:

l'image en elle-même est déclarée comme n'importe quelle autre image, avec la marque<IMG...> à laquelle on rajoute l'attribut usemap="xxx", où xxx a la même syntaxe qu'unpoint d'ancrage (EventuelleURL#UnNom);la définition des zônes se fait à l'aide de la marque <map name="UnNom"> suivie d'uncertain nombre de marques <AREA...> et terminée par la marque de fin </map>.chaque marque <area ...> correspond à une zône spécifique de l'image à laquelle vacorrespondre un hyper-lien. Pour cela, il faut définir un certain nombre d'attributs à la marque<area ...>:

l'attribut shape indique la forme de la zône et peut valoir "poly", "rect" ou "circle"

l'attribut href donnera l'URL du document vers lequel on veut aller; pour définir unezône inactive; on peut mettre à la place l'attribut nohref

l'attribut coords sera une succession de valeurs numériques entières indiquant lescontours de la forme choisie (en pixels):

rectangle4 valeurs indiquant les coordonnées x et y du coin supérieur gauche etdu coin inférieur droit

cercle3 valeurs indiquant les coordonnées x et y du centre et la dimensiondu rayon

polygone 2n valeurs indiquant les coordonnées x et y des n points du polygone

l'attribut alt permet de fournir un texte qui correspondra à la zône, pour le cas où leprogramme de visualisation n'est pas capable d'afficher du graphiquel'ordre des marques <area ...> a de l'importance, dans la mesure où il y aurait recouvremententre les différentes zônes déclarées. Les zônes sont examinées dans l'ordre où elles sontdéclarées et la première qui peut contenir le point désigné par l'utilisateur sera utilisée poursuivre son éventuel hyper-lien. On peut ainsi facilement rajouter une marque <areashape="rect" coords="0,0, MaxX, MaxY" href="..."> (où MaxX et MaxY sont les valeursnumériques correspondant à la dimension de l'image) à la fin de la série, qui recouvre latotalité de l'image, pour traiter toutes les zônes résiduelles qui n'auraient pas été spécifiéespar les marques <area ...> précédentes.

L'exemple vu plus haut correspond au code HTML suivant:

<IMG ISMAP SRC="Sbird4.gif" USEMAP="#bird" WIDTH=60 HEIGHT=77 BORDER=0 ALIGN=top>


7 sur 10 26/09/11 14:13

<MAP NAME="bird"><AREA SHAPE="circle" HREF="Map/AileG.html" COORDS="14,44, 25,25"><AREA SHAPE="circle" HREF="Map/AileD.html" COORDS="49,37, 25,25"><AREA SHAPE="rect" HREF="Map/Pattes.html" COORDS="24,53, 48,67"><AREA SHAPE="circle" HREF="Map/Tete.html" COORDS="29,20, 30,20"><AREA SHAPE="default" HREF="Map/Fond.html" COORDS="0,0,60,77"></MAP>

Du point de vue pratique, on peut conserver les marques <img> et <map> l'une à côté de l'autredans le même document, à moins que la même image clicable soit utilisée dans plusieursdocuments, auquel il suffit de mettre la marque <map> dans un document HTML à part qui necontient que cela.

RFC 1980 (http://www.ietf.org/rfc/rfc1980.txt): "A Proposed Extension to HTML : Client-Side ImageMaps."

Les formulaires

Les formulaires (balise <FORM>) offrent la possibilité au client depuis son navigateur de saisirinteractivement des données (boutons radio, choix multiples, zone texte simple...) qui sontenvoyées à un serveur.

La balise <FORM> a les attributs suivants :

ACTION spécifie l'action à effectuer après la validation de la saisie (clic sur un bouton) :envoyer un mail, exécuter un script PHP ou CGI...METHOD définit la méthode de transmission des données (post ou get)). Dans la methodeget, les paramètres sont directement accolés à l'URL après un "?". Dans la methode post, lesparamètres se trouvent dans le corps de la requête après son entête.ENCTYPE indique le type d'encodage des donnees.

Le formulaire ci-dessus est engendré par le code HTML ci-dessous.

<CENTER><FORM ACTION="valid_saisie.php3" METHOD="GET">Nom : <INPUT TYPE="text" NAME="nom" SIZE="20"> <BR><INPUT TYPE="radio" NAME="sexe" VALUE="H" CHECKED> Homme <BR><INPUT TYPE="radio" NAME="sexe" VALUE="F"> Femme <BR>Password : <INPUT TYPE="password" NAME="pwd" SIZE="8"> <BR><INPUT TYPE="hidden" NAME="numero" VALUE="121"><INPUT TYPE="hidden" NAME="action" VALUE="saisie_etud"><INPUT TYPE="checkbox" NAME="filiere" VALUE="info"> Informatique <BR><INPUT TYPE="checkbox" NAME="filiere" VALUE="tr"> Telecom-Reseaux <BR><INPUT TYPE="checkbox" NAME="filiere" VALUE="en"> Electronique <BR><SELECT NAME="annee"><OPTION VALUE="a1"> A1</OPTION><OPTION SELECTED VALUE="a2"> A2</OPTION>


8 sur 10 26/09/11 14:13

<OPTION VALUE="a3"> A3</OPTION></SELECT> <BR><INPUT TYPE="submit" VALUE="Envoyer les infos"></FORM> </CENTER>

Dans le contexte des architectures 3-tier, les formulaires sont particulièrement utilisés.

Les feuilles de style

Habituellement, les pages HTML sont présentées selon les caractéristiques de la feuille de style pardéfaut du butineur utilisé.

Une feuille de style permet de (re)définir certaines caractéristiques de présentation de marquesprédéfinies, et ainsi de personnaliser tout un site, en respectant une charte de présentation propreau site.

L'utilisateur peut aussi éventuellement indiquer une feuille de style qui s'appliquera à tous lesdocuments visualisés.

Voir ../../ressources/Css/index.html

Modification de la présentation des éléments HTML

La balise STYLE, utilisée dans l'entête, permet de surcharger un style dans tout undocument :

<head>... <style type="text/css">H1 {color: blue }</style>

On peut aussi modifier localement (directement dans la section <body>) le style d'unparagraphe : une marque de paragraphe peut porter l'attribut style="NomDePropriété:Valeur".

...<body>...<p style="color: aqua">Paragraphe bleu ciel

Il peut y avoir conflit entre les directives fournies par ces différentes approches. Larésolution de ces conflits est basée sur la pondération des directives:

La pondération des directives du lecteur/utilisateur sont plus faibles que celles del'auteur du document.La pondération de directives importées est inférieure à la pondération desdirectives du fichier courant (que ce soit le document HTML même ou une feuillede style).Une directive peut voir sa pondération augmentée par l'utilisation du mot-cléimportant. Par exemple:

h1 {color: black ! important; background: white ! important }

Une directive du lecteur marquée important a une pondération plus élevée qu'unedirective normale de l'auteur.

Utilisation abusive des feuilles de style


9 sur 10 26/09/11 14:13

Etant donné que le support des feuilles de style n'est pas encore systématique dans tousles butineurs et qu'en plus l'utilisateur peut choisir de le désactiver lorsqu'il estdisponible, il faut à tout prix éviter que la lecture d'un document dépende tropfortement de la feuille de style associée. Les feuilles de styles sont là pour améliorer laprésentation d'un document et non pas pour la contrôler. Pour un exemple concret, voir"Style Sheet Dependence", un document du Web Design Group.

Note: il semble qu'avec Netscape (version 4 et précédentes), les feuilles de style nefonctionnent que si JavaScript est activé.

Voir aussi les Annexes sur HTMLdont : HTML Quick Reference

Cette page est très largement inspirée de

http://cui.unige.ch/eao/www/prod/CNAMbis.html#main et http://cui.unige.ch/eao/www/prod/Plan.html#main


10 sur 10 26/09/11 14:13

xartxtra.info

rubrique : Création d'un site web •Accueil >Formations >Vous êtes ici !

Les Liens dans une Page WebDans le HTML, il y a HT pour HyperText. L'HyperTexte, c'est le lien. Sans lien, pas d'Internet.

Balise dotée d'une forte valeur sémantique, elle organise la circulation aussi bien dans la page, lesite que la Toile.

Riche en attribut, la balise <a> mérite qu'on la dissèque en détail.

menu

La balise <a>1.Lien interne2.Lien externe3.Autres types de lien4.Notions de styles5.

Balise <a>

Tous les liens se génèrent grâce à la balise <a> (pour ancre). Elle s'écrit de la manière suivante :

<a name="#" href="#" hreflang="#" title="#" rel="#">texte ou image</a>

L'attribut name est utilisé pour les liens internes.L'attribut href est utilisé pour les liens externes à la page (en chemin relatif ou absolu) oupour désigner certains protocoles (voir autres types de liens)..L'attribut hreflang est utilisé pour désigner une page cible dont la langue est différente de lapage d'origine, comme dans hreflang="en" (pour anglais).C'est intéressant à utiliser avec du CSS et a un intérêt en référencement (source, et exempleici). À noter que la déclaration CSS n'est pas compatible avec IE.L'attribut rel est une couche d'informations supplémentaires, notamment pour les moteurs derecherche.L'attribut target désigne si le lien s'ouvre dans la même fenêtre (si attribut absent ou="_self") ou dans une nouvelle fenêtre (si attribut ="_blank"). Nous verrons ce point avec lesliens externes.

retour au menu

Lien interne

Il exitse deux types de liens internes : à l'intérieur d'un même document (les ancres) et à l'intérieurd'un même site (ou domaine).

ancre : une ancre est une balise située à l'intérieur d'un document et qui sert à se déplacerdans ce même document, pour aller d'une partie à une autre. Elle est constituée de 2éléments :

<a name="depart"></a>

Les Liens dans une Page Web http://www.tiprof.fr/HTML-CSS-court/ressources/Miroir...

1 sur 4 26/09/11 14:14

<a href="#depart"></a>

Notez bien le "depart" (dans dièse ni accent) dans la balise <a name> et le "#depart" dans labalise <a href>. En cliquant sur le lien href, on va sur name. C'est le système utilisé dans cettepage pour aller du menu aux différentes parties, et des parties au menu.

chemin relatif : prenons maintenant le cas d'un lien <a href="...> qui pointe vers un autredocument, à l'intérieur d'un même site (ou plus exactement d'un même nom de domaine).

Soit un fichier a.html qui pointe vers un fichier b.html, tous les 2 dans le même dossier.dossier

a.htmlb.html

On aura alors : <a href="b.html">texte</a>.Si le fichier b.html se trouve dans un répertoire enfant (un sous-dossier du dossier danslequel se trouve a.html), on aura <a href="enfant/b.html">.

a.htmlenfant

b.htmlSi le fichier b.html se trouve dans un répertoire parent (dossier qui contient le dossierde a.html), on aura : <a href="../b.html">.

b.htmlparent

a.htmlSi l'on veut aller remonter plusieurs niveaux, on écrit : <a href="../../b.html">,chaque ../ représente un dossier.

b.htmldossierA

dossierBa.html

Si on veut aller d'un dossier à un autre dossier, on écrit : <a href="../dossierB/b.html">

dossierAa.html

dossierBb.html

retour au menu

Lien externe

Il existe deux types de liens externes : les liens vers une autre page dans le même domaine(chemin relatif) ; et les liens vers une page d'un autre domaine (chemin absolu). Exemple : <ahref="http://www.google.fr" title="Google">Google</a>.La balise <a> contient l'URL complète,et notamment le protocole (http://...).

Pour aller de la page A à une ancre de la page B, on écrit le lien ainsi : <a href="../../index.php#menuliste">, avec le nom du fichier suivi d'un # et du nom de l'ancre.

Il faut noter cependant que les liens externes peuvent se voir accompagner de l'attributtarget="_blank" hérité des jeux de cadres. Un lien disposant de cet attribut s'ouvrira dans unenouvelle fenêtre (IE) ou un nouvel onglet (tous les autres). L'effet a son intérêt même si le W3Cstipule en XHTML 1.0 Strict que l'attribut "_blank" est déprécié (mais cela reste faisable enjavascript) . La question fait débat de savoir si l'utilisateur doit rester maître de sa navigation (etdonc toujours savoir où il va), ou si le concepteur peut prendre la main sur les habitudes de surf.Entre les deux, on peut choisir de créer une class a.externe avec une couleur ou un effetparticulier.

retour au menu


2 sur 4 26/09/11 14:14

Autres types de liens

Toutes les balises avec dans l'attribut href="... utilisent la mention http://, qui est le protocoled'échange de fichiers hypertextuels. Il existe d'autres types de lien sur le Web, qui sont tousaccessible avec la balise <a>.

lien courrier : pour envoyer un mail, on écrit : <ahref="mailto:[email protected]">MAIL</a>.

Pensez à crypter votre adresse avec du PHP ou du Javasceript pour lutter contre le spam, ou écrivezvotre adresse de cette manière : <a href="mailto:adresse[at]serveur.tld">... en prévénant lesinternautes de faire eux-mêmes la correction avant d'envoyer le mail.

lien fichier ftp : vous pouvez mettre un lien vers un fichier installé sur le serveur FTP de votrehébergeur. Pour cela, écrivez : <a href="ftp://ftp.serveur.tdl/dossier/fichier.pdf">...lien fichiers d'autres genres : il exitse de nombreux autres protocoles, notamment avec le P2Phref="ed2k://...", "magnet://...".

Si vous apercevez un lien du type href="file:///C:/Windows/...", c'est qu'il pointe vers un fichierenregistré en local, sur votre disque dur : cela ne veut pas dire que ce fichier est accessible auxautres, mais que le lien que vous avez prévu à l'origine n'est pas dans le bon protocole.

lien avec script javascript : il est possible de créer des liens qui contiennent une instruction enJavascript, comme par exemple :

<a href="javascript:history.back()">page précédente</a>

<a href="javascript:history.forward()">page suivante</a>

<a href="javascript:history.go(-3)">3 pages en arrière</a>.lien de formulaire : un clic sur un bouton de formulaire est lien quand la méthode utilisée est<form method="post" action="[email protected]">.

retour au menu

Notions de style

Par défaut, les navigateurs affichent les liens de la manière suivante : lien, lien actif, lien visité.

Il est possible de modifier cet aspect avec une déclaration en CSS portant sur la balise a et sespseudo-éléments :hover, :active et :visited.

a, a:visited{color: #008f00, text-decoration: none; border-bottom: 1px dotted #f80;} -exemple : lien lien visitéa:hover {color: ##f80;} - exemple : lien survoléa:active {border: 1px solid #f80;} - exemple : lien actif

liens

Chez ultra-fluide.com/Ici et là sur Cybercodeur.netTutoriel d'Alsacréations

Rubrique : Création d'un site webServices : Contact- Plan du Site - AccessibilitéDernière mise à jour de ce document : 29/11/2005


3 sur 4 26/09/11 14:14

Présentation directement en HTML

Sommaire

introduction1.les balises spécifiques2.les tableaux3.la définition et l'application locale d'un style4.l'utilisation d'une feuille de style externe5.

Introduction

L'objectif de ce cours ets de parcours les moyens utilisables pour agir sur la présentation d'un documentWeb depuis le langage HTML.

Les balises spécifiques

Retour à la ligne

Le premier besoin est de créer un retour à la ligne.

Comme, les lignes blanches insérées dans le code source de la page n'ont qu'un effet de séparateur demot, il est nécessaire d'utiliser des balises pour que le navigateur prenne en compte de façon apparentele saut de ligne.

Il existe des balises qui définissent des paragraphes (on dit plutôt des blocs) :

<p>, le paragraphe simple,<pre>, le paragraphe de code,<li>, pour chaque élément d'une liste numérotée ou non (<ul> ou <ol>)<center>, pour une paragraphe centré (cette balise est "dépréciée", c'est-à-dire qu'on l'utilise de moins en moins et que lesnavigateurs se soucient de moins en moins de les respecter)...<div>, une division du document (voir plus loin)<blockquote>

et une balise qui permet de retourner à la ligne sans changer de paragraphe (<br />)

Il existe aussi des balises qui permettent d'agir sur la présentation d'une portion de texte au milieu d'unparagraphe, sans en changer :

<font>, permet de modifier la police de caractère, son épaisseur, ... par les valeurs d'attributs<tt>, permet décrire un bout de texte comme si c'était du code<span>, permet d'encadrer un bout de texte pour lui associer des comportments ou un style spécifique (voir plus loin)

les tableaux

Le principe : les tableaux HTML sont organisés comme des lignes de cellules

RésultatCode Remarque

entetea

enteteb

cellule1.a

cellule1.b

<table bgcolor="#ffddff" border="1"><tr><td>entete a</td><td>entete b</td></tr><tr><td>cellule 1.a</td><td>cellule 1.b</td></tr><tr><td>cellule 2.a</td><td>cellule 2.b</td></tr>

</table>

biencompterlescellulespour enavoir le

Présentation directement en HTML http://tiprof.fr/HTML-CSS-court/ressources/Css/pres_d...

1 sur 3 26/09/11 14:20

cellule2.a

cellule2.b

mêmenombresurchaqueligne

Attention : chaque ligne doit contenir le même nombre de cellules.Cependant, on peut faire couler le contenu d'une cellule sur 2 cases, soit verticalement, soithorizontalement. Il faut alors continuer de compter les cellules par lignes, mais en tenant compte descellules doubles.Pour des cellules qui coulent verticalement, il faut bien avoir compris le "truc"...


entete a

cellule1.a

cellule1.b

cellule2.b

<table bgcolor="#ffddff" border="1"><tr><td colspan="2">entete a</td></tr><tr><td rowspan="2">cellule 1.a</td><td>cellule 1.b</td></tr><tr><td>cellule 2.b</td></tr>

</table>

tenircompterdescellulesmultiplesdans lecomptagedescellulespourchaqueligne

Truc : Pour faciliter le comptage en cas de cellules multiples, il suffit de mettre en commentaire lescellules recouvertes par les cellules multiples

Pour une présentation plus complète, le plus souvent on utilise des tableaux (voir la présention de basede HTML)

la balise <style>

La balise <style> permet d'affecter un style particulier à une portion de texte.Elle s'utilise conjointement avec l'utilisation de l'attribut class dans toutes les autres balises.

Remarque : elle ne force pas de retour à la ligne, sauf si le style qu'elle définit est justement définicomme un style de bloc

La définition d'un style se fait pas association d'un ensemble de règles de présentation à un nom. Chaquerègle est composée d'un "sélecteur" comme par exemple font-family, et d'une valeur.Par exemple pour associer la police Arial 10px à tous les éléments de listes du document (c'est-à-direcontenus entre les balises <li> et </li>) la règle est:

li { font-family: Arial; font-size: 10px; }

Voici ci-dessous quelques exemples :


Voici unélémentde liste

<style>li { font-family: Arial; font-size: 12px; }</style><ul><li>Voici un élément de liste</li></ul>

Le styles'appliquepartoutdans toutledocumentà partirde sa


2 sur 3 26/09/11 14:20

définition

Les balises <div> et <span> permettent de nommer des styles ou des portions (éléments) uniques dudocument avec les attributs class="..." et id="...", ou même directement l'attribut style="...".

Les exemples suivants illustrent leur utilisation :


Voici untexte

Voici un <span style="font-family:arial; ">texte</span>

Le style nes'appliquequ'entre lesbaliseouvrantesetfermantesidentifiées

Voicila division"exemple"et un"span" quis'appelle"citation"

<style>#exemple { color: red; font-size: 12px; }.citation { color: green; font-size: 10px; }

</style>Voici <div id="exemple">la division et un <span class="citation">"span" qui s'appelle "citation"</span></div>

Pour lesclasses, onrepère lesélecteuravec un ".",pour lesidentifiants,on lerepère avecun #

Les feuilles de style

Habituellement, les pages HTML sont présentées selon les caractéristiques de la feuille de style pardéfaut du butineur utilisé.

Une feuille de style permet de (re)définir certaines caractéristiques de présentation de marquesprédéfinies, et ainsi de personnaliser tout un site, en respectant une charte de présentation propre ausite.

Les caractéristiques de présentation sont définies dans des règles comme expliqué plus haut, mais enplus, les règles peuvent petre regroupées dans des fichiers externes.

Ce sont ces fichiers qui sont appelés "feuilles de style"

Voir ../../ressources/Css/index.html


3 sur 3 26/09/11 14:20

CSS : les feuilles de style

Sommaire

#Appel d'une feuille de style1.#Conception d'une feuille de style2.#Modele de mise en page3.#Utilisation abusivedes feuilles de style4.#Combinaison de l'usage des feuilles de style et du langage Javascript5.

Introduction

Habituellement, les pages HTML sont présentées selon les caractéristiques de la feuille de stylepar défaut du butineur utilisé.

Une feuille de style permet de (re)définir certaines caractéristiques de présentation de marquesprédéfinies, et ainsi de personnaliser tout un site, en respectant une charte de présentation propreau site.

L'utilisateur peut aussi éventuellement indiquer une feuille de style qui s'appliquera à tous lesdocuments visualisés.

Appel d'une feuille de style

Le langage HTML permet de demander qu'un document soit présenté selon feuille destyle particulière. Pour cela, il faut ajouter dans la section <head> (l'entête) :

<head>... <link rel="StyleSheet" type="text/css" href="UrlDeLaFeuilleDeStyle">

Avec la directive @import , on peut aussi importer une ou plusieurs feuilles de style, enajoutant dans l'entête, ou au début d'une autre feuille de style :

<head>... <style type="text/css">@import url(http://Un.Serveur/.../UnFichierDeStyle)@import url(http://Un.Serveur/.../UnAutreFichierDeStyle)</style>

La balise STYLE, utilisée dans l'entête, permet de surcharger un style dans tout undocument :

<head>... <style type="text/css">H1 {color: blue }</style>

On peut aussi modifier localement (directement dans la section <body>) le style d'unparagraphe : une marque de paragraphe peut porter l'attribut style="NomDePropriété:Valeur".

HTML http://tiprof.fr/HTML-CSS-court/ressources/Css/CSS.html

1 sur 6 26/09/11 14:22

...<body>...<p style="color: aqua">Paragraphe bleu ciel

Il peut y avoir conflit entre les directives fournies par ces différentes approches. Larésolution de ces conflits est basée sur la pondération des directives:

La pondération des directives du lecteur/utilisateur sont plus faibles que celles del'auteur du document.La pondération de directives importées est inférieure à la pondération desdirectives du fichier courant (que ce soit le document HTML même ou une feuillede style).Une directive peut voir sa pondération augmentée par l'utilisation du mot-cléimportant. Par exemple:

h1 {color: black ! important; background: white ! important }

Une directive du lecteur marquée important a une pondération plus élevéequ'une directive normale de l'auteur.

Conception d'une feuille de style

Par exemple:

h1,h2 {font-weight:bold;font-family:helvetica;font-style:normal }

En cas d'imbrication de marques dans le texte HTML, les caractéristiques qui sont définiespour la marque englobante mais qui ne sont pas redéfinies dans la marque englobée sonthéritées dans la zône de la marque englobée. Par exemple, si l'on reprend la marque <h2>telle qu'elle est définie dans le paragraphe précédent et la marque <em> définie ainsi:

em {font-style: oblique; color: red }

l'imbrication de la marque <em> dans la marque <h2> fera que, dans l'exemple suivant:

<h2>Texte droit <em>texte italique</em></h2>

le texte en italique aura les mêmes attributs font-weight et font-family que le texte droit quile précède.

Etant donné ce mécanisme d'imbrication, si on veut appliquer une caractéristique de style àl'ensemble d'un document, on peut attacher cette caractéristique à la marque <body>. Parexemple:

body {color: blue; background: yellow }

permet de définir que le texte du document devrait apparaître en bleu sur fond gris. Il estbien entendu que certaines portions du document pourront avoir leur couleur redéfinie si unemarque imbriquée dans la section <body> ... </body> contient une redéfinition de couleurdu texte.

Certaines propriétés peuvent être définies en terme de pourcentage d'une autre propriété.Dans un tel cas, la spécification "officielle" indique à quelle autre propriété ce pourcentagefait référence. Par exemple, line-height peut être définie en % de font-size.La notion de classe permet de définir plusieurs groupes de propriétés (mutuellementexclusifs) pour la même marque. Par exemple, avec les définitions de style suivantes:

p.classique {color: black }p.ecolo {color: green }


2 sur 6 26/09/11 14:22

les deux paragraphes qui suivent n'auront pas la même apparence:

<p class="classique">Texte qui apparait en noir</p><p class="ecolo">Texte qui apparait en vert</p>

Dans la feuille de style, des marques différentes peuvent utiliser le même nom de classe. Parexemple:

h1.ecolo {color: #00CC00 }

ou

p.double {line-height: 200% }

On peut donc définir des caractéristiques communes à toute une classe, quelle que soit lamarque. Par exemple:

.ecolo {color: #00CC00; font-family: helvetica }

.double {line-height: 200% }

On peut définir un identificateur pour désigner un paragraphe précis (et unique) avec, dansla feuille de style:

#premier {font-weight: bold }

et dans le document:

<p ID="premier">...</p>

Certaines propriétés peuvent être définies pour un contexte donné. Par exemple, si l'on veutdéfinir une propriété de la marque <em> uniquement quand elle est imbriquée dans unen-tête de niveau 1, la feuille de style pourra contenir:

h1 em {color: fuchsia }

S'il y a ambiguïté, c'est la spécification la plus spécifique qui prend le dessus. Par exemple,avec:

ul li {font-size: 12pt }ul ul li {font-size: 10pt }

les éléments d'une liste imbriquée dans une autre liste auront une fonte de taille 10, mêmesi la première des deux règles pourrait s'appliquer, car la deuxième règle est plus spécifique(voir exemple).

Chaque item d'un contexte peut faire référence aussi bien à une marque qu'à une classe ouà un identificateur. Par exemple:

.ecolo #premier code { ... }

s'appliquera à une portion du document qui sera délimitée par la marque <code> ...</code> pour autant que celle-ci soit imbriquée dans une section portant l'identificateurpremier et que cette section soit elle-même imbriquée dans une section ayant la classeecolo.

Il existe des "pseudo-classes" prédéfinies portant sur la marque <a> pour faire référence àun lien non-visité (classe :link), un lien déjà visité (classe :visited) ou un lien actif, c'est-à-dire sur lequel l'utilisateur est en train de cliquer (classe :active). Ces pseudo-classespeuvent être combinées avec une classe normale:

p.ecolo:link {color: lime }p.ecolo:visited {color: olive }

Dans cet exemple qui précède, les liens non encore visités dans un paragraphe de classe"ecolo" auront la couleur fuchsia. Ces pseudo-classes peuvent aussi être combinées avec un


3 sur 6 26/09/11 14:22

contexte. Dans l'exemple qui suit, les images incluses dans un hyper-lien pas encore utiliséauront une bordure verte et celles incluses dans un hyper-lien déjà utilisé auront unebordure jaune:

a:link img { border: green; border-width:5 }a:visited img { border: yellow; border-width:5 }

Ceci est un paragraphe de classe "ecolo" avec un lien vers la page d'accueil du cours

les pseudo-éléments :first-line et :first-letter permettent de redéfinir des attributsparticuliers pour la première ligne et la première lettre d'un paragraphe. Par exemple, si lafeuille de stype contient:

p.Newsweek:first-line { font-variant: small-caps }

un document utilisant ce style avec un paragraphe défini ainsi:

<p class="Newsweek">Ceci est un texte dont la<br>première ligne sera toute en majuscules.</p>

l'apparence devrait être semblable à:

CECI EST UN TEXTE DONT LApremière ligne sera toute enmajuscules.

Si la feuille de style contient:

p.GrandeInitiale:first-letter { font-size: 200%; float: left }

et que le document utilisant cette feuille de style contient:

<p class="GrandeInitiale">To be or not to be,<br>that is the question.</p>

l'apparence devrait être semblable à:

___ | o be or not to be, | that is the question.

Notes:

s'il y a des guillemets au début du paragraphe, ils seront inclus avec la première lettre.:first-line et:first-letter sont cumulablesactuellement, quasiment aucun butineur ne supporte les pseudo-éléments :first-lineet :first-letter. Un moyen de remplacer :first-letter est d'utiliser la marque<span> de la façon suivante:

<p><span class="BigFirst">T</span>o be or not to be,<br>that is the question.

avec la classe BigFirst définie ainsi:


4 sur 6 26/09/11 14:22

.BigFirst {float: left; font-size: 200% }

Pour documenter une feuille de style, on peut insérer des séquences du genre:/* Ceci est un commentaire */

Modèle de mise en page

Le modèle de mise en page de CSS1 est basé sur la notion de boîte rectangulaire. Chaqueélément du texte est contenu dans une ou plusieurs boîtes. Chaque boîte a une zône danslaquelle le texte apparaît et cette zône est optionnellement emboîtée dans une zôned'espacement, laquelle peut être entourée d'une bordure, qui peut être, elle-même entouréed'une marge:

Les dimensions de la marge, de la bordure (s'il y en a une pour l'élément en question) et del'espacement sont données par les propriétés margin, border-width et padding quiprennent chacune jusqu'à quatre valeurs (séparées par des espaces) qui correspondent auhaut, côté droit, bas et côté gauche.

<p style="border-width: 5px 5px 5px 5px;border-style: solid">

permet d'avoir une bordure autour duparagraphe.

<p style="border-width: 5px 5px 5px 5px;border-style: solid;padding:4px 5px 2px 10px">

permet d'avoir une bordure à unecertaine distance autour duparagraphe.

<p style="border-width: 0 0 0 5px;border-style:solid;padding:0 0 0 2px">

devrait permettre d'avoir un trait sur lecôté gauche du paragraphe.

Les marges de deux élément adjascents de texte ne s'additionnent pas, mais c'est la plusgrande qui prime.

Utilisation abusive des feuilles de style

Etant donné que le support des feuilles de style n'est pas encore systématique dans tous lesbutineurs et qu'en plus l'utilisateur peut choisir de le désactiver lorsqu'il est disponible, ilfaut à tout prix éviter que la lecture d'un document dépende trop fortement de la feuille destyle associée. Les feuilles de styles sont là pour améliorer la présentation d'un document et


5 sur 6 26/09/11 14:22

non pas pour la contrôler. Pour un exemple concret, voir "Style Sheet Dependence", undocument du Web Design Group.

Note: il semble qu'avec Netscape (version 4 et précédentes), les feuilles de style nefonctionnent que si JavaScript est activé.

Outils pour les feuilles de style

Outils d'édition de feuilles de style (Win'95).Balthisar Cascade (ne permet pas d'éditer des feuilles de style existantes)StyleMaker (certaines propriétés manquent - p.ex. border-style; certaines propriétés ne sontpas faciles à éditer)CoffeeCup StyleSheetMaker++SheetStylist (une fenêtre "preview" permet de visualiser l'effet des règles de style définies)Style Master (une aide contextuelle est disponible pour la plupart des éléments del'interface, indiquant les différents choix possibles ainsi que les effets de chacun d'eux)

Sites de validation en-ligne de la syntaxe d'une feuille de style:

http://www.htmlhelp.com/tools/csscheck/http://jigsaw.w3.org/css-validator/

Résumé des propriétés utilisées dans des directives de styleTests de conformité CSS2

Voir aussi http://www.w3.org/Provider/Style/Overview.html

Cette page est très largement inspirée de http://cui.unige.ch/eao/www/TechInternet/CSS.html


6 sur 6 26/09/11 14:22

ISO Latin 1 character entitiesThis list is derived from "ISO 8879:1986//ENTITIES Added Latin 1//EN".

Æ

Á

Â

À

Å

Ã

Ä

Ç

Ð

É

Ê

È

Ë

Í

Î

Ì

Ï

Ñ

Ó

Ô

Ò

Ø

Õ

Ö

Þ

Ú

Û

Ù

Ü

Ý

á

capital AE diphthong (ligature)

capital A, acute accent

capital A, circumflex accent

capital A, grave accent

capital A, ring

capital A, tilde

capital A, dieresis or umlaut mark

capital C, cedilla

capital Eth, Icelandic

capital E, acute accent

capital E, circumflex accent

capital E, grave accent

capital E, dieresis or umlaut mark

capital I, acute accent

capital I, circumflex accent

capital I, grave accent

capital I, dieresis or umlaut mark

capital N, tilde

capital O, acute accent

capital O, circumflex accent

capital O, grave accent

capital O, slash

capital O, tilde

capital O, dieresis or umlaut mark

capital THORN, Icelandic

capital U, acute accent

capital U, circumflex accent

capital U, grave accent

capital U, dieresis or umlaut mark

capital Y, acute accent

small a, acute accent

Æ

Á

Â

À

Å

Ã

Ä

Ç

!

É

Ê

È

Ë

Í

Î

Ì

Ï

Ñ

Ó

Ô

Ò

Ø

Õ

Ö

"

Ú

Û

Ù

Ü

#

á

ISO Latin 1 Entities in HTML http://www.tiprof.fr/HTML-CSS-court/ressources/Annexe-...

1 sur 2 26/09/11 14:16

â

æ

à

å

ã

ä

ç

é

ê

è

ð

ë

í

î

ì

ï

ñ

ó

ô

ò

ø

õ

ö

ß

þ

ú

û

ù

ü

ý

ÿ

small a, circumflex accent

small ae diphthong (ligature)

small a, grave accent

small a, ring

small a, tilde

small a, dieresis or umlaut mark

small c, cedilla

small e, acute accent

small e, circumflex accent

small e, grave accent

small eth, Icelandic

small e, dieresis or umlaut mark

small i, acute accent

small i, circumflex accent

small i, grave accent

small i, dieresis or umlaut mark

small n, tilde

small o, acute accent

small o, circumflex accent

small o, grave accent

small o, slash

small o, tilde

small o, dieresis or umlaut mark

small sharp s, German (sz ligature)

small thorn, Icelandic

small u, acute accent

small u, circumflex accent

small u, grave accent

small u, dieresis or umlaut mark

small y, acute accent

small y, dieresis or umlaut mark

â

æ

à

å

ã

ä

ç

é

ê

è

$

ë

í

î

ì

ï

ñ

ó

ô

ò

ø

õ

ö

ß

%

ú

û

ù

ü

&

ÿ

ISO Latin 1 Entities in HTML http://www.tiprof.fr/HTML-CSS-court/ressources/Annexe-...

2 sur 2 26/09/11 14:16

Balises HTML

Fichiers présents dans le dossier /HTML-CSS-court/ressources/Annexe-HTML/Balises

LB-toutesbalises.php LB-index.php

Page incluse : LB-toutesbalises.php

balise versiondépréciédepuis

fermeture type ns ie fonction

!-- 2.0 obligatoire - 3 3 commentairea 2.0 obligatoire inline 3 3 ancreabbr 4.01 obligatoire inline 6 - abbréviationacronym 4.01 obligatoire inline 6 4 acronymeaddress 2.0 obligatoire inline 3 3 addresseapplet 3.2 4.01 interdite vide 3 3 applettearea 3.2 interdite vide 3 3 zoneb 2.0 obligatoire inline 3 3 grasbase 2.0 interdite vide 3 3 URI de base du documentbasefont 3.2 4.01 interdite vide 3 3 changement de fonte de basebdo 4.01 obligatoire inline 6 5 pas d'écriture bidirectionnellebig 3.2 obligatoire inline 3 3 grandblockquote 2.0 obligatoire block 3 3 bloc de citationbody 2.0 facultative block 3 3 corpsbr 2.0 interdite vide 3 3 saut de ligne forcébutton 4.01 obligatoire block 6 4 boutoncaption 3.2 obligatoire inline 3 3 légende de tablecenter 3.2 4.01 obligatoire block 3 3 centrercite 2.0 obligatoire inline 3 3 source de citationcode 2.0 obligatoire inline 3 3 code informatiquecol 4.01 interdite vide 6 3 colonnecolgroup 4.01 interdite 6 3 groupe de colonnesdd 2.0 interdite 3 3 description d'une définitiondel 4.01 obligatoire block 6 4 texte effacédfn 3.2 obligatoire inline 6 3 définitiondir 2.0 4.01 obligatoire block 3 3 contenu de répertoirediv 3.2 obligatoire block 3 3 élément de type blocdl 2.0 obligatoire 3 3 liste de définitiondt 2.0 interdite inline 3 3 définition d'un termeem 2.0 obligatoire inline 3 3 emphasefieldset 4.01 obligatoire - 6 4 Groupe de champsfont 3.2 4.01 obligatoire inline 3 3 changement local de policeform 2.0 obligatoire block 3 3 formulaireframe 4.01 interdite vide 3 3 sous-fenêtre (cadre)frameset 4.01 obligatoire 3 3 ensemble de sous-fenêtresh1 2.0 obligatoire inline 3 3 titre 1h2 2.0 obligatoire inline 3 3 titre 2h3 2.0 obligatoire inline 3 3 titre 3h4 2.0 obligatoire inline 3 3 titre 4h5 2.0 obligatoire inline 3 3 titre 5h6 2.0 obligatoire inline 3 3 titre 6head 2.0 obligatoire 3 3 têtehr 2.0 interdite vide 3 3 règle horizontalehtml 2.0 obligatoire block 3 3 htmli 2.0 obligatoire inline 3 3 italiquesiframe 4.01 obligatoire block 6 3 sous-fenêtre inlineimg 2.0 interdite vide 3 3 image

Balises HTML http://www.tiprof.fr/HTML-CSS-court/ressources/Anne...

1 sur 2 26/09/11 14:15

balise versiondépréciédepuis

fermeture type ns ie fonction

input 2.0 interdite vide 3 3 contr�le de formulaireins 4.01 obligatoire block 6 4 texte inséréisindex 2.0 4.01 interdite vide 3 3 champ de saisiekbd 2.0 obligatoire inline 3 clavierlabel 4.01 obligatoire inline 6 6 text d'étiquette de champlegend 4.01 obligatoire inline 6 4 légende de groupe de champsli 2.0 facultative 3 3 élément de listelink 2.0 interdite vide 4 3 lienlisting 2.0 2.0 obligatoire 3 3 listing d'ordinateurmap 3.2 obligatoire 3 3 cartemenu 2.0 4.01 obligatoire block 3 3 menumeta 2.0 interdite vide 3 3 metanoframes 4.01 obligatoire 3 3 pas de framesnoscript 4.01 obligatoire 3 3 pas de scriptobject 4.01 obligatoire inline|block 6 3 objetol 2.0 obligatoire 3 3 liste ordonnéeoptgroup 4.01 obligatoire 6 6 groupe d'optionsoption 2.0 facultative 3 3 optionp 2.0 facultative inline 3 3 paragrapheparam 3.2 interdite vide 3 3 paramètreplaintext 2.0 2.0 facultative 3 3 texte seulpre 2.0 obligatoire inline 3 3 texte préformatéq 4.01 obligatoire inline 6 4 citations 3.2 4.01 obligatoire inline 4 4 barrésamp 2.0 obligatoire inline 3 3 échantillonscript 3.2 obligatoire 3 3 scriptselect 2.0 obligatoire 3 3 liste déroulantesmall 3.2 obligatoire inline 3 3 petitspan 4.01 obligatoire inline 4 3 spanstrike 3.2 4.01 obligatoire inline 3 3 barréstrong 2.0 obligatoire inline 3 3 fortstyle 3.2 obligatoire 4 3 stylesub 3.2 obligatoire inline 3 3 indicessup 3.2 obligatoire inline 3 3 exposanttable 3.2 obligatoire block 3 3 tabletbody 4.01 facultative block 6 3 corps de tabletd 3.2 facultative block 3 3 cellule de données de tabletextarea 2.0 obligatoire - 3 3 Champ de saisie multilignetfoot 4.01 facultative block 6 3 pied de page de tableth 3.2 facultative block 3 3 cellule d'en-tête de tablethead 4.01 facultative block 6 3 en-tête de tabletitle 2.0 obligatoire 3 3 titretr 3.2 facultative 3 3 rang de tablett 2.0 obligatoire inline 3 3 teletypeu 2.0 4.01 obligatoire inline 3 3 soulignéul 2.0 obligatoire 3 3 liste non ordonnéevar 2.0 obligatoire inline 3 3 variablexmp 2.0 2.0 obligatoire 3 3 exemple

sortir remonter revenir

Balises HTML http://www.tiprof.fr/HTML-CSS-court/ressources/Anne...

2 sur 2 26/09/11 14:15

Page d'origine : http://perso.orange.fr/coin.des.experts/reponses/faq5_4a.html

Les entités du HTML

Introduction — Les 3 lettres réservées — Lettres avec accents ou cédillesLigatures — Ponctuation — Modificateurs

Symboles de calcul élémentaire — Mathématiques spécialiséesCaractères grecs — Caractères monétaires ou juridiques

Flèches — Lettres à caractère graphique — Autres

Introduction

Le menu ci-dessus est un classement de la liste des entités HTML proposées par le consortium W3C dans [1], qu'ontrouve aussi partiellement traduite en français dans [2].

Dans ces références, les caractères «spéciaux» sont donnés par leurs entités et par leurs numéros unicodes. Lesentités sont des mots mnémotechniques qui s'emploient entre un & initial et un point-virgule final. Par exemple, l'entitépour «é» est «eacute» (acute après un «e» pour dire que ce «e» est modifié par un accent aigu), et on code épour obtenir «é».

Les numéros unicodes sont les numéros de ces caractères dans les polices «unicode». Comme il s'agit d'unenumérotation sur 2 octets, ces numéros peuvent aller jusqu'à 65000 (en décimal). On peut les employer pour formerdes caractères en les plaçant entre un &# initial et un point virgule final, ou bien, sous forme hexadécimale, entre un&#x et un point-virgule. Par exemple, un «à» (de numéro 224, ou e0 en hexa) s'obtient par à ou à.

Les entités ne sont pas toujours reconnues par les différents navigateurs, ou bien elles ne sont pas toujourscorrectement rendues. Par exemple, IE5-mac restitue beaucoup de caractères diacritiques «exotiques» comme lescaron «!» en plaçant le modificateur à côté de la lettre, au lieu de le mettre par dessus). Par la suite, nous utilisé descouleurs pour signaler divers problèmes :— nous avons mis en rouge deux entités reconnues par Mozilla sur Linux, mais pas sur MacOS (ni par IE5 ou IE6,MacOS ou Windows).— nous avons mis en magenta sombre les entités reconnues par Mozilla, mais pas (ou mal) par IE5-mac.— nous avons mis en magenta intense les entités non reconnues par IE6 (Windows). A quelques exceptions près quiseront signalées le moment venu, les entités non reconnues par IE6 sont reconnues par IE5-mac.

Les trois lettres réservées du HTML

Rappelons que les 3 caractères <,> et & servent à former différents tags du HTML et ne peuvent pas apparaître en tantque telles à l'écran. Il faut les écrire avec leurs entités :

& pour &> pour >< pour <

Lettres accentuées et cédilles

Le tableau ci-dessous rassemble les lettres accentuées et leurs entités. Nous n'avons pas rappelé les numéros unicodeparce que la plupart de ces lettres (du moins, celles nécessaires au français) s'obtiennent directement à partir du clavierdans tout éditeur fonctionnant sous le charset 8859-1 ou 8859-15.

à è ì ò ù À È Ì Ò Ùagrave egrave igrave ograve ugrave Agrave Egrave Igrave Ograve Igrave

á é í ó ú " Á É Í Ó Úaacute eacute iacute oacute uacute yacute Aacute Eacute Iacute Oacute Uacute

â ê î ô û Â Ê Î Ô Ûacirc ecirc icirc ocirc ucirc Acirc Ecirc Icirc Ocirc Ucirc

ä ë ï ö ü ÿ Ä Ë Ï Ö Üauml euml iuml ouml uuml yuml Auml Euml Iuml Ouml Iuml

ã õ ñ Ÿ Ã Õ Ñatilde otilde ntilde Yuml Atilde Otilde Ntilde

Coin des Experts - Réponse : HTML et caractères spéciaux http://www.tiprof.fr/HTML-CSS-court/ressources/Anne...

1 sur 6 26/09/11 14:15

å ø ! ç Å Ø # Çaring oslash scaron ccedil Aring Oslash Scaron Ccedil

Caractères grecs

Le tableau ci-après rassemble les caractères grecs. Juste en dessous du caractère sur fond blanc, on lit l'entitécorrespondante, puis le numéro unicode décimal. Rappelons qu'on peut utiliser l'entité ou le numéro pour obtenir lecaractère. Par exemple un alpha peut être codé au moyen de son entité (α) ou de son numéro unicode(α).

$ % & ' ( ) * + , - . /Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa Lambda Mu913 914 915 916 917 918 919 920 921 922 923 924

0 1 2 3 4 5 6 7 8 9 : ;Nu Xi Omicron Pi Rho Sigma Tau Upsilon Phi Chi Psi Omega925 926 927 928 929 931 932 933 934 935 936 937

< = > ? @ A B C D E F µalpha beta gamma delta epsilon zeta eta theta iota kappa lambda mu945 946 947 948 949 950 951 952 953 954 955 956

G H I J K L M N O P Q Rnu xi omicron pi rho sigma tau upsilon phi chi psi omega957 958 959 960 961 963 964 965 966 967 968 969

Il y a en plus une lettre S (entité sigmaf ou code ς) pour les sigma en fin de mots, qui n'existe pas en majuscules.

Caractères monétaires ou juridiques

Le tableau ci-dessous donne le rendu de divers symboles, monétaires ou à caractère légal, avec les entités et numérosunicodes correspondants et quelques commentaires.

Bien entendu, le dollar se trouve toujours directement sur le clavier (:-))

Caractère EntitéHTML

Numérounicode Description

T euro 8364 euro£ pound 163 livre sterling¥ yen 165 yenƒ fnof 402 florin¢ cent 162 cent US¤ curren 164 symbole général de monnaie (euh ???)© copy 169 copyright® reg 174 enregistré (droits réservés)™ trade 8482 Signe «marque déposée»

Modificateurs de caractères

Ces symboles correspondent à quelques uns des divers «accents» qu'on peut superposer aux lettres. Dans deslangages typographiques comme TeX ou LaTeX, ces modificateurs peuvent s'appliquer à n'importe quelle lettre, c.à.d.qu'ils s'impriment par dessus le caractère modifié. Il semble qu'on ait prévu un mécanisme du même genre pour lespolices unicode, le modificateur venant après le caractère modifié (c.à.d. un code comme e´ devant donner uné), mais ça ne fonctionne manifestement pas en cette mi-2003.

On notera que cette liste n'est pas cohérente avec les caractères disponibles. Par exemple, on n'y trouve ni accentgrave, ni le petit rond de å. Inversement, il n'y a aucun code qui donne des lettres avec un «macron». Toutefois, tousces caractères «manquants» sont accessibles par leurs numéros unicode dans la plage 300—36f (en hexa).



¨ uml 168 tréma´ acute 180 accent aigu


2 sur 6 26/09/11 14:15

ˆ circ 710 accent circonflexe˜ tilde 732 petit tildaU macr 175 macron (en général, indique une voyelle allongée ou accentuée)¸ cedil 184 cédilleV oline 8254 surligné

Symboles de calcul élémentaires



° deg 176 degréW sup1 185 puissance unX sup2 178 carréY sup3 179 cubeZ frac14 188 fraction un-quart[ frac12 189 fraction un-demi\ frac34 190 fraction trois-quarts] times 215 multiplié par· middot 183 point de produit (à mi-hauteur)

! sdot 8901 point de produit(en principe légèrement plus gros que ·)

÷ divide 247 divisé par⁄ frasl 8260 barre de fraction (plus petit que le slash / du clavier)

^ minus 8722 moins (quelle différence avec le signe - du clavier ???)

± plusmn 177 plus-ou-moins

∼ sim 8764 varie comme, environ(différent du tilda ~ ~)

" cong 8773 approximativement égal à_ asymp 8776 presque égal à# prop 8733 proportionnel à` ne 8800 différent dea equiv 8801 identique àb le 8804 inférieur ou égal àc ge 8805 supérieur ou égal à< lt 60 plus petit que> gt 62 plus grand que‰ permil 8240 pour mille (le % est au clavier!)⊥ perp 8869 orthogonald micro 181 microne prime 8242 minutes d'angle, piedsf Prime 8243 secondes d'angle, pouces

Symboles mathématiques spécialisés



$ forall 8704 quantificateur pour tout

% exist 8707 quantificateur il existe

& empty 8709 ensemble vide, nul, diamètre' isin 8712 'élément de'( notin 8713 non élément de� ni 8715 contient comme membreg cap 8745 intersection


3 sur 6 26/09/11 14:15

∪ cup 8746 union) sub 8834 sous-ensemble de

* sup 8835 sur-ensemble de(notez : 'nsup', «non sur-ensemble de», n'existe pas)

+ nsub 8836 non sous-ensemble de, sube 8838 sous-ensemble ou identité- supe 8839 sur-ensemble ou identitéh part 8706 différentielle partielle. nabla 8711 nabla

i prod 8719 n-produit, symbole «produit»différent du Pi majuscule, bien que le même glyphe puisse être utilisé

j sum 8721 n-sommedifférent du Sigma majuscule, bien que le même glyphe puisse être utilisé

! lowast 8727 opérateur asterisquek radic 8730 racine carrée, signe «radical»l infin 8734 infini∠ ang 8736 angle/ and 8743 ET logique0 or 8744 OU logiquem int 8747 intégrale∴ there4 8756 implique⊕ oplus 8853 plus encerclé, somme directe1 otimes 8855 produit encerclé, produit vectoriel

" weierp 8472 ensemble de Weierstrass2 image 8465 partie imaginaire3 real 8476 partie réelle

4 alefsym 8501alef, cardinal infini.

Ce n'est PAS la lettre hébraïque alef, (u+05D0) bien que le même glyphe puisse êtreutilisé pour les deux caractères

# lang 9001 bra (plus grand que les signes < ou ‹(< ou &lsaquo;))

$ rang 9002 ket (plus grand que les signes > ou ›(> ou &rsaquo))

Flèches

Le tableau ci-après montre les flèches qu'on peut obtenir avec les entités. On peut en obtenir quelques autres aumoyen des numéros unicodes, mais, même en unicode, les flèches en diagonale montante sont difficiles à trouver (:-))



n larr 8592 vers la gaucheo uarr 8593 vers le hautp rarr 8594 vers la droiteq darr 8595 vers le basr harr 8596 vers la gauche et la droite (bijection)5 crarr 8629 vers le bas, puis la gauche (retour chariot)6 lArr 8656 double flèche gauche (impliqué par)7 uArr 8657 double flèche montante8 rArr 8658 double flèche droite (implique)9 dArr 8659 double flèche descendante: hArr 8660 double flèche gauche-droite (équivalence)

Formes à caractère graphique


4 sur 6 26/09/11 14:15

Le tableau ci-après montre les formes qu'on peut obtenir avec des entités. On peut en obtenir bien d'autres... si lenavigateur le veut bien, au moyen des numéros unicode, par exemple toute une rangée de caractères «Dingbat»(Mozilla veut bien, mais ni IE5-mac, ni IE6...)



¶ para 182 paragraphe† dagger 8224 dague‡ Dagger 8225 double dague§ sect 167 section& amp 38 esperluète• bull 8226 petit cercle noirs loz 9674 losanget spades 9824 piqueu clubs 9827 trèfle noirv hearts 9829 cœurw diams 9830 carreau� lceil 8968 euh...� rceil 8969 euh...� lfloor 8970 euh...� rfloor 8971 euh...

# lang 9001 grande parenthèse anguleuse ouvrante

$ rang 9002 grande parenthèse anguleuse fermanteLes entités lceil, rceil, lfloor et rfloor ne sont reconnues ni par IE5-mac, ni par IE6-windows

Ligatures

Le tableau ci-après montre les quelques ligatures qu'on peut obtenir avec les entités. On peut en obtenir quelquesautres au moyen des numéros unicodes (enfin, mieux sous MacOS que sous Windows...)



Æ AElig 198 ligature A-Eæ aelig 230 ligature a-eŒ OElig 338 ligature O-Eœ oelig 339 ligature o-eß szlig 223 ligature sz (allemand)

Ponctuation



« laquo 171 guillemet français ouvrant» raquo 187 guillemet français fermant“ ldquo 8220 guillemet anglais ouvrant” rdquo 8221 guillemet anglais fermant„ bdquo 82222 guillemet anglais bas (pour citation)‹ lsaquo 8249 petite parenthèse angulaire ouvrante

› rsaquo 8250petite parenthèse angulaire fermante

(noter que &rsaquo; et &rsaquo; ne font pas encore officiellement partie du standardISO)

" quot 34 double quote‘ lsquo 8216 apostrophe ouvrante’ rsquo 8217 apostrophe fermante‚ sbquo 8218 apostrophe basse


5 sur 6 26/09/11 14:15

- Signe - du clavier, ajouté pour que l'on puisse comparer avec les deux tiretsci-dessous

– ndash 8211 tiret intermédiaire (portée de nombres)— mdash 8212 tiret long (dialogue)… hellip 8230 trois points

Les derniers élémentsde ce tableau sont apparemment tous des espaces, mais à part le premier ( ) bien connu, aucun ne fonctionnecorrectement : selon le navigateur, soit ils sont rendus comme , soit ils sont rendus avec une largeur nulle, comme s'ils n'existaient pas (à titred'essai, dans les lignes ci-dessous, nous avons placé ces entités entre la légende et un point-virgule); ou encore ils ne sont pas reconnus du tout (IE6,lignes en magenta vif).

nbsp 160 espace insécable ; ensp 8194 espace ; emsp 8195 espace ; thinsp 8201 espace ;

zwnj 8204 zero width non-joiner;lrm 8206 left-to-right mark (???)rlm 8207 right-to-left mark (???)

Divers



¡ iexcl 161 signe d'exclamation inversé¿ iquest 191 signe d'interrogation inverséx brvbar 166 barre brisée (verticale)§ sect 167 section† dagger 8224 dague‡ Dagger 8225 double dagueª ordf 170 indicateur de genre fémininº ordm 186 indicateur de genre masculin¬ not 172 non

shy 173hyphenation

Ce caractère à l'intérieur d'un mot est une proposition de césure pour le logiciel demise en page. Il n'est rendu par un tiret de césure que si le mot est coupé (à notre

connaissance, aucun navigateur ne sait pratiquer de telles coupures).

y ETH 208 Eth, islandaisz THORN 222 THORN, islandais{ eth 240 eth, islandais| thorn 254 thorn, islandais

Charles — Gérald

Page précédente — Accueil des réponses


6 sur 6 26/09/11 14:15

LE LANGAGE HTML ET CELUI CSS - tiprof · 2013-09-23 · Cours sur le langage HTML L'objectif de ce...

Documents

Transcript of LE LANGAGE HTML ET CELUI CSS - tiprof · 2013-09-23 · Cours sur le langage HTML L'objectif de ce...