pour apprendre le langage html

Dimension: px
Commencer à balayer dès la page:

Download "pour apprendre le langage html"

Transcription

1 pour apprendre le langage html introduction : Voici ce que vous devez savoir avant de continuer : Tout d' abord, il faut préciser que le langage HTML est relativement simple mais que celui ci impose au programmeur une logique et une rigueur qu il est de son devoir de respecter. Son travail va consister à écrire, dans un logiciel de traitement de texte (pour nous, Word pad ou le Bloc note ) son texte en y plaçant consciencieusement des balises ( = des instructions ) qui lui permettront de formater son texte, c' est à dire, changer la couleur de son texte, changer sa structure, et y implanter des images par exemples. Il existe deux types de balises, les "conteneurs" et "événement". Toutes s écrivent encadrées des chevrons "<" et ">". Les balises conteneurs sont des balises qui s utilisent par paires et encadrent une zone du document, par exemple le début et la fin d une séquence en gras (< b > et < /b >). Les balises événement s utilisent en solo, comme la balise < hr > qui affiche une ligne de séparation. Bien sûr ces balises apparaîtront sur votre traitement de texte (format *.Txt) mais pas sur votre pas web (format *.htm ou *.html). Petite anecdote, j'ai du ajouter un espace entre les chevrons et ce qui est écrit à l intérieur pour pouvoir afficher les balises de mes exemples juste au dessus. Si je n avais pas ajouter ces espaces, les balises ne se seraient pas afficher et auraient formater mon texte... Toute page débute par une déclaration qui ne sera pas affichée par le navigateur, mais qui lui permet de déterminer la nature du document à afficher. Chaque page web se composera donc dès le début par la balise < HTML > et se finira par la balise < /HTML >, dernière balise qui en fait n est pas nécessaire. A l intérieur de cet encadrement, on distinguera deux parties : L' en tête signalée par les balises < head > et < /head >, le corps où se trouvera le contenu de votre page encadré par les balises < body > et < /body >. Dans l en tête, on incorpore des balises complexes dont on ne se souciera pas mais il faut savoir que les balises < title > et < /title > sont importantes car elles afficheront le titre du document tout en haut à gauche du document, dans la petite barre bleu... on aura donc : BLOC NOTE (Indique le début du bloc note.a ne pas écrire comme

2 instruction!) < html > < head >< title >Vous mettez le titre de la page ici.< /title >< /head > < body > Vous mettez le contenu de votre page ici. < /body > < /html > FIN BLOC NOTE (Indique la fin du bloc note.a ne pas écrire comme instruction!) Incorporez dans le bloc note ces instructions. Vous avez donc un fichier TXT. Il vous suffit de le renommer maintenant en HTM ou HTML selon votre préférence. Cette modification d extension va permettre de visualiser le contenu de votre document par votre navigateur et de se rendre compte du résultat final. Bon, ça, c est une page web embryonnaire! Toutes ces pages doivent pourtant contenir ce minimum d instruction. Dans la partie II du sommaire, à savoir, PRESENTATION DES BALISES HTML, nous allons vous présenter les différentes balises qui se placent cette fois dans le corps du document, c est à dire entre les balises : < body > et < /body >. Voilà, c est la fin de l introduction. les balises : P RESENTATI ON DES BALI SES Voici ce que vous attendez tous, les balises qui vont vous permettre de contrôler vos écrits et mettre en oeuvre vos quatre volontés. En effet, ici réside la partie non pas la plus difficile mais dirons nous, la plus tranquille qu il puisse exister sauf qu il va falloir que vous connaissiez par coeur ces instructions... Voilà, mais ceci va se faire normalement, à force de manipulations, tout ça ne sera qu une simple formalité. (Si vous avez lu l' intro.) Tout d abords, veuillez télécharger le fichier suivant, c est un fichier d aide sur les balises, très pratique, à compter dans votre trousse à outils. FICHIER AIDE Toutes les balises qui vont vous êtres présentées vont l êtres selon un schéma précis. Nous allons vous les regroupées par catégories...voyez plutôt.

3 FORMATAGE DU TEXTE * < b > et < /b > TEXTE EST EN GRAS >salut * < u > et < /u > TEXTE EST SOULIGNE >salut * < s > et < /s > TEXTE EST BARRE >salut * < i > et < /i > TEXTE EST EN ITALIQUE >salut * < tt > et < /tt > POLICE TYPE MACHINE A ECRIRE >salut * < big > et < /big >TEXTE EN GROS CARACTERES >salut * < small >et < /small >TEXTE PETIT CARACTERES >salut * < sub > et < /sub >TEXTE PLACE EN INDICE > salut * < sup > et < /sup > TEXTE PLACE EN EXPOSANT > salut * < pre > et < /pre > TEXTE ECRIT EN PREFORMATE > Salut ça va? Il affiche même les retours à la ligne. * < hx > et < /hx > X=1,2,3 ou 4 jusqu' a 6. Permet de formater vos titres. AVEC H1 : A AVEC H2 : A AVEC H6 : A Remarque : comme cette balise sert à formater son ou ses titres de document, remarquez qu' après la balise < /h6 > ( balise de fermeture ),tout le texte va à la ligne. On pourrait dire que la balise de fin < /h6 > agit comme un < br > ( voir plus bas ). Il est donc inutile pour aller à la ligne d' ajouter < br > après les balises en < hx > et < /hx >. * < font color=xxxxxx > et < /font > PERMET DE METTRE SON TEXTE EN COULEUR. LE X correspond à des chiffres ou lettres, de 0 a 9 et de A à F ( du plus clair au plus foncé ), en fait, de 0 à F. Les 2 premiers X permettent de mettre du rouge, les 2 X suivants, du vert, les 2 derniers, du bleu. Faites des combinaisons avec les nombres et chiffres et créez des couleurs jamais vues encore! A la place des X peuvent êtres écrites des couleurs, en Anglais. Par exemple : < font color=blue > donne Salut< font color=green > donne Salut< font color=red > donne Salut Les autres couleurs peuvent elles aussi fonctionnées. Exemple avec les couleurs: < font color=ff0000 > donne Salut. Voici les differabtes couleurs que vous pouvez placer tel quel dans la balise:

4 noir = black marron = maroon vert = green olive = olive bleu marine = navy pourpre = purple bleu/vert = teal gris = gray argent = silver rouge = red citron = lime jaune = yellow bleu = blue fuchsia = fuchsia vert bouteille = aqua blanc = white CARACTERES SP ECI AUX * < hr > AFFICHE UNE LIGNE. Exemple : Mais cette balise peut être modifiée. < hr size=10 width=75% align=center > donne : Noter que le chiffre en pourcentage peut être remplacé par un nombre, nombre qui exprime des pixels. A la place de "Align" peut être écrit "left" ou "right". * < p > PERMET DE FAIRE UN NOUVEAU PARAGRAPHE. Exemple: "Salut < p > ça va?" donne: "Salut ca va?" Cette balise peut elle aussi être modifiée avec l attribut "align" comme pour < hr >.

5 * < br > PERMET D ALLER À LA LIGNE. Plusieurs < br > à la suite peuvent permettre de passer plusieurs lignes. comment publier sa page web PUBLICATION Bon, en fait, il n'y a pas vraiment de méthode précise car selon l'hébergeur, les méthodes peuvent varier. On remarque cependant une similitude : Premièrement, il faudra vous inscrire sur le site de l'hébergeur choisit. Vous disposerez donc des services complémentaires comme e mail perso, ETC... Ensuite, vous allez engager la procédure d'obtention du pseudo et mot de passe pour votre site ( si ce n'est pas déjà fait ). Cela veut dire que vous devrez trouver un nom de site ( le plus souvent celui ci correspond au pseudonyme qu' il vous est demandé à l' inscription ou lors de la procédure de mise en service de votre site ). Vous devez disposez de 3 renseignements : URL FTP, adresse pour le logiciel FTP ( voir troisièmement ). Exemple, pour multi mania, son adresse Internet est et son adresse FTP est : ftp.multimania.com Votre pseudo qui vous servira aussi pour le logiciel FTP, il est par exemple, pour multi mania le nom de votre site et pseudonyme en même temps. Exemple, l' URL de mon site est et j'ai comme pseudo pour le FTP, "bennyz". Il vous faut ensuite votre mot de passe qui servira encore pour le logiciel FTP qui vous est donné avec votre pseudo... Troisièmement, vous devez disposer d'un logiciel FTP (File Transfert Protocol ) qui va vous permettre de transférer vos fichiers HTML et autres vers le serveur de l'hébergeur. Votre site pourra donc être visionné sur le net mondial. Vérifiez cependant que votre page d'accueil s'appelle INDEX.HTM ou INDEX.HTML. Si ce n' est pas le cas, votre page d' accueil ne sera pas détecter. Il est donc impératif que votre page d'accueil se nomme INDEX. Je vous conseil CUTEFTP pour démarrer. Voici un petit aperçu de mon logiciel FTP, vous pourrez voir sur cette image ou vous devez indiquer les renseignements concernant votre site.

6 Généralement, en tout cas pour multi mania, votre mot de passe et pseudo vous sont retournés par mail ce qui permet d'éviter la perte ou oublie du mot de passe. Pour mettre en ligne vos pages, vous faites glisser vos fichier qui son sur votre disque dur vers le serveur de l hébergeur comme indiqué sur le dessin. Pour les personnes non entraînées au FTP, il peuvent s'adresser à moi, car si vous le voulez, je pourrais mettre en ligne vos pages moi même à la condition que vous me donniez les trois renseignements pour le logiciel FTP.

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

HTML. Notions générales

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

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

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. 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

Plus en détail

Créer des pages WEB à l aide de KompoZer.

Créer des pages WEB à l aide de KompoZer. Document élève 1/14 Créer des pages WEB à l aide de KompoZer. Document élève 2/14 INTERNET : CREATION D UN SITE PRESENTATION Un site web (aussi appelé site internet par abus de langage) est un ensemble

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

CRÉER SON SITE INTERNET. Créer son site Internet. Méd de Roanne. FG 16/09/08

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

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur)

FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur) Publication par FTP FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur) Logiciels FTP nombreux (FileZilla, CuteFTP, WinSCP, FTP Expert).

