Besoin de votre avis !

natnip · le 8 janvier 2002

Bonjour,

je suis une débutante dans le domaine mais j'aimerais créer un site sur un sujet qui me passionne.

Je dispose comme logiciels de Namo webeditor 4 et de Paint shop pro 7, est-ce suffisant et que pensez-vous d'eux ?

D'autre part je recherche un livre sur la création de site qui serait à la fois accessible et complet (pas le genre dont on fait le tour en 1 heure), quel titre me conseillez-vous ?

Merci d'avance pour vos conseils !

Nat

patzepat · le 8 janvier 2002

La collection des livres "pour les nuls" devrait te permettre de répondre à de très nombreuses questions. Je crois qu'il en existe un sur le HTML.

Sinon, tu peux aller regarder du côté des hébergeurs (multimania, wanadoo, free, club internet, etc...) qui proposent tous des tutoriaux en ligne.

Pour ce qui est des outils, il n'est pas nécessaire d'avoir des outils particuliers pour monter des pages web, comme tu pourras le voir dans les bouquins ou les tutoriaux

Bon courage

D'Artagnan · le 8 janvier 2002

tu peux utiliser dreamweaver aussi comme editeur html

je crois que la version 2 est dispo chez wanadoo gratuite en ce moment si tu es abonnée chez eux

bon courage

naitsirhc · le 8 janvier 2002

Dreamweaver est bien mais pour un débutant se retrouver devant sans plus d'explications, c'est pas évident. Des sites proposent des outils en ligne mais il y a des logiciels bon marché (entre 100 et 200 frs) comme Web Artist de Sierra ou Home Page de Micro Application qui permettent de créer et de mettre un site en ligne sans connaissances préalables et sans trop de difficultés.

le 8 janvier 2002

naitsirhc

Dreamweaver est bien mais pour un débutant se retrouver devant sans plus d'explications, c'est pas évident

c'ets clair que pour un debutant il vaut mieux des outlis beaucoup plus simple pour se faire la main quitte apres a venir sur dreamweaver. Il faut reconnaitre que l'interface macromedia est dure a assimiller, mais une fois fait, c'ets genial !!!!

le 8 janvier 2002

naitsirhc

naitsirhc: Dreamweaver est bien mais pour un débutant se retrouver devant sans plus d'explications, c'est pas évident

c'ets clair que pour un debutant il vaut mieux des outlis beaucoup plus simple pour se faire la main quitte apres a venir sur dreamweaver. Il faut reconnaitre que l'interface macromedia est dure a assimiller, mais une fois fait, c'ets genial !!!!

-=GenesiS=- · le 8 janvier 2002

Moi je conseille le BLOC NOTE et oui o moins si sa marche pas comme i faut tu peut t'en prendre qu'a toi enfin a toi de voir moi j'ai commencer comme sa (apres deception de tous les autre logiciel g retroucer met manche et g ouvert le bloc note ! )....

D'Artagnan · le 8 janvier 2002

c'ets clair que pour un debutant il vaut mieux des outlis beaucoup plus simple pour se faire la main quitte apres a venir sur dreamweaver. Il faut reconnaitre que l'interface macromedia est dure a assimiller, mais une fois fait, c'ets genial !!!!

comme tu dis la premiere fois que j'ai ouvert dream j'etais tellement degouté que je l'ai refermé aussitot et je te parle pas de flash une horreur, mais une fois bien en main tu fais ce que tu veux

natnip tu trouvera d'excellents tutoriaux en cherchant sur google

en attendant tu peux aller jeter un oeil

http://www.graphiland.fr/tutori_t/tutorial...s&InsertQuery=1

http://www.webyo.net/dream/content1.html

http://www.tutorials-fr.com/index.php3

hexfetelectron · le 8 janvier 2002

Moi je conseille le BLOC NOTE et oui o moins si sa marche pas comme i faut tu peut t'en prendre qu'a toi enfin a toi de voir moi j'ai commencer comme sa (apres deception de tous les autre logiciel g retroucer met manche et g ouvert le bloc note ! )....

