HTML

HyperText Markup Language

HTML (HyperText Markup LangUage) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C’est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».

CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l’information apparaîtra «brute ». C’est pour cela que le langage CSS vient toujours le compléter. Pour vous donner une idée, la figure suivante montre ce que donne la même page sans CSS puis avec le CSS.

 

Structure d’un document HTML

  • La déclaration <!DOCTYPE html> définit que ce document est du HTML5
  • L’élément<html>est l’élément racine de la page
  • L’élément<head>contient des méta informations sur le document
  • L’élément<title>spécifie le titre du document
  • L’élément<body>contient le contenu visible de la page
  • L’élément<h1>définit un gros titre
  • L’élément<p>définit un paragraphe

Les éléments et attributs HTML

Un élément HTML est généralement constitué d’une balise de début, de sa balise de finet du contenu inséré entre les deux balises.

<nom de l’element>Le contenu de l’élément </nom de l’element>.

Exemple :

<p>je suis un titre</p>

  • l’element <p> nous permet de définir un paragraphe en HTML 

En HTML, pour aller à la ligne on utilise la balise <br />

Pour définir une ligne horizontale, on utilise la balise <hr/>

en effet il faut savoir que ces balises <hr/> et <br />  sont des balises orphelin, c’est à dire elles ne sont pas paires.

Les titres:
Les titres sont définies avec les balises <h1> à <h6>.

<h1> définit le titre le plus important et<h6> le moins important.

Exemple:

Remarque: Les navigateurs ajoute automatiquement un espace vide (une marge) avant et après chaque titre.

Les Listes

nous avons deux types : les listes a puce et les listes ordonnées. 

  • pour créer une liste à puce en HTML, on utilise la balise <ul> suivie de la balise <li>
  • pour créer une liste ordonnées en HTML, on utilise la balise <ol> suivie de la balise <li>
       

Eemple :

NB:  il faut bien imbriquer les balises  <li>, il se trouve toujours à l’intérieur de la balise <ul>/<ol>.

 

Les liens en HTML

Les liens hypertext nous permettent de naviguer d’une page vers une autre, d’un site web vers un autre mais aussi de faire télécharger des fichiers. en effet ce sont les liens hypertext qui ont rendu le WEB si célèbre.

l’utilisation des liens est simple. nous allons utiliser la balise <a> suivie de l’attribut href= » » ainsi que l’url ou la page du site qu’on veut visiter et le mot ou les mots qui va/vont nous servir de liens.

Exemple: 

pour visiter le site sendevtech.com, je vais mettre dans mon code html le code suivant pour se rendre dans le site de SEN DEV TECH.

 On peut aussi lier deux pages de son site. par exemple je crée un fichier html nommé page1 et une autre page nommée page2 sachant que ces deux pages se trouvent dans un meme dossier. pour se faire je me rend sur la page1 et mettre : <a href= »page2.html »>Bienvenue à la page 2 </a>

Par ailleurs nous avons aussi une autre technique de faire des liens au sein de notre page. mais ceci se fait souvent au menu. c’est-à-dire de cliquer sur un element de menu et la page va scroller jusqu’à la partie concernée. cette dernière ce fait souvent dans le site de page unique. pour se faire nous allons créer premièrement nos elements de menu et dans nos href  c’est là-bas que nous allons mettre un # suivie de l’element qui va nous référencier nos différentes parties cibles dans notre page. ainsi sur chaque element cible, on va definir un id qui va avoir le meme nom que celui precede par le # qui est dans href.

Exemple : 

Remarques:

  • pour créer un infobulle sur votre liens, ajoutez juste l’attribut title= »le texte que vous voulez ajouter« 
  • pour que le lien s’ouvre dans une nouvelle fenêtre, ajouter : target= »_blank »
  • si vous faire un lien qui demande l’envoie de mail, on va mettre:  envoyer
  • si on veut faire télécharger un fichier depuis notre site, on va mettre le nom du fichier suivie de son extension c’est à dire .pdf , .jpg , .zip , .rar etc. on fait: <a href= »nomfichier.pdf« >télécharger ce fichier

Nb: Voici le lien pour le tutoriel sur les liens: https://youtu.be/NFW7g1dnpqQ

En HTML nous avons trois format d'images : 

  • le format jpeg ou jpg (pour les photos)
  • le format png (logo et illustration)
  • le format gif (pour les animations)

Pour insérer une image en HTML,  nous allons utiliser la balise <img> suivie de l'attribut src="" ou on va définir le chemin ou on a mit notre image ainsi que l'attribut Alt qui nous serve de décrire notre image.

Exemple: imaginez que vous voulez insérer une image sur votre bloc. alors pour se faire je vais procéder comme suit:

<img src="image.jpg" alt="image de mon bloc" >

 

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine.

Personne

Âge

assane

25

