information8 html

March 16, 2018 | Author: jaspe | Category: Html, Technology, World Wide Web, Markup Language, Hypertext Transfer Protocol
Share Embed Donate


Short Description

Download information8 html...

Description

le langage HTML Maxime Morge Université Jean Monnet - ISEAG

Maxime Morge

L2 ECO - slide #1

Plan

Introduction ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme

Pourquoi est-il nécessaire de connaître le langage HTML ? Structure du contenu Comment stucturer le contenu d’une page ? Données hypertextes/multimédia Comment insérez des images liés des documents numériques ? Mise en forme Comment mettre en forme le contenu d’une page ?

Maxime Morge

L2 ECO - slide #2

Introduction

Maxime Morge

L2 ECO - slide #3

Internet

● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu Données hypertexte/multimédia Mise en forme

Internet = interconnexion des 6= réseaux informatiques.

Protocole de communication = langage informatique qui dotent les réseaux d’une fonctionnalité. Par exemple : HTTP (HyperText Transfer Protocol) → transférer des données sur Internet ; HTTPS (Secure HyperText Transfer Protocol) → transférer des données cryptées sur Internet ; FTP (File Transfer Protocol) → transférer des données de grande taille sur Internet ; SMTP (Simple Mail Transfer Protocol) → transférer le courrier. POP (Post Office Protocol) → récupérer son courrier sur un serveur distant.

Maxime Morge

L2 ECO - slide #4

Adresses

● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu Données hypertexte/multimédia Mise en forme

Maxime Morge

Adresse IP = identifiant unique des ordinateurs (par ex : 195.83.83.36). Nom de machine = nom.domaine.ext (par ex : webcit.univ-st-etienne.fr) . DNS (Domain Name Service) = système de traduction adresse IP ↔ nom de machine

Port = une "boîte au lettre" unique sur la machine (par ex : FTP/21, SMTP/25, HTTP/80, POP3/110).

URL (Unified Ressource Location) = adresse pour une ressource protocole ://(user :pwd@)nom.domaine.ext:port)/chemin (par ex, ftp ://morg1234 :[email protected] :8080/perso/note.txt)

L2 ECO - slide #5

Protocole HTTP

Le protocole HTTP = le plus utilisé sur Internet.

Maxime Morge

L2 ECO - slide #6

La toile

Web = toile d’araigné constituée par les pages web. ● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu Données hypertexte/multimédia Mise en forme

Site = ensemble de pages cohérentes. Hyperlien = lien entre : des éléments dans une même page ; différentes pages d’un même site ; différentes pages de différents sites. Page web écrit avec un éditeur WYSIWYG (What You See Is What You Want) : Dreamweaver, FrontPage, M$ Word, Openwriter, . . . ou un éditeur WYSIWYW (What You Is What You Want) : un éditeur de fichier texte (par ex, Notepad). What you see is not what you want ! ⇒

HTML ("HyperText Markup Language") = langage de formatage de données liées/multlimédia (texte, images, . . . ). Maxime Morge

L2 ECO - slide #7

Principe du HTML

● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu Données hypertexte/multimédia Mise en forme

Balise = un mot clef encadré par le caractère inférieur () (par ex, ou ). Comment utiliser les balises ? un texte est encadré entre une balise ouvrante et balise fermante : Ce texte est en gras → Ce texte est en gras une balise est unique : un retour a ` la ligne apr` es la balise → un retour à la ligne après la balise Attribut = 1 élément (cle="valeur") de la balise ouvrante qui définit une propriété supplémentaire : paragraphe centr´ e Les balises peuvent être imbriquées : Texte est en italique et en gras → Texte est en italique et en gras

Maxime Morge

L2 ECO - slide #8

Structure HTML

● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu

Une page HTML = un fichier texte commençant par et finissant par . Structure d’une page Web = en-tête (titre, . . . ) + corps (contenu). L’en-tête = entre et . Le corps = entre et .

Données hypertexte/multimédia



