Apprendre le Html5

DÉCOUVREZ LE GUIDE COMPLET DE MISE EN FORME DES SITES WEB ET APPRENEZ LES BASES DE LA CONCEPTION WEB. APPRENEZ À UTILISER HTML5 POUR CRÉER DES SITES WEB ET DES APPLICATIONS INNOVANTS.

👉 Astuces Gratuites

Inscription gratuite. Vos données resteront confidentielles et vous pourrez vous désinscrire quand vous voulez. Merci de vérifier votre boite spams.
apprendre le html 5

Sommaire 👇

CV en Html & CSS avec Dreamweaver fichier source : CV.html (Télécharger: clic droit « enregistrer sous »)

Le HTML qu’est-ce que c’est

Le HTML signifie HyperText Markup Language. C’est un langage de formatage web qui permet de structurer notre page avec son contenu. Facile à utiliser. Dans tous les contenus d’une page web on peut retrouver une structure composer de plusieurs balises récurrente tel que h1, p, title, head, html, body

Le HTML5 est de la « programmation » orientée web. Il s’agit d’un langage de balisage utile pour mettre en forme des documents souvent créés pour être visualisés avec les navigateurs. C’est pourquoi il est bon de parler d’un langage de formatage (ou de balisage) plutôt que d’un langage de programmation.

L’expression « langage de balisage » fait référence à un langage qui permet de décrire des données par le biais d’un formatage spécifique. Cette mise en forme est possible grâce aux marqueurs susmentionnés.

En HTML, nous ferons référence aux marqueurs avec le nom de balise. Un peu d’histoire. Le projet HTML est né en 1989 grâce à Tim Berners-Lee avec le protocole HTTP. Le développement a été achevé et rendu public en 1993 au CERN à Genève.

Dans les années 90, le World Wide Web se répand rapidement grâce à la naissance des navigateurs commerciaux. Le premier navigateur à entrer dans les foyers a été Netscape, suivi par Internet Explorer de Microsoft qui, pendant une dizaine d’années, a eu l’hégémonie sur le Web. Nous parlons d’un langage du domaine public qui en est aujourd’hui à sa cinquième version. La syntaxe du HTML est établie, éditée et révisée par le World Wide Web Consortium (W3C).

L’Internet est un réseau de télécommunications

protocole http client serveur

Tout contenu que vous voyez dans votre navigateur lorsque vous naviguez sur le web est renvoyé à partir d’un appel à un serveur : logos, images, textes, vidéos, etc …. Tout cela est contenu dans des fichiers physiques sur un serveur. Les fonctionnalités et services en ligne ne sont pas exclus. Par exemple, lorsque vous vous connectez à un espace privé de votre banque à domicile, vous ne faites qu’un appel au serveur de votre banque. Le serveur vérifiera la validité des informations d’identification saisies et répondra à votre appel en vous communiquant le résultat de sa vérification. Si les informations d’identification sont correctes, il vous laissera entrer, sinon il vous refusera l’accès. Ce système de demande (demande du client) et de réponse (réponse du serveur) est possible grâce à l’architecture client-serveur.

Maintenant que nous avons une compréhension plus claire du contexte dans lequel se situe notre langage de balisage, nous pouvons commencer à coder en créant notre première page HTML.

Structure d’une page HTML

page html structure
En blanc la partie visible du site web

Portez une attention particulière à l’imbrication car la plupart des erreurs commises en HTML concernent la mauvaise fermeture des balises

attention balise de fermeture html

Comment Écrire en HTML5

Pour écrire du HTML, vous avez besoin de deux outils:

1. Un navigateur:

Google Chrome, Safari, Internet Explorer, Edge, Mozilla Firefox et Opera.

2. Un éditeur de texte:

L’éditeur de texte est un logiciel qui permet d’écrire. Le simple Bloc-notes et Bloc-notes Windows et le TextEdit MacOs sont suffisants pour pouvoir écrire en HTML. Cependant je vous recommande Dreamweaver pour gagner du temps et en productivité. J’utilise Dreamweaver pour être plus efficace en écriture html5🙂. Si ce n’est de trouver celui avec qui vous avez le plus de feeling.

Il en existe d’autres : Sublime texte, Komodo edit, Notepad++ , Visual code studio

Cependant je vais m’attarder sur Adobe CC Dreamweaver.

Considérez les balises comme de petits mots, chacun avec une fonction particulière. Ils se reconnaissent parce qu’ils sont entourés de deux caractères spéciaux: « < » et « > ».

Les noms de balises sont établis et mis à jour par le W3C. La syntaxe des balises, bien que chacune d’elles ait un nom différent, est toujours la même : <nom_tag>contenu</nom_tag>.

  1. <nom_tag> – balise d’ouverture; 
  2. </nom_tag> – balise de fermeture (une barre oblique de fermeture avant le nom «/»);
  3. contenu – est le contenu de la balise.

