Apprendre le HTML

le 1 janvier 1970
40 minutes Facile 29 vues
Comme vous l'attendiez surement, je vous présente dans ce tutoriel les bases du langage HTML. Après avoir lu ce tutoriel, vous saurez comment créer une page web et structurer son contenu.

Sommaire

  • Les langages du web
  • Choisissez un IDE
  • Présentation du language
  • Ma première page web
  • Les balises à connaître
  • Les attributs
  • Travaux pratiques
  • Pour aller plus loin

Les langages du web

Avant d'entrer dans le vif du sujet, faisons un tour rapide des langages du web et de leurs fonctions. Avant de commencer le HTML il est bon de savoir ou l'on met les pieds. Lorsque vous demandez dans votre navigateur à accéder à l'adresse https://www.worldanim.net, votre navigateur va automatiquement télécharger plusieurs types de fichiers. C'est l'ensemble de ces fichiers qui permettent d'afficher la page à laquelle vous accédez. Ces fichiers sont écrits dans différents langages.
Les fichiers .html, le langage HTML : C'est le langage qui permet de décrire le contenu de la page. C'est dans ce fichier que les titres et les textes de votre page apparaîtront.
Les fichiers .css, le langage CSS : C'est le langage qui permet de définir l'apparence de votre page. C'est grâce au css que l'on peut indiquer au navigateur que le titre apparaîtra en bleu ou en rouge.
Les fichiers .js, le langage Javascript : C'est le langage qui permet de rendre dynamiques les pages web. Grâce au Javascript, les informations contenues dans la page peuvent être mises à jour, et il est possible d'avoir des interactions avec la page sans changer de page.

Choisissez un IDE

Pour coder, on utilise un logiciel que l'on appelle un éditeur de code. C'est un bloc-note spécialisé pour développer des sites ou des applications. Les plus connus sont : Pour ma part j'utilise Notepad++ que vous pouvez télécharger ici. Votre éditeur de code met en surbrillance par exemple les balises, rendant ainsi le repérage et la lecture des lignes de code plus simple.

Image ScreenShot saisi avec l'éditeur notepad++ mettant en avant de l'html et du css.

Présentation du language

XHTML = eXtensible HyperText Markup Language
Le HTML est le language utilisé pour la construction des pages WEB. Il permet en effet de dire au navigateur d'afficher une image, un tableau ou encore un titre. Le HTML se compose exclusivement de balises mettant en avant du texte ou des informations destinées à être vues sur l'écran de l'utilisateur.

Dis donc Jamy, qu'est ce qu'une balise ?

Une balise est un terme du langage informatique. Elle est aussi appelée fonction. Voici un exemple : 
<p>...</p>
Ici on a la balise p qui est ouverte puis fermé. Le contenu de la balise se trouve à la place des "...". Vous l'aurez compris, pour utiliser une balise il suffit de placer le nom de la balise entre <> et pour fermer une balise il faut faire la même chose avec un / devant le nom de la balise. Les balises s'imbriquent les unes dans les autres de cette manière : 
<p>
  <i>Hello !</i>
</p>
Ici la balise i est dans la balise p. Attention les balises ne peuvent pas se croiser! 
<p>
  <i>Hello !</p>
</i>
Ce code est incorrect! Simple à utiliser, le HTML est loin d'être le langage WEB le plus puissant. Il ne nous permet pas de concevoir un design de site internet, ni de traiter des informations reçues par l'internaute via des champs de formulaire. En résumé, avec le HTML on peut :
  • Afficher du texte dans une page web
  • Structurer la page grâce aux balises (indiquer ce qui est un titre, un paragraphe etc.)
  • De donner des informations au navigateur (langue, favicon etc.)
  • De lier des pages web (via les liens et des ancres)
  • D'afficher des formulaires (sans pour autant traiter les données, le HTML ne s'occupe que de l'affichage)

Ma première page web

Pour créer votre première page web, il suffit de créer un fichier avec l'extension .html sur votre ordinateur. Vous pourrez l'ouvrir avec un navigateur comme chrome ou firefox. Toutes les pages web ont la même structure minimum que je vous suggère de reprendre avant de commencer votre page. 
<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
  </body>

</html>
La première ligne indique au navigateur que vous utilisez la dernière version de HTML! (5) La balise head est là pour contenir des informations sur la page qui ne seront pas affichés dans le navigateur. Enfin la balise body contient le contenu de la page qui sera affiché.

Un titre pour votre page ?

Pour donner un titre à votre page, qui sera affiché dans l'onglet de votre navigateur, utilisé la balise title, entre les balises head de la page! 
<title>Mon super titre</title>
Les balises vues précédemment servent à plusieurs choses:
  • Indiquer au navigateur ce qu'il doit afficher (un titre, un paragraphe)
  • Comment il doit le faire
  • Et éventuellement par quels moyens
Il est inutile de préciser que les balises seront invisibles une fois la page sur le net: elles ne sont qu'un repère pour le navigateur. Si il y en a qui apparaissent cela veut tout simplement dire que vous avez fait une erreur quelque part. Il existe un type de balise un peu spécial dont nous n'avons pas encore parlé, les balises auto-fermantes. Plutôt que de les ouvrir et de les fermer plus tard, on ouvre et on ferme dans la même instruction. 
<img src="..." />
Signale au navigateur qu'il y a une insertion d'image.
Pour info : La norme W3C ( W3C) vous permet de vérifier la validité de votre HTML.

