SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
Internet
 Principes généraux
 Création de site web
 Langage HTML
Internet
Principes généraux
L a n o t i o n d e r é s e a u
● 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 é s e a u l o c a l
Réseau Local : réseau sur une zone
limitée (une salle, un bâtiment ou quelques
bâtiments)
on dit LAN (Local Area Network)
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 :
Un serveur dans le local
technique
Vos machines (clients)
sont reliées à un hub
(connecteur) lui même
relié au serveur
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. Votre machine (le client) demande
«est-ce que l3lea15 peut m’envoyer le
fichier exos html.doc ? Mon adresse
est 192.168.0.15»
2. L’information transite dans le réseau
jusqu’à la machine l3lea15 (en réalité
192.168.0.1)
3. 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 »
Et de chez vous ?
● Pour se connecter à un réseau local
(celui de votre fournisseur d’accès) :
modem (classique ou ADSL)
● Puis votre fournisseur d’accès est
connecté à d’autres réseaux (à
l’Internet)
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)
● Les jeux
● …
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
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.
Pour mettre en gras : balises <b> et </b>
Pour mettre en italique : balises <i> et </i>
S t r u c t u r e d ’ u n d o c u m e n t H T M L
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
S t r u c t u r e d ’ u n d o c u m e n t H T M L
E x e m p l e
<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>
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>
<H2>1.1 Les crudités</H2>
<H2>1.2 Les surgelés</H2>
Partie 1 : Les entrées
1.1 Les Crudités
1.2 Les Surgelés
L e s l i s t e s o r d o n n é e s : < o l > e t < l i >
( « o r d e r e d l i s t s » e t « l i s t i t e m » )
<ol>
<li> allumez l'ordinateur ;
<li> tapez votre nom de
connexion ;
<li> tapez le mot de passe ;
<li> lancer le programme.
</ol>
1. allumez l'ordinateur ;
2. tapez votre nom de
connexion ;
3. tapez le mot de passe ;
4. lancer le programme.
L e s l i s t e s n o n o r d o n n é e s : < u l > e t < l i >
( « u n o r d e r e d l i s t s » e t « l i s t i t e m » )
<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)
Des exemples :
<font color="#00FF00">c’est vert ! </font>
<font color="green">c’est vert ! </font>
<font size="7">c'est gros</font>
<font size="7" color="green">c'est gros et
vert</font>
Plus d’informations ?
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…
C r é e r u n s i t e W e b :
v e r s i o n s i m p l e
1. Créez un répertoire : ce sera la
racine de votre projet
2. Y placer tous vos fichiers (images et
fichiers HTML notamment)
3. 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.
C r é e r u n s i t e W e b :
l e f i c h i e r i n d e x . h t m l
N’oubliez pas de créez un fichier
nommé 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
Faire référence à un fichier
Organisation classique
C:/internet/Mon_site : la racine
C:/internet/Mon_site/Images : les
images
C:/internet/Mon_site/Videos : les
vidéos
C:/internet/Mon_site/Fichiers :
les fichiers à télécharger
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“ >
L’image test.jpg sera affichée
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>
Liens internes
La balise A (Anchor)
● permet de créer des signets, avec la propriété
name qui contient le nom du signet
Ex : <a name=“partie1“>PARTIE 1</a>
● Permet de faire un lien, en indiquant le signet
précédé de # avec la propriété href.
Ex : <a href=“#partie1“> lien vers la partie
1</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…)
● …
P o u r l e s m o t e u r s d e r e c h e r c h e
k e y w o r d s , d e s c r i p t i o n
● 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">
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
2008">
La page ne sera plus valide après le 15 Février
2008
● <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>
D
C
B
A
<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>
Grojean
Alfred
Prénom
Nom
<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=green> ou la</td> </tr> </table>
OU LA
LA
ICI
Menu avec <table>
<table border=2 cellspacing=0>
<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>
Histoire
Accueil
Un Menu = une table à une colonne
Mise en page avec des
tables
Une page = un grand tableau
2. Choisir le layout (disposition de la
page)
3. Traduire en tableau
4. Remplir !
Exemple :
quel est la disposition de
cette page ?
Bienvenue dans ma page à moi, où
je raconte tout qu’est ce que je veux
La page à Momo
Ma photo
Accueil
Mise en page par table, le
layout
Disposition de la page précédente :
Le menu
Le contenu
Le titre
<table>
<tr> <td colspan=2> Le titre </td> </tr>
<tr> <td> Le contenu </td>
<td> Le menu (un tableau) </td> </tr> </table>
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>
Tableaux
Exercices 5, 6 et 7