Plus en détail

Comment créer vos propres pages web?

Comment créer vos propres pages web? Comment créer vos propres pages web? Vous voulez vous aussi devenir acteur et présenter vos passions et vos envies aux yeux du monde. Présentez-les sur le WEB. Pour cela, il vous suffit de créer vos "pages

Plus en détail

Introduction au langage HTML

Introduction au langage HTML 2 Plan Introduction au langage HTML Unité «Introduction à l Informatique» Licence 1 semestre 1 Année 2006/2007! 1. Petit historique d Internet!! en détails! 4. Créer une page Web http://jean-luc.mari.perso.esil.univmed.fr

Plus en détail

Documentation utilisateur de la plate-forme administrateur

Documentation utilisateur de la plate-forme administrateur Documentation utilisateur de la plate-forme administrateur Introduction... 2 1. Accès à la plate-forme... 2 2. Création d une barre de navigation... 3 3. Créer un nouveau menu... 4 Créer le nom d un nouveau

Plus en détail

Notions de base suite. octobre 2013 1

Notions de base suite. octobre 2013 1 Notions de base suite octobre 2013 1 21. Colormanagment octobre 2013 2 22. Harmonies colorées octobre 2013 3 octobre 2013 4 Couleurs Valeur Couleur Valeur Couleur Valeur Couleur Valeur Couleur #00FFFF

