Table des matières
Langage de programmation html
Le HTML est un langage de programmation. On l’écrit avec des balise HTML. C’est un standard érigé par le W3C. Le code HTML permet d’afficher des pages internet. Et donc plus généralement de créer des sites web par exemple, comme le site de WASI.
Sans plus tarder, un peu de code en html ci-dessous.
Code en html
Pour ce 1ier exemple de code en HTML, je vous propose d’ouvrir un éditeur de texte simple tel que Notepad, Notepad++ ou Wordpad. Pas de document Microsoft World car le logiciel World va ajouter du code en HTM dans votre document.
L’étape 1 consiste à ouvrir un nouveau document dans votre éditeur de texte et de copier-coller ce code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- section dentete -->
<title>Ma page en code HTML</title>
</head>
<body>
<!-- contenu principal de mon code htlm -->
<h1>Un grand titre avec la balise H1</h1>
<p>Un parapgraphe avec la balise P
<a href="https://www.wasi.fr/">un lien avec la balise A</a>
la suite de mon paragraphe.</p>
<!-- un commentaire -->
</body>
</html>La 2ieme étape consiste à enregistrer ce code htlm dans votre ordinateur. En général, on fait enregistrer sous. Ensuite, on nomme le fichier ma-page-avec-wasi par exemple. Avec l’extension.html. Donc le fichier s’appellera ma-page-avec-wasi.html
Etape 3, vous cliquez sur ce fichier, et vous l’ouvrez dans un de vos navigateurs préféré (firefox, chrome, etc). Et voilà ! Votre page écrite en langage de programmation html s’ouvre.
Balise langage html
Dans le détail ci-dessous, voyons quelques balises HTML. En effet le prochain chapitre vous donnera un exemple de balise html.
Balise lien html : c’est quoi la balise lien hypertexte html ?
On parle de lien hypertexte en html pour parler de liens. Un lien hypertexte en html c’est simplement un lien cliquable. Vous trouverez ci-dessous les différentes façon d’écrire le lien hypertexte en html. En particulier nous verrons comment mettre un lien hypertexte en html.
Comment insérer un lien dans un code html ?
Vous vous demandez comment mettre un lien hypertexte en html ? Voici le code html pour faire un lien hypertexte :
<a href="https://www.wasi.fr/">Mon 1ier lien hypertexte en html</a>
Balise de lien html
« Mon 1ier lien hypertexte en html » est un lien en HTML cliquable. Ce lien va ouvrir la page https://www.wasi.fr/.
C’est tout ! Maintenant vous connaissez le html balise lien !
Balise de lien html avec cible
Allons plus loin dans ce lien en html : on peut choisir d’ouvrir le lien dans un nouvel onglet. Auquel cas il suffit d’ajout l’attribut TARGET -cible en français) dans la balise de lien html pour faire le lien hypertexte.
L’attribut TARGET spécifie où ouvrir le lien HTML. L’attribut TARGET peut avoir l’une des valeurs suivantes :
_self – Par défaut. Ouvre le document dans la même fenêtre/onglet que celui sur lequel il a été cliqué
_blank – Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent – Ouvre le document dans le cadre parent
_top – Ouvre le document dans tout le corps de la fenêtre
Exemple de balise de lien html avec cible
<a href="https://www.wasi.fr/" target="_blank">site WASI</a>
Balise email html
Pour envoyer un mail à partir d’un lien, il suffira d’ajouter mailto à l’attribut target. Par exemple ce balisage html
<a href="mailto:email@exemple.com>Cliquez ici pour m'envoyer un mail </a>
La balise langage html utilisée est la même que pour un lien !
Balise image html
Comment insérer une image dans un code html ?
Quelle est la balise qui permet d’insérer une image ? Le code pour inserer une image en html est le suivant :
<img src="wasi.jpg" alt="WASI">
Balise pour insérer une image en html
Pour inserer image html, le code image html est :
<IMG
Code html image et attributs image
Pour inserer image html, on utilise la balse <img avec un de ces attributs :
alt— Texte de remplacement à utiliser lorsque les images ne sont pas disponibles
src— Adresse de la ressource
srcset— Images à utiliser dans différentes situations, par exemple, écrans haute résolution, petits moniteurs, etc.
sizes— Tailles d’image pour différentes mises en page
crossorigin— Comment l’élément gère les requêtes crossorigin
usemap— Nom de la zone cliquable à utiliser
ismap— Indique si l’image est une image cliquable côté serveur
width— Dimension horizontale
height— Dimension verticale
referrerpolicy— Politique de référence pour les récupérations initiées par l’élément
decoding— Indice de décodage à utiliser lors du traitement de cette image pour la présentation
loading— Utilisé pour déterminer le report de chargement
fetchpriority— Définit la priorité des récupérations initiées par l’élément
Par exemple, pour inserer une image en html, le code html insérer une image sera :
<img src="wasi.jpg" alt="WASI">
Et voici ! Maintenant vous connaissez la balise html pour insérer une image. Ce code html tout simple vous permet d’insérer une image.
Attention à l’emplacement de l’image. L’image dans mon exemple est placé dans le même dossier que le fichier html. Sinon il faudra préciser l’emplacement de l’image dans l’attribut SRC de l’élément IMG