Cours HTML/CSS – Le HTML c'est quoi ? – La sémantique

View Github Repository Open presentation in a new window

samy

See all presentation from samy

Cours HTML/CSS – Le HTML c'est quoi ? – La sémantique

0 1

cours-bases-html

Cours bases HTML

On Github samy / cours-bases-html

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>
    <header>Coucou je suis haut du corps</header>
    <p>Coucou je suis le ventre</p>
    <footer>Coucou nous sommes les pieds</footer>
</body>
</html>
				

        
Une page web,ça contient quoi ?

			
Du texte

                

			
Des images

                

			
Du son

                

  Votre navigateur n'est pas compatible


			
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>

                    Liste ordonnée
                        Liste ordonnée
					

            
Les éléments de formulaire

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

               

            
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

                
H<sub>2</sub>  10<sup>2</sup>

            
Les liens

                
<a>

                 
 

               

               		
Interne


<a href="#toto">
	Je suis un lien
</a>

<a id="toto">
	Je suis la cible
</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

                
Comment on écrit 
du HTML?

			
"A la main"

                
Bloc-notes, éditeur de texte

			
Avec un éditeur WYSIWYG

                
Dreamweaver

			
Avec un CMS

                
WordPress, Drupal, MailChimp