Aller au contenu


[Tutoriels] - Pour les débutants en HTML ou les nouveaux chez Gold Serveur


2 réponses à ce sujet

#1 Toad06

    Modérateur

  • Moderators
  • 36 messages

Posté 02 juin 2007 - 20:01

Vous êtes un débutant et vous ne savez pas comment héberger vos fichiers et les présenter ensuite à ceux qui viendront visiter vos pages ? Pas de panique, vous trouverez ici quelques éléments pour vous aider ! ;)
Ces tutoriels ont été réalisés par Toad06 pour Gold-Serveur.com. Toute réutilisation sans accord est interdite.


Etape 1 : Le FTP

Tout d'abord, vous devez avoir sur votre ordinateur un logiciel FTP gratuit ou payant, c'est comme vous le souhaitez (les logiciels gratuits sont souvent plus limités en terme de fonctionnalités mais ils permettent de vous faire la main en vue d'un éventuel investissement sur un programme payant). Faites donc une recherche "logiciel ftp" sur Google pour trouver votre bonheur. Pour ceux qui veulent un programme gratuit, je leur conseille FileZilla, pour les autres, tournez-vous vers FlashFXP ou FTP Expert (leur prix avoisine autour de la trentaine d'euro).

:idea: Vous vous demandez peut-être à quoi ces logiciels servent ?
:arrow: Eh bien, ces programmes vous permettront d'héberger vos pages, vos images, vos vidéos (vous entendrez surement parler d'upload qui est un terme fréquent bien qu'anglais pour qualifier la mise en ligne d'un fichier sur un serveur)...


Après l'installation, ouvrez le programme et cherchez une boîte ressemblant à celle-ci :
Image IPB

Entrez-y vos identifiants délivrés par Gold-Serveur à l'inscription, l'hôte correspondant à l'adresse du serveur (il s'agit ici de ftp.gold-serveur.com), l'ID à votre numéro d'identifiant (par exemple : gs5621) et le mot de passe au code qui vous a été généré. Les noms indiqués en gras peuvent varier d'un programme à un autre mais vous aurez toujours à rentrer ces différents éléments de connexion de toute manière. ;)


Si tout est correct, la connexion va alors réussir et vous devriez voir ceci :
Image IPB

En cliquant sur "public_html", vous arrivez directement dans le dossier correspondant au nom de domaine de base de votre compte (très souvent le domaine offert par Gold-Serveur en site1.biz). Si vous disposez de plusieurs domaines, il vous suffit de sélectionner dans lequel vous souhaitez travailler en cliquant sur "domains" puis sur le nom du domaine concerné. :)

:!: IMPORTANT : Ne supprimez jamais les dossiers déjà présents lors de votre première connexion, ceux-ci sont indispensables au bon fonctionnement de votre compte.


Une fois ce choix fait, il ne vous reste plus qu'à exporter les fichiers de votre ordinateur que vous avez préparés vers le FTP en faisant simplement un glisser-déposer.

Ils seront ensuite disponibles en tapant l'adresse du site puis le nom du fichier et son extension (par exemple : http://monsite.site1...emiereImage.gif).


:arrow: Pour savoir comment mettre en ligne une page avec des liens, des images et plein d'autres choses, lisez le tutoriel suivant. ^_^

#2 Toad06

    Modérateur

  • Moderators
  • 36 messages

Posté 22 juin 2007 - 20:32

Etape 2 : Votre première page Web

Quand vous êtes sur une page d'un site web et que vous regardez la barre URL, vous constaterez que l'extension de la page est le plus souvent .html ou .php.

:arrow: Avec la première, vous ne pourrez mettre qu'un type de code appelé HTML et qui vous permet de mettre votre page en forme. Ce langage est forcément utilisé sur tous les sites, c'est pourquoi vous devrez forcément commencer par apprendre celui-ci si vous débutez dans la conception d'un site web. ;)
:arrow: Avec la seconde, vous couplerez HTML avec le langage dynamique PHP. Celui-ci est indispensable si vous voulez ajouter de l'interactivité à votre site, par exemple avec un forum ou un livre d'or. Mais ne soyez pas trop gourmand dès le départ, ce langage est plus compliqué que le premier, donc chaque chose en son temps, prenez le temps de bien comprendre HTML. B)


Favorisez donc toujours l'extension de votre page par .php car, même si à l'heure actuelle vous n'êtes qu'un débutant, plus tard, vous manierez peut-être bien le PHP et donc n'aurez pas à renommer toutes vos pages par l'extension adéquate. :)

