Vous êtes sur la page 1sur 30

Conception de sites Internet

Initiation à la programmation HTML

Guilhem Paroux – Ecole Nationale Supérieure des Télécommunications


Objectifs du cours

 Prendre connaissance du fonctionnement d'un site Internet

 Connaître les rudiments du langage HTML


 Le fonctionnement
 Les balises essentielles

 Connaître les outils utiles à la mise en place d'un site
Internet
 Conception du site
 Mise en ligne du site

 Savoir créer son propre site


 Beaucoup de pratique
Le fonctionnement d'Internet
Comment faire un site ?

 Vous devez tout d'abord savoir quoi mettre


dedans
 Faites un plan de conception pour savoir où vous allez

 Vous devez trouver un hébergeur


 C'est celui qui gère le serveur qui accueille les pages

 Prenez un outil de conception de site


 C'est plus agréable et plus rapide

 Envoyer vos pages sur le serveur


 Il vous faut alors un "client FTP"
La conception du site (1)

 Pensez toujours à séparer le contenu du


contenant
 Le contenu : les messages à faire passer, l’information,
l’objectif du site
 Le contenant : comment amener l’information, faire
passer les messages

 La mise en page doit être adaptée au contenu


 Originalité ou rigueur du sujet traité

 Attention aux fautes de goût de mise en page


 Le site doit rester ergonomique
La conception du site (2)

 Pensez à bien organiser votre site


 Une page par thème abordé
 Les photos sont rangées avec les photos, les
documents avec les documents

 Pensez aux évolutions futures du site


 Il doit rester extensible
 Attention de garder une cohérence dans le contenu
 Parfois, mieux vaut créer un autre site
Le langage HTML

 HyperText Markup Language

 Langage de mise en forme à base de balises


 Les balises permettent d'organiser le contenu du site

 Les balises sont interprétées par le navigateur


Internet (Firefox ou IE)
 Le navigateur n'affiche que le contenu

 Les pages du site sont liées par des liens


hypertextes
 Sur lesquels on clique pour naviguer
Un exemple de code HTML

<b>Bienvenue</b> Bienvenue
<br> Sur mon site
<i>Sur mon site</i>

 On parlera de balises ouvrantes <balise> et de


balises fermantes </balise>

 Une balise pourra contenir des attributs


 <balise attribut1=A attribut2=B> … </balise>
Généralités sur les balises

<Balise_1> <Balise_1>
…… ……
</Balise_1> <Balise_2>
<Balise_2> OUI …… OUI
…… </Balise_2>
</Balise_2> ……
</Balise_1>

<Balise_1>
……
<Balise_2>
</Balise_1> NON
……
</Balise_2>
Les balises essentielles

 <html>…</html>
 Encadrent l'ensemble d'une page HTML
 <head>…</head>
 En-tête de la page HTML
 <title>…</title>
 Titre de la page : apparaîtra en haut du navigateur
 <body>…</body>
 Corps de la page
 <br>
 Passer à la ligne
 <b></b> : mettre en gras
 <i></i> : mettre en italique

 &nbsp; : espace
 &eacute : é
Comment écrire du code HTML ?

 On peut utiliser un éditeur de texte basique de


type bloc-notes
 C'est peu pratique !
 Mais on va commencer par là pour comprendre !

 On peut aussi utiliser un éditeur HTML


 Le logiciel NVU : www.nvu.com
 Avantage : intuitif, rapide, joli, gratuit
 Un des plus puissants : Dreamweaver
Un premier exemple

 Ouvrez un éditeur de texte (le plus basique)

 Écrivez ensuite ces lignes


<HTML>
<HEAD>
<TITLE>Ma page</TITLE>
</HEAD>
<BODY>
Bonjour
</BODY>
</HTML>

 Enregistrez le fichier sous le nom "index.html"

 Ouvrez le avec votre navigateur Internet


Le logiciel NVU

 www.nvu.com
 Pour télécharger le logiciel NVU

 Prise en main du logiciel


 Ouvrez le logiciel
 Ouvrez ensuite la page que l'on vient de créer
 Modifier le texte pour le mettre en gras
 Changer la couleur du texte
 Ajouter du texte

 Observons le code HTML généré par NVU


Le texte

 Tout comme dans un traitement de texte de


type Word, on peut :
 Changer la taille du texte
 Changer la couleur du texte
 Mettre le texte en gras, italique ou souligné
 Centré ou aligner le texte <div align="">
 Créer des paragraphes <p>
Les couleurs

 Les couleurs sont exprimées de 2 façons par


rapport à (Rouge, Vert, Bleu)
 #AB26E4 (RVB en hexadecimal)
 Color(235,165,58) (RVB en décimal)

 Couleur de fond de page :


 <body bgcolor="#AABBCC">
Les images

 On peut insérer des images dans une page


<img src="ma_photo.jpg"> pas de balise fermante

 Attribut de taille d'image (redimensionne)


<img src="" width=230 height=120>

 On peut mettre une image de fond de page


<body background="ma_photo.jpg">

 Trouver des images :


 http://www.freefoto.com/

 Attention à la taille (poids en kilo-octets) des images !


Les liens

 Les liens hypertexte servent à se déplacer dans le site

 Aller d'une page à une autre dans le site


<a href="lien.html"> texte ou image </a>

 Aller à un endroit précis dans une même page