Kalika

28

kane

25

ali

27

Nb: l’avantage d’utiliser les tableaux est, l'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes.

VOTRE PREMIERE TABLEAU 

Pour créer un tableau en html, la première balise utilisée est :

<table>

</table>

pour créer une rangée dans un tableau en html on utilise :
Exemple :


     

   
  • Les baliseset:

Les balises
permettent d’ajouter une cellule normal

  • Les balises
    permettent d’ajouter une cellule d'entête

<table>

<tr>

<th>First</th> <th>second</th> <th>three</th> </tr> <tr> <td>Ousmane</td> <td>cheikh</td> <td>assane</td> </tr>

</table>

L’attribut border :

L’attribut « border=» fait apparaître une bordure pour le tableau. On l’inscrit dans la balise ou bien dans une feuille de style css avec l’attribut « border : » qui prend comme paramètre l’épaisseur (en px, em ou %), le style de la bordure et la couleur. 

Les Styles de Bordures :

La balise  <caption>:

La balise <caption> donne un titre au tableau, par défaut, il est placé au dessus du tableau, mais peut être placé en dessous avec l’attribut align=bottom dans la balise

exemple:

<table>
<caption align="bottom"> titre de mon tableau</caption>
<tr>
<th>cellule d'entete 1</th>
<th>cellule d'entete 2</th>
</tr>
<tr>
<td>cellule normal 1</td>
<td>cellule normal 2</td>
</tr>
</table>
titre de mon tableau
cellule d'entete 1 cellule d'entete 2
cellule normal 1 cellule normal 2



Les attributs colspan et rowspan :

  1. L ’attribut colspan permet de fusionner plusieurs colonnes.
  2. L’attribut rowspan permet de fusionner plusieurs rangées
cellule d'entete 1
cellule normal 1 cellule normal 2


cellule d'entete 1 cellule d'entete 2
cellule normal 1

LES FORMULAIRES EN HTML

Les formulaires HTML sont utilisés pour la saisie des données utilisateurs et leur transmission vers un serveur. 

Un formulaire peut contenir des éléments de type input comme les champs de texte, des cases à cocher, des boutons radio, des boutons submit et plus encore.

Pour créer un formulaire en html vous devez pour commencer écrire une balise <form> </form>.  En effet, C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.

Code HTML :

<form action=”index.php” method=”post”>

<input type=”text” name=”nom” >

</form>


Les éléments de Formulaire :

  • Input : Champs de saisie de texte et différents types de boutons
  • Select : Listes (menus déroulants et ascenseurs)
  • Textarea: Zone de saisie de texte libre

Chaque élément est nommé avec l'attribut name. Le nom ainsi défini permet d'identifier les données lors de leur envoi. Il doit être unique, sauf dans le cas d'un ensemble composé de plusieurs éléments (boutons radio par exemple).

L'attribut Value commun à ces balises, a un rôle différent selon le type d'élément utilisé.

Les éléments input

Ils sont utilisés pour définir des zones d'entrée de texte simple, des boutons, des cases à cocher ou des boutons radio. Le type d'élément dont il s'agit sera précisé en utilisant l'attribut type.

  • type text :
prenom : <input type="text" name="prénoms">

pays : <input type="text" name="pays" value="Senegal"> 

  • Type password :
Mot de passe : <input type="password" name="mdp" value="password>  

  • Type reset :
<input type="reset" value="Effacer">  

  • Type submit:
<input type="submit" value="Envoyer">                 
  • Type checkbox: (Case à cocher à choix multiple)
<input type="checkbox" name="bla" value="assane" checked>assane<br>

<input type="checkbox" name="bla" value="kalika">kalika<br>
<input type="checkbox" name="bla" value="Ousmane">Ousmane<br>
  • Type Radio : (case à cocher choix unique)
<input type="radio" name="bla" value="assane" checked>assane<br>
<input type="radio" name="bla" value="kalika">kalika<br>
  • L’élément textarea:

Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs rows et cols.

<textarea name="message" rows="10" cols="30">

Le texte du message.

</textarea> 

<br>

<input type=”submit” value=”Envoyer” >
  • L'élément select :

Il sert avec l'élément option à définir des listes (menus déroulant ou ascenseurs)

Les menus déroulants :

<select name="ecole">

<option value="bakeli">Bakeli</option>

<option value="uvs" selected>UVS</option>

<option value="isi">ISI</option>

</select>

Regroupement des champs de formulaire

  • L’élément <fieldset> est utilisé pour regrouper les champs associés à un formulaire.
  • L’élément <legende> définit une légende pour l'élément <fieldset>.
<form action="page.php">

<fieldset>

<legend>Informations personnelles :</legend>

Prénoms:<br><input type="text" name="prenoms" value="assane"><br>

Nom:<br><input type="text" name="nom" value="gueye"><br><br>

