Spécialité : T.
S informatique /Base de donnée (s3)
Module : base de données en ligne
Thème : Language HTML E. Djouambi
1. Le Web parle Html
Qu'est ce que l'HTML?
HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText
Markup Language).Ce n'est pas un langage de programmation proprement dit.
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau,
etc...) du texte et des images. Pour avoir une idée de l'aspect d'une page écrite en
HTML, cliquez sur "Affichage" (ou "View") dans votre navigateur, puis sélectionnez
"page source".
Qu'est ce qu'une balise?
Une balise est une "instruction" comprise entre crochets < > qui possède un nom et
parfois des attributs. <Br> est, par exemple, la balise utilisée pour spécifier qu'il faut
passer à la ligne. La plupart des balises doivent être ouvertes puis refermées.
On retrouvera donc souvent une balise de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus précédée
du signe /. Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture)
</nom_de_balise>.
Exemple: <b> mon texte en gras (bold) </b>.
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse: il peut
être écrit indifféremment en majuscule, en minuscule ou en un mélange des 2.
1. Vos premiers outils
2.1 Vous avez besoin
d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de
Windows ou tout autre équivalent dans votre système d'exploitation.
d'un browser soit Netscape Navigator (payant) que vous pouvez cependant
télécharger gratuitement au site de Netscape ([Link] ou sur les
CD de certains mensuels informatiques soit Microsoft Explorer (gratuit également)
à télécharger ([Link] ou dans les revues.
2.2 Vous n'avez pas besoin
d'être connecté pour écrire, voir et peaufiner vos pages Html.
d'avoir le dernier éditeur Html sans doute performant mais coûteux qu'il sera
toujours temps d'adopter lorsque vous aurez usé vos petits doigts sur vos premières
pages. Nous pensons à Claris Home Page, Frontpage de Microsoft, Hotdog,
Hotmetal, WebExpert ou Netscape Editor ainsi qu'aux dizaines d'autres éditeurs
que vous rencontrerez sur le Web.
2. Le document Html minimum
3.1 Voici vos premières balises ou tags :
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête
(prologue au document proprement dit contenant
des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>,
correspond (en toute logique) une balise de fin d'une action </...>.
Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc
équivalent d'écrire <HTML>, <html>, <Html>, etc.
Exercice d’application
Faisons ensemble notre premier document Html:
- Ouvrir l'éditeur de texte.
- 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.
- Ouvrir le navigateur.
- Afficher le document via le menu File/Open file...
- Admirer votre premier document Html.
Celui-ci est vide (et c'est normal) mais tout à fait opérationnel! 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 Netscape.
Remarque : Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à
chaque fois le navigateur.
Retourner dans l'éditeur de texte (sans fermer le navigateur).
Modifier les codes Html.
Enregistrer le fichier.
Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la
barre "Location" et faire "Enter".
Spécialité : T.S Base de donnée /s3 17/01/2021
Module : base de données en ligne
Thème : TP : Initiation au langage HTML (texte /image /tableaux)
Exercice 01
- Reprenons notre éditeur de texte (dans mon cas Notepad++). Je vous invite à écrire
ou à copier-coller le code source ci-dessous dans Notepad++.
Exercice 02
-Reprenons notre éditeur de texte (dans mon cas Notepad++). Je vous invite à écrire
ou à copier-coller le code source ci-dessous dans Notepad++.
Exercice 03
Écrire une page HTML « [Link] » qui affiche cela :
