presentation de l’activitewebetab.ac-bordeaux.fr/.../tp_j_site_du_ccollege.pdf · - elaborer une...

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29

3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….

Analyser le

besoin

Rédiger le

Cahier des

Charges

Fonctionnel

Concevoir le

produit

Définir le

produit

Préparer la

fabrication Fabriquer Commercialiser

Service marketing Bureau d’étude Bureau des

méthodes Atelier

Service

commercial

SITE DU COLLEGE

PRESENTATION DE L’ACTIVITE

Cette activité a pour objectif de vous faire découvrir un nouveau logiciel, la structure de l’établissement, le rôle de

chacun au sein du collège et toutes les activités autres que les cours « classiques ».

TRAVAIL A REALISER

- Lire et analyser les documents proposés

- Dessiner soigneusement l’organigramme du collège sur une feuille de classeur

- Réaliser une page d’accueil et une partie du site définie avec le professeur.

MATERIEL MIS A DISPOSITION

- Contrat d’activité

- Documents ressources : dossier Spip et vos documents de travail,

- Appareil photo numérique

CE QU’IL FAUT RETENIR

- Le vocabulaire Internet

- La structure du collège et la structure du site

- Le rôle de chaque service

CONSIGNES DE TRAVAIL

- Lire attentivement tous les documents

- Respecter l’ordre de réalisation des travaux proposés

- Travailler dans le calme

- Respecter les consignes de travail écrites et/ou orales

- Prendre soin du matériel et des documents prêtés

- Réaliser un travail propre et soigné

- Ranger vos documents dans le classeur dans l’ordre des travaux effectués

- Ranger convenablement les documents restants prêtés

Ce document vous est prêté – A rendre en fin de travail – Prenez en soin, vous êtes aussi évalué sur ce point.

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


TRAVAIL A FAIRE

1ère partie

- Définir les différents titres de rubriques du site

- Elaborer un sommaire

- Elaborer une grande partie du site définie à l’avance avec le professeur et le reste du

groupe.

- Créer les liens, insérer des images, des musiques, des fonds d’écran.

- Soyez original, innovant, le plus complet possible et précis.

2ème partie

- Pour vous donner des idées, vous pouvez consulter le site actuel sur :

www.ac-bordeaux.fr/Etablissement/CLahayeAndernos

Gestionnaire – Elèves – Infirmerie – Agents de service – CDI – Vie scolaire – Professeurs

http://www.ac-bordeaux.fr/Etablissement/CLahayeAndernos

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Liste des rubriques du site à respecter impérativement

Rubriques Nom et prénom

Administration

Intendance

Vie scolaire

CDI

Effectifs des classes

Professeurs

IDD

UNSS

Activités sportives

Activités culturelles

Présentation collège

Règlements

Sites touristiques

Voyages et sorties

SEGPA

Fête du collège

Cross

Rubriques élèves

Barème de notation du site Internet

Recherche graphique Réalisation technique

Originalité : recherche /3 Sommaire /4

Contenu texte /3 Nombre de pages /3

Contenu : photo, gif /4 Liens hypertextes avec le sommaire /3

Idées /3 Fond de page et Fond sonore /3

Choix des sources /3 Liens hypertextes avec les autres pages /3

Investissement : volonté, écoute /4 Structure générale du site /4 Adresse : Code unique et exclusif affecté à un site ex : http.//technologie.fr. Chaque abonné dispose d'adresse électronique

permettant de recevoir son courrier électronique ex [email protected].

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Arobase : Le signe @ se prononce «at» dans une adresse e-mail. Signifie «chez».

Bauds: Unité de transfert des données exprimée en bits par secondes

Bug : Erreur non décelée dans un programme parfait pour vous planter à l'improviste et faire perdre les données en mémoire.

C.D.-Rom : (Compact Disc Read Only Memory) Support sur lequel on ne peut pas modifier les données. On stocke sur ce

