Introduction à la Programmation Web

Internet: Bref Aperçu

Internet (60’s): le réseau informatique mondial qui rend accessibles au public des services variés

comme:

 Le courrier électronique
 La messagerie instantanée
 Le World Wide Web
 Le transfert de fichiers (ftp)
 Exécution de programmes à distance (telnet, etc.)

TCP/IP (Transmission Control Protocol/Internet Protocol):

Ensemble de règles de communication standard à tous les systèmes connectés à Internet. Il assure
que les données s'échangent bien entre un point et un autre du réseau.

Le World Wide Web: WWW

World Wide Web (90’s):

Un système hypertexte fonctionnant sur Internet qui permet de consulter des informations
contenues dans des pages accessibles dans des sites.

Un des services d’internet: permet de naviguer entre des documents (pages web) reliés par des liens
hypertextes.

→A fait le succès d’Internet.

Nécessite l’utilisation d’un navigateur web (Internet Explorer/Edge (Microsoft), Firefox (Mozilla),
Opera (Opera soft), Google chrome (Google), Safari (Apple), etc.).

Site Web

Un ensemble de pages Web liées entre elles par des liens hypertextes et mises en ligne sous une
adresse Web

 Exp: www.fsegt.rnu.tn; www.google.com

 Mars 2016: il y aurait 4.65 milliards de pages web
 Habituellement architecturé autour d'une page centrale (page d'accueil) et proposant des
liens vers un ensemble d'autres pages.

Un ensemble de fichiers stockés sur un ordinateur (serveur web) connecté en permanence à

internet et hébergeant les pages web constituant le site web.

 page web = un fichier

Page Web et URL

Page web

Un fichier texte écrit dans un langage de description (appelé HTML), permettant de décrire la mise
en page du document et d'inclure des éléments graphiques ou bien des liens vers d'autres
documents à l'aide de balises.
URL (Uniform Resource Locator): adresse web

 Chaque ordinateur faisant partie d’Internet possède une adresse unique qui lui permet
d’être identifié de manière spécifique sur le réseau, quelle que soit sa situation
géographique.
 La plupart des @IP des serveurs peuvent être converties en un nom de domaine et
inversement.

Exp: fr.wikipedia.org est le nom de domaine correspondant à 91.198.174.225

URL & DNS

L’URL est une chaîne de caractères utilisée pour adresser les ressources du World Wide Web :
document HTML, image, son, boîte aux lettres électronique, etc.

Exemple: http://www.fsegt.rnu.tn/fr/index.htm

 http:// : protocole qui permet de naviguer entre les pages web.

 www.fsegt.rnu.tn : l‘@ du serveur qui héberge les pages web.
 /fr/index.htm : permet d'indiquer la localisation du document sur la machine: fichier
index.htm se trouvant dans le dossier fr

Le Domain Name System (DNS ou Nom de Domaine)est un système permettant d'établir une
correspondance entre une adresse IP et un nom de domaine.

Architecture Client-Serveur & Web

 Le client accède à une ressource disponible sur le serveur en entrant l'adresse (URL) dans
son navigateur.
 Le serveur HTTP va rechercher le fichier dans son arborescence et l'envoyer en réponse au
client.

Créer un SiteWeb: Besoins

Créer des documents HTML avec un éditeur de texte ou un logiciel spécialisé (Frontpage,
Dreamweaver, Publisher, WebExpert, Kompozer, etc.) Visualiser avec un navigateur : le code HTML
est interprété ôté client.

Pour mettre un site en ligne, il faut : un accès internet (ou intranet) et un espace d’hébergement sur
un serveur HTTP (chez un hébergeur payant ou gratuit par exemple). Mettre le site en ligne
(déployer) : transférer sur le serveur HTTP les documents et l’arborescence, en utilisant par exemple
FTP (File Transfer Protocol).

Créer un SiteWeb: Terminologie

L’utilisation conjointe d’un ensemble de technologies permet la réalisation de « documents web » :

Document HTML pour la structure sémantique des informations

Feuille de style CSS (Cascading Style Sheets) pour la présentation des informations Interface DOM
(Document Object Model) et langage de programmation JavaScript pour afficher et interagir
dynamiquement avec l’information présentée

→ Remarque : l’ensemble de ces technologies sont interprétées côté client.