Pour écrire un mot ou une partie de texte en italique, il est nécessaire d’inclure le texte susmentionné dans la balise d’ouverture <em> et la balise de fermeture </em>.

Alors <em>Salut les gens!</em> apparaîtra dans votre navigateur comme ceci: Salut le gens!

Que se passe-t-il si nous supprimons la balise <em> ? Le texte sera simplement affiché normalement

Le navigateur lit de haut en bas et de gauche à droite. Dès qu’il rencontre le caractère « < », il vérifie immédiatement s’il y a une balise par la suite. Si c’est le cas, il formatera le contenu de cette balise conformément aux instructions de la balise.

Essayez plusieurs balises avant de passer à la suite, d’ouvrir une balise sans la fermer ou même d’inventer votre propre balise pour voir comment le navigateur réagit

Balises de structuration du texte

Ces balises permettent de disposer des blocs dans la page contenant du texte, des images ou encore des menus.

  • <abbr> – </abbr>: abréviation
  • <blockquote> – </blockquote>: citation longue
  • <q> – </q>: citation courte
  • <cite> – </cite>: citation du titre d’une œuvre ou d’un événement
  • <sub> – </sub>: mise en indice
  • <sup> – </sup>: mise en exposant
  • <h1> – <h6>: titre de différents niveaux
  • <img />: image grâce aux attributs src (adresse de l’image) et alt (texte de remplacement)
  • <mark> – </mark>: mise en valeur visuelle (le texte est surligné)
  • <strong> – </strong>: mise en valeur forte (le texte est en gras)
  • <em> – </em>: mise en valeur faible (le texte est en italique)
  • <figure> – </figure>: figure (image, code…)
  • <figcaption> – </figcaption>: description de la figure
  • <audio> – </audio>: son
  • <video> – </video>: vidéo
  • <source> – </source>: indique un format possible pour les balises <audio> et <video>
  • <a>  – </a>: lien hypertexte grâce à l’attribut href.
  • <br />: retour à la ligne
  • <p> – </p>: paragraphe
  • <hr />: ligne de séparation horizontale
  • <address> – </adresss>: adresse de contact
  • <del> – </del>: texte supprimé
  • <ins> – </ins>: texte inséré
  • <dfn> – </dfn>: définition
  • <kbd> – </kbd>: indiquer un code que doit taper le visiteur
  • <progress> – </progress>: barre de progression
  • <time> – </time>: date ou heure
  • <pre> – </pre>: le texte à l’intérieur de la balise sera sous forme de code

Balises de listes

Ces balises permettent de créer des listes (numérotées, à puces…).

  • <ul> – </ul>: liste à puces, non numérotée
  • <ol> – </ol>: liste numérotée
  • <li> – </li>: élément de la liste à puces
  • <dl> – </dl>: liste de définitions
  • <dt> –  </dt>: définition du terme

Balises de tableau 

Ces balises ont pour but de créer un tableau structuré avec des lignes et des colonnes.

  • <table> – </table>: tableau
  • <caption> – </caption>: titre du tableau
  • <tr> – </tr>: ligne de tableau
  • <th> – </th>: cellule d’en-tête
  • <td> – </td>: cellule
  • <thead> </thead>: section de l’en-tête du tableau
  • <tbody> – </tbody>: section du corps du tableau
  • <tfoot> – </tfoot>: section du pied du tableau

Balises de formulaire

Ces balises permettent de créer des formulaires de contact par exemple.

  • <form> – </form>: délimite un formulaire (method : indique la méthode d’envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post / action : la page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire. )
  • <fieldset> – </fieldset>: permet de regrouper plusieurs éléments d’un formulaire
  • <legend> – </legend>: titre d’un groupe dans un formulaire
  • <label> – </label>: titre d’un élément de formulaire
  • : champ de formulaire grâce à l’attribut type
    • <textarea> – </textarea>: zone de saisie multiligne grâce aux attributs rows et cols (nombre de lignes et de colonnes)
  • <select> – </select>: liste déroulante
  • <option> – </option>: élément d’une liste déroulante
  • <optgroup> – </optgroup>: groupe d’éléments d’une liste déroulante

Balises sectionnantes

Ces balises nous sert à construire les éléments de base d’un site web.

  • <header> – </header>: en-tête
  • <nav> – </nav>: liens principaux de navigation
  • <footer> – </footer>: pied de page
  • <section> – </section>: section de page
  • <article> – </article>: article (contenu autonome)
  • <aside> – </aside>: informations complémentaires

Balises génériques

