HTML

Alors comme ça, on créé des pages web ?!

Sommaire

  • Historique et but de la technologie
  • Syntaxe : langage à balise
  • Concepts
  • Principaux éléments et hiérarchie
  • Séparation technologique

Avant 1990

Le "Web" n'existe pas. L'Internet représente un ensemble d'ordinateurs liés par un réseau et partageant des ressources (fichiers textes pour la grande majorité). On connaissait déjà les emails, le chat et le transfert de fichiers.

 

Au CERN, on pense à un système plus avancé

Après 1990

Le CERN créé le World Wide Web (www) en créant :

  • Le protocole HTTP
  • Les URL
  • Le HTML

 

Le but : créer un système hypertexte afin de partager des ressources au sein du CERN

13/11/1990 : La première page web

Très vieux

Croissance ...

Le système développé au CERN est si séduisant qu'il s'étend rapidement :

  • 1990 : Un seul site web
  • 1992 : 26 sites web
  • 1993 : 623 sites web
  • 1994 : 10k sites web (+ Yahoo + Netscape)
  • 1995 : 23,5k sites web (+ MS IE + Javascript + PHP)
  • 1996 : 230k sites web (+ CSS 1)
  • 1999 : 2M sites web (+ Google ;-))

... illimitée

En 2014, on passait officiellement la barre du milliard de sites web

 

Il existe aujourd'hui des dizaines de navigateurs et des myriades de technologies 

 

Structure

Présentation
Comportements

3 technologies pour une page web

Structuration : Le HTML est le langage statique qui nous permet de structurer le contenu d'une page

 

Présentation : Le CSS est un autre langage statique permettant de gérer la mise en page (couleurs, disposition des éléments, etc) d'une page

Comportements : Le JavaScript est un langage dynamique qui nous permet de gérer les automatismes, interactions avec les utilisateurs, calculs ... Bref, les comportements dynamiques d'une page

HTML

CSS

Javascript

L'Hypertext

Un hypertexte désigne tout simplement un texte qu'on n'est pas obligé de lire de manière linéaire : il nous permet de sauter d'une partie à l'autre quand on le souhaite

 

Premier hypertexte ? XIIème siècle avec l'apparition de .. l'index.

HTML ?

Le HTML est pensé en 1990 comme une évolution du SGML, un langage de balises déjà utilisé au CERN et partout dans le monde pour créer des documents (titres, paragraphes, tableaux, etc).

 

Il y ajoute simplement certaines balises nouvelles 

HTML 2, 3, 4 ... 5

De 1990 à nos jours, le HTML passe par plusieurs versions avec à chaque fois des précisions sur les balises existantes, des suppressions de balises indésirables et des ajouts de nouvelles balises, donc de nouvelles possibilités

En octobre 2014, le W3C publie officiellement la norme HTML 5

 

Le but est de prendre en compte les nouveaux usages et notamment le développement des applications web

 

Il apporte une centaine de nouvelles balises et attributs

Et sinon, ça marche comment ?

Le HTML permet de décrire la structure d'une page web et son contenu.

 

Elle n'est pas lisible simplement par un être humain. Elle est destinée à être interprétée par un navigateur web

Processus :

  • Le navigateur demande une page web à un serveur
  • Le code HTML de la page web est téléchargé
  • Le navigateur interprète le code HTML et en déduit un affichage pour l'utilisateur

Des balises, symboles, etc.

On appelle balise un élément qui a un nom particulier et qui se situe entre deux symboles particuliers : 

  • Le signe inférieur (ou chevron gauche) : <
  • Le signe supérieur (ou chevron droit) : >
  • Exemple : <body>

On appelle élément HTML une structure composée d'une balise ouvrante et d'une balise fermante. Un élément peut contenir d'autres éléments HTML :

 

 

 

La balise fermante commence par </

<body>
    <div>
        <h1>Bonjour</h1>
    </div>
</body>

Des attributs et des valeurs

Les éléments HTML peuvent être porteurs d'informations supplémentaires :

  • Le nom de la balise désigne ce qu'est l'élément
  • Les attributs désignent les caractéristiques / le comportement des éléments