Créer un SiteWeb: FRONT-END / BACK-END

Créer un SiteWeb: FRONT-END / BACK-END

Le développement FRONT END Le terme FRONT END désigne les éléments d’un site que l’on voit à
l’écran et avec lesquels on peut interagir depuis un navigateur. Tout ce qu’on voit sur un site web
par exemple, est une combinaison de HTML, CSS et JavaScript. Ces langages de programmation
utilisés par le développeur Front End sont interprétés par le navigateur pour afficher un résultat
visuel: polices, menusdéroulants, boutons, formulaires de contact, etc.

Le FRONT END se compose généralement : d’un design créé par un Web designer qui réalise des
maquettes graphiques via des outils de création comme Photoshop ou Fireworks. de code HTML,
CSS, JavaScript et jQuery mis en place par un développeur FRONT END.

 Pourque le site soit fonctionnel: il faut travailler le Back End

Le développement BACK-END Le BACK-END est invisible pour les visiteurs mais représente une
grande partie du développement d'un projet web. On peut décomposer le BACK-END en trois parties
essentielles : Une application (en l’occurrence le site web) Un serveur (ou hébergement web). Le
serveur est comme un disque dur accessible 24 heures sur 24, sur lequel les pages du site web sont
Enregistrées. Une base de données (où l'on stocke les données de l'application)

Introduction au Langage HTML

HTML: HyperText Markup Language (Tim Benners-Lee, 90‘s) Langage de balisage = langage de
description (Forme) Ce n’est pas un langage de programmation

▫ Un langage de balisage est constitué d’un ensemble de balises (Tags).

▫ Les balises permettent de structurer et de mettre en forme le contenu d’une page web,
d’inclure des images, des vidéos, etc.
▫ Une balise est de la forme: <nom_balise>...</nom_balise>
Une page web = document (fichier) HTML = suite de balises + du texte.

Structure d’un document HTML

 La balise !DOCTYPE sert à définir le type du document afin qu’il soit correctement interprété
par le navigateur. Elle doit toujours se situer avant la balise <HTML>.
 Ce n'est pas une balise html à proprement parler mais est essentielle pour que les
documents web s'affichent et fonctionnent correctement dans des navigateurs conformes
aux normes
 Depuis HTML 5, on se limite à la déclaration < ! DOCTYPE html>

<HEAD> et </HEAD>: L’entête du document HTML.

 Il sert à définir le titre de la page web qui sera affiché dans la barre du titre du navigateur
