ASTUCES-INFOS PRATIQUES WINDOWS

tutoriels et astuces windows
 
AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 Qu'est-ce que le HTML et à quoi cela sert-il ?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
nikola
Rang: Administrateur


Nombre de messages : 410
Localisation : region parisienne 92
Date d'inscription : 16/12/2004

MessageSujet: Qu'est-ce que le HTML et à quoi cela sert-il ?   Mar 28 Déc à 11:42

1. Qu'est-ce que le HTML et à quoi cela sert-il ?




Généralités

Pour faire simple, le langage HTML n'est absolument pas un langage de programmation comme le sont le PHP, l'ASP ou même le C++. Le langage HTML est définit comme un langage de description, c'est à dire qu'il est là pour décrire vos pages. Pour faire encore plus simple, il est utilisé pour mettre en forme. Ainsi, lorsqu'on exploite à fond ses possibilités, il est possible d'obtenir de très beaux sites plus ou moins lourds et plus ou moins complexes.

Par exemple :
- http://starmnemosys.free.fr/mnemosys/
- http://www.terran-starcraft.fr.st/acathla
Il y en a encore pleins d'autres, mais la liste serait trop longue a donner

Avant de créer les pages...

Avant de créer son site, il faut commencer par le définir. Je veux dire par là qu'il lui faut trouver un thème qui avant toute chose doit vous plaire à vous. Après, s'il plaît en plus aux autres, tant mieux
Ensuite, il vous faut l'imaginer. Je vous recommande de surfer un peu afin de trouver un design qui vous plaît et pourquoi pas des idées de contenu ou de présentation voire même d'options qui vous semblent intéressantes.

Il éxiste également des sites qui vous proposent des idées en graphisme voir même carrément des kit graphiques que vous n'avez plus qu'à remplir. Une petite recherche sur Google ou Yahoo vous permettra de les trouver aisément.

Enfin, il vous faut trouver un hébergement. Et suivant vos éxigences, ça peut être très facile ou très dure. Toutefois, des hébergeurs gratuits pour des sites en HTML suffisent et il y en a des centaines. Parfois même, les Fournisseurs d'Accès Internet (FAI) en proposent (Free, Tiscali, Club-Internet, Wanadoo...).
Les gratuits les plus connus :
- Multimania-Lycos
- iFrance
- Chez.com
- Voila.fr
Mais il en existe bien d'autres ! Encore une fois, une petite recherche sur un moteur vous permettra d'en trouver plusieurs.

Les logiciels utilisables

