COTE CLIENT : HTML 5
Dernière mise à jour : 14 sept. 2021
L'HTML : est un langage informatique utilisé sur l'internet, Ce langage est utilisé pour créer des pages web. L'acronyme signifie Hypertexte Markus Langage, ce qui signifie en français "langage de balisage d'hypertexte", Cette signification porte bien son nom puis qu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure de balisage.
le html est considéré comme un langage de base c'est très important a connaitre pour les débutant ou d'une autre façon ,c'est le langage balisage c'est a dire contient plusieurs balise
existe plusieurs type de balise pour le langage html
dans ce blogue on va annoncé que les balises qui sont important mais existe plusieurs balise
voici un exemple de balise html:<h1></h1>
la balise <h1></h1> :signifie la taille du titre on écrit de cette façon suivant :<h1></h1>si on n'a pas respecté cette façon d'écriture notre code ne s'affichera plus
voici comment on écrit le code html dans un éditeur de texte( vous choisissiez notopode ou sublim_texte ou bien votre bloc note) dans cette exemple ci dessue j'ai choisie l'éditeur de texte sublim-texte ,pour les débutant il est mieux d’utiliser l'éditeur sublime-texte parce que votre code sera colorié plus au moins organisé et d'autre fonctionnalité
télécharger sublime texte pour Windows:
si vous voulez télécharger not pad:32bit pour Windows :
si vous voulez télécharger not pad ++:64bit pour Windows :
vous pouvez choisir n'importe éditeur de texte a votre choix
attention :il est très important d'écrire le code html comme vous voyez dans l'image ci dessue
ci vous ne respectez pas l'ordre d'écriture votre code ne sera pas exécutez
maintenant on doit expliquer que ce que signifie chaque balise
pour avoir un code html correct et pour éviter les erreurs on doit écrire la 1er balise <html></html>
la balise <html></html> est rassemblé a un scolette du code <html></html>
la balise head: c'est l'entête d'un document (a l'intérieure de cette balise on écrit la balise title (le titre de la page) et on écrit aussi la balise style(la balise style est utilisé pour stylé le code html ))
la balise body :définit le cors du document
il existe plusieurs balise pour l'html mais en tant que débutant c'est l'essentiel a savoir
prérequis pour apprendre l'html
1:un bloc- note selon votre choix(je conseille les débutant par sublime_texte ;notopode ;ou le bloc note l'application qui est installé dans votre ordinateur)
2:vous avez besoin d'un navigateur de texte
3:maitrisez les balises de base (html; head; title; body) est savoir leurs rôle
vous ouvrez votre navigateur de texte ensuit vous enregistrez sous pare test.html
il est important de l'enregistrez sous l'extension.html choisissez le nom que vous voulez .html
4:vous devez avoir les notions sur le fonctionnement d'un ordinateur ,et installer les logicielle
de base et savoir géré les fichiers
après avoir ajouter la balise <h1></h1> a notre code html le résultat est
la suivantes
est après avoir rafraichir notre navigateur le résultat est la suivantes:
n'oubliez pas d'enregistrer votre code source(CTRL+S)
et pour rafraichir votre navigateur (CTRL+R)
maintenant c'est l'étape suivante on va ajouter un contenue a notre code html en utilisant la balise body
par exemple on va utilisé une autre balise <p> ce si est un test pour html </p>.
la balise <p>est paragraphe
vous voyez quant a écrit notre paragraphe a l'intérieure de la balise <p> est pour affiché le contenue on utilise la balise body
lorsqu'on refreche notre navigateur(CTRL+R)
important: lorsque vous écrivez votre code html dans votre éditeur de texte vous devez l'enregistrez (CTRL+S) et lorsque vous ouvrez votre navigateur vous devez le rafraichir (CTRL+R) si vous avez
oublier de faire si étape votre code ne sera pas exécuté
il est important de savoirs et apprendre par coeure les balise du html pour comprendre ce qui se passe
1-les balises de premiers niveaux :(balise de de basse)
<html></html>:balise principale de tout les pages web<head></head>:c'est entête de la page(sachez que a l'antérieure de cette balise on peux écrire la balise <style></style> )<body></body>:c'est le corps de la page 2:les balise d' entête
c'est balises sont situé dans l'entête de notre page c'est a dire entre le balise <head> et la balise </head>
existe aussi des balises qui sont auto-fermantes comme la balise <image>par exemple
autre balise auto_fermante :
</br>:pour retourner a la ligne <link/>:liaison avec une feuille de style<meta/>:métadonnées de la page web <script></script>:a l'antérieure de cette balise on écrit notre code java scripte<style></style>:nous avons déjà affirmer que cette balise pour le CSS<title></title>:c'est le titre de la page 3:les balises d'organisation du texte:
<h1><h6>: nous avons déjà affirmer que c'est des titres de différents niveaux
exemple:
<h1> c'est un titre du premiers niveaux </h1><h2> c'est un titre du deuxième niveaux </h2><h3> c'est un titre du troisième niveaux </h3><h4> c'est un titre du quatrième niveaux </h4><h5> c'est un titre du cinquième niveaux </h5><h6> c'est un titre du sixième niveaux </h6><strong>-</strong>:mise en valeur fort (texte en gras)<u>-</u>:texte souligné (under-line)<i>-</i>:texte italique <p>-</p>:ci on veut écrire un paragraphe<audio>-</audio>:son ==>on utilise cette élément pour intégré un contenue sonore dans un document, il peut contenir un ou plusieurs source audio représentés avec l'attribut src ou l'élément <source><vedio></vedio>: vedio<ins></ins> :texte inséré <image> :cette balise permet d'intégré une image dans le document html
voici un exemple d’utilisation<image src="chemin de l'image.png" alt="une description sur l'image "/>
remarque: si vous n'avez pas écrire le bon type de l'image ou bien vous avez écrit un fausse chemin de l’image votre code ne sera pas exécuté
il faut savoir qu'il existe trois type de l'image ,si vous voulez savoirs le type de l'image vous faite clique droit sur l'image ensuit vous cliquez sur propriété vous voyez quelque chose comme sa
vous voyez dans la fenêtre si dessue que mon image s'appel fleur et le type d'image c'est marqué
(jpj) donc je si je veux ajouter cette image a ma page html je dois écrire normalement
<image src="le chemin de mon image.jpg "/>
création des lien pour l html:
pour créer des liens en html on utilise l'élément et son attribut href
<a href=http://www.googl.com>clique here to go to google </a>
après avoir rafraichir notre code le résultat est la suivantes
les tableaux dans l'html:
vous devez savoir que les tableaux dans l'html sont créer ligne par ligne
quand on veut ajouter une ligne dans notre tableaux,nous utiliserons un élément tr,pour pouvoir complété notre tableaux et créer des cellules nous devrons ajouter un autre élément td
l' élément td représente chaque cellule dans notre tableaux
par exemple on va crée un tableaux en html de 4 ligne ,chacun de ces 4 ligne contiens 3 cellule
(un tableaux de 4 ligne et 3 colonne )
donc pour créer notre tableaux en html on va utilisé les deux éléments qu'on a déjà expliqué (td ,tr)
pour créer 4 ligne, on utilisera l'élément tr ,pour on créer les cellules on utilisera l'élément td
voici l'exemple suivant (après l’exécution de ce code ne prenez pas en compte la mise en forme, nous en reparlons plus tard, concentrez juste sur la méthode de construire un tableaux en html, et essayer juste de comprendre le principe des éléments tr,td)
<!DOCTYPE html>
<head>
<title> blogue du html </title>
</head>
<body>
<table>
<tr>
<td> prénom </td>
<td> age </td>
<td> mail </td>
</tr>
<tr>
<td> maryam</td>
<td> 22 </td>
<td> maryam@gmail.com</td>
</tr>
<tr>
<td> nohayla</td>
<td> 20 </td>
<td> nohayla@gmail.com</td>
</tr>
<tr>
<td> imane </td>
<td> 16 </td>
<td> imane@gmail.com</td>
</tr>
<tr>
<td>souad </td>
<td> 49 </td>
<td> souad@gmail.com</td>
</tr>
</table>
</body>
</html>
nous avons maintenant styler un peux notre tableaux on utilisant le css,<style>-</style> c'est la balise lorsque on veut utiliser le css
<head>
<title> blogue du html </title>
<style>
table{
border-collapse:collapse;
}
td{
border:1px solid black;
padding:10px;
}
</style>
</head>après l’exécution du code html le résultat est la suivante:
si on veut par exemple changer le type d’écriture de tout le tableaux on utilise la propriété font-family
on a choisie dans cette exemple le type d'écriture "comic sans ms "
<style>
table{
border-collapse:collapse;
}
td{
border:1px solid black;
padding:10px;
font-family:"comic sans ms";
}
body
{
background-color:yellow;
}
</style>
</head>
<body>
<table>
les formulaires en html:
premièrement vous devez savoirs qu'est ce que ça veut dire un formulaire
un formulaire est un ensemble d'information le nom ,le prénom l'age ..... qu'il faut remplir dans des champs .
ces informations seront envoyé et traité ,(on va voire comment traité un formulaire prochainement )
a ce moment la , on va juste savoir qu'est ce que sa veut dire un formulaire?et comment réalisé un formulaire avec le language html? et qu'il sont les balises utilisé pour réalisé un formulaire html?
pour réalisé le scolette d'une page web on a besoin de balise pour faire ça, et pour faire des tableaux on a besoin de balise aussi <td>-</td> </tr></tr> <table>-</table>, pour on faire des lien sur notre page web on a aussi besoin d'une balise <href> pour faire des images on a besoin de la balise <image>.... , donc la même chose pour les formulaire on a besoin des balises pour les réalisé
on va commencer de déterminer les balises qu'on aurait besoin pour créer un formulaire en html:
<input>-</input>:pour la création des champs ou les utilisateurs vont remplir leurs information (nom;prénom,email,mot de passe....) ;
<form>-</form>:il permet d'indiquer le début et la fin d'un formulaire </br> :pour retourner a ligne <textarea></textarea>pour créer une zone de texte multiligne</button>:permet d'inséré un button pour que notre formulaire sera envoyé </label>:il permet de donner un intitulé a un champs de formulaire comme par exemple input de type texte ,voici un exemple d’utilisation de la balise </label></label>
<label for ="mon_id" >
Chercher:
<input id="mon_id" type="text" />
</label><div>-</div>:c'est juste il définit une division et regroupe les éléments ,voici un exemple de l’utilisation de la balise <div></div>:<div>
<h3> blogue du html</h3>
<P> ce si est un paragraphe</p>
</div>
pour créer une zone de texte a une ligne on doit écrire
<input type="text"/>mais c'est insuffisant il faut qu'on donne un nom a notre zone de text,chassez que ce nom n'apparaitra pas sur notre page web,mais il vous sera indispensable par la suit (en php lorsque vous voulez traité votre formulaire,d'une autre part sa vous aides de comprendre le code source,)
lorsqu'on veut donner un nom a un élément de formulaire,on utilise l'attribut "name"
dans cet exemple on va supposer qu'on demande au visiteur de rentrez son password
Entrez votre mot de passe:<input type="text" name="password"/>
<input type ="button" value="envoyez">après l’exécution de notre code(pour raffrichire votre navigateurs ctrl+r,enregistrer votre code sources ctrl+s) le résultat est la suivantes:
dans cette exemple on a 2 type de l'input
la 1er input c'est de type text,est la 2emme input et de type "button",on peut changer par exemple la valeur de la 2emme input a la place de value="envoyez ",on écrit value="submit"
j’espère maintenant que vous avez compris quant peut changer la valeur de l'élément input selon votre besoin
champs permet de saisir un nombre entiers
<input type="number"/>, il sera afficher aussi des petites fléchés si vous souhaitez changer la valeurs
pour personnalisé le fonctionnement du champs veuillez ajouter les attributs suivantes
min:la valeur minimale autorisé
max:la valeur maximal autorisé
step:c'est le pas de déplacement ,par exemple si vous indiquez le pas 3, le champs n'acceptera que les valeurs de 3 en 3
par exemple si on veut que la valeur maximale sera 40 on va écrire comme se ci:
<input type="number" max="40"/>si on souhaitait par exemple que le pas serait 3en doit écrire
<input type="number" step="3"/>et voila .... comme ça,a chaque fois on souhaite changé les fonctionnalité,on change les attributs
un curseur: le type range permet de sélectionner un nombre avec un curseur la syntaxe de l’écriture est la suivante;
il ya aussi le type date (champs de type date) la syntaxe est la suivantes:
<input type="date"/>
vous pouvez par exemple demandez de saisir une adresse email
le champs "email "vous semblera identiques des autres champs ,mais votre navigateur sait que l’utilisateur doit saisir une adresse email ,en fait le navigateur peut affiche une indication si l'adresse n'est pas une adresse email,l'indication est marqué en rouge que l'adresse écrit par l’utilisateur
si on écrit dans le champs "email"une adresse sous forme d'adresse email le navigateur n'affiche aucun indication,parce que ona remplie le champs "email"correctement
j’espère que vous avez compris le concepts,et la différence entre les types de champs
les éléments d'options :
l'élément <option></option>est utilisé dans un formulaire,permet de représenté un contrôle au sein d'un éléments
<select id="ville">
<option value="">--veuillez choisir une option s'il vous plais --</option>
<option value="marrakeche">marrakeche</option>
<option value="settat">settat</option>
<option value="larach">larach</option>
<option value="aguadir">aguadir</option>
<option value="fes">fes</option>
<option value="casa-blanca">casa-blanca</option>
<option value="el jadida">el jadida</option>
<option value="tanger">tanger</option>
</select>
créations des cases a cocher:
il est très simple a créer des cases a cocher on va juste réutilisé la balise<input> et le type qu'on va utilisé cette fois c'est checkbox;
