Demarrer avec Html

21/05/19 danny ganatan

Qu’allons nous faire ?

Nous allons étudier les bases du langage HTML.

L' objectif de ce tutoriel n'est pas de devenir un expert de ce langage, mais d'en comprendre les grands principes et au final de disposer d'exemples de base qui pourront nous être utiles en tant que développeur Frontend.


Théorie

HTML signifie HyperText Markup Language

En français il pourrait être traduit par langage de balisage d'hypertexte.
Il s'agit d'un langage basé sur l'utilisation de balises.

Ce langage permet de créer et de représenter le contenu d'une page web et sa structure.

Ce langage utilise deux types d'éléments

  • des balises
  • des attributs ou propriétés
     

Le langage HTML est associé à deux types de technologies

  • CSS utilisée pour décrire la présentation d'une page
  • JavaScript utilisée pour créer des fonctionnalités interactives dans la page

Nous verrons plus loin comment les intégrer à notre page HTML.


Historique

Quelques dates nous indiquent l'évolution de ce langage

  • Août 1991 : Tim Berners-Lee annonce HTML 1.0
  • Fin 1995 : HTML 2.0 est finalisé.
  • 14 janvier 1997 : la spécification HTML 3.2 est publiée
  • 24 décembre 1999 : la spécification HTML 4.01 est publiée
  • 2000 : Abandon de HTML au profit de XHTML
  • juillet 2009 : le W3C décide la non-reconduction du XHTML 2
  • Octobre 2014 : HTML5 est la dernière révision majeure du HTML

Pratique

Pour commencer à s'exercer un simple éditeur de texte suffira (prenez par exemple bloc notes sous windows ).

Notre première page se résumera à un fichier que nous allons appeler index.html.

Remarque.
On rencontre parfois HTM au lieu de HTML.
HTM étant l’extension de nom de fichier tronquée à trois lettres.
Extension utilisée sur d’anciens systèmes d’exploitation de Microsoft.


Nous allons analyser les différents éléments qui la constituent.

index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <title>titre de notre page</title>
</head>

<body>
  Contenu de notre page
</body>

</html>

Explications

  • Le doctype <!DOCTYPE>
    Autrefois complexe cette balise simple indique que la page est écrite en HTML5
  • La balise </html>
    Balise principale.
  • L'en-tête <head>
    Cette section fournit des informations générales sur la page.
    Son titre, l'encodage, etc. 
    Ces informations ne sont pas affichées sur la page.
    La balise meta viewport permet d'optimiser la page pour les mobiles.
     
  • Le corps <body>
    Désigne la partie principale de la page.
    Tout ce qui est écrit à l'intérieur de cette balise sera affiché à l'écran.

Balises

On distingue deux types de balises : les balises en paires et les balises orphelines.

  • <nom-balise-paire> contenu de la balise </nom-balise-paire>
  • <nom-balise-orpheline>

Nous étudierons en détail certaines de ces balises dans le tutoriel suivant

Liste choisie de balises

  • <a> : ancre ou anchor
  • <audio>
  • <base>
  • <blockquote>
  • <br>
  • <button>
  • <code>
  • <cite>
  • <col>
  • <em>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <header>
  • <hr>
  • <img>
  • <input>
  • <li>
  • <main>
  • <meta>
  • <nav>
  • <ol>
  • <p>
  • <pre>
  • <q>
  • <span>
  • <strong>
  • <table>
  • <tbody>
  • <td>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <title>
  • <tr>
  • <ul>
  • <video>

 


CSS

Le langage HTML peut être utilisé avec le langage CSS

  • HTML décrit la structure d'une page
  • CSS décrit la présentation des documents HTML


Deux méthodes peuvent être utilisées pour intégrer du code CSS dans une page HTML

  • Méthode 1
    En écrivant directement le code dans la page en utilisant la balise <style></style>
methode1.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>titre de notre page</title>
  <style>
    body {
      color: blue;
    }
  </style>
</head>

<body>
  Contenu de notre page
</body>

</html>

 

  • Méthode 2
    En indiquant un fichier css extérieur contenant le code CSS ( dans notre exemple le fichier methode02.css)
    On utilise pour cela la balise link
methode2.css
body {
  color: blue;
}
methode2.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>titre de notre page</title>
  <link href="methode2.css" rel="stylesheet">
</head>

<body>
  Contenu de notre page
</body>

</html>

Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée