.,-*'^'~*-.,_,.-*~Shuu et Haruka~*-.,_,.-*-,.
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Quelque chose pourrait se cacher derrière ces disputes?
 
AccueilAccueil  PortailPortail  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

 

 [Introduction] HTML

Aller en bas 
2 participants
AuteurMessage
Morsula
::Tout est économique::
Morsula


Nombre de messages : 203
Localisation : France, Bas Rhin (67)
Date d'inscription : 06/03/2005

[Introduction] HTML Empty
MessageSujet: [Introduction] HTML   [Introduction] HTML EmptySam 14 Mai à 20:16

Bon, je peux pas résister à l'envie de poster une petite introduction au HTML qui je l'espère servira aux débutants qui souhaitent commencer à créer des pages Web ! Il faut savoir qu'il n'est pas nécessaire de connaître le HTML pour créer une page Web mais c'est comment dire... mieux, plus fun de connaître un peu de HTML on va dire !


I. Page Web - mécanismes

Quand vous surfez sur Internet vous utilisez forcément un logiciel pour afficher vos page Web, ce logiciel ce nomme navigateur. Il existe plusieurs navigateurs tel que Mozilla, Internet Explorer, Netscape, etc.

Lorsque vous tapez une Url (Universal Ressource Link) vous émettez une requête, si la page que vous cherchez est présente sur un serveur ce dernier enverra le code HTML qui servira à reconstituer la page dans votre navigateur ou si la page demandé n'est pas disponible il vous enverra quand même du code HTML mais qui servira à créer une page vous disant que la page que vous recherchez n'existe pas.


II. A la découverte du HTML

Vous savez donc maintenant en gros comment fonctionne une page et que le HTML est un code, c'est à dire un fichier texte, qui sert à faire des pages Web. Et bien comme dans tout langage il y a une syntaxe à respecter, une grammaire et une orthographe, le HTML n'échape donc pas à la règle mais ne vous inquiétez il reste très simple à apprendre.

Voici à quoi ressemble du code HTML :

Code:
<html>
<head>
<title>No title</title>
</head>
<body>
<p>Hello, I am ...</p>
<p>I like ... and ...</p>
<p>There is my mail adress : <a href="..">...</a></p>
</body>
</html>

Vous ne comprenez rien ? Ne vous vous en faites pas, nous allons y aller progressivelment, vous verrez le HTML n'est rien de bien méchant.

Le HTML est un code qui s'enregistre dans un fichier texte spécial qui possède l'extension .htm ou .html ; vous en déduisez donc ? Allez, naturellement ? Et oui, on peut éditer du code HTML avec le Bloc Note, qui est bien aussi pour commencer mais vous pouvez utiliser un éditeur spécialisé tel que Dreamweaver, Front Page, Jext, etc.

/!\ Quand vous codez du HTML n'oubliez pas de sauvegarder avec l'extension .htm !

Regardez bien le code, si vous savez quelques mots d'anglais vous pourrez très vite deviner la signification de ce textye étrange. Vous remarquez du texte entre les signes "<" et ">", ce sont des balises, il y a une balise de début (ouvrante) et une balise de fin (fermante), tel que :

Code:
<balise>Le texte est encadré par des balises.</balise>

Le code HTML est une suite logique de balises. Vous en savez maintenant assez pour commencer à créer votre première page Web !


/!\ N'oubliez pas, les balises encadrent du texte mais il y a parfois des exceptions avec des balises dites "orphelines", c'est à dire qu'elle ne possède pas une balise dite fermante.

HTML => Hyper Text Markup Language.


III. Votre première page Web.

Allons y tout de suite ! Ouvez votre éditeur de page Web.

Tapez le code suivant, nous expliquerons tout après :

Code:
<html>
<title>Ma première page !</title>
<body>
Waouh, c'est ma première page Web !!!
</body>
</html>

Du code HTML commence toujours par la balise <html> et se termine toujours par la balise </html>. Entre les balises <title></title> vous placez le titre de votre page Web et entre les balises <body></body> le contenu de votre page Web qui sera affiché dans le navigateur.

Ouvrez votre page dans avec votre navigateur vous verrez le titre dans la barre de titre et le texte qui est entre <body></body> dans la partie de votre navigateur où s'affiche habituellement les pages que vous visitez.

Vous avez compris le principe ?

Ouais bof du texte pas terrible me direz vous ? Mais nous débutons donc n'allons pas trop vite...


IV. Formatage de base.

Formater du texte c'est le mettre en forme, nous allons voir ensemble ici quelques balises d'usage fréquent pour mettre en valeur votre texte.

Mais avant, vous aurez dans doute remarqué que quand vous écrivez du texte entre les balises <body></body> et que si vous sautez une ligne il n'y a aucun saut de ligne visible sur votre page... Pour ça il faut utiliser la balise <br> qui est une balise orpheline.

