Traduction
Débuter en programmation web - sommaire
Débuter en programmation web - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous rêvez de créer votre propre site. C'est possible à condition de consacrer, disons une vingtaine d'heures pour apprendre les bases de deux langages indispensables pour réaliser un site : HTML et CSS.
HTML (HyperText Markup Language) date de 1991 quant à CSS (Cascading Style Sheets) il date de 1996. Les navigateurs implémentent progressivement la version 5 de HTML et la version 3 de CSS.
Pour réaliser votre site Web sur votre PC vous avez besoin de deux logiciels : un éditeur de textes et un navigateur ; le premier pour produire les pages de votre site et le second pour interpréter le code de la page.
Pour publier votre site Web c'est à dire pouvoir transférer tous les fichiers constitutifs de votre site de votre PC vers un hébergeur (afin que votre site devienne publique) vous avez besoin d'un logiciel de transfert tel Filezilla. Mais nous n'en sommes par encore là.
Revenons aux deux premiers logiciels cités. Vous avez certainement entendu parler de Internet Explorer, Firefox, Chrome, safari.
Ce sont les principaux navigateurs. L'un de ces quatre est forcément installé sur votre ordinateur sinon vous ne pourriez pas "surfer" sur Internet …
Concernant l'éditeur de texte tout PC dispose de bloc-notes (bien caché avec windows 8). C'est un éditeur de textes certes mais
aux fonctionnalités très limitées. Je vous conseille donc d'installer NotePad++. Ce logiciel propose de nombreuses fonctionnalités en
particulier la coloration syntaxique qui permet de repérer rapidement les erreurs de syntaxe et c'est un logiciel gratuit également.
Attention pour télécharger un logiciel n'allez jamais sur des sites comme 01.net ou clubic.com vous risquez de récupérer "des cochonneries" sur votre ordinateur. Téléchargez toujours à partir du site officiel de l'éditeur du logiciel.
Donc l'apprentissage de HTML & CSS ne vous coutera pas un centime.
Mais au fait pourquoi deux langages pour le Web et non pas un seul ? N'est ce pas faire compliqué ? Et bien pas du tout. Du temps ou le CSS n'était pas encore connu, les développeurs Web n'utilisaient que le HTML. Le code de leur page était très compliqué, très lourd bref un calvaire pour la maintenance logicielle. Désormais le code d'une page Web doit en principe simple et léger. Car les deux langages se complètent merveilleusement : HTML gère la structure et le contenu de la page tandis que CSS s'occupe de la mise en forme de cette page.
Pour prendre quelques exemples le texte de la page est balisé. Une balise HTLM indique si une portion de textes est un titre et précise alors son niveau hiérarchique (balises H1 à H6) ou un lien hypertexte (balise A) ou un paragraphe (balise P) ou encore un item de liste (balise LI), etc.
En l'absence de CSS il y a toujours une mise en forme par défaut de l'élément HTML.
Ainsi, à titre d'exmple, le texte des éléments titres (h1 à h6) sera en gras et avec une taille décroissante par rapport au niveau.
Mais si vous voulez personnaliser la mise en forme il vous faut rajouter des règles de style écrites avec le langage CSS.
Je prends un seul exemple. Par défaut le texte encadré par la balise STRONG apparait en gras. Mais vous pouvez changer cette mise en forme par défaut.
Il vous suffira de créer la règle de style suivante pour que le texte contenu dans l'élement STRONG soit non gras, en rouge et souligné :
strong {font-weight : none ; color : red ; text-decoration : underline ; } . Et oui il faut "speaker" anglais (lol).
Voici le code de notre première page web !
Cette page web a été produite avec l'éditeur de textes notepad++. N'importe quel navigateur va interpréter ce code et l'afficher dans une fenêtre (onglet).
Une page web est un fichier qui a pour extension htm ou html !
Attention sous notepad++ si vous ne précisez pas l'extension, lors de l'enregistrement de la page, le logiciel va ajouter automatiquement
l'extension .txt.
Si vous demandez à votre navigateur d'ouvrir un fichier txt il va se contenter d'afficher le code mais ne va
pas l'interpréter ...
Le rendu de cette page dans un iframe :
Essayons de comprendre ce code !
Notez que tout le code est saisi en minuscules. Mais j'aurais pu saisir en majuscules. On dit que HTML est insensible à la casse.
La toute première ligne s'appelle le doctype. Cette instruction est indispensable et indique au navigateur que le fichier en question
est un document HTML.
Il saura donc comment interpréter le code en fonction de cette mention.
Puis nous avons la balise <html>. Notez que le code se termine par </html>.
En effet les balises fonctionnent en général par paire avec une balise début et une balise fin.
On parle de conteneur
pour désigner l'ensemble balise début + balise fin.
Dans la suite de mon exposé et par convention, je désignerais toujours un conteneur (donc l'ensemble balises ouvrante et fermante) par son nom en majuscules débarrassé des chevrons. Prenons un exemple quand vous lirez dans le texte "conteneur HEAD" je désigne par ce terme la paire de balises <head> et </head>
Une balise ouvrante c'est un mot encadré par des chevrons. Exemple : <body>
La balise fin (ou fermante) est identique à la balise début (ou ouvrante) sauf la barre oblique après la parenthèse
angulaire ouvrante). Exemple : </body>
Vous verrez plus loin que la balise début contient éventuellement des attributs.
Vous verrez aussi qu'il existe des balises isolées (pas de balise fermante) mais qu'elles sont peu nombreuses.
L'en-tête de la page Web donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères
spéciaux) mais aussi des indications pour les moteurs de recherche afin que la page soit bien référencée ; je reviendrai là-dessus plus tard.
Il contient aussi la feuille de style interne et/ou des liens vers des feuilles de style externes.
Observons la partie HEAD (donc entre <head> et </head>)de cette première page.
Nous avons ici uniquement le conteneur TITLE qui contient un texte.
Vous retrouvez ce texte affiché dans la barre de titre de l'onglet ouvert dans le navigateur pour cette page.
Le corps de la page (à l'intérieur de BODY) contient tout le texte de la page. Ce texte est délimité par des balises qui précisent la nature du texte.
Étudions maintenant la partie BODY de notre première page web.
Nous avons une instruction HTML au sein de BODY :
<p class ="titre" > J'ai créé ma première page web et je suis très excité !</p>
"class" est un attribut de balise et "titre" est la valeur de cet attribut.
Il peut y avoir plusieurs couples "attribut:valeur" mais toujours dans la balise début.
Les attributs les plus courants sont : id, class, src, alt, ...
Dans cette page j'utilise un peu plus loin des attributs désormais obsolètes : bgcolor & text
Ici l'expression class ="titre" n'aura aucune incidence sur la mise en forme de la page
car pour l'instant car la classe nommée "titre" n'existe pas encore.
Le texte est affiché avec la police TNR(Times New Roman) car c'est la police par défaut.
TNR fait partie de la famille des polices avec serifs (ou empattements) Alors que Arial fait partie de la famille des polices
sans serif (sans empattements).
Le rendu dans un Iframe du fichier "page1.txt" :
La page contient du code HTML (le même que la première page) et pourtant il n'est pas interprété par le navigateur mais
simplement affiché.
Pourquoi ? Car l'extension est .txt !
Une page web a obligatoirement pour extension .htm OU .html
Nous allons donc supposer dans ce chapitre que CSS n'existe pas (situation avec 1996).
Il y a beaucoup de choses à dire sur cette page.
Vous constatez que la page occupe tout l'écran et que le texte est aligné à gauche de l'écran.
Vous constatez également que les titres apparaissent en gras qu'il y a des traits horizontaux, des textes en gras, soulignés, barrés ou en italique, des listes à puces et numérotées, un tableau de données, des images insérées dans la page, des liens hypertexte (légende du lien en bleu souligné).
Concernant le code la partie HEAD rien de nouveau par rapport à la page précédente sinon que l'on demande d'afficher dans la barre de titre de l'onglet le nom du fichier : "page2.htm"
Par contre dans la partie BODY nous avons beaucoup de textes délimités avec de nombreuses balises.
Nous avons d'abord les balises de type titres qui fonctionnent par paire et qui sont au nombre de 6 : h1, h2 … h6
Le texte contenu dans une balise de type "titre" apparait en gras et avec une grande taille mais avec une taille décroissante en fonction de l'indice
de H. Ainsi la taille d'un titre balisé par H6 sera beaucoup plus petite que la taille d'un texte balisé par H1.
Le corps de texte correspondant à chaque titre est délimité par le conteneur P (P comme Paragraphe).
Ensuite nous avons un trait horizontal grâce à la balise orpheline HR.
La plupart des balises fonctionnent par paire (une balise début et une balise fin). On parle de balises doubles ou conteneurs.
Pour certaines il y a une tolérence. Pour les conteneurs P et LI la balise fermante est facultative (mais conseillée).
Une balise double peut contenir d'autres balises. Ainsi la balise OL (ou UL) peut contient des LI.
Il existe aussi quelques balises isolées (ou orphelines) : HR,BR,IMG,etc qui ne peuvent inclure d'autres balises.
Dans l'exemple on utilise ensuite différents balises doubles: B, S, U, I, DEL, EM, STRONG, SUB, SUP, Q
Vous pouvez remarquer qu'avec ces dernières balises il n'y a pas de saut de ligne alors qu'il y en avait avec les balises de titres (H1à H6), les balises DIV et P.
Il y a en effet deux types de balises : les balises block et les balises inline. Les premières provoquent des sauts de ligne et
les secondes ne provoquent pas de saut de ligne.
Donc les éléments "inline" se positionnent côte à côte tandis que les éléments "block" se positionnent les uns en dessous des autres.
Donc pour provoquer un saut de ligne entre deux balises "inline" vous êtes obligé d'insérer la balise BR !
Les balises de type "block" peuvent contenir d'autres boites et des balises "inline". Par contre une balise "inline" ne peut contenir de balises "block".
Mais revenons à certaines balises :
Avec B et STRONG, le texte est en gras mais la balise STRONG a aussi un rôle sémantique ; elle précise que le texte est très important.
Avec I et EM le texte est en italique mais la balise EM a aussi un rôle sémantique ; elle précise que le texte est important.
Donc un texte encadré par STRONG sera exploité par les moteurs de recherche dans le cadre du référencement du site et ne le sera pas
si le texte est encadré par B.
Nous avons ensuite des listes. Pour créer une liste à puces il faut utiliser le conteneur UL et à l'intérieur de ce conteneur
le conteneur LI pour chaque item de la liste.
Pour créer une liste numérotée il faut utiliser le conteneur OL et à l'intérieur de ce conteneur le conteneur LI pour
chaque item de la liste.
Nous avons ensuite un tableau de données (4 lignes et 3 colonnes). Le tableau est délimité par le conteneur TABLE.
Chaque ligne du tableau est délimitée par le conteneur TR (Table Row).
Chaque cellule est délimitée par le conteneur TH (Table Head) ou TD (Table Data).
Remarquez que le texte délimité par le conteneur TH est affiché en gras et est centré horizontalement dans la cellule.
Donc il faut utiliser l'élément TH pour les en-têtes (de colonne voire de ligne).
Nous avons ensuite deux images qui ont été insérées dans la page. Il s'agit deux images "gif". Pour insérer dans une page une image
il faut utiliser la balise orpheline IMG. Cette balise comporte un attribut obligatoire src avec pour valeur le chemin de l'image
(chemin de l'image par rapport à la page web : "chemin relatif").
Le chemin relatif est une notion un peu délicate. Aussi je préfère en parler plus tard.
La valeur d'un attribut doit être entre guillemets simples ou doubles (ne jamais mélanger les deux types de guillemets).
Donc la syntaxe minimale pour la balise IMG est :<img src ="chemin_relatif_image" >
Il y a aussi un attribut facultatif mais fortement conseillé : alt. Si l'image n'est pas affichée (car la valeur de l'attribut src est fausse ou l'image est absente) c'est le texte associé à alt qui s'affiche !
Si l'élément IMG ne comprend pas l'attribut widthl'image s'affiche avec sa taille réelle (qui peut être importante).
Dans l'exemple width vaut "200" c'est à dire 200 pixels. Le navigateur calcule la hauteur d'affichage dans le respect des proportions.
Supposons que les dimensions natives de l'image soient 400 par 200 donc un rapport de 2 entre largeur et hauteur. La hauteur d'affichage sera 200 /2 = 100.
Si vous souhaitez afficher une image déformée, utilisez les attributs width & height avec des valeurs ne respectant pas
les proportions.
Remarquez que les deux images sont côte à côte. En effet la balise IMG est une balise "inline" : les éléments "inline" se positionnent côté à côte sur la ligne..
Nous avons ensuite deux liens hypertextes.
Quand vous cliquez sur le premier lien vous arrivez sur un mon site contenant mes tutoriels
Quant vous cliquez sur le deuxième lien vous revenez en haut de la même page : vers la balise identifiée "haut".
Il s'agit donc d'un lien vers une "ancre" (endroit précis dans une page web). Pour créer une "ancre" il faut utiliser l'attribut ID.
Dans les deux cas nous avons utilisé la balise A avec un attribut obligatoire : href.
Il existe aussi un attribut facultatif target. Si cet attribut a la valeur "_blank" : la cible du lien est affichée
dans un nouvel onglet.
Notez que les liens hypertextes sont affichés en bleu souligné par défaut et qu'ils sont côte à côte. En effet A est aussi une balise "inline".
J'ai structuré la page avec des conteneurs DIV et pourtant rien n'apparait ...
C'est normal il n'y a aucune mise en forme par défaut associée à cette balise.
DIV sert a un rôle sémantique : créer des grandes divisions de la page. Pour identifier sans ambiguité une boite DIV il faut lui attribuer une ID unique ! C'est ce que je fais ici : titres, texte, tableaux, listes, etc.
Pour mettre en forme une boite DIV il faut utiliser le CSS.
Notez que chaque balise fermante du conteneur DIV est suivie d'un commentaire HTML.
Dans une page web il est conseillé d'écrire les balises en minuscules.
Il est préférable également de bien fermer toutes les balises doubles.
Attention ce code est obsolète mais vous risquez encore de le rencontrer dans certains sites.
Dans cette page j'ai essayé d'améliorer la mise en forme de la page mais sans utiliser le CSS puisque que nous sommes avant 1996?
J'ai donc utilisé des balises de formatage de HTML et en particulier l'élément CENTER. J'ai utilisé aussi des attributs de mise en
forme tels bgcolor, border,text, etc.
Vous constatez que désormais les titres de niveau 1 et 2, le tableau et les images sont centrées horizontalement dans la page car
à chaque fois les conteneurs H1 ou H2 ou TABLE ou IMG sont inclus dans la balise double CENTER.
<body bgcolor = 'yellow' text = 'purple'> : ici j'utilise deux attributs de mise en forme bgcolor et text. Donc la page aura
une couleur de fond jaune et le texte en violet.
Au fait je rappelle que les attributs de balise sont toujours dans la balise ouvrante (et jamais dans la balise fin).
<table width = '500' border = '2'> : le tableau aura une largeur de 500 (pixels) et sera borduré avec un trait de 2 pixels d'épaisseur.
<h1 id = 'debut'> :
emploi de l'attribut id (id comme identifiant) pour identifier de façon unique
cet élément de la page.
Identifier une balise de la page permet entre autres de créer un lien vers cette balise (créer une "ancre").
<a href = '#debut'>retour haut de page</a> :
lien hypertexte vers la balise identifiée debut donc vers la balise H1.
Donc la balise A ne sert pas uniquement à créer des liens vers d'autres sites mais aussi à construire des liens vers d'autres pages
du même site ou comme ci-dessous vers un endroit précis dans la même page.
Pour personnaliser les listes j'utilise l'attribut type.
<ul type ='square'>: dans la liste à puces ces dernières seront des petits carrés (et non pas de petits cercles pleins)
<ol type = 'a'> : dans la liste ordonnées les items seront numérotées par des lettres minuscules (et non pas des chiffres)
<img src ="../images/plongeur2.gif" alt ="plongeur" height = '200'> :
L'attribut alt facilite le référencement du site et le débugage du code. La valeur de l'attribut alt va en effet s'afficher si l'image n'est
pas trouvée (chemin relatif incorrect). Les moteurs d'indexation des sites utilisent beaucoup le contenu de l'attribut alt.
L'image va s'afficher non pas avec sa taille d'origine (58 par 116) mais avec une hauteur de 200 pixels.
Le navigateur va automatiquement calculer une largeur d'affichage qui respecte les proportions pour que l'image ne soit pas déformée.
Puisque dans l'image d'origine le rapport est 1/2 l'image va s'afficher sur une largeur de 100 pixels (la moitié de 200).
Attention les sauts de ligne dans votre code source ne sont jamais pris en compte par le navigateur qui affichera un saut de ligne uniquement s'il lit une balise BR ou s'il détecte une balise de type block (balise qui provoque un saut de ligne avant et après).
Maintenant je vais vous demander d'oublier ce code et en particulier les conteneurs CENTER, BIG, STRIKE ainsi que les attributs de
mise en forme tels bgcolor, text, border, type, etc. d'ailleurs toutes ces balises et attributs sont considérés comme obsolètes par le W3C.
Utiliser HTML pour mettre en forme une page Web aboutit à un code lourd (donc difficile à maintenir). Cette page a été codée comme
on le faisait encore il y a une bonne dizaine d'années. Pour mettre en forme une page il faut utiliser CSS ; c'est plus simple et tellement
plus performant.
Je vais illustrer mon propos au travers d'une page dont le code CSS sera sans cesse amélioré !
La grande nouveauté est l'apparition dans la partie HEAD de la page du conteneur STYLE qui contient le code CSS.
Nous pourrons donc dire que désormais dans une page web nous avons du code CSS (pour mettre en forme le texte) et
du code HTLM pour structurer le texte (hiérarchie du texte et sémantique).
Entre <style> et <style/> se trouve la feuille de style qui comprend des règles de style écrites en CSS.
Ici nous avons 6 règles de style.
Le sélecteur indique les parties du document concernées par la règle.
Le sélecteur est plus ou moins complexe : une balise HTML ou plusieurs séparées par des virgules.
Entre accolades une ou plusieurs déclarations.
Pour chaque déclaration : une propriété CSS puis ":" puis la valeur correspondante puis ";"
Avant d'examiner en détail les différentes règles de style il faut introduire la notion de hiérarchie des balises.
La structure de notre page est la suivante :
Tous les éléments sont contenus dans BODY.
Ils sont tous "descendants" de BODY. On peut dire aussi que BODY est le parent des autres éléments de la page.
H1,H2,H3, P, TABLE, IMG,A sont "descendants directs" de BODY ou "enfants" de BODY.
Tandis que les TR sont contenus dans TABLE et sont "enfants" de TABLE et "petits enfants" de BODY.
Cette notion de hiérarchie des éléments HTML est fondamentale car dans le cadre du CSS les "descendants" héritent en général du style défini au niveau
du "parent" sauf si la propriété n'est pas héritable.
* {font-family :arial ; color: navy ; } :
* est le sélecteur universel (il correspond à toutes les balises). Donc grâce à cette règle de style on remet en cause
la mise en forme par défaut d'une page Web qui est police : TNR (Times New Roman), couleur de texte : noir.
Ici nous demandons l'emploi de la police Arial et
comme couleur de texte nous demandons "navy" (bleu marine).
body {width : 600px ; } : jusqu'à présent la page s'affichait sur toute la largeur de l'écran.
Ici nous demandons que la page s'affiche sur une largeur de 600 pixels seulement.
N'insérez jamais d'espace entre le nombre et px
h1,h2,h3{width : 80%; text-align :center;}: dans un sélecteur la virgule se lit "et" .
Donc il faut lire "les balises h1 et h2 et h3".
Les boites H1 à H3 auront pour largeur 80% de celle de leur parent (c'est à dire BODY). On dit que la dimension est exprimée de
façon relative.
Donc les boites "titres" auront une largeur de 480px (600px * 80%) tant que BODY aura une largeur de 600px. Mais si la largeur de BODY passe
à 900px ...
table {width : 80% ; }: les tableaux de la page auront une largeur de 480 pixels tant que BODY aura une largeur de 600px.
body, h1,h2, h3, table, th {border-width : 1px; border-style : solid ; border-color : red; } : toutes les boites énumérées
dans le sélecteur seront bordurées d'un trait de 1 pixel, de style continu et de couleur rouge.
La propriété CSS "border" est l'une des rares propriétés non héritables ; donc on est obligé d'énumérer dans le sélecteur
toutes les balises qui doivent être bordurée.
img {width :60%; } : les images de la page n'auront pas leur largeur d'origine mais une largeur de 60% du conteneur parent (donc de BODY).
Il s'agit donc encore d'une largeur exprimée de façon relative.
Rappel : La hauteur sera recalculée automatiquement afin que les proportions d'origine soient respectées.
J'en conviens avec vous. Le rendu avec le navigateur n'est pas "jojo".
La page n'occupe que 600 pixels de large et surtout elle est alignée à gauche de l'écran ce qui est moche !
Les boites H1,H2 et H3 n'ont que 480 pixels de large et sont alignées à gauche dans la page.
Le tableau n'a que 480 pixels de large mais est aligné aussi à gauche dans la page.
Certaines cellules du tableau ne sont pas bordurées (celles délimitées par la balise TD). Il y a donc un oubli dans le sélecteur !
Le texte du paragraphe (balise P) occupe toute la largeur de l'écran.
P est une balise "block" et "enfant" de BODY et la largeur n'est pas définie dans la feuille de style donc par défaut la largeur
est égale à la largeur de son "parent" (BODY). C'est ce qu'on appelle l'héritage.
Nous allons améliorer la mise en page dans une nouvelle version.
Je vous indique uniquement le code de la feuille de style puisque le code de la partie BODY est toujours le même !
Par rapport à la feuille de style de la page précédente nous avons corrigé le sélecteur de la cinquième règle de style (ajout de td)
Nous avons aussi ajouté une septième règle de style :
body, h1,h2,h3, table, img {margin-left : auto; margin-right : auto; } :
Sens : pour les balises énumérées dans le sélecteur il y aura centrage horizontal dans leur boite parente !
Donc la page (sélecteur "body") va désormais être centrée horizontalement dans l'écran !
Les boites "enfants" de BODY (h1,h2,h3, table, img, a ) vont être centrées horizontalement dans BODY (la page).
Il reste cependant un gros BUG ! Les images ne sont pas centrées horizontalement dans cette page malgré la règle de style ..., img {margin-left : auto; margin-right : auto;}. Et pourquoi cette absence de centrage horizontal ???
L'explication est simple. Certaines propriétés CSS et en particulier le centrage horizontal ne s'appliquent qu'aux boites c'est à dire aux éléments de type block. Or IMG et A sont nativement des balise de type "inline". Donc pour l'instant la règle CSS prévoyant le centrage horizontal des images n'est pas applicable !
Ajout dans la feuille de style par rapport à la version précédente :
Les élements IMG sont transformés en balise "block".
Le rendu dans un Iframe :
Désormais les images sont bien centrées horizontalement dans la page.
Par rapport à la page précédente le code CSS est le même sauf que l'on a simplement inséré une règle de style avant la
dernière : img {display : block ; }
Cette règle de style transforme la balise IMG en balise de type block pour cette page. Donc désormais le centrage horizontal va s'appliquer aux images
de la page.
Il y a cependant encore un petit problème : les images se touchent par le haut ce qui n'est pas le cas pour les autres boites de la page.
Il faut savoir que pour les balises de type "block" il y a des espacements verticaux (marges haute et basse) par défaut. C'est pour cette raison que nos
boites "titres" se suivent sans se toucher.
Or IMG n'est pas nativement une balise "block" donc n'a pas de "margin-top" et "margin-bottom" par défaut.
Ajouts dans la feuille de style :
Donc la feuille de style définitive après réorganisation est la suivante :
J'ai rajouté pour les images une marge haute et une marge basse.
Pour les paragraphes le texte sera désormais justifié ; il y aura une marge haute, basse, gauche, droite de 5 pixels.
En effet la propriété margin suivie d'une seule valeur précise une taille unique pour les quatre marges.
Le rendu dans un Iframe :
Les énumérations doivent être présentées sous forme de liste à puces ou listes numérotés.
La page va afficher d'abord des listes à puces avec différents types de puces voire sans puce… avec les puces tantôt à l'extérieur et
tantôt à l'intérieur.
Puis elle affichera des listes ordonnées avec différents systèmes de numérotation et avec les numéros tantôt à l'extérieur de la
boîte et tantôt à l'intérieur .
Nous utilisons deux propriétés CSS : list-style-type pour préciser le style de puce ou de numéro et
list-style-position pour la position "in" ou "out" des puces ou numéros.
Les valeurs possibles de la propriété list-style-type pour une liste à puces: disc, square,circle, none
Les valeurs possibles de la propriété list-style-type pour une liste ordonnée: decimal,upper_roman, lower-roman,
upper-alpha, lower-alpha, none
les valeurs possibles de la propriété list-style-position : outside, inside.
Ci-dessus j'ai souligné les valeurs par défaut c'est à dire la valeur appliquée lorsque il n'est pas fait mention de la propriété.
Notez que dans cette page le code CSS n'est pas à l'intérieur du conteneur STYLE dans la partie HEAD (feuille de style interne).
mais à l'intérieur de chaque balise via l'attribut STYLE. On dit que le CSS est "en ligne". Cette solution doit être exceptionnelle.
Dès qu'une règle de style concerne plusieurs éléments HTML de la page il faut privilégier la feuille de style (interne et/ou externe).
Nous verrons plus loin qu'une feuille de style peut être commune à plusieurs pages si elle est matérialisée sous forme d'un fichier
d'extension .css (feuille de style externe).
Les boites H1, OL et UL ont la même largeur que la page (400px) et pourtant cette largeur n'est pas précisée dans la feuille de style ...
Par défaut les éléments "enfants" ont la même largeur que leur "parent". On dit qu'il y a "héritage" (par l'enfant)
de la valeur de la propriété width du parent.
Je rappelle que H1,OL, UL sont "enfants" de BODY puisque ces éléments sont contenus dans BODY.
Vous constatez aussi que dans les deux premières listes les puces/numéros sont "out" alors que les dans les deux dernières les
puces/numéros sont "in" car on fait appel à une classe. Je vais expliquer ci-dessous la notion de classe.
Pour les quatre listes on a un fond jaune ... très moche j'en conviens (lol).
* { font-family : arial ; font-size : 20px ;} : le texte de toutes les balises de la page sera écrit avec la police Arial et tout le texte aura une taille de 20 pixels. Donc on supprime les tailles par défaut en particulier pour les balises H (1 à 6).
body {width : 400px ; margin : 10px auto 10px auto ; } : la page a une largeur de 400 pixels et est centrée horizontalement dans l'écran. Ici on décrit les quatre marge avec une seule propriété : margin : haut droit bas gauche
ol{list-style-type : upper-roman ;} : style de numérotation pour les listes ordonnées
ul{list-style-type : square ; } : style de puces pour les listes à puces
.interieur{list-style-position : inside; } : classe nommée interieur qui prévoit que les puces/numéros des items de liste seront en retrait (sont "in") si cette classe est appliquée à la liste.
ul, ol{ background-color : yellow; } : les boites UL et OL auront un fond jaune.
h1 {text-align : center ; font-size : 150% ; border : 1px solid black ; } : le texte balisé par H1 sera centré
dans sa boîte et la taille des caractères sera majorée de 50% par rapport à la taille de référence :
celle définie par le sélecteur * : 20px.
border est un raccourci qui remplace border-width, border-style, border-color.
La propriété "méga propriété" border est toujours suivie de 3 valeurs : largeur style couleur.
<ul class ='interieur'> : nous utilisons l'attribut class avec comme valeur le nom d'une classe.
On dit que l'on appelle une classe.
Appeler avec le conteneur UL la classe interieur signifie que l'on applique à cet élément toutes les règles
de style définies pour cette classe en plus des formatages prévus pour la balise UL.
Donc ici les puces seront des carrés (mise en forme prévue pour le conteneur UL) et ces carrés seront "in"
(mise en forme prévue par la classe interieur.
<ol class ='interieur'> : pour cette liste ordonnée les numéros seront des lettres (mise en forme prévue pour le conteneur OL) et les lettres seront "in" (mise en forme prévue par la classe interieur.
Dans le cadre du "responsive web design" (adaptation de la page à tous types d'écrans) la largeur de BODY (la page)
est exprimée en pourcentage. La largeur de la page sera toujours égale à 90% de celle de l'écran !
Donc même sur un petit écran la page ne sera jamais rognée.
Remarquez que la boite H1 est toujours alignée à gauche dans la page.
Que devez vous rajouter dans la règle de style relative au sélecteur H1 pour que cette boite soit bien centrée horizontalement dans la page ?
Bordurer la page et les titres c'est pas forcément très joli mais dans cette page je l'ai fait pour que vous visualisiez bien les largeurs des boites et vous montrer aussi que si text-align :center (centrer le texte dans sa boite parente) il faut aussi que cette boite soit centrée dans son conteneur (margin-left : auto & margin-right : auto) pour que le titre apparaisse centré dans la page
Dans toutes les listes les puces/numéros sont en "in".
ol.romain {list-style-type : upper-roman ; } : on crée une classe nommée romain qui est spécifique à la balise OL.
La classeromain ne peut être appelée qu'avec la balise OL !
ul.carre {list-style-type : square ; } : classe nommée carre qui est spécifique à la balise UL.
La classecarre ne peut être appelée qu'avec la balise UL !
.barbie {background-color : rgb(255,255,0) ; color : rgb(255,0,255) ; border : 1px solid orange; } :
on crée une classe universelle nommée barbie.
Une classe universelle peut être appelée avec n'importe qu'elle balise.
Dans la classe barbie les couleurs sont notées selon la syntaxe rgb (red green blue). C'est à dire que l'on indique
entre parenthèses l'intensité de rouge, de vert et de bleu. Pour chaque couleur de base l'intensité va de 0 à 255 (2 à la puissance 8).
Une classe universelle a la syntaxe suivante : .nomclasse{...}
Une classe spécifique à une balise a la syntaxe suivante : balise.nomclasse{...}
<ul class = 'carre barbie'> :
On peut appeler deux classes via l'attribut class
Les mises en forme prévues par les deux classes et la balise UL s'ajoutent pour formater la liste.
<p class ='romain'>: vous pouvez remarquer dans l'aperçu que le paragraphe n'est pas numéroté.
Cette instruction n'a en effet aucun sens. On ne peut pas appeler la classe romain avec la balise P !
La classe romain ne peut être appelée qu'avec la balise OL puisqu'il s'agit d'une classe spécifique.
L'instruction est donc erronée mais heureusement le navigateur "ne plante pas" ; il se contente d'appliquer seulement les styles prévus pour la balise P !