Forums d'entraide informatique - Astuces - Conseils

Admin · 10-08-2008 17:48:43

Introduction à l'HTML

Première Partie : Les paragraphes

Aligner un paragraphe Pour formater l'alignement d'un paragraphe, on utilise trois paramètres:

<p align=left> ce texte sera à gauche</p>
<p align=center>ce texte sera au centre</p>
<p align=right>ce texte sera à droite</p>

Pour délimiter la fin du paragraphe, on met le marqueur de fin </p>. Ceci est valable pour la plupart des instructions: <l'instruction>le texte</l'instruction> fin. Ces paramètres sont aussi valables pour les images, les tableaux, etc.

ex: <img align="center"> (une image)
<table align="left"> (un tableau)

Mettre en place un retrait Une autre façon de traiter l'alignement consiste à effectuer un retrait à l'aide de l'instruction <BLOCKQUOTE>.
Plus vous mettez de fois cette instruction plus le paragraphe sera décalé.

exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple exemple

Retour à la ligne Vous aurez évidemment besoin de créer un retour à la ligne: l'instruction est <BR>
pas besoin de marqueur de fin. ( pas de </br> )

<center>Et pour centrer facilement...</center>

Les cours :

Deuxième Partie : Les liens

Insérer un lien

<A HREF="http://l'addresse.internet.du.lien(l'URL)">Ici tapez le tire du lien que les visiteurs vérons ( bleu et souligné)</A>

Maintenant d'autres types de lien :

Lien avec légende

On peut faire des liens qui inscrivent un message ou texte dans la barre d'état(celle d'en bas pour les zéros):
En voici un exemple !

Le code: <A HREF="#" onMouseOver="self.status='Le lien est prêt à être cliqué'; return true" onMouseOut="self.status='Cliques sur le lien!'; return true"> En voici un exemple !</A>

Pour afficher une légende près du lien (laisser le curseur dessus ):
<A href="url.htm" title="Le texte inscrit s'affichera en légende !>
exemple

Lien vers une nouvelle fenêtre (popup)

# On peut faire des liens qui ouvrent une popup (petite fenêtre): Clique ici pour tester !
Le code: <a href="#" onclick="window.open('fichier.htm', 'popupnav', 'width=600,height=400,resizable=no,scrollbars=yes');">click here !</a>

# Et pour simplement ouvrir une nouvelle fenêtre:Exemple
Le code: <a href="site.htm" target="_blank">texte</a>

# Voici un lien qui ouvre la page en plein écran , pratique pour un lien vers une image haute résolution: click here !(Alt+F4 pour fermer la fenêtre)
Le code: <a href="#" onclick="window.open('index4.shtml', 'big', 'fullscreen=yes');">clique ici !</a>

Lien vers une adresse email On peut faire un lien vers une adresse e-mail ! Mail!
Le code: <A HREF="mailto:webmaster@votre fournisseur.fr?subject:Salut!">Mail!</A>

Lien vers un point précis d'une page Une ancre peut être créée pour qu'un lien pointe une partie précise d'une page web:
<A NAME="?">
? sera remplacé par un nom qui identifiera une partie de page.
exemple: haut
Le lien qui dirigera vers cette ancre sera du type:
<a href="#haut">lien</a>

Autres liens utiles

On peut faire beaucoup de choses encore...
href="javascript:scroll(0,0)"
= pour revenir en début de page

href="javascript:window.external.AddFavorite('http://votre.site.web.fr/',%20'Le%20site%20de%20le.nom.de.votre.site !')"
=pour ajouter le site aux favoris

href="javascript:window.print()"
=pour imprimer la page

href="javascript:history.back()"
=pour aller à la page précédente

href="javascript:location.reload()"
=pour actualiser la page (window.location.reload())

target="_top" = pour ouvrir la page sur l'écran entier et non pas dans un cadre
target="_parent" = pour ouvrir la page dans le 'frame' parent
target="_self" = pour ouvrir la page dans le même cadre (par défaut)

PS: Pour que vos visiteurs puissent télécharger un fichier, faîtes un simple lien vers celui ci !

Troixième Partie : Les Images

Couleur des liens On peut y définir la couleur des liens, du texte et du fond de la page:

<body link="#rrggbb">
= couleur d'un lien non encore visité

<body alink="#rrggbb">
= couleur d'un lien activé

<body vlink="#rrggbb">
= couleur d'un lien visité

Image et couleur de fond <body background = "back.jpg">
= pour définir l'image de fond
+ "bgProperties=fixed" est à insérer pour une image immobile

<body bgcolor = "black">
= pour définir la couleur de fond

Couleur du texte <body text = "white">
= pour définir la couleur du texte

Un message dans la barre d'état <body onmouseout="window.status='Message ici';">
= pour afficher un message dans la barre d'état