Je confirme tes dires... et je vous refile des infos..

suite..

Faire sa page dans le bloc-notes de windows

--------------------------------------------------------------------------------

Non, ce n'est absolument pas difficile de construire sa page dans le Bloc-notes de windows! J'ai découvert cette méthode par hasard et depuis, je me sens beaucoup plus libre dans la construction de mes pages, libre de suivre mon inspiration du moment et d'expérimenter de nouvelles idées...

Essayez, vous ne serez pas déçus!

Voici comment démarrer votre page dans le Bloc-notes de Windows:

Base de page

1-Créez un nouveau dossier sur votre disque dur et appelez-le "monsite" ou "pol" ou "bob", c'est là que vous allez ranger tout ce que va contenir votre site (pages.htm, sons, images, etc...) et ouvrez ce dossier en double-cliquant sur son icône.

2-Créez un nouveau document ".text" en cliquant avec le côté droit de votre souris dans la fenêtre de votre dossier ensuite sur "Nouveau" puis sur "Document texte".

3-Ouvrez votre document et collez-y ce qui se trouve ci-dessous:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>titre de votre page</TITLE>

</HEAD>

Et ici, vous mettrez tout le contenu de votre page

</BODY>

</HTML>

4-Enregistrez votre document en cliquant sur fichier, puis sur enregistrer.

5-Fermez votre document.

6-Renommer votre fichier en changeant l'extension ".txt" par ".htm" et donner lui le nom que vous voulez. Si c'est la première page de votre site, il vaut mieux l'appeler "index.htm".

7-Double-cliquez sur la nouvelle icône et vous voyez apparaître devant vous une belle page web toute blanche!

8-Cliquez dans la fenêtre de Internet Explorer sur "Affichage" "Source" et là, vous retrouvez le document texte, tel que vous l'aviez laissé!

Vous voilà prêt à travailler!

Les balises:

Juste un petit mot sur le principe des balises...

Les balises sont les caractères contenus entre les chevrons "<" et ">". En général, elles vont par paire, On dit alors qu'on a affaire à un conteneur. La balise terminale est la même que la balise de début, à ce détail près que le mot clé y est précédé d'un slash "/". La balise initiale peut être complété par des attributs qui donnent une précision complémentaire concernant la balise.

Voilà les balises obligatoires dans un document web:

<HTML>...</HTML> ====> au début et à la fin, c'est ça qui fait que votre document est une page web.

<HEAD>...</HEAD> ====> c'est l'en-tête, non visible dans laquelle on met par exemple, le titre qui sera affiché dans la barre de titre du navigateur, ainsi que les balises <META NAME= ... dans les quelles vous décrivez votre document pour les robots des moteurs de recherche.

<BODY>...</BODY> ====> c'est dans ce conteneur que vous mettrez ce que les visiteurs de votre page vont réellement voir, c'est à dire votre texte et vos images...

Allez-y!

Voilà, vous pouvez déjà commencer à taper quelque chose... Allez-y!

Ensuite, cliquez sur "fichier" "enregistrer", puis remettez la fenêtre d'Internet Explorer à l'avant-plan en cliquant sur son icône dans la barre des tâches ou n'importe où sur le bord de la fenêtre à l'écran si vous l'apercevez...

Evidemment, vous ne voyez toujours rien... Cliquez sur "Actualiser" dans la barre d'outils et, Miracle, vous voyez apparaître ce que vous avez tapé!

Voilà, c'est le grand principe du travail dans le bloc-notes...

Toutefois, méfiez-vous, préparez-vous quelques friandises et de quoi vous désaltérer car ce petit jeu devient vite captivant et vous ne verrez plus le temps passer!

Modifier l'apparence du texte saisi:

La police

Normalement, votre navigateur vous affiche le texte que vous avez saisi en petit caractère et avec la police "Times New Roman", c'est la police par défaut.

Pour personnaliser l'aspect de la police, vous devez utiliser la balise ....