<a href="#mon_ancre"> texte ou image </a>
On définit alors une ancre (vers laquelle pointe le lien)
<a name="mon_ancre"> texte ou image </a>

 Aller vers un autre site


<a href="http://www.google.fr" target ="blank"> texte ou
image </a>
Les listes

 Une liste permet  Liste simple


d'organiser des éléments <ul>
comme suit : <li>élément1
 Élément1 <li>élément2
 Élément2 </ul>
 Élémént3

 Moyen efficace de faire


ressortir l'information  Liste numérotée
<ol>
<li>élément1
<li>élément2
</ol>
Les tableaux (1)

 C'est un outil de mise en  Code HTML


forme <table> tableau
<tr> ligne
 Riche en possibilités <td> colonne
 Taille case1
 Couleur </td>
 Mise en forme <td>
case2
 Une page dans la page !
</td>
</tr>
Case1 Case2 <tr>
<td>
case3
</td>
<td>
Case3 Case4 case4
</td>
</tr>
</table>
Les tableaux (2)

<th>…</th> case de titre au lieu de <td>

<caption> titre du tableau </caption>

<table bgcolor=""> couleur de fond de tableau

<table border="1"> taille de la bordure


La mise en page grâce aux tableaux

 Idée :
 Utiliser les tableaux pour mettre en page le site

 Les tableaux offre un cadre idéal pour diviser


une page en plusieurs zones
 Clarté de l'information à la lecture
 Facilité de mise en forme lors de la conception

 Exercice :
 Créer une page ne contenant qu'un vaste tableau dont
on fera disparaître les bordures pour le rendre invisible
Réaliser un squelette de page

 Idée :
 Afin de garder une cohérence de mise en forme, toutes
les pages du site ont le même aspect

 Comment faire :
 Réaliser une page sans contenu mais dont les
différentes parties ont été fixées
 Cette page sera appelée squelette.html et servira de
base de conception aux autres pages
 Cette page n'a pas pour vocation d'être mise en ligne
Votre propre site Internet

 A vous de jouer avant de voir des fonctions plus


avancées !

 Respectez bien les étapes


 Définition du contenu
 Conception et organisation de votre site
 Mise en page du site
 Réalisation du squelette des pages
 Réalisation de vos premières pages

 Mais avant tout cela :


 Comment mettre en ligne un site ?
Mettre son site en ligne

 Création d'un compte chez iFrance


 www.ifrance.com

 Une interface toute prête pour mettre en ligne

 Ou alors passer par un client FTP


 FileZilla : http://sourceforge.net/projects/filezilla/
 Fonctionne avec tous les hébergeurs
 Permet de gérer facilement son site

 But de la mise en ligne


 Envoyer les pages sur un serveur afin qu'elles soient
visibles du public.
Les feuilles de styles CSS (1)

 Idée :
 Regrouper les styles d'écritures des pages dans un même
fichier
 Ne pas se répéter inutilement sur chaque page

 On crée un fichier CSS


 "styles.css"
 Le fichier contient les indications de mise en forme

 Une page HTML utilisant le style CSS doit inclure


<HEAD>
<link rel="stylesheet" type="text/css" href="styles.css>
</HEAD>
Les feuilles de styles CSS (2)

 Le fichier "styles.css" contient par exemple

table {border:2px solid black;margin:auto;}

td, tr {width:150px; height:50px;


vertical-align:middle;}

p {text-align: justify}
Introduction au PHP

 PHP = HyperText Preprocessor

 C'est un vrai langage de programmation


 Beaucoup plus complexe que HTML
 Permet d'écrire des scripts
 S'exécute sur le serveur

 Utilisé pour rendre les pages dynamiques


 Adaptation du contenu
 Interaction avec l'utilisateur
 Accès à des bases de données
 Récupération de formulaires
Les formulaires (1)

 Idée :
 Permettre aux visiteurs de donner une information et à
l'administrateur de la récupérer

 En définissant un formulaire, on obtient :


 Des champs de texte
 Des boutons radio
 Des boîtes à cocher
 Des boutons pour valider ou effacer

 Le formulaire doit être associé à un script PHP pour


récupérer ce qui a été rempli

 Voir exemple de page avec formulaire


Un compteur de visites
<?php
// 1.On ouvre le fichier en lecture/écriture
$POST_["fp"] = fopen("nombre_visites/compteur.txt","r+");

// 2.On récupère le nombre dans le fichier


$POST_["nbvisites"] = fgets($POST_["fp"],11);

// 3.On incrémente le nombre de visites(+1)


$POST_["nbvisites"]++;

// 4.On se place en début de fichier


fseek($POST_["fp"],0);

// 5.On écrit dans le fichier le nouveau nombre


fputs($POST_["fp"],$POST_["nbvisites"]);

// 6.On ferme le fichier


fclose($POST_["fp"]);

// 7.On affiche le compteur à l'écran


echo "Il y a eu ".$POST_["nbvisites"]." visiteurs";
?>
Au delà du HTML

 Certaines fonctionnalités peuvent être assurées


par PHP, JavaScript, Java, Flash, …
 Interfaçage avec une base de données
 Interaction avec les visiteurs
 Adaptations du contenu aux visiteurs
 Animations complexes et beaucoup plus jolies
 Puissantes applications de calcul

 Tout ceci va bien au-delà de nos préoccupations


 N'hésitez pas à vous documenter, Internet est très
riche d'enseignement
 Posez moi vos questions !