Transcript Internet
Internet
Principes
généraux
Création de site web
Langages HTML
XML
Internet
Principes généraux
Présentation de l’internet : Réseau
Réseau : ensemble d’interconnections
permettant une communication
Ex : réseau téléphonique, réseau routier,
réseau d’amis…
En informatique : deux ordinateurs (ou plus)
reliés entre eux = un réseau
Réseau : qu’est ce que c’est
Un réseau :
Connexion physique (câble)
Langage de communication commun : un
protocole
Réseau local (LAN : Local Area Network)
Réseau Local : réseau sur une zone limitée
(une salle, un bâtiment ou quelques bâtiments)
Deux types de machines :
Serveurs : fournissent des services (ex : un
disque commun, une imprimante, un accès
internet, …)
Clients : utilisent les services
Réseau Local : connexion
Connexion : par câble
réseau
Exemple d’ici :
Réseau Local : protocole
Pour avoir une information, il faut savoir :
- Son nom (ex : le fichier « exo HTML.doc »)
- Qui la possède (le serveur ?)
- Les règles de communication
Réseau Local : protocole
Le protocole utilisé : TCP/IP (Transmission Control
Protocol/Internet Protocol)
Chaque machine a une adresse appelée adresse IP
(un ensemble de 4 chiffres de 0 à 255, ex :
192.168.0.15)
Pour faire plus ‘lisible’, un nom peut représenter une
adresse IP (ex : l3lea15, www.univ-lille3.fr)
Exemple de communication
1.
2.
3.
Votre machine (le client) demande « est-ce
que l3lea15 peut m’envoyer le fichier exos
html.doc ? Mon adresse est 192.168.0.15 »
L’information transite dans le réseau jusqu’à
la machine l3lea15 (en réalité 192.168.0.1)
L3lea15 (le serveur) reçoit la demande, et
envoie le fichier à l’adresse demandée.
Internet : définition
Un internet : « Interconnected Network »,
réseaux locaux connectés entre eux
L’Internet : un ensemble extrêmement
important de réseaux connectés entre eux
Dans ces réseaux, il y a :
Des serveurs : par exemple des serveurs qui
permettent d’accéder à des pages Web
Des clients : par exemple, votre machine
lorsque vous « surfez »
Internet : différents services
Les services de l’Internet (offerts par les
serveurs présents sur Internet)
Le Chat (discussion)
Le Ftp (téléchargement de fichier)
Le courrier électronique (le mail)
Les messageries instantanées
Le Web (documents hypertextes)
…
Le World Wide Web (le Web)
Sur Internet :
Un ensemble de documents textuels appelés
« pages Web » connectés entre elles par des
« hyperliens » qui permettent de passer
d’une page à une autre soit au sein d’un
même serveur (site) soit entre différents
serveurs (sites)
Le World Wide Web : l’ensemble des pages
Web de l’Internet
Création de site web
Le langage HTML
Le format de fichier HTML
Fichiers visualisés par le navigateur (Internet
Explorer, Mozilla, Firefox)
Format de fichier :
texte pur
Avec des instructions de mise en page sous
forme de balises (Tag ou Markup)
Avec des liens « hypertextes »
HTML : HyperText Markup Language
Les balises
Chaque élément de structure est entouré :
D’une balise de début
<nom de la balise>
D’une balise de fin (pas toujours…)
</nom de la balise>
Les balises : Exemple
Pour mettre en gras : balises <b> et </b>
Pour mettre en italique : balises <i> et </i>
Document HTML
Ce texte est normal,
<b> celui-ci est en
gras </b>, <i>
celui-ci est en
italique </i>, et
<b> <i> celui-ci est
les deux </i> </b>.
Dans le navigateur
Ce texte est normal,
celui-ci est en gras,
celui-ci est en italique,
et celui-ci est les
deux.
Structure d’un document HTML
Un document HTML a toujours deux parties :
Une entête (head) : il contient des
informations sur le document (comme le titre
par exemple)
Un corps (body) : il contient la partie visible
du document
Structure d’un document HTML :
Exemple
<html>
<head>
<title> mon premier document </title>
</head>
<body>
Il fait beau. Mais qu'est-ce que le beau temps
s'il n'y a pas eu la pluie auparavant ?
</body>
</html>
Exercices
Exercices 1 et 2 : vos premières pages Web
Création de site web
Quelques balises…
Balises : mise en forme
Pour mettre en gras :
<b>
Ex : test
Pour mettre en italique : <i>
Ex : test
Pour mettre en souligné :<u>
Ex : test
Pour mettre en écriture « machine à écrire » : <tt>
Ex : test
Pour centrer un texte : <center>
test
Balises : paragraphe
Début de paragraphe : <p>
Fin de paragraphe : </p>
Attention : pas de retour à la ligne automatique
<p> Il fait beau. Mais
qu'est-ce que le beau
temps s'il n'y
a pas eu la pluie
auparavant ? [...] </p>
<p> Et comment ne le
serait-ce pas ? [...]
</p>
Il fait beau. Mais qu'est-ce
que le beau temps s'il n'y a
pas eu la pluie auparavant
? [...]
Et comment ne le serait-ce
pas ? [...]
Balises : titres
Titre de premier niveau : <h1>
Titre de second niveau : <h2> (sous-titres)
Titre de troisième niveau : <h3> (sous-sous-titres)
… jusqu’à <h6>
<H1>Partie 1 : Les entrées</H1>
Partie 1 : Les entrées
<H2>1.1 Les crudités</H2>
1.1 Les Crudités
<H2>1.2 Les surgelés</H2>
1.2 Les Surgelés
Les listes ordonnées : <ol> et <li>
(« ordered lists » et « list item »)
<ol>
<li> allumez l'ordinateur ;
<li> tapez votre nom de
connexion ;
<li> tapez le mot de passe ;
<li> lancer le programme.
</ol>
3.
allumez l'ordinateur ;
tapez votre nom de
connexion ;
tapez le mot de passe ;
4.
lancer le programme.
1.
2.
Les listes non ordonnées : <ul> et <li>
(« unordered lists » et « list item »)
<h3>Contenu du panier</h3>
<ul>
<li> Oranges
<li> Pommes de terre
<li> Poireaux
<li> Fromage
<li> Jambon fumé
</ul>
Contenu du panier
Oranges
Pommes de terre
Poireaux
Fromage
Jambon fumé
Propriétés d’une balise
Certaines balises peuvent avoir des propriétés.
Par exemple, un paragraphe peut être :
Aligné à gauche
Aligné à droite
Justifié
Ceci correspond à la propriété alignement (align) du
paragraphe (left, right ou justify).
Pour utiliser une propriété :
<p align=“right"> bonjour ! </p>
Pour la police : balise font
Balise font avec comme propriétés :
Size : la taille de 1 à 7 (normal = 3)
Color : code Rouge Vert Bleu hexadecimal (codage
RGB – Red Green Blue)
Ex :
<font color="#00FF00">c’est vert ! </font>
Ou une couleur en anglais
Ex :
<font color="green"> c’est vert ! </font>
La balise body
La balise body peut elle aussi avoir des
propriétés :
bgcolor (background color) : la couleur de
fond du texte (voir font)
text : la couleur du texte (un code RGB)
Ex :
<body bgcolor=orange text=yellow>
Voici une page moche et illisible
</body>
Plus d’informations ?
Il y a encore plein de balises et de propriétés !
Plus d’informations :
http://www.w3.org/ : le site référence du
W3C (complet mais incompréhensible)
http://www.w3schools.com/html/
... Tout ce que vous trouverez sur google en
tapant « guide HTML » par exemple
Exercices
Exercice 3 : conception d’une page Web
Création de site web
créer un site
Gérer un site
Un site web, c’est :
Plusieurs pages html reliées entre elles
Des images
(éventuellement) Des animations, des fichiers
zip, pdf… à télécharger…
Créer un site Web : version simple
1.
2.
3.
Créez un répertoire : ce sera la racine de
votre projet
Y placer tous vos fichiers (images et fichiers
HTML notamment)
Une fois le site fini, il faudra copier
l’ensemble du répertoire avec son contenu
sur le serveur responsable de la gestion des
pages Web.
Créer un site Web : le fichier index.html
N’oubliez pas de créez un fichier index.html !
Il s’agit :
De la page d’accueil de votre site
En général, du sommaire
De la page par défaut
Ex : si je tape www.google.fr sans préciser la
page, le serveur Web m’envoie en réalité
www.google.fr/index.html
Insérer des images
Pour mettre une image, balise <img>
Propriétés :
src : le nom du fichier image
width et height (facultatifs) : dimension de
l’image, indiquer l’unité (cm, px…)
Ex :
<img src=“test.jpg“ width=10px>
L’image test.jpg sera affichée avec une
largeur de 10 pixels.
Des liens : à l’intérieur d’une page
La balise A (Anchor)
permet de créer des signets, avec la propriété
name, et un signet dont le nom commence par #
Ex : <a name=“#partie1“>PARTIE 1</a>
Permet de faire un lien, en indiquant le signet avec
la propriété href.
Ex : <a href=“#partie1“> lien vers la
partie 1</a>
Liens externes : balise A
Lien vers une autre page du site :
<a href="partie1.html">lien vers la
partie 1</a>
Lien vers une page d’un autre site :
<a href=“www.univ-lille3.fr/~lemay">un super
site </a>
Exercices
Exercice 4 : conception d’un mini site
Renseigner les pages HTML
L’entête et la balise <meta>
Balise META
L’entête (<head> … </head>) sert à renseigner
sur le contenu de la page :
Le titre
L’auteur
Jeu de caractère (codage)
Informations pour les moteurs de recherche
(mots-clés, description…)
…
Pour les moteurs de recherche
keywords, description
Pour mettre des mots-clés à vos pages:
<META NAME ="keywords" CONTENT="
vie,univers,reste">
Une recherche dans Google (par exemple) sur les mots
‘vie’ aura plus de chances d’aboutir à votre page
Pour mettre une description :
<META NAME ="description" CONTENT="sur la
vie, l’univers et tout le reste">
Head : sur l’auteur
Pour préciser l’auteur et la langue :
<META NAME="author" CONTENT="A.
Lemay" LANG="fr">
Pour préciser le copyright :
<META NAME="copyright" CONTENT="UFR
LEA">
Balises META : codage du document
Pour préciser le codage :
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
En général, UTF-8 (Unicode) par défaut
Balises META, mais encore ?
Un nombre très grand de possibilités, pas toujours
indispensables :
<META NAME="expires" CONTENT="15
Février 2005">
La page ne sera plus valide après le 15 Février
<META NAME="Generator"
CONTENT="notepad">
La page a été produite avec le bloc-notes
Tableaux et mise en page
Balises <table>, <tr>, <td> et leurs amis
Pour faire un tableau
<table>
<tr>
<td> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
<td> D </td>
</tr>
</table>
A
B
C
D
<Table> : le tableau
<tr> : une ligne (table row)
<td> : une cellule (table data)
Les titres : <th>
<th> (table header) : une cellule de titre
<table>
<tr> <th> Nom </th> <th> Prénom </th> </tr>
<tr> <td> Alfred </td> <td> Grojean </td> </tr>
</table>
Nom
Prénom
Alfred
Grojean
<table> : attributs
Les attributs possibles pour <table> :
BORDER : la taille des bords (en pixels)
CELLSPACING : l’espace entre les cellules
CELLPADDING : espace entre le bord des
cellules et le texte
Ex :
<table border=2 cellspacing=1 cellpading=1>
… </table>
<td> : attributs
Align : alignement (center, left, right)
bgcolor : couleur de fond de la table
colspan : pour les cellules fusionnées, nombre de cellules
width/height : largeur/hauteur (en % ou en pixel)
Ex :
<table> <tr> <td colspan=2> ICI </td> </tr>
<tr> <td bgcolor=blue width=20%> là </td>
<td align=righ bgcolor=#00FF00> ou la</td> </tr> </table>
ICI
LA
OU LA
Menu avec <table>
Un Menu = une table à une colonne
<table border=2>
<tr> <td align=center>
<a href=index.html>Accueil</a>
</td> </tr>
<tr> <td align=center>
<a href=page1.html>Histoire</a>
</td> </tr>
</table>
Accueil
Histoire
Mise en page avec des tables
Une page = un grand tableau
1. Choisir le layout (disposition de la page)
2. Traduire en tableau
3. Remplir !
Exemple :
quel est la disposition de cette page ?
La page à Momo
Bienvenue dans ma page à moi, où je
raconte tout qu’est ce que je veux
Accueil
Ma photo
Mise en page par table, le layout
Disposition de la page précédente :
Le titre
Le contenu
<table>
<tr> <td colspan=2> Le titre </td> </tr>
<tr> <td> Le contenu </td>
<td> Le menu (un tableau) </td> </tr> </table>
Le menu
Exemple : la page à Momo
<table>
<tr> <td colspan=2 bgcolor=blue border=0>
La page à Momo </td> </tr>
<tr> <td> bienvenue dans ma page… </td>
<td>
<table>
<tr> <td> <a href=index.html> Accueil </a> </td>
</tr>
<tr> <td> <a href=photo.html> Ma photo </a> </td>
</tr> </table>
</td> </tr> </table>
Balises meta et Mise en page
Exercices 5, 6 et 7
Les feuilles des style
CSS et HTML
Mise en page
Solution classique : table et font
Mise en page par <table> et par <font>
Long
Vite illisible
Peu souple
Difficile à modifier
Aspect présentation et contenu entremélés
Mais encore très utilisé…
Mise en page
Solution moderne : les feuilles de style
Distinction entre contenu et présentation
Contenu : dans le document HTML (sans
table ni balises font)
Présentation : dans un fichier à part (feuille
de style)
Changer de présentation = changer de
feuille de style
CSS : généralité
CSS 1.0 (1996)
Accepté par la plupart des navigateurs
Mozilla 1.1, Firefox, Netscape 6, Internet
Explorer 5.5, Opera 4 …
CSS 2.0 (1998)
pas toujours accepté par tous
CSS 3.0 (à venir)
très hasardeux pour l’instant
Application d’une feuille de style
Créez la feuille de style (fichier .css)
2. Plusieurs solutions existent, la plus simple,
ajouter dans l’entête (<head>)
<LINK REL="stylesheet"
TYPE="text/css"
HREF="ma_feuille.css">
1.
Note : il est possible d’intégrer des (morceaux
de) feuilles de style dans la page HTML
CSS : la syntaxe
H1
{
font-size: large;
color: red;
}
Nom de la balise
considérée
{
Attribut1 : valeur ;
Attribut2 : valeur2 ;
}
Une feuille de style, exemple :
H1 {
font-family: arial;
}
H1,H2,H3 {
font-size: large;
color: red;
}
LI B {
color: blue;
}
Tous les éléments de type H1
seront dans la police arial
Les éléments de type H1, H2
et H3 seront en grand (large)
et en rouge
Les éléments en gras qui
sont à l’intérieur d’une liste
seront en bleu
Quelques propriétés (texte) :
Font-family : la police (times, arial, helevetica …)
Font-size : (small, medium, large, x-large…)
Font-weight (normal, bold, 120%)
Color : couleur du texte (black, green, #00FF00)
background-color : la couleur du fond (idem)
Background-image : image de fond
url("truc.jpg")
text-align: left, center ou right
Définir plusieurs attributs d’un coup :
font : times small bold;
Les listes, quelques autres propriétés
List-style-type : type de liste (pour ul, ol et li)
None, disc, circle, square,decimal, lowerroman, upper-roman, georgian …
…
Les tableaux
Border-style : dotted (points), dashed
(pointillés), solid (lignes), none (rien)
Border-width : largeur (1px par exemple)
Border-color : red, #00FF00, …
Margin : marges
Attribut class
Pour distinguer deux types d’éléments similaires. Ex :
• On utilise h1 dans le titre et dans document, on désire
deux présentations différentes
<h1 class=menu>
toto </h1>
<h1 class=doc>
tata </h1>
H1.menu
{
color : blue;
}
H1.doc
{
color : red;
}
Attribut ID
Idem que class. Mais normalement,chaque id est
unique (il n’y aura qu’un seul élément d’id « menu »)
<h1 id=menu>
toto </h1>
…
<h1 id=doc>
tata </h1>
#menu
{
color : blue;
}
#doc
{
color : red;
}
HTML et CSS
Exercice 8
CSS : mise en page par boite
<div>, class et id
CSS :
des boîtes plutôt que des tables
Mettre en page avec des CSS :
1. Repérez les différents éléments constituant
de la page
2. Chaque élément sera mis dans une « boîte »
à l’aide d’une balise <div> munie des
attributs class (et id) nécessaires.
La balise <div> ne fait rien, elle sert juste à
marquer une zone du document
Exemple : la page à Momo
La page à Momo
Bienvenue dans ma page à moi, où je
raconte tout ce que je veux
Accueil
Ma photo
Exemple : la page à Momo
titre
contenu
Menu
Décomposition en <div>
Trois éléments : le titre, le menu et le contenu
<div class=titre> La page à momo </div>
<div class=menu> Le menu
(un tableau ou une liste)
</div>
<div class=contenu> <h1> Bienvenue </h1>
</div>
Mise en forme
Avec la feuille de style.
Note : on peut spécifier le style d’un élément
par rapport à sa position. Ex :
.contenu h1 { color : red; }
Les titres de type h1 qui sont à l’intérieur d’un
élément de class « contenu » sont en rouge
équivalent à :
div.contenu h1 { color : red; }
Placement des boîtes
Dimensions :
Width : largeur
Height : hauteur (en pixel px ou en %)
Position, plusieurs modes
Relatifs (position fixée): on précise la position
avec left (ou right) et top (ou bottom)
Flottant (au dessus du reste) : on indique
float :left ou float : right
Exemple :
La page à Momo
Bienvenue dans ma page à moi, où je
raconte tout ce que je veux
Accueil
Ma photo
Le titre : fixe (wdth:100%),
le menu : flottant (width:20%; float:right;)
Mise en page par CSS
Exercice 9 et 10