Plus en détail

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS).

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS). ISN- semaine 10 HTML 1. Introduction HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

Plus en détail

Cours création sites web

Cours création sites web COMMENT CRÉER SON PROPRE SITE WEB Version 2.12 Dernière mise à jour : 23 mai 2004 Outils Outils de base : un ordinateur, un navigateur, et un éditeur ; Il n est pas nécessaire d être connecté à Internet,

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

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

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE

TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN SOMMAIRE Etape 1. Ouvrir FrontPage et créer un site Web vide...2 Etape 2 ajouter des pages...3 Etape 3 : donner un titre et renommer les 2 pages...5

Plus en détail

PROCÉDURES D ÉDITION. Guide de l usager TYPO3

PROCÉDURES D ÉDITION. Guide de l usager TYPO3 Guide de l usager TYPO3 Sommaire Connexion à TYPO 3...5 Gestion des pages dans TYPO 3...6 Ajouter une nouvelle page...7 Déplacer ou copier une page de l arborescence... 11 Supprimer une page... 12 Ouvrir

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. Tuyêt Trâm DANG NGOC Service Web 1 / 12

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. <dntt@u-cergy.fr> Tuyêt Trâm DANG NGOC Service Web 1 / 12 Service Web Cours de Réseaux Tuyêt Trâm DANG NGOC Université de Cergy-Pontoise 2012-2013 Tuyêt Trâm DANG NGOC Service Web 1 / 12 Plan 1 Le Web 2 HTTP 3 FTP 4 URL Tuyêt Trâm DANG NGOC