(entre <TITLE> et </TITLE>.
  Il indique un certain nombre d’informations facultatives tel que les mots clés, la date de
création, etc.

Document HTML: l’En-tête

<meta charset = "UTF-8 " > indique l'encodage utilisé dans lefichier. Cette méthode d'encodage
permet d'afficher tous les symboles de toutes les langues de la planète.

Document HTML: Le Corps

 Le corps du document (élément BODY) représente le contenu du document.

 On peut assimiler le corps à un canevas dans lequel s’inscrit le contenu : le texte, les images,
les couleurs, les graphiques, etc.
 Le W3C recommande aux auteurs et aux développeurs de séparer la structure et la
présentation.

Structure d’un document HTML

 L’extension d’un document HTML: .htm ou .html

On ouvre le bloc-notes ou WordPad puis on copie cet exemple et on l’enregistre sous le nom de "ma
page web.html". À l’ouverture du fichier, on obtient:
 Éléments du Langage HTML
▫ Constituants d’une balise

Les Balises de Base: Les Titres

<Hx> le titre </Hx >: x=1..6:

Les Balises de Base: paragraphe

 <p> un paragraphe </p>

▫ Marque le début d’un paragraphe (saute 2 lignes).

Les Balises de Base

<br>:

 Insère un saut de ligne

 C’est une balise vide (sans balise fermante);

<hr>:

 Insère une ligne horizontale

 balise vide

<!-- le commentaire --> : commentaires

Les Balises de Base

<em>: sert à afficher un texte ou une partie de texte en italique.

<strong>: Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une
importance particulière par rapport au contenu environnant.

<small>: permet de représenter des commentaires ou des textes à écrire en petits caractères (des
termes d'un contrat, desmentions relatives au droit d'auteur, etc.) quelle que soit la présentation.

<abbr>: représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir
une description complète. S'il est présent, l'attribut title doit contenir cette même description
complète.

<mark> : représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut
par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé
Les Balises de Liste: Numérotée et à puces

<ul> : liste non ordonnée

<ol> : liste ordonnée (numérotée)

 Atributs (opt):

o start= " nombre " : numéro de départ

o type= "1|A|a|I|i " : type de numérotation

o reversed: attribut booléen qui précise que les objets listés par l'élément sont affichés avec un
ordre inversé

<li> : un élément d‘une liste

 value= " nombre ": valeur ordinale de l‘élément de liste (pour les listes ordonnées)
 Les listes peuvent être imbriquées

Les Balises de Liste: Liste de définition

Liste de définitions <dl>

 Comprend une liste de termes à définir représentés par la balise <dt>

La Balise d’Insertion d’Images

Il existe plusieurs formats d'images adaptées au Web :

JPEG : pour les photos

PNG : Images de haute qualité

GIF : petits éléments graphiques, icônes, petites images animées.

<IMG>: permet d‘insérer une image dans une page web

 Attribut Obligatoire

src= "url " : spécifie le chemin de l‘image

 Attribut Recommandé

alt= " texte " : le texte qui va s‘afficher au cas où l‘image ne s‘affiche pas.

 Attributs Optionnels:

height=x : hauteur en x pixels

width=x : largeur en x pixels

  Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende,
utilisez la balise <figcaption>à l'intérieur de la balise <figure>, comme ceci :

Tout dépend de ce que l’image apporte au texte :

Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placer l'image dans
un paragraphe.

Si elle apporte une information : placer l'image dans une figure.

La Balise d’Insertion d’Images Une figure peut très bien comporter plusieurs images.

Les Balises des Tableaux

 <TABLE>

Définit un tableau

Un tableau simple consiste en un ou plusieurs:

o <TR> : ajoute une ligne

o <TH> : ajoute une entête de colonne (contenu en gras et centré)

o <TD> : ajoute une cellule.

o <caption> : se place juste au dessous de <table> et avant les autres balises, <thead> ou <tr>.

<TD> ou <TH>

▫ Sous la balise <tr> .

Ajoute une cellule

 Attributs optionnels

o COLSPAN = x : x nombre de colonnes occupées et fusionnées par cette cellule.

o ROWSPAN = x : x nombre de lignes occupées et fusionnées par cette cellule.

Les Tableaux structurés

Pour les gros tableaux, il est possible de les diviser en trois parties :

 En-tête : se définit avec les balises<thead></thead>

 Corps du tableau : se définit avec les balises<tbody></tbody>
 Pied de tableau : se définit avec les balises<tfoot></tfoot>

Les Balises de Liens vers un autre site

Les Balises de Liens vers une autre page du site

Les Balises de Liens vers une Ancre

 Une ancre est une sorte de point de repère qu’on peut mettre dans

des pages HTML lorsqu'elles sont très longues.

 Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va servir de repère: ça
peut être n'importe quelle balise, un titre par

exemple.

 Utiliser l'attribut id pour donner un nom à l'ancre qui servira ensuite pour faire un lien vers
cette ancre.
 Éviter de créer des id avec des espaces ou des caractères spéciaux (lettres et chiffres) pour
que la valeur soit reconnue par tous les navigateurs.
Les Balises de Liens vers une Ancre située dans une autre page

Faire un lien qui ouvre une autre page ET qui amène directement à une ancre située plus bas sur
cette page.

Les Balises de Liens Hypertextes

<a>

Attributs Optionnels

 title: affiche une bulle d'aide lorsqu'on pointe sur le lien.

 target: permet de spécifier la fenêtre d’affichage du lien. Il peut prendre les valeurs
suivantes:
▫ _blank: une nouvelle fenêtre
▫ _self: la même fenêtre (par défaut)
 Télécharger un fichier : le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va
lancer la procédure de téléchargement lorsqu'on cliquera sur le lien.

 Envoyer un mail

Les Éléments de Section: Exemple de découpage de page

Les Formulaires

 Toute page HTML peut être enrichie de formulaires interactifs, qui invitent les visiteurs à
renseigner des informations : saisir du texte, sélectionner des options, valider avec un
bouton, etc
 Les données saisies seront transmises au serveur pour traitement
 A chaque formulaire est associé un programme sur un serveur qui sera chargé de collecter et
faire des traitements sur les données par exemple avec PHP.

Les Formulaires: balise de base

Les Formulaires: Les Attributs Obligatoires

<FORM> permet d’établir un formulaire.

Attributs:

 Name: nom du formulaire

 Action=“url“: attribut obligatoire: spécifie où envoyer les données saisies dans le formulaire.
 Method=“post|get“: attribut optionnel qui indique la méthode à utiliser pour envoyer les
données du formulaire.

o Get: rajoute les données envoyées dans l‘URL sous forme de: URL?
Variable=valeur&variable=valeur&...

→ déconseillée : nombre de variables limité + non sécurisée

Exemple: http://www.domain.com/dir/file?nom=Federer&prenom=Roger

o Post: envoie les données sous forme d‘une transaction HTTP plus robuste et plus sécurisée.

Les Formulaires: La Balise <INPUT>

Il y a deux zones de texte différentes :

La zone de texte monoligne : comme son nom l'indique, on ne peut y écrire qu'une seule ligne. Elle
sert à saisir des textes courts, par exemple un pseudo.

La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte
sur plusieurs lignes, par exemple une description ou un commentaire.

Les Formulaires: La Balise <INPUT type= " text " >

Attributs

 Name :nom logique

 Size: agrandir le champ
 maxlength: limiter le nombre de caractères que l'on peut saisir
 Value: pré-remplir le champ avec une valeur par défaut
  Placeholder: donner une indication sur le contenu du champ. Cette indication disparaîtra dès
que le visiteur aura cliqué à l'intérieur du champ.

Les Formulaires: La Balise <INPUT type= " password "

Les Formulaires: La Balise <textarea>

Zone de texte multiligne: <textarea> </textarea>

Les Formulaires: La Balise <INPUT type= " email " >

Les Formulaires: La Balise <INPUT type= " URL" >

Les Formulaires: La Balise <INPUT type= " tel" >

Les Formulaires: La Balise <INPUT type= " number" >

Attributs optionnels: personnaliser le fonctionnement du champ

 min: valeur minimale autorisée.

 max: valeur maximale autorisée.
 step: c'est le « pas » de déplacement. Exemple: un pas de 2, le champ n'acceptera que des
valeurs de 2 en 2 (par exemple 0, 2, 4, 6...).

Les Formulaires: La Balise <INPUT type= " range" >

Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider).

