Univers Star Wars - Topic "[Tutorial] : Le html"

Bienvenue

Ce forum est consacré a l'univers de Star Wars

N'oubliez pas d'aller consulter le règlement de ce forum.

Univers Star Wars

Programmation (2 topics, 8 messages)

Topic "[Tutorial] : Le html" (Messages 1 à 6 sur 6)

Dernier message par kirua, le 17/01 à 16:56:19

Anonyme :	S'inscrire S'identifier
Outils :	Recherche

Bas de la page Topics

kirua

Mangas/animes addict

inscrit le 27/11/2005

le 27/11/2005 à 18:27:53

[Tutorial] : Le html

Salut à tous, on va commencer par un tuto sur le html, langage assez facile a apprendre pour un débutant en la matière de création de site web.
Le "cours" sera illustré par des images montrant les exemples donnés.

Pour commencer à faire du html, il vous faut un programme ( si si, je vous jure

), alors dans les programme assez facile d'utilisation il y en a 2 dont je vais vous parler : front page ( assez connu), Dreamweaver MX (très connu et celui que j'utilise), personnellement je vous conseillerais plutôt dreamweaver, assez facile d'utilisation et puis j'expliquerai ses fonctions. Front page je ne le connais pas trop mais j'essayerais de m'y forcer

. de toute facon le html dans n'importe quel programme reste le même

ceci dit nous allons pouvoir commencer notre petit tuto

Ce tuto est fait à la base pour ceux qui n'ont pas, ou peu de connaissance en html, les autres peuvent passer leur chemin, ce cours ne leur sera d'aucune aide.

Début du cours : Faire apparaitre du texte à l'écran.

Alors voila la premiere chose a savoir faire c'est bien sur ecrire du texte à l'ecran, ca semble tout "con" mais si vous n'y connaissez rien ou pas grand chose vous êtes peut etre un peu perdu dans les balises, je vais dire que c'est normal

Alors comme balise nous avons quoi?
la balise : <html>
<head>
</head>
<body>
</body>
</html>

Pour un début ce sont les 6 balises indispensables, j'en ajouterai au fur et a mesur evidemment.

la balise <html></html> est indispensable pour commencer votre code, vous devez commencer par la balise <html> et quand vous avez fini votre code </html>, cette balise contiendra toutes les autres balises que vous aurez a ecire comme la balise <body></body>.

apres la balise html nous avons la balise <head></head> : je vous expliquerai plus tard son fonctionement, ce n'est pas tres important pour l'instant

ensuite nous avont la balises <body></body> :qui elle sert a mettre les éléments de couleurs de votre page par exemple, votre image de fond,...

Apperçu

<html>
<head>
</head>

<body>
</body>
</html>

Voilà ce que vous devriez avoir pour le moment, maintenant nous allons passer au chose "pratique"

Apperçu amélioré

Le meme code mais avec des balises insérées dans la partie body:

<html>
<head>
</head>

<body>
<bg color="blue">
</body>
</html>

Ce code vous donne si vous l'enregistrer, puis que vous l'ouvrer une page bleu, vous avez copris, c'est grace au bg color="blue". (bg= background = arrière-plan en francais)
Facile non, bon faut dire aussi que c'était franchement pas pousse non plus lol mais vous inquiètez pas ca venir bientot plus interessant.

Bon c'est pas tout ca mais le but de ce mini chapitre c'est de mettre du texte à l'écran, donc voici comment procéder :

Afficher du texte

<html>
<head>
</head>

<body>
<bg color="blue">
<font color="white">Voici un bout de texte, tout simple à faire </font>
</body>
</html>

Voila avec ce bout de code vous avez une page avec un fond bleu et du texte ecris en blanc, je sais c'est pas encore ça, mais faut passer par là.
ici votre texte s'affichera par défaut en haut à gauche, vous pouver le centrer grace à la balise <center>text</center>
ou encore le mettre à droite <div align="right">text</div>
Il ne reste plus qu'a voir quelques fonction avant de vraiment commencer un site web.

Bon il nous reste a voir quelques balises assez simple d'utilisation, à savoir celle pour mettre en gras, souligner, italique, retour à la ligne, ajuster en paragraphe, et la taille du texte.

Appercu avec gras souligner et italique

<html>
<head>
</head>

<body>
<bg color="blue">
<font color="white"><u><b><i>voici un bout de texte</i></b></u></font>
</body>
</html>

Voila avec ce code votre texte est en gras, souligner et en italique, a noter que la balise <u> sert a souligner, la balise <b> à mettre en gras et la balise <i> a mettre en italique. Maintenant si vous voulez noter plus de texte, il vous faudra parfois faire des retours à la ligne ou faire des paragraphe pour que ce soit plus "joli"

voici comment faire.

Retour à la ligne et paragraphe

<html>
<head>
</head>

<body>
<bg color=blue">
voici un morceau de texte qui s'affiche normalement
<br> voici un texte avec un retour à la ligne.
<p>Voici un texte qui commencera a former un paragraphe</p>
</body>
</html>

Alors ici le retour a la ligne se fait grace à la balise <br>, qui elle si vous avez remarquer ne doit pas etre fermee, et le paragraphe se fait grace à la balise <p> . Ils nous restent encore les differentes tailles de texte, c'est partit.

Taille du texte

<html>
<head>
</head>

