0% ont trouvé ce document utile (0 vote)
962 vues2 pages

Cours HTML-CSS

Le document décrit les principaux éléments et balises HTML permettant de structurer un document, comme les titres, paragraphes, citations, liens hypertextes, ainsi que la syntaxe des tableaux, formulaires et leurs composants.

Transféré par

Julien Gritti
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
962 vues2 pages

Cours HTML-CSS

Le document décrit les principaux éléments et balises HTML permettant de structurer un document, comme les titres, paragraphes, citations, liens hypertextes, ainsi que la syntaxe des tableaux, formulaires et leurs composants.

Transféré par

Julien Gritti
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Structure du document Tableaux Notation de Formulaires

<!-- ... --> Code en commentaire. <table param...> Balise de création de table. couleurs <form params...> Création d'un formulaire.

<H1>|<H2>|...<H6> Header : titres hiérarchisés de niveau width=length Largeur de la table. Constantes Notations action=URI URI de la page de traiement.
... respectif 1, 2, 3, 4 ,5 ,6. symboliques RVB
</H1>|</H2>|...</H6> (1 = gros, 6 = petit). border=entier Épaisseur de la bordure. method=get|post Méthode de soumission des données :
Black "#000000"
"get" : données concaténées à l'URI.
<P param...> ... </p> Paragraphe. bgcolor=couleur Couleur d'arrière plan. "post" : données transmise dans le corps de
Silver "#C0C0C0"
la requête
align=alignement Couleur du texte. cellspacing=length Taille d'espace des cellules.
Gray "#808080"
target=frame Nom du cadre qui affichera le résultat.
title=texte Texte de l'info bulle. cellpadding=length Taille d'espacement entre la
bordure d'une cellule et son White "#FFFFFF"
<input params...> Composant de formulaire.
<br> Retour de ligne forcé. contenu. Maroon "#800000"
type=type Type de composant :
<pre> ... </pre> Texte pré-formaté (tags html ignorés). dir=direction "LTR" : cellules de gauche à Red "#FF0000" text : ligne de texte simple,
droite (défaut), password : mot de passe,
<em> ... </em> Texte en emphase (italique). "RTL" : cellules de droite à Purple "#800080" checkbox : boite à cocher,
gauche. radio : bouton radio,
<strong> ... </strong> Texte en gras. Fuchsia "#FF00FF" submit : bouton de soumission,
<thead>...</thead> Groupement d'en-tête.
<blockquote param...> ... Citation image : bouton de soumission graphique,
Silver "#C0C0C0"
</blockquote> <tfoot>...</tfoot> Groupement de pied de table. reset : bouton de réinitialisation,
Green "#008000" bouton : bouton simple,
cite=URI URI de la source de la citation. <tbody>...</tbody> Groupement corps de table. hidden : composant caché,
Lime "#00FF00" file : selecteur de fichier.
title=texte Texte de l'info bulle. <tr param...>...</tr> Ligne de corps,en-tête ou pied.
Olive "#808000" name=texte Nom du champ.
<HR params...> Insérer une ligne de séparation horiz. <th param...>...</th> Cellule d'en-tête (texte en
gras). Yellow "#FFFF00" value=texte Valeur par défaut du composant.
width=length Largeur de la ligne.
<td param...>...</td> Cellule de table. Navy "#000080" size=entier Taille en pixels ou en caractères
align=alignement Aligment de la ligne.
colspan=n Fusionne la cellule avec les n-1 Blue "#0000FF" maxlength=entier Longueur de saisie maximum.
size=entier Hauteur de la ligne en points. cellules de droite.
Teal "#008080" checked Composant radio ou checkbox activé.
Aide mémoire HTML/CSS

<A params...> ... </A> Lien hypertexte. rowspan=n Fusionne la cellule avec les n-1
cellules du dessous. Aqua "#00FFFF" src=URI URI de l'image (type image seulement)
href=URI URI du document pointé.
Witdh,border,bgcolor, <textarea params...> Zone de saisie de texte contenant texte
target=frame Nom du cadre qui doit recevoir le idem. texte initial initial.
document. Valeurs spéciales : cellspacing,cellpadding
</textarea>
"_blank" : nouvelle fenêtre, </table> Balise de fin de table.
"_self" : même cadre, name=texte Nom du champ.
"_parent" : cadre parent,
"_top" : cadre de plus haut niveau. Cadres rows=entier Nombre de lignes.

<frameset params...> Définir une disposition de frames. cols=entier Nombre de colonnes.