Pour décrire un attribut d'un élément HTML, on place le nom de l'attribut et on précise sa valeur :

 

 

 

L'attribut se place dans la balise ouvrante de l'élément.

<div class="une-classe" id="un-id">
    <a href="http://www.google.com">
        Google
    </a>
</div>

Informations
Structure
Contenu

Informations ?

Avant tout, une page web n'est pas uniquement ce qui s'affiche sur le navigateur.

 

Une page web est aussi constituée d'informations sur le contenu : c'est un document, elle a donc un titre, un résumé, etc

<html>
    <head>
        <meta charset="utf8"/>
        <title>Titre de la page</title>
        <meta name="description" 
            content="Description de la page"/>
        etc etc.
    </head>
    <body>
        ....
    </body>
</html>

Les informations sur la page sont contenus dans l'élément head de la page web

Structure et contenus

Une fois les informations sur la page précisées dans l'élément head, on peut décrire la structure et le contenu de la page

 

De nombreux éléments HTML permettent de structurer la page : menus, titres, images, paragraphes, liens, etc.


<body>
    <div id="en-tete">
        <h1>Voici ma page !</h1>
    </div>
    <div id="principal">
        <h2>Premier chapitre</h2>
        <p>Un paragraphe</p>
        <h2>Deuxième chapitre</h2>
        <p>Un autre paragraphe</p>
        <img src="img/une-image.jpg" />
    </div>
</body>

La structure et les contenus de la page sont décrits dans l'élément body

Le HTML : Syntaxe

<!DOCTYPE html>
<html lang="fr">
    <head>
      <meta charset="UTF-8">
      <title>Ma page HTML</title>
    </head>
    <body>
      <h1>Ma première page HTML</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur ...
      </p>
      <a href="http://www.google.com">
        Voici un lien !
      </a>
    </body>
</html>

Les principaux éléments

<!-- Je suis un commentaire -->

<p>Je suis un paragraphe</p>

<a href="http://www.google.com">Je suis un lien</a>

<div>Je suis une division</div>

<h1>Je suis un titre de niveau 1 (ça va jusqu'à h6 ;-))</h1>

<section>Je suis une section</section>

<header>Je suis une en-tête</header>

<footer>Je suis un bas de section</footer>

<ul>
    <li>Je suis un élément de liste</li>
    <li>Je suis un autre élément de liste</li>
</ul>

<span>Je suis un espace de contenu</span>

<strong>Je suis un texte important (souvent gras)</strong>

<em>Je suis une emphase (souvent italique)</em>

HTML et les formulaires

<!-- 
Les formulaires HTML permettent de recueillir
les données de l'utilisateur -->

<form>Je suis un élément formulaire</form>

<input type="text value="Je suis une boite de texte" />

<textarea>Je suis une grosse boite de texte</textarea>

<input type="radio" value="Je suis un bouton radio" />

<input type="checkbox" value="Je suis une case à cocher" />

<select>
    <option value="1">Je suis un élément de lise déroulante"</option>
    <option value="2">Je suis un élément de lise déroulante"</option>
    <option value="3">Je suis un élément de lise déroulante"</option>
</select>

<button type="submit">Je suis un bouton de soumission du formulaire</button>

Conclusion

  • Une page web est composée par 3 technologies
  • Le HTML permet de structurer le contenu
  • Le CSS permet de mettre en page le contenu
  • Le Javascript amène le dynamisme et les traitements
  • Le HTML est un langage à balises
  • Une page est composée d'éléments HTML imbriqués les uns dans les autres
  • Les éléments peuvent avoir des attributs
  • La balise dit ce qu'est l'élément, les attributs disent quelles sont ses caractéristiques

Où et comment pratiquer ?

 

CodeCademy
https://www.codecademy.com

 

FreeCodeCamp (!important)
https://www.freecodecamp.com

 

Indispensable aussi : CodePen.io

http://codepen.io

Alors, on s'y met ? ;-)

Lancez-vous sur FreeCodeCamp !

Made with Slides.com