Demarrer avec Html

03/11/20 danny


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

Un éditeur

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.

Ci dessous deux pages

  • Une page de base pour commencer
  • Une page de base avec la notion responsive intégrée (qui s'adapte à la taille de l'écran).
Première page : index.html
<!DOCTYPE html>
<html>

<head>
    <title>Titre de note page : ganatan</title>
</head>

<body>

    <h1>un element Headings : Movies List</h1>
    <p>un élément paragraph : Box Office 2019</p>

</body>

</html>
Première page responsive : 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

Détaillons rapidment les éléments de notre page HTML

  • 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
  • <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
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos guides complets

Démarrez avec angular CLI Démarrez avec angular CLI

Gérez le routing Gérez le routing

Appliquez le Lazy loading Appliquez le Lazy loading

Intégrez Bootstrap Intégrez Bootstrap


Utilisez Python avec Angular Utilisez Python avec Angular

Utilisez Django avec Angular Utilisez Django avec Angular

Utilisez Flask avec Angular Utilisez Flask avec Angular

Ganatan site Web avec Angular