Création de pages Web Bien démarrer Philippe Rincon
Le web Comment ça marche ?
Client & Serveur Client Requête http réponse Serveur Internet En situation de navigation, un internaute appelle par un clic une page web depuis son ordinateur. Que se passe-t-il derrière cette action simple et anodine ? En cliquant sur un lien hypertexte l'internaute envoie depuis son ordinateur (appelé client ) une requête http à un ordinateur distant (appelé serveur). Cette requête demande l'envoie d'une page web. Le serveur renvoie la page et met fin à l'échange jusqu'à la prochaine requête. Ce schéma est communément appelé "Architecture client-serveur"
Les protocoles HTTP & FTP HTTP FTP Dans les réseaux informatiques, et les télécommunications, un protocole de communication est une spécification de plusieurs règles pour un type de communication particulier. Le File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un protocole de communication dédié à l'échange de fichiers sur un réseau TCP/IP. Il permet, depuis un ordinateur, de copier des fichiers depuis ou vers un autre ordinateur du réseau, d'administrer un site web, ou encore de supprimer ou modifier des fichiers sur cet ordinateur. Le Hypertext Transfer Protocol, plus connu sous l'abréviation HTTP, littéralement le « protocole de transfert hypertexte », est un protocole de communication client-serveur développé pour le World Wide Web. Il est utilisé pour échanger toute sorte de données entre client HTTP et serveur HTTP. Protocole
LE HTML hypertexte markup language… Le HTML, est un langage informatique utilisé pour écrire des pages Web. Le HTML permet d'insérer au sein d’un texte, des éléments multimédias (images, son, vidéo) ainsi que des hyperliens. Les hyperliens renvoient d’un clic à d’autres pages web. Ce texte tissé de page en page qui rompt de la linéarité d’UN document est ce qu’on appelle l’hypertexte Le HTML est donc le langage de l’hypertexte. Le langage
…LE HTML hypertexte markup language Texte à mettre en forme Une balise est un élément de texte encadrée par le caractère inférieur " ". Les balises HTML fonctionnent par deux, elles circonscrivent les éléments qu'elles encadrent et sur lesquels elles agissent. A titre d'exemple : les balises et (bold en anglais signifie gras) permettent de mettre en gras le texte qu'elles encadrent : texte qui sera écrit en gras Balise d'ouvertureBalise de fermeture seul ce texte apparaîtra sur le navigateur Les balises
La structure HTML Une page HTML est un simple fichier texte contenant du texte formaté avec des balises HTML. Le fichier HTML doit porter l'extension.htm ou.html. Une page HTML est structurée selon un schéma simple Le titre de la page courante Texte s'affichant dans la page du navigateur Seuls les éléments écrits entre les balises <BODY> et </BODY> seront affichés dans la page web.
LES EDITEURS WEB L’éditeur - Texte Bloc-note, WordPad, ScriptEdit, TextEdit… - Wysiwyg… What You See Is What You Get Nvu, KompoZer, Dreamweaver, Frontpage, Namo… Un éditeur est un logiciel qui permet de créer des pages web Il existe des éditeurs de type :
LES NAVIGATEURS WEB Un navigateur est un logiciel qui permet de consulter des pages Web Firefox, Internet Explorer, Opéra, Konkeror, Netscape, Safari… Les navigateurs interprètent les documents HTML qui lui parviennent, mais tous n'ont pas le même moteur d'interprétation. L'affichage des pages Web peut varier selon les navigateurs On mesure la qualité d'un navigateur web à son degré de conformité aux standards Web établis par le W3CW3C
Les W3C – World Wide Web Consortium Le Consortium du World Wide Web (W3C), fondé en 1994 par Tim Berners-Lee, est un consortium industriel international comptant plus de 300 membres. Sa principale raison d'être consiste à faire en sorte que les spécifications ouvertes qui y sont produites, communément surnommé les "standards du Web" encourageront l'interopérabilité. C'est aux membres du Consortium et à ses experts invités des différents groupes de travail que revient la responsabilité de rédiger ces spécifications. Une fois approuvées, ces idées sont alors promues au titre de recommandations officielles du W3C. Interopérabilité accessibilité portabilité pérennité des documents réduction des coûts...
Sites statiques / dynamiques L’administrateur-éditeur du site crée avec un éditeur HTML des pages Web (à extension.htm ou html) stockées sur un serveur web. Celui-ci renvoie ces pages à la demande du visiteur. Ces pages ne pourront être modifiées que par l’administrateur-éditeur via un éditeur HTML. Ces pages sont dites fixes ou statiques, elles ne sont pas modifiées par le serveur. Le contenu ne change que par une intervention humaine et non pas par des fonctions automatiques opérées par le serveur en réponse à des requêtes d'utilisateurs. Le serveur n'est pas seulement lieu de stockage c'est lui qui génère la page.html. L’administrateur-éditeur du site crée avec un éditeur texte ou html avancé des pages Web (à extension.php,.asp,.aspx,.cfm etc…) stockées sur un serveur web. L'internaute en situation de navigation appelle une page. A la réception de cette requête et en fonction de celle-ci le serveur va puiser l'information pertinente dans une base de données et génère la page.html avec ces nouvelles données qu'il envoie enfin au navigateur de l'internaute. Le contenu de la page générée varie en fonction de la requête formulée par l'utilisateur. LES SITES STATIQUES LES SITES DYNAMIQUES
Sites statiques ou dynamiques ? Imaginons le site web d'une boutique comptant plus de références/produits. Le webmestre sera-t-il obligé de créer pages pour présenter le détail de chacun des produits ? La réponse est non évidemment. Le webmestre créera une page-type enrichie d'un script (un petit programme) allant chercher dans la base de données le contenu de la page-type. La page est remplie en fonction de la requête du visiteur.
Client Serveur web Base de données Sites dynamiques - quelle technologie ? Le lien entre la page-type et la base de données n'est possible que par le biais de langages de programmation Web type PHP ou ASP. 1. Requête http 1 2. Exécution du script coté serveur, envoi des requêtes à la base.php 2 3. Récupération des données de la base 3 4. Insertion des données issues de la base dans la page.html 4 5. Envoie de la page.html crée par le script 5 6. Interprétation et affichage de la pages.html par le navigateur 6
Règles importantes Index.html Les serveurs Web reconnaissent le fichier index.html comme page d’accueil du site.html ou.htm Organiser ses fichiers Tous les fichiers qui composent un site Web doivent être réunis dans un même dossier Il est d'usage d'enregistrer toutes les images dans un dossier "images". Vous pouvez créer autant de sous-dossiers que nécessaire. Adressage relatif ou absolu - Les adresses absolues comportent le chemin complet vers la ressource. Exemple : - les adresses relatives représentent l'adresse de la ressource par rapport à l'adresse de la page en cours de visualisation Exemple : dossier/index.html - et enfin, les adresses peuvent encore être relatives au serveur sur lequel se situe la page en cours de visualisation, mais absolues par rapport à la racine de ce même serveur. Exemple : /dossier/index.html Pour éviter les confusions, il convient, dans un même site, de choisir une fois pour toute l'une des deux extensions.
Les images Les formats graphiques actuellement utilisés sur le Web - Le format JPEG - Joint Photographic Experts Group - Le format GIF - Graphics Interchange Format - Le format PNG -Portable Network Graphics La rapidité d'affichage d'une page Web est directement liée au poids des images qui la composent. Ce poids, exprimé en kilo-octets (Ko), dépend de la taille réelle des images, de leur résolution, de la palette de couleurs et du format des fichiers. Les formats utilisés sur le Web sont des formats de compression permettant justement de réduire le temps de chargement des pages
Le format.JPEG Le format JPEG est un format de compression efficace Plus l'image est compressée, plus la qualité de l'image diminue Il peut supporter 16.7 millions de couleurs Le JPEG est particulièrement adapté pour les images de type photographies Le JPEG ne supporte pas la transparence
Le format.GIF Le format GIF est un format de compression efficace sans perte de qualité Le GIF peut contenir un maximum de 256 couleurs Format peut adapté pour les photographies ou dégradés Le GIF supporte la transparence Il permet de créer des animations : les GIFs animés. Le format GIF est un format propriétaire En revanche, ce format donne d'excellents résultats pour les images avec un petit nombre de couleurs, les logos, les formes géométriques, boutons etc...
Le format.PNG Le format PNG utilise une compression sans perte de données Le PNG supporte comme le JPEG une palette de 16.7 millions de couleurs Le PNG supporte la transparence ainsi que 254 niveaux de transparence partielle le PNG est moins performant que le JPEG pour la compression des photographies Seuls les navigateurs récents reconnaissent le format PNG ce qui est à frein majeur à son utilisation
FTP – Publication d'un site Web Une fois un site réalisé et testé en local il convient de le publier sur le Web pour qu'il devienne accessible aux internautes. Le protocole le plus souvent utilisé pour la publication est le FTP, dédié au transfert de fichiers. Reprenons notre schéma : Poste du webmestre Le site Web est consultable en accès local Publication FTP Client Requête http réponse Internet Le site Web hébergé sur un serveur est maintenant accessible sur l'Internet
Question ??? Pour toutes questions ou compléments d'informations consultez vos tuteurs…