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 : INFORMATIQUE APPLIQUÉE Chapitre 1 : Chapitre 1 : Le langage HTML Ensei

MODULE : INFORMATIQUE APPLIQUÉE Chapitre 1 : Chapitre 1 : Le langage HTML Enseignant : Hatem Sandid PLAN DU COURS Introduction Définition Structure d’un document Les titres/Les listes Fond de page et couleur du texte La mise en forme du texte Le lien hypertexte Les images Les tableaux Les frames Les formulaires Exercice d’application 2 INTRODUTION Internet offre un formidable moyen de communication à travers le monde en interconnectant des millions d'ordinateurs. C’est un moyen d’accès à une masse indescriptible d’informations, un outil de collaboration permettant l’apprentissage et aussi le support des compétences de personnes à travers le monde. Internet offre plusieurs services, parmi lesquels on trouve : Echanger du courrier et des documents électroniques : en utilisant le protocole : Simple Mail Transfer Protocol (SMTP). Transférer des fichiers d'une machine à une autre : en utilisant le protocole : File Transfer Protocol (FTP). Participer à des groupes de discussion : en utilisant le protocole : News Network Transfer Protocol (NNTP). Accéder à des pages hypertexte et hypermédia : Ce service, nommé World Wide Web ou WWW, permet d'accéder à des sites Web en utilisant le protocole : Hyper Text Transfer Protocol (HTTP). 3 INTRODUTION Un site web est un ensemble de pages Web reliées par des liens hypertextes et gérées par une seule compagnie, organisation, ou par un individu. Un site Web est identifié par son adresse, appelée URL. exemple: http://www.isetso.rnu.tn http:// étant le protocole qui assure l’échange des pages entre les serveurs Web. www.isetso.rnu.tn étant le Nom de domaine. La page est stockée sur un serveur web. Elle est repérée sur le réseau Internet par un nom de domaine. A chaque nom correspond une adresse IP. Les fournisseurs de services Internet (ou providers) disposent de serveurs DNS pour convertir les noms de domaine en adresses IP. Une page Web est écrite en langage HTML (Hyper Text Mark-up Language) et peut contenir du texte, des images (statiques ou animées), des séquences vidéos, du son et des (hyper)liens. Ces liens permettent de passer d’une page Web à une autre (située éventuellement à l’autre bout du monde). Une page web porte un nom et l’extension « .html » ou « .HTML » ou « .htm » Exemple: http://www.isetso.rnu.tn/index.html 4 Adresse du site Web Nom de la page Web INTRODUTION Deux méthodes sont possibles pour créer des fichiers HTML : Avec un éditeur de texte (ex : Bloc-notes), dans lequel vous devrez tout saisir (les balises et le texte) ; Avec un rédacteur de page HTML WYSIWYG (What You See Is What You Get) (ex. : FrontPage, DreamWeaver, etc.), qui utilise le principe de « drag & drop » pour insérer FrontPage, DreamWeaver, etc.), qui utilise le principe de « drag & drop » pour insérer des objets dans le document HTML comme un traitement de texte WYSIWYG (ex. : MS Word) et ajoute donc automatiquement les balises HTML au fur et à mesure de l’insertion. Pour visualiser un document HTML, un navigateur web est nécessaire, ex.: Opera, Safari, Mozilla Firefox, Netscape, Google Chrome, Internet Explorer 5 HTML: DÉFINITION HTML = Hypertext Markup Language – en anglais (ou langage de balisage d’hypertexte - en français) Hypertext : contient des liens appelés liens hypertexte ou hyperlien permettant de passer d’un document à un autre. autre. Markup : balisage Une balise est un délimiteur de texte constitué d’un caractère ou d’un mot encadré par les signes inférieur et supérieur (<, >). Les navigateurs Web établissent une correspondance entre une balise et des instructions de formatage. Exemple: <STRONG> Ceci est un texte en gras</STRONG> 6 HTML : STRUCTURE D’UN DOCUMENT Un document HTML est composé de texte et de commandes (balise ou tag en anglais). Ces commandes permettent de mettre en forme le texte (Titre, caractère gras, italique, image, liens, etc...). Chaque document HTML doit être écrit entre les balises HTML. Entre les balises HEAD vous devez mettre tout ce qui concerne l'environnement de votre page, le titre, les couleurs du texte, les liens et autres informations. Ces éléments n'apparaissent pas directement dans la page. Les balises TITLE permettent de faire apparaître dans la zone titre de votre navigateur le texte que vous insérez entre ces balises. Entre les balises BODY vous insérez les éléments qui constitueront votre page, les informations texte, images, liens, le fond d'écran, les formulaires, etc. 7 HTML: STRUCTURE D’UN DOCUMENT 8 HTML: RÈGLES DE BALISAGES o Deux types de balises : o Autonome <…> (ex. <IMG src="image.jpg">) o Délimitant une zone o Balise de début de zone <…> (ex. <HTML>) o Balise de fin de zone </…> (ex. </HTML>) o Identifiants de balises non sensibles à la casse : ils peuvent être écrits en minuscules ou en majuscules. (<BODY> = <Body>) o Certaines balises sont associées à un ou plusieurs attributs ; Chaque attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et, très souvent, une valeur à préciser (nom=‘‘valeur’’), 9 indications à une balise. Il possède un nom et, très souvent, une valeur à préciser (nom=‘‘valeur’’), exemple : <IMG src="photo.gif"> où le nom de l’attribut est « src » et sa valeur est « photo.gif » o N.B. : Les espaces et les retours à la ligne dans un texte tapé ne sont pas interprétés par les navigateurs. o Commentaires :  o Les couleurs sont définies : o soit par le nom de la couleur en anglais : couleur = ‘‘red’’ o soit par 6 chiffres hexadécimaux représentant 2 à 2 les tons de Rouge, de Vert et de Bleu tel que : couleur="#RRVVBB" où R, V et B représentent respectivement un chiffre hexadécimal entre 0 et F o Codage des caractères spéciaux : é = é à = à ô = ô CODAGE DES COULEURS Nom de la couleur Codage RVB Aperçu aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF gainsboro #DCDCDC ghostwhite #F8F8FF Caractère Code HTML " " CODAGE DES CARACTÈRES SPÉCIAUX Lorsque ces caractères sont utilisés dans un texte contenu dans une page web, il est donc impératif de les coder en HTML, au risque sinon de provoquer une erreur d'affichage dans le navigateur. 10 ghostwhite #F8F8FF gold #FFD700 goldenrod #DAA520 gray #808080 green #008000 greenyellow #ADFF2F honeydew #F0FFF0 mediumsea green #3CB371 yellow #FFFF00 yellowgreen #9ACD32 " " & & ‹ < › > & & espace ç ç è è é é à à ù ù HTML : BALISES DE TITRE Les balises H1, H2, H3, H4, H5 et H6 sont des styles de mise en forme du texte. La balise H1 a la valeur la plus importante (écriture plus large ...) et la balise H6 a la valeur la moins importante. <html> <head> <title> test des titres </title> </head> Format Résultat <H1>Taille 1</H1> Taille 1 <H2>Taille 2</H2> Taille 2 <H3>Taille 3</H3> Taille 3 <H4>Taille 4</H4> Taille 4 <H5>Taille 5</H5> Taille 5 <H6>Taille 6</H6> Taille 6 <body bgcolor="pink "> <h1>Bienvenue sur ma page !</h1> <p>Petite introduction sur ce site.</p> <h2>Première partie</h2> <p>Un paragraphe intéressant</p> <p>Un autre paragraphe.</p> <h3>Première sous-partie</h3> <p>Un paragraphe court.</p> <p>Un autre plus long.</p> etc. </body> </html> 11 BALISES DE STYLE Balise de style Effet Visuel <B> ou <strong> Met la police en gras (bold) <I> Italique (italic) <S> ou <STRIKE> ou <del> Texte barré <SAMP> Exemple <SMALL> Police plus petite Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte. 12 <BIG> Police plus grande <U> ou <INS> Texte souligné (underline) <SUB> Texte en Indice <SUP> Texte en Exposant <TT> Caractère de machine à écrire <VAR> Nom d'une variable <address> écrire une adresse en dessous de la ligne <CITE> Citation <CODE> Instruction <DFN> Définition d'instance MISE EN FORME DU TEXTE Saut de paragraphe <P> … </P> A la ligne [Line break] <BR> Insertion d'une ligne horizontale de séparation <HR> …. </HR> Centrage [Center] <CENTER>…</CENTER> Style du texte: < FONT > et </ FONT > pour modifier l'apparence du texte Style du texte: < FONT > et </ FONT > pour modifier l'apparence du texte Taille de caractère [Font size]: de 1 à 7 ou bien de -2 à +4 <FONT SIZE=4>…</FONT> Couleur du caractère [Font color]: <FONT COLOR="#$$$$$$ "> … </FONT> Police [Font face]: <FONT FACE ="Arial, Times New Roman" > … </FONT> Texte pré-formaté : <PRE> et </PRE> : PRE affiche le texte contenu dans ses balises tel qu'il est écrit en respectant les espaces, les tabulations et les sauts à la ligne. N.B. : Il n'est pas possible d'afficher des images à l'intérieur du tag PRE. 13 DIFFÉRENCE D’AFFICHAGE ENTRE LES NAVIGATEURS Internet Explorer Opera 14 Firefox Safari MISE EN FORME DU TEXTE uploads/s1/ cours-html 13 .pdf