Plus en détail

Bernard Lecomte. Débuter avec HTML

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.

Plus en détail

EasyNewsletter. 1. Création d un groupe d envoi de newsletter

EasyNewsletter. 1. Création d un groupe d envoi de newsletter EasyNewsletter Créez et envoyez des newsletters contenant textes, images, liens, et téléchargements en toute simplicité. Avec cet outil, vous pouvez également gérer vos listes de diffusion en quelques

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation Word: La présentation Introduction 2 ième partie Bien que le contenu du document soit le plus important, Word vous offre plusieurs options pour améliorer la présentation du texte. Cette page va vous montrer

Plus en détail

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

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)

Plus en détail

Sommaire. 1 ) Qu'est ce que WordPress. 2 ) Pourquoi WordPress. 3 ) Les sites statiques et les sites dynamiques. 4 ) Les parties de WordPress

Sommaire. 1 ) Qu'est ce que WordPress. 2 ) Pourquoi WordPress. 3 ) Les sites statiques et les sites dynamiques. 4 ) Les parties de WordPress Sommaire 1 ) Qu'est ce que WordPress 2 ) Pourquoi WordPress 3 ) Les sites statiques et les sites dynamiques 4 ) Les parties de WordPress 5 ) Les éléments de WordPress 6 ) Les avantages 1 ) Qu'est ce que

Plus en détail

Création d un site Internet

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

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Appuyez et relâchez une fois le bouton gauche de la souris. Il sert à choisir un item ou pour appuyer sur l'un des différents boutons de Windows.

Appuyez et relâchez une fois le bouton gauche de la souris. Il sert à choisir un item ou pour appuyer sur l'un des différents boutons de Windows. Introduction Cette page a été conçue pour vous démontrer les possibilités de la souris. Elle sert premièrement à déplacer le pointeur sur l'écran ou vers des commandes. C'est avec les combinaisons de boutons

Plus en détail

1 Le code ASCII et le code Latin-1

1 Le code ASCII et le code Latin-1 USTL - Licence ST-A 1ère année 2006-2007 Algorithmes et Programmation Impérative 1 Objectifs du TP 1. travailler la mise en forme d'un achage. TP 1 : Table de caractères ASCII 1 Le code ASCII et le code

Plus en détail

Langages du Web. Que savez vous???

Langages du Web. Que savez vous??? Langages du Web Que savez vous??? Le WEB World Wide Web ouwww ouweb Toile d'araignée mondiale ou la toile Le Web utilise le réseau Internet pour relier des serveurs qui, grâce aux protocoles HTTP, HTTPS,

Plus en détail

Rédigé en janvier 2006 par Sébastien Oliveau (sebastien.oliveau@univ-provence.fr).

Rédigé en janvier 2006 par Sébastien Oliveau (sebastien.oliveau@univ-provence.fr). MODE D'EMPLOI SIMPLIFIE POUR LA GESTION INDIVIDUELLE DU SITE INTERNET Rédigé en janvier 2006 par Sébastien Oliveau (sebastien.oliveau@univ-provence.fr). I ntroduction: La première chose à faire est d'aller

Plus en détail

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

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%

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

La vocation purement sémantique de la page HTML a été pervertie avec les années.

La vocation purement sémantique de la page HTML a été pervertie avec les années. Bruxelles Formation CEPEGRA Olivier Céréssia 2012 PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