Les balises à connaître

Elles participent toutes à la construction de votre site, blog, forum... Ce sont les balises que vous utilisez à l'intérieur du body. La balise paragraphe : 
<p>...</p>
La balise qui met en gras un texte : 
<strong>...</strong>
La balise qui saute une ligne : 
<br />
La balise qui affiche un lien : 
<a href="url">...</a>
La balise qui insère une image: 
<img src="url" />
Les balises de tableaux : 
<table>
  <tr>
    <td>Première case</td>
    <td>Deuxième case</td>
  </tr>
</table>
Les tr sont des lignes de tableau, obligatoirement dans un table, et les td sont des colonnes au sein d'une ligne, obligatoirement dans un tr. La balise qui permet de créer un block (pour diviser la page en plusieurs parties par exemple) 
<div>...</div>
Les balises de formulaire : 
<form>...</form>
(regroupe un ensemble de champ) 
<input type="text" name="nom" />
Créé un champ de formulaire (s'intègre dans la balise "form"). La balise de champ de formulaire multiligne : 
<textarea>...</textarea>
Bien sur, il y en a plein d'autres: ce ne sont que les plus utilisés! Vous avez avec tout ça de quoi faire un site qui tient à peu près la route. Pour une liste plus exaustive des balises qui existent (aller y faire un tour) rendez-vous sur mozzila.org! https://developer.mozilla.org/fr/docs/Web/HTML/Element

Les attributs

Ils servent à donner des précisions sur les balises. Par exemple lors de l'insertion d'une image, le navigateur n'est pas devin, il ne sait pas ce que vous voulez insérer comme image. Il faut donc utiliser un attribut de la balise img pour lui spécifier! L'attribut src=".." lui précise quelle image il doit inserer grâce au chemin de l'image qui suit l'attribut.

Image

Ici le navigateur sait qu'il devra insérer l'image dont le chemin par rapport au fichier html correspond à "pas message.png". Par ailleurs grâce à l'attribut "title", en pointant sa souris sur l'image, l'internaute verra apparaitre le texte "aucun nouveaux messages". Nous avons parlé des insertions d'images, maintenant, il serait habile de ma part de vous parler de la construction de liens. Comme vu précédemment, la balise permettant la construction du lien est "a". Seulement, vous pouvez tester votre balise. Vous ne pourrez pas encore cliquer dessus et c'est normal.

Mais pourquoi donc Jamy ? Eh bien parcequ'il nous faut un attribut!

L'attribut href="" fera très bien l'affaire.

Image

Ainsi, ce lien pointera vers une page d'un site dont le chemin est "vue_generale.php" et aura comme label cliquable "Vue générale".

Travaux pratiques

Créez un menu

L'idée est de faire un menu que l'on peut par exemple rencontrer sur des sites, des jeux ou des forums.

Image

C'est quelque chose de pas bien compliqué à réaliser: bien entendu ne connaissant pas le CSS, vous ne pouvez pas coloriser votre texte. (mais cela viendra). Rappels :
  • Un lien s'effectue avec la balise 'a' suivi de l'attribut 'href' qui pointe sur la page de destination.
  • Une image s'insère grâce à la balise 'img' suivi de l'attribut 'src' qui indique la source de l'image. Un titre à l'image ne serait pas de trop: pour cela utilisez l'attribut 'title'.
  • Les balises 'div' structurent votre code: utilisé les pour une meilleure clarté.
  • Entourer vos paragraphes de texte à l'aide de la balise 'p': elle constitue un élément de propreté supplémentaire.

Créez un formulaire

Ici, je vous propose la création d'un formulaire: un peu style celui d'une inscription à un site. Bien entendu vous êtes libre d'en faire un comme vous voulez. Voici un exemple de formulaire :

Image

Rappels :
  • La balise 'form' entoure formulaire. L'attribut 'action' prend l'url de la page qui traite les données et 'method' prend celle de 'post' (indique de quelle manière seront transmises les données du formulaire)
  • 'input' insère une zone de formulaire. Cette balise se complète par l'attribut 'type' qui peut prendre beaucoup de valeur: 'text' --> la zone de formulaire permettra de rentrer du texte[/item] 'password' --> permet de rentrer du texte de façon caché (eh oui!! on ne regarde pas un mot de passe dans un champ mot de passe)[/item] 'submit' --> permet la création d'un bouton pour soumettre les données du formulaire. 'value' indique ce qu'il y'a marqué sur ce bouton.[/item] 'checkbox' --> crée une case à cocher carrée.[/item]
  • Ne pas oublier de structurer le code avec des 'div'
  • Pensez aux tableaux pour mieux organiser votre formulaire sur le plan visuel

Pour aller plus loin

Merci d'avoir suivi ce tutoriel! J'espère qu'il vous aura appris des choses 😉 Quelques liens qui pourront vous être utiles :
Bienvenue sur WorldAnim
Partagez vos créations, apprenez de nouvelles choses, et obtenez de l'aide pour progresser.
S'inscrire