Par exemple, vous pouvez spécifier la police qui sera affichée à l'écran, mais attention, ne choisissez pas une police peu courante car si le surfeur n'a pas cette police sur son ordinateur, il verra le texte dans la police par défaut! Donc, limitez-vous aux polices courantes: ARIAL et COMIC SANS MS sont les plus répandues

Placez juste avant la phrase que vous avez saisi la balise et juste après la phrase, ajouter bien sûr

Cela veut dire que le texte inclus dans le conteneur sera affichée avec la police "ARIAL"

Enregistrez, actualisez dans IE, visionnez, c'est chouette, non?

Et la couleur, me direz-vous?

Alors, là, il y deux possibilités:

1- Vous définissez la couleur par défaut de votre document dans la balise <BODY> avec l'attribut TEXT=COLOR, normalement, si vous avez copier le code ci-dessus, vous voyez que la couleur du texte est déjà spécifiée par TEXT="#000000", c'est à dire noir... Vous pouvez changer le code en "#008080" et vous aurez un texte vert bleuté...

Mais pour vous qui débutez, ce n'est pas très évocateur, ces chiffres, alors sachez que vous pouvez utilisez les noms des couleurs reconnues par les deux navigateurs... Essayez, par exemple, <....... TEXT COLOR="NAVY"....> et vous avez un beau bleu marine! Vous trouverez les noms de ces couleurs dans la page réservée aux 600 couleurs du web.

2- Vous voulez qu'une phrase soit affichée dans une couleur particulière? Dans ce cas, reprenez votre balise et ajoutez-y l'attribut COLOR, par exemple:

votre belle phrase

Et la taille?

Ben ça, c'est pas compliqué, il suffit d'ajouter l'attribut SIZE, par exemple:

votre belle phrase

C'est déjà plus grand, n'est-ce pas? On peut indiquer une taille variant de 1 à 7...

Afficher en gras

Très simple et pas fatigant; il suffit de placer votre phrase dans le conteneur ..., par exemple:

Bienvenue sur ma page!

Ben, ça en fait des balises à taper, me direz-vous? Ne négligez pas l'utilisation du copier coller, sans ça, la construction de votre site va vite devenir un travail de forçat...

Afficher en italique

Même principe que pour afficher en gras, sauf qu'ici, vous utilisez la balise ...

Souligner

Ca, je vous déconseille fortement, car normalement, ce sont les liens qui sont soulignés, dans une page..

.Enfin, si vous êtes têtu, vous faites comme plus haut mais vous utilisez la balise ...

Mais il y a quand même moyen de souligner, en traçant un trait sous le mot avec le marqueur <HR>

Tracer un trait

Pas fatigant et très précis : <HR> C'est un marqueur, c'est à dire qu'il n'y a pas besoin de fermer en faisant </HR>!

Ce qu'il y a de chouette, avec <HR>, c'est qu'on peux définir la longueur de la ligne, par exemple:

<HR WIDTH=60%> et vous aurez une ligne qui occupera 60% de la fenêtre...

Vous pouvez aussi spécifier la couleur de la ligne, mais, attention, seul IE4 affiche les couleurs pour les lignes, pas Netscape!

Essayez <HR WIDTH=60% COLOR="MAGENTA">, vous devrez obtenir ceci:

--------------------------------------------------------------------------------

Vous pouvez donc souligner comme ceci:

La culture des potirons dans le Poitou

--------------------------------------------------------------------------------

Aller à la ligne

Normalement, vous tapez votre texte au kilomètre, comme on dit, car ça ne sert à rien d'aller à la ligne dans le Bloc-notes, vous ne le verrez pas affiché dans le navigateur! Donc, quand vous voulez aller à la ligne, vous devez l'indiquer par le marqueur <BR>

Ce marqueur sera sans doute celui que vous utiliserez le plus car il sert aussi à aérer du texte ou des images quand une marque de paragraphe est trop importante à votre goût...

Marquer un paragraphe