<body>
<bg color="blue">
<h1>voici du texte assez petit</h1>
<h2>voici du texte petit</h2>
<h3>voici du texte de taille moyenne</h3>
<h4>voici du texte de taille un peu plus grande que la moyenne</h4>
<h5>voici du texte de taille assez grande</h5>
<h6>voici du texte tres grand</h6>
</body>
</html>

Voila grace a ceci vous savez tout ce qu'il faut pour afficher du texte à l'ecran et le rendre plus "beau", nous allons maintenant passer a la deuxieme partie.

Message modifié le 28/11 à 08:55:34 par kirua.

kirua

Modérateur

Mangas/animes addict

inscrit le 27/11/2005

le 28/11/2005 à 08:59:23

[Tutorial] : Le html

2eme partie: insérer des images et faire des liens

Alors voila maintenant que vous savez afficher du texte à l'ecran, vous voulez surement afficher des images pour illustrer ce que vous dites et s'il le faut faire un lien vers une page à partir de cette image ou un simple lien "cliquer ici". On va commencer par l'insertion d'image, c'est partit

Insérer une image

<html>
<head>
</head>

<body>
<bg color="blue">
<img src="chemin de votre image">
</body>
<html>

Voila maintenant vous avez une image pour illustrer votre texte, maintenant comment faire pour que si je clique sur l'image j'arrive sur un autre site? Pour ca il faut d'abord voir comment faire un lien tout simple.

Lien

<html>
<head>
</head>

<body>
<bg color="blue">
<a href="adresse site">cliquez-ici</a>
</body>
</html>

Voila grace à ce code, si vous cliquez sur "cliquez-ici" vous arriverez sur la page internet que vous avez placee a l'interieur du code. On peut maintenant faire un Lien Image :

Lien Image

<html>
<head>
</head>

<body>
<bg color="blue">
<a href=adresse du site"><img src="chemin de votre image"></a>
</body>
</html>

Grace a ce code si vous cliquez sur l'image vous arriverez sur le site.
Je sais c'est pas génial car jusqu'a maintenant pour afficher du texte a certain endroit vous avez la balise center et la balise div align... alors pour que ca aille un peu plus d'allure il faut passer au tableau.

Message modifié le 28/11 à 14:20:18 par kirua.

kirua

Modérateur

Mangas/animes addict

inscrit le 27/11/2005

le 28/11/2005 à 14:22:30

[Tutorial] : Le html

3eme partie: créer un tableau :

Ici la création de tableau va nous aider a placer tu texte et une image par exemple l'un a côte de l'autre ou deux voir plusieurs images l'unes a cote de l'autres.
Pour commencer voici comment faire un tableau tout simple avec seulement du texte :

Tableau

<html>
<head>
<title>Tableau</title>
</head>
<body bgcolor="#FFFFFF">
<table width=" 100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td>
<div align="center">Nom</div> </td>
<td>
<div align="center">Prenom</div> </td>
<td>
<div align="center">Cote</div> </td>
</tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Enregistrer votre page et vous verrez ce que ca donne

Pour les tableau il existe 3 balises qui sont :
<table></table>

crée le tableau
<tr></tr>

designe les rangées
<td></td>

designe les colones
Mais existe aussi de nombreux attributs, je ne vous citerai ici que les principaux:
Border : defini l'epaisseur de la bordure du tableau ( elle peut etre a 0 ca ne cause pas de probleme)
cellpadding :Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau.
cellspacing : désigne l'espace entre les cellules
bordercolor : désigne la couleur des bordures
bgcolor :définit la couleur de fond du tableau ou de la celleule
background : spécifie l'URL de l'image de fond du tableau, Internet Explorer seulement

Si vous voulez mettre un image a la place du texte, il vous suffit d'inserer l'adresse de l'image grace à la balise <img src="..."> et de a mettre dans une de vos partie du tableau.

Message modifié le 30/11 à 16:16:07 par kirua.

kirua

Modérateur

Mangas/animes addict

inscrit le 27/11/2005

le 30/11/2005 à 16:29:53

[Tutorial] : Le html

4eme partie: Les Frames

Bon maintenant notre page ayant une organisation un peu mieux, nous allons voir comment la rendre encore mieux

, parce que la tout tient sur un seule page et vous trouvez peut etre ca "chiant", alors on va l'ameliorer avec des Frames.

Message modifié le 30/11 à 16:30:56 par kirua.

Scorpio

http://www.soleil-lesite.com/images/lien.gif

~
Au pays des cyclopes le borgne passe inaperçu.
~
Starfic Forum !

inscrit le 03/03/2003

le 08/01/2006 à 12:26:45

[Tutorial] : Le html

Tu t'es donné avec ce tuto HTML

kirua

Modérateur

Mangas/animes addict
~
Staff USW

inscrit le 27/11/2005

le 17/01/2006 à 16:56:18

[Tutorial] : Le html

j'essaie mais le prob c'est que c'est clair dans ma tete mais peut etre pas autant dans les explications lol
faudra que j'essaie de faire ca plus clairement si je continue avec des truc plus difficile genre php

Haut de la page Topics

Vous ne pouvez pas ajouter de messages.

Forum gratuit proposé par v 2.7 alpha 1 - Un service -

Page générée en 0,022 secondes le 13/09 à 02:44:12.