Les attributs min, max et step peuvent être utilisés pour restreindre les valeurs disponibles.

Les Formulaires: La Balise <INPUT type= " color" >

  La valeur de l’attribut value est sous la forme #[0-9a-fA-F]{6}
 Les codes de couleur varient entre #000000 et #FFFFFF

Les Formulaires: La Balise <INPUT type= " date" >

Les Formulaires: La Balise <INPUT type= " file" >

Les Formulaires: La Balise <INPUT type= " radio" >

  Attributs de <input type= " radio " >
▫ L’attribut checked sert à sélectionner une valeur par défaut.

Les Formulaires: La Balise <INPUT type= " checkbox"

 À la différence avec les boutons radio, les noms sont différents à chaque case à cocher: cela
permet d'identifier plus tard lesquelles ont été cochées par le visiteur.
 L’attribut checked sert à sélectionner une valeur par défaut.

Les Formulaires: La Balise <select>

 Attributs de liste déroulante

 name: nom de la liste
 size: nombre d’éléments affichés dans le menu (pour consulter les autres, il faut utiliser
l’ascenceur). Par défaut size=1
 multiple: sélection multiple autorisée
 Attributs de <option>
 selected: option sélectionnée par défaut
Les Formulaires: Les Boutons

Le bouton d'envoi

Avec la balise<input >. Elle existe en quatre versions :

 type="submit": le principal bouton d'envoi de formulaire. Utilisé le plus souvent.

Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire.

 type="reset": remise à zéro du formulaire.

Le bouton d'envoi

Avec la balise<input >.

Elle existe en quatre versions :

 type="image": équivalent du bouton submit, présenté cette fois sous forme d'image. Il faut
rajouter l'attribut src pour indiquer l'URL de l'image.

 type="button": bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton
est géré en JavaScript pour exécuter des actions sur la page.
Les Formulaires: Les cadres avec <fieldset>

Les Formulaires: Exemple