Cours-IntProg

Cours-IntProg

-

Documents
5 pages
Lire
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

Description

L1 - STS - Mention Informatique - Internet et Programmation!Le Langage HTML! Le Langage HTML : finalité!Finalité:! Les références aux différentes pages se font à l’aide d’adresses appelées URL!Définir un langage permettant d’élaborer des sites Web, c’est à dire un ensemble de Uniform Ressource Locator!pages web (ou pages Html) organisées (de (Localisateur de Ressources Uniformes)!façon logique) sous forme de graphe.!= Identifiant de Ressources Html!La transition entre les pages (ou navigation) Exemple:!s’effectue grâce aux Liens HyperText http://www.u-picardie.fr/~philippe/---/---/ ---.html!(références à d’autres pages)!Ph Moreau! L1-STS-Internet et Programmation! 28! Ph Moreau! L1-STS-Internet et Programmation! 29!Le Langage HTML : finalité! Le Langage HTML : Exemple de «"source"» !Exemple de morceau de texte en HTML!http:// protocole utilisé (autre exemple ftp)!
Ainsi la couleur www.u-picardie.fr nom du serveur! rouge de ce texte a pour code: #C7050E.
Pour avoir une idée de quelques /~philippe/---/---/ cheminement dans possibilités, consultez le Tableau de l’arborescence des dossiers!couleurs .
 
!---.html nom du fichier (page Html)!Ph Moreau! L1-STS-Internet et Programmation! 30! Ph Moreau! L1-STS-Internet et ...

Sujets

Informations

Publié par
Nombre de visites sur la page 66
Langue Français
Signaler un problème