Il y a deux balises génériques: l’une est inline, l’autre est block. Elles n’ont pas de sens sémantique.

  • <span> – </span>: balise générique de type inline

Autorise les autres éléments à venir s’asseoir à gauche et à droite.

Ne se redimensionne pas avec width et height.

Respecte les marges gauches et droites, mais pas les marges haut et bas.

  • <div> – </div>: balise générique de type block

Force un passage à la ligne.

Ne tolère pas d’élément à gauche ou à droite.

Se redimensionne avec width et height.

Respecte toutes les marges.


Structure HTML5 dans Dreamweaver

Exemple en HD

<html>: balise parent de tous les autres. Représente la racine d’un document HTML.

html 5 structure

<meta>: contiens des métadonnées relatives au document HTML. Le UTF-8 signifie le jeu de caractère alphanumérique. Avez-vous déjà remarqué des points d’interrogation, des carrés ou en général, des symboles particuliers dans les pages Web? Dans ces cas, un caractère qui n’est pas présent dans le jeu de caractères spécifié a été utilisé dans l’en-tête et le navigateur ne savait donc pas comment l’afficher. 

<head>: contiens les balises <style> (pour insérer le css), <meta>, <title>, <script>… Tous ceux qui caractérisent une page web.

Les éléments HTML BLOCK et INLINE

Dans le HTML il y’a deux familles d’éléments HTML. Des balises BLOCK et des balises INLINE. les éléments HTML de type BLOCK commencent toujours sur nouvelle une ligne et prennent toute la largeur de l’écran. Comme les éléments de titre <h1> jusqu’à <h6>. Chaque élément commence sur une nouvelle ligne et ne laisse aucune place pour mettre un autre élément HTML à côté.

Les éléments HTML block:

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset>
<figcaption><figure><footer><form><h1>…<h6><header><hr><li><main><nav>
<noscript><ol><p><pre><section><table><tfoot><ul><video>
en bleu les balises récurrentes

Cependant je ne vais pas vous demander de retenir tous les éléments HTML par cœur 😱. il y’a des éléments qui reviennent souvent dans les pages web et qui sont incontournable. À force de pratique, on les intègre !

Les éléments HTML de type INLINE font le contraire et prennent seulement la place qu’on leur donne. Comme la balise image <img>. Remarquer <h1> et <p > sont de type BLOCK.

Les éléments HTML Inline:

<a><abbr><acronym><b><bdo><big><br><button><cite><code>
<dfn><em><i><img><input><kbd><label><map><object><output>
<q><samp><script><select><small><span><strong><sub><sup><textarea>
<time><tt><var>
NB: un élément inline ne peut pas contenir d’éléments block
N’hésitez pas à recommencer plusieurs fois pour comprendre le fonctionnement des balises

Comment insérer des titres en HTML5

Fichier > Nouveau > Créer > dans <body> insérez les balises HTML

<h1> est le titre le plus important et c’est une bonne règle d’en utiliser un par page car il représente l’en-tête/sujet principal de l’ensemble du document. C’est une autre bonne habitude de ne pas sauter les niveaux d’en-tête: commencez par <h1>, puis utilisez <h2>, etc.

Ne pas mettre en gras et insérer des balises <strong> dans les titres h1…h6. Oui j’ai vu ça😐

Comment insérer une image en HTML5

Insertion > image > choisir une image dans l’ordinateur

Comment insérer des liens en HTML5

Insertion > Hyperlink > mettre l’URL source (cible: _blank pour ouvrir la page dans un nouvel onglet)

Afficher la palette des propriétés avec CTRL F3

Liens menus

Double clic sur le texte pour une sélection facile puis choisir l’élément HTML

sans taper une seule ligne de code en quelques clics sur dreamweaver

Lien Mailto

L’indication mailto, à l’intérieur de l’attribut href de la balise <a>, indique au navigateur, en cliquant dessus qu’il doit ouvrir un logiciel d’email par défaut installé sur l’ordinateur (Outlook par exemple).

Dans l’exemple ci-dessous, lorsque vous cliquez sur le texte « Contactez moi ! » , La page d’envoi d’un nouvel e-mail dédié au logiciel sera ouverte avec le champ destinataire déjà rempli avec « info@votresite.fr ». De toute évidence, quel que soit la messagerie utilisé par l’utilisateur, cela fonctionne. Si le clic est effectué à partir d’un smartphone, l’application dédiée à la gestion des emails s’ouvrira.

Insertion > lien de messagerie

Un code html mal écrit ne pose pas de problèmes au navigateur. Mais il peut causer des problèmes dans la mise en forme des pages. Le résultat esthétique/fonctionnel pourrait être compromis.