Mise en forme

Le titre Contenu de votre page

Maxime Morge

L2 ECO - slide #9

Caractères spéciaux

● Title ● Plan Introduction ● Internet ● Adresses ● Protocole HTTP ● La toile ● Principe du HTML ● Structure HTML ● Caractères spéciaux Structure du contenu Données hypertexte/multimédia Mise en forme

Maxime Morge

une page web = fichier texte écrit avec 128 caractères (A-Z|a-z|0-9. . . ) une page web = document numérique affiché avec 256 caractères (A-Z|a-z|0-9|é,à,. . . ) Code HTML

caractère

à ; é ; ô ; ù ; &oelig ; " ; & ;

à é ô ù œ " &

L2 ECO - slide #10

Structure du contenu

Maxime Morge

L2 ECO - slide #11

Structuration hiérarchique

Structuration hiérarchique des paragraphes = ● Title ● Plan Introduction Structure du contenu ● Structuration hiérarchique ● Conteneur ● Listes ● Tableaux ● Exemple de tableau Données hypertexte/multimédia Mise en forme

6 niveaux de titre (heading) : Titre de niveau 1 →

Titre de niveau 1 Titre de niveau 2 →

Titre de niveau 2 ...

Titre de niveau 6 →

Titre de niveau 6

paragraphe → paragraphe

Maxime Morge

L2 ECO - slide #12

Conteneur

Conteneur = balise qui identifie un contenu particulier ● Title ● Plan Introduction Structure du contenu ● Structuration hiérarchique ● Conteneur ● Listes ● Tableaux ● Exemple de tableau Données hypertexte/multimédia Mise en forme

Balise

Contenu une citation une instruction une emphase un exemple une accentuation une definition une note une adresse

Une emphase → Une emphase

Maxime Morge

L2 ECO - slide #13

Listes

Liste = texte structuré et divisé en 6= articles Liste ordonnée :

● Title ● Plan



Introduction

article 1

Structure du contenu ● Structuration hiérarchique ● Conteneur ● Listes ● Tableaux ● Exemple de tableau Données hypertexte/multimédia Mise en forme

Liste non-ordonnée : article 1 Liste de définition : Terme 1 D´ efinition 1 Terme 2 D´ efinition 2

Maxime Morge

L2 ECO - slide #14

Tableaux

● Title ● Plan

Tableau = texte structuré et divisé en lignes et en colonnes

Introduction Structure du contenu ● Structuration hiérarchique ● Conteneur ● Listes ● Tableaux ● Exemple de tableau Données hypertexte/multimédia Mise en forme

Maxime Morge

Balise

Contenu le tableau le titre une ligne (Table Row) cellules d’en-tête (Table Header ) cellules de valeur (Table Data)

L2 ECO - slide #15

Exemple de tableau

● Title ● Plan Introduction Structure du contenu ● Structuration hiérarchique ● Conteneur ● Listes ● Tableaux ● Exemple de tableau Données hypertexte/multimédia Mise en forme

Maxime Morge

Le titre du tableau Titre A1 Titre A2 Titre A3 Titre A4 Titre B1 Valeur B2 Valeur B3 Valeur B4 Titre A1 Titre A2 Titre A3 Titre A4 Titre B1 Valeur B2 Valeur B3 Valeur B4 Le titre du tableau L2 ECO - slide #16

Données hypertexte/multimédia

Maxime Morge

L2 ECO - slide #17

Lien hypertexte

Lien hypertexte = élément (par ex, texte bleu souligné) qui mène vers une autre URL. ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia ● Hyperlien ● Image Mise en forme

