docInitiation au langage HTML
download 
Plainte Transcription
Initiation au langage HTML
Initiation au langage HTML Le langage HTML ou Hypertext Markup Language, est le format de données conçu pour représenter les pages web. Ce langage de balisage, inventé dans les années 1990, permet de mettre en forme le contenu des pages web, d’inclure des ressources multimédias (images, vidéos, sons, couleurs, fond d'écran,...). Il est souvent utilisé avec d'autres langages de programmation (JavaScript, php,...) plus complexes et des formats de présentation (feuilles de style en cascade). Nous aborderons uniquement le HTML en classe de troisième. 1. Les outils Nous avons besoin: • d'un éditeur de texte Bloc-notes ou Notepad++ • d'un navigateur comme Chrome, Firefox, safari, Internet Explorer... Nous n'avons pas tout le temps besoin de connexion Internet sauf quand vous devrez inclure les balises qui feront appel à des flux audio ou vidéo (site deezer.com et youtube.com). 2. Le document Html minimum En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le navigateur. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <html>. Ces "instructions" s'appellent des balises et une balise marque une action pour le navigateur (voir document: liste des principales balises HTML). Les balises s'écrivent sur un éditeur de texte (bloc note, notepad++,...). Le fichier texte s'enregistre avec l'extension « .html » (et non pas « .txt ») et la page web associée se voit (non modifiable) avec un navigateur web (chrome,...) Strucure des balises à respecter: <HTML> <HEAD> <TITLE>Ceci est le titre de la page Internet</TITLE> </HEAD> <BODY> Ceci est le contenu de ma page web: texte, images, photos, vidéo,... </BODY> </HTML> raccourcis clavier : enregistrer= CTRL+S ; actualiser = F5 ; tout sélectionner = CTRL + A Les balises ainsi que les codes des couleurs se trouvent sur la liste qui vous a été donnée et aussi facilement sur internet. Exemple : 3. Exercice : Ecrivez ci dessous l'arborescence de votre site depuis le dossier « MesDocuments » EXERCICE HTML Vous devez créer un site web dans le dossier « MesDocuments » qui comportera au total 3 pages dans un dossier qui portera votre nom (donc 3 fichiers .html + les fichiers images). Le cours ainsi que l'énoncé de l'exercice se trouvent sur le site internet du collège dans la rubrique technologie. Vous pouvez vous entraîner chez vous. • Une page index (ou sommaire) (appelé index.html) qui comportera des liens vers les 2 autres pages (pages1.html et page2.html). La page index devra avoir un titre et une phrase ou deux pour présenter votre site. • La page 1 sera illustrée par une photo (photo1.jpg) centrée de votre groupe de musique préféré avec un commentaire de la photo. Un clic sur la photo (photo1.jpg) devra renvoyer au sommaire. Vous intégrerez une source audio depuis http://www.deezer.com/fr/developers/musicplugins/player • La page 2 sera illustrée par deux photo (photo2.jpg et photo3.jpg) centrées de votre sport préféré avec aussi un commentaire pour chacune d’elles. Vous insérerez à la fin de la page un lien vers un site web de votre choix (http://www.site.fr) avec une phrase justificative. Vous intégrerez une vidéo depuis http://www.youtube.com/ (voir tutoriel sur le site technolabitrie.free.fr) Ces 2 dernières pages devront comporter un lien vers la page index.html. Le choix de la taille, de la couleur de la police est libre. Le choix du fond d’écran aussi. EXERCICE HTML Vous devez créer un site web dans le dossier « MesDocuments » qui comportera au total 3 pages dans un dossier qui portera votre nom (donc 3 fichiers .html + les fichiers images). Le cours ainsi que l'énoncé de l'exercice se trouvent sur le site internet du collège dans la rubrique technologie. Vous pouvez vous entraîner chez vous. • Une page index (ou sommaire) (appelé index.html) qui comportera des liens vers les 2 autres pages (pages1.html et page2.html). La page index devra avoir un titre et une phrase ou deux pour présenter votre site. • La page 1 sera illustrée par une photo (photo1.jpg) centrée de votre groupe de musique préféré avec un commentaire de la photo. Un clic sur la photo (photo1.jpg) devra renvoyer au sommaire. Vous intégrerez une source audio depuis http://www.deezer.com/fr/developers/musicplugins/player • La page 2 sera illustrée par deux photo (photo2.jpg et photo3.jpg) centrées de votre sport préféré avec aussi un commentaire pour chacune d’elles. Vous insérerez à la fin de la page un lien vers un site web de votre choix (http://www.site.fr) avec une phrase justificative. Vous intégrerez une vidéo depuis http://www.youtube.com/ (voir tutoriel sur le site technolabitrie.free.fr) Ces 2 dernières pages devront comporter un lien vers la page index.html. Le choix de la taille, de la couleur de la police est libre. Le choix du fond d’écran aussi. EXERCICE HTML Vous devez créer un site web dans le dossier « MesDocuments » qui comportera au total 3 pages dans un dossier qui portera votre nom (donc 3 fichiers .html + les fichiers images). Le cours ainsi que l'énoncé de l'exercice se trouvent sur le site internet du collège dans la rubrique technologie. Vous pouvez vous entraîner chez vous. • Une page index (ou sommaire) (appelé index.html) qui comportera des liens vers les 2 autres pages (pages1.html et page2.html). La page index devra avoir un titre et une phrase ou deux pour présenter votre site. • La page 1 sera illustrée par une photo (photo1.jpg) centrée de votre groupe de musique préféré avec un commentaire de la photo. Un clic sur la photo (photo1.jpg) devra renvoyer au sommaire. Vous intégrerez une source audio depuis http://www.deezer.com/fr/developers/musicplugins/player • La page 2 sera illustrée par deux photo (photo2.jpg et photo3.jpg) centrées de votre sport préféré avec aussi un commentaire pour chacune d’elles. Vous insérerez à la fin de la page un lien vers un site web de votre choix (http://www.site.fr) avec une phrase justificative. Vous intégrerez une vidéo depuis http://www.youtube.com/ (voir tutoriel sur le site technolabitrie.free.fr) Ces 2 dernières pages devront comporter un lien vers la page index.html. Le choix de la taille, de la couleur de la police est libre. Le choix du fond d’écran aussi.
