TIC Bac Sc Info
Cours HTML
Bases d'une page HTML :
<HTML>
<HEAD>
<TITLE>Le titre de votre page</TITLE>
</HEAD>
<BODY>
Le contenu de votre page
</BODY>
</HTML>
Gestion du texte :
- <b>texte</b> (BOLD en anglais) : permet de mettre un texte en gras. Résultat : voici
un texte en gras.
- <i>texte</i> (Italic) : permet de passer un texte en Italique. Résultat : voici un texte
en italique.
- <u>texte</u> (Underligne) : permet de souligner un texte. Résultat : voici un texte
souligné.
- <s>texte</s> (Strike) : permet de rayer un texte. Beaucoup moins utile. Résultat :
voici un texte rayé.
Mise en page :
<BR> : passer à la ligne (effet cumulable : deux <BR> saute une ligne)
<P> : sauter une ligne
<CENTER>texte</CENTER> : pour centre un texte dans la page (très utile !)
<P ALIGN="LEFT ou RIGHT ou CENTER">texte à aligner</P> : pour aligner votre texte
<HR SIZE="épaisseur en pixels" WIDTH=largeur ALIGN=alignement> : créé une ligne
horizontal.
<H1>texte</H1> : texte en gras et de taille(<H2>,<H3>,<H4> et <H5>)
Images :
<IMG SRC="[Link]" WIDTH="largeurenpixel"
HEIGHT="hauteurenpixel" ALT= "Message d’erreur"> : pour insérer vos images.
Tableaux :
Structure simple d'un tableau :
- <TABLE> : pour ouvrir un tableau.
- <TR> : pour ouvrir une ligne.
- <TD></TD> : pour ouvrir et fermer une cellule.
- <TH></TH> : pour ouvrir et fermer une cellule contenant du texte centré et en gras.
- </TR> : pour fermer une ligne.
- </TABLE> : pour fermer le tableau.
TIC Bac Sc Info
Options de tableau :
<TABLE WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur du tableau définie
en pixels ou en pourcentage en ajoutant %.
<TABLE BORDER="X"> : où X est l'épaisseur de la bordure.
<TABLE BORDERCOLOR="couleur" BORDER="taillebordure">
ou <TABLE BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="couleur"
BORDER="taillebordure"> : Définir la couleur de bordure de votre tableau.
<TABLE BGCOLOR="couleur"> Définir la couleur de fond d'une cellule de votre tableau
c'est : <TD BGCOLOR="couleur"> : Définir la couleur de fond de votre tableau.
<TABLE CELLSPACING="X"> : où X est l'espace entre les cellules.
<TABLE CELLPADDING="X"> : où X est l'espace entre une cellule et son contenu.
Fusionner les cellules :
<TD COLSPAN="X"> : où X est le nombre de colonnes sur lequel s'étend la cellule.
<TD ROWSPAN="X"> : où X est le nombre de lignes sur lequel s'étend la cellule.
Options des cellules :
<TR WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur d’une ligne définie en
pixels ou en pourcentage en ajoutant %.
<TD WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur d’une colonne définie
en pixels ou en pourcentage en ajoutant %.
Liens :
Un lien externe c'est : <A HREF="[Link]
Un lien interne c'est : <A HREF="[Link]">Aller sur ma page</A>
Un lien sur un signet : <a href="#chap4">allez au chapitre 4</a>
<a name="chap4">chapitre 4</a>
Un lien mail c'est : <A HREF="[Link] pour m'écrire
sur pseudo@[Link]</A>
Un lien sur une image c'est : <A HREF="[Link]
SRC="nomimage" BORDER="0" WIDTH="X" HEIGHT="X"></A>
Un lien sur une image avec une bulle d'information c'est :
<A HREF="[Link] SRC="nomimage" BORDER="0"
WIDTH="X" HEIGHT="X" ALT="votre texte pour information"></A>
TIC Bac Sc Info
Polices :
Définir la couleur pour votre texte c'est : <FONT COLOR="couleur">votre texte</FONT>
Définir la taille de votre police c'est : <FONT SIZE="votre taille de 1 à 7">votre texte</FONT>
Définir le type de votre police c'est : <FONT FACE="type de police">votre texte</FONT>
Page :
Définir un couleur au fond de la page c'est : <BODY BGCOLOR="couleur">
Définir une image au fond de la page c'est : <BODY Background="chemin d’image">
Liens (Bonus) :
Définir la couleur de vos liens c'est (code à mettre entre les balises <HEAD> et </HEAD>)
<style TYPE="text/css">
A:link {color: #0000FF}
A:visited {color:#000082}
A:hover {color:#FF0000}
</style>
Les listes :
Liste ordonnée : <OL type= "1|A|a|I|i ">
Liste non ordonnée : <UL type= " Disc|square|circle ">
Liste de description :<DL>
<H4> Les types scalaires </H4>
<UL>
<LI> Entier </LI>
<LI> Caractère </LI>
<LI> Booléen </LI>
<LI> Le type énuméré </LI>
</UL>
<H4>Les fonctions pour un type énuméré </H4>
<OL>
<LI> Ord </LI>
<LI> Succ </LI>
<LI> Pred </LI>
</OL>
<H4> Lexique</H4>
<DL>
<DT>A</DT>
<DD>Array Abs Access </DD>
<DT>B</DT>
<DD>Bit Byte Boolean</DD>
<DT>C</DT>
<DD>Com cos chr char </DD>
</DL>
TIC Bac Sc Info
Formulaires :
Insérer un formulaire commence toujours par le placement de :
<FORM METHOD="POST/GET" ACTION="nompage" name="nomformulaire" >
Ici vos champs de choix.
</FORM>
Les différents champs (à mettre entre les balises <FORM> et </FORM> sont:
Champ de ligne simple :
<INPUT TYPE="text" NAME="sonnom" SIZE="25" MAXLENGTH="50" VALUE="Entrez ici votre
nom">
Entrez ici votre nom
Champ de mot de passe :
<INPUT TYPE="Password" NAME="sonnom" SIZE="25" MAXLENGTH="50" VALUE=" ">
***********
Champ multi-lignes :
<TEXTAREA NAME="son adresse" ROWS="3" COLS="25" > Tapez votre commentaire…
</TEXTAREA>
Tapez votre commentaire…
Une liste déroulante :
<SELECT NAME="choix" SIZE="1">
<OPTION VALUE=" choix1" selected>choix1</OPTION>
<OPTION VALUE=" choix2">choix2 </OPTION>
<OPTION VALUE=" choix3">choix3</OPTION>
</SELECT>
CHOIX1
Autre option de select : disabled et multiple
Des boutons radio :
<INPUT TYPE="radio" NAME="Nom" VALUE="Valeur">
Des cases à cocher :
<INPUT TYPE="checkbox" NAME="Case coché" VALUE="Création de site">
Options pour les radios et les cases à cocher : checked
Un bouton d'envoi : <INPUT TYPE="submit" NAME="Submit" VALUE="Envoyer">
Envoyer
Un bouton d'envoi : <INPUT TYPE="reset" NAME="reset" VALUE="Rétablir">
Rétablir
Un champ de fichier : <INPUT TYPE="file" NAME="fichier" VALUE="Envoyer">
choisissez un fichier
aucun fichier choisi
TIC Bac Sc Info
Les jeux des cadres :
exemple 1 :
<FRAMESET ROWS="20%,80%">
<FRAME SRC="[Link]" NAME="haut">
<FRAME SRC="[Link]" NAME="bas">
</FRAMESET>
exemple 2 :
<FRAMESET COLS="20%,80%">
<FRAME SRC="[Link]" NAME="gauche">
<FRAME SRC="[Link]" NAME="droite">
</FRAMESET>
exemple 3 :
<FRAMESET ROWS="20%,80%"> Cadre1
<FRAME SRC="[Link]" NAME="cadre1">
<FRAMESET COLS="50%, 50%">
<FRAME SRC="[Link]"NAME="cadre2 ">
Cadre2 Cadre3
<FRAME SRC="[Link]"NAME="cadre3 ">
</FRAMESET>
</FRAMESET>
Les attributs de FRAMESET :
Rows (Cadre horizontal) : Cols (Cadre vertical) : pourcentage (entre 1 et 100) ou valeur en
pixels en fixant une seules des valeurs et en donnant à l'autre la valeur *, la valeur s'ajuste
automatiquement (Cols="110,*")
Frameborder="YES|NO" : Indique si le cadre a une bordure ou non
Border=n : n est une valeur définissant la taille de la bordure
Bordercolor="couleur" : Indique la couleur de la bordure
Framespacing=n : n est une valeur définissant l'espace entre les cadres
Les attributs de FRAME :
Src ="URL" : Définit l'emplacement de la page à afficher dans le cadre
Name="nom" : Définit un nom qui permettra d'afficher un autre document dans le cadre grâce à
l'attribut Target
Frameborder="YES|NO" : Indique si le cadre a une bordure ou non
Border=n : n est une valeur définissant la taille de la bordure
Noresize : Interdit à l'utilisateur de redimensionner les cadres (Ce n'est pas la valeur par
défaut)
Scrolling="YES | NO |AUTO" : Permet ou non l'affichage d'une barre de défilement (Auto laisse le
navigateur décider de son utilité)