Ancrage (Cliquez ici) où URL= un page cible d’un autre site (par ex, Google) un page cible d’un même site avec : un chemin relatif (par ex, Pr´ esentation) un chemin absolu (par ex, Pr´ esentation) des éléments dans une même page : un ancrage (par ex, Article 1) ; un lien (par ex, Go to

Maxime Morge

L2 ECO - slide #18

Image

Les formats d’images acceptés = ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia ● Hyperlien ● Image Mise en forme

Maxime Morge

JPEG (.jpg, .jpeg) : un grand nombre de couleurs, images bien compressées ; PNG (.png) : taille faible, peu de couleurs, images entrelacées (affichage progressif) ; GIF (.gif) : idem que PNG en moins bien. Balise simple = . Par ex,

L2 ECO - slide #19

Mise en forme

Maxime Morge

L2 ECO - slide #20

Palette de ouleur

chiffre hexadécimal = 0, 1, . . . , 9, A, B, . . . , F ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

attribut="# RRVVBB" = 6 chiffres hexadécimaux représentant 2 à 2 les tons de rouge (R), de vert (V) et de bleu (B). couleur

codage

red green blue magenta orange # FFA500

# FF0000 # 00FF00 # 0000FF # FF00FF

L2 ECO - slide #21

Style du contenu

● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste

Attribut

Attributs de la balise Effet

BACKGROUND="url" BGCOLOR="couleur" LINK="couleur" ALINK="couleur" VLINK="couleur" TEXT="couleur"

l’image à l’url en arrière-plan couleur en arrière-plan couleur des liens hypertextes couleur des liens actifs couleur des liens déjà visités couleur du texte

● Style des tableaux ● Conclusion

Maxime Morge

L2 ECO - slide #22

Styles de texte

Balise de style = modifient l’apparence du texte. ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Ce texte est en gras → Ce texte est en gras Ce texte est en italique → Ce texte est en italique ´ Ecrit par une machine a ` e ´crire → ´ Ecrit par une machine a ` e ´crire Ce texte est en indice → Ce texte est en indice Ce texte est en exposant → Ce texte est en exposant

Maxime Morge

L2 ECO - slide #23

Styles des paragraphes et des titres

ALIGN = attribut pour la disposition du texte : ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

ALIGN=left : texte aligné à gauche ; ALIGN=right : texte aligné à droite ; ALIGN=center : texte centré ; ALIGN=justify : texte justifié ; Exemple : Titre centr´ e →

Titre centré

L2 ECO - slide #24

Style des listes

● Title ● Plan

Balise

Attribut

Valeur

Effet



TYPE



TYPE

1 A a I i circ square

chiffre capital minuscule chiffre romain capital chiffre romain minuscule puce circulaire puce carrée

Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

L2 ECO - slide #25

Exemple de liste

● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte

article 1 article 1.1 article 2

● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

1. article 1 (a) article 1.1 2. article 2

L2 ECO - slide #26

Style des tableaux

● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia

Cf tableau.html

Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

L2 ECO - slide #27

Attribut

Valeur

Effet

HEIGHT WIDTH ALIGN

nombre nombre bottom center left middle top right nombre

hauteur de l’image largeur de l’image

● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

BORDER

Maxime Morge

Alignement de l’image

largeur de la bordure.

L2 ECO - slide #28

Conclusion

Page web = document numérique écrit en HTML ● Title ● Plan Introduction Structure du contenu Données hypertexte/multimédia Mise en forme ● Palette de couleur ● Style du contenu ● Styles de texte ● Styles des paragraphes ● Style des listes ● Exemple de liste ● Style des tableaux ● Conclusion

Maxime Morge

Éditeurs WYSIWYG limités (lisibilité, fonctionnalité, . . . ) HTML = langage de formatage de données multimédia (texte, images, sons, vidéos) liées. Comment afficher des documents sons, vidéos, pdf, . . . ? ⇒ Plugin = acrobat reader, realplayer, . . .

Comment homgénéiser la mise en forme ? ⇒ Feuille de style (CSS).

Comment interagir avec l’internaute ? ⇒ Langage de programmation (Javascript, PHP, . . . ).

L2 ECO - slide #29

View more...

Comments

Copyright ©2017 KUPDF Inc.
SUPPORT KUPDF