presentation de l’activitewebetab.ac-bordeaux.fr/.../tp_j_site_du_ccollege.pdf · - elaborer une...
TRANSCRIPT
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 1 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 Page 2 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 3 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 4 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 5 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 6 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 7 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 8 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 9 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 10 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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])...
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 11 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 12 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 13 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 :
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 14 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 15 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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.
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 16 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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.
TECHNOLOGIE
TP SITE DU COLLEGE
TP J Page 17 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 18 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 19 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 20 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 21 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 22 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 23 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 24 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 25 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 26 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 27 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 28 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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 Page 29 sur 29
3ème … Nom : ………………………………… Prénom : ………………………… Date……/………/…….
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.