Un message au chargement de la page <body onload = "alert('Message d'arrivée.')">
= pour afficher un message au chargement (onload) ou au "déchargement" (onunload).

Supprimer les marges <BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
= pour supprimer les marges de la page

Les metas tags Les balises métas (META TAGS) se placent entre <head> et </head>. Voici les principales:

<meta name="title" content="Le titre de la page en moins de dix mots">
<meta name="description" content="La description complète de la page en moins de 200 mots.">
<meta name="keywords" content="la, liste, de, mots-clés, séparés, par, des, virgules (et en écrivant le même mots avec plusieurs orthographes: majuscules, minuscules, fautes mais pas plus de cinq fois le même mot)">
<meta name="owner" content="vous@yourprovider.com">
<meta name="author" content="votre nom">
<META NAME="language" content="fr">

Quatrième Partie : Codes en vrac

Astuces concernant les liens
Liens légendé... Lien vers une nouvelle fenêtre... Lien vers une petite fenêtre (popup)... Plein écran... Lien vers une adresse email... Lien vers le début de page... Lien de téléchargement de fichier... Lien ajouter le site aux favoris... Lien imprimer la page... Lien page précédente... Sortir des frames...

Légende d'une image
<img alt = "La légende" src = "image.jpg">

Un message dans la barre d'état
<body onmouseout="window.status='Message ici';">

Un message au chargement de la page <body onload = "alert('Message d'arrivée.')">

Supprimer les marges
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

Pour faire défiler horizontalement un message...
<marquee border="1" bgcolor="#000000" style="font-family: monospace; color: rgb(255,0,0)" width="200" height="18" align="middle">Vous pouvez mettre un long message qui défile...</marquee>

Pour que la fenêtre se ferme automatiquement...
<BODY OnLoad='compt=setTimeout("self.close();",5000)'>

Un menu déroulant pour naviguer...
<FORM NAME="liste1">
<SELECT NAME="choix">
<OPTION VALUE="http://www.serveur.com/rep/choix1">choix un
<OPTION VALUE="http://www.serveur.com/rep/choix2">choix deux
<OPTION VALUE="http://www.serveur.com/rep/choix3">choix trois
</SELECT>
<INPUT TYPE="button" NAME="bouton" VALUE="GO!" onClick="window.location.href=document.liste1.choix.options[document.liste1.choix.selectedIndex].value">
</FORM>

Rediriger automatiquement vers une autre page...
<META HTTP-EQUIV=REFRESH CONTENT="1; URL=http://fabien.moquet.free.fr">

Des boutons de navigation...
<a href="javascript:history.back()">Page Précédente</a> - <a href="javascript:scroll(0,0)">Haut de page</a> - <a href="javascript:window.print()">Imprimer</a> - <a href="javascript:window.close()">Fermer</a></p>');

Une zone de texte déroulable...
<form> <textarea cols=50 name=agree wrap=virtual>Mettez un long message ici, si vous avez des informations à diffuser et si vous voulez que cela ne prenne pas trop de place.</textarea> </form>

Pour changer l'allure des liens...
<style type=text/css>
A:link { COLOR: blue; TEXT-DECORATION: underline }
A:visited { COLOR: blue; TEXT-DECORATION: underline }
A:hover { COLOR: red; TEXT-DECORATION: none }
</style>

Pour insérer une musique de fond sur vos pages...
<BGSOUND src="adresse de votre musique.mid" loop=-1>
ou <EMBED SRC="son.wav" AUTOSTART="true" LOOP="-1">
ou <BG SOUND="son.wav" AUTOSTART="true" LOOP="-1">

Pour appliker un effet de transition aléatoire entre les pages
<meta http-equiv="Site-Enter" content= "revealTrans(Duration=1.0,Transition=23)" /> <meta http-equiv="Site-Exit" content= "revealTrans(Duration=1.0,Transition=23)" />

Frames: diviser l'écran en deux cadres (2 pages html)
Exemple de division verticale: <FRAMESET COLS="200,*"> <FRAME SRC="gauche.htm" NAME="gauche"> <FRAME SRC="droite.htm" NAME="droite"> </FRAMESET>
Exemple de division horizontale: <FRAMESET ROWS="20%,80%"> <FRAME SRC="haut.htm" NAME="haut"> <FRAME SRC="bas.htm" NAME="bas"> </FRAMESET>

Ouvrir une petite fenêtre (popup)
<a href="#" onclick="window.open('popup.htm', 'popupnav', 'width=480,height=300,resizable=yes,scrollbars=yes'); ">cliquer ici</a>

Pour faire un cadre bleu et écrire à l'intérieur :
<span style="background-color:navy;width=100%"> Ici tapez le titre ou le texte

Forums d'entraide informatique - Astuces - Conseils

#1 10-08-2008 17:48:43

Introdution au HTML

Pied de page des forums