Yatouparla

Membre

Publicité

Dernier...

Créer son site web : HTML

Introduction

Bonjour et bienvenue je m’appelle Thomas et je vais vous apprendre les différentes étapes pour créer son site web. Tout d’abord il faut savoir le différence entre un site web et un blog :
  • Blog : Journal personnel où l’on publie régulièrement des articles sur des sujets diverses. Ne nécessite aucune connaissance informatique mais est relativement peu personnalisable. Pour en créer un : devenez membre et allez ici.
  • Site web : C’est un site du plus simple : Les thermes romains au plus complexe Wanadoo. Entièrement personnalisable, grâce à des langages informatique tels que le php, l’asp, le javascript… Si vous voulez faire un site web lisez cet articles.
Pour faire un site il faut un langage spécial qui va être insérer autour du texte. Pour cela deux méthodes :
  • Un logiciel (éditeur html) tel que Nvu qui sera plus facile de prise en main mais moins personnalisable. Téléchargeable ici
  • Coder soit même en html
Dans le cadre de le deuxième solution il faut télécharger un logiciel : Notepad ++ qui colore le texte pour le rendre plus compréhensible. Pour l'installer choisisez le .exe ici. Une fois installer ouvrez le et faites : enregistrer sous >> nomdufichier.html .

Voyons maintenant les principales balises HTML

D'abord présentation des principales balises (délimitateurs) HTML :

<html>on écrit la page web ici et on referme</html>
<body>on écrit le texte ici et on referme</body>
<b>le texte est en gras</b>
<u>le texte est souligné</u>
<i>le texte est en italique</i>

Vous voyez que toutes les balises s'ouvrent et se referment, si l'on oublie de refermer la page web bug. Commençons par organiser son texte :
<html>

<body>

<center>Yatouparla</center>
<p>Bonjour et bienvenue sur mon site!<br>
Ceci est mon premier test, alors soyez indulgentss'il vous plaît.<br> 
Pour l'instant c'est un peu vide, maisrevenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>

</body>

</html>
cela fait :
Yatouparla

Bonjour et bienvenue sur mon site !
Ceci est mon premier test, alors soyez indulgents s'il vous plaît. Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !

Vous avez vus les nouvelles balises <center> pour...centrer et <p> pour faire un pragraphes.
Mais, j'ai oublié de fermer une balises?? Non, en fait la balise <br> (qui passe à la ligne suivantes) est une exeption, elle ne se referme pas. Bon voyon la taille des titres :
      <html>

<body>

       <h1>Titre super important
</h1>

       <h2>Titre important
</h2>

       <h3>Titre un peu moins important (sous-titre)
</h3>

       <h4>Titre pas trop important
</h4>

       <h5>Titre pas important
</h5>

       <h6>Titre vraiment pas important du tout
</h6>

</body>

</html>
Ce qui fait :

Titre super important

Titre important

Titre un peu moins important (sous-titre)

Titre pas trop important

Titre pas important
Titre vraiment pas important du tout
Petite précision pour h2 et h1 ne tenez pas compte de la couleur. Voila finissons en avec les polices de caractères avec :
<font face="la_police" color="la_couleur_en_anglais"  size="la_taille">le texte soumis à cette police, couleur et taille</font>
Voila maintenant les liens :
<a href="http://l'adresse_du_site.com">le nom du lien</a>
exemple : <a href="http://www.yatouparla.info">yatouparla</a>   
yatouparla
Ceci était un lien dit absolu, maintenant voyons un lien interne (c'est à dire dans le même site).
<a href="le_nom_de_la_page.html">le nom du lien</a>
exemple : <a href="index.php">yatouparla</a>
yatouparla
C'est tout pour les liens vous voyez c'est facile retenez liens absolu ou lien interne.
Bon votre page à des liens, du texte, des paragraphes, des titres, il manque des images alors allons y :
Comme pour les liens l'adresse de l'image peut être absolu ou interne (nous verrons ce dernier cas mais vous savez comment on fait pour les adresses absolues).
<img src="le_nom_de_l'image.jpg">

on peux régler la hauteur, largeur et bord gràce à :
<img src="le_nom_de_l'image.jpg" height="100" width="50" border="4">
Nous allons apprendre à réaliser des boutons,  ce n'est pas forcément très utiles mais c'est plus joli pour les liens.
<input type="button" value="cliquez ici">



Voila, ce bouton n'a aucun effet mais un remplaçant "cliquez ici" par un lien il en deviendra un.
Une autre fonction pour le bouton :
<input type="button" value="Bonjour!" onclick="alert('Bonjour, vous allez bien?')">



Voyons maintenant le formulaire, il est possible de l'envoyé par e-mail ou de le récupéré avec un autre language le PHP :
Enumération
<ul>

<li>Thomas</li>

<li>Alex</li>

</ul>
  • Thomas
  • Alex

on peut aussi entouré les données par <ol></ol> à la place de <ul></ul> en conservant <li>

  1. Thomas
  2. Alex
Voila, bien sûr vous pouvez mettre autant de <li> que vous voulez.

Le menu déroulant
<select>

<option>un</options>

<option>deux</options>
      
<option>trois</options>
      
<option>quatre</options>

<option>cinq</options>

</select>

Bien sur "un" peux être remplacé par un lien.

cases à cocher
<input type="radio" name="choix" value="un">avion

<input type="radio" name="choix" value="deux">voiture

<input type="radio" name="choix" value="trois">bus
avion voiture bus

Ou bien
<input type="checkbox">avion

<input type="checkbox">voiture

<input type="checkbox">car
avion voiture car

Maintenant créons un champs vide
votre prénom :
<input type="text" name="prenom" size="10">

votre prénom :


Un champs plus grands maintenant :
Vos commentaires :
<textarea rows="6" cols="20"></textarea>

Vos commentaires :

Les tableau
Un tableau s'ouvre avec "table" une ligne avec "tr" et une case avec "td" : 
<table>
<tr>
<td>Nom</td><td>Prenom</td><td>Age</td>
</tr>
<tr>
<td>Neruda</td><td>Pablo</td><td>31</td>
</tr>
<tr>
<td>Boss</td><td>Hugo</td><td>48</td>
</tr>
<tr>
<td>Hugo</td><td>Victor</td><td>56</td>
</tr>
</table>
Il y a quelques petites fonctions en plus dans les tableau mais je ne veux pas vous surcharger.
Pour finir les formulaires pas très utiles sans le php mais si vous souhaitez mettre du php dans votre site c'est très utiles. 
		<form method="post" action="html.php">
    <p>
       Prenom :<br />
		<input type="text" name="prenom" /><br><br>

		Message :<br/>
        <textarea name="message" rows="10" cols="35"></textarea> <br />

        <input type="submit" value="Envoyer" />
    </p>
    </form>


Explication :
method='post' veut dire que l'on envoie avec post (on utilisera toujours cette fonction)
action="html.php" C'est la page où vont aller les données du formulaire
<input type="submit" value="Envoyer" /> Créer le bouton valider
Bien sur vous pouvez utiliser d'autres fonctions que le textarea et que le champs tel que les cases à cocher.
Cela fait :

Prenom :


Message :

Voilà vous avez tous les éléments théorique pour faire un site internet ou du moins organiser un texte :

  • Vous pouvez mettre un fond image/couleur
  • Organiser le texte taille, couleur, place, forme, police
  • Vous pouvez insérez des images
  • Vous pouvez faire des liens
Ceci suffit pour faire un site simple tels que celui montrer en haut mais pas un site un peu plus complexe comme celui là où il faut du css, ce sera l'objet d'un prochaint chapitre.