 Pour choisir une taille par défaut pour le corps du document :

Pour choisir une taille par défaut pour le corps du document :

Tapez <BASEFONT.

Saisissez SIZE= " n ">, étant le nombre compris entre 1 et 7.Il s’agit par défaut de 3, ce qui affiche la police dans la taille choisie par le visiteur dans la boîte de dialogue Préférences > Polices .

Exemple :

Après la balise <body><BASEFONT SIZE= " 5 ">

Pour appliquer à un texte une police à chasse fixe :

Si vous avez des codes informatiques, des URL ou d’autres caractéristiques que vous souhaitez différentier par rapport au texte principal, vous pouvez les formater au moyen d’une police à chasse fixe. Plusieurs balises apparaissent aini :

Tapez <CODE>, <KBD>, <SAMP> ou <TT>.

Saisissez le texte que vous souhaitez afficher dans une police à chasse fixe.

Tapez </CODE>, </KBD>, </SAMP> ou </TT>.

Signification des termes :

<CODE> : Code informatique

<KBD> : Saisie au clavier

<SAMP> : Exemple de texte

<TT> : Texte de Télétype

Aligner une image par rapport à un texte :

Tapez <img src= " image.emplacement ", image emplacement indiquant l’endroit où se trouve l’image sur le serveur .

Tapez align= " type, type étant l’un des attributs suivants :

textop : aligne l’image sur le plus haut texte de la ligne

top : aligne l’image sur le plus haut élément de la ligne.

middle :aligne le centre de l’image sur la ligne de base .

absmiddle : aligne le centre de l’image sur le milieu du plus grand élément .

bottom : aligne le bas de l’image sur le bas du texte .

absbottom : aligne le bas de l’image sur le bas du plus grand élément .

Finissez par >

Pour définir un style de classe :

Vous pouvez répartir des éléments HTML, en catégories ou classes, afin de n’appliquer des styles qu’à certains. Il est par exemple possible de créer une classe de paragraphes d’introduction qui auront un formatage légèrement différent des paragraphes normaux .

Marquez les éléments de votre page à inclure dans la classe en insérant dans les Balises HTML, appropriés Class=nomclasse, nomclasse correspondant au mot qui identifie la classe.

Dans la partie STYLE de votre page HTML, tapez tagparent=nomclasse, tagparent indiquant la balise dont dépend la classe, et nomclasse étant le même qu’a l’étape 1.

N’oubliez pas le point entre ces deux membres.

Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .

Exemple :

p.intro {text-indent :0 ;font : italic bold}, puis plus loin

<p class=intro>

Pour identifier une balise particulière :

Au lieu de créer toute une classe de balises HTML, vous pouvez également identifier des tags particuliers, puis appliquer des données d’une feuille de styles ou des fonctions javascript .

Identifiez l’élément dans votre page HTML, en ajoutant dans la balise HTML, approprié ID=nomid, nomid étant le mot qui identifie le tag.

Dans la partie style de votre page HTML, tapez tagparent#nomid, tagparent correspondant au type de balise HTML, identifié par l’attribut ID et nomid étant le même qu’a l’étape 1.

Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .

Pour appliquer des styles à la balise DIV :

Deux tags sont particulièrement utiles pour l’application de style :DIV, qui porte sur une ou plusieurs section de votre document, et SPAN, applicable à quelques mots d’un texte, Employés seuls, ils n’ont pas grande influence sur le texte marqué, mais associés à une classe ou à un ID et un style, ils permettent de créer vos propres balises HTML .

Dans la partie STYLE, au début de votre document HTML, ou dans une feuille de styles externe, tapez DIV.nomclasse, nomclasse correspond au mot identifiant la classe que vous allez utiliser, ou DIV#nomID,nomID étant le mot qui identifie cette instance particulière de la balise DIV .

Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .

Exemple pour DIV ainsi que SPAN :

Div :

DIV.balda {background=aqua}

Div chouchou {background=lime }