Code:
<body>
Mon texte 1<br>
Mon texte 2<br>
<br>
Mon texte 3
</body>

/!\ deux balises <br> créent un espace blanc entre du texte.

Pour mettre votre texte en gras utilisez les balises <b></b>
Pour mettre votre texte en italique utilisez les balises <i></i>
Pour souligner votre texte utilisez les balises <u></u>

Code:
<html>
<title>Exemple</title>
<body>
<br>
Mon texte <b>en gras</b> !<br>
<br>
Mon texte en <i>italique</i> !<br>
<br>
Mon texte en <b><i>en gras et italique</i></b> !<br>
<br>
Mo texte en <b> gras puis</b> <u>en souligné</u>!
</body>
</html>

/!\ Veillez à toujours respecter un ordre type <1><2><3></3></2></1>.


V. Créer des liens hypertextes

Vous savez ce qu'est un lien je suppose ? Vous savez, ces liens qui sont habituellement bleu et souligné, ils servent à naviguer sur le Web, ainsi vous cliquez sur un lien et vous arrivez sur une autre page.

Nous imaginons donc que nous avez deux pages dans le même répertoire (c'est important) : p1.htm et p2.htm, nous voulons créer un lien entre p1 et p2. Ouvrez p1 et insérez le code suivant entre les balises <body></body> :

Code:
<a href="p2.htm">Cliquez ici pour aller sur la page p2.htm !</a>

Vous remarquez donc les balises <a></a> qui encadrent le texte cliquable. le href qui se trouve dans la balise ouvrante est un attribut de cette dernière, il a pour valeur l'adresse de la page où le lien pointe.

Code:
<a href="adresse de la page Web">texte cliquable</a>

Vous pouvez également faire pointer votre lien vers une adresse e-mail :

Code:
<a href="mailto:adresse@e-mail">Cliquez ici pour envoyer un e-mail.</a>

/!\ N'oubliez pas le mailto: suivit de l'adresse e-mail si non il y aura une erreur et vous ne pourrez pas envoyer d'e-mail.


VI. Mettre du texte en couleur

Vous savez donc maintenant ce qu'est un attribut. Un attribut définit une caractéristique d'une balise et porte une valeur, tel que la balise <a> possède l'attribut href qui caractérise l'endroit où le lien pointe et sa valeur est une adresse.

Pour les couleurs c'est très facile, par défaut vous avez du texte noir sur fond blanc, nous verrons comment changer la couleur de fond dans le prochain chapitre.

Si vous souhaitez utiliser toujours la même couleur, par exemple du vert, vous définirez l'attribut 'text' de la balise <body>.

Code:
<body text="green">
Ce texte est vert !</body>

Imaginons maintenant que vous souhaitez juste mettre un mot en évidence avec un autre couleur et du gras, vous procéderez comme ça :

Code:
<body text="green">
Ce texte est vert !<br>
<font color="blue">Ce texte est bleu !</font><br>
Ce texte est vert !

Syntaxes des balises :

Code:
<body text="couleur du texte">
<font color="couleur du texte">...</font>

/!\ Pour les couleurs reportez-vous à l'annexe 1.

Bon codage !

Mors'


[Suite à venir prochainement...]


Dernière édition par le Lun 16 Mai à 14:26, édité 2 fois
Revenir en haut Aller en bas
Morsula
::Tout est économique::
Morsula


Nombre de messages : 203
Localisation : France, Bas Rhin (67)
Date d'inscription : 06/03/2005

[Introduction] HTML Empty
MessageSujet: Re: [Introduction] HTML   [Introduction] HTML EmptySam 14 Mai à 20:23

Annexes

Vous trouverez ici des annexes, servez vous en quand l'introduction vous le demandera ! Wink

A1 - couleurs

Code:
Noir : "black"
Blanc : "white"
Rouge : "red"
Bleu : "blue"
Vert : "green"
Jaune : "yellow"
Orange : "orange"
Violet : "purple"
Gris : "grey"
Brun : "brown"
Rose : "pink"
Revenir en haut Aller en bas
Legree
::Dark utilisateur::
Legree


Nombre de messages : 221
Date d'inscription : 05/03/2005

[Introduction] HTML Empty
MessageSujet: Re: [Introduction] HTML   [Introduction] HTML EmptySam 14 Mai à 20:33

Je connait des gens a qui sa va interesser =)
Revenir en haut Aller en bas
Contenu sponsorisé





[Introduction] HTML Empty
MessageSujet: Re: [Introduction] HTML   [Introduction] HTML Empty

Revenir en haut Aller en bas
 
[Introduction] HTML
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
.,-*'^'~*-.,_,.-*~Shuu et Haruka~*-.,_,.-*-,. :: Shumoku (divers) :: Rubrique Informatique-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser