Balise BALISE DE PREMIER NIVEAU <html> Balise principale <head> En-tête de la page <body> Corps de la page Balises d'en-tête Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> : Balise Description <link /> Liaison avec une feuille de style <meta /> Métadonnées de la page web (charset, mots-clés, etc.) <script> Code JavaScript <style> Code CSS <title> Titre de la page Balises de structuration du texte Balise Description <abbr> Abréviation <blockquote> Citation (longue) <cite> Citation du titre d'une oeuvre ou d'un évènement <q> Citation (courte) <sup> Exposant <sub> Indice <strong> Mise en valeur forte <em> Mise en valeur normale <mark> Mise en valeur visuelle <h1> Titre de niveau 1 <h2> Titre de niveau 2 <h3> Titre de niveau 3 <h4> Titre de niveau 4 <h5> Titre de niveau 5 <h6> Titre de niveau 6 <img /> Image <figure> Figure (image, code, etc.) <figcaption> Description de la figure <audio> Son <video> Vidéo <source> Format source pour les balises <audio> et <video> <a> Lien hypertexte <br /> Retour à la ligne <p> Paragraphe <hr /> Ligne de séparation horizontale <address> Adresse de contact <del> Texte supprimé <ins> Texte inséré <dfn> Définition <kbd> Saisie clavier <pre> Affichage formaté (pour les codes sources)
Balise BALISE DE PREMIER NIVEAU Balise principale En-tte de la
page Corps de la page
Balises d'en-tteCes balises sont toutes situes dans l'en-tte de
la page web, c'est--dire entre et :Balise Description Liaison avec
une feuille de style Mtadonnes de la page web (charset, mots-cls,
etc.) Code JavaScript Code CSS Titre de la pageBalises de
structuration du texteBalise Description Abrviation Citation
(longue) Citation du titre d'une oeuvre ou d'un vnement Citation
(courte) Exposant Indice Mise en valeur forte Mise en valeur
normale Mise en valeur visuelle Titre de niveau 1 Titre de niveau 2
Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de
niveau 6 Image Figure (image, code, etc.) Description de la figure
Son Vido Format source pour les balises et Lien hypertexte
Retour la ligne Paragraphe Ligne de sparation horizontale Adresse
de contact Texte supprim Texte insr Dfinition Saisie clavier
Affichage format (pour les codes sources) Barre de progression Date
ou heureBalises de listesCette section numre toutes les balises
HTML permettant de crer des listes (listes puces, listes numrotes,
listes dedfinitions)Balise Description
Liste puces, non numrote
Liste numrote
lment de la liste puces Liste de dfinitions Terme dfinir
Dfinition du termeBalises de tableauBalise Description Tableau
Titre du tableau Ligne de tableau Cellule d'en-tte Cellule Section
de l'en-tte du tableau Section du corps du tableau Section du pied
du tableauBalises de formulaireBalise Description Formulaire Groupe
de champs Titre d'un groupe de champs Libell d'un champ Champ de
formulaire (texte, mot de passe, case cocher, bouton, etc.) Zone de
saisie multiligne Liste droulante lment d'une liste droulante
Groupe d'lments d'une liste droulanteBalises sectionnantesCes
balises permettent de construire le squelette de notre site
web.Balise Description En-tte Liens principaux de navigation Pied
de page Section de page Article (contenu autonome) Informations
complmentairesBalises gnriquesLes balises gnriques sont des balises
qui n'ont pas de sens smantique.En effet, toutes les autres balises
HTML ont un sens : signifie Paragraphe , signifie Sous-titre ,
etc.Parfois, on a besoin d'utiliser des balises gnriques (aussi
appeles balises universelles) car aucune des autres balises
neconvient. On utilise le plus souvent des balises gnriques pour
construire son design.Il y a deux balises gnriques : l'une est
inline, l'autre est block.Balise Description Balise gnrique de type
inline Balise gnrique de type blockCes balises ont un intrt
uniquement si vous leur associez un attribut class, id ou style
:class : indique le nom de la classe CSS utiliser.id : donne un nom
la balise. Ce nom doit tre unique sur toute la page car il permet
d'identifier la balise. Vous pouvezvous servir de l'ID pour de
nombreuses choses, par exemple pour crer un lien vers une ancre,
pour un style CSS de typeID, pour des manipulations en JavaScript,
etc.style : cet attribut vous permet d'indiquer directement le code
CSS appliquer. Vous n'tes donc pas obligs d'avoirune feuille de
style part, vous pouvez mettre directement les attributs CSS. Notez
qu'il est prfrable de ne pas utilisercet attribut et de passer la
place par une feuille de style externe, car cela rend votre site
plus facile mettre jour par lasuite.Ces trois attributs ne sont pas
rservs aux balises gnriques : vous pouvez aussi les utiliser sans
aucun problme dans laplupart des autres balises.Partie 5 : Annexes
239/249Mmento des proprits CSSCette page est une liste non
exhaustive des proprits CSS qui existent en CSS3. Pour la plupart,
ce sont des proprits quenous avons vues dans le cours, mais vous
trouverez aussi quelques nouvelles proprits que nous n'avons pas
abordes.La liste est non exhaustive car mon but n'est pas de faire
la liste de toutes les proprits CSS qui peuvent exister : il y en
avraiment trop (plus de deux cents !) et certaines sont trs
rarement utilises.MmentoProprits de mise en forme du texteJe rsume
ici la plupart des proprits de mise en forme du texte.Qu'est-ce que
la mise en forme de texte ? C'est tout ce qui touche la prsentation
du texte proprement dit : le gras, l'italique, lesoulign, la
police, l'alignement, etc.Proprit Valeurs (exemples)
Descriptionfontfamilypolice1, police2, police3, serif,sans-serif,
monospace Nom de police@font-face Nom et source de la police Police
personnalisefont-size 1.3em, 16px, 120%... Taille du
textefontweightbold, normal Grasfont-style italic, oblique, normal
Italiquetextdecorationunderline, overline, line-through,blink, none
Soulignement, ligne au-dessus, barr ou
clignotantfontvariantsmall-caps, normal Petites
capitalestexttransformcapitalize, lowercase, uppercase
Capitalesfont - Super proprit de police. Combine : font-weight,
font-style,font-size, font-variant, font-family.text-align left,
center, right, justify Alignement horizontalverticalalignbaseline,
middle, sub, super, top,bottomAlignement vertical (cellules de
tableau ou lments inline-blockuniquement)lineheight18px, 120%,
normal... Hauteur de lignetextindent25px Alinawhitespacepre,
nowrap, normal Csureword-wrap break-word, normal Csure
forcetextshadow5px 5px 2px blue(horizontale, verticale,
fondu,couleur)Ombre de texteProprits de couleur et de fondProprit
Valeurs (exemples) Descriptioncolornom,
rgb(rouge,vert,bleu),rgba(rouge,vert,bleu,transparence),#CF1A20...Couleur
du textebackgroundcolorIdentique color Couleur de
fondbackgroundimageurl('image.png') Image de
fondbackgroundattachmentfixed, scroll Fond
fixebackgroundrepeatrepeat-x, repeat-y, no-repeat, repeat Rptition
du fondbackgroundposition(x y), top, center, bottom, left, right
Position du fondbackground -Super proprit du fond. Combine :
background-image,background-repeat,
background-attachment,background-positionopacity 0.5
TransparenceProprits des botesProprit Valeurs (exemples)
Descriptionwidth 150px, 80%... Largeurheight 150px, 80%...
Hauteurminwidth150px, 80%... Largeur minimalemaxwidth150px, 80%...
Largeur maximaleminheight150px, 80%... Hauteur
minimalemaxheight150px, 80%... Hauteur maximalemargintop23px Marge
en hautmarginleft23px Marge gauchemarginright23px Marge
droitemarginbottom23px Marge en basmargin 23px 5px 23px 5px(haut,
droite, bas, gauche)Super-proprit de marge.Combine : margin-top,
margin-right, marginbottom,margin-left.paddingleft23px Marge
intrieure gauchepadding- 23px Marge intrieure droite
