Le projet de créer ce site perso est né il y a de cela quelques mois et plus précisement lorsue j'ai commencé à vraiment me passionner pour le logiciel Flash de Macromedia et son langage de programmation, l'Action Script. Je pensais d'abord réaliser ce site entièrement en Flash, mais ayant trop d'idées de présentations, d'interfaces et d'animations, je me suis résigné et abandonné aux html, php et autres javascript - le contenu n'en est que plus accessible pour les moteurs de recherche, un point non négligeable.
Le W3C... Html... CSS...
Le W3C...
Comme dit dans mon article sur le W3C (
juste ici), cette norme est importante et je souhaitais que chacune de mes pages soient validées. Pour cela, je devais parfaitement construire ces pages pour qu'elles soient claires et sans erreur.
Les balises html...
Les balises html sont les outils de mises en formes, normalisées par le W3C.
Le langage html est facile à apprendre, intuitif et qui ne nécéssite pas de prérequis.
Simplement de la pratique et un peu de patiente.
Listons ces balises :
|
!doctype
a
abbr
acronym
address
applet
area
b
base
basefont
bdo
big
blockquote
body
br
button
caption
center
cite
code
col
colgroup
dd
del
dfn
dir
div
dl
dt
|
em
fieldset
font
form
frame
frameset
h1,...,h6
head
hr
html
i
iframe
img
input
ins
isindex
kbd
label
legend
li
link
map
menu
meta
noframes
noscript
object
ol
optgroup
|
option
p
param
pre
q
s
samp
script
select
small
span
strike
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
u
ul
var |
Ces balises sont utilisables car acceptées par le W3C, mais
bien sur, pour bien construire une page, il faut respecter une règle très simple :
Ouvrir une balise signifie la fermer plus loin.
Je m'explique :
Prenons par exemple la balise "title"
CODE :
<title>One-WAY on Web | Portfolio - One-WAY on Web : W3C, Html et CSS</title>
(Le résultat de ce code se voit dans la barre principale de votre navigateur.)
"<title>" : "<" et ">" permettent de signaler au navigateur (Internet Explorer, Firefox, etc) que les caractères compris entre ces symboles sont du code et non du texte à afficher.
"title" est donc notre balise - elle donne son titre à une page.
"One-WAY on Web | Portfolio - One-WAY on Web : Le projet" : le titre donné à la page.
"</title>" : Les crochets signalent que "/title" est du code. Le "/" ferme la balise. La balise title est donc fermée.
Chaque balise a son utilité et elles sont nombreuses. C'est pourquoi le plus compliqué - si j'ose dire - c'est de fermer toutes les balises.
Attention cependant à ne pas balancer vos fermetures de balise n'importe où et n'importe comment. Si vous ouvrez trois balises, il faut les fermer dans l'ordre inverse. Pour être plus clair, si vous ouvrez une balise "X", une "Y" puis une "Z", il faudra d'abord fermer la "Z" puis la "Y" et enfin la "X".
Prenons pour exemple un tableau :
CODE :
<table height:20px width:300px>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
(Ce code donnera le tableau si dessous.)
"<table>" :
"<table>" : signale qu'un tableau est créé.
"height:20px" et "width:300px" définissent les dimensions (hauteur et largeur).
"<tr>" : détermine une nouvelle ligne.
"<td>" : contient les données et informations à afficher
Les CSS...
Les Cascading Style Sheets sont des feuilles de styles. Les styles permettent de définir l'apparences des balises HTML au travers des attributs class et style. Les styles sont stockées soit dans des feuilles de styles ayant comme extension ".css", soit dans la page html entre les balises <style> de la partie HEAD.
Il est cependant possible d'appliquer les styles directement dans les éléments html en utilisant l'attribut style des balises. Les styles utilisés seront prioritaires sur la classe appelée à travers l'attribut class
Les CSS se retrouvent être très utiles lorsque
de nombreuses pages sont créés. Ainsi, une seule ligne suffit à définir le style de la plupart des balises. Plus besoin de reprendre une page et de la modifier.
Pour connaître toutes ces propriétés, rendez-vous dans les tutoriaux.
Propriétés des polices d'écriture :
- font-family
- Police précise (Arial, Times, Verdana)
- Définit une ou plusieurs familles de polices.
- Famille (serif, sans-serif, fantasy, monospace, cursive)
- Définit un ou plusieurs nom de police.
- font-style
- normal, italic, oblique
- Définit le style d'écriture.
- font-weight
- lighter, normal, bold ou bolder
- Définit la graisse de la police.
- valeur numérique (100, 200, 300, 400, 500, 600, 700, 800, 900)
- Définit l'épaisseur de la police.
- font-size
- xx-small, x-small, small, medium, large, x-large, xx-large
- Définit la taille de la police.
- taille en points (pt), en cm, ou en %
- Définit la taille de la police.
- font-variant
- normal, small-caps
- Définit une variante (petites majuscules).
- font
- font: Verdana, Arial, bold italic 8px;
- Raccourci permettant de mettre toutes les propriétés.
Propriétés des textes et paragraphes :
- color
- "#RRVVBB"
- Définit la couleur du texte.
- text-align
- left, center, right ou justify
- Définit l'alignement du texte.
- text-indent
- text-indent: 5px;
- Définit l'indentation (retrait du texte).
- text-decoration
- blink (clignotement), underline (souligné), line-through (barré), overline (surligné) ou none (aucune décoration)
- text-shadow
- text-shadow: 1px 2px 4px black;
- Définit l'ombrage texte : décalage à droite en px, décalage en bas en px, rayon de l'effet de flou en px et couleur.
- text-transform
- uppercase (majuscule), lowercase (minuscule) ou capitalize (première lettre en majuscule)
- Définit la casse du texte.
- white-space
- normal (passage à la ligne automatique), pre (conserve le formatage de la source), nowrap ( empeche la rupture de ligne)
- word-spacing
- word-spacing: 6px;
- Définit l'espacement des mots.
- width
- En points (pt), pouces (in), en cm, en pixels (px), ou en %
- Définit la longueur d'un élément de texte ou d'une image.
- height
- En points (pt), pouces (in), en cm, en pixels (px), ou en %
- Définit la hauteur d'un élément de texte ou d'une image.
Propriétés des arrière-plans :
- background-color
- "#RRVVBB"
- Définit la couleur de l'arrière-plan.
- background-image
- url(http://url)
- Définit l'image d'arrière-plan.
- background-repeat
- repeat, repeat-x, repeat-y, no-repeat
- Définit la façon de répéter l'arrière-plan.
- background-attachment
- scroll, fixed
- Spécifie si l'image reste fixe avec les déplacements de l'écran.
- background-position
- top, middle, bottom, left, center ou right
- Position de l'image par rapport au coin supérieur gauche.
- background
- background: url(test.jpg) fixed repeat;
- Raccourci pour les propriétés de l'arrière-plan.
Propriétés des marges :
- margin-top
- margin-top: 5px;
- Valeur de la marge supérieure.
- margin-right
- margin-right: 0.5em;
- Valeur de la marge de droite.
- margin-bottom
- margin-bottom: 2pt;
- Valeur de la marge inférieure.
- margin-left
- margin-left: 0;
- Valeur de la marge de gauche.
- margin
- margin: 5px 0.5em 2pt 0;
- Raccourci pour les propriétés de marge.
Propriétés des bordures :
- border[-top -left -bottom -right]-width
- En points (pt), pouces (in), en cm, en pixels (px), ou en %
- Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite].
- border[-top -left -bottom -right]-color
- border-left-color: #RRVVBB;
- Couleur de la bordure [supérieure, de gauche, inférieure ou de droite].
- border[-top -left -bottom -right]-style
- solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie), ridge (effet 3D), groove (bordure gravée dans la page, opposé de ridge), hidden (pas de bordure, influe sur les bordures mitoyennes) ou none (pas de bordure, équivaut à border-width:0)
- Style de la bordure [supérieure, de gauche, inférieure ou de droite].
- border-collapse
- collapse (Conserve l'aspect 2D, bordure fine sans marge), separate (un effet 3D, bordure large avec marge)
- Fusionne ou non avec les bordures adjacentes.
- border
- border: 1px 0 0 2px dotted green;
- Raccourci global des propriétés de bordures.
Propriétés des espaces intérieurs :
- padding-top
- padding-top: 3px;
- Espace intérieur entre l'élément et la bordure supérieure.
- padding-right
- padding-right: 0.25em;
- Espace intérieur entre l'élément et la bordure droite.
- padding-bottom
- padding-bottom: 0;
- Espace intérieur entre l'élément et la bordure inférieure.
- padding-left
- padding-left: 2pt;
- Espace intérieur entre l'élément et la bordure gauche.
- padding
- padding: 3px 0.25em 0 2pt;
- Raccourci vers l'ensemble des propriétés d'espace intérieur. Si l'on ne précise qu'une longueur, celle-ci s'appliquera aux quatres cotés de l'élément.
Propriétés des tableaux :
- caption-side
- top, bottom, left ou right
- Positionnement de la légende du tableau.
- empty-cells
- show ou collapse
- Affichage (show) ou masquage (collapse) des cellules vides.
- table-layout
- fixed (indépendamment du contenu des cellules) ou auto (selon le contenu des cellules)
- Largeur fixe ou variable.
- speak-headers
- alwats (systématiquement avant chaque cellule) ou once (une seule fois)
- Propriété pour sourds et malentendants indiquant le comportement lors de la lecture des cellules d'en-tête d'un tableau.
Propriétés des listes :
- list-style-type
- decimal, upper-roman, lower-latin, disc, circle, square ou none
- Type de puces et de numérotation.
- list-style-image
- list-style-image: url(image.png);
- Permet de personnaliser les puces avec une image.
- list-style-position
- inside ou outside
- Spécifie le retrait des puces.
- list-style
- list-style: url(puce.gif) inside;
- Raccourci vers les propriétés de liste.
Propriétés de mise en page :
- @page
- @page(size: portrait)
- Définit la mise en page de l'impression.
- size
- auto, landscape ou portrait
- marks
- crop (traits de coupe), cross (repère de montage), none (pas de marque)
- Traits de coupe et repères de montage.
- page-break-before
- Always, avoid
- Force le saut de page avant un élément.
- page-break-after
- Always, avoid
- Force le saut de page après un élément.
- orphans
- orphans: 2;
- Définit le nombre de lignes en fin de page.
- widows
- widows: 1;
- Définit le nombre de lignes en début de page.
United States
