Scribd
Importer
20 vues25 pages

Apprendre HTML5

Le document présente une introduction à la programmation HTML5, en expliquant comment créer une page web à l'aide de balises et d'attributs. Il décrit la structure de base d'une page HTML, y compris les sections <head> et <body>, ainsi que l'importance de l'encodage UTF-8. Des exemples de balises et de leur utilisation sont fournis pour aider à comprendre la syntaxe HTML.

Transféré par

impactarthur7
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF ou lisez en ligne sur Scribd
20 vues25 pages

Apprendre HTML5

Le document présente une introduction à la programmation HTML5, en expliquant comment créer une page web à l'aide de balises et d'attributs. Il décrit la structure de base d'une page HTML, y compris les sections <head> et <body>, ainsi que l'importance de l'encodage UTF-8. Des exemples de balises et de leur utilisation sont fournis pour aider à comprendre la syntaxe HTML.

Transféré par

impactarthur7
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF ou lisez en ligne sur Scribd
PPE2- B’ HTML: IRS ET EXERCK 2011/2012 HTML5 1) L’environnement de programmation HTML : -Ouvrir Notepad++ et taper les trois lignes suivantes : Voici mon premier TP PPE2 Conception d’une page WEB Utilisation HTMLS et CCS3 Fiber Eaten Recherche readage engage Paamtrage Maco Gdeuton Tea Comptes Documents? 2e3BEs Gls HO elae/42\8E/% (HACK eel zevr es Dennen PPE2- BTS SI HTML: IRS ET EXERCK 2011/2012 -Sauvegarder votre texte sous le nom ppe2 [Link]!, dans un répertoire htmls (A eréer) ~ Aller dans le répertoire html5, double cliquer sur exo. html Smer* —ehlessiabovithaue — PatigeEC Y Saker Nomen desi a Fore Now even [Weck pet DMs Gitmpaconentrtces ‘i Teetanemes (5 Stictegue 13 Documents moses DMs voter eB oie ss iri 1M Ontese ee) ca fretge Gi, Wrens PPE2- BTS SI HTMLS COURS ET EXERCI 2011/2012 Voici laffichage du navigateur : erates [one = [Kivovewenbepgne eT || @eELETwat eyez =|) ‘Vcimon pris TP BPS? Contin ne pope WEB Usain HTMLS ot CCS Tout le texte s'affiche sur la méme ligne alors qu'on avait écrit 3 lignes En fait, pour eréer une page web il ne suffit pas simplement de taper du texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des instructions, comme "aller & la ligne", "aflicher une image", etc. Les balises et leurs attributs Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles & T’écran pour vos visiteurs, mais elles permettent a ordinateur de comprendre ce qu'il doit afficher. Les balises se repérent facilement, Elles sont entourées de "chevrons", clest-aedire des symboles < et >, comme ceci : Les balises indiquent la nature du texte autour d'elles. Elles veulent dire par exemple : "Ceci est le titre de la page”, "Ceci est une image", "Ceci est un paragraphe de texte", etc. On distingue deux types de balises : les balises en paires et les balises orphelines, PPE2- BTS SIO HTMLS COURS ET EXERCICES. 2011/2012 Elles s'ouvrent, contiennent du texte, et se ferment plus loin, Voici quoi elles ressemblent : PPE2 CONCEPTION SITE WEB On distingue une balise ouvrante () et une balise fermante () qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises nfest pas un titre. ph Ce sont des balises qui servent le plus souvent a insérer un élément & un endroit précis (par exemple une image). II n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire a Yordinateur "Insére une image ici’ Une balise orpheline s‘écrit comme ceci Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement . Néanmoins, pour ne pas confondre avec le premier type de balise, il est recommander de rajouter ce / (slash) a la fin de la balise attributs Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires, L'attribut se place aprés le nom de la balise ouvrante et a le plus souvent une valeur, comme ‘A quoi ¢a sert ? Prenons la balise que nous venons de voir. Seule, elle ne sert pas & grand chose. On pourrait rajouter un attribut qui indique le nom de l'image & afficher PPE2- BTS SIO HTMLS COURS ET EXERCICES. 2011/2012 Llordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo. pg. Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Voltaire : auteur="Voltaire"> ‘instruire dans la gaieté. Le savoir triste est un savoir mort ‘Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais , nous allons les découvrir dans la suite de ce cours. IL) Structure de base d'une page HTMLS Copier-coller le code source ci-dessous dans Notepad++. Ce code correspond a la base d'une page web en HTMLS Titre Copier dans Notepad++, cela donne : PPE2- BTS SI HTMLS COURS ET EXERCI 2011/2012 fichier Edtion Recherche Affichage Encodage Langage Paramétrage Macro Exécution Compléments Documents? x] sEHR 82 8|4O0| ac) #2) 24/83/5178" || Er testrem | EEDOCTYPE Htmid Jcntmi lange" fr"> est la premiere que l'on ouvre, et c'est aussi la demiére que Yon ferme (tout & la fin du code, avec ). Les balises doivent étre fermées dans le sens inverse de leur ouverture. Un exemple : + : correet. Une balise qui est ouverte a l'intérieur d'une autre doit aussi étre fermée 4 'intérieur. + : incorreet, les balises s'entremélent. Le doctype Code : HTML La toute premitre ligne s‘appelle le doctype. Elle est indispensable car c'est elle qui indique quil s‘agit bien d'une page web [Link] commence par un point exclamation, PPE2- BTS SIO HTMLS COURS ET EXERCICES. 2011/2012 La balise Code : HTML Crest la balise principale du code. Elle englobe tout le contenu de votre page ; la balise fermante se trouve tout a la fin du code ! L'en-téte et le corps Une page web est constituée de 2 parties + Llentéte : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractéres spéciaux), etc. Cette section est généralement assez. courte. Les informations que l'en-téte contient ne sont pas affichées sur la page, ce sont simplement des informations générales & destination de ordinateur. Elles sont cependant trés importantes ! + Le comps : c'est li que se trouve la partie principale de la page. Tout ce que nous éerirons ici sera affiché a "écran, C'est & l'intérieur du corps que nous éerirons la majeure partie de notre code. Code : HTML Cette balise indique l'encodage utilisé dans votre fichier .html. Liencodage indique la fagon dont le fichier est enregistré. C'est lui qui détermine comment les caractéres spéciaux vont safficher (accents, idéogrammes chinois et japonais, symboles arabes, etc.). I1y a plusieurs techniques d'encodage aux noms bizarres utilisées en fonction des langues = 1SO-8859-1, OEM 775, Windows-1253... Un seul cependant devrait étre utilisé aujourd'hui autant que possible : UTF-8. Cette méthode d’encodage permet dafficher sans aucun probléme pratiquement tous les symboles de toutes les langues, PPE2- BTS SIO HTMLS COURS ET EXERCICES: 2011/2012 Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que vote fichier soit enregistré en UTF-8 dés le début. Cela ne s'applique qu’au fichier actuellement ouvert. Pour ne pas avoir a le faire pour chaque nouveau fichier, aller dans le menu Paramétrage > Préférences, onglet Nouveau document/Dossier, Sélectionnez UTF- 8 sans BOM dans la liste. Le titre principal de la page Code : HTML Crest le titre de votre page, probablement I'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient. Tl est conseillé que le titre soit assez court (moins de 100 caractéres en général). Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez. que le titre s'affiche dans Ionglet. Insérer un commentaire Un commentaire est une balise HTML avec une forme bien spéciale + Code : HTML - Sélectionner - Ceci est un commentaire --> ‘Vous pouvez le mettre of vous [Link] sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez. vous en servir pour vous aider a vous repérer dans votre code source. Exemple : Créer le fichier PPE2 Exo2,htm!

Vous aimerez peut-être aussi