Le transfert par ftp avec FileZilla

Le transfert par ftp avec FileZilla Le transfert par ftp avec FileZilla Par : Emmanuel Henke Le programme de lecture : Télécharger Filezilla et l installer... 1 De quoi est composée l interface de l application?... 4 Se connecter à son serveur

Plus en détail

Introduction à Expression Web 2

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

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

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

Plus en détail

Création WEB avec DreamweaverMX

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

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Mode d emploi SPIP 2.0 pour rédacteur

Mode d emploi SPIP 2.0 pour rédacteur Mode d emploi SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

Plus en détail

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne ou cadres Dans cette fiche, nous allons vous apprendre à faire des frames ou en français «cadres». Tout et son contraire a été dit à propos des frames. En tout état de cause, tous les navigateurs Internet

Plus en détail

Windows Movie Maker. 2- En bas de cette liste, vous trouverez un dossier «Windows Live», cliquez dessus, puis, cliquez sur «Windows Live Movie Maker».

Windows Movie Maker. 2- En bas de cette liste, vous trouverez un dossier «Windows Live», cliquez dessus, puis, cliquez sur «Windows Live Movie Maker». Présentation : Windows Movie Maker? Qu'est ce que c'est? A quoi ça sert? Peut on l'avoir gratuitement? Windows Movie Maker est un logiciel qui vous permettra de créer, et de partager vos films personnelles.

Plus en détail

Un mini-site internet en une après-midi

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,

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

Plus en détail

Prise en main rapide

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

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. 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

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

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...

Plus en détail

Optimiser pour les appareils mobiles

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...

Plus en détail

Mode d emploi du site Internet «Mediawiki»

Mode d emploi du site Internet «Mediawiki» Mode d emploi du site Internet «Mediawiki» École Libre du Soleil Levant La technologie MediaWiki a été choisie pour sa flexibilité et une simplicité d utilisation ne demandant que de connaître quelques

Plus en détail

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

Plus en détail

Créer un diaporama avec Open Office. Sommaire

Créer un diaporama avec Open Office. Sommaire Créer un diaporama avec Open Office I. Création I.1. Paramétrer le diaporama I.2. Valider et enregistrer l'album II. Le traitement des données II.1. Saisir les données II.2. Agir sur les pages III. Améliorez

Plus en détail

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

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

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

SPIP est un logiciel libre et gratuit. Pour plus d informations ou consulter la documentation complète, aller sur le site http://ww.spip.

SPIP est un logiciel libre et gratuit. Pour plus d informations ou consulter la documentation complète, aller sur le site http://ww.spip. Cours SPIP pour rédacteur 1. Introduction L objectif de ce cours est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

6.1 Le code source : le HTML

6.1 Le code source : le HTML Nous allons passer maintenant à une partie un peu plus technique (mais pas trop) qu il est indispensable d aborder pour éviter des erreurs. Même si Dreamweaver vous permet de réaliser un site sans avoir

Plus en détail

Wordpress, les bases

Wordpress, les bases Wordpress, les bases Sommaire Se connecter... 2 Créer une page... 3 Ajouter une image... 5 Créer le menu principal... 9 Placer un sous-menu... 12 Créer un article... 13 Installer une extension (formulaire)...

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

OWNCLOUD L INTERFACE WEB. La réponse informatique

OWNCLOUD L INTERFACE WEB. La réponse informatique OWNCLOUD L INTERFACE WEB La réponse informatique Cette documentation a pour but de vous présenter les différentes options présentes sur l interface WEB. I- L INTERFACE WEB Pour commencer, connectez-vous

Plus en détail

Foxmail et SpamPal : éradiqueurs de spams

Foxmail et SpamPal : éradiqueurs de spams Foxmail et SpamPal : éradiqueurs de spams Rédigé par Guijnor, Le 26 août 2004 Introduction Vous ne comptez plus le nombre de spams qui inondent votre logiciel de messagerie électronique et vous souhaiteriez

Plus en détail

Jean-Jacques Thibault CRDP de l académie de Versailles