En HTML, vous avez le choix entre utiliser des éditeurs wyziwyg, c'est à dire qui affiche un aperçue de vos pages en temps réel. Mais à ce moment là, suivant comment il les affiche, ces cours ne vous sont d'aucune utilité. Soit alors, un éditeur qui ne l'est pas et qui ne vous présente que la page dans laquelle il faut taper le code. Ainsi, le bloc-note de Windows suffit. Mais si vous souhaitez mettre un peu de couleur dans vos pages pour différencier le texte du code, vous pouvez en utiliser d'autres.
Voici ceux que j'utilise ou (utilisais) :
- Editeur Wyziwyg : Dreamweaver
Il en existe d'autres comme :
Editeurs Wyziwyg : Webexpert, Webpublisher, Frontpage, etc... Mais le meilleurs reste Dreamweaver (ce n'est que mons avis).
- Bloc-Note
- Purple Editor (gère de très nombreux langage de programmation en plus) que j'utilise de temps en temps.

Voilà... Maintenant passons aux choses sérieuses...



2. Les bases du HTML (MAJ)

Dans le chapitre précédent je vous disais que le HTML était un langage descriptif. C'est effectivement le cas, toutefois il ne s'agit pas d'écrire ce que vous voulez qu'il se passe pour l'obtenir. Le HTML a une synthaxe lui permettant de transmettre les pages avec un format.

Vocabulaire avant tout

La synthaxe du HTML n'étant pas très complexe, la liste des mots à connaître ne sera pas très longue.

Tag :
Le tag est ce qui va mettre en forme votre texte.
Les tags permettent de mettre du texte en gras, souligné, italique, indice, exposant dans un tableau, de faire un retour à la ligne ou deux etc. Il en existe tellement qu'il serait difficile de tous les répertorier.
Voici quelques exemples (il ne faut pas mettre les espaces dans le tag, moi j'en met juste pour que vous les voyez) :
< b >texte< / b > donnera texte
< i >texte< / i > donnera texte
< u >texte< / u > donnera texte
< br / > fera 1 retour à la ligne.
< p > en début du texte et < / p > en fin de texte créra un paragraphe avec une ligne vide avant et une ligne vide après.

Attribut :
L'attribut se trouve dans le tag et permet de le définir encore plus. Ainsi il le rend plus précis et est nécessaire par exemple pour les tableaux, les paragraphes (centré, gauche, droite), et plein d'autres choses.
Voici quelques exemples (encore une fois il ne faut pas mettre les espaces au début et à la fin du tag, moi j'en met car sinon le code n'apparaîtrait pas. En revanche, entre les attributs il faut en mettre.) :
< p align="center" > alignera votre texte au center de la page.
< font size="4" > mettra en forme votre texte de manière à ce que sa taille soit de 4.

Pour les langages du web (entre autres) il éxiste des normes permettant de faire marcher un site de la même manière via un navigateur ou via un autre.
Afin de respecter ses normes, le tag < br / > (toujours sans espace excepté entre br et /) sera toujours écris ainsi, et les attritbuts toujours entre guillement (comme j'ai mis dans les exemples).



3. La page HTML

Après avoir vue les généralités et le vocabulaire en HTML, nous allons voir comment se présente une page web en HTML.

Emplacement des Tags importants

A la base, et sans son contenu, une page HTML se présente toujours ainsi (je rappel qu'il ne faut pas mettre des espaces) :

< html >
< head >
< / head >

< body >

< / body >
< / html >

Ce que vous voulez voir s'afficher sur la page lors du surf se mettra toujours entre les deux tags BODY.

Et donc, votre page ainsi présentée sera une page standart. Si vous voulez donner un nom à votre page qui s'affiche dans la barre en haut de votre navigateur vous devrez rajouter les tags title comme ci-dessous :
< html >
< head >
< title >Titre de la page< / title >
< / head >
< body >

< / body >
< /html >

Les meta-tags

Les meta-tags sont des tags qui permettent d'affiner la spécificité de vos pages. Ainsi, on peut lui attribuer des mots-clés (keywords), le nom de l'auteur du site, le logiciel utilisé pour le faire, etc... Les meta-tags se placent entre les tags HEAD après le tag TITLE.
En voici quelques exemples :
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
< meta name="keywords" content="test,cours,html,débutants,apprendre,meta-tags,etc" >
< meta name="description" content="Ce meta est là pour offrir à votre page une description. Là vous y mettez soit la description de votre site soit celle de la page, au choix." >
< meta name="auteur" content="Vous" >
< meta name="site" content="http://www.votresite.com" >

Il est possible de créer ses propres meta-tags. Tout ce qu'il faut c'est respecter la synthaxe.
< meta name="nom de votre tag"* content="contenu du tag" > (* : il est préférable qu'il se résume en 1 mot.)

Les commentaires

Afin que votre code soit clair, et pour vous y retrouver facilement, il vous est possible de placer quelques commentaires dans votre page. La synthaxe des commentaires se présente ainsi :
< ! -- votre commentaire -- >

Précision sur la synthaxe

Les tags étant là pour mettre en forme votre page, vous pouvez faire ce que vous voulez dans le code. Ainsi vous pouvez mettre autant d'espaces, sauter autant de lignes que vous voulez, cela n'y changera rien. Cela permet ainsi de rendre le code beaucoup plus clair. Et cela additionné des commentaires, vous n'avez plus d'excuses pour vous perdre dedans

/!\ Je rappel qu'il ne faut pas mettre d'espace au début et à la fin des tags si vous voulez que cela marche. En revanche, il faut en mettre entre chaque attributs. /!\

Voilà pour ce chapitre sur le html. Dans le prochain nous attaqueront le code en lui même et verrons les différents tags pour mettre en forme votre texte.


4. Connaître les tags (1ere PARTIE)


Il est rappelé qu'il ne faut pas mettre d'espaces au début et à la fin du tag.

Dans le chapitre précédent, nous avons vu ce qu'il y avait avant et après le contenu de la page, c'est à dire avant le tag BODY et après /BODY (endes les autour des deux biensur). Voyons maintenant comment mettre en forme le texte.

Mettre en gras, souligné, italique, barré, ...

Pour faire des titre ou simplement mettre du texte en valeur il est parfois indispensable de mettre le texte concerné en gras, souligné etc... Voici les tags permettant de le faire :

- Gras :

Il éxiste à ma connaissance deux tags permettant de mettre du texte en gras :
< b >texte< / b >
< strong >texte< / b >
Tous les deux donnent le même résultat : texte.
Toutefois le deuxième tag n'est plus très utilisé aujourd'hui. Il est recommandé d'utiliser le premier, mais si ça vous chante, utilisez le deuxième

- Italique :

Encore une fois il y en a plusieurs, mais cette fois trois tags :
< i >texte< / i >
< em >texte< / em >
< cite >texte< / cite > (ou blockquote)
Le premier n'est utilisé que pour l'italique. Le deuxième pour une mise en valeur et le troisième pour une citation. Les trois sont utilisable mais les deux dernièrs sont rares.

- Souligné :

Cette fois il n'éxiste qu'un tag (à ma connaissance du moins) :
< u >texte< / u >

- Barrer le texte :

Un seul tag :
< s >texte< / s >

- Texte en indice :

Un seul tag :
< sub >texte< / sub >

- Texte en exposant :

Un seul tag :
< sup >texte< / sup >

Mise en forme de la police d'écriture

La police par défaut possède une taille 3 et est la Times New Roman. Vous remarquerez en surfant sur le web que cette police est rarement utilisée. Les plus en vogue sont Tahoma, Verdana, Arial. Pour définir la police, il suffit de procéder comme suit :
< font face="tahoma"* >texte< / font > (* étant la police, on peut mettre n'importe laquelle en ne mettant que ce son, mais sans fautes d'orthographe).
< font size="4" >texte< / font >
< font face="tahoma" size="4" >texte< / font >

Pour définir la taille de la police il existe une échelle allant de 1 à 7 (comme celle des tremblements de Terre ) en nombre entiers. Ainsi, plus on va vers 7 et plus la taille est grande.
Toutefois, il existe une autre échelle mais qui ne concerne que les titres :
< h1 >titre< / h1 >
< h2 >titre< / h2 >
< h3 >titre< / h3 >
< h4 >titre< / h4 >
< h5 >titre< / h5 >
< h6 >titre< / h6 >
Celle-ci est inversée par rapport à la valeur de l'attribut size du tag font et ne va que de 1 à 6 (toujours en nombres entiers). Elle n'est utilisable que pour les titres car chaque fois que vous faites un retour à la ligne, il y a une ligne de sautée.

Aussi, il est possible de donner des couleurs à ses textes. Pour cela il suffit d'utiliser l'attribut color comme ci-dessous :
< font color="red" >texte< / font >
ou (qui donnera le même résultat)
< font color="#FF0000" >texte< / font >
Et oui la surprise est de taille... Il existe un code de couleurs hexadécimal (si mes souvenirs sont bons) pour définir la police. En fait ce code se base sur les trois couleurs Bleu, Vert, Rouge.
Afin de connaître tous les codes correspondant à leurs couleurs, je vous invite à visiter quelques sites qui y font référence en visitant ce site. En plus vous pourrez connaître le nom de la couleur (utilisable tout autant que le code hexadecimal). Si vous souhaitez connaître toutes les couleurs existantes et affichables, vous pouvez faire une petite recherche sur Google ou Yahoo!Search.

Et voilà ce chapitre terminé. Au prochain nous verrons comment réer des paragraphes ou faire de simples retours à la ligne. Nous verrons également comment les positionner (gauche, centrés, droite) : 5. Connaître les tags (2eme PARTIE)
C'est d'ailleurs à l'occasion du chapitre 5 que vous pourrez obtenir les premiers exemples de codes grâce à un fichier texte et un fichier .html. Pour lire le fichier texte, il vous faudra vous proccurer WinRAR ou bien un autre logiciel d'archives qui lit le format .rar .

5. Connaître les tags (2eme PARTIE)

Publié par Fann le 01-Jan-1970


Après avoir vue la mise en forme du texte, nous allons voir comment mettre en forme vos paragraphes afin de bien les différencier les un des autres.

Aligner à gauche, au centre, à droite du texte

Il y a deux manière d'aligner du texte. Avec le tag < p >< / p > et avec le tag < div >< / div >. Les deux se ressemblent et offrent le même résultat à ceci près que le tag < p >< / p > n'aligne que le paragraphe concerné et le tag < div >< / div > autant de paragraphes que vous voulez.

Exemple 1 :

< div align="center" >< p >texte 1< / p >
< p >texte 2< br / >
texte 3< / p >< / div >

Dans cet exemple tous les textes (1, 2 et 3) seront alignés au centre.

Exemple 2 :

< p align="right" >texte 1< / p >
< div align="center" >< p >texte 2< / p >
< p >texte 3< / p >< / div >

Dans cet exemple, le texte 1 sera aligné à droite, et le texte 2 et 3 au centre.

NB : la valeur de l'attribut peut être soit left (gauche), soit center (centre), soit right (droite). L'attribut pour définir l'alignement est toujours align="".

Liste et numérotation

Tout comme sous word on peut faire un système de liste avec des titres et des sous-titres (avec des puces ou des numéros) en HTML on peut en faire. Toutefois, cela reste assez limité et vous ne pourrez pas faire de sous-titres.

Liste à puce

Le tag de la liste à puce est < li > précédé de < ul > et suivit de < / ul >.
Par exemple :
< ul >< li > texte 1
< li > texte 2
< li > texte 3
< li > texte 4
< li > ...
< / ul >
Vous remarquerez qu'il n'y a pas besoin de faire des retours à la lignes (voir prochain point abordé de ce chapitre). A partir du moment où vous mettez < li > devant un texte, celui-ci effectue aussitôt un retour à la ligne. La puce est un disque rond plein.

Liste numérotée

Le tag est toujours < li > mais cette fois il sera entouré du tag < ol >< / ol >.
Exemple :
< ol >< li > texte 1
< li > texte 2
< li > texte 3
< li > ...
< / ol >

Faire de simples retours à la ligne ou sauter des lignes

Le tag < p >

Le tag définissant qu'un paragraphe est un paragraphe est < p >< / p >. Celui-ci isolera vos paragraphes en sautant une ligne juste avant et une ligne juste après.
Par exemple :
< p >texte 1< / p >
< p >texte 2< / p >
< p >...< / p >
Dans cet exemple, tous les paragraphes sont isolés les uns des autres. Entre chaque il y aura une ligne de sautée.

Le tag < br / >

Si vous ne souhaitez pas sauter des lignes entre vos paragraphes, vous pouvez utiliser le tag < br / >. Celui-ci ne se met qu'à la fin de vos paragraphes. Vous pouvez en mettre autant que vous voulez, ce qui entraînera qu'il y aura autant de retours à la ligne que de tags BR /.
Par exemple :
< p >texte 1< br / >
texte 2< / p >
< p >texte 3 < / p >
< p >...< / p >
Dans cet exemple, le texte 1 et 2 seront collés. Il n'y aura qu'un retour à la ligne entre la fin du texte 1 et celle du texte 2. En revanche, ces deux textes seront isolés du texte 3 lui-même à son tour isolés des autres textes comme vue précédement

voila deja avec ca vous comprendrez les bases et les principes du langage HTML anime

keskia
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.keskia.forumactif.com
 
Qu'est-ce que le HTML et à quoi cela sert-il ?
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Est-ce que l'on peut faire un journal?
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» Icone HTML
» besion d'aide language html lecteur de musique !! (Résolu)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
ASTUCES-INFOS PRATIQUES WINDOWS :: INFORMATIQUE PRATIQUE :: tutoriels-
Sauter vers: