Embed Size (px)
Citation preview
HTML5 ICN (seconde)
Initiation à HTML5IntroductionTu as l’habitude de naviguer sur des sites Web pour échanger des informations.
Pour présenter ces informations, tu utilises un navigateur comme Mozilla, Chrome.
En fait, tu tapes l’adresse d’un site web sous forme textuel (www.nom_site_web.fr URL Uniform Resource Locator), on verra plus tard dans le cours sur les réseaux ce qui se cache derrière cette adresse web.
Un navigateur permet en fait d’échanger des informations entre un client et un serveur.
Une page Web est constituée de plusieurs types d’informations : texte, image, vidéo, animations, base de données, etc…
Qui a-t-il derrière une page web ?Tape l’adresse web suivante : www.ffme.fr
Effectue un clic droit dans ton navigateur et affiche le code source.
Tu constates que tu ne visualises plus une page web avec toutes ces informations, mais des codes (liste de commandes textuelles).
Version du 23/10/2016 1/ Julien Launay
HTML5 ICN (seconde)
Tu constates qu’une pages web n’est rien d’autres que des codes (balises) qui entourent des données.
Ma première page web.Il est possible de créer une page web de façon très simple en utilisant un éditeur de texte très basique comme le bocnote ou notepad++ par exemple.
Sauvegarde ton fichier dans ton répertoire personnel/ICN/algo_pro/html/ en le nommant premiere_page.html
Tu vas maintenant visualiser ta première page web à l’aide d’un navigateur.
Que constates-tu ?
Et oui, il y a un souci. Cela signifie qu’il faudra utiliser un langage spécial pour pouvoir présenter des informations sur une page web, c’est ce que tu vas découvrir avec le langage html5. Il faudrait avoir deux lignes.
HTML, un langageQue signifie HTML ?
Le HTML (« Hypertext Mark-Up Language”) est un langage dit de « marquage » (de "structuration" ou de "balisage") dont le rôle est de formaliser l’écriture d’un document avec des balises de formatage.
Le HTML est un langage de programmation.
Les balisesLes balises permettent d’indiquer la façon dont doit être présenté les informations dans la page Web et les liens qu’il établit avec d’autres documents.
En regardant la page web proposée, indique la fonction des différentes balises suivantes :
Version du 23/10/2016 2/ Julien Launay
HTML5 ICN (seconde)
Pour cela copie la page essai.html et lance ton navigateur Chrome, puis ouvre la page essai.html, puis clique doit et clique sur
Balise Utilisation<!DOCTYPE html><html><title><head><body>< !-- --><body><h1><p><a href="image.jpg »><br/><img src="ipage.jpg" alt="texte" title="titre" width="200" height="133"><a href="image_original.jpg"><img src="image_original.jpg" alt="texte" title="Cliquez pour agrandir" width="200" height="198" /></a><ul><li><ol><li><a href="#paragraphe">Aller à paragraphe</a>
Une balise est un élément de texte (un nom) encadrée par le caractère inférieur ( "<" ) et le caractère supérieur ( ">" ). Exemple : <br> pour un saut de ligne
Un balise (de début) fonctionne avec une autre balise (de fin) qui permet d’encadrer une action associée à un élément.
<nom_balise> éléments……</nom_balise>
C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».
Ecrire sa page web
Outils de création automatiséeIl y a plusieurs solutions en fonction de ce que l’on souhaite développer et les contraintes de développement. Il s’agit de logiciel qui peuvent faciliter l’écrire et la mise en page d’une page web.
Version du 23/10/2016 3/ Julien Launay
HTML5 ICN (seconde)
On peut utiliser un outil qui réalise automatiquement mes pages web, mais qui ne me permettra pas de tout gérer.
L’outil Webaccapela permet de de créer des pages HTML sans écrire une seule ligne de code HTML.
WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez)
Outil de développement en lignePlusieurs outils de développement en ligne existent qui permettent d’obtenir très rapidement un site web.
https://jsfiddle.net/
Cet outil permet d’écrire des lignes de codes en HTML et de tester tout de suite le résultat qui sera obtenu. Il intègre la même fonction qu’un navigateur comme Mozilla qui permet de décoder des lignes HTML.
Outil de développement basiqueOn peut utiliser un éditeur de texte très basique comme le bloc note. Il existe plusieurs éditeurs. Un éditeur permettra une reconnaissance syntaxique des codes entrés, ce qui évitera des erreurs.
Sublime Texte : http://www.sublimetext.com/
Notepad ++
On peut utiliser cet outil pour différents langages de programmation. Il faudra alors paramétrer l’outil pour le langage que l’on souhaite, ici le HTML. Nous utiliserons Notepad ++.
Création de ta page WebCréer une page web sur le thème de votre choix. Elle devra respecter l’utilisation correcte de balises vues précédemment. Votre page web devra utiliser au moins 8 balises différentes. Attention à bien structurer votre pages web et de respecter l’indentation !
Vous pourrez créer au minium 2 pages web pour insérer un lien de l’une vers l’autre et réciproquement.
Télécharger sa page Web sur le serveur WebTu as vu que la page Web doit être installée sur la machine qui héberge un serveur Web (comme apache sur ta raspberryPi).
Version du 23/10/2016 4/ Julien Launay
HTML5 ICN (seconde)
Pour cela tu as besoin d’un logiciel : Filezila qui est un client FTP (File Transfert Protocol).
Entre le nom de la machine qui héberge le serveur web. Tu mettras aussi le login et mot de passe du RaspberryPi.
1. Choisis ta page web sur ta machine dans la bonne arborescence2. Sélectionne l’arborescence de la machine serveur. Tu la positionneras dans : /ICN/html/3. Puis fais un glisser déplacer de ton fichier dans ton serveur (de gauche à droite).
Pour vérifie que ta page est disponible sur le serveur web, tu taperas ici :
www.poste3.fr/ICN/html/mapage.html
Version du 23/10/2016 5/ Julien Launay
Ta machine La machine qui héberge le serveur Web Apache
Tu choisies ta page Web html Tu la glisses dans le bon
répertoire du serveur web
