Introduction au langage (X)HTML-CSS
|
|
|
- Edgar Dubois
- il y a 8 ans
- Total affichages :
Transcription
1 Introduction au langage (X)HTML-CSS
2 Table des matières 1 La syntaxe du HTML Principe d un langage descriptif Les balises HTML La syntaxe Le cas des accents et des caractères spéciaux Les commentaires Les erreurs courantes à ne pas reproduire Structure d une page HTML Première page HTML Les en-têtes Les balises META Autres en-têtes Le corps de la page Les éléments de base Les liens hypertextes Utiliser des styles pour améliorer la page Mettre vos pages en ligne Avoir un hébergeur Définir la page d accueil Gérer le problème de l encodage UTF Références 13 2
3 1 La syntaxe du HTML 1 LA SYNTAXE DU HTML 1.1 Principe d un langage descriptif Le HTML est un langage dit descriptif. Celà signifie que le langage décrit quelque chose de statique, afin d organiser de l information lisible par une personne. En HTML, il n y a pas de boucles, pas de conditions, pas de compilation. La finalité d une page web est son code source HTML. Durant cette formation, nous apprendrons les bases de ce code source, qui peut être écrit directement dans n importe quel éditeur de texte. 1.2 Les balises HTML La syntaxe La syntaxe du langage HTML est très simple. L information de la page est organisée par ce qu on appelle des balises. Chaque balise peut ne contenir rien, ou contenir du texte, ou contenir d autres balises. Une balise est composée de deux éléments : un marqueur d ouverture et un marqueur de fermeture. <nomdelabalise> Contenu </ nomdelabalise> Syntaxe des balises Une balise peut comporter un ou plusieurs attributs. Ce sont des valeurs qui permettent de régler son comportement par exemple. <nomdelabalise a t t r i b u t 1= valeur1 a t t r i b u t 2= v aleur2 > Contenu </ nomdelabalise> Balises avec attributs Certaines balises particulières n ont pas de contenu. Elle se suffisent à elles-même. Le marqueur de début et celui de fin sont fondus dans un seul marqueur. Leur syntaxe est la suivante. 3
4 1 LA SYNTAXE DU HTML <nomdelabalise /> <nomdelabalise a t t r i b u t 1= valeur1 a t t r i b u t 2= v aleur2 /> Balises sans contenu Le cas des accents et des caractères spéciaux En HTML, les accents et certains caractères comme &,< ou > doivent être écrits avec un code particulier. Celà est très contraignant pour les accents et nous apprendrons des astuces pour outrepasser cette limite. Néanmmoins, vous devez connaître la manière de s y prendre. Voici dans l ordre, le à, le é, le è, le ô, le &, le < et le > : à ; é ; è ; &o c i r c ; & ; &l t ; > ; Les accents en HTML Vous trouverez aisément sur internet la liste des tous les caractères spéciaux disponibles Les commentaires Les commentaires servent à mettre du texte qui n apparaît pas dans le navigateur. C est utile pour décrire le code source. Leur syntaxe est la suivante. <! Texte de v o t r e commentaire > <! Des commentaires p l u s l o n g s avec des r e t o u r s à l a l i g n e > Les commentaires 4
5 Attention : Vous ne pouvez pas utiliser de commentaires à l intérieur même d une balise ou d un attribut. Ils doivent être impérativement placés comme un contenu dans une balise. En revanche, les commentaires peuvent contenir des balises, qui ne seront bien sûr pas prises en compte Les erreurs courantes à ne pas reproduire Vous pouvez voir sur internet de trop nombreux exemples à ne pas respecter. Notez en particulier que : Les noms des balises et des attributs doivent être écrits en minuscules. Les balises sans contenu doivent impérativement être fermées avec />. Vous devez mettre les valeurs des attributs entre des double-quotes. Les navigateurs peuvent dans une certaine mesure outrepasser ces erreurs et afficher un résultat correct, néanmmoins, le document ne respecte dans ce cas pas les standards et ses données sont mal formatées. 2 Structure d une page HTML 2.1 Première page HTML L ensemble de la page HTML doit être contenu à l intérieur d une balise <html>. Nous verrons qu il existe parfois des choses avant cette balise mais il ne s agit pas de balises. Cette balise doit contenir deux autres balises, <head> et <body> dans cet ordre et rien d autre. Notez que le HTML ne tient pas compte des retours à la ligne, des tabulations et des suites d espaces (si vous tapez 3 espaces, un seul sera pris en compte). Vous pouvez à votre guise organiser les balises les unes par rapport aux autres avec des retours à la ligne et des espaces. Ouvrez un éditeur de texte (gedit par exemple) et tapez un code similaire à celui-ci : <html> <head> <t i t l e>ma première page HTML</ t i t l e> </head> <body> V o i c i du t e x t e. Des r e t o u r s à ; l a l i g n e pour v o i r l e ré ; s u l t a t dans l e navigateur. Vous v e r r e z que HTML ne prend pas en compte vos r e t o u r s à ; l a l i g n e et vos e s p a c e s. </body> </html> Première page HTML 5
6 Enregistrez ceci dans un fichier appelé par exemple mapage.htm. Enregistrez ce fichier dans un répertoire de votre compte INP-Net. Puis ouvrez un navigateur, effectuez l action Fichier -> Ouvrir un fichier et sélectionnez votre fichier. Admirez le résultat. 2.2 Les en-têtes On appelle en-têtes le contenu de la balise <head>. Les informations que cette section contient n apparaîtront pas directement sur la page. Comme vous avez pu le voir, le navigateur affiche le contenu de la balise <title> dans la barre de titre de sa fenêtre, mais pas sur la page. C est un choix des codeurs du navigateur et en rien une norme. Ces informations, appelées métadonnées, servent à renseigner le navigateur et le réseau sur divers éléments qui n ont pas besoin d apparaître sur la page. Par exemple, le nom de l auteur, ou bien une liste de mot-clés, en encore la période de validité de la page. Ce genre d informations s écrivent à l aide de la balise <meta>. Ces informations sont utiles pour les moteurs de recherche par exemple. Ces en-têtes servent aussi à lier à la page des fichiers ou du code contenant des styles CSS ou des programmes en Javascript par exemple. Celà se fait à l aide de balises rel,style ou encore <script> Les balises META Les balises <meta> sont riches et l utilité de certaines est parfois discutable. Voici quelques exemples : <html> <head> <t i t l e>les b a l i s e s META</ t i t l e> <! <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=iso /> > <meta http equiv= Expires content= 0 /> <meta name= Author content= Votre Nom /> <meta name= keywords content= trustonme html xhtml formation formations net7 INP Net /> <meta name= d e s c r i p t i o n content= Formation pour l a c r é a t i o n de pages Web /> </head> <body>... é </body> </html> Les balises META 6
7 Tapez ces balises dans votre page ou copiez-les dans le fichier balisesmeta.htm. Enregistrez dans un fichier différent du précédent puis ouvrez-le dans un nouvel onglet de votre navigateur, afin de conserver l autre affiché pour le moment. Faites un clic droit dans la première page et puis cliquez sur Informations de la page. Une fenêtre s ouvre. Faites de même sur la seconde page. Vous pouvez voir que le navigateur lit les données Meta et vous permet de les consulter. Vous pouvez aussi voir qu une balise est commentée. Cette balise permet de décrire l encodage utilisé pour la page. L encodage est la manière dont les caractères sont codés par des bits. L encodage n a aucune importance tant que vous n utilisez que des caractères ASCII, soit un jeu très limité de caractères, sans accents. Les accents ne sont utilisables proprement que via les codes HTML décrit précédemment. Nous allons maintenant utiliser une astuce pour afficher correctement de vrai accents. Décommentez la balise <meta> concernée. Puis taper des mots avec accents dans la balise <body>. Actualisez votre page et observez le résultat. A présent, remplacez la balise <meta> concernée par <meta http-equiv="content-type" content="text/html ; charset=utf-8" />. Notez que seule la valeur de l attribut content change. Enregistrez, actualisez la page et observez le résultat. Vos accents s affichent correctement dans un cas et pas dans l autre. Celà dépend de l encodage de votre fichier. Normalement, les éditeurs de texte vous permettent de choisir l encodage au moment d enregistrer le fichier. Dans le cas des sites en ligne, si vous voulez utiliser un encodage UTF-8, une manipulation supplémentaire est nécessaire. Si vous utilisez l encodage iso8859, vous ne devriez avoir aucun problème. Nous décrirons la manipulation pour UTF-8 plus tard. Si vous utilisez windows, il est pour le moment recommandé d utiliser l encodage iso, car c est l encodage par défaut Autres en-têtes Vous avez pu constater dans les en-têtes la présence de la balise <title>. Cette balise est obligatoire. Nous ajouterons d autres en-têtes au cours de la formation. 2.3 Le corps de la page Les éléments de base Vous l avez deviné, le corps de la page est tout ce qui se trouve dans la balise body. Nous allons décrire le contenu à l aide de différents délimiteurs. Voici une page d exemple. <html> <head> <t i t l e>faire un corps à notre page</ t i t l e> </head> <body> <h1>un grand t i t r e</h1> <h2>un t i t r e plus p e t i t</h2> <h6>le plus p e t i t t i t r e</h6> 7
8 <div>du t e x t e l i b r e</div> <div style= text a l i g n : c e n t e r ; > Du t e x t e c e n t r é <br /> Avec r e t o u r à l a l i g n e </ div> <div style= text a l i g n : r i g h t ; >Du t e x t e a l i g n é à d r o i t e</div> <! Un s é p a r a t e u r > <hr /> <div> On peut a u s s i rendre l e t e x t e <span style= font weight : bold ; >gras</span>,<span style= font s t y l e : i t a l i c ; >i t a l i q u e</span> ou encore <span style= text d e c o r a t i o n : u n d e r l i n e ; >s o u l i g n é.</span> </ div> <div> <p>on peut u t i l i s e r des paragraphes</p> <p>i n t e r has ruinarum v a r i e t a t e s a N i s i b i quam tuebatur a c c i t u s Vrsicinus, c u i nos obsecuturos i u n x e r a t i m p e r i a l e praeceptum, d i s p i c e r e l i t i s e x i t i a l i s certamina cogebatur abnuens et reclamans, adulatorum o b l a t r a n t i b u s turmis, b e l l i c o s u s sane milesque semper et militum ductor sed f o r e n s i b u s i u r g i i s longe d i s c r e t u s, qui metu s u i d i s c r i m i n i s anxius cum a c c u s a t o r e s q u a e s i t o r e s q u e s u b d i t i v o s s i b i c o n s o c i a t o s ex isdem f o v e i s c e r n e r e t emergentes, quae clam palamve agitabantur, o c c u l t i s Constantium l i t t e r i s edocebat i n p l o r a n s s u b s i d i a, quorum metu tumor n o t i s s i m u s C a e s a r i s e x h a l a r e t.</p> <p><span style= c o l o r :#0000 f f >Et mettre de l a c o u l e u r</span></p> </ div> </body> </html> Corps de la page Ce code source est disponible dans le fichier corps.htm. Vous pouvez constater que pour les styles de texte, comme la couleur, la syntaxe est assez lourde. Nous allons voir plus loin des moyen plus aisé de gérer celà. Vous voyez qu il y a un certain nombre de conteneurs <div>. Les DIV sont les conteneurs de base. Il est déconseillé de mettre du texte libre en dehors d un DIV, car celà rend sa manipulation par des styles moins facile. Vous comprendrez celà plus tard. 8
9 2.3.2 Les liens hypertextes Toute la magie du web vient du fameux lien hypertexte. Un lien hypertexte pointe vers un emplacement dans une page web. Il est bien écrit un emplacement. En effet, vous pouvez faire pointer un lien sur la page dans laquelle il se trouve, pour orienter le visiteur sur un paragraphe particulier lorsque la page est longue, ou bien pointer vers une autre page web, ou bien encore pointer vers un emplacement dans une autre page web. Ces emplacements sont appelés des ancres. Les liens se gèrent avec la balise <a>. Il y a deux types de ces balises. Celles qui pointent vers une page ou une ancre et celles qui définissent une ancre vers laquelle d autres liens peuvent pointer. Pour définir une ancre, on utilise la syntaxe <a id="nomdelancre"></a>. Pour définir un lien, on utilise une des trois syntaxes suivantes, selon le besoin : <a href="urldelapage">texte du lien</a> <a href="#nomdelancre">texte du lien</a> <a href="urldelapage#nomdelancre">texte du lien</a> urldelapage est l adresse de la page. Ce peut être soit une page désignée par un chemin relatif par rapport à la page consultée (comme sousrepertoire/autrepage.htm) ou une URL externe (comme http :// Faisons un petit test. Créons deux fichiers appelés page1.htm et page2.htm dans le même répertoire et plaçons-y respectivement les codes suivants. <html> <head> <t i t l e>une première page</ t i t l e> </head> <body> <a href= http : / /www. g oogle. f r >Un l i e n v e r s Google</a> <br /> <a href= page2. htm >Un l i e n v e r s une page de mon s i t e</a> </body> </html> Page numéro 1 <html> <head> <t i t l e>une deuxième page</ t i t l e> </head> <body> 9
10 <a href= page1. htm >Retour v e r s l a première page</a> </body> </html> Page numéro 2 Tester un peu tout ça en ouvrant page1.htm dans vote navigateur. Pour tester le comportement des ancres, je vous invite à consulter le fichier ancres.htm. Son listing n est pas présenté ici en raison de la grande quantité de texte qu il contient Utiliser des styles pour améliorer la page Nous allons ici ajouter une balise d en-tête. C est une balise particulière puisqu elle contient du texte, qui n est pas du HTML mais du langage CSS comme Cascading Style Sheet ou feuille de style en cascade. Bien que ce terme puisse effrayer, CSS est un langage simple et fort puissant. Jugez-en par vous-même avec le listing suivant, que vous trouverez dans le fichier css.htm. <html> <head> <t i t l e>u t i l i s a t i o n de s t y l e s CSS</ t i t l e> <style content= t e x t / c s s > / Ceci va a f f e c t e r t o u t e s l e s b a l i s e s body. I l n y en a qu une ce qui s i m p l i g i e l e problème / body { / Ceci va donner une c o u l e u r de fond. / background c o l o r :# bbbbff ; font s i z e : 1 0 pt ; font f a m i l y : Verdana ; c o l o r :#220000; / I c i on s oiccupe du s t y l e par défaut des b a l i s e s courantes / div { / T a i l l e de l a marge en haut, à d r o i t e, en bas, à gauche / / La marge e s t l a d i s t a n c e e n t r e l e bord du div et ce qui l entoure / margin : 1 0 px 100px 10px 100px ; h1 { text d e c o r a t i o n : u n d e r l i n e ; 10
11 / On d é f i n i t i c i ce qu on a p p e l l e des c l a s s e s / / Celà permet d a f f e c t e r un s t y l e p a r t i c u l i e r à c e r t a i n s éléments /. encadre { margin : 5 0 px 200px 50px 200px ; / Le padding e s t l a d i s t a n c e e n t r e l e t e x t e et l e s bords du DIV / padding : 2 0 px ; / Ceci c r é e une bordure p l e i n de 2 p i x e l s d é p a i s s e u r et de c o u l e u r blanche / border : 2 px s o l i d # f f f f f f ; / On a l i g n e l e t e x t au m i l i e u / text a l i g n : c e n t e r ; / des l i e n s hypertext plus sympas / / S t y l e du l i e n par défaut / a { c o l o r :#550000; text d e c o r a t i o n : none ; / S t y l e du l i e n s i déjà v i s i t é / a : v i s i t e d { c o l o r :#550000; text d e c o r a t i o n : none ; / S t y l e du l i e n l o r s du s u r v o l avec l e c u r s e u r de l a s o u r i s / a : hover { c o l o r :#aa0000 ; text d e c o r a t i o n : u n d e r l i n e ; </ style> </head> <body> <h1>uraphe</h1> <div> Sed quid e s t quod in hac causa maxime homines admirentur et reprehendant meum consilium, cum ego idem antea multa decreverim, que magis ad hominis dignitatem quam ad r e i p u b l i c a e n e c e s s i t a t e m p e r t i n e r e n t? 11
12 3 METTRE VOS PAGES EN LIGNE </ div> Supplicationem quindecim dierum d e c r e v i s e n t e n t i a mea. Rei p u b l i c a e s a t i s e r a t t o t dierum quot C. Mario ; d i s immortalibus non e r a t exigua eadem g r a t u l a t i o quae ex maximis b e l l i s. Ergo i l l e cumulus dierum hominis e s t d i g n i t a t i t r i b u t u s. </body> </html> <div class= encadre > Ce div e s t a f f e c t é à une c l a s s e CSS pour l u i donner un look d i f f é r e n t. <a href= >Des l i e n s plus sympas</a> </ div> <h1>un autre paragraphe</h1> <div> Adolescebat autem obstinatum propositum erga haec et s i m i l i a multa scrutanda, s t i m u l o s admovente regina, quae abrupte m a r i t i f o r t u n a s trudebat in exitium praeceps, cum eum p o t i u s l e n i t a t e feminea ad v e r i t a t i s humanitatisque viam reducere u t i l i a suadendo deberet, ut in Gordianorum a c t i b u s f a c t i t a s s e Maximini t r u c u l e n t i i l l i u s i m p e r a t o r i s r e t t u l i m u s coniugem. </ div> Utilisation des styles CSS Comme vous pouvez le voir, celà libère le code HTML de toute description de couleur et de disposition. C est la philosophie du Web de l avenir. Le code (X)HTML définit des données, puis on les met en forme avec d autres outils. Ici, l outil est le langage CSS. Celà suffit à gérer un site web même riche, car un site web n utilise jamais trop de styles différents, sans quoi il deviendrait très vite illisible. Il est possible d utiliser CSS directement dans les balises (X)HTML à l aide de l attribut style. Consulter la sous-section corps de la page pour voir de petits exemples avec les textes en gras, italique et souligné. Par exemple, avoir un bout de texte rouge souligné, on peut utiliser <span style="color :#ff0000 ;text-decoration :underline ;">Du texte rouge souligné</span>. 3 Mettre vos pages en ligne 3.1 Avoir un hébergeur Pour mettre vos pages en ligne, vous devez disposer d un hébergeur. INP-Net vous offre un service d hébergement avec votre compte. Déposez simplement vos pages web dans le répertoire www public de votre compte INP-Net. Vous accéder à votre site et à vos pages via l adresse http ://bde.enseeiht.fr/~votrelogin/unepage.htm. 12
13 4 RÉFÉRENCES 3.2 Définir la page d accueil Par mesure de sécurité et de confort, il convient que l adresse http ://bde.enseeiht.fr/~votrelogin/ tombe directement sur une page, de surplus celle de votre choix. Pour ce faire, il suffit de placer un fichier nommé index.htm ou index.html dans le répertoire www public. Ce fichier sera la page d accueil. 3.3 Gérer le problème de l encodage UTF-8 Si vos fichiers sont encodés en UTF-8, il est possible que les accents s affichent mal. Si vous rencontrez ce problème, vous pouvez éditer le fichier.htaccess (ou le créer s il n existe pas) et y ajouter les lignes : AddCharset UTF-8.html AddCharset UTF-8.htm 4 Références 13
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
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
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
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
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
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...
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,
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?
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
.. 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
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
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é
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
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer
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
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
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Utilisation de Sarbacane 3 Sarbacane Software
Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une
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...
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
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
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,
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
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
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
Gestion des documents avec ALFRESCO
Gestion des documents avec ALFRESCO 1 INTRODUCTION : 2 1.1 A quoi sert ALFRESCO? 2 1.2 Comment s en servir? 2 2 Créer d un site collaboratif 3 2.1 Créer le site 3 2.2 Inviter des membres 4 3 Accéder à
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT Animé par A.COMLAN ADCOSOFT 14/02/2014-15H 1 Programme du webséminaire : Introduction Partie I Optimisation des Balises TITLE et META Partie II Optimisation du
Dans cette Unité, nous allons examiner
13.0 Introduction Dans cette Unité, nous allons examiner les fonctionnements internes d une des plateformes de publication web les plus largement utilisées de nos jours sur l Internet, WordPress. C est
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
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
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
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
<Créer un site Web. avec/> Suzanne Harvey
aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca
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
Méthode de préparation du fichier texte d import depuis Excel, via Access jusqu à Drupal.
IMPORT SCROL vous invite fortement à lui confier cette tâche pour vous décharger de toute responsabilité dans le cas d'un import manqué. Si vous confiez à SCROL vos nouvelles données (souches, images,
Introduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
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
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
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Formation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS
Ajout du code de suivi Google Analytics Page 1 / 7 I. Création du compte sur Google Analytics 1. Connectez-vous à www.google.fr 2. Entrez «Google Analytics» dans la barre de recherche. 3. Cliquez sur le
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
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,
Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO
Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail
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
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
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
TP 6 Installation et configuration d une site internet avec un CMS Illustration avec Wordpress
TP 6 Installation et configuration d une site internet avec un CMS Illustration avec Wordpress Présentation du TP...1 I Installation du site localement...2 1 Base de données...2 2 Fichiers...2 3 Paramétrages
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
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
Le référencement naturel
Le référencement naturel Phases essentielles Choix des mots-clés Où se référencer : moteurs, annuaires Indexation des pages du site dans les moteurs Positionnement et trafic généré Optimisation des pages
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
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
CRÉER SON SITE INTERNET. Créer son site Internet. Méd de Roanne. FG 16/09/08
CRÉER SON SITE INTERNET 1 Tout d abord, nous allons réviser quelques notions de base permettant de comprendre ce qu est un site Internet, et ce que cela implique. Dans un second temps, le lien ci-après
Création, analyse de questionnaires et d'entretiens pour Windows 2008, 7, 8 et MacOs 10
modalisa Création, analyse de questionnaires et d'entretiens pour Windows 2008, 7, 8 et MacOs 10 8 Fonctionnalités de mise en ligne de questionnaires Vous trouverez dans cet opuscule les informations nécessaires
Informatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
Utiliser un CMS: Wordpress
Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation
Site web «Savoirs CDI» Création des pages et saisie des contenus
Date : version 1 : 31.10.2008 Site web «Savoirs CDI» Création des pages et saisie des contenus BONNIN Julia à Auteurs Savoirs CDI THIBAUD François Objet Guide de saisie (backoffice TYPO3) des contenus
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
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
MODE D EMPLOI WORDPRESS
MODE D EMPLOI WORDPRESS Comment gérer votre site internet 1 Pour ce mode d emploi, nous allons prendre l exemple de la gestion du site jcebretagne.org Tout d abord, une suite d'article qui peuvent être
SII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...
Association UNIFORES 23, Rue du Cercler 87000 LIMOGES
RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO éditions Page 2/14 A propos de l auteur... Souvent défini comme «sérial-créateur», Jean-Marie PÉRON est à l origine depuis 1992 d entreprises
Guide Reseller Onbile
Guide Reseller Onbile Cher Revendeur, Avez-vous un doute en ce qui concerne le fonctionnement du Panneau d Administration du Plan Reseller de Onbile? Le guide Reseller Onbile est ce dont vous avez besoin!
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
Le codage informatique
Outils de Bureautique Le codage informatique (exemple : du binaire au traitement de texte) PLAN 3) Le codage binaire 4) Représentation physique des bits 5) Le bit est un peu court... 6) Codage de texte
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
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
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
Comment mettre en ligne un site WordPress local
Comment mettre en ligne un site WordPress local Vous avez bossé votre site en local et vous voulez maintenant savoir comment mettre en ligne votre site pour la première fois? Je vous propose ce guide en
Documentation Analyse SEM
Documentation Analyse SEM Document : Projet : Client : Documentation Analyse SEM myposeo Interne Date : 24/02/15 Version : 1 G4interactive SAS 53, rue des deux communes 93100 Montreuil, France contact@myposeo.com
EXTENSION WORDPRESS. Contact Form 7. Proposé par :
Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)
Alfresco Guide Utilisateur
Alfresco Guide Utilisateur ATELIER TECHNIQUE DES ESPACES NATURELS - 1 Table des matières Alfresco Guide Utilisateur...1 Accéder à la GED de l'aten...3 Via un client FTP...3 Onglet Général...3 Onglet Avancé...3
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
Traitement de texte : Quelques rappels de quelques notions de base
Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui
DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET
DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée
L optimisation d une PowerBoutique pour le référencement
L optimisation d une PowerBoutique pour le référencement page 1/11 Tables des matières 1 Les balises de référencement...4 2 La hiérarchisation de l information...7 3 La mise en exergue des mots clés...7
Votre site Internet avec FrontPage Express en 1 heure chrono
1.1. Précautions préliminaires Votre site Internet avec FrontPage Express en 1 heure chrono Le contenu de ce site n'est pas très élaboré mais il est conçu uniquement dans un but pédagogique. Pour débuter,
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.
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
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
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
Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
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
Diffuser un contenu sur Internet : notions de base... 13
Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................
Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002
Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002 De nombreux utilisateurs rencontrant l équipe de National Instruments nous demandent comment générer un rapport complet à partir
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
Manuel d utilisation pour la plateforme BeExcellent MANUEL D UTILISATION POUR LA PLATEFORME BEEXCELLENT
Manuel d utilisation pour la plateforme MANUEL D UTILISATION POUR LA PLATEFORME BEEXCELLENT Manuel d utilisation pour la plateforme 13 14 Manuel d utilisation pour la plateforme Qu est-ce que 1. Qu est-ce
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