Remerciez-le!

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

SNT – 2è 1 HTML cours PROJET DE SITE WEB L’éditeur de texte Un éditeur de texte

SNT – 2è 1 HTML cours PROJET DE SITE WEB L’éditeur de texte Un éditeur de texte est un logiciel destiné à la création et l'édition de fichiers textes. C’est un programme dédié à l'écriture de code. Il existe de nombreux logiciels destinés à la création des sites web. En pratique Bloc-notes, l’éditeur de texte intégré par défaut à Windows suffit. Mais nous utiliserons Note Pad ++, éditeur de texte gratuit. Le navigateur Le navigateur est le programme qui nous permet de voir les sites web. Son travail est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel. Le navigateur est un programme extrêmement complexe. Le principal problème est que les différents navigateurs n'affichent pas le même site exactement de la même façon. Cela est dû au fait qu’ils ne connaissent pas toujours les dernières fonctionnalités de HTML et CSS. On préconise d’utiliser ici Google Chrome. SNT – 2è 2 HTML cours HTML – Création d’une page WEB TP1 – Editeur 1/ Ouvrir l’éditeur de texte Notepad++ et écrire 3 lignes en respectant les sauts de lignes. Bonjour Bienvenue sur mon site ! Commençons par découvrir le langage HTML. 2/ Enregistrez le fichier sous le nom TP1.html dans votre dossier. 3/ Ouvrez ce fichier avec GoogleChrome. Que remarquez-vous ? Pour créer une page web il ne suffit pas de taper du texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des instructions à l'ordinateur comme « aller à la ligne », « afficher une image », etc… La balise est un caractère, ou une série de caractères, utilisé pour la structuration d'un document et qui sera invisible par le lecteur final. Les balises et leurs attributs 1 – Les balises Les pages HTML sont remplies de balises. Elles se repèrent facilement. Elles sont entourées de chevrons, c'est-à-dire des symboles < et >, comme ceci : <balise>. Elles indiquent la nature du texte qu'elles encadrent. 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 : • Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus loin. <title>Ceci est un titre</title> On distingue une balise ouvrante : <title>, et une balise fermante : </title> qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui est entre ces deux balises est un titre. SNT – 2è 3 HTML cours • Les balises orphelines : Elles servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ». Une balise orpheline s'écrit comme ceci : <img /> Le / de fin n'est pas obligatoire. On pourrait écrire seulement <img>. Néanmoins, pour ne pas les confondre avec les balises ouvrantes et pour plus de lisibilité, les webmasters recommandent de rajouter ce / (slash) à la fin des balises orphelines. 2 – Les attributs Les attributs sont 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 ceci : <balise attribut="valeur"> Prenons la balise <img />. Seule, elle ne sert pas à grand-chose. On rajoute l’attribut « Source » qui indique le nom de l'image à afficher : <img src="photo.jpg" /> L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. Dans le cas d'une balise fonctionnant « par paire », on met les attributs dans la balise ouvrante. Structure de base d’une page HTML Toute page en html commence par le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html> Que remarque-t-on ? • Les balises s’ouvrent et se ferment dans un ordre précis (comme les parenthèses dans une expression mathématique) • Il y a des espaces en début de ligne. C’est l’indentation. Ce n’est pas obligatoire, mais cela rend le code beaucoup plus lisible et fait partie des bonnes habitudes à acquérir lorsqu’on commence à programmer. On peut utiliser la touche Tab pour obtenir ce résultat. SNT – 2è 4 HTML cours 1 – DOCTYPE <!DOCTYPE html> La toute première ligne s'appelle le doctype. C’est une balise spéciale, elle commence par un point d’exclamation. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web écrite en HTML5. 2 – balise HTML <html> </html> 3 – balises HEAD et BODY Une page web est constituée de deux parties : • L'en-tête <head> : cette section donne quelques informations générales sur la page comme son titre et l'encodage (pour la gestion des caractères spéciaux). Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes. • Le corps <body> : c'est la partie principale de la page. C'est à l'intérieur du corps que la majeure partie du code est écrite et c’est ce qui est affiché à l’écran. 4 – L‘encodage CHARSET <meta charset="utf-8" /> Cette balise indique l'encodage utilisé dans votre fichier html, c’est-à-dire la façon dont le fichier est enregistré. Il existe différentes normes de codage informatique, la norme ASCII est une des plus connues mais elle ne permet pas le codage des caractères accentués. Aujourd’hui, près de 90% des sites WEB utilisent la norme UTF-8. UTF-8, pour « UCS Transformation Format 8 bits », est un format de codage de caractères. L’avantage principal de ce format est qu’il permet de coder des milliers de caractères et donc d’être utilisable dans de nombreuses langues (accents, idéogrammes...). Il ne suffit pas de dire que votre fichier est en UTF-8, il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas désormais par défaut dans la plupart des éditeurs de texte. Mais si les accents s'affichent mal, c'est qu'il y a un problème avec l'encodage. Vérifiez que la balise meta indique bien UTF-8 et que votre fichier est enregistré en UTF-8. (dans NotePad++, allez dans le menu Encoding et vérifier que votre fichier est enregistré sous > Encode in UTF-8 without BOM ). 5 – La balise TITLE <title> Titre </title> C'est la balise principale du code. Elle englobe tout le contenu de votre page. La balise fermante </html> se trouve tout à la fin du code. C'est le titre de votre page. Toute page doit avoir un titre qui décrit ce qu'elle contient. Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). SNT – 2è 5 HTML cours 6 – Les commentaires Quel que soit le langage informatique utilisé, il est très important de mettre des commentaires dans votre code. Un commentaire permet de donner des explications sur le fonctionnement de la page. Les commentaires ne sont pas visibles à l’écran ; on peut les voir, une fois la page mise en ligne sur le Web, en faisant un clic droit sur la page et en sélectionnant « Afficher le code source de la page ». Un commentaire est une balise HTML avec une forme bien spéciale :   TP2 – Structure de base 1/ Dans NotePad++, recopier le code de la structure de base d’une page HTML : ------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> ------------ 2/ Y recopier le texte que vous avez saisi pour le TP1 3/ Compléter par un Titre entre les balises <title> </title> 4/ Enregistrer votre page WEB sous le nom de TP2.html 5/ Ouvrir dans votre navigateur. Que constatez-vous ? SNT – 2è 6 HTML cours HTML – Organisation du texte 1 - Le paragraphe La balise <p> délimite les paragraphes, c’est-à-dire un passage à la ligne avec saut de ligne. • <p> signifie « Début du paragraphe » • </p> signifie « Fin du paragraphe » 2 - Aller à la ligne La balise <br /> permet d’aller seulement à la ligne. C'est une balise orpheline qui doit se trouver obligatoirement à l'intérieur d'un paragraphe. Remarque : On peut théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de lignes, mais c'est une mauvaise pratique qui rend le code délicat à maintenir. Pour décaler un texte avec plus de précision, on utilisera le CSS, ce langage qui vient compléter le HTML. 3 - Les titres En HTML, on a le droit d'utiliser six niveaux de titres différents et on a donc six balises de titres différentes : • <h1> </h1> : signifie « titre uploads/S4/ projet-html.pdf