support de ['image, du son, du texte. II faut un lecteur adéquat pour le fire.

Cliquer : Manœuvre de base qui consiste à conduire son ordinateur à l'aide de sa souris et de du bouton.

Connexion : Lien logique entre deux ordinateurs pour échanger des données

Convivial : Terme consacré pour désigner un système informatique simple d'utilisation et sympathique.

Corbeille : On y jette tout ce qui nous encombre sur le bureau. II ne faut pas oublier de la vider !

Cyber : Terme générique recouvrant tout ce qui touche aux mondes virtuels.

Downloader (télécharger) : Consiste à charger sur son ordinateur des données provenant d'un autre ordinateur Email :

Courrier électronique, à transmission immédiate. Freeware : Logiciel gratuit, mis à disposition par son inventeur.

Drivers: programme permettant de faire fonctionner un périphérique sur l’ordinateur

Hardware : Désigne le matériel informatique.

Hot line : Service de dépannage par téléphone.

HTTP : Hyper Text Transfer Protocol : Protocole de transmission de données utilisées sur le Web.

Hypertexte : Texte organisé en liens, permettant de passer d'un document à un autre ou d'un site à un autre à l'aide d'un simple

clic de souris.

Icône : Image de petit format représentant un objet un fichier de commande ou un programme.

Internet : Réseau mondial de réseaux d'ordinateurs.

IRC : Internet Relay Chat, discuter virtuellement en temps réel avec un ou plusieurs interlocuteurs.

ISP : Internet Service Provider: Fournisseur d'accès Internet.

Login : Dans un adresse Email ce vont les lettres qui vous identifie.

Modem: périphérique qui transmet les données informatiques via les lignes téléphoniques

Moteur de recherche : Outils offert par le provider permettant de trouver un site à ['aide d'un mot clé.

Navigateur : Logiciel permettant de se connecter et consulter des sites sur INTERNET (Netscape ou Internet explorer sont les

plus connus)

Netiquette : Ensemble des règles de politesse et de bon sens en vigueur sur le net.

Nethead (tête de net) : Individus accros du Net.

Newsgroup : Forums spécialisés (discussion des groupes) On line où on échange des idées. En différé, non en temps réel.

On line (en ligne) : Information qui transite par réseau.

Off line : Tout ce qui n'est pas On line, tout ce qui est palpable.

Patch : série de codes qui modifient le comportement d'un logiciel original. Ils ont parfois leur propre processus d'installation.

Plantage, Planter : Arrêt brutal de toute activité par votre ordinateur. Protocole : Ensemble des règles régissant la

communication entre les ordinateurs

Plug and play : On branche et ça marche ! Ce dit des périphériques qui n’ont pas besoin de fastidieux paramétrages.

Provider (Fournisseurs d'accès) : Société qui permet l'accès à Internet.

Shareware : Logiciel mis à disposition du public. On peut le télécharger gratuitement mats, si on l'utilise de façon régulière on

verse une contribution à son auteur.

Sauvegarde : Enregistrement des données.

Serveur : Ordinateur auprès duquel d'autres ordinateurs ou périphériques peuvent s'approvisionner en données.

Site : Lieu d'accueil et/ou d’information sur le Net.

Soft ou Software : désigne les logiciels et les applications informatiques en général.

Surfer : Se connecter à Internet, visiter et observer site après site, cliquer sur sa souris, se balader dans un univers virtuel.

Wanadoo : fournisseur d’accès de France Télécom

Windows 98 : système d’exploitation, c’est lui qui fait fonctionner l’ordinateur.

Web : Raccourci pour World Wide Web, ou W3. Un maillage mondial, sous-ensemble d'internet.

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Monsieur Le Principal, du Clg d’Andernos.

Aux élèves, des différentes classes de 3°

Objet : demande de création d’un site de présentation du collège.

A Andernos,

Le 27 mars 2008

Mesdemoiselles, Messieurs,

Je me permets de vous adresser ce courrier dans un but très précis.

Pourriez-vous, dans le cadre du programme de technologie, produire comme service un site internet de présentation du collège,

destiné à informer les élèves, les nouveaux élèves et les parents d’élèves, de notre structure éducative.

Particulièrement, un meilleur accueil serait ainsi assuré auprès des élèves de 6°, en leurs communiquant des informations

répondants à leur besoin.

Toute collaboration avec les différentes équipes vous est accordée, et je vous laisse libre choix quant à la présentation du

site.

Dans l’attente, veuillez agréer, Mesdemoiselles, Messieurs, mes salutations distinguées.

Le Principal,

M. MILAN

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


DOCUMENTS RESSOURCES SPIP Publier avec SPIP La publication se fait à partir d’une interface accessible via le site du collège en cliquant sur "Espace Privé"

Le rédacteur, l’administrateur de la rubrique ou l’administrateur général rentre dans l’interface SPIP après

s’être identifiés (login + mot de passe).

Interface de SPIP

Interface complète de l’administrateur général

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Rédacteur Il peut :

écrire un nouvel article,

réaliser des albums photo,

écrire une nouvelle brève,

continuer et corriger ses articles "en cours de rédaction" ou "proposés à la publication",

consulter et donner son avis pour les articles des autres rédacteurs, proposés à la publication,

modifier une brève "à valider",

référencer un site web.

Administrateur de rubrique Outre les possibilités du rédacteur, il peut pour la (ou les) rubrique(s) qu’il administre :

créer des sous-rubriques,

créer des diaporamas,

corriger et valider les articles proposés à la publication,

publier une brève "à valider",

proposer un nouveau rédacteur,

référencer un site web.

Administrateur général Outre les possibilités abordées ci-dessus, étendues à toutes les rubriques, il peut :

valider les sites web référencés,

configurer le site,

maintenir le site (sauvegarde, cache, ...),

gérer les auteurs,

personnaliser SARKA SPIP

Ce qu’il faut bien comprendre c’est que ce qu’on tape sous SPIP ne correspond pas à ce qui sera affiché sur le

site du collège. Le contenu sera identique mais la mise en forme du texte sera modifiée.

Ecrire un article 1. Entrez dans l’interface SPIP (en utilisant l’espace privé, votre login et votre mot de passe)

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


2. Cliquez sur : "Ecrire un nouvel article"

3. A l’intérieur de la rubrique Sélectionnez la rubrique dans laquelle vous voulez placer votre article.

C’est aussi par ce même procédé que l’on

peut changer (plus tard) un article de rubrique.

4. Dans la page d’édition de l’article, remplissez les différents champs : titre (=obligatoire), descriptif,

texte, ... en utilisant : les raccourcis typographiques pour formater votre texte. Vous pourrez

1. placer une image dans un article

2. Joindre un document à un article

5. Lorsque votre article est prêt, cliquez sur [Valider] (en bas de page).

6. Maintenant que votre article est créé vous pouvez encore le modifier :

7. Si votre article est fini, cliquez sur Demander la publication de cet article.

Remarque1 : Vous pouvez rédiger un article en plusieurs fois (revenir le compléter plus tard, le modifier, le

corriger), tant que l’article n’a pas été publié par les administrateurs.

Remarque2 : Seul l’administrateur peut corriger un article publié. Pour qu’un rédacteur puisse revenir sur son

article (déjà publié), l’administrateur devra le remettre "en cours de rédaction".

Les raccourcis typographiques Pour faciliter la mise en page des documents publiés avec SPIP, le système propose un certain nombre de

« raccourcis typographiques » destinés à :

simplifier l’utilisation par des utilisateurs ne connaissant pas le code HTML

faciliter le traitement automatique de la mise en page.

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Paragraphes et retour à la ligne Pour créer des paragraphes, il suffit de sauter une ligne.

Pour faire un simple retour à la ligne, il faut mettre un _ (underscore) suivi d’une espace au début de la ligne

suivante.

Gras et italique On indique simplement du texte en italique en le plaçant entre des accolades simples : {du texte en italique}

Donne

du texte en italique

On indique du texte en gras en le plaçant entre des accolades doubles : {{du texte en gras}}

Donne

du texte en gras

Intertitres Les intertitres sont des titres à l’intérieur d’un texte permettant d’en indiquer la structure (comme ceux présents

sur cette page). Dans SPIP, on les indique très simplement en les plaçant entre des accolades triples : {{{Un titre de partie}}}

Donne

Un titre de partie

Trait de séparation horizontal Il est très simple d’insérer un trait de séparation horizontal sur toute la largeur du texte. Il suffit de placer une

ligne ne contenant qu’une succession d’au moins quatre tirets. ----

Donne le trait ci-dessous

Les couleurs On peut modifier la couleur de quelques mots en utilisant des crochets et en nommant la couleur.

Donne

Du texte, puis du texte en couleur et encore du texte

Il est possible d’utiliser les 11 couleurs ci-dessous :

o noir

o blanc

o rouge

o vert

o bleu

o jaune

o gris

o marron

o violet

o rose

o orange

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Listes On peut fabriquer des listes dans SPIP : il suffit de revenir à la ligne et de commencer la nouvelle ligne avec un

tiret (« - ») et d’ajouter "*" ou "#". -*bla bla

-*bla bla

Donne

bla bla

bla bla -**bla bla

-**bla bla Donne

o bla bla

o bla bla -*bla bla

-**bla bla

-***bla bla

-***bla bla

-* bla bla Donne

bla bla

o bla bla

bla bla

bla bla

bla bla

Avec les # on peut insérer des numéros

-#bla bla

-##bla bla

-###bla bla

-###bla bla

-#bla bla

Donne

1. bla bla

1. bla bla

1. bla bla

2. bla bla

2. bla bla

Les liens hypertextes On fabriquera facilement un lien hypertexte avec le code suivant : [texte du lien->URL] Exemple : Quand on tape : SPIP est une initiative d’ [uZine->http://www.uzine.net/].

On obtient :

SPIP est une initiative d’uZine.

L’URL peut être une adresse absolue (commençant, comme ici, par http://), une adresse relative (vers une autre

page du même site), un lien vers un document utilisant un protocole de l’internet (ftp://...), une adresse email

(mailto:[email protected])...

http://www.uzine.net/

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Liens hypertextes à l’intérieur du site Ce même système de liens hypertextes facilite, de plus, la création de liens à l’intérieur de votre site sous SPIP.

La seule subtilité consiste à repérer le numéro de l’article, de la rubrique, ou de la brève vers laquelle vous

voulez mener votre lien hypertexte : lorsque vous « visitez », dans l’espace privé, un article, une brève ou une

rubrique, la colonne de gauche contient un pavé indiquant, en gros caractères, ce numéro. C’est ce numéro que

vous allez indiquer dans le lien hypertexte :

Lien vers l’article 4 : [l'article->art4] Donne

l’article

Lien vers la rubrique 10 : [blabla->rub10]

Donne

blabla

Lien vers la brève 1 : [blibli->br1]

Donne

blibli

Notes de bas de page Une note de bas de page est, habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris

en bas de page et proposant un complément d’information.

Dans SPIP, cette fonctionnalité (assez lourde à gérer manuellement en HTML) est automatisée : les notes sont

numérotées par SPIP, qui gère également des liens hypertextes à l’intérieur du document pour passer

directement de l’appel de note au texte de la note correspondante, et vice-versa. Une note de bas de page est

indiquée, dans SPIP, entre doubles crochets : Une note [1] de bas de page. Donnera : Une note [1] de bas de

page. (Le numéro 1 sera incrémenté automatiquement pour chaque nouvelle note).

Tableaux Pour réaliser des tableaux dans SPIP, il suffit de faire des lignes dont les « cases » sont séparées par le symbole

« | » (pipe ou trait vertical), lignes commençant et se terminant par des traits verticaux. Il est impératif de laisser

des lignes vides avant et après ce tableau.

Par exemple :

| {{Nom}} | {{Prénom}} | {{Age}} |

| Marso | Ben | 23 ans |

| Capitaine | | non connu |

| Philant | Philippe | 46 ans |

| Cadoc | Bébé | 4 mois |

Donne :

Nom Prénom Age

Marso Ben 23 ans

Capitaine

non connu

Philant Philippe 46 ans

Cadoc Bébé 4 mois

http://www3.ac-nancy-metz.fr/clg-j-ferry-neuves-maisons/spip.php?article4

http://www3.ac-nancy-metz.fr/clg-j-ferry-neuves-maisons/spip.php?rubrique10

http://www3.ac-nancy-metz.fr/clg-j-ferry-neuves-maisons/spip.php?breve1

http://www3.ac-nancy-metz.fr/clg-j-ferry-neuves-maisons/spip.php?article14#nb1

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Ecrire dans un premier cadre Pour écrire dans un cadre on peut taper :

On obtient

cadre pour écrire un texte

Ecrire dans un deuxième cadre Pour écrire dans un autre cadre on peut taper :

On obtient

Une autre manière d’écrire dans un cadre

Ecrire avec des exposants Pour écrire un exposant on peut taper :

On obtient

3ème

Ecrire du code informatique Pour écrire du code informatique, on peut taper :

On obtient : On tape ici un code et SPIP ne change rien.

Ecrire un texte barré Pour écrire un texte barré on peut taper :

On obtient :

Pour écrire un texte barré

Code HTML pour les experts Pour écrire sous une forme plus élaborée, on peut utiliser du code HTML :

Exemple :

On obtient :

On tape le texte qu'on veut ici Voilà tous les raccourcis qu’il vous faudra connaitre, pour "bien" débuter avec SPIP. Mais il en existe d’autres

que vous retrouverez dans l’interface d’administration : l’aide en ligne.

Les formats d’images numériques Vous importerez des images dans l’un des trois formats ci-dessous :

JPEG

PNG

GIF

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


D’autres formats existent : .BMP ou .TIFF qui sont trop lourd pour le web.

La qualité de l’image ne doit pas descendre sous 72dpi

La largeur maximum de l’image sera de 500px

Pour réduire la taille de vos images, je vous suggère l’utilisation d’un petit logiciel gratuit de retouche

d’images : PhotoFiltre.

Installation de Photofiltre 1. Cliquez sur http://photofiltre.free.fr/

2. cliquez sur Français

3. Dans le menu TELECHARGER, cliquez sur Version française

4. Cliquez sur Enregistrer le fichier

5. Lancer l’installation en cliquant sur l’icone

Utiliser PhotoFiltre pour modifier la taille d’une image

1. Lancer le logiciel PhotoFiltre en double-cliquant sur l’icone ci-dessous :

http://photofiltre.free.fr/

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


2. Vous devez obtenir l’affichage ci-dessous.

3. Pour importer une photo, il suffit de cliquer sur FICHIER/OUVRIR

4. Pour connaitre et changer la taille de l’image il suffit de cliquer sur IMAGE/TAILLE DE L’IMAGE. Vous

modifiez la case largeur pour qu’elle ne dépasse pas 500 pixels

5. Vous validez et enregistrez l’image sur votre disque dur (sous un autre nom si vous voulez).

Importer une image dans votre article Pour joindre une image à un article, il est impératif que l’article ait déjà été créé.

Attention, à ne pas placer des images trop lourdes ; 500 pixels en largeur maximum

1. Dans l’interface d’administration, naviguez dans l’arborescence jusqu’à l’article auquel vous voulez

joindre une image.

2. Cliquez sur Modifier cet article

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


3. Dans la page d’édition de l’article, sur le coté gauche : Ajouter une image. Cliquez d’abord sur le

triangle noir pour développer (ci-contre). Cliquez sur [Parcourir], puis allez sélectionner l’image que

vous souhaitez attacher à l’article. Cliquez ensuite sur [Télécharger], attendez que le fichier ait été

chargé sur le serveur, plus le fichier est gros plus le transfert sera long. Une fois le fichier joint, la page

se rafraichit.

4. Pour faire apparaitre l’image dans l’article il vous suffira d’y copier les "petits" codes (dans les champs

"texte" et/ou "descriptif") :

1. <img5|left> : pour aligner l’image à gauche, par rapport à un paragraphe, une ligne de texte,

etc. ...

2. <img5|center> : pour centrer l’image

3. <img5|right> : pour aligner l’image à droite, par rapport à un paragraphe, une ligne de texte,

etc. ...

5. Dans les paramètres de l’image que vous avez ajoutée, vous pouvez : Modifier l’image, Changer le titre

de l’image et le descriptif si vous le souhaitez. Vous pouvez également supprimer l’image tant que

l’article est toujours "en cours de rédaction". Ensuite seuls les administrateurs pourront

supprimer/modifier l’image.

Le développement du langage HTML

HTML est le langage de programmation utilisé pour créer des documents W3. Bien que les spécifications

officielles du HTML aient été développées depuis quelques années, les navigateurs W3 peuvent reconnaître des

étiquettes qui ne sont pas comprises dans ces spécifications. Lorsque plusieurs personnes demandent une liste

de "toutes les étiquettes HTML"; elles veulent généralement savoir quelles étiquettes elles peuvent inclure dans

leurs pages (en considérant que les lecteurs verront ce que l'auteur veut que l'on voit). Le guide rapide du

langage HTML a été conçu pour subvenir à ce besoin. J'ai tenté d'y inclure toutes les étiquettes comprises par

les lecteurs W3 les plus importants de nos jours, mais il existe plusieurs nuances qui font que l'utilisation

générale est imprécise.

Le standard officiel du HTML peut être trouvé au Consortium World Wide Web (W3C), de paire avec le

Internet Engineering Task Force (IETF). Le W3C a émis plusieurs versions des spécifications du HTML,

incluant le HTML 2.0, HTML 3.0, et tout récemment le HTML 3.2. Au même moment, les fabricants de

navigateurs, comme Netscape et Microsoft, ont souvent développé leurs propres "extensions" à HTML et les

ont incorporées à leurs navigateurs. Dans quelques cas, comme par exemple l'étiquette <CENTER> de

Netscape, ces extensions sont devenues un standard adopté par les fabricants de navigateurs.

Le HTML 2.0 qui représentait la version courante du HTML en juin 1994, est le standard de base que tous les

navigateurs d'aujourd'hui -- incluant les navigateurs-textes seulement -- devraient supporter. Le langage HTML

2.0 reflète la conception originale du HTML comme un langage indépendant des plates-formes et des logiciels

pour afficher de l'information organisée (au lieu de spécifier exactement comment la page doit être affichée). Si

vous voulez être certains que tous les utilisateurs vont être capables de visionner tout sur vos pages, n'utilisez

que des étiquettes HTML version 2.0.

La version HTML 3.0 , sortie en 1995, a tenté de développer la version 2.0 en ajoutant des options comme les

tableaux et un plus grand contrôle du texte autour des graphiques. Bien que quelques options du HTML 3.0 ont

été largement adoptées par les développeurs de navigateurs, plusieurs ne l'ont pas été. Dans quelques cas, des

approches alternatives créées par les développeurs sont devenues des étiquettes "officielles". La version 3.0 est

maintenant expirée et n'est plus le standard officiel.

http://www.w3.org/

http://www.ietf.org/

http://www.w3.org/pub/WWW/MarkUp/html-spec/

http://www.w3.org/pub/WWW/MarkUp/html3/

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


En mai 1996, W3C fournissait la version HTML 3.2 , qui a été conçue pour refléter et standardiser les pratiques

généralement acceptées. Ainsi, le HTML 3.2 inclut les étiquettes HTML 3.0 qui ont été adoptées par les

développeurs de navigateurs comme Netscape et Microsoft, en plus des extensions largement supportées de

HTML. Dans le Position Statement on HTML, W3C recommande que les systèmes d'information utilisent les

spécifications de la version 3.2 de HTML. Ainsi, la version 3.0 du Guide rapide du Langage HTML comporte

toutes les étiquettes du HTML 3.2. Les versions courantes des principaux navigateurs supportent toutes ces

étiquettes.

Il existe aussi quelques extensions Netscape et Microsoft au HTML qui ne font pas partie de l'esquisse HTML 3.2; soit parce qu'elles

ne sont pas utilisées, soit parce qu'elles ont été implantées après que les spécifications du HTML 3.2 aient été écrites. Parce que le

navigateur Netscape a été l'un des premiers navigateurs à supporter certaines options du HTML 3.0 (et que Netscape contrôle 70% du

marché), plusieurs personnes ont faussement compris que toutes les extensions Netscape (incluant les étiquettes comme le <BLINK>

et les options de cadres) font parties du HTML 3.0 ou HTML 3.2.

Dans le dilemme d'utiliser n'importe quelles étiquettes émises par Netscape ou Microsoft, il faut se rappeler que les personnes utilisent

d'autres navigateurs qui ne représentent pas nécessairement la page dans l'état que l'on veut. Il faudrait aussi prendre en note qu'il n'est

pas garantie que les étiquettes non-standardisées vont l'être dans le futur. Alors il ne dépend que de vous, d'utiliser les étiquettes

Netscape ou Microsoft. Plusieurs personnes ont des avis contraires sur le fait d'utiliser ou non les étiquettes non-officielles. Mon point

de vue est qu'aussi longtemps que vous comprenez les différences, vous devriez faire de votre mieux pour vous et votre audience. Le

Guide Rapide du Langage HTML refl&ecute;te cette approche. Ce guide n'est pas une publication officielle, mais devrait fournir une

idée sur les étiquettes qui sont largement utilisées et à quel standard elles se conforment.

Prologue L'item prologue devrait aller au tout début de votre fichier. Le prologue n'est pas requis pour que les navigateurs reconnaissent les

documents HTML, par contre il peut quand même fournir aux navigateurs et personnes lisant votre code source des indications sur les

étiquettes qui ont été utilisées. La syntaxe exacte du prologue varie dépendamment de la version du HTML DTD (Document Type

Definition) que vous utilisez. J'ai inclus le prologue à utiliser si votre document se conforme au HTML 3.2; ne l'utilisez pas si vous

insérez des extensions Netscape ou Microsoft.

<XMP> La spécification courante du HTML recommande de ne pas utiliser l'étiquette <XMP>, puisque cela cause de nombreuses interactions

avec les techniques de gestion de l'information et tend à être utilisée de façon inconsistante. L'étiquette <PRE> devrait être utilisée à la

place.

<BLOCKQUOTE>

L'étiquette <BLOCKQUOTE> permet de déplacer les marges de gauche et droite, elle est donc souvent utilisée

pour mettre en valeur le texte (ce que le langage HTML 2.0 ne supporte pas directement) au lieu de mettre le

texte entre guillemet. Soyez avertis que les navigateurs n’affichent pas cette étiquette de la même façon, bien

que de plus en plus de navigateurs l'affiche en tant que retrait du texte.

Étiquettes d'alignement

L'esquisse HTML 3.2 supporte les attributs d'alignement pour les paragraphes et les étiquettes d'en-tête, et le

<CENTER> ; étiquette développée à l'origine par Netscape. Aujourd'hui, l'étiquette <CENTER> est nécessaire

dans les situations où les navigateurs ne reconnaissent pas les attributs d'alignement.

http://www.w3.org/pub/WWW/MarkUp/Wilbur/

http://www.w3.org/pub/WWW/MarkUp/Activity

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Le plus grand problème avec <CENTER> est que cette étiquette comprend un saut de paragraphe autour du matériel centré, mais les

navigateurs ne reconnaissant pas le <CENTER> vont simplement l'ignorer, et ainsi n'affichent pas l'information comme l'auteur le

voudrait. Comme de plus en plus de navigateurs reconnaissent les attributs d'alignement, l'utilisation du <P ALIGN=CENTER></P>

serait préférable à l'étiquette non-standard <CENTER>

L'étiquette <P> Plusieurs étiquettes HTML encadrent l'information; elles ont une étiquette de début et de fin, avec le texte au milieu (ex: <B>Ceci est

en gras</B>). L'étiquette <P>, contrairement aux autres a été conçue à l'origine comme une étiquette seule marquant les espaces entre

les paragraphes. Le problème avec cette approche consistait au fait que cela ne permettait pas l'utilisation des options comme centré et

alignement à droite des paragraphes puisqu'il n'existait aucuns moyens de marquer le début et la fin du texte devant être aligné. Par

conséquent, le HTML 3.0 a proposé une étiquette d'encadrement <P>, permettant ainsi aux paragraphes d'être présentés comme:

<P>Voici du texte</P>. L'étiquette de début peut contenir des attributs d'alignement. L'étiquette de fin de champ </P> peut être mise

de côté si on ne modifie pas l'alignement d'un paragraphe, par contre cela rend le code plus clair si l'on prend soin de poser les limites

du paragraphe dans le fichier source HTML.

Étiquette de tableaux Il existe encore des débats à propos des étiquettes de tableaux, spécialement concernant la méthode de Netscape permettant de

spécifier la largeur du tableau et des colonnes en pourcentage en plus d'un chiffre absolu en pixels. En général, l'instauration des

tableaux chez les navigateurs principaux est maintenant consistante.

GÉNÉRAL

Type de

document <HTML></HTML> (au début et à la fin du document)

Titre <TITLE></TITLE> (nom du fichier; doit être dans l'en-tête)

En-tête <HEAD></HEAD> (titre de description)

Corps <BODY></BODY> (corps du document)

DÉFINITION STRUCTURALE

En-tête <H?></H? > (6 niveaux d'en-

têtes)

En-tête alignée <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Division <DIV></DIV>

Division alignée <DIV

ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>

Bloc en retrait <BLOCKQUOTE></BLOCKQUOTE>

Emphase <EM></EM> (habituellement

présenté en

italique)

Forte emphase <STRONG></STRONG> (habituellement

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


présenté en

gras)

Citation <CITE></CITE> (habituellement

en italique)

Code <CODE></CODE> (pour

l'affichage de

fichier de

programmation)

Échantillon de sortie <SAMP></SAMP>

Entrée au clavier <KBD></KBD>

Variable <VAR></VAR>

Définition <DFN></DFN> (non officiel)

Adresse de l'auteur(e) <ADDRESS></ADDRESS>

Grande police de

caractères <BIG></BIG>

Petite police de caractères <SMALL></SMALL>

FORMAT DE PRÉSENTATION

Gras <B></B>

Italique <I></I>

N3.0b Souligné <U></U> (non officiel)

Rayé <STRIKE></STRIKE> (non officiel)

N3.0b Rayé <S></S> (non officiel)

Indice <SUB></SUB>

Exposant <SUP></SUP>

Imprimé <TT></TT> (présenté

dans une

police de

caractères à

simple

espacement)

Pré formaté <PRE></PRE> (affiche le

texte dans son

format

original)

Largeur <PRE WIDTH=?></PRE> (s'applique

aux

caractères)

Centré < CENTER></CENTER> (pour le texte

et les images)

N1.0 Clignotement <BLINK>< /BLINK> (étiquette

tournée en

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


dérision)

Grandeur de la police <FONT SIZE=?></FONT> (entre 1-7)

Changement de la grandeur de la police <FONTSIZE=+|-?></FONT>

N1.0 Grandeur de la police de base <BASEFONT SIZE=?> (entre 1-7;

par défaut 3)

Couleur de la police <FONT COLOR="#$$$$$$"></FONT>

N3.0b Sélection de fonte <FONT FACE="***"></FONT>

N3.0b Texte en multi-colonnes <MULTICOL COLS=?></MULTICOL>

N3.0b Longueur de la colonne <MULTICOL GUTTER=?></MULTICOL> (défaut est

10 pixels)

N3.0b Largeur de la colonne <MULTICOL WIDTH=?></MULTICOL>

N3.0b Espaceur <SPACER>

N3.0b Type d'espaceur <SPACER TYPE=horizontal|

vertical|block>

N3.0b Grandeur d'espaceur <SPACER SIZE=?>

N3.0b Dimensions de l'espaceur <SPACER WIDTH=? HEIGHT=?>

N3.0b Alignement de l'espaceur <SPACER ALIGN=left|right|center>

LIENS ET IMAGES

Lier quelque chose <A HREF="URL"></A>

Lier un pointeur <A HREF="URL#***"></A> (si c'est dans

un autre

document)

<A HREF="#***">< /A> (si c'est dans

le même

document)

N2.0 Fenêtre cible <A HREF="URL" TARGET="***|

|_blank|_self|_parent|_top"></A>

Définition du pointeur <A NAME="***"></A>

Relation <A REL="***"></A> (pas

largement

implanté)

Relation inverse <A REV="***"></A> (pas

largement

implanté)

Afficher une image <IMG SRC="URL">

Alignement <IMG

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

N1.0 Alignement <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|

ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternative <IMG SRC="URL" ALT="***"> (si l'image

n'est pas

affichée)

Carte-image <IMG SRC="URL" ISMAP> (requiert un

exécutable)

Carte-image client <IMG SRC="URL" USEMAP="URL"> (requiert un

exécutable)

Nom de la carte <MAP NAME="***"></MAP> (décrit la

carte)

Sections de la carte <AREA SHAPE="RECT" COORDS=",,,"

HREF="URL"|NOHREF>

Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (en pixels)

Bordure <IMG SRC="URL" BORDER=?> (en pixels)

Espace environnant <IMG SRC="URL" HSPACE=? VSPACE=?> (en pixels)

N1.0 Low-Res Proxy <IMG SRC="URL"LOWSRC="URL">

N1.1 Appel client <META HTTP-EQUIV="Refresh" CONTENT="?;

URL=URL">

N2.0 Objet encastré <EMBED SRC="URL"> (insert un

objet dans

la page)

N2.0 Dimension de l'objet <EMBED SRC="URL" WIDTH=? HEIGHT=?>

SÉPARATEURS

Paragraphe <P></P> (étiquette de

fin souvent

pas

nécessaire)

Alignement du texte <P ALIGN=LEFT|CENTER|RIGHT></P> (double

retour)

Fin de ligne <BR> (simple

retour)

Alignement forcé <BR CLEAR=LEFT|RIGHT|ALL>

Ligne horizontale <HR>

Alignement <HR ALIGN=LEFT|RIGHT|CENTER>

Épaisseur <HR SIZE=?> (en pixels)

Largeur <HR WIDTH=?> (en pixels)

N1.0 Largeur <HR WIDTH=%> (en tant que

pourcentage

de la largeur

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


de la page)

Ligne pleine <HR NOSHADE> (sans l'effet

3D)

N1.0 Sans-coupure <NOBR></NOBR> (prévient la

coupure des

lignes)

N1.0 Coupure de mot <WBR> (endroit où

couper une

ligne si

nécessaire)

LISTES

Liste non-ordonnée <UL><LI></UL> (<LI> avant chaque item de la liste)

Compacte <UL COMPACT></UL>

N1.0 Type d'indicateur <UL TYPE=DISC|CIRCLE|SQUARE> (pour la liste entière)

<LI TYPE=DISC|CIRCLE|SQUARE> (celui-ci & subséquent)

Liste ordonnée <OL><LI></OL> (<LI> avant chaque item de la liste)

Compacte <OL COMPACT></OL>

N1.0 Type de nombres <OL TYPE=A|a|I|i|1> (pour la liste entière)

<LI TYPE=A|a|I|i|1> (celui-ci & subséquent)

N1.0 Nombre de départ <OL START=?> (pour la liste entière)

<LI VALUE=?> (celui-ci & subséquent)

Liste de définitions <DL><DT><DD></DL> (<DT>=terme, <DD>=définition)

Compacte <DL COMPACT></DL>

Liste de menus <MENU><LI></MENU> (<LI> avant chaque item de la liste)

Compacte <MENU COMPACT></MENU>

Liste de répertoires <DIR><LI></DIR> (< LI> avant chaque item de la liste)

Compacte <DIR COMPACT></DIR>

ARRIÈRE-PLAN ET COULEURS

N1.1 Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> (ordre est rouge/vert/bleu)

Texture <BODY BACKGROUND="URL">

N1.1 Couleur du texte <BODY TEXT="#$$$">

N1.1 Couleur des liens <BODY LINK="#$$$">

Couleur des liens visités <BODY VLINK="#$$$">

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


N1.1 Liens actifs <BODY ALINK="#$$$">

CARACTÈRES SPÉCIAUX

code ISO &#?; (où le ? représente le code ISO8859-1)

< <

> >

& &

" "

Registered TM ®

Copyright ©

Espace

FORMULAIRES

Formulaire <FORM ACTION="URL" METHOD=GET|POST></FORM>

N2.0 Transfert de

fichier <FORM ENCTYPE="multipart/form-data></FORM>

Champ

d'entrée de

données

<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|

SUBMIT|RESET">

Nom du

champ <INPUT NAME="***">

Valeur du

champ <INPUT VALUE="***">

Vérifié? <INPUT CHECKED> (boutons de

vérification et

boutons radio)

Grandeur

du champ <INPUT SIZE=?> (en caractères)

Longueur

maximum <INPUT MAXLENGTH=?> (en caractères)

Liste de

sélection <SELECT></SELECT>

Nom d'une

liste <SELECT NAME="***"></SELECT>

Nombre

d'options <SELECT SIZE=?></SELECT>

Choix <SELECT MULTIPLE> (permet une

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


multiples sélection multiple)

Option < OPTION> (items qui peuvent

être sélectionnés)

Option par

défaut <OPTION SELECTED>

Grandeur de

la boîte

d'entrée de

données

<TEXTAREA ROWS=? COLS=?>

</TEXTAREA>

Nom de la

boîte <TEXTAREA NAME="***">

</TEXTARE A>

"Wrap

Text" <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL>

</TEXTAREA>

TABLEAUX

Définition d'un

tableau <TABLE></TABLE>

Bordure du

tableau <TABLE BORDER=?></TABLE>

Espace des

cellules <TABLE CELLSPACING=?>

Espace de la

bordure des

cellules

<TABLE CELLPADDING=?>

Largeur <TABLE WIDTH=?> (en pixels)

Largeur <TABLE WIDTH=%> (pourcentage de la

page)

Lignes du tableau <TR></TR>

Alignement <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Cellules du

tableau <TD></TD> (doit apparaître à

l'intérieur des lignes

d'un tableau)

Alignement <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Sans-coupure <TD NOWRAP>

Débordement

d'une colonne <TD COLSPAN=?>

Débordement des

lignes <TD ROWSPAN=?>

N1.1 Largeur <TD WIDTH=?> (en pixels)

N1.1 Largeur <TD WIDTH=%> (en pourcentage du

tableau)

N3.0

b Couleur de

cellule

<TD BGCOLOR="#$$$$$$">

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


En-tête du

tableau <TH></TH> (semblable aux

données, centré et

gras)

Alignement <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Sans-retour <TH NOWRAP>

Débordement de

colonnes <TH COLSPAN=?>

Débordement de

lignes <TH ROWSPAN=?>

N1.1 Largeur <TH WIDTH=?> (en pixels)

N1.1 Largeur <TH WIDTH=%> (en pourcentage du

tableau)

N3.0

b Couleur de

cellule

<TH BGCOLOR="#$$$$$$">

Légende du

tableau <CAPTION></CAPTION>

Alignement <CAPTION ALIGN=TOP|BOTTOM> (sur ou sous le

tableau)

CADRES

N2.0 Cadre du

document <FRAMESET></FRAMESET> (au lieu de

<BODY>)

N2.0 Hauteur

des lignes <FRAMESET ROWS=,,,></FRAMESET> (en pixels ou

pourcentage

)

N2.0 Hauteur

des lignes <FRAMESET ROWS=*></FRAMESET> (* =

grandeur

relative)

N2.0 Largeur

des

colonnes

<FRAMESET COLS=,,,></FRAMESET> (en pixels ou

pourcentage

)

N2.0 Largeur

des

colonnes

<FRAMESET COLS=*></FRAMESET> (* =

grandeur

relative)

N3.0

b Largeur

de la

bordure

<FRAMESET BORDER=?>

N3.0

b Bordure

s

<FRAMESET FRAMEBORDER="yes|no">

N3.0

b Couleur

de la

bordure

<FRAMESET BORDERCOLOR="#$$$$$$">

N2.0 Définition <FRAME> (items d'un

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


d'un cadre cadre

individuel)

N2.0 Afficher le

document <FRAME SRC="URL">

N2.0 Nom du

cadre <FRAME NAME="***"|_blank|_self|_parent|_top>

N2.0 Largeur

de la

marge

<FRAME MARGINWIDTH=?> (marges à

gauche et à

droite)

N2.0 Hauteur

de la

marge

<FRAME MARGINHEIGHT=?> (marges en

haut et en

bas)

N2.0 Défilement

du texte <FRAME SCROLLING="YES|NO|AUTO">

N2.0 Défilement

du texte <FRAME NORESIZE>

N3.0

b Bordure

s

<FRAME FRAMEBORDER="yes|no">

N3.0

b Couleur

de la

bordure

<FRAME BORDERCOLOR="#$$$$$$">

N2.0 Contenu

non-

encadré

<NOFRAMES></NOFRAMES> (pour les

lecteurs

WWW

incapables

d'utiliser les

cadres)

JAVA

Applet <APPLET></APPLET>

Nom de fichier applet <APPLET CODE="***">

Paramètres <APPLET PARAM NAME="***">

Position de l'applet <APPLET CODEBASE="URL">

Identificateur Applet <APPLET NAME="***"> (pour faire référence

ailleurs dans une page)

Alternative en texte <APPLET ALT="***"> (pour les navigateurs non-

java)

Alignement <APPLET ALIGN="LEFT|RIGHT|CENTER">

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Grandeur <APPLET WIDTH=? HEIGHT=?> (en pixels)

Espacement <APPLET HSPACE=? VSPACE=?> (en pixels)

DIVERS

Commentaires  (n'est pas affiché par le

lecteur WWW)

Prologue HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN">

Indicateur de recherche <ISINDEX> (indique un index de

recherche)

N1.0 Ligne de commande <ISINDEX PROMPT="***"> (texte pour indiquer

l'entrée de données)

Envoie de la recherche <A HREF="URL?***"></A> (utiliser un point

d'interrogation)

URL de ce fichier <BASE HREF="URL"> (doit être dans l'en-tête

du document)

Nom de base de la fenêtre <BASE TARGET="***"> (doit être dans l'en-tête

du document)

Relation <LINK REV="***" REL="***" HREF="URL"> (dans l'en-tête du

document)

Information META <META> (dans l'en-tête du

document)

Feuilles de styles <STYLE></STYLE> (pas supporté

largement)

Scripts <SCRIPT></SCRIPT> (pas supporté

largement)

HTML INTRODUCTION 1. Définition HTML est Hyper Text Markup Language

HTML est un langage de description. A l'aide d'instructions que vous insérez, vous allez définir la forme de votre texte (gras, italique,

polices, ...), inclure des images, du son, implanter des liens vers d'autres pages...

Exemple Une balise (ou tag) est facilement identifiable, elle est constituée d'un mot (ou plusieurs dans certain cas) encadrée par les signes

inférieur (<) et supérieur (>).

<title>Titre de votre page</title>

A. Balise d'ouverture : <title >

B. Votre texte : titre de votre page

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


C. Balise de Fermeture : </title>

2. Les premières balises (ou tags) La balise : Elle apparaît en premier et signale aux différents navigateurs que c'est une page Web, le tag indique la fin de la page.

La balise <head> : Elle indique les informations propres à votre page. Elle inclut les balises title et body ainsi que les balises meta

qui permettront aux moteurs de recherche d'indexer votre site Web.

La balise <title> : Elle définit le titre de votre site (ou page). Ce titre se loge dans la barre supérieure de votre navigateur, ainsi que

lors d'un ajout dans les favoris (ou bookmark) d'un navigateur.

La balise <body> : Elle va contenir toutes les informations qui s'afficheront dans la fenêtre du navigateur : Textes, liens, images...

3. Les balises indispensables Tableau des balises les plus rencontrées

Balise Description

<a> Lien hypertexte

<b> Texte en gras

<br> Saut de ligne

<center> Centrage

<font> Définition du texte

<h1> à <h6> Titre de niveau 1 à 6

<hr> Filet horizontal (séparation)

<i> Texte en italique

<p> Début d'un paragraphe (saut de 2 lignes)

<table> Structure d'un tableau

<tr> Ligne d'un tableau

<td> Cellule d'un tableau

4. Première page avec le bloc-notes Avant de commencer à écrire votre première page, il vous faut un éditeur html, mais le plus simple et le plus économique pour

débuter reste le bloc-notes de Windows. Malheureusement son plus gros désavantage que vous devez "tout faire à la main" mais c'est

une excellente façon de progresser.

a ) Ouvrir le Bloc-notes

(sous Windows : Démarrer, programmes, accessoires et bloc-notes)

b ) Tapez votre code (le retour chariot n'est pas obligatoire, et il n'a aucun effet ou presque sur le html, il permet juste d'avoir une

meilleure visibilité de la syntaxe html)

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


c ) Sauvegardez votre fichier

d ) Enregistrez le fichier avec l'extension .htm (dans la majorité des cas la première page vue par vos visiteurs se nomme index.htm ou

index.html ou encore index.shtml)

5. Quelques règles simples pour débuter

a ) Pratiquement toutes les balises vont par paire (balises d'ouverture et de fermeture, exemple : <b> et </b>)

b ) Ecrivez vos balises en minusules, cela peut faciliter le transfert de votre code vers le XHTML

c ) Essayer d'aérer au maximum votre code

d ) Le langage HTML ignore les retours chariot et les tabulations. Servez-vous des balises <br> ou <p> pour passer à la ligne

e) Certaines balises sont ignorées par certains navigateurs ou ne s'affichent pas de la même façon. Ex: Un titre de niveau