L1 - STS - Mention Informatique - Internet et Programmation!
Le Langage HTML! Le Langage HTML : finalité!
Finalité:! Les références aux différentes pages se font
à l’aide d’adresses appelées URL!Définir un langage permettant d’élaborer des
sites Web, c’est à dire un ensemble de Uniform Ressource Locator!
pages web (ou pages Html) organisées (de (Localisateur de Ressources Uniformes)!
façon logique) sous forme de graphe.!
= Identifiant de Ressources Html!
La transition entre les pages (ou navigation) Exemple:!
s’effectue grâce aux Liens HyperText http://www.u-picardie.fr/~philippe/---/---/ ---.html!
(références à d’autres pages)!
Ph Moreau! L1-STS-Internet et Programmation! 28! Ph Moreau! L1-STS-Internet et Programmation! 29!
Le Langage HTML : finalité! Le Langage HTML : Exemple de «"source"» !
Exemple de morceau de texte en HTML!
http:// protocole utilisé (autre exemple ftp)! <DL> <DT> <FONT SIZE=+1> Ainsi la couleur </
FONT> <B> <FONT COLOR=”#C7050E” SIZE=+1>
www.u-picardie.fr nom du serveur! rouge de ce texte</FONT> </B> <FONT SIZE=+1> a
pour code: #C7050E. </FONT> <DT> <FONT SIZE=
+1> Pour avoir une id&eacute;e de quelques /~philippe/---/---/ cheminement dans
possibilit&eacute;s, consultez le </FONT> <FONT
SIZE=+2> <A HREF=”TabCoul.html”> Tableau de l’arborescence des dossiers!
couleurs </A> </FONT> <FONT SIZE=+1>.</FONT>
<DT>&nbsp; </DL>!
---.html nom du fichier (page Html)!
Ph Moreau! L1-STS-Internet et Programmation! 30! Ph Moreau! L1-STS-Internet et Programmation! 31!
Ph Moreau! 1!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Objectif! Le langage Html : Généralités!
•! Pour réaliser la présentation d’un texte,
Langage !
le langage HTML utilise des TAGS (ou
délimiteurs ou balises). !
•! Pour apporter une modification à une Vocabulaire!
portion de texte, vous devez, dans le cas
général, encadrer (baliser) cette portion
de texte entre deux balises.!Règles de grammaire!
(règles d’écriture: très simple)!
Ph Moreau! L1-STS-Internet et Programmation! 32! Ph Moreau! L1-STS-Internet et Programmation! 33!
Le langage Html : Généralités! Le langage Html : Généralités!
•! Par exemple, pour souligner la portion de •! U est alors le nom de la balise et l’on
texte Il fait beau ce matin, et la faire s’aperçoit que ce nom est répété dans le
apparaître, sous la forme :Il fait beau ce délimiteur de fin précédé du signe /.!
matin, pour les lecteurs de votre page, il vous •! Ceci correspond à une sorte de parenthèsage,
suffira d’écrire: ! et le balisage avec deux délimiteurs se
présentera sous la forme: <nomBALISE> •! <U>Il fait beau ce matin</U>!
portion de texte </nomBALISE>!
Ph Moreau! L1-STS-Internet et Programmation! 34! Ph Moreau! L1-STS-Internet et Programmation! 35!
Ph Moreau! 2!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Généralités : Remarques! Le langage Html : Généralités : Remarques!
•! Dans certaines balises on peut adjoindre un (ou
•! si TOTO et TITI sont deux noms de balises on plusieurs) attribut. Celui-ci permet de préciser une
ne pourra jamais écrire: <TOTO> texte1 autre action à exécuter sur la portion de texte. Dans
<TITI> texte2 </TOTO> texte3 </TITI> ! ce cas le balisage se présentera sous la forme:
<nomBALISE Attribut=valeur> portion de texte </•! Il faudra écrire: <TOTO> texte1 <TITI>
nomBALISE> !
texte2 </TITI> texte3 </TOTO> !
•! Dans certains cas, nous verrons également qu’il
•! Exemple: <U>Il fait <B> beau </B> ce suffit d’une seule balise pour agir sur le texte à un
moment précis (on trouvera alors dans le texte matin</U>!
<nomBALISE> ou <nomBALISE/>). !
•! Qui donnera à l’affichage: Il fait beau ce •! Le nom des balises peut être écrit, indifféremment,
matin ! en majuscules ou minuscules : <u> équivaut à <U>." !
Ph Moreau! L1-STS-Internet et Programmation! 36! Ph Moreau! L1-STS-Internet et Programmation! 37!
Le langage Html : Généralités : caractères spéciaux!Le langage Html : Généralités : Remarques!
•! Les normes HTML utilisent le code ASCII •! «"décodage"» des caractères spéciaux!
standard pour l’interprétation des caractères •! Les caractères spéciaux sont repérés (par les
(Rmq: on peut spécifier l’utilisation d’autres codes).! navigateurs) avec l’apparition de & (et
commercial) et terminé par ; (point virgule)!•! ASCII standard (Code sur 7 bits)!
•! ===> pas de caractère accentué. ! Format des lettres accentuées!
•! Ainsi pour coder un caractère accentué, il faut
&xaccent;!taper une combinaison de caractères
spécifique. !
•! Exemple: Le é se code &eacute;! Lettre à accentuer! Mention de l’accent!
Ph Moreau! L1-STS-Internet et Programmation! 38! Ph Moreau! L1-STS-Internet et Programmation! 39!
Ph Moreau! 3!#
#
L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Généralités : Le langage Html : Généralités : caractères spéciaux!
autres codes spécifiques!
•! Les accents usuels!
•! Les couleurs!Aigu : ’ : acute!
•! Pour coder les couleurs (texte, cellule de tableau, Grave : ‘ : grave!
fond de page, etc…) on utilise le principe de Circonflexe : ^ : circ!
description de la couleur dit codage RVB.!
Tréma : ¨ : uml!
•! Autres caractères! Le codage se fait sur 3 Octets:!
Le premier donne l’intensité de Rouge!& : &amp;! < : &lt; ! > : &gt;! Etc…!
Le deuxième l’intensité de Vert!Important : Un ensemble de plusieurs caractères
Et le troisième l’intensité de Bleu!«"espace"» sera remplacé par un seul espace dans un
navigateur. Pour «"forcé"» l’espace on insère: &nbsp;!
Ph Moreau! L1-STS-Internet et Programmation! 40! Ph Moreau! L1-STS-Internet et Programmation! 41!
Le langage Html : Généralités : Le langage Html : Première Page!
autres codes spécifiques!
Un jeu de 4 couples de balises !•! Chaque intensité de couleurs est indiquée en
hexadécimale (pour chaque octet ---> deux chiffres
en hexadécimal)! <HTML>...</HTML> !
•! La couleur est précédée de #! marquent le début et la fin du document !
<HEAD>...</HEAD> !#octetoctetoctet!
marquent l’entête de la page. !
Exemples!
<TITLE>...</TITLE> (dans Head) !
#FFFFFF! #FF0000! #00FF00! #0000FF! #000000! permettent de donner un titre à la page!
blanc! Rouge! vert! bleu! noir! <BODY>...</BODY> !
balisent le corps du document!
Ph Moreau! L1-STS-Internet et Programmation! 42! Ph Moreau! L1-STS-Internet et Programmation! 43!
Ph Moreau! 4!L1 - STS - Mention Informatique - Internet et Programmation!
Le langage Html : Première Page! Le langage Html : Première Page!
Remarques!
<HTML> !
Dans la balise <HEAD>. On pourra trouver, une autre
<HEAD> !
balise (ou directive) <META> qui permet de mettre <META NAME=”AUTHOR” CONTENT=”MOI”> !
dans le document des informations qui seront lues par <TITLE>!
le serveur, le navigateur mais pas visualisées. Ces premier titre!
informations sont généralement le nom(NAME) de </TITLE> !
l’auteur (AUTHOR), le contenu (CONTENT), ou </HEAD> " !
encore un ensemble de mots clés (KEYWORDS) qui <BODY> !
pourra être examiné par les moteurs de recherche. ! Ma premi&egrave;re page en HTML !
</BODY> !Autre couple de balises «"non interprétées"»!
</HTML> !
<!-- Et --> permet d’insérer des commentaires dans
vos pages HTML (syntaxe <!-- commentaires -->)!
Ph Moreau! L1-STS-Internet et Programmation! 44! Ph Moreau! L1-STS-Internet et Programmation! 45!
Le langage Html : Première Page!
Ce qui donne!
Ph Moreau! L1-STS-Internet et Programmation! 46!
Ph Moreau! 5!