<input type="submit" value="Envoyer">

</fieldset>

</form>

Les autres éléments de formulaire

  • date : <input type=”date” name=”bday” >
  • color : <input type=”color” name=”favcolor” >
  • Number : <input type=”number”>
  • time pour définir l’heure
  • Month pour le mois
  • Dateline pour la date et l’heure
  • week pour la semaine etc.

Pour insérer une vidéo dans une page, on fait appel à la balise <video></video>.

exemple :

<video width="320" height="240" controls>

<source src="assane.mp4" type="video/mp4">

Votre navigateur ne supporte pas la balise video.

</video>

L'élément <video> permet plusieurs éléments <source> pouvant être lié à des fichiers vidéo différents.Le navigateur utilise le premier format reconnu.

Autre façon :

<video src=”movie.mp4” width="320" height="240" controls>

</video>

Les attributs de l'élément video

L'attribut controls ajoute des contrôles vidéo, comme lecture, pause, volume.

  • Si width et height sont définies, l'espace requis pour la vidéo est réservé lorsque la page est chargée.
  • Cependant, sans ces attributs, le navigateur ne connaît pas la taille de la vidéo, et ainsi ne pourra réserver un espace approprié à celle-ci.L'effet sera que la mise en page va changer au chargement de la vidéo.

Intégration de vidéos Youtube

La meilleure façon de lire des vidéos avec HTML, est d'utiliser YouTube pour éviter les problèmes des formats de vidéo.

  • Pour afficher une vidéo dans une page Web, on peut uploader le code d’intégration de la vidéo depuis YouTube puis l’insérer dans le code HTML:

Exemple avec iFrame(recommandé)

<iframe width="420" height="315"   src=https://www.youtube.com/watch?v=DADLEKxTSHg&tcontrols loop=1 >

</iframe>
 

Pour inserer un son(audio) en HTML, on utilise la balise <audio></audio> suivie de l'attribut src="" pour définir le chemin ou se trouve notre fichier audio ainsi que l'attribut controls pour définir les fonctionnalités de la vidéo.

exemple :

<audio src="../son/khassideu.mp3" controls>

</audio>
  • <!-- --> : Commentaire.
  • <abbr> : Abréviation.
  • <address> : URL sous forme textuel, sans utilisation de lien
    hypertexte (italique).
  • <a> : Création d'une ancre pour liens hypertexte.
  • <area> : Permet de définir une zone cliquable dans la page.
  • <b> : Gras.
  • <caption> : Titre de tableau.
  • <cite> : Citation (italique).
  • <col> : Définition d'une colonne d'un tableau.
  • <colgroup> : Regroupement de colonnes dans un tableau.
  • <div> : Implémente une feuille de style par bloc entier.
  • <em> : Emphase (italique).
  • <embed> : Insertion d'application multimédia.
  • <fieldset> : Regroupement de zone dans les formulaires.
  • <font> : Définition du texte.
  • <form> : Insertion d'un formulaire (encadre les balises <input>,
    <textarea>, <select> et <option>).
  • <frame> : Insertion d'une nouvelle frame 'encadré par la balise
  • <i> : Italique.
  • <img> : Insertion d'une image.
  • <input> : Nouvelle élément dans un formulaire.
  • <label> : Extension de la balise <form>
  • <legend> : Légende de tableau.
  • <li> : Elément d'une liste (encadré par la balise <ul> ou la
    balise <ol>).
  • <link> : Lien indépendant du média.
  • <map> : Définit une zone cliquable.
  • <marquee> : Texte défilant
  • <option> : Nouvelle entrée dans une liste de choix.
  • <pre> : Texte pré-formaté avec une police non proportionnelle.
  • <s> : Texte barré.
  • <select> : Liste de choix (encadre la balise <option> et encadré
    par la balise <form>).
  • <small> : Réduit la taille des caractères de 1 point.
  • <span>: Implémente une feuille de style.
  • <strong> : Texte en gras.
  • <style> : Feuille de style (le plus souvent dans entre les
    balises <head> et </head>).
  • <sub> : Texte en indice.
  • <sup> : Texte en exposant.
  • <table> : Tableau.
  • <tbody> : Regroupement de tableaux.
  • <td> : Nouvelle cellule dans un tableau (encadré par la
    balise <tr>).
  • <textarea> : Champ de saisie de plusieurs lignes.
  • <tfoot> : Regroupement de tableaux.
  • <th> : Cellule d'en-tête d'un tableau.
  • <thead> : Regroupement de tableaux.
  • <title> : Titre du document HTML (à insérer dans la balise
    <head>).
  • <tr> : Nouvelle ligne d'un tableau (encadré par la balise
    <table>).
  • <u> : Texte en souligné. (déconseillé)
  • <ul> : Liste non-numéroté (encadre la balise <li>).