supérieur h1 ne s'affiche pas de la même façon selon le navigateur utilisé

f ) Le cas des balises spécifiques à Internet Explorer (ex:<marquee>) ou à Netscape (ex:<blink>) est un peu plus épineux, essayez

de ne pas trop en abuser !! ou mieux ne les utilisez pas, Internet par définition c'est pour tous et pas seulement pour Microsoft et

Netscape !!

IMAGE - HTML

LE CODE :

<img src="m5.jpg" height="50" width="90" border="2" ALT="le code java" >

DEFINITION :

IMG : Ajoute l'image sur votre page web

m5 : le nom de l'image

jpg : l'extention ( bmp,gif,....)on reviendra sur les extentions.

height : largeur de l'image

width : longeur de l'image

TECHNOLOGIE

TP SITE DU COLLEGE

TP J sur 29


Border : Ajouter les bornes sur votre image

SRC : Specifie la localite de l'image

ALT : Le texte qui apparait si l'image ne vient pas sur l'ecran du visiteur.

º º POSITIONNER LE TEXTE AVEC L'IMAGE (en utilisant les attributs: top,middle,bottom)

º <img src="m5.jpg" height="50" width="90" border="2" ALT="le code java" align="Top">

J'AIME LE CODE JAVA,ce texte apparait en haut de l'image

