[TUTO] Créer un site web - Partie 1 : Le HTML

Invité Lun 20 Déc - 21:55

Dans ce petit tutoriel, je vais vous apprendre a créer une page HTML.

Le tutoriel de compose de trois partie :

- Partie 1 : Le HTML

- Partie 2 : Le CSS

- Partie 3 : Des chose en plus

_________________________________________________________________

- PARTI 1 : Le HTML :

I. Introduction

Le HTML (Hypertext Markup Language) est le langage utilisé pour construire des documents hypertextes pouvant être visualisés sur le Web. Un document HTML peut incorporer du texte, des images, de l'animation
et du son.

Le langage HTML fonctionne selon le principe suivant :
des commandes HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci
Lorsqu'un navigateur traite le document en question, il formate le texte suivant la signification des commandes HTML.
Il y a donc des commandes qui indiquent qu'il s'agit d'un titre, d'une liste d'éléments ou d'un simple paragraphe. Il est également possible d'inclure des objets de nature autre que du texte, tels des images, de l'animation et du son.
Un document HTML peut être créé à l'aide d'un simple éditeur de texte ou encore en employant un éditeur spécialisé qui vous offre une gamme complète d'outils, vous rendant ainsi la tâche beaucoup plus facile.

II. Squelette du document HTML

Un document HTML "standard" doit impérativement commencer par <HTML> et finir par </HTML>.

1). Un peut de vocabulaire

<HTML> </HTML> : Commandes de début et de fin de document
<HEAD> </HEAD> : Informations non affichées concernant le document (Date et auteur par exemple)
<TITLE> </TITLE> : Titre du document. Cette information apparaît dans la barre de titre du client WWW.
<BODY> </BODY> : Corps du document. Toutes les informations affichées par le client WWW y sont contenues.

2). structure de la page

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <HEAD> <TITLE>Le titre de la page ici sera affiché dans l'onglet</TITLE> </HEAD> <BODY> Le contenu de votre site sera ici </BODY> </HTML>

III. Présenté son texte

1). Les Balise HTML

Nous allons voir comment mettre en pages votre texte.

¤ Pour faire des titres, nous utilisons la balise <h> & </h>. le h est suivit d'un numéro.

Exemples :

Code:: <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>

¤ Pour mettre en gras le texte, nous utilisons la balise <b> & </b>

Exemple :

Code:: <b>Il neige !</b> allons dehors !

Se qui va donné :

Il neige ! allons dehors !

¤ Pour mettre un texte en italique, nous utilisons la balise <i> & </i>

Exemple :

Code:: <i>je suis un texte en italique</i>

Se qui va donné :

je suis un texte en italique

¤ Pour faire un paragraphe, nous utilisons la balise <p> & </p>

Exemple :

Code:: <p> Je suis un paragraphe </p>

¤ Pour sauté une ou plusieurs ligne, nous utilisons la balise
ou <br>

Exemple :

Code:: Je me prépare a sauté une ligne J'ai sauté une ligne et je vais encore en sauté une <br>

Pour sauté deux ligne il faut mettre deux foi la balise.

¤ Pour centré du texte ou autre chose, nous utilisons la balise <center> & </center>

Exemple :

Code:: <center>Je suis un texte centré !</center>

¤ Pour faire un lien, nous utilisons la ligne suivante :

Code:: <a href ="http://tutorieldea-z.kanak.fr">Ceci est un lien vers Tutoriel de a - z</a>

¤ Pour faire un lien s'ouvrant dans une nouvelle fenêtre, nous utilisons la ligne suivante :

Code:: <a href ="http://tutorieldea-z.kanak.fr" target="_blank ">Ceci est un lien s'ouvrant dans une nouvelle fenêtre </a>

¤ Pour faire un lien de messagerie, nous utilisons la ligne suivante :

Code:: <a href ="mailto:monemail@mondomaine.fr">Ceci est un lien de messagerie</a>

Il y en plein d'autre mais je ne vais tous vous les cité ici.

IV. Créer la page avec de la couleur

Déjà, il faut placé son code dans un éditeur de texte ( personnellement, j'utilise Notepad++ )

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head><title>Mon super site !</title></head> <body> </body> </html>

Jusqu’ici, vous savez tous se que le code si-dessus veut dire ( si se n'est pas la cas, il faut relire le cours ).

Maintenant Nous allons mettre du texte !

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head><title>Mon super site !</title></head> <body> <center><h1>Bienvenu sur ma première page HTML</h1></center><br /> <br /> <center><h3>Voici mon premier sous titre :O</h3></center><br /> <br /> <center>Voici ma première page HTML, vous pouvez me contacté <a href ="mailto:monemail@mondomaine.fr">ici</a> pour en savoir plus sur l'avancement de mon site !</center> </body> </html>

Vous pouvez enregistrer votre page sous le nom suivant : index.html ( pas obliger index mais le .html est primordial )

Sa devrai vous donné cela :

[TUTO] Créer un site web - Partie 1 : Le HTML Images10

(cliquer pour voir tous )

Nous allons mettre une couleur de fond maintenant, rouge sa vous va ? :

Il faut placer ce petit code la :

Code:: <body bgcolor="red">

entre les balise <head> & </head>

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head><title>Mon super site !</title> <body bgcolor="red"> </head> <body> <center><h1>Bienvenu sur ma première page HTML</h1></center><br /> <br /> <center><h3>Voici mon premier sous titre :O</h3></center><br /> <br /> <center>Voici ma première page HTML, vous pouvez me contacté <a href ="mailto:monemail@mondomaine.fr">ici</a> pour en savoir plus sur l'avancement de mon site !</center> </body> </html>

Sa devrai vous donné cela :

[TUTO] Créer un site web - Partie 1 : Le HTML Images11

Vous pouvez changer les couleur en mettant une couleur en anglais a la place de red dans <body bgcolor="red">

_________________________________________________________________________________

Voila nous avons fini La partie 1. J’espère que sa vous plus et surtout aider !

Bonne journée !