Puis avant un paragraphe ou titre

Tapez <DIV class= "balda ">Puis pour finir </div>

Span :

Span.majinit {font-size : 200%}

Span.tousesmaj {font-variant :small-caps}

Puis avant un mot

Tapez <Span class= " majinit ">S</span>

Class= " tousesmaj ">ur cette page, vous </span>

Pour définir un style de lien :

Si vous n’aimez pas les liens soulignés, vous pouvez changez leurs couleurs d’arrière plan et de premier plan, afin qu’ils continuent de ressortir dans la page, mais de façon plus élégante. Le styles de lien ont une syntaxe particulière .

Tapez A :

Tapez link, afin de changer la présentation des liens qui n’ont pas encore été cliqués ni cliqués, ou visited pour modifier celle des liens déjà cliqués par le visiteur ou active en vue de changer l’apparence des liens au moment du clic, ou enfin hover, afin de modifier la présentation des liens actuellement pointés.

Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .

Exemple :

A :link ou visited ou active ou hover {background :yellow ;color :green ;text-decoration :none}

Définir la famille de polices :

Tout le monde ne possédant pas le même jeu de polices, le marqueur font-family a des caractéristiques spéciales :il permet de spécifier plusieurs fontes, au cas où le système de l’utilisateur ne pourrait pas employer la première .

Tapez {font-family :nomfamille, nomfamille étant la première police choisie, et si vous le souhaitez, tapez nomfamille2 }

Exemple :

H1 {font-family : " news gothic MT ", " Lithos Regular "}

Incorporer une police dans une page :

Vous pouvez certes choisir n’importe quelle police que verra le visiteur si elle n’est pas installée sur son système. L’une des dernières fonctionnalités ajoutées au feuille de styles est la possibilité d’incorporer une fonte dans une page et de la télécharger vers la machine de l’internaute, comme une image .

Tapez @font-face {font-family : ".

Tapez le nom entier de la police à incorporer.

Tapez " ;src : url(.

Tapez L’ URL de la fonte.

Tapez )}

Exemple :

A mettre dans la balise <style>

@font-face {font-family : " NewsGoth " ;src : url (NewsGoth.eot)}

Mettre du texte en italique, en gras :

Dans la balise <style>

Exemple :

p.intro {font-style : italic} //Mettre du texte en italique

p.intro EM {font-style : normal}//Permet de retirer la mise en italique

H1 {font-weight : normal} // permet de le texte en gras (normal), vous pouvez tapez soit Bolder ou alors lighter (Plus gras ou beaucoup moins gras)

Dans la balise <style>

H1 {font-weight : normal ;

Font weight : bold }

Définir la taille d’une police :

