Support de cours formation iTeam n°1 - HTML/CSS - Olivier Roberdet et Ilan El Hadad

Support de cours formation iTeam n°1 :

(X)HTML / CSS
Les bases du développement Web.

Olivier ROBERDET et Ilan EL HADAD

1- Introduction, le fonctionnement d’un site internet.

Qu’est-ce qu’un site Web ?

Le concept a été mit au point au CERN (Centre Européen de Recherche Nucléaire) en 1991
par une équipe de chercheur comprenant Tim-Berners LEE, le créateur du concept d'hyperlien.

Le Web (toile, en anglais) est une des possibilités offertes par le réseau Internet qui consiste
à pouvoir se déplacer d’un document à un autre par l’utilisation de lien hypertextes. Le principe
repose sur la navigation de page en page via les Hyperliens assurée par le navigateur (ou browser
en anglais). C’est pages sont des fichiers textes portant l’extension HTML contenant une succession
de commandes (ou balises) spécifique a la mise en page d’informations, d’image et de liens
compréhensible par le navigateur.

C’est fichiers HTML, les images et autres fichiers relatifs aux pages web sont hébergés sur
des serveurs reliés à Internet en permanence est accessibles a tout le monde. Un serveur est un
programme installé sur un PC qui se charge de recevoir les requêtes envoyées par les utilisateurs
via leur navigateur et de renvoyer les informations demandées. Sur Internet les fichiers et
documents sont repérés par une adresse unique appelée URL (Uniform Ressource Locator).

L’URL :

http://www.iteam.org/index.php

• http:// ceci spécifie le protocole utilisé pour accéder à au document.

• www.iteam.org correspond à l’adresse du site web. www symbolisant que l’on souhaite
accéder à un service Web, iteam.org est le nom de domaine du site web. Ainsi un même
site web peut être hébergé sur plusieurs serveurs mais appartenir au même domaine.

• /index.php indique la position du document que l’on souhaite afficher soit index.php qui
est à la racine du serveur.

Qu’est-ce qu’un serveur et un navigateur ?

En résumé le navigateur demande des fichiers au serveur et le serveur lui envoi ces fichiers
que le navigateur interprète et affiche.

Où stocker ses fichiers, qu’est-ce qu’un hébergeur ?

Le site web (ou plutôt les pages web) créé doivent être envoyées vers un serveur Web qui sera
accessible par tout le monde. Pour cela soit on met en place son propre serveur sur une machine en
rabe et on le laisse connecté a internet en permanence, soit on souscrit a un hébergement qui
propose des serveurs Web. Le choix d’hébergeurs est assez grand, il y en a des gratuits et des
payants. Parmi les gratuits certains imposent l’affichage de publicité parfois gênantes. Pour l’instant
n’importe quel hébergement gratuit fera l’affaire a partir du moment ou l’espace disque disponible
est suffisant et ou la pub si imposé n’est pas trop importante. En effet pas tout les hébergeurs
gratuit propose des serveurs avec PHP et MySQL mais nous ne verrons pas cela tout de suite.

Les hébergeurs qui sont à notre disposition à l’ECE sont :

1
Support de cours formation iTeam n°1 - HTML/CSS - Olivier Roberdet et Ilan El Hadad

L’espace Web attribué à chaque élève et situé a l’adresse : http://www.ece.fr/~nom

Vous pouvez y accéder en vous connectant en SSH à gandalf.ece.fr avec vos identifiants UNIX.

Ensuite tous les membres de l’iTeam peuvent bénéficier d’un espace disque
(à étoffer et expliquer comment bénéficier des serveurs iTeam).

Les langages :

• HTML et XHTML
L’HTML (HyperText Markup Language) est le langage qui va nous servir à mettre en page
nos informations et a les structuré sur la page Web.

• CSS
Le CSS (Cascading Style Sheet) va être associé à l’HTML pour nous permettre de mieux
gérer l’aspect visuel de la page tout en séparant le fond de la forme.

• JavaScript, PHP, SQL…

Le JavaScript sert principalement à créer plus d’interactions entre le visiteur et la page Web
grâce a ses possibilités de manipuler l’arbre DOM d’une page.
Le PHP est un langage de programmation serveur et permet d’interagir avec une base de
données par le langage SQL.

Les outils :

• Les éditeurs (Notepad++, …)

• Les clients ftp (Filezilla, Fireftp …)

• Les logiciels de graphisme (Gimp, Photoshop, Fireworks, Inkscape…)