Jean-Jacques Thibault CRDP de l académie de Versailles Jean-Jacques Thibault CRDP de l académie de Versailles Avant de commencer à créer :... 2 Préambule... 3 Un site de ressources :... 3 un tutoriel fait avec hotpotatoes :... 3 JQUIZ... 3 Remarque :... 6

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

Modifications EPN-Campus

Modifications EPN-Campus Modifications EPN-Campus 1 - Les différents types d articles disponibles pour EPN-Campus... 2 a) First Article... 2 b) Standard Article... 4 2- Modifications des «portlets» sur EPN-Campus... 5 a) Title

Plus en détail

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP Cours SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part savoir

Plus en détail

La programmation sous Android : Quels sont les moyens disponibles?

La programmation sous Android : Quels sont les moyens disponibles? La programmation sous Android : Quels sont les moyens disponibles? Cet article présente plusieurs manières, plusieurs méthodes pour arriver à coder pour Android. Nous commencerons par la programmation

Plus en détail

Initiation à html et à la création d'un site web

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

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

FAIRE UN PAIEMENT TIPI

FAIRE UN PAIEMENT TIPI FAIRE UN PAIEMENT TIPI I. Accès au site II. Je n ai pas de compte sur ce site 1. Indiquer une adresse email valide a. J ai une adresse email b. Je n ai pas d adresse email 2. Indiquer les informations

Plus en détail

Guide d utilisation Plus de souplesse dans votre communication?

Guide d utilisation Plus de souplesse dans votre communication? Guide d utilisation Plus de souplesse dans votre communication? Un produit de la société Table des matières Table des matières... 2 Guide complet d utilisation... 3 Connexion à l administration i-flexo...

Plus en détail

Note d intention : ce document est long mais en définitive ne fait pas mal

Note d intention : ce document est long mais en définitive ne fait pas mal PUBLIER DES ARTICLES SUR WWW.JETFM.ASSO.FR TUTORIEL Note d intention : ce document est long mais en définitive ne fait pas mal Il est demandé à TOUS les adhérents et ce pour chaque émission de créer un

Plus en détail

Naviguer CHARGER ET QUITTER INTERNET EXPLORER

Naviguer CHARGER ET QUITTER INTERNET EXPLORER Naviguer UTILISER UN NAVIGATEUR CHARGER ET QUITTER INTERNET EXPLORER Pour pouvoir travailler avec votre application Internet Explorer il est indispensable de l'ouvrir. Pour réaliser cette opération plusieurs

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Guide de l interface utilisateur d Optymo

Guide de l interface utilisateur d Optymo Guide de l interface utilisateur d Optymo Notes de lecture : dans ce document, les textes soulignés font référence à des libellés des fenêtres ou aux libellés associés à des boutons d Optymo. Les textes

Plus en détail

Comment maximiser le référencement de votre site e-commerce en 15 minutes Tout le monde veut optimiser le référencement de son site.

Comment maximiser le référencement de votre site e-commerce en 15 minutes Tout le monde veut optimiser le référencement de son site. Comment maximiser le référencement de votre site e-commerce en 15 minutes Tout le monde veut optimiser le référencement de son site. C est simple, pas une semaine ne se passe sans qu un nouvel article

Plus en détail

Administration de votre site web

Administration de votre site web Administration de votre site web WordPress Date de révision : 11/12/2012 1 Mestres All Dev, tous droits réservés, reproduction interdite. Sommaire Connexion... 3 Gestion des articles... 4 Créer un article...

Plus en détail

1. Tout d abord, quels outils utiliser dans cette séquence?

1. Tout d abord, quels outils utiliser dans cette séquence? Séquence 2 Ü Contenu 1. Quels outils utiliser dans cette séquence? 2. Présentation du langage HTML 3. Les principes de base Prenez bien le temps de faire toutes les manipulations indiquées. C est en tapant

Plus en détail

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

Plus en détail

Consignes générales :

Consignes générales : PROCÉDURE POUR DÉPÔT DANS WEBCT Consignes générales : 1) Il est important de toujours conserver une copie de votre Webfolio ou Dossier professionnel sur votre disquette, clé USB ou sur votre disque dur

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Collège Pie10. www.danielpie10.be/site.php

