Scribd
Importer
27 vues5 pages

Introduction Au HTML HTMLPad

Transféré par

salem mars
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
27 vues5 pages

Introduction Au HTML HTMLPad

Transféré par

salem mars
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 5

HTML5 et pages Web T.

Alimi

Introduction à HTML
Prérequis :
 Aucune connaissance au préalable
Ressources logicielles :
 HTMLPad205V18.x
 Notepad++
 Navigateur (Google chrome, Ms-Edge, …)

1) Introduction
HTML (HyperText Markup Language) est un langage de balisage conçu pour créer des pages Web.

2) Structure de base d’une page Web


- Un document (ou page) HTML est composé de plusieurs éléments et ayant l’extension htm ou html
(exemples : page1.htm / page2.html)
- Généralement, chaque élément est composé d’une balise ouvrante, d’un contenu est d’une balise fermante
N.B : Il y a des balises ne nécessitant pas la fermeture
- Une balise (tag) ouvrante s’écrit entre les deux signes "<" et ">" de la façon <balise_ouvrante>
- Une balise fermante est la balise ouvrante écrite entre les deux signes "<" et ">" mais précédée par le signe
"/" de la façon </balise_ouvrante>
Exemple : <html> </html>

3) Découverte de la structure de base d’une page Web


a) Création d’une nouvelle page Web
- Ouvrir Notepad++ et créer une nouvelle page vierge
- Enregistrer cette page sous le nom "page1.html"
N.B :
 On doit taper le nom suivi de l’extension
 Dans d’autres éditeurs de textes comme Bloc-notes, on doit intervenir pour choisir le type du fichier
lors de son enregistrement

- Taper du texte dans cette page (par exemple "Bonjour") puis enregistrer ces modifications (ctrl+s)

Page 1 sur 5
HTML5 et pages Web T. Alimi

- Aller vers le dossier d’enregistrement et ouvrir la page avec un navigateur :


 Clic droit sur la page puis,
 Choisir "Ouvrir avec" et sélectionner un navigateur

- La page s’affiche avec le texte déjà tapé


- Faire un clic droit dans une zone vide de la page Web affichée dans le navigateur puis choisir "afficher le
code source de la page" ou "inspecter"
N.B :
 Avec Google Chrome on choisit "inspecter"
 Avec Internet Explorer les deux choix ramènent au même résultat
- Le code qui s’affiche explore les balises de base nécessaires à la création d’une page Web
 Pour Google Chrome :

 Pour Internet Explorer :

- Interprétations :
 Par défaut, une page est composée de trois balises ouvrantes et fermantes (html, head et body)
 La balise <html> : ouverture du code HTML de la page courante
 La balise </html> : fin (fermeture) du code HTML de la page courante
 La balise <head> : début de l’entête de la page
 La balise </head> : fin de l’entête de la page
 La balise <body> : représente le début du corps de la page dans lequel on affiche le contenu souhaité.
 La balise </body> : désigne la fin du corps de la page
- Intervention :
 On a remarqué que les balises du "head" n’admettent pas de contenu, donc on a essayé de les
supprimer pour savoir si elles sont indispensables, pour cela :
 Ouvrir la page Web déjà créée avec HTMLpad

Page 2 sur 5
HTML5 et pages Web T. Alimi

 Dans l’onglet "Editeur de code" s’affiche seulement le texte que l’on a tapé auparavant, donc on a
essayé de reconstruire le code avec les balises de bases mentionnées ci-dessus :

 Pour voir l’aperçu du code tapé, on peut ouvrir l’onglet "Prévisualiser" de HTMLPad

 Enregistrer les modifications apportées à cette page Web sous HTMLPad puis revenir à l’aperçu du
code dans le navigateur => On remarque que rien ne change (ni l’affichage ni le code)
 Revenir au code "html" sous HTMLPad et supprimer les balises du "head", modifier le texte à
afficher (par exemple : Bonjour à tous) enregistrer la page puis revenir au code source affiché avec
le navigateur

 On remarque que les balises <head> </head> ont été réinsérées de nouveaux

- Constatation finale :
 Les balises (tags) de base d’une page Web sont : html, head et body
 Ces balises sont insérées même si on ne les tape pas dans le code source, mais elles sont exigées
dans un code html pour pouvoir écrire un code complet contenant d’autres balises.
b) Attribuer un titre à une page Web (titre = title)
Le titre de la page s’écrit en html entre les balises <title> et </title>.

Découvrir l’emplacement correct du titre d’une page Web !!!!


- Insérer le titre "page_test" juste au-dessous des balises du "head"

- Visualiser le code avec un navigateur

 Le code a été réorganisé automatiquement, et le titre est inséré dans l’entête de la page

Page 3 sur 5
HTML5 et pages Web T. Alimi

- Constatation :
 Le titre fait partie de l’entête d’une page Web
 Réécrire le code source sous HTMLPad correctement

c) Mise en forme de caractères (Gras, Italique et souligné)


- Gras = bold :
 La balise <b> met un texte en gras
 En HTML5, il est souvent préférable d’utilise la balise <strong> qui marque l’importance d’un texte

Le code ci-avant affiche les deux phrases en gras mais dans une seule ligne ; on verra par la suite
comment forcer le retour à la ligne.

- Italique = italic
 La balise <i> met un texte en italique

L’italique est appliqué sur le texte "2TI 2024-2025" :

 Il est possible d’imbriquer des balises (balises incluses) : dans ce cas, la dernière balise
ouverte sera fermée en premier lieu.
- Soulignement : (souligné = underlined)
 La balise <u> souligne un texte avec un trait simple

Le soulignement est appliqué au texte "Bonjour à tous" :

Page 4 sur 5
HTML5 et pages Web T. Alimi

d) Retour chariot
La balise <br> crée un saut de ligne (retour chariot).

 Même en l’absence de <br> sur la deuxième phrase, on aura une phrase par ligne puisqu’elle retourne le
curseur à une nouvelle ligne après avoir écrit le texte auquel on l’a appliqué.
 Voici l’exemple complet :

Le résultat est donc :

Page 5 sur 5

Vous aimerez peut-être aussi