Vous êtes ici: Accueil / Informatique / Site Web / Dreamweaver 8 / Code HTML

Code HTML

Ici nous allons commencer la réalisation de notre page.

  1. Nouveau fichier
  2. Présentation
  3. HTML

Nouveau Fichier

Nous allons activer l'onglet Navigation Fichiers puis le sous onglet Fichiers.

imgfic

Pour créer un nouveau fichier faites un clic droite sur site puis sur créer un nouveau fichier...

Renommer le sous index.html (Ne pas oublier le .html)

Pour info: le fichier index.html est le premier fichier de votre projet et sera votre page d'accueil quand un internaute regarde votre site.

Pour les autres pages nommer les de manière à les reconnaître facilement.

Un double clic --> Pour faire apparaître votre page

Présentation

Dreamweaver 8 propose 3 modes de présentation

Mode Code

prescod

Resterons pour le moment en mode code

Le HTML

C'est un langage pour définir votre page et pouvant ainsi être affichée sur votre navigateur internet. Pour connaître les codes HTML je vous report sur ce site.

Chaque élément (texte, tableau, image,..) est encadré par des balises

(<p> </p>) pour paragraphe, (<table> </table) pour tableau, (<img> </img>) pour image, etc...

Nous n'allons pas vous apprendre ici le langage HTML et passons maintenant en mode création.

 

 

MODE CREATION

imgcrea

Avant toute chose, faites un dessin sur une feuille représentant l'aperçu de votre projet.
Que voulez faire?

Un logo ou en tête, un menu, un contenu, un pied de page.

Une manière simple pour réaliser une page est d'utiliser les tableaux. Cela donne toujours une belle présentation.

Les présentations par calque ou division sont un peu plus complexes.

 

 

Les Balise HTML

Document

<html></html> : document html
<body></body> : corps du document

Titres

<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6)

Éléments de texte

<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li>: élement d'une liste
<a href=""></a> : lien hypertexte

Tableau

<table></table> : tableau
<th></th> : légende de ligne ou de colonne
<tr></tr> : ligne du tableau
<td></td> : colonne du tableau

Positionnement

<div></div> : définition de bloc