Cours 1 : de html à mysql, tour d’horizon de cinq langages

Dans le semestre, on verra 4 voire 5 langages : html, css, php, mysql, et un peu de javascript

Html

un document html à partir de rien : premier.html
<!DOCTYPE html>
<html dir="ltr" xml:lang="fr-FR" lang="fr-FR">
	<head>
	  <meta charset="utf8" />
          <title>IO2</title>
	  <meta name="author" content="Christophe Prieur" />
	</head>
	<body>
	    <p>Hello, world!</p>
	</body>

</html>

<!doctype html> :
avant, ici on indiquait la version.  Maintenant, version courante html5, mais on ne l’indique plus (ce qui suffit à dire html5, du coup)

html5 pas encore finalisé en tant que format (défini par le W3C, consortium qui se charge des formats web) mais déjà partiellement pris en compte par les navigateurs (à des degrés variables).

différence entre norme et standard

menu Chrome pour outils dev

Accéder au panneau d'outils de dev dans Chrome (ici, sur Mac)

Affichage du document html ci-dessus dans un navigateur puis analyse du source (dans Chrome : Afficher > Options pour les développeurs > Outils de développements.  Pour Firefox, peut-être un menu similaire pour les dernières versions, sinon utiliser l’extension firebug).

html : contient head + body

body contient « hello world »
seul le contenu du body est affiché

HTML : HyperText Markup Language
Vient de SGML, qui a donné aussi XML
markup : « balises »
balise ouvrante / fermante, comme des parenthèses
Deux balises ouvrante / fermante et leur contenu définissent un « élément »
structure hiérarchique

Ca, c’est de la syntaxe (la grammaire du langage).
Les noms des balises, c’est du vocabulaire.

Un exemple un peu plus riche : deuxieme.html

<!DOCTYPE html>
<html dir="ltr" xml:lang="fr-FR" lang="fr-FR">
	<head>
      <meta charset="utf8" />
	  <title>IO2</title>
	  <meta name="author" content="Christophe Prieur" />
	</head>
	<body>
	  <header>
	    <h1>Bienvenue !!</h1>
	    <p>Ceci est la <em>première page</em> du cours
	    d'<abbr title="Internet &amp; Outils">IO2</abbr> !!</p>
	  </header>
	
	  <section>
	    <header>
	      <h1>D'abord, il faut dire bonjour</h1>
	    </header>
	    <p>Hello, world!</p>
	  </section>
	</body>

</html>

Attention : ne pas confondre head, header et h1, h2 etc.
header est un ajout de html5, on y reviendra (un autre jour).

Pour le vocabulaire du langage (les balises existantes), se reporter à un dictionnaire.

Analyse rendu / source dans Chrome

Le html généré par un outil

La plupart du temps, le html est généré par des logiciels.
Exemple sur didel : édition d’un texte avec interface wysiwyg
(wysiwyg : what you see is what you get)
affichage du html produit

affichage du html en mode edit sur didel

affichage du html en mode edit sur didel

version html du texte édité

version html du texte édité

Affichage du résultat sur didel, intégré dans une page, analyse du code avec Chrome.

panneau dev de Chrome sur l'exemple didel

Le code html précédent, dans un div, est encastré dans la page

On retrouve le html qu’on a vu, inséré dans un élément div encastré dans le reste de la page.
D’où l’intérêt de l’organisation hiérarchique du document.

Parenthèse : pourquoi apprendre le html ?  Pas seulement savoir l’écrire, mais savoir le générer, savoir le parser (décomposer ses éléments à l’aide d’un programme)
-> savoir écrire des programmes qui le manipulent.

Comparaison du résultat sur didel et en local sur un fichier vierge.

capture d'écran

comparaison des deux rendus

Sur didel, puces carrées, couleur de fond, police sans serif.
Affichage du style de l’élément ul dans Chrome -> square

capture d'écran style ul

le style de l'élément ul

Séparation fond (html) / forme (css)
Travail du rédacteur / du graphiste

Le tour des cinq langages sur un site web

Exemple sur Facebook
La page, c’est du html.

css

Les couleurs, les polices
mais aussi le positionnement des éléments dans la page.

Exemple de l’affichage avec une mauvaise connexion (genre smartphone), où la page s’affiche sans que le css ait été chargé (le fichier html est chargé, il indique le nom d’un fichier css, qui ne peut pas être chargé à cause de la mauvaise connexion).

javascript


On survole le nom d’un utilisateur, une boîte s’affiche avec des infos sur lui : javascript, exécuté par mon navigateur, a demandé des infos à Facebook, et une fois qu’il les a reçues, insère un élément dans le document html, dont le css indique qu’il doit être par-dessus le reste.

php

Quand je clique sur une photo, l’url change.

www.facebook.com/photo.php
une photo avec son url sur Facebook

une photo avec son url sur Facebook

-> le navigateur a demandé à Facebook d’exécuter le programme photo.php, avec les paramètres indiqués dans la suite de l’url.
Le résultat est un document html, que mon navigateur affiche.

accès à la base de données

Entre-temps, le php, chez FB, a interrogé la base de données.
L’interrogation de la base se fait au moyen d’un autre langage encore.
Sur des sites courant (pas de la taille de FB), on utilise la plupart du temps un langage de la famille SQL, MySQL par exemple.

Cette entrée a été publiée dans Cours, avec comme mot(s)-clef(s) , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

2 réponses à Cours 1 : de html à mysql, tour d’horizon de cinq langages

  1. DjiBee dit :

    Tiens pourquoi tu spécifies un charset puisque a priori (en lecture rapide) tu n’utilises que des caractères de l’ascii standard 7 bits ? Pareil pour le dir ltr, c’est pas par défaut ?

    • Christophe dit :

      Le charset, c’est pour que ce soit un automatisme : si je ne le mets pas j’oublierai de l’ajouter quand je mettrai un caractère accentué.
      Et ça me permet d’insister de manière subliminale sur l’utilisation d’utf8 ;)

      Par ailleurs, je viens de corriger pour adopter la nouvelle syntaxe du charset, plus simple, merci à Baptiste de m’avoir signalé l’oubli.

      Pour ltr (left-to-right pour le sens de l’écriture, je précise pour les lecteurs éventuels), je reconnais que je ne me suis jamais vraiment posé la question, c’est sûr que c’est plus simple de ne pas le mettre (et c’est correct) mais c’est pas exclu que dans les pays où on écrit de droite à gauche (en arabe ou hébreu), les navigateurs soient plus souvent tentés de faire du rtl par défaut, non ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Merci de répondre à cette question pour prouver que vous n'êtes pas un robot :

quel est le premier mot qui a pour deuxième lettre un o dans cette phrase ?