Le HTML est « insensible à la casse ». Cela signifie qu’il est complètement indifférent que les balises soient écrites en MAJUSCULES ou en minuscules.

Erreurs courantes :

  1. Si une balise ouverte (par exemple <em>) n’est pas fermée, son effet peut être très différent selon le type de navigateur utilisé. Si <em> n’est pas fermé, par exemple, le reste de la page sera mis en italique. C’est une excellente « bonne pratique » de fermer tout de suite la balise dès que vous l’ouvrez pour éviter de l’oublier;
  2. Une balise de fermeture sans la balise d’ouverture correspondante n’a aucun effet ;
  3. Si une balise contient une syntaxe incorrecte, elle est presque toujours ignorée par le navigateur ;
  4. Si la forme conventionnelle de la balise est erronée, par exemple si le signe mineur « < » est écrit deux fois « << », le navigateur l’interprétera comme du texte et l’affichera dans la page Web.

Liens Ancres

Remplissons les trois paragraphes <p> avec du texte long afin d’allonger verticalement la bar du navigateur. De cette façon, nous pouvons tirer parti de la fonction d’ancrage de la balise <a>. Cette balise lien permet de lier aussi des éléments entre eux sur la même page HTML.

La première chose à faire est de rendre nos trois titres de paragraphe identifiables.

Pour ce faire, nous utiliserons l’attribut « id » . Fondamentalement, cet attribut nous permet de donner un identifiant unique à n’importe quelle balise HTML. Utilisons-le à l’intérieur de la balise d’ouverture de chaque sous-titre individuel <h2> qui introduit nos paragraphes. Comme valeur unique, nous écrivons les ancres #un #deux #ok

Liens sources : Ancres.html – clic droit enregistrer sous pour récupérer le fichier source

Chemin absolu et chemin relatif qu’est-ce que c’est

Chaque fois que vous avez besoin de cliquer sur un mot ou, plus généralement, sur un contenu pour rediriger l’utilisateur vers une autre ressource (une page web, un contenu multimédia, un contenu téléchargeable, etc.) ou, même, pour afficher une image dans le navigateur, ou pour charger une ressource externe utile à la fonctionnalité de notre page HTML. Il est obligatoire de spécifier un chemin d’accès. Les sites Web sont en fait organisés en dossiers et sous-dossiers comme nous organisons les documents sur notre ordinateur tous les jours. Les chemins sont utilisés pour pouvoir se déplacer entre les dossiers de notre site Web.

Nous en avons déjà vu quelques-uns lorsque nous avons défini  l’attribut href dans la balise <a>. Nous avons en effet précisé l’URL de la page web qui nous intéressait.

Dans ce cas, nous avons utilisé un chemin absolu. C’est un lien direct qui affiche le contenu, quelle que soit votre position d’où vous le chercher.

Un chemin relatif indiquera seulement le chemin à prendre par rapport à votre position dans le dossier et où vous êtes situé dans le dossier du site. En effet ça ne sera pas un chemin direct (absolu), ça sera un chemin relatif qui dépendra de votre positionnement.

Les attributs HTML5

Les attributs Html5 sont placés dans les balises ouvrantes et vont donner plus de caractéristiques pour définir au mieux nos éléments HTML. Pour voir plus clair, voici un exemple:

On voit la balise image qui contient 4 attributs dont « src » pour la source de l’image, « width » la largeur, « height » la hauteur et alt pourra contenir le nom de l’image qui permet le référencement. Chaque attribut va jouer un rôle pour définir notre balise et apporter plus d’informations.

la balise <a> a pour attribut « href » pour la source du lien.

la balise <p> contient l’attribut style pour donner une couleur verte dans cet élément paragraphe.

Comment créer un formulaire en HTML5

Ce formulaire en Html5 ne pourra pas fonctionner directement, car il lui faudra un serveur PHP pour recevoir des données. Nous avons vu les différentes balises qui composent notre formulaire pour au mieux stylé ce formulaire avec du CSS. Même dans les formulaires il existe différents attributs qui sont en vert comme « cols » et « maxlength » qui définit le nombre de colonnes soit la largeur de la zone du texte et le nombre de caractères autorisés 120. Fichier source: Formulaire1

Comment mettre les CSS en HTML5

Il y’a trois manières d’insérer du CSS dans un document HTML. Nous allons voir sur Dreamweaver comment les insérer.

Laisser un commentaire

2010 – 2022 © webmaster Tous Droits Reservés
Productions Associées asbl
Rue Coenraets, 72
1060 Bruxelles
N° de TVA: BE 0896.755.397
N° d’entreprise: 896755397
Activité n°489730138 Aminash
Compte bancaire :
Titulaire : Smartbe
BE62 0689 0087 1561 – BIC GKCCBEBB