Tapez {font-size : 20pt ; //Permet de définir la taille d’une police .

Définir la hauteur des lignes :

Tapez {line :height :15 pt} //Permet de définir la hauteur des lignes .

Spécifier l’espace inter- mots :

Vous pouvez augmenter l’espace qui sépare les mots(espace inter –mots) ou lettres (Crénage ou interlettrage). Il est aussi possible d’ajouter un bloc d’espace ou un retrait devant des paragraphes particuliers .

Tapez Word-spacing :

Tapez longueur, longueur étant une valeur numérique en pixels, points, cicéros, etc ..

Fixez le crénage

Tapez letter-spacing :

Tapez longueur, longueur étant une valeur numérique en pixels, points, ciceros, etc ..

Ajouter un retrait

Tapez text-indent

Exemple :

H1 {letter-spacing : 5em ;

P {text-indent : 0pt ;

p.intro {text-indent :0 pt ;

Pour aligner du texte :

Tapez text-align :center ou right ou left ou justify //Permet d’aligner le texte à droite, à gauche, au centre ou justifié .

Pour souligner du texte :

Dans la balise <style>

Tapez text-decoration :

Tapez underline ou overline, selon que vous désirez respectivement tracer un trait au-dessous ou au-dessus du texte ou tapez line-through, afin de barrer le texte .

Pour décaler un élément dans la continuité d ‘une page :

Dans la balise <style>

Tapez position : relative ; (n’oubliez pas le point-virgule).

Tapez top(haut), right(droite), bottom(bas), left(gauche).

Tapez : v, v étant la distance dont vous souhaiterez décaler l’élément par rapport à sa position naturelle ; exprimez-la par une valeur absolue ou relatif(10 pt ou 2em, par exemple)

Pour définir des propriétés de listes

Tapez list-style :

Disc : pour une puce ronde et pleine .

Circle : pour une puce ronde et vide .

Square : Pour une puce carrée pleine .

Decimal : pour les chiffres arabes (1.2.3..)

Lower-alpha : pour des lettres en minuscule(a, b, c, ..)

Upper-alpha : pour des lettres capitales (A.B.C…)

Lower-roman : pour des chiffres romains minuscules(I-II-III-IV …)

url : (image.gif), pour un graphisme, image.gif étant l’URL de l’image à employer comme marqueur dans la liste .

Tapez éventuellement outside, afin de déclarer le marqueur à gauche des éléments de listes, ou inside, si vous préférez aligner le marqueur à gauche, au même niveau que toutes les autres lignes du paragraphe composant l’élément de la liste .

Exemple :

OL {list-style :lower-alpha}

Puis plus loin, vous n’avez plus qu’à a marqué par exemple <ul>les données</ul>

Créer un bouton qui exécute un script :
<tapez BUTTON TYPE= " button " .

Tapez NAME= " nom ", nom identifiant le bouton .

Tapez ONCLICK= " script " , script étant le code(javascript, généralement) qui s’exécute au clic du visiteur sur le bouton.

Si vous le souhaitez, tapez STYLE= " font : 14pt impact ; background :red "

Tapez >.

Exemple :

<button name= " date heure " onclick= " alert("Nous sommes actuellement le" + Date()) " STYLE= "font : 14 pt News Gothic ;background :white ;color :red ; ">quelle heure est-il ?</button>

Modifier l’étiquette d’état d’un lien :

Créer le lien de manière habituelle.

Dans la balise de ce lien, tapez ONMOUSEOVER= " windows.status="guillemets doubles, puis guillemets simple).

Exemple :

<img src= " images.gif " alt= " voulez voir cette image " ONMOUSEOVER= " windows.status=" mon image" ; return true ">

Le <a href= " cesar.htm " ONMOUSEOVER= " windows.status=" cliquez ici pour decouvrir la biographie de cesar" ; return true ">

Pour enrichir un lien mailto :

Tapez <a href= " mailto :anne@site.com, comme d"habitude .

Tapez ?subject=sujet, sujet étant le texte que vous souhaitez faire apparaître dans la ligne object ou : Tapez ?cc=personne@site.com, correspondant à l’adresse de la personne qui devra recevoir automatiquement une copie conforme du message .

Ou tapez ?bcc=personne@site.com, rsonne@site.com indiquant l’adresse du destinataire en copie conforme invisible, tapez les ‘finaux .

Exemple :

Faites-nous part de vos <a href= "mailto :firstinfo @first.com ?subject=vos publications ">remarques</a>au sujet de la collection first interactive !

Pour créer un bouton au moyen d’un tableau :

Les cellules boutons peuvent se présenter comme suit :<td bgcolor=red align=middle><a href= " lien.html "><font size=+3 color=black>cliquez ici</font></a></td>

Pour créer un diaporama automatique :

Dans l’en-tête (HEAD) de la première page, tapez <META HTTP-EQUIV= " Refresh " content = " 10 " ; URL= " page2.html ">

Tapez CONTENT= " n ; n indiquant le nombre de secondes pendant lesquelles la page devra restée affiché à l écran.

Tapez URL=pagesuivante.html ">, page suivante.html étant l’url de la prochaine page que vous souhaitez présenter automatiquement au visiteur .