Graphiques RAt Mort

AIDE HTML

Ce site ne propose pas un cours complet en programation web. Mais plutot une aide mémoire pour ceux qui désirs apprendre s devenir webmasters.

Cette page est concu pour etre utiliser avec le menu dedroite. Clic la rubrique qui t'intéresse au lieu de scroller le long de la page.

Je prends pour aquis que tu es familier avec les termes utiliser et que tu sais qi'il faut tapper ton code dans un éditeur. Si non, va voir la FAQ et reviens ici apres.

STRUCTURE D’UNE PAGE WEB:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titre Du Document</title>
<link rel="stylesheet" href="nom du doc .css" type="text/css">
<META NAME="keywords" CONTENT="mots clés ici">
<META NAME="description CONTENT="description ici">
</head>
<body>
Contenu de la page web ici
</body>
</html>

ARRIERE-PLAN:

Couleur de fond:

-couleurs disponible par nom :
Aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red & yellow. Pour les couleurs hexadecimal voir la charte des “Couleurs Web”.

Image de fond :

-L’image sera afficher en mosaïque, par défaut. Ont peut faire plus avec le CSS.

<hr> séparateur

TEXTE:

Par défaut : <p>Ton texte ici</p>

Texte formaté :

<font size="6" color="red" face="Helvetica Narrow,Arial Narrow">ton texte ici </font>

font size="6" : grosseur de la police d’écriture.

color="red" : Couleur du texte. Peux être spécifié avec le nom de la couleur ou avec le code héxadécimal : #CC0000

face="Helvetica Narrow,Arial Narrow"> : La police d’écriture. Voici d’autre example.

{font-family: Arial, Helvetica, sans-serif}
{font-family: "Times New Roman", Times, serif}
{font-family: "Courier New", Courier, monospace}
{font-family: Georgia, "Times New Roman", Times, serif}
{font-family: Verdana, Arial, Helvetica, sans-serif}
{font-family: Geneva, Arial, Helvetica, sans-serif}

<b></b> gras
<i></i> italic
<u></u> souligné

ex :

<b><i><font size="6" color="red" face="Helvetica Narrow,Arial Narrow">ton texte ici </font></i></b>
ton texte ici

DÉFINIR LES EN-TETES: (section heads)

Voici un exemple qui illustre comment définir les titre. <h1>, sera plus gros
que <h2>…

Ex code :

Bienvenu bla bla bla.
<h1>Filmes que j'ai vue</h1>
Bienvenu bla bla bla.
<h2>bla bla bla</h2>

résultats :

Bienvenu bla bla bla.
Filmes que j'ai vue
Bienvenu bla bla bla.
bla bla bla

MARQUEE:(IE seulement)

Ton text ici.

Ont peut ajouter des attributs à la balise <marquee>, comme suit:

Voici les attributs :