º <img src="m5.jpg" height="50" width="90" border="2" ALT="le code java" align="Middle">

J'AIME LE CODE JAVA,ce texte apparait au milieu de l'image

º <img src="m5.jpg" height="50" width="90" border="2" ALT="le code java" align="bottom">

J'AIME LE CODE JAVA, ce texte apparait en bas de l'image

AVOIR DE L'ESPACE AUTOUR DE L'IMAGE:

º <img src="m5.jpg" height="50" width="90" border="2" ALT="le code java" hspace="30" vspace="20">

J'AIME LE CODE JAVA

HSPACE : Ajoute de l'espace au cote gauche et droit de l'image

VSPACE : Ajoute de l'espace en haut et en bas de l'image

HTML : UN TEXTE DEFILANT DEMONSTRATION:

LE CODE:

<MARQUEE BAHAVIOR="SCROLL" DIRECTION="LEFT" LOOP="25" SCROLLANMOUNT="6"

SCROLLDELLAY="90" >LE CODE JAVA </MARQUEEE>

DEFINITION :

BEHAVIOR: Permet de choisir la maniere que le texte doit defiler (SCROLL OU SLIDE OU ALTERNATE)

DIRECTION: Permet de choisir la direction du texte ( left= droit a gauche ; right=gauche a droit)

LOOP : Le nombre de temp le texte va defiler sur le site ou web page.

LOOP="infini" : Le texte va defiler infiniment.

SCROLLAMOUNT : Le nombre de pixel que vous voulez deplacer lorsque le texte est en mouvement.

SCROLLDELLAY : La vitesse du texte defilant en millisecondes.