pour apprendre le langage html



Documents pareils
HTML. Notions générales

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

Comment créer vos propres pages web?

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

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

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

Bernard Lecomte. Débuter avec HTML

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Création d un site Internet

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

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

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

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

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

Optimiser pour les appareils mobiles

Introduction à Expression Web 2

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

FAIRE UN PAIEMENT TIPI

Prise en main rapide

UTILISER LA MESSAGERIE

Création WEB avec DreamweaverMX

Créer un diaporama avec Open Office. Sommaire

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

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

Tutoriel. Votre site web en 30 minutes

Inscription de votre site sur Google Configuration du sitemap et de Webmaster Tools pour PrestaBox

GUIDE D UTILISATION DU BACKOFFICE

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog :

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.

Consignes générales :

Informations techniques préparatoires

TP JAVASCRIPT OMI4 TP5 SRC

Rapports d activités et financiers par Internet. Manuel Utilisateur

Tutoriel : Feuille de style externe

AGASC / BUREAU INFORMATION JEUNESSE Saint Laurent du Var - E mail : bij@agasc.fr / Tel : CONSIGNE N 1 :

Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop

<Créer un site Web. avec/> Suzanne Harvey

Administration du site (Back Office)

Troisième projet Scribus

Pop-Art façon Roy Liechtenstein

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Utilisation de l éditeur.

Qu'est-ce qu'un moteur de recherche. Moteur de recherche sur Internet

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

SOMMAIRE. 1. Connexion à la messagerie Zimbra Pré-requis Ecran de connexion à la messagerie 4

FrontPage Support d apprentissage septembre 2000

< Atelier 1 /> Démarrer une application web

Notes pour l utilisation d Expression Web

Création de site Internet avec Jimdo

A l aide de votre vous pouvez visiter un site web!

Publier dans la Base Documentaire

LES TOUT PREMIERS PAS

COURS WINDEV NUMERO 3

Programmation Web TP1 - HTML

Informatique : Création de site Web Master 2 ANI TP 1

Guide Reseller Onbile

Gestion des documents avec ALFRESCO

Manuel d utilisation du web mail Zimbra 7.1

Édu-groupe - Version 4.3

Les Tutoriaux Utilisez Foxmail comme client de messagerie

Publier un Carnet Blanc

Comment se connecter au dossier partagé?

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?

Accès distant Freebox v6 Configuration

Utilisation de Sarbacane 3 Sarbacane Software

Formation HTML / CSS. ar dionoea

Installation de Joomla avec Filezilla

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Thunderbird est facilement téléchargeable depuis le site officiel

Manuel d utilisation NETexcom

Normes techniques 2011

Ces Lettres d informations sont envoyées aux extranautes inscrits et abonnés sur le site assistance (voir point N 3).

Création d un site web avec Nvu

NAVIGATION SUR INTERNET EXPLORER

Un serveur FTP personnel, ça ne vous a jamais dit?

Les outils de création de sites web

Documentation Liste des changements apportés

FICHIERS ET DOSSIERS

Créer son compte del.icio.us

Les services usuels de l Internet

RÉALISATION D UN SITE DE RENCONTRE

Dragon Naturally Speaking 13

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

Guide plateforme FOAD ESJ Lille

TP1 - Prise en main de l environnement Unix.

Manuel d utilisation de la messagerie.

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

Manuel d'utilisation du site Deptinfo (Mise en route)

Partie publique / Partie privée. Site statique site dynamique. Base de données.

Cours Excel : les bases (bases, texte)

Atelier Découverte de Windows. janvier 2012

Formulaire pour envoyer un mail

Transcription:

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

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.

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:

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

* < 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 www.multiania.com 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 www.multimania.com/bennyz, 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.

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.