UE11 : Généralités sur le HTML

Compétences :

Définir html et donner son rôle
Donner la structure d’un document html
Donner quelques éditeurs du code html

I- DEFINITION

HTML signifie : « HyperText Markup Language », ou langage de balisage
hypertexte. Il s'agit d'un langage permettant de décrire la mise en page d’une page
web statique.
Le HTML est un langage défini et figé (avec un nombre de balises limité) ; Il ne permet que de décrire des contenus et surtout de créer la base de l'interactivité par les liens hypertextes ; Il ne permet pas d’agir sur les fichiers (il permet simplement de les manipuler) ; Il n’est pas un langage de programmation ; Il ne permet pas à l’utilisateur d’interagir avec la page web ;

II- OUTILS NECESSAIRES POUR PROGRAMMER EN HTML

Pour créer des pages web on a besoin de deux éléments indispensables : un éditeur de texte et un navigateur.

1- Les éditeurs de texte

Ce sont des logiciels qui permettent d'éditer le code. ils sont différents des logiciels de traitement de texte qui sont constitués d'outils de mise en forme et en page du texte. Avec un éditeur de texte, on écrit le code html et on enregistre le fichier avec l'extension .html ou .htm Ce fichier sera alors compréhensible par un navigateur qui pourra interprété le code que l'on a écrit.
Il existe deux types d'éditeur de texte

les éditeurs simples tels que bloc notes, notepad++, sublime text, simple text...
les éditeurs de type WYSIWYG (What you see is what you get) tel que CKEditor, Trumbowyg, XStandard, TinyMCE et autres

2- les navigateur

Ce sont des logiciels d'application permettant d'ouvrir et de parcourir des pages web. Les pages html sont des fichiers texte ayant l'extension .html ou .htm et pouvant être ouvertes par un navigateur. Les différents navigateurs connus sont : Google chrome, firefox, opéra, internet explorer, UC browser ...

III- STRUCTURE DE BASE D’UN DOCUMENT HTML

1-Les balises html

Une balise est une commande pour le navigateur. Les balises sont des « mots» prédéfinis inclus entre les signes « < » et « > ». Elles fonctionnent le plus souvent par paire (balise « ouvrante », et « fermante »,) exemple <em>Stanley</em>.
il existe deux types de balises :

les balises en paire EX : <body>........</body>
les balises orphelines EX : <br/>

2- L'organisation des balises

L'organisation des balises entre elles répond à un système bien précis appelé l'imbrication. Toute balise ouvrante est obligatoirement suivie, hors contenu, de sa balise fermante.
EXEMPLE :

Imbrication correcte : <B> Bonjour <em>Stanley</em></B>
Imbrication incorrecte : <B> Bonjour <em>Stanley</B></em>. ici la balise
ouvrante <em> n’est pas suivi de sa balise fermante </em>.

3- Les attributs d’une balise

L’attribut d’une balise indique comment cette balise doit s’exécuter par le navigateur. Un attribut est composé de son nom suivi du signe « = » et de sa valeur entre guillemets.sa syntaxe est : <balise attribut="valeur">. Exemple

<h1>Page d'accueil du site</h1> Ici page d'accueil est définit comme titre de premier niveau dans la page
<h1 align="center">Page d'accueil du site</h1> Ici on aligne le titre au centre de la page avec l'attribut align ayant pour valeur center (pour centrer).

4- Structure minimale d’un document html

Un document HTML commence par la balise <html> et finit par la balise</html>. Il contient un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page. L'en-tête est délimité par les balises <head> et </head>. Le corps est délimité par les balises <body> et </body>. Le titre de la page est délimité par <title> et </title>.
Voici la structure minimale d'une page Web :

NB : Il n'est pas obligé de respecter l'indentation présente sur cette image. Il suffit de respecter l'ordre d'insertion des balises. Vous pouvez écrire comme suit :

<html>
<head>
<title>Titre de la page </title>
</head>
<body>Contenu de la page</body>
</html>

Exemple d'application :

Soit le code suivant:
<html>
<head>
   <title>les parties de l'ordinateur</title>
</head>
<body>
   L'ordinateur a deux parties principales :<br>
   Le hardware<br>
   Le software.
</body>
</html>
ce code permet d'afficher la page suivante :

Exercice d'application

Ouvrez votre éditeur de texte et saisir le texte suivant :

<html>
<head>
    <title>Ma première page web</title>
</head>
<body>
    ça y est ! J'ai crée ma toute première page web.<br>
    Merci beaucoup AU-INFO.
</body>
</html>

Enregistrer le document avec l'extension .html où .htm.
Ouvrir votre navigateur.
Afficher le document via le menu File/Open file...
Admirer votre premier document Html
Envoyez une capture d'écran dans le groupe whatsapp AU-INFO (Facultatif).

Vous aimez cette pages ? Partagez avec vos amis

Pages