0% ont trouvé ce document utile (0 vote)
25 vues10 pages

Commandes HTML Essentielles et Propriétés

Le document présente les commandes HTML essentielles, y compris les balises fondamentales, la mise en forme du texte, les propriétés des images et des liens. Il fournit également des exemples d'utilisation et des instructions pour créer des listes, des styles et des images mappées. Enfin, il aborde les propriétés de style pour personnaliser l'apparence des éléments HTML.

Traduit par

ScribdTranslations
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)
25 vues10 pages

Commandes HTML Essentielles et Propriétés

Le document présente les commandes HTML essentielles, y compris les balises fondamentales, la mise en forme du texte, les propriétés des images et des liens. Il fournit également des exemples d'utilisation et des instructions pour créer des listes, des styles et des images mappées. Enfin, il aborde les propriétés de style pour personnaliser l'apparence des éléments HTML.

Traduit par

ScribdTranslations
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

COMMANDES HTML

(Prof. Ivaldi Giuliano)

TAG fondamentaux

<HTML> </HTML> , début et fin du document html


<HEAD> </HEAD> , début et fin de l'en-tête
<TITLE> </TITLE> début et fin du titre affiché sur la « barre de titre » d'Internet Explorer utile pour se rendre
«visible» aux moteurs de recherche et doit donc être inséré dans chaque document HTML que l'on crée
<BODY> </BODY> , début et fin du corps du site
<!-- commentaire --> , code pour insérer un commentaire

Mise en forme du texte

<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

<HR> , dessine une ligne et insère un saut de page


WIDTH=”numero” , largeur ; format numéro : "num %" par rapport à la fenêtre,
n° pixel (max 550-600 pixel)
ALIGN="tipo" , alignement (type : GAUCHE, CENTRE, DROITE)
SIZE=”numero” , dimension de ligne
COLOR=”#cod colore” , colorazione

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

BGCOLOR="#cod couleur" , colorez l'arrière-plan avec "code couleur"


BACKGROUND=”percorso/nome immagine” , mettez "nom d'image" comme arrière-plan
TEXT=”#cod colore” , colore tout le texte du site avec « code couleur »
LINK=”#cod colore” , link non evidenziato
ALINK=”#cod colore” , lien mis en évidence
VLINK=”#cod colore” , lien visité
Es.
<BODY BGCOLOR="#0000FF"> , colorie l'arrière-plan en bleu
<BODY BACKGROUND=”images/[Link]”> , mets "[Link]" comme fond
<BODY TEXT=”YELLOW”> , colore tout le texte du site en jaune
<BODY BGCOLOR=”WHITE” LINK=”#0000FF” ALINK=”#FF0000” VLINK=”#00FFFF”>
colora di bianco lo sfondo e dà i colori ai Link normali , quelli evidenziati (Attivi) e quelli Visitati (i colori indicati sono
quelli standard bleu, rouge et vert)

Propriété FONT

COLOR=”#cod colore” , colore le texte suivant avec “#code couleur”


TAILLE="n° dimension" , modifie la taille du texte suivant
FACE=”tipo font” , modifie la police du texte suivant
tipi de police Microsoft : Arial, sans-serif (sans-serif signifie « sans empattement »)
Verdana,sans-serif
Trebuchet MS,sans-serif
Georgia, serif (serif signifie « avec grâce »)
(si je veux utiliser les polices dans un document, je dois utiliser des feuilles de style)
<SMALL> </SMALL> , début et fin en petits caractères

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

<FONT FACE="Georgia,serif" SIZE= "5"> , définissez la police et ses dimensions

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

<UL> </UL> , début et fin de la liste non ordonnée


<OL> </OL> , début et fin de la liste ordonnée
<MENU> </MENU> début et fin d'une liste de brèves entrées, qui occupe généralement une seule ligne,
visualisé de manière beaucoup plus compacte que dans l'instruction <UL>
<DIR> </DIR> début et fin d'une liste d'éléments très brefs, par exemple des noms de fichiers,
possiblement affichés sur plusieurs colonnes
<LI> identifie une voix de la liste
<UL TYPE=”tipo punto elenco”> , définit le type de puces (types : SQUARE, CIRCLE, DISC qui est le prédéfini)
che cependant ne font pas partie de la norme HTML officielle
<OL TYPE="type de liste ordonnée" START="élément de départ">
déf. le type de tri de la liste (TYPE) et à partir de quel élément du tri commencer (START)
tipi ordinamento: “i” nombres romains minuscules
Je nombres romains en majuscules
«a» lettres de l'alphabet minuscules
«A» lettres de l'alphabet majuscules
«1» numéros (par défaut)
il suffit d'insérer l'élément à partir duquel on veut partir
<DL> </DL> , début et fin de la liste type glossaire
<DT> Termine <DD> Definizione identifiant le terme et la définition du mot

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

