Initiation à la création de pages WEB
Matériel nécessaire : Ordinateur avec une connexion Internet , Open Office , bloc note ou notepad+
+ , client FTP , SPIP et navigateurs Internet ( Firefox , Opera , IE,… )
1) Le langage HTML est le format de données conçu pour représenter des pages WEB .C’est un langage de balisage ( exemple : <BODY> ………</BODY> )( le marqueur de fin est toujours un
/
(« slash »))Ce langage est souvent utilisé conjointement avec des langage de programmation ( ex :Javascript) et des formats de présentation (feuilles de style en cascade CSS)
Exercice 1
-Avec le traitement de texte d’Open Office , taper les 2 mots suivants :
-Enregistrer le texte au format HTML
-Ouvrir ce fichier avec le Bloc Note (ou mieux avec Notepad++)
-Imprimer les codes obtenus et repérer le début du programme permettant d’écrire le texte .-Quelle balise HTML est utilisée pour changer la couleur du texte ? Donner le code hexadécimal de la couleur choisie.
- Quelle balise HTML est utilisée pour changer la taille des caractères ? - Quelle balise HTML est utilisée pour avoir les caractères en gras ?
-Ouvrir votre fichier html avec un navigateur Internet ( Firefox , IE , Opera,…) et vérifier que le texte s’affiche correctement.
- Modifier le texte pour ajouter une ligne avec votre NOM en vert et votre prénom en bleu.
- Quelle balise permet d’aller à la ligne suivante ?
2) Exercice 2 : Insertion de script Javascript
– En vous aidant du site http://electroniqueveynes.free.fr/spip.php?rubrique43
Compléter votre fichier html avec un message permettant d’avoir un menu déroulant avec un fond de couleur jaune et une largeur de 400 pixels , avec une vitesse de défilement lente ( = 2)
Faire vérifier à votre professeur le bon fonctionnement du script avec un navigateur internet.
En vous aidant du site http://www.editeurjavascript.com/scripts/ ,
Insérer un script à votre fichier permettant d’afficher la date et l’heure (boite de texte) Faire vérifier à votre professeur le bon fonctionnement du script avec un navigateur internet.
3) Exercice 3 : Utilisation d’un CMS (« Content Management System ») - Qu’est ce qu’un logiciel CMS ?
- Citer des exemples de logiciels CMS
- Avec quel langage de programmation est essentiellement réalisé un logiciel CMS ? (remarque : il existe d’autres langage de programmation ( Python , Java, ASP …)
- Ces langages sont ils directement exécutables par un navigateur Internet ? Qui exécutent les codes de ces langages ?
(Remarque : HTML et Javascript sont eux directement exécutables par un navigateur) - Avec ce(s) langage(s) et une base de donnée , les sites web réalisés sont dits
« dynamiques » . Ques sont les avantages et les inconvénients de réaliser un site
« dynamique » par rapport à un site « statique » ?
- Le logiciel CMS choisi est SPIP . Citer un logiciel FTP ( client FTP) permettant de transférer les fichiers de ce logiciel CMS.
- Compléter la copie d’écran
( copier et coller cette image dans photofiltre pour la modifier ) en détaillant les étapes nécessaires pour transférer les fichiers de SPIP 192e vers le serveur FTP (aide avec
http://www.astucesinternet.com/modules/news/article.php?storyid=173#parametrage )
Adresse FTP : lyceepro.veynes.free.fr Utilisateur : lyceepro.veynes
Port : 21 (par défaut pour un serveur FTP) Mot de passe : azerty
INITIATION à SPIP
- Copier le contenu de votre fichier html.
- Aller sur le site http://lyceepro.veynes.free.fr/
- Cliquer sur le bouton « espace privé » et taper votre login (votre nom en minuscule) et votre mot de passe (votre date de naissance au format JJ/mm /aa )
- Cliquer sur la rubrique 1SEID et aller dans la sous-rubrique correspondant à votre nom.
- Cliquer sur « écrire un nouvel article »
- Donner un nom à votre article et coller le contenu de votre fichier .html dans la zone d’édition d’un texte. Ajouter un lien hypertexte sur le site du lycée
http://www.lyc-veynes.ac-aix-marseille.fr /
- Enregistrer votre article et valider celui-ci par le bouton « demander la publication de cet article »
Remarque : vous pouvez revenir à votre article pour le modifier.
- Appeler votre professeur pour qu’il valide votre article et qu’il vérifie le bon fonctionnement de celui-ci.
4) Exercice 4 : Création d’un article avec des documents joints Réaliser un article avec des liens et des documents de votre choix.