Contenu connexe

Similaire à 0055-cours-internet-web.pdf

C2i Web
C2i WebC2i Web
C2i Web
c2i
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
Korteby Farouk
 
seance1 Internet-WEB 21.ppt
seance1 Internet-WEB 21.pptseance1 Internet-WEB 21.ppt
seance1 Internet-WEB 21.ppt
AmineReal
 
Cours Html
Cours HtmlCours Html
Cours Html
adamizo
 

Similaire à 0055-cours-internet-web.pdf (20)

Html
HtmlHtml
Html
 
C2i Web
C2i WebC2i Web
C2i Web
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Internet c'est pas magique
Internet c'est pas magiqueInternet c'est pas magique
Internet c'est pas magique
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
UElibre_Internet.pdf
UElibre_Internet.pdfUElibre_Internet.pdf
UElibre_Internet.pdf
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
 
seance1 Internet-WEB 21.ppt
seance1 Internet-WEB 21.pptseance1 Internet-WEB 21.ppt
seance1 Internet-WEB 21.ppt
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Cours Html
Cours HtmlCours Html
Cours Html
 
cours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.pptcours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.ppt
 
cours web chap1.pptx
cours web chap1.pptxcours web chap1.pptx
cours web chap1.pptx
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
INTRODUCTION8PDF.pdf
INTRODUCTION8PDF.pdfINTRODUCTION8PDF.pdf
INTRODUCTION8PDF.pdf
 
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
Fiche de TD 2 de préparation au Baccalauréat (littéraire et scientifique) du ...
 
Décourvir les logiciels libres
Décourvir les logiciels libresDécourvir les logiciels libres
Décourvir les logiciels libres
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 