• Les navigateurs (Firefox, Opera,… ah oui Internet Explorer aussi pff.)

• Les outils de développement (WebDeveloper toolbar, Firebug…)

http://xhtml.developpez.com/outils/

Le W3C et le respect des standards.

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour
promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML,
CSS, PNG.. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur
de standards industriels.

Le respect de ces standards est important dans le sens où les navigateurs (sauf IE) se basent
dessus pour offrir une meilleur compatibilité entre les navigateurs pour une même page. Vous
comprenez bien que puisque les pages HTML et CSS sont interprétés par le navigateur si les
différents navigateurs du marcher n’entreprenne pas les mêmes actions pour une un code
identique cela implique de gros problèmes lors de la conception et la réalisation de page Web. C’est
encore le cas pour Internet Explorer.

2- HTML/XHTML.

HTML ou XHTML ?

2
Support de cours formation iTeam n°1 - HTML/CSS - Olivier Roberdet et Ilan El Hadad

Successeur du HTML, le XHTML est le premier pas à accomplir vers le Web de demain : à la
fois compatible avec les navigateurs d'hier et avec le XML, sa rigueur en fait un puissant langage
de structration de contenu, laissant le soin de la présentation aux CSS.

Pour l'aborder, ceux qui connaissent le HTML des années 90 devront surtout apprendre à
oublier les balises obsolètes et à respecter l'usage normalisé de celles qui avaient été détournées
de leur fonction.

Ceux qui feront avec lui leurs premières armes sur le Web apprécieront sa simplicité et sa
sobriété, qui le rendent beaucoup plus facile à maîtriser que son prédécesseur.

Comment programmer en HTML :

• La structure d’un fichier HTML

Un fichier HTML est décomposé en 3 parties : le Doctype, le HEAD, et le BODY.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml/xhtml" lang="fr" xml:lang="fr">

<head>

<title>Titre de la page!</title>

</head>

<body>

<p>Un paragraphe de texte…</p>  Une balise

</body>

</html>

• Comment organiser ses fichiers

Les fichiers relatifs à une page Web peuvent théoriquement être éparpillé n’importe ou sur
Internet a partir du moment ou les liens vers ses fichiers sont correctes. Il est cependant
vivement recommandé d’organiser intelligemment ses fichiers dans des dossiers autour de
la page principale. La page principale est la page « index ». Si cette dernière est en html
alors elle s’appellera index.html (ou .htm).

Voici un exemple d’organisation de fichiers pour un petit projet de site web :

/..

3
Support de cours formation iTeam n°1 - HTML/CSS - Olivier Roberdet et Ilan El Hadad

index.html
gallerie.html

contacts.html

/images/

logo.png

boutton.png
/photos/

photo1.jpg
photo2.jpg

Nous verrons comment accéder a un fichier quelque soit son emplacement et celui du
fichier appelant dans la partie sur les liens Hypertextes.

• Les commentaires

Vous pouvez commenter votre code en encadrant votre commentaire par < !--et !-->.

Qu’est ce qu’une balise ?

Une balise est une commande encadrée par < > en HTML ou XHTML chaque balise ouverte
doit être fermée.
Par exemple : <body> et fermée en bas du document par </body>
On ferme une balise en ajoutant un / apres le < ouvrant.

Exemple : <marquee></marquee>

Doctypes : C’est quoi ? Ca sert à quoi ?

Le Doctype est une ligne de commande qui va rendre compte au navigateur de quelle
version d’HTML vous utilisez et quels standards vous respectez. Cette étapes est indispensable ! En
effet si vous omettez de spécifier un doctype le navigateur interpretera votre code en mode par
défaut ( Quirk mode) et il peut en résulter un affichage érroné de vos pages surtout avec Internet
Explorer !

Voici le doctype pour du XHTML strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/xhtml" lang="fr" xml:lang="fr"></html>

4
Support de cours formation iTeam n°1 - HTML/CSS - Olivier Roberdet et Ilan El Hadad

Head : Que doit-on mettre dans <HEAD> ?

Title, metas, linkrel, inclusions…

Body : Les différentes balises de <BODY>

• Les textes

• Les liens HyperText

• Les images

• Les tableaux

• Listes

• Formulaires

• Les DIV

3- CSS.

Qu’est-ce que le CSS ?

Séparer la forme du fond.

Comment utiliser le CSS dans ses pages ?

Les éléments :

Les sélecteurs :

Les principaux styles et propriétés :

Positionnement des blocs et flux :