Tout site digne de ce nom dispose d'un design. Gold Serveur vous en propose contre une modique somme ici. Cependant, dans le cadre de l'élaboration d'une première page, l'esthétique n'est que facultatif et vous pourrez quand même créer votre page sans kit graphique pour vous entraîner.


Voici quelques exemples de balises HTML, assez simples, pour vous permettre de comprendre la logique de ce langage.
  • <strong>Forum GS</strong> permet de mettre le texte en gras.
  • <em>Forum GS</em> permet de mettre le texte en italique.
  • <ins>Forum GS</ins> permet de souligner le texte.
  • <br /> permet d'aller à la ligne.
  • <a href="http://www.forum-gs.com" target="_blank">Forum GS</a> permet de créer un lien vers une page d'un même site ou d'un site externe. Remplacez "http://www.forum-gs.com" par le site que vous souhaitez. L'attribut "target" est facultatif ; néanmoins, pour ouvrir un lien dans une nouvelle fenêtre, vous devrez le mentionner avec la valeur "_blank" ; mettre une valeur "_self" ou créer un lien sans attribut "target" permet d'ouvrir la page dans la même fenêtre. Précisez le nom du lien entre l'ouverture <a> et la fermeture </a> de la balise. Pour faire un lien vers une page d'un même site, il est possible d'écrire simplement le nom de la page (exemple : sur son site http://www.monsite.com , pour faire un lien vers http://www.monsite.com/page.php , je peux écrire <a href="page.php">Page</a>).
  • <img src="http://www.forum-gs.com/public/style_images/1_site_logo.png" alt="Forum GS" title="Forum d'entraide Gold Serveur" /> permet d'afficher une image. Remplacez "http://www.forum-gs.com/public/style_images/1_site_logo.png" par le lien de la bannière (l'extension doit être un format image, par exemple .jpg, .gif, .png - évitez le format .bmp qui est trop lourd), l'attribut "alt" est obligatoire (cette valeur ne sera affichée à l'écran que si l'image ne peut être chargée), l'attribut "title" est facultatif et permet de donner un titre à l'image qui s'affichera si l'utilisateur laisse son curseur sur l'image.

Notez que ces balises peuvent être combinées entre elles, vous pouvez ainsi créer un texte gras, à la fois italique et souligné, tout comme utiliser une image qui servirait de lien. En voici un exemple.

<strong>Gold-Serveur</strong> est l'<ins>hébergement de qualité <strong>à petit prix</strong></ins>.<br />
Cliquez sur la bannière pour vous inscrire.<br />
<a href="http://www.gold-serveur.com"><img src="http://www.forum-gs.com/public/style_images/1_site_logo.png" alt="Gold Serveur" border="0" /></a>

Ce code donnerait :

Citation

Gold-Serveur est l'hébergement de qualité à petit prix.
Cliquez sur la bannière pour vous inscrire.
Image IPB

Ajoutons une petite précision : dans le code <img> précédent, border="0" a été ajouté comme attribut afin d'éviter qu'un contour bleu n'apparaisse autour de la bannière (à cause du lien).


Tout cela n'est qu'une petite partie des balises qui constituent le langage HTML. Certains diraient même de ne pas les utiliser au profit du CSS. Certes, mais pour un débutant, nous considérons que cette approche est indispensable pour comprendre la logique de la création de pages internet.

Vous trouverez un mémento des balises HTML à cette adresse :
http://www.siteduzer...lises-html.html


:arrow: Maintenant, il ne vous reste plus qu'à consulter des tutoriels plus complets pour vous permettre de réaliser ce que vous souhaitez absolument : créer votre premier site web. B)

#3 Toad06

    Modérateur

  • Moderators
  • 36 messages

Posté 22 juin 2007 - 21:22

Etape 3 : Votre premier site Web

Vous connaissez maintenant le minimum (du minimum) pour vous lancer dans la conception de votre premier site web.
Nous vous conseillons de lire les cours et tutoriels du Site du Zéro qui sont très bien réalisés et qui vous permettent surtout de partir de zéro (c'est le but ^_^ ).
Allez, du courage et au boulot, vous deviendrez peut-être le futur Mark Zuckerberg (créateur de Facebook). :D

:arrow: http://www.siteduzero.com
Et plus particulièrement pour vous orienter vers le bon thème dès le départ :
:arrow: http://www.siteduzer...l5-et-css3.html


Evidemment, nous restons à votre disposition pour toute question ou problème dans les différentes catégories du forum de Gold-Serveur.
Bonne chance ! ;)

L'équipe de Gold-Serveur


--------------------------------------------------------------------------------
  • Tutoriel créé le : 2 juin 2007
  • Dernière modification le : 6 novembre 2011






1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)