Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis DAUCHEZ
1/ Le contenu et le XHTML 2/ La présentation et le CSS 2.1 Où utiliser le langage CSS? 2.2 Appliquer un style à des balises 2.3 Les commentaires dans le CSS 2.4 Les class et id 2.5 Imbrications de balises 2.6 Formatage du texte 2.7 Les couleurs 2.8 Les méga propriétés 2.9 Le fond 2.10 Les pseudots-formats 2.11 Les blocs 3/ Son site sur le web
2/ La présentation et le CSS Rappel : Pour faire un site Internet, on utilise deux langages, le XHTML pour le contenu et le CSS pour la présentation du site. 2.1 Où utiliser le langage CSS? 3 méthodes : 1. Dans l en-tête du fichier XHTML 2. Dans les balises XHTML 3. Dans un fichier CSS (conseillé)
1. Dans l en-tête du fichier XHTML <!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>exemple de CSS dans le header</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <body> </body> </html> </head> </style> 2. Dans les balises XHTML <h1 id="haut" style="color:blue;font-size:18px;font-family:verdana;">prénom NOM</h1> Ajout de l attribut style="propriétés CSS" dans la balise Les propriétés CSS s écrivent ainsi : color : blue ; nomdelapropriété : valeur ;
3. Dans un fichier CSS Ouvrir le bloc note et enregistrer dans votre dossier contenant votre fichier XHTML et votre dossier images, le fichier presentation.css Dans le fichier XHTML, on ajoute une ligne dans la balise <head> pour spécifier le fichier CSS utilisé <!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>cv de Prénom NOM</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="css du CV" href="presentation.css" /> </head> Balise <link /> pour faire un lien (ici vers le fichier CSS presentation.css) Attribut rel : type de lien (stylesheet fichier CSS) Attribut media : type de média (screen écran d ordinateur) Attribut type : type de contenu (text/css langage CSS) Attribut title et href
2.2 Appliquer un style à des balises h1 { color:rgb(55,103,174); font-size:18px; margin-top:15px; nom de la balise { propriété1:valeur; propriété2:valeur; Si on veut appliquer un même style à plusieurs balises: h1,h2,h3,h4 { font-weight :bold; 2.3 Les commentaires dans le CSS /* Les titres seront en gras */ h1,h2,h3,h4 { font-weight :bold; On écrit le commentaire entre /* et */
2.4 Les class et les id Rappels : class : attribut permettant d attribuer des propriétés css à une balise que l on peut retrouver plusieurs fois dans le XHTML. id : attribut permettant d attribuer des propriétés css à une balise UNIQUE dans le XHTML. <div id="global"> <div id="colonne2"> <h2 class="droite">formations</h2> <h2 class="droite">experiences PROFESSIONNELLES</h2> </div> </div> Dans le fichier css : - on ajoute un # avant le nom de l id - on ajoute un. avant le nom de la classe #global { width:900px; margin:auto;.droite { background-color:white; color:rgb(55,103,174); font-size:16px; text-align:center;
2.5 Imbrication des balises a { text-decoration:underline; color:white; border:none; #bas a { color:rgb(55,103,174); text-decoration:none; Les liens seront soulignés, écris en blanc et sans bordure Tous les liens contenus dans le bloc bas (id="bas") seront écris en bleu et ne seront pas soulignés.
2.6 Formatage du texte (Suivre à partir du polycopié sur les balises CSS) La police : font-family La taille : font-size (px, em, %) Gras : font-weight (bold, bolder, lighter, normal) Décoration : text-decoration (underline, blink, overline, ) Alignement : text-align (left, center, right, justify) 2.7 Les couleurs color (pour le texte) background-color (pour l arrière-plan) Nom de la couleur en anglais (black, red ) Couleur héxadécimale #0099cc Couleur RGB rgb(255,255,255) (Voir Paint, Couleur, Modifer les couleurs, Définir les couleurs personnalisées)
2.8 Les méga propriétés Font : bold, 16px, Arial; 2.9 Le fond Couleur de fond background-color:#0099cc; Image de fond background-image : url("../images/neige.png"); background-attachment: fixed ou scroll background-repeat background-position (méga propriété -> background:url("images/fond.png") no-repeat fixed top right; ) 2.10 Les pseudos-formats lorsque le visiteur pointe dessus avec la souris, a:hover lorsque le visiteur clique dessus, a:active lorsque le visiteur a sélectionné le lien, a:focus lorsque le visiteur a déjà vu la page, a:visited Ne fonctionne pas qu avec les liens! (images, menus, paragraphes, titres ) (Voir aussi :first-letter, :first-line, :before, :after)
2.11 Les blocs (ou boites) La taille : Largeur = width : npx; Hauteur = height : npx; Les bordures : border-top, border-bottom, border-right, border-left (si mêmes valeurs pour les 4, border) border : 1px solid black; (épaisseur, style, couleur) Les marges extérieures et intérieures : Marges extérieures = margin Marges intérieures = padding #bloc { margin-top : 20px; margin-bottom : 10px; margin-right : 5px; margin-left : 1px; (Idem padding)
Méga propriété margin (ou padding): Si 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite Si 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite Si 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas Si 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche. Centrer automatiquement les blocs : margin : auto; (ne peut fonctionner que si vous avez indiqué une largeur au bloc!)
La position des blocs : Le positionnement absolu : il permet de placer un bloc n'importe où sur la page (position de départ = en haut à gauche de la page). Le positionnement fixe : idem que le positionnement absolu, mais cette fois le bloc reste toujours visible, même en descendant dans la page. Le positionnement relatif : il permet de déplacer un bloc par rapport à sa position normale. Propriété css : position Valeurs possibles : absolute : positionnement absolu, fixed : positionnement fixe, relative : positionnement relatif. Position de départ #bloc { position: absolute; left: 35px; top: 50px;
Ajouter ce code dans le css, enregistrer et regarder le résultat dans le navigateur body { background-color:#0099cc; font-family:verdana,arial; font-weight:none; #global { width:900px; margin:auto; #page { width:896px; background:white; border:2px solid #3767ae; margin-top:20px; #civilite { text-align:center; margin-top:40px; font-weight:bold; #colonne1 { width:415px; padding:15px; float:left; #colonne2 { width:415px; padding:15px; margin-left:450px; #bas { text-align:center; margin-top:20px; margin-bottom:10px; width:900px; clear:left; color:rgb(55,103,174); #footer { padding-top:10px; padding-bottom:10px; width:900px; margin:auto; background-color:#0099cc; color:white; text-align:center;
1/ Le contenu et le XHTML 2/ La présentation et le CSS 3/ Son site sur le web 3.1 Le nom de domaine 3.2 L hébergeur 3.3 Client FTP 3.4 Référencement
3/ Son site sur le web 3.1 Le nom de domaine Exemple : google.fr Extensions :.com,.fr,.be,.eu,.net,.org, etc Tarif environ 10 par an. Comment obtenir un nom de domaine : 1. Passer par un registrar spécialisé. C'est un organisme qui sert d'intermédiaire entre l'icann (l'organisation qui gère les noms de domaine au niveau international) et vous (ex : 1&1, OVH et Gandi sont de célèbres registrars français). 2. Commander le nom de domaine en même temps que l'hébergement.
3.2 L hébergeur Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés "Serveurs" (ordinateurs très puissants qui restent tout le temps allumés). Les serveurs sont empilés dans des baies (armoires climatisées). L'hébergeur est une entreprise qui se charge de gérer les serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24 7j/7. Ces baies se situent dans des lieux particuliers appelés datacenters. Les datacenters sont donc des "entrepôts à serveurs" en quelque sorte, et leur accès est très protégé. Hébergement mutualisé : si vous optez pour une offre d'hébergement mutualisée, votre site sera placé sur un serveur gérant plusieurs sites à la fois. C'est l'offre la moins chère. Hébergement dédié : le serveur gère uniquement votre site et aucun autre. Attention, cela coûte assez cher et il faut avoir des connaissances en Linux pour administrer le serveur à distance. Il existe des hébergeurs gratuits qui proposent d héberger votre site gratuitement, mais souvent il y a des conditions de taille, de trafic et des publicités qui s affichent. Pour héberger son site sur voila.fr (http://nomdevotresite.site.voila.fr ) : Sur le site ressource (http://jleu10.free.fr) Héberger son site perso avec voila.fr
3.3 Client FTP FTP signifie File Transfer Protocol, c'est le moyen que l'on utilise pour envoyer les fichiers sur le serveur. Il existe des logiciels permettant d'utiliser le FTP pour transférer vos fichiers sur Internet comme FileZilla ou FireFTP (voir site ressource Firefox et FireFTP). 3.4 Référencement Pour être accessible sur le net, on utilise l adresse url du site (http://nomdusite.fr). Mais pour que des visiteurs viennent sur votre site sans connaître cette adresse il faut que le site soit référencé. - Les annuaires : il faut inscrire son site à cet annuaire et que le webmaster du site accepte votre site. Des visiteurs peuvent accéder à votre site via ces annuaires. - Les moteurs de recherche (Google, Yahoo, Msn, Bing ) : (Pour ajouter son site à l index de Google -> http://www.google.fr/addurl/ ) Référencement naturel : Si votre site est accepté il apparaîtra dans les pages de recherche en fonction des mots clés tapés. La position du site dépendra du contenu XHTML (Titres, balises : title, keywords, etc ), des Backlinks (liens vers votre site), du PageRank du site, du nombre de visite, de la durée des visites, du nombre de pages visitées Référencement payant : Vous pouvez payer le moteur de recherche pour que votre site apparaissent dans ses liens commerciaux en enchérissant sur certains mots-clés
Terminer votre site CV en vous inspirant du modèle du site ressource (fichiers XHTML et CSS). Demander si besoin d aide! A la fin du TD : - Si tout est terminé, demander à faire enregistrer votre travail sur clé usb - Si ce n est pas terminé, conserver vos fichiers pour terminer votre travail et envoyer les fichiers XHTML, CSS et images de votre site à jleu10@free.fr au plus tard le 27 novembre 2009!
SITE RESSOURCE : http://jleu10.free.fr Fichiers à copier ou télécharger pour les TD Code XHTML minimum Photo du CV Image W3C Documents TD1 sur le XHTML "Cours" TD XHTML Les balises XHTML TD XHTML (version pdf) Correction des blocs pour le CV Documents TD2 sur le CSS et son site sur le web "Cours" TD CSS et son site sur le web Les balises CSS Logiciels Le navigateur Firefox L'éditeur de texte Notepad Pour aller plus loin Ulitiser Notepad++ Héberger un site perso avec voila.fr Firefox et Web developer Firefox et FireFTP Un éditeur de contenu (CMS) Joomla