<A HREF="[Link] Nom du lien </A>


crée un lien nommé "Nom du lien" qui pointe vers l'adresse contenue dans la balise

<A HREF="malto:indirizzo_e-mail"> indirizzo_e-mail </A>


créez un lien vers l'adresse e-mail contenue dans la balise (lorsque vous cliquerez dessus, un e-mail s'ouvrira avec
l'adresse de destination déjà préparée avec celle indiquée dans le tag)

<A HREF="percorso/nome_file.html"> Nom du lien </A>


crée un lien nommé « Nom Lien » qui pointe vers la page html contenue dans la balise

<A HREF="percorso/nome_fichier_audio"> Nom du lien </A>


créez un lien nommé "Nom du lien" qui pointe vers le fichier audio contenu dans la balise

Oss : si le lien est interne à la même page, la syntaxe sera la suivante


<A HREF="#nome_ancora_da_raggiungere"> Nom du lien </A>
et là où l'on voudra insérer l'ancres, qui ne sera pas visible, on tapera
<A NAME="nom_ancre"></A>

si dans la balise <A HREF…> on ajoute l'attribut -> TARGET=”nome_bersaglio”


le "contenu" vers lequel le lien pointe sera chargé dans le cadre "nom_cible" et non dans celui qui contient le lien lui-même :
cela peut être utile lors de l'utilisation d'un cadre de menu qui reste fixe et où la partie restante de la page varie (pour
je cadre lire le paragraphe relatif plus loin)

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] mariorossi@[Link] </A>


créez un lien vers l'adresse e-mail de M. Rossi (quand on cliquera dessus, un e-mail s'ouvrira avec
l'adresse de destination de M. Rossi

<A HREF="[Link]" TARGET="right"> Mises à jour </A>


Dans cet exemple, on suppose que deux cadres ont été créés, l'un nommé « gauche » dans lequel le lien est inséré et l'autre de
nom "right" dans lequel le contenu de [Link] ira

<A HREF="[Link]"> Volare </A>, crée un lien nommé "Volare" qui pointe vers la chanson volare

<A HREF="#sezione_lettura"> Nom du lien </A>


...code HTML...
<A NAME="sezione_lettura"></A>

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 :

subito dopo <TITLE> inserire


<CARTE NOM="barra">
<ZONE FORME="RECT" COORDS="49,15,179,130" HREF="[Link]">
<ZONE FORME="RECTANGLE" COORDONNÉES="211,15,345,130" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="380,15,510,130" HREF="[Link]">
<ZONE FORME="RECT" COORDS="544,15,676,130" HREF="[Link]">
…d'autres coordonnées et d'autres connexions…
</CARTE>

là où l'on veut insérer la barre dans la page, insérer


<IMG SRC="images\link_mappati.jpg" ALIGN="CENTER" WIDTH="722" HEIGHT="120" USEMAP="#barra">

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

Ils servent à définir les styles (comme ceux de Word)

<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

<TABLE> </TABLE> , début et fin de gestion de table


BGCOLOR=”#cod colore” , définit la couleur de fond du tableau
BORDER=”numero” , définit les dimensions de la bordure du tableau, '0' pour rendre le
table invisible
LARGEUR="numero" définit la largeur de la table
formato numero : "num%" par rapport à la fenêtre ou
« n° pixel » (max 550-600 pixels)
le deuxième format permet de fixer les dimensions
HEIGHT=”numero” indique la hauteur à laquelle la table sera placée
VALIGN="tipo" , alignement vertical (types : HAUT, MILIEU, BOTTOM)
ALIGN="tipo" , alignement horizontal (types : GAUCHE, DROITE, CENTRE)
CELLPADDING="n° pixel" , indique la distance des bords du contenu
CELLSPACING="n° pixel" indique la distance qui devra exister entre les bordures des cellules
COLSPAN="numéro" , permet de créer des cellules qui occupent plusieurs colonnes
ROWSPAN="numéro" , permet de créer des cellules qui occupent plusieurs lignes
<TR> , mise en forme des lignes (Table Row)
<TD> formatage des cellules (Données du tableau)

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 »

• <TABLE BORDER="2" WIDTH="100%" CELLPADDING="5" CELLSPACING="10" BCOLOR="#CCEEDD">