Collège Pie10. www.danielpie10.be/site.php Collège Pie10 www.danielpie10.be/site.php Daniel Massart Février 2007 Sommaire 1 OBJECTIFS 1 2 TYPES DE SITES 1 2.1 Les blogs 1 2.2 Les sites «bibliothèques» 2 2.3 Les sites statiques classiques 2 2.4

Plus en détail

La Clé informatique. Formation Excel XP Aide-mémoire

La Clé informatique. Formation Excel XP Aide-mémoire La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles

Plus en détail

Guide Template kibana-hakabana. Joshua Monier joshua.monier@e-josh.fr

Guide Template kibana-hakabana. Joshua Monier joshua.monier@e-josh.fr Guide Template kibana-hakabana. joshua.monier@e-josh.fr 1 sur 14 Sommaire : I. Introduction : 3 II. Ce que nous voulons : 4 III. Comment y parvenir? 5 1. Le changement de couleur de fond : 5 2. Changer

Plus en détail

UTILISER LA MESSAGERIE

UTILISER LA MESSAGERIE UTILISER LA MESSAGERIE OUTLOOK OU WINDOWS MAIL PRESENTATION DE LA MESSAGERIE CONDITIONS POUR UTILISER LE COURRIER ELECTRONIQUE Pour envoyer un courrier sur un PC il faut un programme ou un service de messagerie.

Plus en détail

Protéger un dossier avec un.htaccess

Protéger un dossier avec un.htaccess Page 1 of 6 Protéger un dossier avec un.htaccess Tutoriel 80 commentaires Lorsque vous réalisez votre site en PHP, vous êtes souvent amenés à créer une zone "Admin" où l'accès est limité... Et il vaut

Plus en détail

Les raccourcis typographiques simples de SPIP

Les raccourcis typographiques simples de SPIP Les raccourcis typographiques simples de SPIP Dans un premier temps, nous présentons ici les raccourcis typographiques les plus courants et les plus simples. Pour les utilisateurs qui souhaiteraient affiner

Plus en détail

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /39 Thibault

Plus en détail

Mettre un site en ligne peut parfois prendre énormément de temps pour les novices de l Internet!

Mettre un site en ligne peut parfois prendre énormément de temps pour les novices de l Internet! COMMENT METTRE VOTRE SITE EN LIGNE? 1 Mettre un site en ligne peut parfois prendre énormément de temps pour les novices de l Internet! C est la raison pour laquelle nous avons mis à votre disposition divers

Plus en détail

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Mathieu LACROIX, François RÉVERET, Antoine VACAVANT mathieu.lacroix@isima.fr françois.reveret@univ-bpclermont.fr antoine.vacavant@liris.cnrs.fr 2 et 3 Avril 2007 /40 Mathieu

Plus en détail

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles :

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles : Compétences mises en œuvre : C 4.2.2.2 Concevoir les mises à jour à effectuer C 5.2.4.1 Se documenter à propos d une technologie, d un composant, d un outil ou d une méthode Ressources utiles : http://slaout.linux62.org/html_css/html.html

Plus en détail

Le Site Uranoscope. manuel du rédacteur. (sur moteur Dotclear) Février 2008 version 1.0

Le Site Uranoscope. manuel du rédacteur. (sur moteur Dotclear) Février 2008 version 1.0 Le Site Uranoscope (sur moteur Dotclear) manuel du rédacteur Février 2008 version 1.0 Consulter le blog Pour consulter le blog, lire les billets publiés, il faut aller sur internet à l adresse suivante

Plus en détail

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM V1.0 TUTORIEL JCE - EDITEUR Le nouvel outil pour vos articles... Pour les plus anciens d entre vous, vous avez connu la transmission des

Plus en détail

MODE D'EMPLOI. Rédiger ou modifier un article. Vincent Blanchard Informatique Page 1

MODE D'EMPLOI. Rédiger ou modifier un article. Vincent Blanchard Informatique Page 1 MODE D'EMPLOI Rédiger ou modifier un article Vincent Blanchard Informatique Page 1 SOMMAIRE Chapitre 1 : Présentation de votre outil rédactionnel page 3 Chapitre 2 : les attributs d un article..page 7

Plus en détail