Comment commencer une page web? (Cliquez si vous ne connaissez pas le principe). Eh bien il n'est pas nécessaire de posséder un logiciel! Il vous suffit simplement du bloc-notes. Ma page présente les fonctions utiles sous forme de tableau, afin de les visualiser et de les mémoriser facilement lorsque vous débutez. Vous savez, on est tellement content de savoir faire sa page qu'on veut faciliter la vie des autres pour faire la même chose; et en plus ça permet de mettre sur notre page quelque chose qui nous paraît intéressant! C'est pour ça (selon moi :-) ) qu'il y a tellement de pages consacrées à la programmation de pages web!
| |||||
| name="author" | auteur de la page | ||||
| name="description" | Description de ce que contient la page | ||||
| name="keywords" | Mots-clés, à séparer par des virgules | ||||
| <style type="text/css"><!-- . . . //--> | définit l'aspect des liens; à inscrire entre </title> et </head> | ||||
| a:link {. . .} | liens non cliqués | ||||
| a:visited {. . .} | liens visités | ||||
| a:active {. . .} | dernier lien cliqué | ||||
| a:hover {. . .} | liens quand la souris pointe dessus | ||||
| text-decoration: overline ou underline ou none | surligné et souligné, souligné ou rien | ||||
| color: xxxxxx | couleur (voir code hexadécimal) | ||||
| font-weight: bold | en gras | ||||
| font-family: ecriture | écriture (arial, helvetica, ...) | ||||
| font-variant: small-caps | petites majuscules | ||||
| <body> | voir commencer commencer une page web | ||||
| bgcolor="xxxxxx" ou ="blablabla.jpg ou .gif" | Ajout d'une couleur de fond ou d'un papier peint | ||||
| link="xxxxxx" | Définit la couleur des liens non cliqués(voir code hexadécimal) | ||||
| vlink="xxxxxx" | Couleur d'un lien déjà utilisé | ||||
| alink="xxxxxx" | Couleur du lien quand vous laissez appuyé dessus le bouton gauche de votre souris | ||||
| bgproperties="fixed" style="background-attachment: fixed" | Le fond reste fixe | ||||
| <b>,<i>,<u> | gras, italique, souligné | ||||
| <center> | centré | ||||
| <br> | à la ligne ou saut de ligne | ||||
| <font> | (=écriture en anglais) gère certains aspects de l'écriture: | ||||
| face="helvetica, arial" | le style d'écriture | ||||
| size=20 ou size=+2 | la taille | ||||
| color="ffoooo" | la couleur (il s'agit d'un code hexadécimal) Voir débuter pour plus de précisions. | ||||
| <p> | paragraphe | ||||
| align="center, right ou left" | alignement (centré, droit, gauche) | ||||
| <h1> | taille, entre 1 et 7, 1 est la plus grande taille | ||||
| align="center, right, left" | alignement | ||||
| <hr> | ligne horizontale grise | ||||
| <a> | lien (externe ou interne) | ||||
| href="http://..." | vers une adresse externe | ||||
| href="....htm" | vers une autre de vos pages (dans le même répertoire) | ||||
| href="categorie/....htm" | vers une autre de vos pages (dans le sous-répertoire catégorie) | ||||
| href="mailto:adresse e-mail"> | pour vous écrire | ||||
| href="mailto:adresse?subject=..."> | pour vous écrire en mentionnant le sujet | ||||
| href="#blablabla">
name="blablabla"> | blablabla est le nom de "code" que vous donnez à ce lien interne (c'est à dire sur la même page). Renvoie à... | ||||
| ce mot | |||||
| title="..." | apparaît dans un petit rectangle jaune quand la souris est pointée dessus | ||||
| target="new" | page linkée dans une nouvelle fenêtre | ||||
| target="blabla" | La page linkée s'affiche dans le cadre (frame) nommé blabla | ||||
| <img src=".... gif ou .jpg"> | insertion d'images d'extension gif ou jpg. Voir débuter pour quelques précisions. | ||||
| alt="..." | apparaît dans un petit rectangle jaune quand la souris est pointée dessus | ||||
| width=x ou "x%" | largeur en pixels ou en pourcentage de la taille d'origine | ||||
| height=y ou "y%" | hauteur en pixels ou en pourcentage | ||||
| border=z | choisissez l'étendue de la bordure (0=aucune) | ||||
| align="top, bottom, middle, left, right" | alignement: haut de la cellule, bas, milieu, gauche, droite | ||||
| border=0 | Si votre image constitue un lien, cette commande lui permet de ne pas être encadrée. Vous pouvez mettre d'autres valeurs que 0 si vous souhaitez un gros encadrement. | ||||
| usemap="#blabla" | la carte (map) nommée "blabla" s'applique sur cette image (voir ci-après) | ||||
| <map name="blabla"> | (à insérer dans le corps, pas d'endroit spécifique) permet de définir différents liens (internes, externes, messages) sur une même image. Pour la suite, pas besoin de </area>, mais </map>. Pour connaître les coordonnées, cliquez ici pour apprendre une astuce! | ||||
| <area shape="rect" coords="a,b,c,d" href="....htm"> | la zone qui comporte le lien est un rectangle, dont l'angle supérieur gauche a pour coordonnées a,b, l'angle inférieur droit c,d | ||||
| <area shape="circle" coords="a,b,c" href="....htm"> | la zone qui comporte le lien est un cercle, avec un centre de coordonnées a,b, et de rayon c | ||||
| <area shape="poly" coords="a,b,c,d,e,f,..." href="....htm"> | la zone qui comporte le lien est un polygone où vous devez définir les coordonnées de chaque point qui le compose | ||||
| <table> | insertion d'un tableau | ||||
| border="x" | bordure: voir pour les images | ||||
| cellspacing ="x" | espacement entre les cellules, en pixel | ||||
| cellpadding ="x" | espacement entre le bord de la cellule et son contenu | ||||
| width="x" | largeur | ||||
| height="x" | hauteur | ||||
| bgcolor="xxxxxx" | règle la couleur de toutes le cellules du tableau sauf si une nouvelle est définie dans la balise <tr> ou <td> | ||||
| <tr> | ligne | ||||
| width, height, align="right, left ou center", valign="top, middle, bottom" | voir avant | ||||
| bgcolor="xxxxxx" | bgcolor règle la couleur de fond de la cellule | ||||
| background="....gif ou .jpg" | image de fond | ||||
| <td> | colonne | ||||
| comme pour tr +: | |||||
| colspan=x: fusion de x cellules, horizontalement | |||||
| rowspan=x: fusion de x cellules, verticalement | |||||
| <form> | Annonce d'un formulaire | ||||
| <input type=". . ." name="..."> | Insertion d'une zone de texte ou de boutons; name est utile pour le javascript | ||||
| type="text" | Insertion d'une zone de texte | ||||
| type="password" | Idem, mais chaque caractère apparaît sous forme d'étoile | ||||
| Pour text et password: | |||||
| value="Texte par défaut" | |||||
| maxlength="x": maximum autorisé de x caractères | |||||
| size="y": longueur du champ en pixels | |||||
| type="radio" | Case à cocher circulaire; seule une peut être cochée | ||||
| type="checkbox" | Case à cocher carré; plusieurs peuvent être cochées | ||||
| Pour radio et checkbox: | |||||
| checked: case cochée par défaut | |||||
| type="button" | Bouton rectangulaire; on peut alors, en javascript, lui associer des fonctions | ||||
| type="reset" | Le cliquer restaure les valeurs par défaut dans tout le formulaire | ||||
| Pour button et reset: | |||||
| value="Texte sur le bouton" | |||||
| type="hidden" | Donnée cachée | ||||
| <textarea rows=x cols=y> | Zone de texte, de largeur x lettres et de longueur y lettres, barre de déroulement éventuelle si plus de place est nécessaire | ||||
| <select name="..."> | Insertion d'une liste déroulante; name est utile en javascript | ||||
| <option>Element | De haut en bas, nomination des différents éléments constituant la liste | ||||
| method="post" action="mailto:votre e-mail" | Formulaire destiné à vous être envoyé (sondage, avis, ...) | ||||
| <input type="submit" value="texte sur le bouton"> | Le cliquer vous envoie les informations du formulaire | ||||
| Pour tous les types: | |||||
| name="nom de l'info": dans votre courrier, fait correspondre la réponse du visiteur à chaque info | |||||
| <frameset> | insertion de frames; cette balise se met à la place de <body> | ||||
| cols="x%,y%" | place en hauteur que prend chaque cadre | ||||
| rows="x%,y%" | place en largeur que prend chaque cadre | ||||
| <frame src="....htm"> | adresse de la page contenue dans le cadre (se place entre <frameset> et </frameset>) | ||||
| <frame name="blabla" src="..."> | permet de nommer le cadre; utile pour renvoyer un lien vers un certain cadre (voir ci-dessus catégorie liens) | ||||
| <embed src="....mid ou .wav" | insertion de son ou musique | ||||
| hidden=true | Pour cacher le lecteur | ||||
| autostart=true | Le fichier s'active lors du chargement de la page (sinon, les visiteurs doivent appuyer sur le bouton play pour entendre la musique) | ||||
| <marquee> | Texte défilant par défaut de gauche à droite (mode enroulé), indéfiniment (sauf glisser). On peut aussi faire défiler une image mais sur internet cette opération doit être longue! | ||||
| bgcolor="xxxxxx" | Couleur d'arrière-plan du rectangle dans lequel le texte défilera | ||||
| behavior="Slide" | Par défaut, le texte défile de droite à gauche puis se bloque sur le bord gauche. | ||||
| behavior="Alternate" | Le sens de défilement s'alterne | ||||
| direction="right" | Le texte défile de droite à gauche | ||||
| loop="x" | le mouvement se répète x fois. | ||||
| scrolldelay="x"
scrollamount="y" | scrollamount et scrolldelay déterminent la vitesse du texte. Pour une même valeur de scrollamount, on peut dire que scrolldelay détermine x unité de temps pour aller d'un côté à un autre. Quand le texte défile, il est en fait décalé dans le temps d'un certain nombre de pixels. C'est ce que détermine scrollamount. (plus il est faible et plus on aura l'impression qu'il défile. par contre, vous ne pourrez pas aller vite). | ||||
| <SCRIPT LANGUAGE="javascript">
<!-- function nouvelle_fenetre(src,name,w,h) {size=",width="+w+",height="+h browser=window.open(src,name,"scrollbars=no,resizable=no,toolbar=no,status=no,men- ubar=yes,location=no,directories=no"+size) }//--> </script> |
Préparation à l'ouverture d'une petite fenêtre.
Cette partie est à insérer entre les balises </title>
et </head> (de la page contenant le lien).
Cliquez ici pour plus d'informations sur les possibilités. ---------------------- titre.html est le nom de la petite fenêtre, '700' correspond à sa largeur, '100' à sa hauteur. |
||||
| <a href=javascript:nouvelle_fenetre('titre.html?titre=Nouvelle+fenetre','externe','700','100')> lien</a> | |||||
Quelques caractères
| Signes | Commandes |
| < et > | < et > |
| é | é |
| è | è |
| ç | ç |
| à | à |
| ù | ù |
| ê | ê |
Quelques petites astuces
- lorsque vous programmez un tableau, épargnez-vous de
noter les fins de balises </> concernant les colonnes et les lignes:
quand une nouvelle débute, l'ordinateur comprend que la précédente
est terminée. Votre travail sera ainsi moins fastidieux!
- pour apprendre certaines fonctions que vous aimez bien sur
une page, il suffit de cliquer sur "affichage" puis "source". Ne vous affolez pas quand vous
apercevez la page (les accents sont souvent remplacés par des formules pour les vieilles
versions de navigateurs;
ci-dessus dans "signes"), même si ça fait peur, avec du courage
vous serez récompensé!
- des problèmes avec le code hexadécimal
des couleurs? Rendez-vous sur cette
page , puis cliquez sur "toutes les couleurs". Vous n'avez plus qu'à
choisir votre couleur et à regarder le code. Vous pouvez également
télécharger compcoul (3,38 KO au format zip) sur cette
page ; vous pouvez modifier la présence des couleurs élémentaires
et le code de la couleur créée s'affiche automatiquement.
Pratique non?
