Support De Cours Html

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.

Un paragraphe de texte…

 Une balise



•

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 : et fermée en bas du document par On ferme une balise en ajoutant un / apres le < ouvrant. Exemple : <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 :

4

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

Head : Que doit-on mettre dans ?

Title, metas, linkrel, inclusions…

Body : Les différentes balises de

•

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 :

5