Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Principes généraux Création de site web Langages HTML XML
Internet Principes généraux Création de site web Langages HTML XML
2
Internet Principes généraux
3
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
4
Réseau : qu’est ce que c’est
Un réseau : Connexion physique (câble) Langage de communication commun : un protocole
5
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
6
Réseau Local : connexion
Connexion : par câble réseau Exemple d’ici :
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 : ) Pour faire plus ‘lisible’, un nom peut représenter une adresse IP (ex : l3lea15,
9
Exemple de communication
Votre machine (le client) demande « est-ce que l3lea15 peut m’envoyer le fichier exos html.doc ? Mon adresse est » L’information transite dans le réseau jusqu’à la machine l3lea15 (en réalité ) 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) …
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 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.
18
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
19
Structure d’un document HTML : Exemple
<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>
20
Exercices Exercices 1 et 2 : vos premières pages Web
21
Création de site web Quelques balises…
22
Balises : mise en forme Pour mettre en gras : <b> Ex : test
Pour mettre en italique : <i> Pour mettre en souligné :<u> Pour mettre en écriture « machine à écrire » : <tt> 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 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 ? [...] <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>
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> Partie 1 : Les entrées 1.1 Les Crudités 1.2 Les Surgelés <H1>Partie 1 : Les entrées</H1> <H2>1.1 Les crudités</H2> <H2>1.2 Les surgelés</H2>
25
Les listes ordonnées : <ol> et <li> (« ordered lists » et « list item »)
<li> allumez l'ordinateur ; <li> tapez votre nom de connexion ; <li> tapez le mot de passe ; <li> lancer le programme. </ol> allumez l'ordinateur ; tapez votre nom de connexion ; tapez le mot de passe ; lancer le programme.
26
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é
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) Ex : <font color="#00FF00">c’est vert ! </font> Ou une couleur en anglais <font color="green"> c’est vert ! </font>
29
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>
30
Plus d’informations ? Il y a encore plein de balises et de propriétés ! Plus d’informations : : le site référence du W3C (complet mais incompréhensible) ... Tout ce que vous trouverez sur google en tapant « guide HTML » par exemple
31
Exercices Exercice 3 : conception d’une page Web
32
Création de site web créer un site
33
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…
34
Créer un site Web : version simple
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.
35
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 sans préciser la page, le serveur Web m’envoie en réalité
36
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
37
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.
38
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>
39
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=“ super site </a>
40
Exercices Exercice 4 : conception d’un mini site
41
Renseigner les pages HTML
L’entête et la balise <meta>
42
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…) …
43
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">
44
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">
45
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
46
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
47
Tableaux et mise en page
Balises <table>, <tr>, <td> et leurs amis
48
Pour faire un tableau <Table> : le tableau
<tr> <td> A </td> <td> B </td> </tr> <td> C </td> <td> D </td> </table> A B C D <Table> : le tableau <tr> : une ligne (table row) <td> : une cellule (table data)
49
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
50
<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>
51
<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
52
Menu avec <table>
Un Menu = une table à une colonne <table border=2> <tr> <td align=center> <a href=index.html>Accueil</a> </td> </tr> <a href=page1.html>Histoire</a> </table> Accueil Histoire
53
Mise en page avec des tables
Une page = un grand tableau Choisir le layout (disposition de la page) Traduire en tableau Remplir !
54
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
55
Mise en page par table, le layout
Disposition 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>
56
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> <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>
57
Balises meta et Mise en page
Exercices 5, 6 et 7
58
Les feuilles des style CSS et HTML
59
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é…
60
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
61
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
62
Application d’une feuille de style
Créez la feuille de style (fichier .css) 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
63
CSS : la syntaxe H1 { font-size: large; color: red; }
Nom de la balise considérée { Attribut1 : valeur ; Attribut2 : valeur2 ; }
64
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
65
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;
66
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 … …
67
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
68
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.menu { color : blue; } H1.doc color : red; <h1 class=menu> toto </h1> <h1 class=doc> tata </h1>
69
Attribut ID Idem que class. Mais normalement,chaque id est unique (il n’y aura qu’un seul élément d’id « menu ») #menu { color : blue; } #doc color : red; <h1 id=menu> toto </h1> … <h1 id=doc> tata </h1>
70
HTML et CSS Exercice 8
71
CSS : mise en page par boite
<div>, class et id
72
CSS : des boîtes plutôt que des tables
Mettre en page avec des CSS : Repérez les différents éléments constituant de la page 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
73
Exemple : la page à Momo La page à Momo
Bienvenue dans ma page à moi, où je raconte tout ce que je veux Accueil Ma photo
74
Exemple : la page à Momo titre contenu Menu
75
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>
76
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; }
77
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
78
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;)
79
Mise en page par CSS Exercice 9 et 10
Présentations similaires
