Réaliser une page complète pour diffuser son sujet

la Mise en page

L'objectif de ce tutorial est de creer une page web complete a partir d'une page déjà crée. En effet, ici, nous allons voir comment creer sa page pour pouvoir diffuser son sujet. Dans un premier temps, nous allons travailler sur les differents morceaux de code que vous aurez besoin pour réaliser la page que vous souhaiter.

Dans un premier temps, sachez qu'il ne faut pas un logiciel qui coute 1000 € pour coder une page. Pour les vieux de la vieille, le bloc note est l'objet de base et le plus fiable pour creer une page : il vous suffit d'ouvrir le bloc note et d'utiliser sont clavier.Si vous avez des erreurs, vous ne pourrez vous en prendre qu'a vous !
Personnellement, je vous conseillerais plutot de prendre notepad++, car il a l'avantage de vous marquer le numéro de la ligne et de mettre en couleur les codes XHTML et CSS ( et bien d'autres encore).
vous pouvez télécharger notepad++ en cliquant sur : notepad++
D'autres logiciels plus pratiques vous permettent de creer des pages web en toute simplicité. Dremaweaver est par exemple un très bon outil car il permet de visualiser le travail effectuer directement, sans avoir a passer par un naviguateur. De plus, il permet se simplifier la tache car il possede une interface qui permet de créer une page comme nous le ferions avec un traitement de texte telle que word. Malheureusement, ce logiciel est payant mais il existe une version d'évaluation qui dure 30 jours.En revanche, pour tout les utilisateurs d'une distribution linux, vous pourrez utiliser un logiciel gratuit, en francais, offrant comme dreamweaver, une visualisation de son travail ! 

La suite de ce tutorial se base sur notepad++. Nous allons directement nous lancer dans les balises de bases. lancer notepad++ et aller dans l'onglet langage et cocher HTML.Ensuite téléchargez la page squelette du site pour pouvoir la remplir : squelette.html. Ouvrez la page avec notepad++ puis admirer ! ouah c'est tout moche, ya plien de truc partout qui veulent rien dire. C'est pas grave, on se reprend, on va chercher une biere dans son frigo et on la pose a coté du clavier après avoir bu une premiere gorgé. Ne supprimer rien , ce qui vous interresse se trouve à la ligne 26.

les balises <h2> et </h2> vous indique que "Présentation du site" est un Grand titre. Lorsque vous mettez ces balises sur un texte ou un mots, celui ci sra automatiquement souligné et "pucé". par exemple, si j'écris <h2>ceci est un test</h2> , je vais voir apparaitre :

ceci est un test

Formidable n'est-ce pas ? vous pouvez aussi faire un titre un peu different avec les balises <h3> et </h3>, par exemple <h3>un deuxieme test</h3> et vous obtenez ceci :

un deuxième test

Génial, on sait déjà faire les deux titres... mais pour les paragraphes on fait comment ? toujours avec la meme facilité, il vous faut ajouter aux deux extrémités de votre texte, deux balises <p> et </p> avec p comme paragraphe ou phrase. Noter le petit D&eacute;sormais, c'est de ma faute car pour rédiger rapidement j'utilise dreamweaver et il remplace les é par des &eacute; .

Bon aller, on va voir un petite truc un peu spécial, les sauts de lignes. Il existe deux sauts de lignes differents. le grand saut et le petit. pour voir la difference, le plus simple est de le montrer par un exemple :

le grand saut de lignes:
on fais un paragraphe :

et vous obtenez ceci :

la premiere ligne

la deuxieme ligne

 

le petit saut de ligne :

et vous obtenez ceci :

premiere ligne
deuxieme ligne

bon il y a une petite tabulation a cause du CSS, ne vous en préoccupez pas.

Cool, vous pouvez déjà écrire quelques pavés de texte. Mais du texte seul, parfois c'est laçant. Ajoutons quelques images !

pour inserer une image, il faut écrire :

et voila, l'image est insérer.

 

Désormais, regardons comment insérer une image ajouter du texte a coté de celle-ci.
Pour y parvenir, c'est assez facile, il vous suffit de saisir <img src="adresse_de_votre_image.jpg" alt="" style="margin: 0pt 1em 1em 0pt; float: left;">Pour
y parvenir, c'est assez facile,</p> et le tour est joué ! vous pouvez très bien remplacer left par right pour avoir cette fois ci, l'image a droite.
La mise en page reste très claire et très propre du point de vue du code. Quelqu'un qui se connecte avec un modem 56k pourra charger la page a une vitesse remarquable. De nos jours, les pages sur internet sont de plus en plus lourdes grâce a la monté des débits. Sachez que certaines personnes sont avec des débits a 1 Mbps et les pages des certains sites sont tellement importantes au niveau de la taille que la personne met environ cinq secondes et plus pour en afficher la totalités .

voila le code pour ce bloque de texte avec l'image sur la gauche :

Désormais, la mise en page n'a plus aucun secret pour vous !

et pour finir, si votre sujet est trop long, vous pouvez faire plusieurs pages. pour cela il vous faux rediriger votre lecteur vers une autre page

par exemple, faisons un lien pour aller a la page d'acceuil :

<p><a href="http://spider.meu.free.fr"><font color="#0066FF">Retour à la page d'accueil</font></a></p>

Retour à la page d'accueil

notez que <font color="#0066FF"> permet de change la couleur .
a hhref pointe vers l'autre page et retour a la page d'acceuil est le message pour aller a la page qui vous souhaiter.

 

Pour aller plus loin

je vous ai juste donné les bases pour faire une page, vous pouvez trouver des sites qui vous en diront plus comme le site du zero.
vous pouvez aussi sélectionner la partie qui vous interresse (avec la souris) sur une page et faire un clic droit puis faire afficher le code source de la sélection et vous aurez la partie du code que vous souhaitez.

voila, c'est fini, je rajouterais des éléments supplémentaires si vous le désirez.

Retour à la page d'accueil