Accueil  Calendrier  FAQ  Rechercher  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 Une page HTML basique

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Comateen
Young designer
avatar

Féminin
Nombre de messages : 261
Age : 24
Localisation : Le pays où l'on n'arrive jamais.
Logiciels : Photoshop CS4

MessageSujet: Une page HTML basique   Ven 1 Mai - 15:24

Bases d'HTML

A présent que vous avez compris la différence entre une page HTML et une page CSS, on va voir à quoi ressemble une page html. Je sais, on dirait un peu du chinois comme ça, mais vous verrez que c'est en réalité assez simple =).

Tout d'abord, il faut savoir que l'html fonctionne sous principe de balises, comme en PHBB sur le forum. Il existe des balises qui vont par paire, comme :
Code:
<machin> blabla </machin>
. Et des balises uniques, comme
Code:
<ht />
. Bien sûr, les balises que j'ai notées ici n'existent pas ^^'. On utilisera énormément les balises qui vont par paire =).

Donc... Voici le code d'une page qui servira de base (un peu améliorée tout de même) à chaque fois qu'on voudra créer une page =). (Toutes les choses contenues entre <!-- --> sont des commentaires annotant le code).

Code:
<html>
<head>
<title>TITRE DE VOTRE SITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="style.css"/>
</head>


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="contenu">
<!-- CONTENU CONTENU CONTENU CONTENU CONTENU CONTENU CONTENU -->
</div>

<div class="menu">
<!-- MENU MENU MENU MENU MENU MENU MENU -->
</div>

<!-- toujours dans body, votre layout -->
<table id="Tableau_01" width="700" height="500" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td>
         <img src="images/index_01.jpg" width="700" height="50" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_02.jpg" width="700" height="50" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_03.jpg" width="700" height="50" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/index_04.jpg" width="700" height="50" alt=""></td>
   </tr>
</table> <!-- fin du layout -->

</body> <!--fermeture de body -->

</html> <!-- fin de la page -->

<html > ouvre la page.

Entre les balises head, on va trouver les informations techniques relatives à la page html. L'encodage des caractères, à quel fichier css il est lié, etc.. La seule chose qu'on modifiera là sera le titre de votre site, entre les balises title.

Entre les balises body, c'est tout tout tout le contenu de votre site. On passera donc la majeure partie de notre temps là-dedans =). les leftmargin et autres servent à positionner le body sur votre layout. Ici, les valeurs sont à zéro car on modifiera tout ça dans le css =).

Toujours dans body, j'ai ouvert deux "blocs" div avec un nom (=class). Le nom servira à ajuster les propriétés de chaque bloc dans le css =).

Pour finir, j'ai placé mon layout sous forme d'un tableau (entre les balises table).
Afin de faciliter le chargement de la page, j'ai découpé mon layout en bandelettes horizontales que j'ai ensuite placé dans un tableau à une colonne et à autant de lignes qu'il y a de bandelettes =). La balise tr indique qu'il s'agit d'une ligne, et la balise td qu'il s'agit d'une celulle de la ligne dans laquelle elle est contenue =). Img src indique où le navgateur doit aller chercher l'image (la bandelette) et widht et height sont simplement les largeurs et hauteurs de la bandelette =). (Ceci peut être réalisé très facilement à l'aide de Photoshop...sinon il vous faudra faire cela à la main)

Et finalement, on va fermer la page avec </html >.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://commeuneclatderire.skyblog.com
 
Une page HTML basique
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande une page HTML
» Page Html
» [résolu] Lien dans image survolée vers page html
» Intégrer une page HTML dans son programme ?
» Valider formulaire page html [RESOLU]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: Les tutoriaux :: Le HTML-
Sauter vers: