Commandes HTML Essentielles et Propriétés
Commandes HTML Essentielles et Propriétés
TAG fondamentaux
<H1> </H1> début et fin d'en-tête de niveau 1 (peut aller jusqu'au niveau 6)
<P> , début de paragraphe en sautant une ligne
<P ALIGN="tipo"> , début du paragraphe avec alignement type (GAUCHE, CENTRÉ, DROITE)
<BR> , début de paragraphe sans sauter de ligne
<BR CLEAR=ALL> , interruption de paragraphe
<PRE></PRE> , permet de reproduire chaque espace et chaque retour à la ligne tapés dans la programmation,
aussi dans la fenêtre du navigateur
<B> </B> , début et fin en gras
<I> </I> , début et fin italique
<U> </U> , début et fin de soulignement
<CODE> </CODE> début et fin du caractère type machine à écrire
<CENTER> </CENTER> , début et fin alignement centré
<SUP> </SUP> , début et fin de guillemet
<SUB> </SUB> , début et fin de pied de page
<STRIKE> </STRIKE> , début et fin texte barré
Oss :
• "/" indique la fin d'une balise
• les lignes vides dans le bloc-notes ne sont pas affichées par le navigateur (si vous souhaitez les considérer, vous devez utiliser la balise <PRE>)
• les options (ex. BGCOLOR) sont ajoutées aux balises (ex. BODY) et en modifient l'effet
• pour ajouter des caractères spéciaux, on utilise le format : &#cod-ASCII
• avant de fermer le site, ajoutez la date, l'heure de la dernière mise à jour et le nom et le prénom du propriétaire du site
avec une adresse e-mail éventuellement sous forme de lien
Proprietà HR
Es.
<HR WIDTH="50%" ALIGN="gauche" SIZE="2" COLOR="bleu">
inserisce un filetto orizzontale di larghezza “50%” sulla grandezza della finestra lo allinea a sinistra con dimensioni carattere
«2» et il le colore en bleu
1
Propriété BODY
Propriété FONT
Es.
<FONT COLOR="Jaune"> </FONT> , début et fin de coloration du texte avec le jaune
<FONT SIZE="6"> </FONT> , début et fin de la modification des dimensions de la police
CODE COULEURS
Les couleurs peuvent être saisies par leur code ou par leur nom en anglais.
BLANC NOIR ROUGE VERT BLEU
#FFFFFF #000000 #FF0000 #00FF00 #0000FF
MAGENTA CYAN JAUNE AQUAMARINE VERT FONCÉ
#FF00FF #00FFFF #FFFF00 #70DB93 #2F4F2F
BLEU CLAIR VERT CLAIR ORANGE ROSE CIEL D'ÉTÉ
#C0D9D9 #32CD32 #E47833 #BC8F8F #236B8E
TURQUOISE VIOLET Chardon VERGE D'OR Bordeaux
#ADEAEA #4F2F4F #D8BFD8 #DBDB70 #8E236B
LIGHTEST GREY LIGHTER GREY MEDIUM GREY DARKER GREY DARKEST GREY
#DDDDDD #A8A8A8 #545454 #454545 #333333
2
Commandes listes
Es.
<P> Composants fondamentaux d'un ordinateur
<OL TYPE="I">
<LI> CPU
<UL>
CU
ALU
</UL>
<LI> Mémoire centrale
<UL>
<LI> RAM
ROM
</UL>
<LI> Dispositifs d'entrée/sortie
<UL>
<LI>Dispositifs d'entrée
<LI>Dispositifs de sortie
Dispositifs d'Entrée/Sortie
<UL>
<LI>Mémoires de masse (Disque dur, Disquette, CD, DVD>
</UL>
</UL>
</OL>
<P> Glossaire
<DL>
<DT>CPU <DD> Central Processing Unit
<DT>CU <DD> Control Unit
<DT>ALU <DD> Arithmetic Logic Unit
<!-- Commentaire : le glossaire continue… -->
</DL>
3
Comandi Ancore ovvero i Link
Es.
<A HREF="[Link] Virigilio moteur de recherche </A>
créez un lien nommé « Virgilio moteur de recherche » qui pointe vers l'[Link]
<A HREF="[Link]"> Volare </A>, crée un lien nommé "Volare" qui pointe vers la chanson volare
4
Propriétés IMG - Commandes d'images
<IMG>
SRC="chemin/nom_image" , indique quelle image doit être téléchargée
ALT=”titolo immagine” , affichera le titre de l'image pendant le chargement, utile aussi pour
indexer l'image et la rendre "visible" aux moteurs de recherche
LARGEUR="n° pixel" , largeur de l'image
HAUTEUR="n° pixel" , altezza immagine
HSPACE="n° pixel" espace horizontal laissé autour de l'image
VSPACE=”n° pixel” espace vertical laissé autour de l'image
ALIGN="tipo" , alignement (type : HAUT, MILIEU, BAS, GAUCHE, DROITE)
Oss :
• Internet Explorer : les propriétés de l'image peuvent être obtenues en cliquant avec le bouton droit sur l'image
Netscape : affiche les dimensions de l'image si elles sont chargées dans la fenêtre du navigateur.
Les dimensions en pixels sont affichées sur la barre de menus
• <BR CLEAR=ALL> , interruption de paragraphe (par exemple, ce qui suit est positionné sous l'image et non à côté)
Es.
<IMG SRC=”images/[Link]” ALIGN=”right” ALT=”Titolo dell’immagine”>
insérez l'image "[Link]" présente dans le dossier "images" et alignez-la à droite du texte qui suit, en introduisant
pendant la phase de chargement de l'image, une brève description
Images mappées
Ce sont des liens représentés par des images graphiques et ils constituent une aide précieuse aux simples liens textuels, utiles néanmoins pour se rendre compte.
«visibles» aux moteurs de recherche.
Pour les réaliser, suivre les étapes suivantes :
- construire avec un programme de graphisme (ex. paint) la barre des images-liens et noter les coordonnées en pixels fournies
du programme lui-même, des angles en haut à gauche et en bas à droite de chaque image insérée dans la barre juste
réalisée, qui doit commencer aux coordonnées 0,0
- ajouter dans la page/fichier html où vous souhaitez créer la barre de lien le code html suivant :
Oss : - les coordonnées de COORDS sont des exemples comme les fichiers html de HREF, le nom et le chemin de la barre
"images\link_mappati.jpg" et toutes les valeurs des autres attributs.
- le nom indiqué par USEMAP doit coïncider avec celui donné à la barre dans <MAP NAME> auquel on ajoute devant le “#”
- les autres options de forme en plus de rect sont cercle et polygone
- en insérant, avant coords, l'option ALT="nom" on donne un nom à l'image qui sera affiché en passant dessus
avec la souris
5
Propriétés de STYLE - Les feuilles de style
<STYLE TYPE="text/css">
<!-
.nome_stile { proprietà1: modifica proprietà1; proprietà2: modifica proprietà2;…}
->
</STYLE>
Es.
<STYLE TYPE="text/css">
<!-
.caractère {famille-de-police: Arial; fond: jaune clair; couleur: vert foncé; taille_de_police: 14 px; alignement_du_texte: centre; marge-
gauche: 5em }
->
</STYLE>
Oss :
• Les commandes précédentes doivent être mises dans l'en-tête (HEAD)
• Entre le nom_style et l'accolade, il faut une tabulation
• Les propriétés insérées dans la commande sont des exemples
• La première et la dernière ligne servent à cacher la commande aux vieux navigateurs Web
• Pour rappeler le style défini : <P CLASS="nome_stile"> , Es. <P CLASS="caractère">
Dans un tableau, on appellera dans les balises <TR> et <TD>
S'il faut utiliser un style uniquement dans un certain contexte (par exemple, à l'intérieur d'une phrase), on peut utiliser la commande suivante :
<SPAN STYLE="propriété à modifier: modification"> Texte à modifier </SPAN>
Es.
<SPAN STYLE=”background: lightblue”> Testo da modificare </SPAN>
6
Propriétés TABLE - Commandes de tableaux
Es.
• <TABLE WIDTH="50%" HEIGHT="100" BORDER="2" BGCOLOR="jaune">
<TR VALIGN="center" ALIGN="center">
<TD><FONT SIZE="4" FACE="Georgia,serif" COLOR="blue"> Texte du tableau </FONT></TD>
</TR>
</TABLE>
créez une table de largeur "50 %" par rapport à la taille de la fenêtre, de hauteur "100", bord "2" et couleur de fond "jaune" puis
formatez les lignes et leur alignement avec <TR> et enfin formatez les cellules avec la balise <TD> en définissant la police des caractères
une « Georgia, serif » de taille « 4 » et couleur « bleu »
BGCOLOR Si Si Si
BORDE Si Non Non
WIDTH Si Non Si
HAUTEUR Si Si Si
VALIGN Non Si Si
ALIGNER Non Si Si
CELLULES DE REMPLISSAGE
Si Non Non
ESPACEMENT DES CELLULES
Si Non Non
COLSPAN Non No Si
ROWSPAN Non Si Non
7
Propriétés FRAME
<FRAMESET RANGS="n° pixel, *, *,…" indique la dimension de l'image en nombre de pixels de hauteur et ensuite divise la
partie restante de la page en plusieurs parties égales au nombre des astérisques
<FRAMESET COLS="n° pixel, *, *,…"> , indique la taille du cadre en nombre de pixels de largeur, puis divise
la partie restante de la page en plusieurs parties égales selon le nombre d'astérisques
</FRAMESET> , s'insère à la fin de la définition du cadre
<NOFRAMES> </NOFRAMES> , début et fin de commande pour gérer les navigateurs qui ne supportent pas les frames
(contenu dans un frameset) utile pour se rendre « visible » aux moteurs de recherche
fournissant une description complète du site et une liste des liens des
sue pages principales
CIBLE="nom_bersaglio" , tale attributo già visto nella sezione “link” permette di selezionare il
frame (-> "nome_bersaglio") de destination d'un certain lien
<BASE TARGET="nome_frame"> , inséré dans la section <HEAD> crée une destination par défaut,
“nome_frame”, pour tous les liens présents sur la page HTML sans
doit être plus spécifique pour chaque lien à moins que les liens ne
doivent viser un cadre différent de celui par défaut
TARGET=”_top” , à insérer dans tous les liens sortants du site si l'on souhaite supprimer le frameset
Oss :
• La balise FRAMESET doit contenir un nombre de balises FRAME égal au nombre de cadres définis.
• Si je veux définir un cadre à l'intérieur d'autres cadres, je n'ai qu'à remplacer la balise FRAME par une autre balise FRAMESET qui sera équipée de
son retour de tag FRAME
• Naturellement, la propriété SRC ne fonctionne que si les fichiers indiqués par "nom_page" existent.
Es.
<HTML>
<HEAD><TITLE>Prova comandi frame</TITLE></HEAD>
<FRAMESET COLS="200, *">
<FRAME SRC="[Link]" NAME="left" SCROLLING="AUTO" NORESIZE FRAMEBORDER="1">
<CADRE SRC="[Link]" NOM="droite" DÉFILEMENT="AUTO" NONREDIMENSIONNER BORDCADRE="1">
</FRAMESET>
</HTML>
8
Propriété FORM
<TEXTAREA> </TEXTAREA> crée une zone de texte déroulante (par exemple, commentaires)
NAME=”nome” , nom de la boîte de texte
ROWS=”n° righe” définit le nombre de lignes
COLS=”n° colonne” définit le nombre de colonnes
WRAP , active le retour à la ligne automatique
Es.
<FORM ACTION="[Link]
<PRE>
Nome : <INPUT TYPE=”text” NAME=”nome”>
Sexe : Masculin <INPUT TYPE="radio" NAME="sesso" VALUE="maschio">
Femme<INPUT TYPE="radio" NAME="sesso" VALUE="femme">
Email : <INPUT TYPE=”text” NAME=”email”>
Commenti : <TEXTAREA NAME=”commenti”></TESTAREA>
</PRE>
</FORM>
Il est à noter que les étiquettes des zones de texte Nom, Email et Commentaires apparaîtront, grâce à la commande <PRE>, égale
pari dans la page affichée par le navigateur
9
Je tag META c'est-à-dire comment se rendre visible aux moteurs de recherche
En plus des conseils éparpillés ci-dessus, pour se rendre visible aux moteurs de recherche, on peut utiliser les balises META. Tout d'abord, il faut décider lesquelles.
ce sont les mots-clés du site et essayer de vérifier leur utilisation sur Internet à l'aide d'un des sites prévus à cet effet (ex.
[Link]). Après avoir décidé quelles mots-clés utiliser, on passe à les insérer dans le site via la balise META qui sera
trascritto dans la page d'index juste après <TITLE> de la manière suivante :
<META NAME = "keywords" CONTENT="Insérer, ici, les, mots, clés, séparés, par, des, virgules>
de plus, un deuxième tag META sera inséré avec la description synthétique du site (max 200 caractères)
<META NAME = ”description” CONTENT = “Descrizione sintetica max 200 caratteri”>
Ce travail peut être répété pour toutes les pages du site, avec des mots-clés et des descriptions différents.
Commandes simples
oss : Les deux événements onClick et onMouseOver peuvent être insérés en cascade dans la même balise HREF.
#ancre_fausse c'est une ancre fictive qui doit être insérée juste au-dessus de la ligne HTML en question,
pour éviter que le navigateur ne saute à une page indésirable
oss : toolbar=yes/no affichez les boutons du navigateur (avant, arrière, accueil, imprimer, etc.)
adresse affiche le champ qui montre l'URL pour la fenêtre actuelle
répertoires affichez les boutons de répertoire d'autres navigateurs web
status affiche la barre d'outils du navigateur en bas
menubar afficher la barre de menu du navigateur web
redimensionnable permettre aux utilisateurs de changer la taille de la fenêtre
barres de défilement fournit des barres de défilement si le contenu est plus large que la fenêtre
largeur=XX spécifiez la largeur de la fenêtre, en pixels
height=YY spécifiez la hauteur de la fenêtre lorsqu'elle est ouverte, en pixels
screenX, screenY, gauche et haut fixent l'angle en haut à gauche de la fenêtre
10