Le HTML (en anglais hyper text markup language), est un langage informatique conçu pour écrire les pages web et notamment pour créer de l'hypertexte.
Il est souvent utilisé conjointement avec des langages de programmation comme javascript et CSS.
Chapitre I: LES OUTILS NÉCESSAIRES
un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows.
vous pouvez utiliser dreamweaver MX c'est payant mais ça va rendre votre travail beaucoup plus facile.
un navigateur soit internet explorer ou bien mozilla firefox ou bien Avant browser, c'est à vous de choisir
et finallement une bonne connaissance en HTML (c'est l'objectif de notre cours en fait)
Chapitre II: LES PREMIERS PAS EN HTML
Voici vos premières balises ou tags :
<HTML> début d'un document de type HTML.
</HTML> la fin d'un document de type HTML.
<HEAD> le début de la zone d'en-tête.
</HEAD> la fin de la zone d'en-tête.
<TITLE> le début du titre de la page.
</TITLE> la fin du titre de la page.
<BODY> le début du corps de programme.
</ BODY> Ceci est la fin du corps du programme.
Chaque balise de debut est representée par <...>, et chaque balise de fin est representée par </...>
le fait d'ecrire le balise en majuscule ou bien en minuscule ça n'aucun effet sur le programme.
Faisons ensemble notre premier document Html:
- Ouvrir l'éditeur de texte (bloc notes ou bien dreamweaver...)
- Ecrire les codes Html suivants:
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Enregistrer le document avec l'extension .html ou .htm
Le document est vide, c'est tout à fait normal. Il faudra maintenant lui fournir votre information
à l'intérieur des balises </BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de
votre navigateur.
Pour afficher voos modifications sur le navigateur il faudra tout simplement actualiser la page en qustion, c'est pas necessaire de reouvrir votre fichier HTML à chaque fois.
Chapitre III: LE TEXT
Voici quelques balises élémentaires.
ouvrir l'éditeur de texte et écrire ces codes.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte<FONT>
<FONT COLOR="#0000FF">en bleu<FONT>
</BODY>
</HTML>
afficher ces codes sur votre navigateur, ça doit rassembler à ça.
et ben, moi j'utilise Avant browser comme navigateur..
Remarque:
le navigateur ne tient compte que d'un seul espace.
et donc, pour augmenter l'espace , on utilise tout simplement ce code en rouge sur le tableau suivant de caractères spéciaux.
ou bien aussi vous pouvez utiliser la balise <PRE> écrire votre texte ici </PRE> qui affichera votre texte comme il est sur votre editeur de texte en tenant compte des tous les espaces et sauts de ligne.Le texte affiché est dit préformaté.
c'est parfait ne c'est pas?!!
maintenant voici les codes de quelques couleurs basiques:
Bleu: #0000FF Vert: #00FF00
Blanc: #FFFFFF Violet: #8000FF
Rouge: #FF0000 Jaune: #FFFF00
Gris clair: #C0C0C0 Noir: #000000
en generale les codes des couleurs varient entrent 000000 (pour le noir) et FFFFFF (pour le blanc)
sous dreamweaver vous n'etes pas obligés à apprendre les codes des couleurs ( en fait, ça rassemble à ça sous dreamweaver)
et vous n'avez que cliquez sur la couleur qui convienne pour que le code se place tout seule à la place du curseur.
Chapitre IV: LES TITRES ET LES LISTES
Voici cette liste avant de commencer, ça peut vous aidez.
- ouvrir l'éditeur de texte et taper ces codes
<H1>INFORMATIQUE</H1>
<UL><LI>C/C++
<LI>JAVA
<LI>HTML</UL>
<P>
<H3>SYSTÈMES D'EXPLOITATION</H3>
<OL><LI>LINUX
<LI>WINDOWS
<LI>MAC/OS</OL>
- ouvrir votre navigateur, ça doit rassembler à ça!!
Remarque:
Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
<H1 align=left></H1>
<P align=left></P>
<H1 align=center></H1>
Les listes peuvent s'imbriquer:
Chapitre V: LES LIENS
Html (pour Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant
sur un mot, ou une image de vous transporter;
- vers un autre endroit du document.
- vers un autre fichier Html situé sur votre ordinateur.
- vers un autre ordinateur situé sur le Web.
<A HREF="URL ou adresse">...</A>
exemple:
<A HREF="http://touslessites.societeg.com">touslessites.societeg.com</A>
- Lien externe
http://serveur/chemin.../fichier
ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte
- Lien local
L'organisation d'un site Web consiste à regrouper l'ensemble des éléments de
celui-ci (fichiers html, images, ...) dans un même répertoire.
Vous pourrez ainsi "transporter" aisément votre site
pour le charger sur un serveur.
Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes.
Comme ça vous seraz sure que tous le liens fonctionnet corrrectement.
L'adresse du lien sera alors :
fichier.htm
- Les ancres
Un lien ancré est un lien cliquable normal, à cela près qu'il ne pointe pas seulement sur une page, mais également sur un point précis de cette page appelé point d'ancrage. Ce point d'ancrage peut se trouversur la page courante ou sur une autre page.
Plusieurs liens à l'intérieur d'un même document supposent que ce document présente un temps de chargement assez long.
Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite.