<TR>
<TD VALIGN="MIDDLE" ALIGN="CENTER"><FONT SIZE="4"> texte case 1, ligne 1 </FONT></TD>
<TD VALIGN="BAS" ALIGN="DROITE" WIDTH="150" ROWSPAN="2">
<FONT SIZE="4"> texte cellule 2 , ligne 1 </FONT></TD>
</TR>
<TR>
<TD HEIGHT="100" VALIGN="MIDDLE" ALIGN="FULL"><FONT SIZE="4"> texte cellule 1, ligne 2 </FONT></TD>
</TR>
<TR>
<TD COLSPAN= "2" BGCOLOR="#FFFFBB"> texte cellule 1 , ligne 3 </FONT></TD>
</TR>
</TABLE>

Propriétés disponibles <TABLE> <TR> <TD>

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

Les cadres nécessitent un fichier dédié (Ex. [Link])

<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

<CADRE> , balise dans laquelle inclure les propriétés suivantes


SRC="nom_page.html" , indique quelle page html devra contenir le cadre
NAME=”nome_frame” , utile si besoin de relier les cadres
MARGINWIDTH="n° pixel" , distance du bord vertical au texte
MARGINHEIGHT=”n° pixel” distance du bord horizontal du texte
DÉFILEMENT="AUTO" , définit s'il faut ajouter les barres de défilement
(seul AUTO,OUI,NON)
PAS DE REDIMENSIONNEMENT , pour empêcher l'utilisateur de modifier les dimensions du cadre
FRAMEBORDER=”numero” , indique la taille de la bordure du cadre ("0", pas de bordure)
BORDERCOLOR=”#cod colore” donne de la couleur à l'éventuelle bordure 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

<FORM> </FORM> , début et fin de la gestion du formulaire


ACTION="mailto: adresse_e-mail" , indique au navigateur à quelle adresse envoyer le formulaire
METHOD=”POST” , indique au navigateur d'envoyer le formulaire par e-mail

<ENTRÉE> , insère des objets (champs de texte, boutons,…) dans le formulaire


TYPE="texte" , insère une zone de texte
TYPE="motdepasse" zone de texte pour les mots de passe (avec des astérisques)
TYPE="radio" insère un bouton radio (case avec un point)
TYPE="case à cocher" , insérer une case à cocher (case à cocher)
TYPE=”submit” , insère un bouton d'insertion
TYPE=”reset” , insérez un bouton de réinitialisation
NAME=”nome” , nom de la zone de texte
SIZE=”num_caratteri” , dimensionner la largeur de la case en nombre de caractères
VALUE=… , valeur renvoyée par l'objet sélectionné sur le formulaire
VÉRIFIÉ , par bouton radio et case à cocher sélectionnés par défaut

<SELECT NAME="nom"> gestion des menus déroulants


<OPTION VALUE=”1°nome”>1°testo da inserire</OPTION>
<OPTION VALUE="2°nome" SELECTED>2°texte à insérer</OPTION>
……
</SÉLECTIONNER>

<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.

Utilisateurs expérimentés : Quelques commandes JAVASCRIPT simples et utiles

Qu'est-ce que Javascript ?


JavaScript offre un moyen d'améliorer encore le design et la fonctionnalité des pages web.
Il faut d'abord faire attention à ne pas confondre Java, un langage de programmation, avec JavaScript, un langage de
scripting ; trop souvent en effet, on utilise les deux termes de manière interchangeable. Java a été développé par Sun Microsystems comme
langage de programmation indépendant de la plateforme pour les ordinateurs, pour la création de petites applications, ou "applet", qui
ils pourraient faire partie d'une page web et être un programme autonome pour le bureau. Les applets Java sont comme de petits programmes
indépendants, qui peuvent être utilisés sans les voir ou s'en préoccuper.
À l'origine appelé "LiveScript", JavaScript a été développé par Netscape comme quelque chose de très différent. C'était
renommé en raison des similitudes structurelles avec le langage de programmation Java. Pour créer JavaScript, il vous suffit de taper les
vos commandes insérées dans votre HTML et le navigateur suit les commandes tout en essayant de formater la page web.

Commandes simples

• Faire apparaître une fenêtre "d'alerte" sur un lien


<a href="#dummy_anchor" onClick=alert('Testo dell\’ alert')">texte du lien</a>

• Modifier le message associé à un lien affiché dans la barre d'état


<a href="[Link]" onMouseOver="[Link]='texte du message
personnalisé'; return true">texte du lien</a>

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

• Ouvrir une image dans une autre fenêtre


<a href="#dummy_anchor" onClick="[Link]('nome_file_img.est', 'nome_finestra', 'toolbar=no,
directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no,
width=dimXXpixel, height=dimYYpixel,
mia immagine

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

screenX,screenY ne fonctionnent que pour le navigateur NetScape version 4.0


left et top ne fonctionnent que pour le navigateur Internet Explorer version 4.0

10

Vous aimerez peut-être aussi