1 / 24

SEANCE 2

SEANCE 2. Langage HTML. Découverte du langage HTML Généralités sur le langage HTML. Une première page. Les balises. Utilisation de Kompozer. Contenu de la séance 2 :. Lundi 24 mars 2 014. Acronyme de H yper T ext M arkup L anguage normalisé par le World Wide Web Consortium ( W3C).

jenna
Download Presentation

SEANCE 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SEANCE 2 Langage HTML Lundi 24 mars 2 014

  2. Découverte du langage HTML • Généralités sur le langage HTML. • Une première page. • Les balises. • Utilisation de Kompozer. Contenu de la séance 2 : Lundi 24 mars 2 014

  3. Acronyme de Hyper TextMarkupLanguage normalisé par le World Wide Web Consortium (W3C). • Langage de description de documents. • Contenu (textes, images, tableaux…) • Mise en forme. • Langage purement textuel. • Pas de format compliqué. • Navigateurs : volonté de respecter la norme. • Une page web sera représentée de la même manière d’un navigateur à l’autre. Qu’est-ce que HTML ?

  4. C'est un langage de description. • Le langage HTML est basé sur l’utilisation de balises (tags en anglais). • Une balise est une "instruction" comprise entrecrochets < >qui possède un nom et parfois des attributs. • Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom de la balise qui est précédé du signe /. Les balises du HTML

  5. Pour créer votre première page web, lancez un simple éditeur de texte. (Le bloc-notes de Windows par exemple). • Inscrivez le texte suivant et sauvegardez le fichier sous un nom quelconque. <HTML> : balise ouvrante <HEAD> <TITLE>Ma première page en HTML</TITLE> </HEAD> <BODY> Bonjour, voici ma première page web ! </BODY> </HTML> : balise fermante • Enregistrezle document au format HTML (*.html) dans un répertoire puis l’ouvrir avec votre navigateur. Une première page !

  6. <br> : cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise <br>, vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR" (==> <BR><BR>). Il n'y a pas de balise de fin ! • <font>et </font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus fréquentes peuvent être nommées explicitement en anglais (red, green, blue,...) sinon il faut placer le code Hexadécimal de la couleur voulue. - nous avons également vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#FFFFFF). Balises de mise en forme.

  7. <HTML> <HEAD> <TITLE>Fond d'écran en couleur</TITLE> </HEAD> <BODY bgcolor="#000000"> <BR> <FONT color="#FFFFFF">texte blanc sur fond noir</FONT> <BR><BR><BR><BR> <FONT color="#FF0000">Le texte en rouge sur fond noir</FONT> </BODY> </HTML> Exemple de balises de mise en forme.

  8. l'attribut "size" : "size" (→taille) permet de modifier la taille du texte compris entre <font> et </font>. Vous avez le choix entre donner un nombre entre 1 et 7 (par défaut →3) ou bien donner une valeur de "décalage" par rapport à la taille par défaut du navigateur ("-2", "-1", "+1", "+2", "+3", "+4"). • l'attribut "face" : "face" (→apparence) permet de choisir la police dans laquelle le texte sera affiché. • Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) ! Dans le code ci-dessous nous combinons 3 attributs : <FONT color="#ff0000" size=4 face="Verdana">Taille 4 en rouge en Verdana</FONT> Balises de police et taille.

  9. <HTML> <HEAD> <TITLE>Taille et police du texte</TITLE> </HEAD> <BODY> <FONT size=7>Taille 7</FONT> <BR> <FONT size=2>Taille 2</FONT> <BR> <FONT size=1>Taille 1</FONT> <BR><BR> <FONT size="+4">Taille +4</FONT> <BR> <FONT size="+1">Taille +1</FONT> <BR> <FONT size=4 face="Verdana">Taille 4 en Verdana</FONT> <BR> <FONT size=2 face="Comic sans MS">Taille 4 en Comic sans MS</FONT> <BR> <FONT face="Arial, Times New Roman" color="#336699"> Taille normal en Arial si la police existe sinon en Times New Roman en couleur #336699</FONT> <BR> </BODY> </HTML> Exemple de balises de taille et police.

  10. <b>et</b>: écrit le texte en gras. • <i>et</i>: écrit du texte en italique. • <u>et</u>: souligne du texte. Evitez d'utiliser trop cette balise car un texte souligné peut être confondu avec un lien et ça peut être gênant pour le visiteur. • <center> et</center> : centre le texte par rapport à l'écran. • <!-- et--> : Ces balises permettent de commenter votre code. Le texte compris entre ces balises ne sera pas pris en compte par le navigateur ( ==> pas affiché !). Le commentaire peut s'étendre sur plusieurs lignes. Faites attention à bien fermer le commentaire (==> "-->") sinon la fin de votre code ne sera pas affichée !. Balises centré, gras…

  11. <HTML> <HEAD> <TITLE>Texte en gras, italique, centré</TITLE> </HEAD> <BODY> <B>texte en gras</B> <BR> <I>texte en italique</I> <BR> <U>texte souligné</U> <BR> <CENTER>texte centre</CENTER> <BR> <!-- On peut également imbriquer les balises --> <B><CENTER>texte centré en gras</CENTER></B> <!-- Mais il faut faire attention à refermer les balises dans le bon ordre comme ci-dessus ! <B><CENTER>......</B></CENTER> est incorrect --> <BR> <!-- Nous pouvons également réutiliser la balise FONT --> <B><CENTER><FONT color="red" size=2>texte en rouge, gras, centré de taille 2</FONT></CENTER></B> <BR> </BODY> </HTML> Exemple de balises centré, gras...

  12. <table> et </table> : début et fin d’un tableau. • <tr> et </tr> : définition d’une ligne. • <td> et </td> : définition d’une case. • <table>, <tr>, <td> : balises définissant un contenu. • Exercice : Réaliser le tableau suivant. Balises de tableau

  13. <html><head><title>Exemple tableau</title> </head><body> <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> <br> Réponse à l’exercice !. </body></html> Solution à l’exercice.

  14. Ils permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page. Il y a 3 types de liens : • Les liens internes à un site (=> utilisation très fréquente des chemins relatifs car plus court à taper). • Les liens internes à une page (ou ancre) (=> utilisation de chemins absolus ou relatifs). • Les liens externes (=> uniquement des chemins absolus !) • <a>et</a>: permettent de créer un lien hypertexte. Son attribut indispensable est "href". En effet, il permet de préciser l'adresse de la page de destination du lien qui sera créé. Cette adresse peut être soit absolue soit relative. Si vous souhaitez faire un lien interne à une page, il faut créer un ancre. On crée le lien vers cet ancre comme ceci : <A href="#nom_ancre">Texte1</A> et on crée l'ancre comme ceci : <A name="nom_ancre">Texte2</A> Balise de liens hypertextes

  15. <HTML> <HEAD> <TITLE>Texte en gras, italique, centré</TITLE> </HEAD> <BODY> <A href="index.html">Lien vers une autre page </A> <BR><BR> <A href="http://www.google.fr">Lien vers un site externe</A> <BR><BR> <A href="#ancre1">Lien vers l'ancre 1</A> <!-- lien vers l'ancre nommé ancre1 --> <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR> <A name="ancre1">Saut à cet endroit </A <!—définition de l'ancre --> </BODY> </HTML> Exemple de lien hypertexte.

  16. Balise <img> • Attention : pas de balise fermante • Syntaxe :<IMG SRC=" im1.jpg" ALT= " Ma premiere image" WIDTH=200 HEIGHT=100> • Propriétés de l’image : • Dimensions : • width=? : largeur • height=? : hauteur • Bordure: • border=? : taille de la bordure • Alignement : • align = top ou middle ou botton ou left ou right. • Image en arrière plan – il suffit d’ajouter un attribut « background » dans la balise <body> • <BODY background="papier.jpg"> Insertion d’une image

  17. <html><head><title>Exemple image</title></head><body><h2>voici ma plus belle création. </h2><br> <img style="width: 720px; height: 450px;" alt="" src="vraiment_joli_visage.JPG" align="top"><br> <h2>La même en petit et centrée</h2> <div style="text-align: center;"><img style="width: 69px; height: 43px;" alt="" src="vraiment_joli_visage.JPG" align="top"></div> <h2>La même avec un ajustement à droite par rapport au texte</h2> <div style="text-align: justify;"> <br> <img style="width: 720px; height: 450px; float: right;" alt="" src="vraiment_joli_visage.JPG"> </div><br> <h2>La même avec un ajustement à gauche par rapport au texte, un écart de 20 pixels par rapport au texte, et une bordure de 10 pixels. Mais comment modifier la couleur du tour ? </h2> <div style="text-align: justify;"><a name="ancre1"></a><br> <img style="border: 10px solid ; width: 720px; height: 450px; float: left;" alt="" src="vraiment_joli_visage.JPG" hspace="20" vspace="20"></div> </body></html> Exemple d’insertion d’image.

  18. <h1> un titre de niveau 1</h1> • <h2> un titre de niveau 2</h2> • <h3> un titre de niveau 3</h3> • Parallèle : Titre1, Titre2, Titre3 d’un traitement de texte. Niveaux de titres

  19. Liste non-ordonnée [Bullet list] <UL>et</UL> • Liste ordonnée [Numberedlist] <OL>et</OL> • Elément de liste [List items] <LI> Les listes

  20. <html> <head> <title>Exemples mises en forme de texte HTML 4</title> </head> <body> Voici une structure sous forme de liste à puces :<br> <ul> <li>blabla 1</li> <li>blabla 2</li> <ol> <li>sous blabla 2 1 sous forme de liste numérotée</li> <li>sous blabla 2 2 sous forme de liste numérotée</li> <li>sous blabla 2 3 sous forme de liste numérotée</li> </ol> <li>blabla 3</li> </ul> </body> </html> Exemple.

  21. <html> • <head> • <title> le titre du document </title>. • Apparaît dans la barre de titre du navigateur. • </head> • <body> • Le corps du document • </body> • </html> Résumé : structure d’un document HTML

  22. Outil WYSYWYG • Ouf, pas d’absolue nécessité de rédiger toutes les balises à la main. • Création de page WEB • Génération de code HTML • Installation simple par décompression (pas d’obligation d’être administrateur) • Site : http://www.kompozer.net/ • Dans la suite : • travail avec Kompozer • Étude du code HTML généré  balises générées avec la norme actuelle (différence). Editeur HTML Kompozer.

  23. Editeur HTML Kompozer: interface

  24. Création d’une page HTML Vous allez concevoir une page HTML en utilisant l’éditeur KompoZer pour construire une page contenant les items suivants : • Une présentation personnelle, • L'informatique et vous, l’ISN pourquoi et comment, • Votre matériel, • Vos idées de projet pour l’examen. • Un lien placé en bas de la page doit vous diriger vers le site Internet du lycée. Editeur HTML Kompozer: exercice.

More Related