Séminaire informel Création de pages web
Qu’est-ce qu’un site web ? Introduction HTML CSS FTP Framesets Qu’est-ce qu’un site web ? Des millions de pages sont enregistrées sur le web Site web Un site web est un ensemble de pages, liées entre elles et avec l’extérieur par de liens.
Pourquoi faire un site web ? Introduction HTML CSS FTP Framesets Pourquoi faire un site web ? Pour partager des fichiers/photos/etc... Pour mettre un CV Pour partager un contenu intéressant, une passion, avec le monde entier
C’est lui qui contient tout votre site web Introduction HTML CSS FTP Framesets Comment ça marche ? Les pages sont enregistrées sur un serveur. C’est un ordinateur (souvent très gros) accessible par n’importe quel internaute. Ils se trouvent généralement chez les fournisseurs d’accès. C’est lui qui contient tout votre site web Serveur Mon site web
Comment ça marche ? Introduction HTML CSS FTP Framesets La personne (ou plutôt l’ordinateur… ou plutôt le logiciel) qui veut afficher une page web s’appelle le client. Serveur Client Mon site web
Comment ça marche ? Introduction HTML CSS FTP Framesets Lorsque le client veut afficher une page web, (c’est-à-dire quand on tape une adresse) Il envoie une requête au serveur Serveur Client http://www.monsite.fr Cher serveur, Peux-tu m’envoyer la page que demandée ? Mon site web
Le serveur cherche la page. Introduction HTML CSS FTP Framesets Comment ça marche ? Le serveur cherche la page. Si il la trouve, il la renvoie S’il ne la trouve pas, il renvoie une erreur Serveur Client Mon site web Ok
Comment ça marche ? Introduction HTML CSS FTP Framesets La page est alors décodée et affichée par un logiciel : c’est le navigateur. Serveur Client Le navigateur est un logiciel qui interprète la page HTML et renvoie une sortie sur l’écran. Il existe plein de navigateurs différents. Pour les sites simple, ils se valent à peu prés tous. Mon site web
Comment ça marche ? Introduction HTML CSS FTP Framesets Pour résumer Etape 1 Etape 2 Etape 3 Commander une page Récupérer la page Afficher la page
Avec quoi fait-on une page web ? Introduction HTML CSS FTP Framesets Avec quoi fait-on une page web ? A la main N’importe quel éditeur de texte Sous Windows : Bloc note Notepad++ Crimson Sous Mac : Fraise Sous Linux : Gedit Emacs Avec un logiciel qui fait tout Sous Windows : Frontpage Dreamweaver Word LaTeX Avec un site « tout fait » Site : Joomla Blogs : Wordpress DotClear Wikis : MediaWiki DokuWiki Forum : PunBB phpBB
Avec quoi fait-on une page web ? Introduction HTML CSS FTP Framesets Avec quoi fait-on une page web ? Page Web Le code compliqué qui décrit la page s’appelle l’HTML C’est ce que nous allons apprendre à faire
Qu’est ce qu’une page ? PHP CSS HTML Java Script … Introduction HTML FTP Framesets Qu’est ce qu’une page ? Page web PHP CSS HTML Java Script …
Structure d’une page HTML Introduction HTML CSS FTP Framesets Structure d’une page HTML HTML <html> Une entête <head> … <title>Pages personnelles…</title> </head> Un corps <body> … <p>Bonjour !!!</p> </body> </html>
Les balises Introduction HTML CSS FTP Framesets Le fichier HTML est organiser par balises. Ce sont des mots clés encadré par des chevrons (< >) On les trouve sous 2 formes : Les balises par pair : une balise ouvrante + une balise fermante (avec un « / » pour dire qu’on la ferme !) HTML < balise > …. < /balise > Les balises seules : avec un « / » à la fin ! HTML < balise />
Les balises peuvent être de deux natures différentes Introduction HTML CSS FTP Framesets Les balises Les balises peuvent être de deux natures différentes Les balises « block » : Elles englobent le contenu. Elles contiennent des paragraphes, des titres, etc. HTML < p > Ceci est un paragraphe < /p > Les balises « inline » : Elles sont dans le texte. (mettre en gras, souligner, etc…) HTML < p > On va écrire un texte <strong> en gras </strong> !!!</p>
L’entête Introduction HTML CSS FTP Framesets <html> Placé entre les balises <head> et termine par </head> <head> <title>Titre de la page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> La balise <title></title> permettent d’indiquer le titre de la page Les balises <meta … /> permettent de mettre des options … /> Cette balise permet de dire que le contenu est écrit avec la norme iso-8859-1 (avec les accents é-à-è-ë-…) <body> … <p>Bonjour !!!</p> </body> </html>
C’est là que va figurer tout le contenu de la page Introduction HTML CSS FTP Framesets Le corps HTML <html> <head> </head> Placé entre les balises <body> et termine par </body> C’est là que va figurer tout le contenu de la page <body> </body> </html>
Les paraphes Introduction HTML CSS FTP Framesets <p> … </p> : Balise de paragraphes (balise la plus utile !) Block HTML <body> <p> Thomas Andrews (7 février 1873 - 15 avril 1912) est un architecte naval britannique qui a travaillé à la construction de plusieurs paquebots. Il grandit au sein d'une famille aisée, puis devient apprenti dans les chantiers navals Harland & Wolff de Belfast dont le président, Lord Pirrie, est son oncle. Pendant quelques années, Andrews gravit progressivement les échelons avant d'être nommé directeur général de l'entreprise. La réparation du paquebot de la White Star Line Suevic, à laquelle il participe, fait de lui un des architectes navals les plus renommés de son époque. </p> </body>
Les paraphes Introduction HTML CSS FTP Framesets <br/> : Retour à la ligne Inline HTML <body> <p> Ligne 1 <br/> ligne 2 <br/> Ligne 3 toujours ligne 3 </p> </body>
Les titres Introduction HTML CSS FTP Framesets <h1> … </h1> Titre TRES important <h2> … </h2> Titre important <h3> … </h3> Titre moyen <h4> … </h4> Titre pas important <h5> … </h5> Titre pas du tout important Block HTML <body> <h1> Chapitre 1</h1> <h2> Section 1 </h2> <p> Bla bla bla </p> <h2> Section 2 </h2> <p> camion </p> <h1> Chapitre 2 </h1> <p> Pouet pouet </p> </body>
Elle est considérée comme une lettre ! Introduction HTML CSS FTP Framesets Les images Inline <img src = " mon_fichier_image.jpg " alt = " texte alternatif " /> … /> /> HTML <body> <p> Je suis content !! <img src="images/content.gif" alt="Smile Content" /> </p> </body> L’attribut alt (Alternative) permet d’écrire un texte de remplacement (si jamais l’image indiquée n’existe pas). On peut par exemple mettre le titre de l’image… L’attribut src (source) permet d’indiquer où se trouve l’image. Deux choix : Soit un chemin relatif de l’image (par rapport à là où est enregistré la page) Ex : " image/photo_identite.jpg " Soit un chemin absolue de l’image (commençant par « http:// ») pour pointer vers un autre site, par exemple… La balise img est de type inline, c’est-à-dire qu’elle doit se trouver à l’intérieure de balises block ! Elle est considérée comme une lettre !
Les liens Introduction HTML CSS FTP Framesets <a>…</a> : Faire un lien vers une image ou un fichier. Inline <a href="mon_lien">texte à cliquer</a> HTML <body> <p> Pour plus d’informations, <a href="http://fr.wikipedia.org/Un_amour_de_coccinelle"> cliquez ici ! </a> </p> </body> Mot clé pour indiquer l’adresse (une autre page web, un fichier, …) Chemin vers le lien Texte qui servira de « bouton" Lien vers un mail <a href="mailto:allais.raphael@free.fr">Ecrivez-moi !</a>
Mise en évidence du texte Introduction HTML CSS FTP Framesets Mise en évidence du texte <strong>…</strong> : important (en gras). <em>…</em> : Mise en évidence (italic). Inline Inline HTML <body> <p> Ceci est une <strong>chose importante</strong>, Ceci est une <em>mise en évidence</em>. </p> </body>
Les listes Introduction HTML CSS FTP Framesets <ul>…</ul> : Début et fin d’une liste <li>…</li> : Début et fin d’un des points de la liste Block Block HTML <body> <p>Pour être un bon thésard, il faut : </a> <ul> <li>aimer les ordinateurs</li> <li>être poète (surtout la 3<sup>ème</sup> année)</li> <li>aimer les voyages</li> <li>…</li> </ul> </body>
Les tableaux Introduction HTML CSS FTP Framesets <table>…</table> Indique le début et la fin du tableau <tr>…</tr> indiquent le début et la fin d’une ligne Les balises <td>…</td> indiquent le début et la fin d’une colonne <body> <table> <tr> <td>Ligne 1 – Colonne 1</td> <td>Ligne 2 – Colonne 2</td> </tr> <td>Ligne 2 – Colonne 1</td> </table> </body>
Les balises à tout faire Introduction HTML CSS FTP Framesets Les balises à tout faire <div>…</div> : Balise de type « block ». Block HTML <body> <div> Les chaussettes de l’achi-duchesse sont-elles sèches, archi sèches ? </div> </body> <span>…</span> : Balise de type « inline ». Inline HTML <body> <p> Les chaussettes de l’achi-duchesse sont-elles sèches, <span>archi sèches</span> ? </p> </body> Ces balises ne servent à priori à rien. En fait, elles serviront plus tard, lorsqu’on voudra les mettre en forme (souligner, mettre en rouge, etc…)
Exercice 1 ! But du jeu : créer une page – CV avec : Nicolas Introduction HTML CSS FTP Framesets Exercice 1 ! But du jeu : créer une page – CV avec : Nicolas Un tableau 1 ligne/ 2 colonnes avec : Votre nom en titre 1 dans la colonne de droite Une photo de vous dans la colonne de gauche Moi Nom : Nicolas Adresse : Sucé-sur-Erdre Email : ilovexfem@free.fr Un paragraphe « état Civil » avec les informations sous forme de liste Ma vie 1962 : Ecole maternelle 1966 : CP 1999: Change le monde Un paragraphe « formations » avec des liens vers les écoles/universités, …
CSS* ? Pourquoi ? Introduction HTML CSS FTP Framesets Le CSS est un langage permettant la mise en page d’une page web. Attention à ne pas confondre : Le HTML : dit le contenu de ce qu’il y a sur la page Je veux un titre, Je veux un image, Je veux un paragraphe qui dit ça, ça, ça… Le CSS : dit comment afficher ce qu’il y a sur la page Je veux que les titres soient centrés, Je veux un image soit encadrées en vert, Je veux que le fond soit rouge… *Cascading Style Sheets
CSS ? Pourquoi ? Introduction HTML CSS FTP Framesets Exemple : Page sans CSS Page avec CSS
CSS comment ? 2 façons de faire : Soit balise par balise Introduction HTML CSS FTP Framesets CSS comment ? 2 façons de faire : Soit balise par balise Soit toutes les balises d’un coup !
CSS balise par balise Introduction HTML CSS FTP Framesets Le CSS se met à l’intérieur de la balise ouvrante, en ajoutant l’attribut style. HTML <p> Mon texte </p> HTML <p style="…" > Mon texte </p> Les propriétés CSS se mettent à la place des « … »
CSS balise par balise Introduction HTML CSS FTP Framesets Les propriétés CSS se mettent toujours sous la forme : Propriété : valeurs ; (n’oubliez pas le « : » au milieu, et surtout le « ; » à la fin !)
CSS balise par balise Introduction HTML CSS FTP Framesets Exemple : <p style=" color : red; " > Mon texte </p> Si vous voulez appliquer plusieurs propriétés CSS il suffit de les mettres les unes à la suite des autres (sans oublier les « ; » entre chaque !) HTML <p style=" color : red; margin : 0px ; " > Mon texte </p>
Liste des propriétés CSS usuelles Introduction HTML CSS FTP Framesets Liste des propriétés CSS usuelles color : donne la couleur du texte (et des traits). Valeurs : le nom de la couleur en anglais, ou le code hexadécimal de la couleur précédé d’un « # » (#F4A42E) HTML <p style=" color : red; " > Mon texte </p> font-size : donne taille du texte. Valeurs : la taille en pixel (suivie de « px »), ou certains mots clés comme « small », « medium », « large », « x-large » HTML <p style=" font-size : 50px; " > Mon texte </p> text-align : donne l’alignement du texte. Valeurs : left, right, center, justify. HTML <p style=" text-align : center; " > Mon texte </p>
Liste des propriétés CSS usuelles Introduction HTML CSS FTP Framesets Liste des propriétés CSS usuelles font-weight : épaisseur du trait (gras ou pas gras). Valeurs : « bold » (gras) ou « normal » HTML <p>Ceci est <span style=" font-weight : bold; " > Important</span> !</p> font-style : Style de trait (italic) Valeurs : « italic », « oblique » ou « normal ». HTML <p style=" font-style : italic; " > Texte italic </p> text-decoration : « décore » le texte. Valeurs : « underline » (souligné), « line-through » (barré), « overline » (ligne au-dessus), « blink » (clignotant), « none » (normal). HTML <p style=" text-decoration : blink; " > C’EST LES SOLDES !!!!</p>
Liste des propriétés CSS usuelles Introduction HTML CSS FTP Framesets Liste des propriétés CSS usuelles Mettez des guillemets pour les noms composés font-family : donne la police du texte. Valeurs : le nom de la police : arial, "Arial Black", Georgia, … HTML <p style=" font-family : Arial; " > Mon texte </p> Tous les ordinateurs ne connaissent pas toutes les polices. Pensez à mettre des polices connues ! La plus connue est « Serif ». Au cas où, il est possible de mettre plusieurs polices par ordre de préférence, séparées par des virgules HTML <p style=" font-family : Verdana, Arial, Serif; " > Mon texte </p>
Liste des propriétés CSS usuelles Introduction HTML CSS FTP Framesets Liste des propriétés CSS usuelles height : Définit la hauteur de la balise. width : Définit la largeur de la balise Valeurs : la taille en pixel (suivie de « px »), ou pourcentage (suivie de « % ») de la largeur de la balise englobante. HTML <p style=" width : 200 px; " > Mon texte </p> Le paragraphe fera 200px de large HTML <body> <p style=" width : 80%; " > Mon texte </p> </body> Le paragraphe fera 80% de la largeur de la page (body) Ces propriétés ne fonctionnent que pour les balise de type « block »
Liste des propriétés CSS usuelles Introduction HTML CSS FTP Framesets Liste des propriétés CSS usuelles border : Définit plein de choses sur les bordures. Valeurs : - Le type (none, solid, dotted, …) - L’épaisseur (en px) - la couleur (red, blue, #AA34F2,…) HTML <p style=" border : solid 2px green; " > Mon texte </p> background-color : Définit la couleur l’arrière plan. Valeurs : La couleur (red, …) ou « transparent » HTML <p style=" background-color : #AAAAFF; " > Mon texte </p> background : Image d’arrière-plan Valeurs : - l’emplacement de l’image de la forme url(‘fichier_image’) - des propriété sur l’affichage (alignement, répétition, …) HTML <p style=" background : url(‘image/fond.jpg’) right no-repeat " > Mon texte </p>
Le fichier CSS Introduction HTML CSS FTP Framesets Si les balises de même types ont toutes la même mise en forme comme ci-dessous… HTML <h2 style="text-decoration:underline ; color:red;" > Chapitre I </h2> <p style="font-style:italic;" >blablabla</p> <h2 style="text-decoration:underline ; color:red;" > Chapitre II </h2> <p style="font-style:italic;" >patati patata</p> <h2 style="text-decoration : underline ; color : red;" > Conclusion</h2> <p style="font-style:italic;" >gnagnagna</p> … plutôt que de les réécrire à chaque fois pour chaque balsie, on peut écrire toutes ces propriétés CSS dans un fichier, une fois pour toute !
Le fichier CSS Introduction HTML CSS FTP Framesets Exemple : <h2> Chapitre I </h2> <p>blablabla</p> <h2> Chapitre II </h2> <p>patati patata</p> <h2> Conclusion</h2> <p>gnagnagna</p> h2 {text-decoration : underline ; color : red ;} p {font-style : italic ;}
On l’indique dans l’entête de la page Introduction HTML CSS FTP Framesets Le fichier CSS HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" /> </head> <body> <h2> Chapitre I </h2> <p>blablabla</p> <h2> Chapitre II </h2> <p>patati patata</p> <h2> Conclusion</h2> <p>gnagnagna</p> </body> </html> Par contre : il faudra dire à la page html d’aller chercher le fichier CSS On l’indique dans l’entête de la page
Hiérarchie des balises Introduction HTML CSS FTP Framesets Hiérarchie des balises On peut restreindre la portée des propriétés CSS à certaines balises contenues dans d’autres balises. Pour cela, on mes les balises dans l’ordre hierarchique, séparées par des espaces. CSS Signifie : les balises liens (« a ») qui se trouvent dans les titres 1 (« h1 ») doivent être noir et non-soulignés. h1 a {text-decoration : none ; color : black ;}
Les exceptions : class et id Introduction HTML CSS FTP Framesets Les exceptions : class et id Si vous avez fait un fichier CSS, mais que vous souhaitez faire exception avec quelques balises, 2 solutions : Décrire directement dans les balises (comme avant) HTML CSS <h2> Chapitre I </h2> <p>blablabla</p> <h2> Chapitre II </h2> <p style="color:red;font-weight:bold"> patati patata</p> <h2> Conclusion</h2> <p>gnagnagna</p> h2 {text-decoration : underline ; color : red ;} p {font-style : italic ;}
Les exceptions : class et id Introduction HTML CSS FTP Framesets Les exceptions : class et id Si vous avez fait un fichier CSS, mais que vous souhaitez faire exception avec quelques balises, 2 solutions : Donner un nom à vos balises ! HTML CSS <h2> Chapitre I </h2> <p>blablabla</p> <h2> Chapitre II </h2> <p class="important">patati patata</p> <h2> Conclusion</h2> <p>gnagnagna</p> h2 {text-decoration : underline ; color : red ;} p {font-style : italic ;} .important {color : red; font-weight:bold}
Les exceptions : class et id Introduction HTML CSS FTP Framesets Les exceptions : class et id Si vous avez fait un fichier CSS, mais que vous souhaitez faire exception avec quelques balises, 2 solutions : Donner un nom à vos balises ! HTML CSS <h2> Chapitre I </h2> <p>blablabla</p> <h2> Chapitre II </h2> <p id="important">patati patata</p> <h2> Conclusion</h2> <p>gnagnagna</p> h2 {text-decoration : underline ; color : red ;} p {font-style : italic ;} #important {color : red; font-weight:bold}
Les exceptions : class et id Introduction HTML CSS FTP Framesets Les exceptions : class et id Quelle différence entre « class » et « id » ? « class » peut être réutilisé avec le même nom pour plusieurs balises. Pour un nom donné, « id » ne peut être utilisé que pour une balise unique. Par exemple s’il n’y a qu’un seul menu sur le coté de votre page, on peut définir son style en le nommant : HTML CSS <div id="menu"> <a href="lien1.html">lien 1</a> <a href="lien2.html">lien 2</a> <a href="lien3.html">lien 3</a> </div> #menu {width:100px; Float:left;} #menu a {display:block; width:90px; Background-color:blue;}
Exercice 2 Tous les H1 = centré souligné Introduction HTML CSS FTP Framesets Exercice 2 Tous les H1 = centré souligné Tous les H2 = police différente souligné Lien de couleur : en rouge gras Arrière plan en beige Le corps est encadré en noir.
Le Frameset Introduction HTML CSS FTP Framesets Les framesets permettent de faire faire une page composée de plusieurs pages : Page1.html Page2.html Page3.html Page0.html
1 découpage avec 2 lignes : Un deuxième découpage : Introduction HTML CSS FTP Framesets Le Frameset La page « Page0.html » va appeler les autres pages 1 découpage avec 2 lignes : Une de hauteur 15% de la taille totale (qui affichera « entete.html ») Une de hauteur quelconque (*) qui affichera un autre frameset. Un deuxième découpage : Une colonne de 10% de la largeur totale (qui affichera « menu.html ») Une de largeur quelconque (qui affichera « contenu.html ») HTML <html> <head> <title>Ma Page</title> </head> <frameset row="15% , * "> <frame scr="entete.html" name="entete" > <frameset cols="10% , *"> <frame src="menu.html" name="menu" > <frame scr="contenu.html" name="contenu" > </frameset> </html>
Comment faire un lien vers une frame particulière ? Introduction HTML CSS FTP Framesets Comment faire un lien vers une frame particulière ? entete HTML menu Lien 1 Lien 2 Lien 3 contenu <a href="lien1.html" target="contenu">lien 1</a> <a href="lien2.html" target="contenu">lien 2</a> <a href="lien3.html" target="contenu">lien 3</a>
Exercice 3 : Faire une page complète avec les Frameset avec : Entete Introduction HTML CSS FTP Framesets Exercice 3 : Faire une page complète avec les Frameset avec : Entete Menu contenu
Transférer vers le serveur Introduction HTML CSS FTP Framesets Transférer vers le serveur Comment avoir un serveur Des sociétés proposent des espaces en ligne pour mettre vos sites. (1&1, …) Vos fournisseur d’accés internet propose en général un espace de stockage (free, orange, …) Il existe des espaces gratuits (mais ils sont souvent lents…)
Transférer vers le serveur Introduction HTML CSS FTP Framesets Transférer vers le serveur Comment envoyer son site sur l’espace ? Via le protocole « FTP ». C’est un moyen d’envoyer des fichiers d’un ordinateur à l’autre. Des logiciels permettent de le faire très facilement (Filezilla (gratuit), FireFTP (addon Firefox - gratuit), FTP Expert, etc…) Certain serveurs proposent des transferts FTP en ligne (directement sur leur site)
Clients / serveur Comment se connecter à un serveur Introduction HTML CSS FTP Framesets Clients / serveur Comment se connecter à un serveur Serveur FTP requière : Une adresse de serveur (exemple : ftpperso.free.fr) Un login (exemple : raphael.allais) Un mot de passe (exemple : ••••• ) Un numéro de port (normalement, c’est le n°21)
Clients / serveur Comment envoyer ? Introduction HTML CSS FTP Framesets Clients / serveur Comment envoyer ? Une fois connecté, c’est comme un exploreur de dossier ! Il suffit de faire des copier/coller/supprimer, etc…
FIN ! Pour aller plus loin Introduction HTML CSS FTP Framesets FIN ! Pour aller plus loin Pour reprendre tout ce cours : www.siteduzero.com Les autres langages internet : Le PHP : Ce n’est plus vous, mais une machine qui écrit la page avant de l’envoyer Le Java-script : Permet de modifier la page après l’avoir envoyé
Et maintenant : ACTION ! Mails : raphael.allais@ec-nantes.fr Jad.matar@irccyn.ec-nantes.fr