Remerciez-le!

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

{ Module I: intégration Web Objectif de ce module est de créer des pages web st

{ Module I: intégration Web Objectif de ce module est de créer des pages web statiques. Ce module est reparti en chapitres suivant: Chap0: installation des outils de développement Chap1: le HTML5 Chap2: Le CSS3 et Bootstrap Chap3: Le javascript et Jquery Présentation du Module { Chap1: Le HTML5 Definition HTML signifie Hyper Text Markup Language. C’est un langage permettant de structurer les pages web Le HTML a évolué au fil du temps, mais les deux versions encore à l'utilisation sont : Le XHTML, paru en 1999 Le HTML5, développé en 2010 et le plus utilisé de nos jours INTRODUCTION AU HTML5 2. Créer sa première page web Avant d’avancer sachez que la création et la consultation de toute page web nécessite les outils de développement suivants : L’éditeur pour saisir le code Le navigateur pour consulter la page crée Pour créer sa 1ere page : Lancer l'éditeur de texte de votre choix. Organiser votre espace de travail à ce que le navigateur et l'éditeur soient tous deux facilement accessible Dans votre éditeur, tapez le texte suivant : "Mon premier fichier HTML" ou tout autre texte que vous souhaitez inscrire Dans le menu Fichier, allez chercher Enregistrer sous ... Donner le nom que vous souhaitez à votre fichier, mais rajouter à la fin .html (par exemple "essai.html" ou "index.html") Les pages HTML sont remplies des balises qui permettent de structurer notre page. Ces balises sont invisibles à l'écran pour vos visiteurs, mais elles permettent au navigateur de comprendre ce qu'il doit afficher. Les balises sont entourées de « chevrons », c'est-à-dire des symboles<et> On distingue deux types de balises : • les balises en paires Syntaxe : <balise> contenu </balise> • les balises orphelines. Syntaxe : <balise /> RÈGLE D'IMBRICATION Toute balise ouverte après une autre devra absolument être fermée avant ce dernière de manière à éviter les erreurs de compréhension. Syntaxe : <element1><element2> contenu </element2></element1> 3. BALISES Les attributs sont les options supplémentaires des balises. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur Syntaxe : <balise attribut="valeur"> contenu </balise> ou <img nom="fichier.png" /> 4. ATTRIBUTS D’UNE BALISE La structure générale d’une page web est la suivante : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html> <!DOCTYPE html>: indique au navigateur de quel type de HTML le fichier est déclaré. <html>: c’est l’élément racine du HTML <head></head> : partie où sont insérer les éléments de l’entete de la page tels que le titre : <title>Titre</title> le logo de son site dans la barre de titre : <link rel="shortcut icon" href="dossier/fichier.ico" type="image/x-icon"/> <body> </body> : partie du contenu de la page <meta charset="utf-8" />: indique l’encodage des caractères STRUCTURER UN DOCUMENT AVEC HTML5 La sémantique d’une page web header : permet de définir une zone d'en-tête, en général le titre principal ou un texte introductif. footer : zone de bas de contenu, où sont souvent notés les dates de publications, noms d'auteur et autres informations relatives au texte lui-même. main : zone principale de contenu de la page web. article : une partie de la page ayant une homogénéité de contenu, un article de blog peut être un bon exemple. section : un découpage d'un contenu plus important, par exemple d'un article. aside : une zone de contenu annexe au contenu principal, comme des notes ou des compléments d'information. nav : une zone de navigation qui contiendra le plus souvent une liste de liens. Elles permettent aux moteurs de recherche de bien comprendre le rôle des informations de la page et de référencer au mieux les parties les plus importantes. BALISES SÉMANTIQUES DE STRUCTURATION Un corps de base en HTML5 ressemblera donc souvent à : <body> <header></header> <nav></nav> <main> <article> <header></header> <section></section> <section></section> <aside></aside> </article> </main> <aside></aside> </body> NB : Hormis <main>, toutes ses balises peuvent être utilisées plusieurs fois dans la page. Essayons ces codes: < > & ñ ç « » × ÷ ¼ ± ¹ ² ³ Orange™ © (Espace ) : (Dialogue) : — … ‰ ‹ › Quelques caractères spéciaux Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.  Les commentaires Le langage HTML propose la balise <p> pour délimiter les paragraphes. Exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Paragraphes</title> </head> <body> <p>Bonjour et bienvenue sur mon site ! </p> </body> </html> Organisez votre texte En HTML pour allez à la ligne on n’utilise pas la touche entrée mais la balise <br> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Essais de sauts de ligne</title> </head> <body> <p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche. <br> Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p> </body> </html> Sauter une ligne Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles. Pour mettre les titres on utilise la famille des balises <h..> <h1> </h1> signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci. <h2> </h2> signifie « titre important ». <h3> </h3> pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez). <h4> </h4> titre encore moins important <h5> </h5> titre pas important. <h6> </h6> titre vraiment, mais alors là vraiment pas important du tout. Les titres <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Niveaux de titres</title> </head> <body> <h1>Titre super important</h1> <h2>Titre important</h2> <h3>Titre un peu moins important (sous-titre)</h3> <h4>Titre pas trop important</h4> <h5>Titre pas important</h5> <h6>Titre vraiment pas important du tout</h6> </body> </html> Exemple Pour mettre en emphase on utilise la balise <em> </em> « mettre un peu en emphase » Pour mettre « bien en valeur » on utilise la balise <strong> </ strong > La mise en valeur Pour marquer une partie du texte on utilise la balise <mark>, mark à pour effet de ligner le texte Marquer le texte Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations IL existe: les listes non ordonnées ou listes à puces ; les listes ordonnées ou listes numérotées ou encore énumérations. Listes de definitions Les listes Tout commence par la balise <ul> Voici un exemple: <ul> <li>Fraises</li> <li>Framboises</li> <li>Cerises</li> </ul> Liste non ordonnée Ici la balise utilisée est : <ol> <h1>Ma journée</h1> <ol> <li>Je me lève.</li> <li>Je mange et je bois.</li> <li>Je retourne me coucher.</li> </ol> Liste ordonnée <h1>Dictionnaire</h1> <dl> <dt>mot à definir</dt> <dd>definition du mot.</dd> <dt>mot à definir</dt> <dd>definition du mot.</dd> <dt>mot à definir</dt> <dd>definition du mot.</dd> </dl> Exemple de liste à definitions La balise <a> permet d’inserer un lien dans une page suivant la syntaxe: <a href=‘nom_fichier’ >indicatif</a> Un lien vers un autre site <a href="https://allotraining.com">lien du site allotraining</a> Un lien vers une autre page de son site <a href="page2.html">la page 2</a> Un lien vers une ancre <a href="#mon_ancre">Aller vers l'ancre</a> Créez des liens Exemple : cas pratique La balise <img src=‘nom_fichier.jpg’ alt=‘texte alternatif’ width=“300” height=“200”> Insérer une image Pour insérer une vidéo, codez par exemple : <video src="video/sintel_trailer-480p.mp4" width="320" height="240"> </video> On peut utiliser plusieurs sources pour une vidéo permettant au lecteur du navigateur de choisir le format adéquant. exple: <video width="320" height="240"> <source src="video1.mp4" type="video/mp4" /> <source src="video2.webm" type="video/webm" /> <source src="video3.ogv" type="video/ogv" /> </video> Les videos Certains attributs facilitent grandement la façon dont le site et l'utilisateur peuvent interagir. L'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis. L'attribut preload="auto" permet de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que l'utilisateur lira la vidéo. L'attribut autoplay="true" permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet. L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée. L'attribut loop indique que la lecture doit s'effectuer en boucle. L'attribut muted indique que la lecture doit s'effectuer sans son. CONTRÔLER LA VIDÉO Exple : <video width="400" height="222" controls=”controls” autoplay=”true” > <source src="daphne.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> Lecture video </video> Il agit de la meme facon que la video Codez par exemple : <audio src="daphne.mp3" width="100" /> On peut aussi utiliser plusieurs sources <audio id="audio1" > <source src=“mrleo.mp3" width="200px“ controls /> </audio> AJOUTER DE L'AUDIO EN CODANT uploads/s3/ le-html5.pdf