INITIATION HTML et CSS 3
|
|
|
- Eugénie Truchon
- il y a 8 ans
- Total affichages :
Transcription
1 INITIATION HTML et CSS 3 Stéphane Malachane. 1
2 Structure de base d un page HTML <!DOCTYPE html> <html> <head> <meta charset="utf 8" /> <title>titre</title> </head> <body> </body> </html> Ordre des balises Le doctype: <!DOCTYPE html> Le doctype est indispensable. C est la ligne qui indique que c est une page HTML. Si vous voyez une ligne Doctype courte du style <!DOCTYPE html>, cela signifie que la page est codé en HTML 5, soit la dernière version du langage. La balise <HTML> et </HTML> C est la balise principale du code.elle englobe tout le contenu de la page. Elle est constitué, comme toute balise HTML, d une balise d ouverture et de fermeture, soit <HTML> pour l ouverture, et </HTML> pour la fermeture. Len tête <Head> et le Corp <Body> Une page Web est constué de deux parties. L entête qui regroupe le titre, des infos sur l encodage, les balises de reférencement <meta>. Elles ne sont pas visibles sur la page mais sont importantes pour le referencement, la compatibilité des navigateurs...etc Le Corp <Body>. C est la partie principale de la page.tout ce qui est ecrit ici sera affiché sur la page. C est ici que va se passer la majeure partie du travail. Cependant, nous allons pour commencer nous interesser à l entête. L encodage (charset) Stéphane Malachane. 2
3 <meta charset= UTF 8 /> Cette balise indique l encodage des caractère de votre page HTML. Il s agit de la langue utilisé. Latine, Caractères accentués, Chinois ou japonnais...etc Il ya plusieurs type d encodage éxistant, cependant, le plus utilisé est L UTF 8. Cette methode regroupe toutes les langues et idéogrammes connues. Le titre Il est cerné par la balise <title> et s affichera en l onglet de votre navigateur Les commentaires. Vous pouvez inserer des commentaires à votre code, très utiles pour vous rappeler comment fonctionne votre page. </ Ceci est un commentaire > Voir son code sur une page. A noter que tout le monde peut voir vos commentaires ainsi que votre code HTML. Celui ci n est pas protégé contrairement à d autres languages clients tels que le Java ou l Actionscript. Pour voir le code HTML, allez sur n importe quel site puis faites un clic droit sur la page et voir le code source de la page ( à noter que cette manipulation cela peut différer selon les navigateurs. Le Code HTML reste donc public. N y mettez pas des informations sensibles tels que mots de passe dans les commentaires. Chapitre 3. Organiser ses informations textes. Nous allons voir dans ce chapitre les balises de mises en page principales en HTML a savoir: Rediger des paragraphes Organiser sa page avec des titres Donner plus ou moins d importance au contenu grace au balises de titres. Organiser ses informations sous formes de listes. Les paragraphes. Lorsque l on redige un code HTML, on le fait sous forme de paragraphes. Stéphane Malachane. 3
4 <p> Bonjour et bienvenue, comment allez vous?></p> Vous constatez notre structure habituelle de début et de fin de balise soit :<> et </>. La balise paragraphe est symbolisée par <p> </p> Comme indiqué précédement, nos balises de contenus doivent être placées dans le <body> et </body> Sauter une ligne En HTML, si vous appuyez sur entrée, cela ne saute pas de ligne comme dans un traitement de texte. Pour sauter une ligne, vous devez donc utiliser la balise <br> et </br>, et ce, l interieur du paragraphe. Exemple final : <!DOCTYPE html> <html> <head> <meta charset="utf 8" /> <title>paragraphes et saut de ligne</title> </head> <body> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> </body> </html> Les titres Votre site finira par contenir de nombreux paragraphes. Afin de structurer l information, nous allons y mettre des titres. des balises sont prévus a cet effets: vous pouvez mettre jusqu a 6 styles de titres, du plus importants (donc plus gros) au moins important. <h1> </h1> Titres principaux. C est souvent le titre du site <h2> </h2> Titres secondaires, en général pour les chapitres <h3> </h3> Sous titres des chapitres <h4> </h4> Titres un peu moins importants <h5> </h5> etc <h6> </h6> etc Attention: Ne choisissez pas votre titre par rapport a la taille de celui ci. Si la typographie du titre Stéphane Malachane. 4
5 h1 vous semble trop grosses, nous reduirons la taille plus tard dans la feuille de style. Avant tout, respectez la hiérarchie de titres en fonction de la hierarchisation de vos informations. Exemple d utilisation: <!DOCTYPE html> <html> <head> <meta charset="utf 8" /> <title>paragraphes et saut de ligne</title> </head> <body> <h1>bienvenue sur mon site!</h1> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> <h2>des infos pertinentes</h2> <p>vous trouverez des informations concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez aiguillées </p> </body> </html> Nota: Nous travaillons uniquement sur la partie organisation de l information. Pour tout ce qui est mise en forme, nousble erons lorsque nous apprendrons le CSS plus loin. h1 ne veut pas dire : titre en new roman, taille 24 mais titre très important La mise en valeur. Par defaut, les balises HTML suivantes servent a mettre en valeur les textes en les mettant en gras, en les surlignants ou en les mettant en italique. Cependant, il faut bien retenir que la mise en forme du texte se fait en CSS. Ces balises peuvent donc êtres paramétrées dans les CSS. Les valeurs suivantes sont donc par defaut, au cas ou vous n avez pas de feuille de style concernant la modification des balises. 1) Texte en Italique pour mettre un peu en valeur votre texte, utlisez les balises <em> </em> <body> <h1>bienvenue sur mon site!</h1> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> Stéphane Malachane. 5
6 <h2>des infos pertinentes</h2> <p>vous trouverez des informations concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez <em>aiguillées</em></p> </body>... Comme vous pouvez le constater, <em> </em> met le contenu en italique. Mettre en gras. 2) Texte en gras <body> <h1>bienvenue sur mon site!</h1> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> <h2>des infos pertinentes</h2> <p>vous trouverez des <strong>informations</strong> concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez <em>aiguillées</em></p> </body> 3)Surligner son texte. La balise <mark> </mark> permet de faire ressortir le texte. <body> <h1>bienvenue sur mon site!</h1> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à <mark>organiser</mark> mon texte à l aide des sauts de lignes et paragraphes</p> <h2>des infos pertinentes</h2> <p>vous trouverez des <strong>informations</strong> concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez <em>aiguillées</em></p> Les listes </body> 1)Liste non ordonnées Stéphane Malachane. 6
7 <ul> </ul> et <li> </li> Exemple: <ul> <li>a propos</li> <li>réalisations</li> <li>contact</li> </ul> <ul> Détermine que nous alons créer une liste et entoure donc toute la liste <li> Détermine un élement de la liste avec une puce 2)Liste ordonée <ol> </ol> <li>faire des courses</li> <li>aller chercher les enfants</li> <li>préparer le repas</li> Pour résumer paragraphes <p> et </p> Titres par ordre importance <h1><h2>... On peut mettre certains termes en valeurs <strong> <em> <mark> On peut créer des listes ordonées ou pas. Pour créer une liste, balise <ul> puis les élements composants la liste avec <li> Chapitre 4. Creer des liens 4 1)Creer des liens Une page HTML est cosntiué de liens vers d autres pages. Code pour créer un lien <a href= >Mon joli site</a> Placer le lien dans un paragraphe Stéphane Malachane. 7
8 <p>bonjour, voici le liens vers mon site <a href= >Mon joli site</a></p> 4 2)Liens relatifs et liens absolus On parle de liens relatifs et absolus. les liens ci dessous sont absolus, cest à dire qu il vont pointer a l exterieur de notre site, avec l adresse complète, soit Les liens relatifs pointe au contraire sur une page de notre propre site, et sont relatif à la page sur laquelle on se situe. exemple, si vous avez 2 pages dans un même dossier et que vous etes sur la page 1, nous allons mettre comme code pour aller sur la page 2 simplement: <a href= page2.html >Aller vers la page 2</a> Deux pages de notre site situées dans des dossiers différents Si la page 2 se trouve dans le dossier contenu et le page 1 reste a l exterieur du dossier. <a href= contenu/page2.html > Si au contraire la page 1 se trouve dans le dossier contenu et la page 2 se situe à l éxterieure <a href=../page2.html > Résumé en image (d après Mathieu Nébra,site du zéro) 4 3)Lien vers une ancre. On peut placer un lien de redirection vers un endroit peécis de la page.(ex: un chapitre) Pour cela, nous allons utiliser une ancre. la balise est <id> Stéphane Malachane. 8
9 exemple: <h2 id= mon_ancre >Chapitre 2</h2> et le lien s y référant: <a href #mon_ancre >Aller vers le chapitre 2</a> 4 3 2)Aller vers une ancre situé vers une autre page. <a href= page2.html#mon_ancre >Aller vers le chapitre 2 de la page 2</a> 4 4) Créer des infos bulles sur vos liens Nous allons utiliser l attribut facultatif title <a href= page2.html#mon_ancre title= Attention, page explosive! >Aller a la page 2</a> 4 5)Liens qui ouvre une nouvelle fenêtre. on n y ajoutera target= _blank exemple <a href= page2.html#mon_ancre target= _blank title= Attention, page explosive! >Aller a la page 2(nouvelle fenêtre)</a> 4 6)Lien pour envoyer un e mail Nous allons y ajouter l attribut mailto: <a href= mailto:monmail@monhebergeur.com >M écrire</a> 4 7)Lien pour télécharger un fichier <a href= monfichier.zip >Télécharger le fichier</a> <a href= monfichier.pdf >Lire le PDF (acrobat nécéssaire)</a> Pour résumer Creer un lien : Balise <a> et </a> avec l attribut href pour indiquer l adresse de la page cible. Exemple : <a href site perso</a> Lien vers une autre page de son site Stéphane Malachane. 9
10 <a href ma_page_2.html >Ma page 2</a> Lien avec des ancres <a href ma_page_2.html#mon_ancre >Ma page 2</a> Il faut creer son ancre avec l attribut id pour marquer l endroit de la page <p id= mon_ancre >Chapitre 2</p> Chapitre 5. Les images Les différents formats d images Les diiférents formatis d images. Le jpeg : Il s agit du format d images le plus couramment utiliser. Il compresse avec un bon ratio qualité poids. Ne gére pas la transparence. idéal pour les photos. Le PNG : C est un format d image qui gère la transparence. Utilisé pour les survols de menu par exemple. Il est de meilleure qualité que le JPG en altérant pas la qualité de l image. Le GIF: C est un format obsolète mais qui est cependant utilisé pour créer de petites animations(gif animé) Les autres formats (ex: BMP) sont à banir. Veillez à bien convertir ces images en JPG et PNG selon vos besoins Les noms des images: comme pour les pages, pas d éspaces, ni caractères accentués(vous pouvez les remplacer par des _) Inserer une image: balise <img> A noter qu il s agit d une balise dite orpheline comme <br/> c est a dire que l on a pas besoin de fermer la balise la balise doit être comôsé de deux attributs obligatoires: Stéphane Malachane. 10
11 src:indique le lien de l image. ex src= mon_image.jpg alt:cela signifie :texte alternatif. Il est conseillé de mettre un texte alternatif au cas ou votre image ne peut pas être téléchargé (ex: problème de connexion client, problème de serveur). L attrbut alt sert aussi pour les non voyants qui ne peuvent malheureusement pas voir l image. Cela aide aussi les robots de moteur de recherche a identifier votre image. pour une fleur, on mettrai alt= une fleur Les images doivent obligatoirement se trouver l interieur d un paragraphe. <p> voici une photo de la ville de Grenoble<br /> <img src= images/grenoble.jpg alt= grenoble /> </p> Ajouter une info bulle. Comme pour les liens, il est possible d en ajouter. <p> voici une photo de la ville de Grenoble<br /> <img src= images/grenoble.jpg alt= grenoble alt= Bienvenue à grenoble, c est beau la nuit /> </p> Miniature cliquable. Si votre image est très grosse, vous pouvez afficher une miniature qui, au clic de celle ci, affichera l image d origine dans une nouvelle fenêtre. <p> voici une photo de la ville de Grenoble<br /> <a href=images/grenoble.jpg > <img src= images/grenoble_vignette.jpg alt= grenoble title= cliquez pour agrandir /></a> </p> Les figures Les figures sont des éléments qui servent à enrichir le texte. Elles sont du type: images code source citations etc Tout ce qui vient ilustrer le texte est une figure. Stéphane Malachane. 11
12 Création d une figure image En HTML5, vous disposons de la balise <figure> <figure> <img src= images/grenoble.jpg alt= Ville de grenoble /> </figure> Une figure est bien souvent accompagnée d une légende.utilisez pour cela la balise <figcaption></figcaption> <figure> <img src= images/grenoble.jpg alt= Ville de grenoble /> <figcaption>grenoble de nuit</figcaption> </figure> Le role des figures La balise <figure> a avant tout un rôle sémantique.elle indique à l ordinateur que l image a du sens et qu elle sert à la compréhention du texte. Elle peut le cas échéant comporter plusieurs images. Exemple: <figure> <img src= images/internet_explorer.png alt= Logo IE />* <img src= images/firefox.png alt= Logo Mozilla Firefox /> <img src= images/chrome.png alt= Logo Google Chrome /> <figcaption>voici le logo des diférents navigateurs éxistants</figcaption> </figure> Pour résumer Formats d images adaptées aux web JPG pour les photos PNG pour les illustrations et la gestion de la transparence. GIF pour les animations Insertion d image: balise <IMG> avec les attributs: src(nom de l image) et alt(info bulle) Stéphane Malachane. 12
13 Pour illustrer le texte, mieux vaut le placer dans une balise <figure>. La balise <figcaption> permet d écrire une légende à l image. Partie II Stéphane Malachane. 13
14 Mise en forme avec CSS Stéphane Malachane. 14
15 Chapitre 6) A quoi sert le CSS? Le CSS (cascade style sheet) ou feuille de style en cascade permet de faire la mise en page de votre site. C est donc lui qui va définir la couleur du texte, la taille des typos, le menu a gauche ou à droite,que l en tête soit callé en haut, les bordures des images...etc Evolution des CSS. Le CSS est apparu dans les année Nous sommes actuellement à la version 3 et nous allons par conséquet nous interesser à cette même version. Prise en charge des navigateurs Les Css sont intéreprétes par les navigateurs. C est eux qui vont reconnaitre qu une balise type arrondi va effectivement dessiner un arrondi. Malheureusement, les navigateurs sont incompatible entres eux et aucun navigateurs ne connait parfaitement toutes les fonctionnalitées des CSS. Plus un navigateur est vieux, moins il pourra interpretter le CSS3. Vous pouvez verifier les tables de compatibilité pour CSS sur Ecriture des CSS Nous pouvons ecrire un CSS à trois endroits différents. Dans un fichier.css(recommandé) Dans l entête <head> du fichier html Directement dans les balises du HTML via l attribut style(déconseillé) Nous allons voir uniquement la premèire méthode. Partons du fichier HTML suivant <!DOCTYPE html> <html> <head> <meta charset="utf 8" /> <link rel= stylesheet href= style.css /> <title>premiers test en CSS</title> </head> <body> <h1>bienvenue sur mon site!</h1> <p>bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> Stéphane Malachane. 15
16 <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> <h2>des infos pertinentes</h2> <p>vous trouverez des informations concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez <em>aiguillées</em></p> </body> </html> Notez la ligne : <link rel= stylesheet href= style.css /> C est elle qui sert à faire votre liaison vers le fichier CSS Enregistrer votre fichier sous le titre exemple.html Maintenant, nous allons creer avec Notepad++ le fichier css. Faites nouveau fichier sous notepad et collez y le code suivant: P color:blue; Pour activer les couleurs dans notepad, allez dans menus, Language, C, CSS Enregistrer votre fichier au même endroit que la page HTML, donnez lui le nom style.css Votre dans les paragraphes est écrit en bleu. Appliquer un style: selectionner une balise P > Nom de la balise >Début de la balise P color:blue; color est une propriété >Fin de la balise P Les noms des balises: ils servent à indiquer dans quelle balise html le style va s appliquer. Pour changer la couleur des paragraphes, on utilise P par exemple Les propriétés: Il s agit de l effet de style. Exemple: la propriété color va appliquer une couleur Les valeurs:il s agit de la valeur daffecté a la propriéte. Exemple: blue pour color, 16 pour font size...etc Stéphane Malachane. 16
17 Structure d une CSS balise1 propriété1: valeur1; propriété2: valeur2; balise2 propriété1: valeur1; propriété2: valeur2; propriété3: valeur3; etc Amusez vous à changer de balise. Ci dessous, c est le titre <h1> qui sera en bleu h1 color:blue; Appliquer un style à plusieurs balises. h1 P color:blue; color:blue; Il existe un moyen pour condenser les deux. Ci dessous: h1, P color:blue; Vous pouvez indiquer autant de balises que vous voulez Stéphane Malachane. 17
18 Les commentaires dans les CSS. os sont delimitées par /* (début de commentaires) et */ (fin de commentaires) /* Voici mon commentaire On peut écrire sur plusieurs lignes */ Appliquer un style Jusqu a présent, on à vu uniquement comment appliquer un style sur une balise P ou h1, à savoir une balise délimité par l HTML. Mais comment fait t on si on veut mettre une partie de paragraphe en bleu et l autre en gras? Nous avons 2 attributs spéciaux qui fonctionne quasiment de la même manière. Interessons nous à class. <h1 class= ></h1> <p class= ></p> <img class= /> Remplissez les valeurs suivantes. Sur le fichier HTML <!DOCTYPE html> <html> <head> <meta charset="utf 8" /> <link rel= stylesheet href= style.css /> <title>premiers test en CSS</title> </head> <body> <h1>bienvenue sur mon site!</h1> <p class= intro >Bonjour et bienvenue sur mon site.<br />Ceci est mon premier essai.</p> <p>j apprends à organiser mon texte à l aide des sauts de lignes et paragraphes</p> <h2>des infos pertinentes</h2> <p>vous trouverez des informations concernant notre structure</p> <h2>des mises en relations avec des interlocuteurs expérimentés</h2> <p>vous serez <em>aiguillées</em></p> </body> </html> Stéphane Malachane. 18
19 Sur le fichier CSS.intro color:blue: Résultat: seul votre paragraphe intro sera écrit en bleu. L attribut id Il fonctionne de la même manière que class mais ne peut être utlisé qu une fois dans le code.en pratique, nous l utiliserons qu une fois comme pour le logo. <img src= images/logo.png alt= Logo du site id= logo /> Lorsque vous définissez l id dans un CSS, il vous faut mettre un # devant. #logo /*indiquez les propriétés CSS*/ Les balises universelles Il arrivera que vous ayez besoin d appliquer une class ou un id à certains mots qui, a l origine, ne soient pas entourés de balises. Si je veut modifier uniquement le mot bienvenu le paragraphe suivant: <p>bonjour et bienvenue<p> Je suis coincé. pour cela, il existe deux balises qui servent uniquement à appliquer des styles. Elles n ont aucun effets sur le html en dehors de cela. Il s agit de deux balise dites universelles. <span></span> est une balise de ttype inline,c est à dire une balise que l on lace au sen d un paragraphe texte, pour selectionner certains mots uniquement, tout comme les balises <strong> et <em> <div></div> sont des balises de type block, qui entoure le texte. Les balises <p>,<h1> sont de la même famille. elles créent un nouveau bloc dans la page est produisent donc obligatoirmet un retour à la ligne. Stéphane Malachane. 19
20 Elles est fréquement utlisé dans la construction du design. Dreamweaver par exemple, la considère comme un calque et elle peut être considéré comme telle. Nous allons pour le moment uitliser la balise <span>.on la met autour de bienvenue et on lui ajoute une classe dans le css. <p>bonjour et <span class= salut >bienvenue</span><p> CSS.salut color:blue; Les selecteurs avancés En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme.on utilise pour cela des selecteurs. exemple: P ou.class Il existe des manieres d être plus éfficace dans certains cas. Selecteurs avancées *: sélécteur universel * Stéphane Malachane. 20
21 Selectionne toute les balises A B : balise contenue dans une autre h3 em selestionne toutes les balises <em> contenus dans une balise <h3> Exemple <h3>titre <em>avec de l importance</em></h3> A+B : Une balise qui suit une autre h3 + p Selectionne la première balise <p> situé après un titre <h3> Exemple: <h3>mon titre</h3> <p>paragraphe</p> A [attribut]: Une balise qui possède un attribut. a[title] Selectionne tous les liens <a> qui possède un attribut title exemple: <a href= title= Site sepiafx > Il existe d autres selecteurs mais nous avons vus les plus courants. Nous en découvrions Stéphane Malachane. 21
22 cependant d autres par la suite. Pour resumer Attention à al compatibilité entre navigateurs On peut écrire le code CSS a plusieurs endroits différents Structure d un CSS balise1 propriété1: valeur1; propriété2: valeur2; Nous pouvons selectionner plusieurs balises simultanément. h1, em Ou une balise imbriqué dans une autre h1 em Noter la différence entre la virgule et l absence de virgule. Il existe des balises spécifiques,auxquelles ont à donnée une nom, <class> et <id>(.nomclass) et (#nomid) Chapitre 7. Le formatage du texte La taille Taille absolu: c est une taille defini en pixel. font size: 16px; ex: P font size: 14px; /*paragraphe de 14 pixels/* Stéphane Malachane. 22
23 La taille relative. C est une méthide recomandé car elle s adapte aux preferences de l internaute.elle est relative au paramétrages du navigateur. xx small :minuscule x small: très petit small: petit medium:moyen large:grand x large: très grand xx large ex: P font size:small; Il n y a que 7 tailles possible. Vous pouvez cependant indiquer la taille en em soit: P font size=0.8 em; La police de caractère Modifier la police balise font family: police1,police2,police3; Pourquoi plusieurs polices?pour qu au cas ou l internaute ne dispose pas de la police1, le navigateur tentera la police 2 et ainsi de suite. Polices les plus courantes: Arial Stéphane Malachane. 23
24 Arial black Comic sans MS Courier New Georgia Impact Times New roman Trebuchet MS Verdana Sites internet de police: Dafont.com fontsquirrel.com formats de polices:.svg: SVG font, police pour les Iphone, Ipad.ttf:True type. fonctionne sur ie9 et tous les autres navigateurs.woff: nouveau format Définir une nouvelle face font family : Nouvellepolice ; src: url( Emplacement_de_la_police.ttf ) Italique, gras, soulignée la balise font style em font style:normal; h2 font style:italic; Gras font weight:bold; Stéphane Malachane. 24
25 soulignement underline:: souligné line through : barré overline : ligne au dessus blink : clignotant. (Ne fonctionne pas sous ie et chrome none : normal(par defaut L alignement le CSS permets de faire 4 alignements possibles. on utilise la propriété text align et on indique l alignement. left : a gauche (reglage par defaut) center : le texte sera centré right : aligné a droite justify : le texte sera justifié. il prendra toute la largeur possible sans laisser d espace blanc a la fin de lignes (comme dans les journaux) exemple P text align: justify; L alignement fonctionne que sur les balises de type bloc (<p>, <div>, <h1><h2>)... C est donc le paragraphe entier que l on aligne. Les flottants. Pour résumer Font size : taille de typo Font family : style de face :chargement d une polie de votre choix Propriétés de mise en forme : font syle,font weight Alignement du texte avec text align Chapitre 8 Les couleurs et le fond Stéphane Malachane. 25
26 La couleur du texte. On utilise la propriété color. text color=couleur Il ya deux methode pour choisir la couleur,du texte. La première consiste a taper la couleur par son nom, cependant, il n existe que 16 couleurs différentes. Exemple: h1 text color:green; La notation héxadecimale. Cest la deuxième methode. Elle permet d avoir 16 millions de couleur et est donc très utilisé. Il faut cependant prendre un logiciel de dessin pour avoir la conversion hexadecimale de la couleur. Exemple photoshop. Lorsque vous avez l information en hexadécimale, faites P color : #60abae; La méthode RGB Nous pouvons appliquer la couleur sous forme Rouge vert bleu. Prenez Paint Allez dans Edit color(menu à droite) puis choisissez une couleur. prenez les infos RVB dans la palette.(3 chiffres de 0 à 255) ex: Appliquez ce code: P Stéphane Malachane. 26
27 color : rgb(255,60,55); La couleur de fond pour le fond, on utilisera la propriété background color background color : black; Le CSS et l héritage Si vous appliquez un style à une balise,toutes les balises à l interieur heriteront du style appliqué. Image de fond Appliquer une image de fond: body background image: url( fond.png ); L adresse de l image peut être absolue ou relative Chapitre 9 :Gestion des apparences Stéphane Malachane. 27
28 Nous allons voir ci dessous comment changer la couleur des liens. Au survol a:hover on peut utiliser l attribut hover sur un paragraphe p:hover Au clic et lors de la selection :active : au clic exemple a:active /*lorsque le visiteur clique sur le lien*/ background color : #FFCC66; :focus Lorsque la personne à cliqué sur le lien, celui ci reste selectionnée a:focus /*quand le visiteur selectionne le lien*/ Lorsque le lien à deja été consulté :visited a:visited /* Quand l internaute à déja visité le lien*/ Stéphane Malachane. 28
29 Partie III Stéphane Malachane. 29
30 * Mise en page du site Chapitre 10 Les balises HTML 5 Stéphane Malachane. 30
31 Nous allons dans ce chapitre nous interesser aux balises structurantes d un site HTML ces balises sont apparus durant l html 5. <header> ; l en tête <footer> : pied de page <nav>: principaux liens de navigation <section> bloc de pages <aside> informations complémentaires <article> un article indépendant Ces balises, tableau ci dessous, ne servent cependant pas encore a la mise en forme car les navigateurs l interprettent pas encore intelligement. Cela changera dans un future proche. cependant, on utilise deja assez régulierement les balises <head> et <footer> Chapitre 11 Stéphane Malachane. 31
32 Le positionnement en CSS Voici enfin le dernier chapitre qui permettra de mettre en forme votre site. La théorie que nous allons voir ici va s averer indispensable pour la construction de votre site. La balise float Cette propriété est utlisé souvent pour faire de la mise en page. Nous allons partir d un code HTML structuré avec les balises HTML 5 et y placer le menu à gauche code HTML <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>zozor-lesiteweb</title> </head> <body> <header> <h1>zozor</h1> <h2>carnetsdevoyage</h2> </header> <nav> <ul> <li><ahref="#">accueil</a></li> <li><ahref="#">blog</a></li> <li><ahref="#">cv</a></li> </ul> </nav> <section> <aside> <h1>àproposdel'auteur</h1> <p>c'estmoi,zozor!jesuisnéun23novembre2005.</p> </aside> <article> <h1>jesuisungrandvoyageur</h1> <p>blablablabla(textedel'article)</p> </article> </section> Stéphane Malachane. 32
33 </body> </html> Style CSS <footer> <p>copyrightzozor-tousdroitsréservés<br/> <ahref="#">mecontacter!</a></p> </footer> nav float:left; width : 150px; border : 1px solid black; section margin left : 170px; border : 1px solid blue; Transformez vos éléments avec display Il existe un propriété CSS très puissante qui permet de transformer n importe quel élément de votre page d un type vers un autre. Avec cette propriété, je peut par exemple imposer mes liens (a la base de type inline souligné ) d apparaitre sous forme de bloc Exemple : a display: block; En conséquence, les liens vont se positionner les uns au dessus des autres(comme des blocs) et nous allons pouvoir modifier leurs dimensions Voici les principales valeurs que peut prendre display en CSS3 valeur exemple Description Stéphane Malachane. 33
34 inline <a><en><span> Elements d une ligne, se placent les uns à coté des autres block <p><div><section> Elements en forme de bloc. Se placent les uns en dessous des autres et peuvent être redimentionnées inline block <select><input> Elements positionées les uns à coté des autres mais qui peuvent etre redimentionnées none <head> Elements non affichées A propos d inline block Ce type d elements est une combinaison d inline et de blocs. C est les avantages des deux. Les élements s affichent côte à côte et peuvent être redimentionnés Peu de balises sont affichées comme cela par defaut, cependant, avec la propriété display, nous allons pouvoir transformer d autres balises en inline block ce qui fva nous aider à réaliser le design. Le positionnement inline block Les manipulations que demande le positionnement inline block se revèlent parfois un peu complexe. Nous allons transformer en inline block les deux éléments que nous voulons placer cote à côte : le menu navigation et la section du centre de la page nav display : inline block; width: 150px; border: 1px solid black; section display : inline block; border: 1px solid blue ; Résultat : les éléments sont alignées par le bas. Cela est du au fait que l alignement inline block se fait par le bas. heureusement, le fait d avoir transformé les éléments en inline block nous permet d acceder à Stéphane Malachane. 34
35 une nouvelle propriété : vertical align voici quelques unes des valeurs baseline : aligne la base de l élément par rapport a son parent (par defaut) top: aligne par le haut middle: centrage vertical bottom: aligne en bas valeur en px ou % : aligne à une certaine distance de la ligne de base. Il nous reste plus qu a aligner nos éléments vers le haut nav display : inline block; width: 150px; border: 1px solid black; vertical align : top; section display : inline block; border: 1px solid blue ; vertical align : top; Le tour est joué. inline block et la compatibilité Internet explorer il est compatible a partir de la version 8 pour les anciennes versions, cela fonctionne uniquement sur les éléments qui étaient inline à la base Pour regler le problème, on peut créer une nouvelle feuille de style et l on va la lancer grace au commentaire conditionnel. <!DOCTYPEhtml> <html> <head> Stéphane Malachane. 35
36 <metacharset="utf-8"/> <linkrel= stylesheet href= style.css /> <!--[iflteie7]> <linkrel= stylesheet href= style_ie.css /> <![endif]--> <title>zozor-lesiteweb</title> </head> Dans style_ie.css, appliquez le code suivant: nav, section display:inline; zoom: 1; C est reglé! Les positionnements absolu, fixe et relatif Le positionnement absolu : il nous permet de placer un élément n importe ou sur la page Le positionnement fixe : identique au positionnement absolu, mais cette fois, l élément reste toujours visible même si on descends plus bas dans la page. Le positionnement relatif : permet de décaller l émément par rapport a sa position normale Les valeurs en CSS sont donc : absolute fixed relative Le positionnement absolu element position : absolute; left : par rapport a la gauche de la page right : par rapport a la droite de la page top : par rapport au haut de la page bottom : par rapport au bas de la page On peut leur donner aussi des valeurs en pixels, comme 14px, ou en pourcentage, comme 50 % element position : absolute; Stéphane Malachane. 36
37 right: 0px bottom: 0px; Cela signifie que le bloc sera positionné tout en bas à droite (0 pixels par rapport a la droite de la page, 0 par rapport au bas) Les elements absolus sont placés au dessus le reste des éléments de la page.si vous les placer au même endropis, iols peuvent se chevaucher. Vous pouvez utiliser la propriété z index pour indiquer quel élément doit etre au dessus des autres. Exemple: z index: 1; z index: 2;... L element ayant le z index le plus élévée sera placé au dessus des autres. Le positionnement fixe. Le principe est similaire au positionnement absolu, sauf que celui ci reste fixe même si on descends en bas de la page. element position: fixed; right : 0px bottom: 0px; Le positionnement relatif. Le positionnement relatif est plus délicat. il sert a obtenir des ajustements par rapport a la position initiale. Exemple: strong background color: red; /*Fond rouge*/ color: yellow; /* Texte de couleur jaune*/ Cette fois, le schéma montré tout a l heure ne fonctionne plus. Le point d origine ayant changé. Pour re illustrer cela: strong background color: red; /*Fond rouge*/ Stéphane Malachane. 37
38 color: yellow; /* Texte de couleur jaune*/ position : relative; left: 55px; top: 10px; Le texte entre les balises strong est décalé par rapport a sa position initiale. Pour résumer Un élément A positionné en absolu à l interieur d un autre élément B (lui même positionnée en absolu, fixe ou relatif) se positionnera par rapport a l élément B et non par rapport au coin haut gauche de la page Plusieurs techniques de positionnement: Le positionnement flottant (float) est l un des plus utilisé a l heure actuelle. Cependant, il convient d éviter cette technique. Le positionnement inline block consiste à affecter un type inline block grace a la propriété display. Ils se comporterons comme des inline (positionnement de gauche à droite) mais pourront être redimentionnées Le positionnement absolu permet de placer un élément ou on veut sur la page au pixel pres. Le positionnement fixe est identique, sauf que l élement reste visible si on descends plus bas dans la page. Le positionnement relatif permet de décaller un bloc par rapport a sa position noirmale. Création d un site pas à pas Dans le TP suivant, modifiez le code afin d obtenir un site selon vos souhaits. On respectera une structure identique. <!DOCTYPEhtml> <html> Stéphane Malachane. 38
39 <head> <metacharset="utf-8"/> <linkrel="stylesheet"href="style.css"/> <title>zozor-carnetsdevoyage</title> </head> <body> <divid="bloc_page"> <header> <divid="titre_principal"> <imgsrc="images/zozor_logo.png"alt="logodezozor" id="logo"/> <h1>zozor</h1> <h2>carnetsdevoyage</h2> </div> <nav> <ul> <li><ahref="#">accueil</a></li> <li><ahref="#">blog</a></li> <li><ahref="#">cv</a></li> <li><ahref="#">contact</a></li> </ul> </nav> </header> <divid="banniere_image"> <divid="banniere_description"> RetoursurmesvacancesauxÉtats-Unis... <ahref="#"class="bouton_rouge">voirl'article<img src="images/flecheblanchedroite.png"alt=""/></a> </div> </div> <section> <article> <h1><imgsrc="images/ico_epingle.png"alt="catégorie voyage"class="ico_categorie"/>jesuisungrandvoyageur</h1> <p>loremipsumdolorsitamet...</p> <p>vivamussedliberonecmaurispulvinarfacilisisutnon sem...</p> <p>phasellusligulamassa,congueacvulputatenon, dignissimataugue...</p> </article> <aside> <h1>àproposdel'auteur</h1> <imgsrc="images/bulle.png"alt=""id="fleche_bulle"/> <pid="photo_zozor"><imgsrc="images/zozor_classe.png" Stéphane Malachane. 39
40 alt="photodezozor"/></p> <p>laisse-moiletempsdemeprésenter:jem'appelle Zozor,jesuisnéun23novembre2005.</p> <p>bienmaigre,n'est-cepas?c'estpourquoi, aujourd'hui,j'aidécidéd'écriremabiographie(ouzbiographie,commevous voulez!)afinqueleszérossachentquijesuisréellement.</p> <p><imgsrc="images/facebook.png"alt="facebook"/><img src="images/twitter.png"alt="twitter"/><imgsrc="images/vimeo.png" alt="vimeo"/><imgsrc="images/flickr.png"alt="flickr"/><img src="images/rss.png"alt="rss"/></p> </aside> </section> <footer> <divid="tweet"> <h1>monderniertweet</h1> <p>hiihaaaaaan!</p> <p>le12maià23h12</p> </div> <divid="mes_photos"> <h1>mesphotos</h1> <p><imgsrc="images/photo1.jpg"alt="photographie"/><img src="images/photo2.jpg"alt="photographie"/><imgsrc="images/photo3.jpg" alt="photographie"/><imgsrc="images/photo4.jpg"alt="photographie"/></p> </div> <divid="mes_amis"> <h1>mesamis</h1> <ul> <li><ahref="#">pupilelapin</a></li> <li><ahref="#">mrbaobab</a></li> <li><ahref="#">kaiwaii</a></li> <li><ahref="#">perceval.eu</a></li> </ul> <ul> <li><ahref="#">belette</a></li> <li><ahref="#">leconcombremasqué</a></li> <li><ahref="#">ptitprince</a></li> <li><ahref="#">mrfan</a></li> </ul> </div> </footer> </div> </body> </html> Stéphane Malachane. 40
41 Stéphane Malachane. 41
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Introduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Création de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Un mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
Prise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
INTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Optimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
Spétechs Mobile. Octobre 2013
Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling
Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4
Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
COMMENCER AVEC VUE. Chapitre 1
Chapitre 1 COMMENCER AVEC VUE Traduction en français du premier chapitre du manuel d'utilisation du logiciel VUE. Traduit de l'américain par Bernard Aubanel. CRÉER UNE NOUVELLE CARTE Pour ouvrir VUE: 1.
COMMENT PUBLIER SUR ARIANE?
COMMENT PUBLIER SUR ARIANE? Rédacteur : Dr Michel Arnould 1. SOMMAIRE 1.Sommaire...1 2.Connexion...1 3.Gestion des pages du wiki...1 Ajouter une nouvelle page...1 Supprimer, renommer, protéger une page...1
Soyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
creer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7
Création d une SIGNATURE ANIMÉE avec PHOTOFILTRE 7 L animation est obtenue par défilement des images décomposant le mouvement de traçage de la signature. Les étapes successives seront : 1. Choix de la
Création d un site web avec Nvu
Création d un site web avec Nvu sources principales d'informations: http://www.framasoft.net/article2656.html http://info.sio2.be/nvu/index.php http://www.anseladams.com Pensez à sauvegarder fréquemment
CREERSONSITEPRO.COM. avec la plateforme Jimdo
CREERSONSITEPRO.COM avec la plateforme Jimdo SOMMAIRE Qu est ce que Jimdo?...3 S inscrire sur Jimdo...4 Mes informations de connexion Jimdo...5 Organiser les pages de son site...6 Modifier le texte d une
SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5
SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5 4.1 Ajouter une carte 5 4.1.1 Détails : nom, taille, marqueur 5 4.1.2 Ajout d un marqueur
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Stage «Créer et animer un site Web en équipe»
Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
GUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
Ecrire pour le web. Rédiger : simple, concis, structuré. Faire (plus) court. L essentiel d abord. Alléger le style. Varier les types de contenus
Ecrire pour le web Un texte web de lecture aisée pour l internaute, l est aussi pour les moteurs de recherche ; l écriture peut ainsi être mise au service du référencement naturel. De façon complémentaire,
Dans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale
Création WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
Troisième projet Scribus
Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Création d un site Internet
Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter
Travaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
Atelier Formation Pages sur ipad Pages sur ipad
Pages sur ipad 1/43 Table des matières Atelier Formation Pages sur ipad Introduction à Pages 3 Créer ou ouvrir un document 3 Créer ou ouvrir un document 3 Textes et images du modèle 4 Remplacer du texte
LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
Administration du site (Back Office)
Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
CMS Modules Dynamiques - Manuel Utilisateur
CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage
Partie publique / Partie privée. Site statique site dynamique. Base de données.
Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC
Tutoriel. Votre site web en 30 minutes
Tutoriel Votre site web en 30 minutes But du tutoriel Nous allons vous présenter comment réaliser rapidement votre site avec Web Creator Pro 6 en vous basant sur l utilisation des modèles fournis avec
Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160
Sommaire Choisir son image... 2 Enregistrer son travail... 3 Créer les détails... 4 Supprimer une zone ou un détail... 6 Les commentaires... 6 Créer un lien hypertexte... 8 Appliquer un modèle... 8 Personnaliser
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
SEO On-page. Avez-vous mis toutes les chances de votre côté pour le référencement de votre site?
SEO On-page Avez-vous mis toutes les chances de votre côté pour le référencement de votre site? I. Introduction... p.2 II. Optimisation on-page vs off-page... p.3 III. Les éléments importants de vos pages...
Création de site Internet avec Jimdo
Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que
Le service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte
Initiation à linfographie
Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :
1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com
demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
Styler un document sous OpenOffice 4.0
Mars 2014 Styler un document sous OpenOffice 4.0 Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
WORDPRESS : réaliser un site web
WORDPRESS : réaliser un site web Wordpress est un système de gestion de contenu (ou CMS) libre. Il permet de créer des sites relativement complexes (blog, forum, site vitrine, site dynamique), sans qu
L espace de travail de Photoshop
L espace de travail de Photoshop 1 Au cours de cette leçon, vous apprendrez à : ouvrir les fichiers Photoshop ; sélectionner et employer certains des outils dans le panneau Outils ; définir les options
Réalisez votre propre carte de vœux Éléctronique
Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.
Utiliser le logiciel Photofiltre Sommaire
Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner
Guide d utilisation 2012
Guide d utilisation 2012 Tout ce dont vous avez besoin pour bien démarrer REACOM La performance marketing SOMMAIRE Démarrez avec reagiciel Accédez à votre console d administration 4 Gestion internet Aperçu
Table des matières A. Introduction... 4 B. Principes généraux... 5 C. Exemple de formule (à réaliser) :... 7 D. Exercice pour réaliser une facture
Excel 2007 -2- Avertissement Ce document accompagne le cours qui a été conçu spécialement pour les stagiaires des cours de Denis Belot. Le cours a été réalisé en réponse aux diverses questions posées par
Cours Excel : les bases (bases, texte)
Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé
THEME RESPONSIVE DESIGN
THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.
Créer son site internet avec Jimdo. Web business
Créer son site internet avec Jimdo Web business Créer vous-même votre site internet avec Jimdo. En quelques clics, vous pourrez créer gratuitement un site dédié à votre activité et donnez de la visibilité
Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont
I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle
Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -
UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles
L informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
REFERENCEMENT NATUREL
Optimisation du contenu Web Développement du trafic de Qualité Augmentation de vos ventes en ligne Livre Blanc 13/03/2014 INTRODUCTION Vous cherchez à améliorer votre positionnement dans Google, garder
CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9
GESTION DU LOGO 1. Comment gérer votre logo? 2 1.1. Insérer un logo 3 1.1.1. Insérer un logo dans le bandeau 3 1.1.2. Insérer un logo dans les éditions 4 1.2. Supprimer un logo 6 1.2.1. Supprimer un logo
Bureautique Initiation Excel-Powerpoint
Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office
Intégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Avant-propos Keith Martin Senior Lecturer London College of Communication
Manuel Freeway 6 Avant-propos Félicitations pour avoir choisi Freeway, l application la plus orientée vers le design des sites Web. Avant de commencer il est important de comprendre comment Freeway travaille
Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes
Créer son site Internet avec un outil gratuit Mardi 4 novembre 2014 Cédric ARNAULT OT Lourdes Présentation de la journée - Créer un site Internet : Pourquoi? Pour qui? Comment? - - Aller plus loin avec
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,
Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?
9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de
Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
Chapitre 2 Créer son site et ses pages avec Google Site
Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
JAHIA 6. Création et modification de sites web UniNE
JAHIA 6 Création et modification de sites web UniNE Janvier 2012 TABLE DES MATIÈRES 1 MODIFIER UN SITE : PRINCIPES DE BASE... 1 1.1 ADMINISTRATEUR DU SITE... 1 1.2 LOGIN (AUTHENTIFICATION)... 1 2 LES
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Chapitre 22 Optimisation pour diffusion à l'écran, pour le web
1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................