PROGRAMMATION WEB COTÉ CLIENT HTML et CSS Plan du cours Le concept des balises

PROGRAMMATION WEB COTÉ CLIENT HTML et CSS Plan du cours Le concept des balises - Le bon usage des balises - Particula- rités et pièges du HTML ENVIRONNEMENT ET STRUCTURE Les titres - Les paragraphes de texte - Le formatage du texte - L'alignement - Les commentaires … MISE EN FORME DU TEXTE Les cellules de tableau - La fusion des cellules - Gestion de la taille du tableau - -En-tête et légende - Les bordures … LES TABLEAUX Le texte simple - Les objets d'un document - L'en-tête d'un do- cument HTML MISE EN FORME DU DOCUMENT Numérotées - A puces - Imbriquées - Les listes de définition LES LISTES 1 2 3 4 5 <mark>, <meter>, <time>, <figure>, <picture> LES NOUVELLES BALISES 6 Plan du cours La balise de liens - Liens vers une autre page - Liens à l'inté- rieur d'une page - Liens vers un autre site Web - Les Target … LES HYPERTEXTES La déclaration de formulaire - Menu déroulant - Bouton radio - Bouton checkbox - Bouton d'envoi - Bouton d'annulation … LES FORMULAIRES Balise <DIV> - Balise <span> - Balises <header>, <footer>, <nav>, <article> STRUCTURATION DE LA PAGE Les images du Web - L'insertion d'une image - L'espace au- tour d'une image - L'alignement d'une image … INSERTIONS D'IMAGES 7 8 9 10 Les formats du son et de la vidéo pour le Web - Intégrer du son avec la balise audio - Intégrer de la vidéo avec la balise vidéo INTÉGRER LES VISUELS, LA VIDÉO ET LE SON 11 HTML signifie Hyper Text Markup Language HTML est le langage de balisage standard pour la création de pages Web HTML décrit la structure d'une page Web HTML se compose d'une série d'éléments <HTML \> Qu'est-ce que le HTML? ENVIRONNEMENT ET STRUCTURE Les éléments HTML indiquent au navigateur comment afficher le contenu Les éléments HTML étiquettent des éléments de contenu tels que "ceci est un titre", "ceci est un paragraphe", "ceci est un lien", etc. <HTML \> Un document HTML simple ENVIRONNEMENT ET STRUCTURE <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> <HTML \> Un document HTML simple ENVIRONNEMENT ET STRUCTURE •La <!DOCTYPE html>déclaration définit que ce document est un document HTML5 •L' <html> élément est l'élément racine d'une page HTML •L' <head> élément contient des méta-informations sur la page HTML •L' <title>élément spécifie un titre pour la page HTML (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page) •L' <body> élément définit le corps du document et est un conteneur pour tous les contenus visibles, tels que les en- têtes, les paragraphes, les images, les hyperliens, les tableaux, les listes, etc. •L' <h1>élément définit un grand titre •L' <p>élément définit un paragraphe <HTML \> Navigateurs Web ENVIRONNEMENT ET STRUCTURE Un élément HTML est défini par une balise de début, du contenu et une balise de fin: L' élément HTML est tout, de la balise de début à la balise de fin: < tagname > Le contenu va ici ... < / tagname > < h1 > Mon premier cap < / h1 > < p > Mon premier paragraphe. Fghgfhgf fgghfghfghhgghgh gfhfgh < / p > Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> none none <HTML \> Navigateurs Web ENVIRONNEMENT ET STRUCTURE Le but d'un navigateur Web (Chrome, Edge, Firefox, Safari) est de lire les documents HTML et de les afficher correcte- ment. <HTML \> Structure de la page HTML ENVIRONNEMENT ET STRUCTURE Un simple éditeur de texte est tout ce dont vous avez besoin pour apprendre le HTML. Apprendre le HTML en utilisant Notepad Les pages Web peuvent être créées et modifiées à l'aide d'éditeurs HTML pro- fessionnels. Cependant, pour apprendre le HTML, nous recommandons un éditeur de texte simple comme Notepad (PC) ENVIRONNEMENT ET STRUCTURE Éditeurs HTML Voici le lien de téléchargement : NotePad++ Suivez les étapes ci-dessous pour créer votre première page Web avec Notepad ENVIRONNEMENT ET STRUCTURE Éditeurs HTML Windows 7 ou version antérieure: Ouvrez Démarrer > Programmes> Accessoires> Bloc-notes Étape 2: rédigez du HTML Etape 1 ETAPE 2 Enregistrez la page HTML Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le fichier ou cliquez avec le bouton droit de la souris - et choisissez «Ouvrir avec»). Le résultat ressemblera beaucoup à ceci: Affichez la page HTML dans votre navigateur Etape 3 ETAPE 4 <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier> Enregistrer sous dans le menu Notepad. Nommez le fichier "index.htm" Enregistrez la page HTML Exemples de base HTML <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Documents HTML Tous les documents HTML doivent commencer par une déclaration de type de document: <!DOCTYPE html>. Le document HTML lui-même commence par <html>et se termine par </ html>. La partie visible du document HTML est comprise entre <body>et </ body>. Exemple Éléments HTML Éléments HTML Un élément HTML est défini par une balise de début, du contenu et une balise de fin: < tagname > Le contenu va ici ... < / tagname > L' élément HTML est tout, de la balise de début à la balise de fin Exemple <h1> Mon premier cap </h1> <p> Mon premier paragraphe.</p> Éléments HTML Éléments HTML Éléments HTML imbriqués Les éléments HTML peuvent être imbriqués (cela signifie que les élé- ments peuvent contenir d'autres éléments). Tous les documents HTML sont constitués d'éléments HTML imbriqués. L'exemple suivant contient quatre éléments HTML ( <html>, <body>, <h1> et <p>): <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Exemple Éléments HTML Ne sautez jamais la balise de fin Certains éléments HTML s'afficheront correctement, même si vous ou- bliez la balise de fin: <!DOCTYPE html> <html> <body> <p>My First paragraph <p>My second paragraph </body> </html> Exemple Cependant, ne vous fiez jamais à cela! Des résultats inattendus et des erreurs peuvent survenir si vous oubliez la balise de fin! ! Éléments HTML Éléments HTML vides Les éléments HTML sans contenu sont appelés éléments vides. La <br> balise définit un saut de ligne et est un élément vide sans balise de fermeture: Exemple <p> Ceci est un paragraphe <br> avec un saut de ligne.</p> Éléments HTML Le HTML n'est pas sensible à la casse • Les balises HTML ne sont pas sensibles à la casse: <P>signifie la même chose que <p>. • Le standard HTML n'exige pas de balises minuscules Exemple <p> Ceci est un paragraphe.</p> <P> avec un saut de ligne.</P> Attributs HTML Attributs HTML • Tous les éléments HTML peuvent avoir des attributs • Les attributs fournissent des informations supplémentaires sur les éléments • Les attributs sont toujours spécifiés dans la balise de début • Les attributs se présentent généralement sous forme de paires nom / valeur comme: name = "value" Éléments HTML L'attribut href La <a>balise définit un lien hypertexte. L' href attribut spécifie l'URL de la page vers laquelle le lien va: Exemple <a href="https://www.ofppt.ma">Lien vers Ofppt</a> Éléments HTML L'attribut src La <img>balise est utilisée pour incorporer une image dans une page HTML. L' attribut src spécifie le chemin d'accès à l'image à afficher: Exemple <!DOCTYPE html> <html> <body> <h2> L'attribut src </h2> <p> Les images HTML sont définies avec la balise img et le nom de fichier de la source d'image est spécifié dans l'attribut src: </p> <img src="img_nature.jpg"> </body> </html> Éléments HTML Les attributs de largeur et de hauteur La <img>balise doit également contenir les attributs width et height, qui spécifient la largeur et la hauteur de l'image (en pixels): Exemple <!DOCTYPE html> <html> <body> <h2> L'attribut src </h2> <p> Les images HTML sont définies avec la balise img et le nom de fichier de la source d'image est spécifié dans l'attribut src: </p> <img src="img_nature.jpg "> <img src="img_nature.jpg " width="500" height= 300"> <img src="img_nature.jpg " width=« 100" height="60"> </body> </html> Éléments HTML L'attribut de style L' attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc. Exemple Résultat <! DOCTYPE html> <html> <body> <h2 style = "color: blue;"> L'attribut de style </h2> <p> L'attribut style est utilisé pour ajouter des styles à un élément, comme la couleur: </p> <p style = "color: red;"> Ceci est un paragraphe rouge. </p> </body> </html> Éléments HTML L'attribut de style L' attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc. Exemple Résultat <! DOCTYPE html> <html> <body> <h2 style = "color: blue;"> L'attribut de style </h2> <p> L'attribut style est utilisé pour ajouter des styles à un élément, comme la couleur: </p> <p style = "color: red;"> Ceci est un paragraphe rouge. </p> </body> </html> Éléments HTML L'attribut lang Vous devez toujours inclure l' attribut lang à l'intérieur de la balise <html>, pour déclarer la langue de la page Web. Ceci est destiné à aider les moteurs de uploads/Ingenierie_Lourd/ html-5-css3.pdf

Tags
Ingénierie html> </body> </html> <body> <html>
Documents similaires
  • 22
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager