Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

IN20 Informatique Séance 7 HTML, CSS et Javascript Sébastien Combéﬁs, Quentin L

IN20 Informatique Séance 7 HTML, CSS et Javascript Sébastien Combéﬁs, Quentin Lurkin lundi 26 octobre 2015 Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modiﬁcation 4.0 International. Rappels Manipulation de ﬁchiers texte et binaire Ouverture et fermeture du ﬁchier Lecture et écriture d’un ﬁchier Gestion des erreurs d’entrée/sortie Encodage de l’information Encodage des caractères, standard Unicode Sérialisation avec le module pickle Stockage bas niveau avec le module struct 3 Objectifs Comprendre le World Wide Web (WWW) Identiﬁcation des ressources avec des URLs Principe du client-serveur Couches principales de l’Internet Langages du web Création de documents avec HTML (HyperText Markup Language) Déﬁnition de styles avec CSS (Cascading Style Sheet) Aspect dynamique côté client avec Javascript 4 World Wide Web World Wide Web (WWW) Espace d’informations contenant des ressources Documents texte et autres ressources Ressources liées entre elles par des liens hypertextes Identiﬁcation des ressources par des URLs Bref historique Inventé par Paul Otlet (visionnaire) en 1934 Inventé par Tim Berners-Lee en 1989 Premier navigateur web en 1990 avec l’aide de Robert Cailliau 6 Personnages clés Paul Otlet 1868–1944 (BE) Sir Tim Berners-Lee 1955– (UK) Robert Cailliau 1947– (BE) 7 Internet (1) Système composé d’un ensemble de réseaux interconnectés Relie des milliards de machines entre elles Lancé en Californie en 1969 (ARPANET) Premier échange d’un message électronique entre deux machines Premières connexions intercontinentales en 1988 (NORDUnet) Réseau d’échange de données pour cinq pays nordiques d’Europe Supporte de nombreuses ressources et services WWW, app, e-mail, téléphonie, partage de ﬁchiers, jeu en ligne... 8 Internet (2) 9 Client/Serveur Communication entre un client et un serveur 1 Le client se connecte au serveur 2 Le serveur accepte la connexion 3 Le client et le serveur communiquent 1 Le client envoie une requête au serveur 2 Le serveur analyse la requête et répond au client La connexion peut être fermée par le client ou le serveur Internet 10 Serveur web Serveur utilisé pour publier des sites web Communication avec ce serveur à l’aide du protocole HTTP Support d’autres protocoles pour oﬀrir d’autres services Envoi d’e-mails, streaming, transfert de ﬁchiers... Serveur web publics reliés à Internet Certains serveurs web sont privés et limités à un réseau local 11 Uniform Resource Locator (URL) Une URL référence une ressource web sur un réseau Localisation sur le réseau et mécanisme pour la récupérer Plusieurs mécanismes d’accès possibles http indique une page web ftp utilisé pour le transfert de ﬁchier mailto permet l’envoi d’un e-mail jdbc permet d’accéder à une base de données ... 12 HyperText Transfer Protocol (HTTP) Protocole de communication de données pour le WWW Coordonné par l’Internet Engineering Task Force (ETF) et le Word Wide Web Consortium (W3C) Utilisation d’hyperliens entre des nœuds Permet de naviguer à travers le web Protocole de type requête-réponse Construit suivant une architecture client/serveur 13 HTML HyperText Markup Language (HTML) Langage de balisage pour représenter des pages web Fichier texte permettant d’écrire de l’hypertexte Plusieurs autres roles Information sémantique par rapport au contenu Information de mise en forme du contenu Inclusion de ressources multimédia (image, formulaire...) 15 Historique HTML 2.0 (24 novembre 1995) Le W3C publie HTML 3.2 (14 janvier 1997) Le W3C reprend le travail sur HTML, arrête par l’IETF Trois variantes de HTML 4.0 (18 décembre 1997) HTML 4.0 strict, transitional et frameset HTML 5 publié comme recommandation W3C (28 octobre 2014) Modernisation de la version 4 avec support multimédia, des images SVG, du MathML... 16 Élement et balise Élément du document délimité par des balises Typiquement une balise ouvrante et une balise fermante Balise formée par le nom de l’élément entouré de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernière balise ouverte = première balise fermée 1 <h1 >Titre de premier niveau </h1 > 2 3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p> 17 Élement et balise Élément du document délimité par des balises Typiquement une balise ouvrante et une balise fermante Balise formée par le nom de l’élément entouré de chevrons Avec un / en plus pour distinguer la balise fermante Imbrication de balises, en les fermant dans le bon ordre Dernière balise ouverte = première balise fermée 1 <h1 >Titre de premier niveau </h1 > 2 3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p> 17 Attribut Ajout d’attribut pour conﬁgurer l’élément Se placent dans la balise ouvrante Un attribut est composé d’une clé et d’une valeur Valeur entre guillemets doubles, et parfois optionnelle 1 <p title=" Information complémentaire ">Passez la souris sur ce paragraphe pour avoir des informations complémentaires .</p> 2 3 <p><a href="http :// www.google.be">Faire une recherche </a></p> 18 Attribut Ajout d’attribut pour conﬁgurer l’élément Se placent dans la balise ouvrante Un attribut est composé d’une clé et d’une valeur Valeur entre guillemets doubles, et parfois optionnelle 1 <p title=" Information complémentaire ">Passez la souris sur ce paragraphe pour avoir des informations complémentaires .</p> 2 3 <p><a href="http :// www.google.be">Faire une recherche </a></p> 18 Entête et corps Déclaration du type de document au début du ﬁchier <!DOCTYPE html> pour l’HTML 5 Le document est déclaré avec l’élément html Entête du document (méta information) avec head Corps du document (contenu visible) avec body 1 <! DOCTYPE html > 2 3 <html > 4 <head > 5 <title >Tuyaux examen IN20 </ title > 6 </head > 7 <body > 8 <p>Un seul tuyau : comprendre la matière !</p> 9 </body > 10 </html > 19 Entête et corps Déclaration du type de document au début du ﬁchier <!DOCTYPE html> pour l’HTML 5 Le document est déclaré avec l’élément html Entête du document (méta information) avec head Corps du document (contenu visible) avec body 1 <! DOCTYPE html > 2 3 <html > 4 <head > 5 <title >Tuyaux examen IN20 </ title > 6 </head > 7 <body > 8 <p>Un seul tuyau : comprendre la matière !</p> 9 </body > 10 </html > 19 Titre Plusieurs niveaux de titre (de 1 à 6) Au maximum un seul titre de niveau 1 par page Utilisation des éléments h1 à h6 1 <h1 >CU20 Cuisinologie </h1 > 2 3 <h2 >Chapitre 1 : Dépieauter la bête </h2 > 4 5 <p> Identifiez d’abord où est la peau ... </p> 6 7 <h2 >Chapitre 2 : Température optimale du four </h2 > 8 9 <p>Le gradient de température doit être Lipschitz continu ... </p> 20 Titre Plusieurs niveaux de titre (de 1 à 6) Au maximum un seul titre de niveau 1 par page Utilisation des éléments h1 à h6 1 <h1 >CU20 Cuisinologie </h1 > 2 3 <h2 >Chapitre 1 : Dépieauter la bête </h2 > 4 5 <p> Identifiez d’abord où est la peau ... </p> 6 7 <h2 >Chapitre 2 : Température optimale du four </h2 > 8 9 <p>Le gradient de température doit être Lipschitz continu ... </p> 20 Section et paragraphe Insertion d’une section avec l’élément section Possède un titre, plusieurs paragraphes et des sous-sections Paragraphe inséré grâce à l’élément p 1 <section > 2 <h1 >Série du mois </h1 > 3 4 <p>La série du mois est American Horror Story. Il y a déjà 5 saisons à cette série , pour un total de 54 épisodes .</p> 5 6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p> 7 </section > 21 Section et paragraphe Insertion d’une section avec l’élément section Possède un titre, plusieurs paragraphes et des sous-sections Paragraphe inséré grâce à l’élément p 1 <section > 2 <h1 >Série du mois </h1 > 3 4 <p>La série du mois est American Horror Story. Il y a déjà 5 saisons à cette série , pour un total de 54 épisodes .</p> 5 6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p> 7 </section > 21 Lien hypertexte Lien hypertexte vers une ressource avec l’élément a Lien typiquement identiﬁé par une URL Attribut href pour spéciﬁer la cible du lien Le texte du lien doit décrire la page liée Éviter des « ici », ou « cliquez ici », ou encore « ce lien »... 1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p> 22 Lien hypertexte Lien hypertexte vers une ressource avec l’élément a Lien typiquement identiﬁé par une URL Attribut href pour spéciﬁer la cible du lien Le texte du lien doit décrire la page liée Éviter des « ici », ou « cliquez ici », ou encore « ce lien »... 1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p> 22 Formatage (1) Formatage de base de texte dans un paragraphe Texte en gras avec l’élément b Texte important avec l’élément strong Texte en italique avec l’élément i Texte emphasé avec l’élément em Positionnement du texte dans le texte Texte en indice avec l’élément sub Texte en exposant avec l’élément sup 23 Formatage (2) 1 <p>Le <b>sel </b>, c’est un ion Na <sup >+</sup > et un Cl uploads/s3/ seance-7-html-css-javascript.pdf