Pour cela, vous utiliserez la balise<P>...</P> ou plutôt <DIV>...</DIV> Pourquoi <DIV>? Parce que Netscape n'interprète pas correctement les attributs que vous pouvez ajouter pour formater les paragraphes si vous utilisez la balise<P>

Paragraphe vide

Parfois, vous souhaiterez laisser des espaces vides sur votre page. Dans ce cas tapez ceci:

Si l'espacement est trop grand, n'oubliez pas que vous pouvez utiliser aussi le marqueur <BR> qui est la moitié d'un <P>.

Formater un paragraphe

Comme en traitement de texte, un paragraphe peut être aligné à gauche, à droite, centré ou justifié de la façon suivante:

<DIV ALIGN="LEFT">...</DIV>, mais en général, si on ne met rien, il s'aligne à gauche par défaut

<DIV ALIGN="RIGHT">...</DIV>, alignement à droite.

<DIV ALIGN="CENTER">...</DIV>, alignement centré

<DIV ALIGN="JUSTIFY">...</DIV>, alignement justifié

Et, maintenant, petite récréation!

Je vais vous reparlez un peu des couleurs...

Vous avez vu qu'il y a deux façon de coder les couleurs: soit avec le nom reconnu de la couleur, ex: "BLACK" ou alors avec des chiffres, ex : "#000000".

Il est vrai que c'est moins astreignant de taper un mot que six chiffres, toutefois, sachez qu'avec les codes couleur chiffrés, vous avez le choix, non plus entre 600 couleurs, mais entre 16 millions!

Comment ça fonctionne? Ben, c'est simple... En informatique, on utilise trois couleurs pour en faire 16 millions ou même plus... Le rouge, le vert et le bleu, d'ou l'abréviation RGB.

Le code utilisé ici est le code hexadécimal qui utilise les chiffre de 0 à 9 et les lettres de A à F.

Chaque couleur a droit a deux chiffres ou lettres, mais toujours dans le même ordre: rouge, vert, bleu.

Si vous mettez les trois couleurs à fond, vous avez "#FFFFFF", c'est à dire blanc.

Si vous ne mettez aucune couleur, vous avez "#000000", c'est à dire noir.

Alors, faites des tests, juste pour vous amuser en tapant ceci:

Bienvenue sur ma page!

Et puis changer juste le code... Par exemple, si vous tapez "#D2D2D2", vous aurez du gris, et si vous donnez toujours la même valeur à chaque couleur, vous aurez toujours du gris!

Essayez: "#FF99FF", "#99CC99", "#66CCFF", "#FF99CC", "#99CC66", "#66CCCC" ou laissez faire votre imagination...

C'est amusant, non?

L'arrière plan de votre page

Puisque vous êtes familiarisé avec les couleurs, vous pouvez maintenant choisir une couleur pour votre fond de page.

Vous spécifiez cela à l'intérieur de la balise <BODY> de la façon suivante:

<BODY BGCOLOR="#FFFFBD"> et là vous aurez un fond jaune pâle... Dans le code ci-dessus, la couleur de fond choisie est "#FFFFFF", c'est à dire blanc.

Cadeau!

Ben, comme vous avez été bien courageux de tenir le coup jusqu'ici, je vais vous offrir une bon outil pour travailler de façon très précise avec les codes couleurs...

Il s'agit d'une applet que j'ai trouvée sur le web et je remercie l'auteur dont j'ignore le nom, malheureusement... Vous tracassez pas, cette applet est librement utilisable!

Donc, vous télécharger le fichier zip de l'applet, vous le dézipper avec Winzip, par exemple (Réservez un nouveau dossier pour cette applet, afin que tous les fichiers restent bien ensemble et ne se perdent pas sur votre disque dur).

Ensuite, dans ce dossier, vous cliquez sur la page .htm qui s'y trouve et là, vous trouvez une belle applet qui vous rendra mille fois service et même plus! Vous jouez avec les tirettes et quand une couleur vous plaît, vous regardez en bas et vous voyez le code exact! Magique, non?