Loop= "x" (le nombre de scroll avant de s'immobiliser)

Bgcolor="#CC00FF" (couleur de l'arriere-plan de la bande défillante)

Direction= "right" (direction à droite, si tu ne spécifie rien, c'est la gauche qui est par default)

Width="x" et/ou height="x" (largeur et/ou hauteur)

Behaviour="alternate" (scroll dans les deux direction)

Behaviour="slide" (glice)

Scrollamount="x" (la vitesse que le texte va défiller)

Scrolldelay="x" (la duréé de la pause avant le début du défillement)

direction="down" (le texte défille par en haut)

direction="up" (le texte défille par en bas)

Ie 7+:Image marquee

Tu peux ajouter les attributs que tu veux à la balise <marqueee>

SÉPARATEUR:

<hr> separator

La largeur peut être exprimée en px ou en %. Utiliser les % assure que ton design serra aussi beau pour un visiteur qui a une résolution d’écran différent a la tienne.

LIENS:

Couleurs :

Tu peux spécifier les couleurs pour ton texte, les liens, ceux déjà visiter, et même la couleur du lien lorsque cliquer. Dans la balise <body> ajoute ce-ci:

<body text= "green " link= "red" vlink= "purple" alink= "pink">

body text, couleur du texte
Link = lien
vlink=lien visités
alink=couleur du lien lorsque cliqué.

Exemples de liens :

#1: Télécharge la dernière version ici du logiciel!

Code :
Télécharge la dernière version <a href="ton url ici"> de mon logiciel!

#2: Mon Blog

Code :
<a href="url">Mon Blog

Image qui sert de lien:

*border=0 c’est pour enlever la bordure mauve autour de l’image.

Mailto: Un lien qui ouvre une fenêtre pour tapper ton email.

<a href="mailto:webmaster@site.com">Me Contacter</a>

4 choix pour déterminer la façon d’ouvrir les nouvelles fenêtres.

Quand tu click un lien sur une page web, par défaut la page va s’ouvrir a la place de la page que tu visitais. Si tu veux que ta page reste ouverte et que le lien ouvre la page dans une nouvelle fenêtre, tu dois utiliser target_blank, comme suit :

<a href="url" target="_blank">Visite Mon Blog

_blank:
_parent :
_top : S’ouvrira par dessu toutes les autres
_self :

POINTS D'ENCRES:

En utilisant un menu texte dans le haut de ta page, et des encres, tes visiteurs peuvent sauter à un paragraphe précis sans avoir à scroller tout le long de la page.

Voici un exemple. Une longue page de texte avec 3 liens enchors.

Code en bleu : Creer un menu
Code rose : Utiliser pour définir le lien

Créa Caca ©

Tu vas avoir un menu comme celui-ci en haut de la page. Ces lien vont faire en sorte que tu n'as pas besoins de scroller jusqu’en bas de la page pour voir « marie ». Le lien va t’amener la. Très utile pour de pages longues avec beaucoup de texte.

Chats | escargots | marie

Bla bla bla bla bla…

LISTS:

Commence avec <ul> et se termine avec </ul> les éléments de la liste sont identifier avec <li>

Comme suit :

Ca donne:

item 1
item 2
item 3
item 4
item 5

Tu peux definir la puce autrement: en ajoutant,<ul type="square"> (tu peux avoir, "disk" ou "cercle" à la place de "square")

PUCES:
(avec le css tu peux choisir une image comme puce)

Le code :
<h3>Les Puces</h3>
<ul type="square">
<li>une puce carré</li>
<li>cool</li>
</ul></li>
<li>Une puce en forme de disk</li>
<ul type="disk">
<li>c'est beau</li>
<li>j'aime ça</li>
</il></li>
<il type="circle">
<li>wow, un cercle</li>
<li>voila c'est tout</li>
</ul></li>

Pour les plus avancées
Regardez cet exemple, j’ai ajouté <ol type " ">, utiliser pour les listes ordonnes.

Voici une un code en exemple :

<ol type="A">
<li>Introduction
<ol>
<li>Title
<ol type="a">
<li>Author</li>
<li>Instructions</li>
<li>bla bla bla</li>
</ol></li>
<li>autre titre</li>
<ol type="a">
<li>Bla bla bla</li>
</ol></li>
<li>bla bla</li>
<li>bla bla</li>
</ol></li>
<li>Titre bla bla</li>
<ol>
<li>bla bla</li>
<li>bla bla bla</li>
<li>bla bla bla</li>
</ol></li>

LES TABLES :

Syntaxe utilisé :

Créa Caca ©

Elles commencent toujours avec <table> et se terminent avec </table>
<td></td> utiliser pour définir les cellules
<tr></tr> utiliser pour définir les rangées

cellspaceing :l’espaces entre les cellules
cellpadding : l'espace entre le border et le contenu des cellules
border : l’espace qui entour la table, pour éliminer cette espace tape, border="0"
width: la largeur de la table exprimée en % ou px (pixels)

Horizontal

Pour avoir une autre rangées, ajoute une autre section <tr></tr> comme suit :

1	2	3	4
5	6	7	8

Tableau Vertical

Alignement : si tu veux le texte aligner a droite, tu ajoute le code suivant a chaque case que tu veux aligner. <td>texte ici</td><td align="right"></td>

COLSPAN :

Colspan va faire la cellule s’étendre sur le nombre de colonnes que tu spécifies

ROWSPAN :

Rowspan vas permettre a une cellule de s'étaller sur une rangée complete.

Créa Caca ©

Arrière plan dans une table

Couleur : bgcolor="#CCFF99" dans la balise <td>, comme suit :

Créa Caca ©

si tu veux toute la table de la même couleur tu peut substituer ce code :<table bgcolor="pink">

*comme tu vois, tu peux utiliser le nom de la couleur ou utiliser la valeur hexadécimale.

Images comme arriere-plan

J’ai repris la table rose et ajouter une image noire avec du texte dessu.
J’ai aussi utilisé la fonction rowspan.

table complète :

<TABLE width=30% border=4 borderColor=#FF0080 BGColor=#400040>
<TR>
<TH><SPAN style='font-family:Arial; font-size:10pt'><FONT color=#0000FF>Titre</FONT>
</SPAN></TH>
</TR>
<TR>
<TD><SPAN style='font-family:Arial; font-size:10pt'><FONT color=#0000FF>Texte ici, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</FONT></SPAN></TD>
</TR>
</TABLE>

Créa Caca

Dans la première ligne de code,

<TABLE width=30% border=4 borderColor=#FF0080 BGColor=#400040>

L’arriere-plan est une couleur (BGColor=#400040), au lieu de spécifier une couleur, tu peux mettre une image:
background="url"…comme suit :

<TABLE width=30% border=4 borderColor=#FF0080 Background="url de ton image">

SCROLLBARS:

Version par défaut : prends les mêmes valeurs que les scroll bars de ton browser.

<DIV style='border-right:white 3px solid; border-top:white 3px solid; scrollbar-face-color:sand; scrollbar-highlight-color:grey; font-size:8pt;font-family:MS Reference Sans Serif; overflow:auto; border-left:white 3px solid; width:111px;height:175px; scrollbar-shadow-color:grey;scrollbar-arrow- color:sand; border-bottom:white 3px solid; background-color:white;color:#000000'><B><I>TON TEXTE ICI

Créa Caca

Version personnalisable

<DIV style='border-right:#FF80C0 3px solid;border-top:#FF80C0 3px solid;scrollbar-face-color: #0080FF;scrollbar-highlight-color:#FF8000;font-size:8pt;font-family:comic sans ms;overflow:auto; border-left:#FF80C0 3px solid;width:100px;height:170px;scrollbar-shadow-color:#804040;scrollbar- arrow-color:#00FF00;border-bottom:#FF80C0 3px solid;scrollbar-darkshadow-color:#9F009F; scrollbar-track-color:#008080;scrollbar-3dlight-color:#FFFF00;background-color:black;color:#FFFFFF'> INSERT TON TEXT ICI</DIV>

explications:

border-right, left, top et bottom, couleur de la bordure.
scrollbar-face-color: couleur pour le bouton de la scrollbar
scrollbar-highlight-color:#FF8000 : bordure pale du scrollbar
font-size:8pt, la grosseur de la police utiliser dans la table
font-family:arial: le nom de la police
width:150px;height:170px: largeur et hauteur de la table en pixels
scrollbar-shadow-color: couleur de l’ombrage du scrollbar
scrollbar-arrow-color: La couleur de la fleche sur le scrollbar
background-color: couleur de l’arrire-plan
color:black couleur du texte

Créa Caca

IMAGE DANS UN SCROLLBAR

STYLES DE BORDURES:

IMAGES:

Code de base pour afficher une image:

Explications:

url: c’est l’adresse web ou ton image est héberger.
height="x" : la hauteur de l’image
width= "x" : la largeur
border= "0" pour t’assurer qu’il n y as pas de bordure mauve autour de ton image.

Si par compte tu veux une bordure autour de l’image entre une valeur pour border et ajoute bordercolor= "x". (les couleurs peuvent être définit par chiffre ou par nom)…

Images une au dessu de l’autre :

(<br> équivaut a peser ‘enter’ sur ton clavier)

Alignment:

au lieu de ‘center’ tu peux mettre, left pour gauche ou right pour droite.

Alignement d’une image et du texte, gauche droite…

THUMBNAILS:

Pour diminuer les temps d’affichage d’une page, les images pressentes ne doive pas être lourdes.
Si tu en a plusieurs à afficher sur une même page tu peux utiliser les thumbnails. C’est une petite image
en aperçu. L’image est en fait un lien vers la grande image de taille réel.
Code :

Voici une example: Clic pour voir une image plus grande.

IFRAMES:

Affiche une page dans une page. J’ai utilisé les Iframes avec un gadget dans mon blog Live Spaces pour afficher des annonces google. Live Spaces n’accepte pas le javascript. Alors j’ai fait une page web avec l’annonce que je voulais. Dans mon blog j’ai utiliser un Iframe pour afficher cette page dans un module. J’ai maintenant des annonces Google adsense dans mon blog Live Spaces.

Si la page a affiché est plus large que les dimensions prescrites, les scroll bars apparaisse automatiquement, joue avec la hauteur (height) et la largeur (width) pour ajuster la dimension de ton iframe.

Ont n'a un générateur de iFrames pour te facilité les choses: http://www.freewebs.com/nombril/generateur_iframe.htm

Pour centrer le Iframe dans la page il suffit d’ajouter <div align=center> devant <Iframe src=… et ferme cette balise en ajoutant </div> après </iframe> comme suit :

AUDIO & VIDEO

Musique de fond qui joue automatiquement au chargement de la page :

ESC pour arreter la musique

Média qui s’ouvre dans le lecteur Windows Media Player du pc de tes visiteurs:
Le visiteur a le choix d'ecouter ou de sauvegarder le ficher sur sont pc.

Écoute mon nouvel album<a href= "url de ta musique" > Volume 1 </a>

MUSIQUE OU VIDEO EN STREAMING:

Si tu désir avoir un lecteur sur ta page pour diffuser tes media en streaming, tu as quelaques options:

Mais avant tu dois savoir que les fichiers video occupe baucoup d'espace et consome ton bandwith plus rapidement. Il est alor préferable de faire heberger ces media par un hebergeur. Ces hébergeur fournise un code <embed> que tu copie et colle. Visite notre blog pour plus d'info a ce sujet ou pour laisser tes questions.

Windows Media Player:

Fichiers supporté:

File format	Description
.asf	Windows Media file
.wma .wpl .wm .wmx .wmd .wmz	Windows Media Audio file
.wmv .wvx	Windows Media Video file
.wav	Wave Form Audio file
.asx	Audio Redirector file
.avi	Audio Visual Interleave file
.wax	Fichier Audio
.mp3 .m3u	Audio
*.mpeg .mpg .mpe .m1v .mp2 .mpv2 .mp2v .mpa**	Films
.mid .midi .rmi	Audio-Midi
aif .aifc .aiff .au .snd	Audio
.swf .pps	FLASh
.vob

 <OBJECT id="VIDEO" width="320" height="240" 

style="position:absolute; left:0;top:0;"

CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"

type="application/x-oleobject">


<PARAM NAME="URL" VALUE="url de ton fichierl">

<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">

<PARAM NAME="AutoStart" VALUE="True">

<PARAM name="uiMode" value="none">

<PARAM name="PlayCount" value="9999">

</OBJECT>

Real Player

fichier supporté:

Extension	Type
RM, RA, RAM	RealAudio/RealVideo streamed
RT	RealText streamed text formats
RP	RealPix streamed PNG, GIF and JPG images
PNG, GIF, JPG	Stand alone PNG, JPG et GIF images (et Gif animés)
MP3	MPEG Layer 3 (audio format)
SWF	RealSystem G2 with Flash (Flash version 3 & 4)
SMIL, SMI	fichiers SMIL
WAV, AIFF**	fichier son "Legacy";
MPG, MPEG	Standard MPEG Layer 1 video and Layer 2 audio formats
AVI**	Audio/Video Interleave-Microsoft video format
ASF**	NetShow files (nouvelle version NetShow fonctionne pas tousjour comme il faut)
MID, MIDI, RMI	fichiers "MIDI"

Quick Time: fichiers .mov

<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320"   height="240"   codebase='http://www.apple.com/qtactivex/qtplugin.cab'>

                <param   name='src' value="http://urlduvideo.mov">

                <param   name='autoplay' value="true">

                <param name='controller'   value="false">

                <param name='loop' value="false">

                <EMBED   src="http://urlduvideo.mov" width="320" height="240" autoplay="true" 

                controller="false" loop="false" bgcolor="#000000"   pluginspage='http://www.apple.com/quicktime/download/'>

                </EMBED>

                </OBJECT>

Lecteur Flash

Comme YouTube et Daily Motion. Fait heberger tes filmes et tu obtiens le code a copier et coller. Tu auras un lecteur avec des boutons de control.

Voici le code pour une animation sans boutton de control:<object width="250" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="movie" value="url fichier.swf" /> <param name="bgcolor" value="#000000" /> <param name="menu" value="false" /> <param name="quality" value="low" /> <embed src="ur lfichier.swf" width="250" height="400" bgcolor="#ff0000" menu="false" quality="low" type="application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/getflashplayer" /> </object>

LES FORMATS D'MAGES :

Les Formats d’images :

jpeg : Joint photographique expert group, supporte des millions de couleurs. Utiliser pour des photos, bannières, ou des images qui doivent reproduire les couleurs exactement comme ils sont.

gif : Graphics interchange formats, utilise un maximum de 256 couleurs. Ce format est populaire parce que la palette de couleurs peut être réduite au nombre essentiel de couleur. Réduisant considérablement le pois de l’image. Supporte la transparence.

png : Progressive networks graphiques, hybride de jpeg et gif, vieux browser et les appareilles sans fille, comme les cellulaires, ne peux pas afficher ce format. Supporte aussi les couleurs transparentes.

Couleurs transparentes :

l’image de gauche a un fond transparent. Les éditeurs de graphiques représentent la transparence avec des petits carrés gris et blancs. Celle de droite a un fond transparent. Elle peut etre utiliser sur un fond ne n'importe quel couleur

L’image de gauche ne sera pas belle si elle est utiliser sur une page de couleurs car ont verra tous jour le carrée blanc autour.

OTIMISER POUR LE WEB:

Quesque ça veut dire? Ca veut dire réduire le nombre de couleurs dans la palette utilisé pour afficher ton image. Ont veut compresser l’image sans perdre les qualités originale. Pourquoi réduire le poids de tes images? Pour 2 raisons. 1- plus les images sont grosses, plus ta page Web prendra du temps à s’afficher. 2- tu va remplir ton espace de stockage beaucoup plus vite.

Comment optimiser une image pour le web? Tu dois soit avoir un éditeur de graphique comme, Photoshop Elements, Paint Shop Pro…ou tu peux utiliser le cruncher, c’est gratuit, esseille le pour voir, ton image compresser est identique à l’originale mais sa taille est beaucoup plus petites.

Esseille notre cruncher pour optimiser tes images gratuitement.

FAVICONS :

Une favicon est une icone mise à disposition par un site Web pour rendre plus jolie la barre d'adresses ou de titre,les onglets et les favoris (le terme est d'ailleurs un non-officiel mais courrantmant employé de la contraction de « favorites » et « icon »).

Tu peux créer tes propres favicones avec Icon Art éditeur de curseur gratuit. Fais le liens dans ton document html en utilisant le code ci-dessou.

<LINK REL="SHORTCUT ICON" HREF="url-du-favicon.ico">

Retour a l'accueil

Rubrique d'Aide

ARRIERE-PLANS
TEXTE FORMATÉ
EN-TETES
MARQUEE
SÉPARATEUR
LIENS
LISTS
ENCRES
PUCES
TABLEAU
COLSPAN
ROWSPAN
SCROLLBARS
STYLES BORDURES
IMAGES
THUMBNAILS
IFRAME
AUDIO & VIDEO
FORMATS IMAGES
FAVICONS

Tu aime ce site et tu veux nous aider? Faits le liens vers notre site avec ce code:

Graphiques, glitters, codes er plus

<a     href="http://www.freewebs.com/nombril/"target=_blank><img     src="http://www.freewebs.com/nombril/grm.gif"alt="Gif, Glitters, Dolls, Myspace Graphics, Curseurs et     codes" border=0></a>

Attention

AIDE HTML

Rubrique d'Aide