0055-cours-internet-web.pdf

  • 1. Internet  Principes généraux  Création de site web  Langage HTML
  • 3. L a n o t i o n d e r é s e a u ● 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
  • 4. Réseau : qu’est ce que c’est Un réseau : ● Connexion physique (câble) ● Langage de communication commun : un protocole
  • 5. R é s e a u l o c a l Réseau Local : réseau sur une zone limitée (une salle, un bâtiment ou quelques bâtiments) on dit LAN (Local Area Network) Deux types de machines : ● Serveurs : fournissent des services (ex : un disque commun, une imprimante, un accès internet, …) ● Clients : utilisent les services
  • 6. Réseau Local : connexion ● Connexion : par câble réseau Exemple d’ici : Un serveur dans le local technique Vos machines (clients) sont reliées à un hub (connecteur) lui même relié au serveur
  • 7. 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
  • 8. 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)
  • 9. Exemple de communication 1. Votre machine (le client) demande «est-ce que l3lea15 peut m’envoyer le fichier exos html.doc ? Mon adresse est 192.168.0.15» 2. L’information transite dans le réseau jusqu’à la machine l3lea15 (en réalité 192.168.0.1) 3. L3lea15 (le serveur) reçoit la demande, et envoie le fichier à l’adresse demandée.
  • 10. 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 »
  • 11. Et de chez vous ? ● Pour se connecter à un réseau local (celui de votre fournisseur d’accès) : modem (classique ou ADSL) ● Puis votre fournisseur d’accès est connecté à d’autres réseaux (à l’Internet)
  • 12. 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) ● Les jeux ● …
  • 13. 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
  • 14. Création de site web Le langage HTML
  • 15. 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
  • 16. 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>
  • 17. Les balises : Exemple 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. Pour mettre en gras : balises <b> et </b> Pour mettre en italique : balises <i> et </i>
  • 18. S t r u c t u r e d ’ u n d o c u m e n t H T M L 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
  • 19. S t r u c t u r e d ’ u n d o c u m e n t H T M L E x e m p l e <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>
  • 20. Exercices Exercices 1 et 2 : vos premières pages Web
  • 22. 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
  • 23. 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 ? [...]
  • 24. 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> <H2>1.1 Les crudités</H2> <H2>1.2 Les surgelés</H2> Partie 1 : Les entrées 1.1 Les Crudités 1.2 Les Surgelés
  • 25. L e s l i s t e s o r d o n n é e s : < o l > e t < l i > ( « o r d e r e d l i s t s » e t « l i s t i t e m » ) <ol> <li> allumez l'ordinateur ; <li> tapez votre nom de connexion ; <li> tapez le mot de passe ; <li> lancer le programme. </ol> 1. allumez l'ordinateur ; 2. tapez votre nom de connexion ; 3. tapez le mot de passe ; 4. lancer le programme.
  • 26. L e s l i s t e s n o n o r d o n n é e s : < u l > e t < l i > ( « u n o r d e r e d l i s t s » e t « l i s t i t e m » ) <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é
  • 27. 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>
  • 28. 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) Des exemples : <font color="#00FF00">c’est vert ! </font> <font color="green">c’est vert ! </font> <font size="7">c'est gros</font> <font size="7" color="green">c'est gros et vert</font>
  • 29. Plus d’informations ? 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
  • 30. Exercices Exercice 3 : conception d’une page Web
  • 32. 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…
  • 33. C r é e r u n s i t e W e b : v e r s i o n s i m p l e 1. Créez un répertoire : ce sera la racine de votre projet 2. Y placer tous vos fichiers (images et fichiers HTML notamment) 3. 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.
  • 34. C r é e r u n s i t e W e b : l e f i c h i e r i n d e x . h t m l N’oubliez pas de créez un fichier nommé 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
  • 35. Faire référence à un fichier Organisation classique C:/internet/Mon_site : la racine C:/internet/Mon_site/Images : les images C:/internet/Mon_site/Videos : les vidéos C:/internet/Mon_site/Fichiers : les fichiers à télécharger
  • 36. 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“ > L’image test.jpg sera affichée
  • 37. 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>
  • 38. Liens internes La balise A (Anchor) ● permet de créer des signets, avec la propriété name qui contient le nom du signet Ex : <a name=“partie1“>PARTIE 1</a> ● Permet de faire un lien, en indiquant le signet précédé de # avec la propriété href. Ex : <a href=“#partie1“> lien vers la partie 1</a>
  • 39. Exercices Exercice 4 : conception d’un mini site
  • 41. 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…) ● …
  • 42. P o u r l e s m o t e u r s d e r e c h e r c h e k e y w o r d s , d e s c r i p t i o n ● 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">
  • 43. 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">
  • 44. 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
  • 45. Balises META, mais encore ? Un nombre très grand de possibilités, pas toujours indispensables : ● <META NAME="expires" CONTENT="15 Février 2008"> La page ne sera plus valide après le 15 Février 2008 ● <META NAME="Generator" CONTENT="notepad"> La page a été produite avec le bloc-notes
  • 46. Tableaux et mise en page Balises <table>, <tr>, <td> et leurs amis
  • 47. Pour faire un tableau <table> <tr> <td> A </td> <td> B </td> </tr> <tr> <td> C </td> <td> D </td> </tr> </table> D C B A <Table> : le tableau <tr> : une ligne (table row) <td> : une cellule (table data)
  • 48. 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> Grojean Alfred Prénom Nom
  • 49. <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>
  • 50. <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=green> ou la</td> </tr> </table> OU LA LA ICI
  • 51. Menu avec <table> <table border=2 cellspacing=0> <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> Histoire Accueil Un Menu = une table à une colonne
  • 52. Mise en page avec des tables Une page = un grand tableau 2. Choisir le layout (disposition de la page) 3. Traduire en tableau 4. Remplir !
  • 53. Exemple : quel est la disposition de cette page ? Bienvenue dans ma page à moi, où je raconte tout qu’est ce que je veux La page à Momo Ma photo Accueil
  • 54. Mise en page par table, le layout Disposition de la page précédente : Le menu Le contenu Le titre <table> <tr> <td colspan=2> Le titre </td> </tr> <tr> <td> Le contenu </td> <td> Le menu (un tableau) </td> </tr> </table>
  • 55. 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>