Maintenant, si vous travaillez comme un horloger et que vous voulez, par exemple, la couleur exacte du fond de l'image que vous avez inséré, vous ouvrez votre image dans un soft image un peu élaboré, quand même, vous prenez l'outil "pipette", vous cliquez sur la couleur qui vous intéresse et vous devez voir quelque part les valeurs RGB de cette couleur, par exemple 255,255,255, c'est blanc. Vous prenez la page avec l'applet, vous positionnez les tirettes afin d'avoir les mêmes valeurs et en bas, qu'est-ce vous voyez? Le code hexadécimal correspondant à ces valeurs! Et en plus, elle fonctionne au poil, cette applet, juste un peu gourmande en ressource, mais c'est la seule qui fonctionnait parfaitement parmi toutes celles que j'ai trouvées sur le web...

Un peu de musique?

Pourquoi pas? Ca mettra un peu d'ambiance dans votre page... Toutefois, essayez de ne pas choisir un morceau trop gros à charger, sinon, le surfeur aura quitté votre page avant d'en avoir entendu une seule note!

Je ne connais qu'un code qui fonctionne avec les deux navigateurs et c'est :

Remplacez "votrechanson" par le nom du morceau que vous voulez faire jouer et surtout, n'oubliez pas de placer le fichier .mid dans le dossier contenant les pages de votre site! Vous voyez, on peut même régler le volume!

N.B. Vous trouverez sur mon site des centaines de fichiers midi et surtout, la perle du site: le TOP 100 MIDI où vous pouvez aller choisir, à votre aise, le morceau qui mettra de l'ambiance sur votre page!

Insérer une image

Votre belle-mère ressemble à Kim Bassinger? Alors il faut absolument mettre sa photo sur le web!

Comment? Facile! D'abord, il faut la prendre en photo, forcément - :-( ) Ensuite, vous scannez la photo en question, vous la convertissez en format .jpg, vous mettez l'image dans le dossier de votre page et vous inscrivez la balise suivante :

</CENTER>

De cette façon, vous définirez la position de l'image dans la page ainsi que la taille à laquelle elle devra être affichée... Ce n'est pas obligatoire, mais comme l'image arrivera après le texte, sa place sera déjà dimensionnée et réservée. Pensez donc à noter sa taille dans votre soft image.

L'attribut ALT sert à afficher un texte de remplacement pendant que l'image charge et aussi à faire apparaître une infobulle quand le surfeur pointera son curseur sur l'image. Vous y inscrivez ce que vous voulez...

L'attribut BORDER sert à entourer votre image d'une bordure, on s'en sert peu...

Conseils

Pour vos images, ne dépassez pas une certaine taille de fichier, restez raisonnable. Si l'image sert juste à décorer un peu votre page, ne dépassez pas 10 à 15 ko. Si vous voulez afficher un chef d'oeuvre de création graphique en 640*480, fabriquer une réduction de cette image avec une taille de 100*75 pixels, par exemple, et faites un lien au départ de cette vignette vers l'image en taille réelle, comme ceci:

A ce propos, je mets à votre disposition sur ce site plus d'une centaine de fonds de page, pour y accéder, cliquez sur le bouton "Fonds d'écran" dans le menu situé dans le frame de gauche.

Les liens

Vous voudrez sûrement ajouter des liens dans votre page...

Sachez qu'il y a deux sortes de liens et même trois...

1- Les liens internes vers les autres pages de votre site.

2- Les liens externes vers des pages extérieures à votre site.

3- Si votre page fait deux kilomètres, il faut aussi envisager des liens pointant vers certains endroits dans votre page, pour que le surfeur puisse sauter d'une section à l'autre.

Dans tous les cas, on utilise la balise

N.B. Vous pouvez spécifier la couleur dans laquelle s'afficheront les liens de votre page dans la balise <BODY>.

LINK="#000080" Les liens non visités

VLINK="#800080" Les liens déjà visités

ALINK="#FF0000" La couleur que prend le lien au moment où on clique dessus.