Internet Principes généraux Création de site web Langages HTML XML.
-
Upload
lunete-lapeyre -
Category
Documents
-
view
106 -
download
0
Transcript of Internet Principes généraux Création de site web Langages HTML XML.
![Page 1: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/1.jpg)
Internet
Principes générauxCréation de site webLangages HTML XML
![Page 2: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/2.jpg)
Internet
Principes généraux
![Page 3: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/3.jpg)
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
![Page 4: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/4.jpg)
Réseau : qu’est ce que c’est
Un réseau : Connexion physique (câble) Langage de communication commun : un
protocole
![Page 5: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/5.jpg)
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
![Page 6: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/6.jpg)
Réseau Local : connexion
Connexion : par câble réseau
Exemple d’ici :
![Page 7: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/7.jpg)
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
![Page 8: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/8.jpg)
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)
![Page 9: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/9.jpg)
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.
![Page 10: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/10.jpg)
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 »
![Page 11: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/11.jpg)
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) …
![Page 12: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/12.jpg)
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
![Page 13: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/13.jpg)
Création de site web
Le langage HTML
![Page 14: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/14.jpg)
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
![Page 15: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/15.jpg)
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>
![Page 16: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/16.jpg)
Les balises : Exemple
Document HTMLCe 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>
![Page 17: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/17.jpg)
Structure d’un document HTMLUn 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
![Page 18: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/18.jpg)
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>
![Page 19: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/19.jpg)
Exercices
Exercices 1 et 2 : vos premières pages Web
![Page 20: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/20.jpg)
Création de site web
Quelques balises…
![Page 21: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/21.jpg)
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
![Page 22: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/22.jpg)
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 ? [...]
![Page 23: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/23.jpg)
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
![Page 24: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/24.jpg)
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>
1. allumez l'ordinateur ;
2. tapez votre nom de connexion ;
3. tapez le mot de passe ;
4. lancer le programme.
![Page 25: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/25.jpg)
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é
![Page 26: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/26.jpg)
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>
![Page 27: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/27.jpg)
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 anglaisEx :
<font color="green"> c’est vert ! </font>
![Page 28: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/28.jpg)
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>
![Page 29: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/29.jpg)
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
![Page 30: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/30.jpg)
Exercices
Exercice 3 : conception d’une page Web
![Page 31: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/31.jpg)
Création de site web
créer un site
![Page 32: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/32.jpg)
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…
![Page 33: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/33.jpg)
Créer un site Web : version simple1. 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.
![Page 34: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/34.jpg)
Créer un site Web : le fichier index.htmlN’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éfautEx : si je tape www.google.fr sans préciser la
page, le serveur Web m’envoie en réalitéwww.google.fr/index.html
![Page 35: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/35.jpg)
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.
![Page 36: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/36.jpg)
Des liens : à l’intérieur d’une pageLa 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>
![Page 37: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/37.jpg)
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>
![Page 38: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/38.jpg)
Exercices
Exercice 4 : conception d’un mini site
![Page 39: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/39.jpg)
Renseigner les pages HTML
L’entête et la balise <meta>
![Page 40: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/40.jpg)
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…) …
![Page 41: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/41.jpg)
Pour les moteurs de recherchekeywords, 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">
![Page 42: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/42.jpg)
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">
![Page 43: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/43.jpg)
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
![Page 44: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/44.jpg)
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
![Page 45: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/45.jpg)
Tableaux et mise en page
Balises <table>, <tr>, <td> et leurs amis
![Page 46: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/46.jpg)
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)
![Page 47: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/47.jpg)
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
![Page 48: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/48.jpg)
<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>
![Page 49: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/49.jpg)
<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
![Page 50: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/50.jpg)
Menu avec <table>
<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
Un Menu = une table à une colonne
![Page 51: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/51.jpg)
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 !
![Page 52: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/52.jpg)
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
![Page 53: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/53.jpg)
Mise en page par table, le layoutDisposition de la page précédente :
Le titre
Le contenu Le menu
<table>
<tr> <td colspan=2> Le titre </td> </tr>
<tr> <td> Le contenu </td>
<td> Le menu (un tableau) </td> </tr> </table>
![Page 54: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/54.jpg)
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>
![Page 55: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/55.jpg)
Balises meta et Mise en page
Exercices 5, 6 et 7
![Page 56: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/56.jpg)
Les feuilles des style
CSS et HTML
![Page 57: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/57.jpg)
Mise en page Solution classique : table et fontMise 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é…
![Page 58: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/58.jpg)
Mise en pageSolution moderne : les feuilles de styleDistinction 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
![Page 59: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/59.jpg)
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
![Page 60: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/60.jpg)
Application d’une feuille de style1. 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">
Note : il est possible d’intégrer des (morceaux de) feuilles de style dans la page HTML
![Page 61: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/61.jpg)
CSS : la syntaxe
H1
{
font-size: large;
color: red;
}
Nom de la balise considérée
{
Attribut1 : valeur ;
Attribut2 : valeur2 ;
}
![Page 62: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/62.jpg)
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
![Page 63: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/63.jpg)
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 rightDéfinir plusieurs attributs d’un coup :font : times small bold;
![Page 64: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/64.jpg)
Les listes, quelques autres propriétés List-style-type : type de liste (pour ul, ol et li)
None, disc, circle, square,decimal, lower-roman, upper-roman, georgian …
…
![Page 65: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/65.jpg)
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
![Page 66: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/66.jpg)
Attribut class
<h1 class=menu>
toto </h1>
<h1 class=doc>
tata </h1>
H1.menu
{
color : blue;
}
H1.doc
{
color : red;
}
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
![Page 67: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/67.jpg)
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;
}
![Page 68: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/68.jpg)
HTML et CSS
Exercice 8
![Page 69: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/69.jpg)
CSS : mise en page par boite
<div>, class et id
![Page 70: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/70.jpg)
CSS : des boîtes plutôt que des tablesMettre en page avec des CSS : 1. Repérez les différents éléments constituant
de la page2. 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
![Page 71: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/71.jpg)
Exemple : la page à Momo
La page à Momo
Bienvenue dans ma page à moi, où je raconte tout ce que je veux Accueil
Ma photo
![Page 72: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/72.jpg)
Exemple : la page à Momo
titre
contenu
Menu
![Page 73: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/73.jpg)
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>
![Page 74: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/74.jpg)
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; }
![Page 75: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/75.jpg)
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
![Page 76: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/76.jpg)
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;)
![Page 77: Internet Principes généraux Création de site web Langages HTML XML.](https://reader036.fdocument.pub/reader036/viewer/2022070309/551d9d8c497959293b8c1e5a/html5/thumbnails/77.jpg)
Mise en page par CSS
Exercice 9 et 10