En-tête du document
<body param...> Ouverture du corps du document. rows="length,length..." Liste des largeurs des frames ("* " : le reste <select params...>... Liste de choix déroulante.
de la largeur disponible).
bgcolor=couleur Couleur d'arrière plan. name=texte Nom du champ.
cols="length,length..." Liste des hauteurs des frames ("* " : le reste
text=couleur Couleur du texte. de la largeur disponible). <option params...> Option de liste déroulante affichant
description [</option>] description.
link=couleur Couleur des liens. <frame params...>...</frame> Frame imbriquée.
value=texte Valeur de l'option de choix.
alink=couleur Couleur du lien cliqué. src=URI URI du document imbriqué.
</select> Fin de description de liste de choix.
vlink=couleur Couleur du lien visité. noresize Empêche l'utilisateur de retailler le cadre
<button params...> Transforme code en bouton
text=couleur Position d'alignement de l'image. Valeurs scrolling=auto|yes|no Affichage des ascenseurs : code </button>
possible : bottom,middle,top,left,right auto : si nécessaire,
no : pas d'ascenseur, name=texte Nom du champ.
</body> Fermeture du corps du document. yes : ascenseurs toujours affichés.
type=type Type de bouton : button|submit|reset.
Frameborder = {0, 1} Affichage de la bordure du cadre (1) ou non
(0). </form> Fin du formulaire.
Corps du document
Marginwidth=entier Taille des marges gauche et droite.
<body param...> Balise d'ouverture du corps.
Marginheight=entier Taille des marges haute et basse. Listes, énumérations
bgcolor=couleur Couleur d'arrière plan.
<noframe> ... </noframe> Code HTML à interpréter si les cadres ne <ul> Balise d'ouverture de liste.
text=couleur Couleur du texte. sont pas supportés par le navigateur.
<li> ... [</li>] Balise d'élément de liste.
link=couleur Couleur des liens. </frameset> Fin de disposition de frames.
</ul> Balise de fermeture de liste.
alink=couleur Couleur du lien cliqué.
<ol> Balise d'ouverture de énumération.
vlink=couleur Couleur du lien visité.
Valeurs de paramètre <li> ... [/li>] Balise d'élément énuméré.
text=couleur Position d'alignement de l'image. Valeurs length Largeur en pixel ou en pourcentage de largeur disponible.
possible : bottom,middle,top,left,right </ol> Balise de fermeture d'énumération.
alignement Alignement du texte : left, center, right, justify.
</body> Balise de fermeture du corps.
Aide mémoire HTML (suite) Feuilles de style cascadées Polices
<style="text/css"> Note : selecteur correspond au nom d'un font font-style, font-variant, font-weight, font-size/line-height,
/* commentaire */ élément html (ex: BODY,P,H1,etc...), font-family, caption, icon, menu, message-box, small-
selecteur,selecteur ... {propriété: valeur; propriété: valeur; ... } propriété à un attribut (ex:font-size, border, caption, status-bar
Formatage de texte [Link] {propriété: valeur; propriété: valeur; ... } etc...)
<center>...</center> Texte centré. </style> font-family family-name, generic-family

<TT> ... </TT> Texte en style télétype. font-size xx-small, x-small, small, medium, large, x-large, xx-large,
Arrières plans smaller, larger, length, %
<I> ... </I> Texte en italique. background Background-color, background-image, background-repeat, background-attachment,
background-position font-size-adjust none, number
<B> ... </B> Texte en gras.
background-attachment scroll, fixed font-stretch normal, wider, narrower, ultra-condensed, extra-
<U> ... </U> Texte souligné. condensed, condensed, semi-condensed, semi-expanded,
background-color color-rgb, color-hex, color-name, transparent expanded, extra-expanded, ultra-expanded
<S> ... </S> Texte barré.
background-image url, none font-style normal, italic, oblique
<BIG> ... </BIG> Texte en grosse police.
background-position top left, top center, top right, center left, center center, center right, bottom left, font-variant normal, small-caps
<SMALL> ... </SMALL> Texte en petite police. bottom center, bottom right, x-% y-%, x-pos y-pos
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
<font params...> ... </font> Changer le style du texte. background-repeat repeat, repeat-x, repeat-y, no-repeat 600, 700, 800, 900
size = entier Taille absolue ou relative
de la police. Espacements Classification
padding padding-top, padding-right, padding-bottom, clear left, right, both, none
color=couleur Couleur du texte. padding-left
cursor url, auto, crosshair, default, pointer, move, e-
padding-bottom, padding-top, padding-left, padding-right length, %
Images resize, ne-resize, nw-resize, n-resize, se-resize,
sw-resize, s-resize, w-resize, text, wait, help
<img param...> Balise d'insertion d'image Bordures
display none, inline, block, list-item, run-in, compact,
src=uri URI de l'image border-color color
marker, table, inline-table, table-row-group,
border-style None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset table-header-group, table-footer-group, table-
alt=texte Courte description
row, table-column-group, table-column, table-
width=entier Largeur d'affichage border-width Thin, medium, thick, length cell, table-caption

height=entier Hauteur d'affichage float left, right, none


Dimensions Contours
border=entier Largeur de la bordure de l'image. position static, relative, absolute, fixed
Height, width auto, length, % outline outline-color, outline-style, outline-width
(0 = pas de bordure).
visibility visible, hidden, collapse
line-height normal, number, length, % outline-color color, invert
align=aligment Position d'alignement de l'image.
max-height, max-width none, length, % outline-style none, dotted, dashed, solid, double,
alt=texte Texte affiché si l'image ne peut
être affichée.
groove, ridge, inset, outset Positionnement
min-height, min-width none, length, %
outline-width thin, medium, thick, length bottom, top, right, left auto, length, %
title=texte Texte de l'info bulle.
Tableaux clip shape, auto
border-collapse table collapse, separate Marges overflow Visible, hidden, scroll, auto
border-spacing length margin margin-top, margin-right, position static, relative, absolute, fixed
margin-bottom, margin-left
caption-side top, bottom, left, right vertical-align baseline, sub, super, top, text-top, middle, bottom,
margin-bottom, margin- auto, length, % text-bottom, length, %
empty-cells show, hide top, margin-left,
margin-right z-index auto, number
table-layout auto, fixed

Texte
color color
En savoir plus ... direction ltr, rtl
W3C recommandation [Link]
letter-spacing normal, length
HTML reference [Link]
CSS2 reference [Link] text-align left, right, center, justify

text-decoration none, underline, overline, line-through, blink

text-indent length, %

text-shadow none, color, length

Aide mémoire text-transform none, capitalize, uppercase, lowercase

unicode-bidi normal, embed, bidi-override


HTML/CSS white-space normal, pre, nowrap

word-spacing normal, length

Vous aimerez peut-être aussi