Cours: HTML et CSS 2017-2018 Plan Introduction au Web 2.0 Les bases en HTML Nouveautés en HTML 5 Les bases en CSS Atelier HTML/CSS 2 Partie 1 : Introduction au web 2.0 3 Navigateur Le navigateur est l'outil qui permet de lire les hyperdocuments. Au début conçu pour ne lire que les hyperdocuments, le navigateur intègre aujourd'hui tous les services de l'Internet (e-mail, ftp,...) Le navigateur désigne par une adresse URL (Uniform Resource Locator) les adresses complètes de l'Internet. 4 Hyperdocument Un hyperdocument est un document électronique contenant des images, du vidéo, du texte, parfois des petits morceaux de programme, mais surtout des liens vers d'autres hyperdocuments : des liens hypertextes. UP WEB ESPRIT 5 C’est quoi le web? Mis au point par Tim Berners-Lee (CERN) entre 1989 et 1991 Le Web est un système client-serveur dont le fonctionnement s'apparente à des relations client-fournisseur. L'ordinateur personnel, doté de son logiciel de navigation (Internet Explorer, Firefox…), joue le rôle du client. Les ordinateurs distants sur lesquels sont hébergés les sites web sont des serveurs. 6 Différence entre le web et internet Internet est un réseau informatique mondial de transport de données constitué d'un ensemble de réseaux nationaux, régionaux et privés. Il permet de transporter un paquet de données d'un ordinateur A à un ordinateur B. Internet englobe le web, email, messagerie instantanée.. 7 Historique et évolution du web 9 Définition d’un site web Un site web est un ensemble de pages organisées en structure hiérarchique, disponible sur un serveur. Il peut être construit avec des pages statiques, des pages dynamiques ou un assemblage des deux. 10 Fonctionnement d'un site web Requête HTTP: Bonjour, je voudrais le document « http://www.site.com/document.html » (URL) TCP/IP Client Réponse HTTP: <!HTML> <html>….</html> Serveur http 11 Les sites web statiques VS dynamiques Les sites web statiques : Ce sont des sites réalisés uniquement à l'aide des langages HTML et CSS. Ne peut pas être mis à jour automatiquement : il faut que le propriétaire du site (le webmaster) modifie le code source pour y ajouter des nouveautés. Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine ». Les sites web dynamiques: Plus complexes, ils utilisent d'autres langages en plus de HTML et CSS, tels que PHP et MySQL. Le contenu de ces sites web est dit « dynamique » parce qu'il peut changer sans l'intervention du webmaster ! A partir de la demande du client, le serveur interroge une base de données, récupère les données souhaitées, construit la page, la retranscrit en HTML, puis la renvoie au client.. 12 Les architectures d’un site web dynamique l'architecture à 2 niveaux C’est une architecture client/serveur . Le serveur est polyvalent: il est capable de fournir directement l'ensemble des ressources demandées par le client. l'architecture à 3 niveaux Niveau 1 qui est le client. Le client est très légers étant donné qu’il n’a aucun rôle de traitement. Niveau 2 nous avons le serveur d’application Niveau 3 est le serveur de base de donnée. 13 Architecture à 2 niveaux VS 3 niveaux Architecture 3 tiers permet de segmenter l'application, pour faciliter entre autre l'administration, la maintenance et l'évolutivité de l’application. Exemple: Si demain tu veux passer d'une base Mysql à une base Oracle, tu n'as logiquement qu'a modifier ta couche accès aux donnés, sans toucher la couche métier! L’ architecture 3 tiers offre une flexibilité beaucoup plus importante que l’architecture 2-tiers. En effet, la portabilité du tiers serveur permet d'envisager une allocation et ou modification dynamique au grés des besoins évolutifs au sein d'une entreprise. 14 Des langages web Front End: désigne la partie qui prend en charge l'interface d'une application. Back End: regroupe la partie gestion, qui, par rapport à une architecture trois tiers regroupe la partie métier et la partie données. 15 Partie 2 : HTML5 16 HTML: Définition et intérêt HTML = HyperText Markup Language Date de création: Crée en 1991 Définition: Langage de balisage Fonction: Donne un sens au contenu de la page en indiquant au navigateur les différents éléments existants (ceci est un titre, image, paragraphe, etc.) HTML1 HTML2 HTML3 HTML4 HTML5 1991 1994 1996 1998 2011 17 HTML : Exemple de code Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement comporter certains éléments et suivre un schéma précis. Doctype: définit le type du document html: définit la page html head: définit les informations générales que la page a besoin pour fonctionner title: titre de la page meta : encodage de la page body: contenu visible de la page 18 Eléments-balises-attributs Eléments = Définissent des objets dans notre page web: L’ élément p définit une paragraphe, Les éléments h1,h2,…,h6 définissent des titres, L’ élément a définit un lien, Généralement constitués d’une paire de balises: Balise ouvrante: <p> Balise fermante: </p> Exception : balise orphelines comme <br/> 19 Eléments-balises-attributs Attributs= Utiliser pour donner des indications supplémentaires aux éléments. Par exemple: indiquer la cible d’un lien. <a href=‘http://www.youtube.com’> le site youtube </a> Balise ouvrante Balise fermante <a href=‘http://www.youtube.com’> le site youtube </a> Attribut Element a 20 ² Eléments-balises-attributs Besoin Elément Exemple Titre h1,h2,h3,h4,h5,h6 <h1> Code html </h1> Paragraphe p <p> Ceci est un paragraphe </p><p>Ceci est un deuxième paragraphe</p> Retour à la ligne br Bonjour tout le monde <br/> Je vous contacte pour …. Retour à la ligne avec changement de thématique hr HTML <hr/> CSS Définir importance du texte Strong (important) Em (relativement important) Le cours <strong> HTML </strong> est <em>important</em> 21 Les listes Besoin Code Output Liste non ordonnée <ul> <li>HTML</li> <li>CSS</li> </ul> • HTML • CSS <ol> <li>HTML</li> <li>CSS</li> </ol> 1. HTML 2. CSS <ol type=‘’A’’> <li>HTML</li> <li>CSS</li> </ol> A. HTML B. CSS <ol type=‘’i’’> <li>HTML</li> <li>CSS</li> </ol> i. ii. Liste ordonnée HTML CSS 22 Les liens Nous distinguons plusieurs utilisations de liens: • Etablir des liens externes <a href="http://wikipedia.org">Lien</a> • Etablir des liens internes <a href="../fichier.html">Lien</a> • Créer un ancre <a href="#ancre1">Lien ancre</a> • Envoyer un mail <a href="mailto:foulen@esprit.tn">Mail</a> • Télécharger un document <a href="cours.pdf" >Cours</a> 23 Les tableaux Pour créer un tableau, trois éléments sont obligatoires: table (tableau): définir le tableau tr (table row): introduire une ligne dans un tableau td (table data): ajouter des cellules dans les lignes 24 Partie 3: Les nouveautés HTML5 25 Les nouveautés dans le code HTML5 Un allégement du code: Certaines balises ont été simplifiées afin d’alléger le code. HTML HTML5 26 Les nouveautés dans le code HTML5 Une nouvelle organisation des documents: <div<header> id="header"> <div class="article"> <article> <div <nav> id="nav"> <div <section> id="content"> <div <aside> id="right"> <div<footer> id="footer"> 27 Les nouveautés dans le code HTML5 Nouvelles balises : Balise Description <audio> Définit un contenu audio <video> Définit une vidéo ou un film <source> Définit de multiples ressources pour les médias <video> et <audio> <embed> Définit un conteneur pour une application externe ou un contenu interactif (un plug-in) <track> Définit des pistes de texte pour les médias <video> et <audio> Insére un sous-titre (au format Web Video Text Tracks (WebVTT) WebVTT) à une vidéo affichée avec la balise video 28 Les nouveautés dans le code HTML5 Nouvelles balises : Balise Définition <embed> Utilisé pour du contenu externe et interactif ou pour un plug-in. <progress> Pour une barre de progression. <param>: Pour paramétrer un objet. <meter> Pour les mesures. <menu>: Pour une liste de commande. <details> Pour apporter des détails sur Widget, il peut être utilisé pour cacher/afficher des informations complémentaires. Il peut être le conteneur de la balise 29 Les nouveautés dans le code HTML5 Nouvelles balises : Balises Vidéo: Balises Audio: 30 Les nouveautés dans le code HTML5 API HTML 5 : HTML 5 permet d'utiliser 8 nouvelles API: une API de dessin 2D utilisé avec la nouvelle balise canvas une API pour jouer des vidéos et des sons/musiques utilisé avec les nouvelles balises video et audio une API utilisée pour les applications hors-lignes une API d'édition en combinaison avec le nouvel attribut contenteditable une API de drag and drop en combinaison avec l'attribut draggable une API qui permet l'accès à l'historique et permet aux pages d'en ajouter pour prévenir les problèmes de bouton retour-en-arrière 31 Les nouveautés dans le code HTML5 API HTML 5 : file API <input id="file" type="file" /> Géolocalisation: L’API de Geo-localisation de HTML 5 est utilisée pour déterminer la position géo-graphique de l’utilisateur. 32 Partie 3: Les Formulaire HTML5 33 Les formulaires HTML Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. Un formulaire HTML est composé d'un ou plusieurs items: Des zones de texte, des boîtes de sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle. 34 Les formulaires HTML L'élément <form> Tous les formulaires HTML débutent par un élément <form> comme celui-ci : L'attribut action définit la localisation (une URL) où doivent être envoyées les données collectées par le formulaire. L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »). 35 Les formulaires HTML L'élément <submit> Tous les formulaires HTML se terminent par un élément <submit> comme celui-ci : Un clic sur un bouton « submit » envoie les données du formulaire vers la page définie par l'attribut action de l'élément <form>. 36 Eléments d’un formulaire Elément Définition input Définit un champ de données pour l’utilisateur label Définit une légende pour un élément input textarea Définit un champ de texte long select Définit une liste de choix optgroup Définit un groupe d’option dans une liste option Définit une option dans une liste fieldset Regroupe les éléments d’un formulaire en différentes parties legend Ajoute une légende à un élément fieldset 37 Les formulaires - Exemple 38 Nouveautés : balises formulaire <input type="text"> search tel mail url date number range color ...etc 39 Nouveautés : attributs formulaire required <input type=‘ ….‘ required /> download <a href="filename" download="newfilename"></a> Autocomplete <form action="" autocomplete="on"> pattern <input pattern="[A-Za-z0-9]"> Placeholder min, max, step <input type="number" min="1" max="100" step="3" /> 40 Partie 3: Les bases en CSS 41 CSS : Définition et intérêt CSS = Cascading StyleSheets - Langage de style - Sert à mettre en forme du contenu - Permet de modifier la taille d’un texte, ajouter des bordures, une couleurs, etc. - Versions de CSS: 42 CSS : Définition et intérêt Les versions CSS: 43 CSS : Exemple de code 44 Les sélecteurs Pour appliquer un style sur un élément HTML, il faut le sélectionner. Un sélecteur permet de cibler un ou plusieurs éléments HTML Il y a deux types de sélecteurs: Sélecteurs simples. Sélecteurs complexes. Syntaxe: Sélecteur Déclaration Propriété Valeur Propriété Valeur 45 Les propriétés Pour appliquer un style sur un élément HTML, il faut modifier ses caractéristiques Les propriétés permettent de choisir les styles à appliquer sur un élément HTML. Chaque propriété est accompagnée d’une ou plusieurs valeurs qui vont définir le comportement de cette propriété. 46 Sélecteurs et propriétés Les sélecteurs les plus utilisés (communs) Exemple Classification Définition h1 Sélecteur de type Sélectionne un élément par son type (nom) .redLigne Sélecteur de classe Sélectionne un élément par la valeur d'attribut de classe, qui peut être réutilisée plusieurs fois par page #intro Sélecteur ID Sélectionne un élément par la valeur d'attribut ID, qui est unique et ne doit être utilisée qu'une fois par page 47 Sélecteurs et propriétés Quelle est la différence entre une classe et un id ? un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page une classe peut caractériser plusieurs objets (identiques ou non) Par exemple, il est possible d'avoir ce code : Mais il n'est pas correct d'avoir ce code : => l'id ne doit désigner qu'un seul objet du document. 48 o Les propriétés Exemple de propriétés: Exemple Définition Valeur(s) possible(s) color Définit une couleur Red, yellow, Maroon, #800000, … Background-color Définit la Couleur de l’arrière plan font-size Définit la taille d’une police 15px, 25px, 150%,… font-style Définit le style de police d’un texte Normal, italic, … width Définit la largeur 10px, 15px, …. hight Définit la hauteur margin Définit les marges haut et bas Auto, 5px, ….. 49 Où écrire le code CSS • Ecrire le CSS dans la balise ouvrante des éléments HTML 50 Où écrire le code CSS • Ecrire le CSS dans un élément HTML « style » • Ecrire le CSS dans un fichier CSS séparé 51 Atelier HTML5/CSS 52 Références • • https://css.developpez.com/tutoriels/utiliser-nouveaux-selecteur-css3/ http://pierre-giraud.com/html-css/cours-complet/selecteursproprietes-css.php 53
