Cours HTML/CSS

Le HTML c'est quoi ?

Samy Rabih - Etudiants IDRAC 2014

Qui suis-je ?

  • Développeur Web (PHP) chez O2Sources

  • Cuisine du Web / Museomix

Généralités

Le HTML structure

Les CSS habillent

Le Javascript anime

Origine du HTML

  • Nécessité d'organiser des documents entre eux
  • Vient de SGML, du CERN, comme HTTP et les URLs
  • Plusieurs versions jusqu'à maintenant :
    HTML 2, 3.2, 4.0, XHTML, 5

Principe de base

Du code informatique...

                    
        <ul>
          <li style="color:Red">
          	Coucou je suis un élément d'une liste
          </li>
          <li>Moi aussi !</li>
        </ul>
                    
				
...affiché (interprété) par les navigateurs Web

  • Coucou je suis un élément d'une liste
  • Moi aussi

La sémantique

Qu'est ce que c'est ?

Chaque balise HTML a un sens

  • <p> : un paragraphe
  • <table> : un tableau
  • <ul>, <li> : des listes
  • etc

A l'origine, c'était très limité
(adapté aux usages de l'époque, notamment des thèses scientifiques)

La sémantique

A quoi ca sert ?

Hiérarchiser les informations

Rendre le contenu + facilement analysable par les moteurs de recherche (et d'autres outils)

Pour les méta-données

Une page web-type

C'est (presque) comme le corps humain, avec ...

Le <head>

Ca ressemble à ça :

                    <!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <!-- Coucou je suis un commentaire -->
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
				

Le <body>

Ca ressemble à ça :

                    <body>
    
Coucou je suis haut du corps

Coucou je suis le ventre

Coucou nous sommes les pieds
</body> </html>

Une page web,
ça contient quoi ?

Du texte

Exemple de HTML

Des images

Grumpy cat

Du son

Des vidéos

Les balises HTML courantes

Les blocs de texte

<p>, <div>, <span>

Les titres

<h1> à <h6>

 

Titre 1

Titre 3

Titre 6

Les listes

<ul>, <ol>, <li>

 

<ul>

  • Liste non ordonnée
  • Liste non ordonnée

<ol>

  1. Liste ordonnée
  2. Liste ordonnée

Les éléments de formulaire

<input>, <textarea>, <select>, <button>

Elements de formulaire

Les balises d'emphase

<strong> et <em>

 

<em> permet de séparer un mot dans une phrase.

<strong> permet de mettre en avant du texte.

Le retour à la ligne

<br />

 

Il permet de revenir à
à la ligne...

...mais souvent avec un mauvais interlignage

Indice et exposant

<sup> et <sub>

H2O  102

H2  102

Les liens

<a>

 

Externe

<a
href="http://www.google.fr"
target="_blank"
title="Lien vers Google">
Emmenez-moi loin d'ici !
</a>

Les images

JPG, GIF, PNG

<img>

<img src="dossier/toto.jpg" 
	alt="Ceci est une image représentant Toto"
    width="100" height="100" />

Les tableaux

<table>, <tr>, <td>, <tbody>, <thead>, <tfoot>

Le minimum vital pour un tableau

<table>
 <tr>
  <td>Coucou</td>
 </tr>
</table>

Autre exemple :
utilisation de tbody, tfoot et thead

Autres balises

<dl>, <dt>, <dd>, <abbr>, <iframe>,
<q>, <blockquote>, etc

Les antiquités

<marquee>, <font>, <center>, etc

 

Un texte défilant c'est quand même très pénible à lire, non ?

 

<marquee>Texte à faire défiler</marquee>
<font color="Red">Texte en rouge</font>

HTML 5

<header>, <footer>, <aside>, <section>, <article>, <nav>, etc

 

(enfin des balises qui portent bien leur nom !)

Un exemple

Museomix

Comment on écrit
du HTML?

"A la main"

Bloc-notes, éditeur de texte

Avec un éditeur WYSIWYG

Dreamweaver

Avec un CMS

WordPress, Drupal, MailChimp