Fichier PDF

Partage, hébergement, conversion et archivage facile de documents au format PDF

Partager un fichier Mes fichiers Boite à outils PDF Recherche Aide Contact



html partie 1 .pdf



Nom original: html-partie 1.pdf
Auteur: imad

Ce document au format PDF 1.5 a été généré par Microsoft® PowerPoint® 2013, et a été envoyé sur fichier-pdf.fr le 03/10/2015 à 20:51, depuis l'adresse IP 160.177.x.x. La présente page de téléchargement du fichier a été vue 336 fois.
Taille du document: 949 Ko (45 pages).
Confidentialité: fichier public




Télécharger le fichier (PDF)









Aperçu du document


Le langage HTML

Mr BADI Imad

2015/2016

FST Béni Mellal

HTML, Historique
• 1962 : US Air Force commande la création d’un réseau
de communication militaire pouvant résister à une
attaque nucléaire.
• 1964 : Paul Baran créé un réseau en forme de toile,
évitant ainsi un système central vulnérable .
• 1969 : ARPANET est créé pour relier 4 universités,
indépendamment d’un objectif militaire. (Présentation
public en 1972)
• 1971 : 1er Mail électronique. Le caractère @ est déjà
présent. (Amélioration en 1972 avec boite mail
possédant un système d’archivage, de tri et « faire
suivre »)

• 1976 : Déploiement du protocole TCP (débuté
en 1972) permettant la transmission de paquet et
la gestion des erreurs. Il sera scindé en 2
protocoles en 1978 : TCP/IP.

HTML, Historique
• 1980 : Tim Berners-lee et Robert Caillau mettent au point un
système de navigation Hypertext. (ancêtre des navigateurs)
• 1984 : Mise en place du système de nommage DNS. (Domain
Name System-système de noms de domaine) C’est un service
permettant de traduire un nom de domaine en informations de
plusieurs types qui y sont associées, notamment en adresses IP de
la machine portant ce nom.
• 1986 : Création du langage SGML (Standard General Markup
Language) pour structurer des contenus divers, considéré comme
le 1er langage à balise.
• 1991 : Tim Berners-lee met au point le protocole HTTP (Hyper
Text Transfer Protocol), ainsi que le langage HTML (Hyper Text
Markup Language). Naissance du World Wide Web (WWW).
• 1996 : 1ère spécification HTML 2.0 par le W3C (World Wide Web
Concortium). le HTML 1.0 n’a jamais vraiment existé.et apparition
du CSS (Cascade Style Sheet – feuille de style) créé par Hâkon Wium
Lie.

HTML, Historique
• De 1997 à 1999 :

 Spécification HTML 3.2, 4.0 et 4.01
Spécification CSS 2.0
Création du XML (eXtensible Markup Language)
• 2000 : Le W3C lance le XHTML 1.0, celui-ci possède
exactement le même contenu que le html 4.01 la différence
tient sur la syntaxe, le xhtml suivait les règles du xml. Exemple
tous les attributs d’une balise ne s’exprime plus qu’en
minuscule. (cette sortie coïncida avec l’essor des navigateurs
compatible avec CSS).
• 2001 : Le W3C recommande le XHTML 1.1, celui-ci est
entièrement en XML, cependant gros problème le
navigateur le plus populaire du moment ne peut pas
l’interpréter (ie explorer). Le W3C perd pied avec la réalité
des publications web. Ceci ne l’empêche pas de se lancer
dans le XHTML2.0 cependant celui-ci possède plusieurs
problèmes techniques et ne répond toujours pas aux
besoins des développeurs du moment.

HTML, Historique
• 2004 : Scission au sein duW3C. Les représentants d’Opéra,
Apple et Mozilla ne sont pas en accord avec les priorités du
W3C. Proposition de reprise du développement HTML
pour création d’application web mais celle-ci est rejetée. Les
représentants d’Opéra (dont Ian Hickson) et autres forment
leur propre groupe WHATWG (Web Hypertext
Application Technilogy Working Group)
• 2006 : Tim Berners-Lee admet que la migration du HTML
vers XML était une erreur. Quelques mois plus tard le W3C
planche sur la version HTML 5 (avec espace) et continue
cependant sur le XHTML 2.0. De son côté WHATWG
travaille sur le HTML5 (sans espace).
• 2007 : Le W3C accepte les propositions de recommandations
du WHATWG sur le HTML5 (sans espace).
• 2009 : Le format XHTML 2.0 est définitivement mort
• 2012 : La spécification HTML5 doit devenir «
recommandation candidate », c’est-à-dire fin prête dans le
discours

HTML, les principes
Il contient des commandes, implémentées par des balises pour
marquer les différents types de texte (titres, paragraphe, listes …) , pour
inclure des images, des formulaires, des liens …
C'est un langage à balisage qui décrit la structure logique d'un
document hypertexte. Il a volontairement été conçu pour être simple.

L'hypertexte
Le langage HTML permet de créer des documents interactifs grâce à
des liens hypertextes, qui relient votre document à d'autres documents.
En cliquant sur une zone de texte (ou une image, un logo) mise en
évidence, on peut accéder a un nouveau document situé sur un autre
ordinateur en n'importe quel point du globe.

Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte
Simple Text, Bbedit,Emacs ,WordPad, NotePad++…

Avec un logiciel « assistant » au code HTML
PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC …
A l'aide d'un programme dit "WYSIWYG"
Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...

A l'aide d'un filtre
Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques, dans certains logiciels de P.A.O.
Conversion HTML vers XHTML avec HTML Tidy
Disponible dans de nombreuses versions sur le site du W3C

Que choisir pour lire HTML?
Le client doit pouvoir interpréter HTML et
afficher le résultat. Ils sont divers, tournant sur
des systèmes différents:
• Netscape Navigator, Mozilla, Google Chrome,
Internet explorer, Safari, Opéra, iCab, Emacs mode
www, Amaya, Lynx, links, w3m …

Introduction au marquage - 1
• Pour décrire un fichier hypertexte, le langage
HTML insère des balises dans le texte du
document :
<marqueur> ici votre texte </marqueur>

Début de mise en forme

Fin de mise en forme

Synonymes: marqueur, élément, tag.

Introduction au marquage - 2
Ces balises peuvent être insérées n'importe où dans le
texte, entre 2 phrases, mots, lettres …
<gras>Le <italique> cours </italique> HTML</gras>

Introduction au marquage - 3
• Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>

Mauvais:
<gras><italique> Le cours HTML</gras></italique>

Les attributs
• Les balises peuvent posséder un ou plusieurs attributs
qui permettent de spécifier l'action de la balise.
Toujours mettre la valeur de l'attribut entre
guillemets.

<marqueur attribut="argument">texte</marqueur>
<marqueur attr1="argument"

attr2="argument">texte</marqueur>

Les commentaires
<!–- Voici un commentaire HTML -->

<!–Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->

Note sur les caractères accentués
Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme pour
afficher les caractères accentués ou spéciaux. Ceux ci devront faire l'objet d'un codage
spécial au sein du fichier HTML.
s'écrit

é
être

é

s'écrit

&eacirc;tre

Les serveurs Web accepte les caractères accentués de la norme iso-8859-1. On
spécifie l'encodage dans le fichier HTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Note sur les caractères accentués et caractères
spéciaux
 

Espace insécable

¦

|

±

±

Ø

£

£

¥

¥

Ø

©

©

®

Ò

°

°

²

2

³

3

&

&

¼

¼

½

½

¾

¾

à

à

&Agrave

À

œ

œ

é

é

É

É

ë

ë

î

î

Î

Î

ç

ç

"

"

ß

ß

ñ

ñ

& lt;

<

>

>

µ

µ

Structure d’un fichier HTML
<HTML>
<HEAD>
<TITLE> le titre de la page Web
</HEAD>
<BODY>
Le contenu de la page Web
</BODY>
</HTML>

</TITLE>

Exercice 1
1. Ouvrez bloc-notes
2. Tapez le fichier HTML suivant :


<HTML>



<HEAD>



<TITLE> Ma première page Web </TITLE>



</HEAD>



<BODY>



C’est ma première page Web, c’est très facile le langage HTML



</BODY>



</HTML>

3. Enregistrez le code HTML dans le bureau sous le nom EXRECICE1.html
4. Ouvrez le fichier EXERCICE 1.HTML

Un peu plus loin dans HTML
<html>
<head>
<title>Mon deuxieme fichier</title>
</head>
<body>
<h2>Hello World</h2>
<p>
L'emplacement de votre nouveau matériel est-il à proximité (moins de 5m) d'une prise réseau libre ? Si oui, relevez
le numéro de la prise (il est écrit sur une plaque de céramique bleue, il faut respecter la distinction entre lettres majuscules et
minuscules). Sinon, il faut faire installer une nouvelle prise par le Service Travaux, auquel vous devrez adresser un bon de cession interne. La suite
des opérations aura lieu quand vous aurez une prise disponible. Dans le doute, interrogez par courrier électronique
netadm@pasteur.fr. </p>
<p>Votre demande doit nous parvenir par l'intermédiaire du correspondant informatique de votre Unité. Elle se composera de
deux parties : un bon de cession interne envoyé au Service Informatique Scientifique et un courrier électronique adressé
à netadm@pasteur.fr qui contiendra toutes les informations utiles (dont le numéro du bon de cession). </p>
<ol>
<li> le premier élément</li>
<li> le deuxième élément</li>
<li> le troisième élément</li>
</ol>
<p><a href="http://www.pasteur.fr/infosci/utilinfo/FAQ.html#Q1">Vous trouverez ici la suite du texte !! </a></p>
</body>
</html>

Les balises de mise en forme
Opération

Comment ?

Centrage d’un texte

Pour centrer un texte on le place entre les balises <CENTER>
et </CENTER>

Soulignement d’un texte

Pour souligner un texte on le place entre les balises <U> et
</U>

Texte en gras

Pour mettre un texte en gras on le place entre les balises <B> et
</B>

Texte en italique

Pour mettre un texte en italique on le place en les balises <I> et
</I>

Modifier la taille

Pour modifier la taille d’un texte on le place entre les balise
<FONT SIZE=Taille> et </FONT>. Avec Taille : 1...7

Modifier la police

Pour modifier la police d’un texte on le place entre les balise
<FONT FACE= "Police"> et </FONT>

Modifier la couleur

Retour à ligne

Pour modifier la couleur d’un texte on le place entre les balise
<FONT COLOR="Nom du couleur" ou bien "Code"> et
</FONT>
Pour revenir à la ligne on insère la balise <BR>

• <p> retour à la ligne avec saut d’une ligne
• <div align="center"></div> centre le texte
• <div align="right"></ div > positionne le texte à
droite dans la page
• <div align="left"></div> positionne le texte à
gauche dans la page

Exercice 2

Ecrire le code html qui permet de générer la page suivante:

Liste des noms des couleurs
Nom

Couleur

Nom

Couleur

AQUA

Bleu clair

NAVY

Bleu foncé

BLACK

Noir

OLIVE

Vert olive

BLUE

Bleu ciel

PURPLE

Violet

FUCHSY

Brun clair

RED

Rouge

GRAY

Gris

SILVER

Gris argent

GREEN

Vert

TEAL

Gris acier

LIME

Ocre

WHITE

Blanc

MAROON

Brun foncé

YELLOW

Jaune

Exercice 3
Donnez le code HTML source de la page Web suivante :

Correction Ex3











<HTML>
<HEAD>
<TITLE> Première Page Web -Beni Mellal </TITLE>
</HEAD>
<BOBY>
<CENTER> <FONT SIZE =7 FACE ="Monotype Corsiva"
COLOR="blue"> Nous sommes un groupe </FONT></CENTER>
<B><U>Qui maîtrise la création des pages Web</U></B><BR>
<I> avec le langage html</I>
</BODY>
</HTML>

Les titres <Hn°>
• Les titres permettent de mettre en valeur une portion de texte. Le texte "Titre"
doit être encadré par les balises d'ouverture et de fermeture choisies. Un retour
à la ligne se fera automatiquement. Il y a six niveaux de titre de <H1> (le plus
important) à <H6> (le plus petit)
• Exemple
<H1> c'est un titre de niveau 1 </H1>
<H3> c'est un titre de niveau 3 <H3>
• Résultat:

L'élément titre possède l'attribut ALIGN (alignement) qui peut prendre les valeurs
RIGHT, CENTER, LEFT
<H1 ALIGN = CENTER> c'est un titre de niveau 1 </H1>

Les lignes horizontales <HR>
• Dans une page Web les lignes sont très pratiques pour séparer les
différentes parties de la page.

Une ligne horizontale s'obtient avec la balise <HR>. Cette
balise ne nécessite pas une balise de fermeture.
• La balise <HR> possède plusieurs attributs :
• ALIGN : permet d'aligner la ligne horizontale. Valeur : CENTER,
RIGHT, LEFT
• WIDTH : Spécifie la largeur de la ligne (en pixels ou en % de la
fenêtre)
• SIZE : Epaisseur de la ligne. Valeur (de 1 à 10)
• COLOR : spécifie la couleur de la ligne.
• Exemple
<HR WIDTH =50% ALIGN = CENTER SIZE =5 COLOR = "RED">

L'arrière plan
• On peut placer comme arrière plan d'une page Web une
couleur simple ou une image. Pour cela il faut ajouter les
attributs BGCOLOR ="Couleur" ou bien
BACKGROUND ="le nom de l'image" à la balise
<BODY>
• Exemple

<BODY BGCOLOR = "RED " >

Exercice3
• Réaliser un CV sous format de page Web
• Indication
• Arrière plan Image ou couleur
• Séparez les différentes rubriques par des lignes horizontales
• Utilisez les titres pour mentionner les noms des rubriques

Les listes : Les listes ordonnées
• Une liste ordonnée s’obtient avec la commande <OL> qui
permet d’avoir une liste numérotée qui s’incrémente
automatiquement. La balise <OL> est définie avec <LI>
qui représente un item (élément de la liste).
• Exemple d’une liste ordonnée avec 3 items
<OL>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</OL>
Résultat
1. Item 1
2. Item 2
3. Item 3

Les listes : Les listes ordonnées(suite)





La balise <OL> possède les attributs
TYPE : marqueur de numérotation. Valeur A, a, I, i, 1
START : Valeur de début de la numérotation (1, 2,….)
Exemple

<OL TYPE= I START = 2>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</OL>

Résultat

II. Item 1
III. Item 2
IV. Item 3

Les listes : Les listes non ordonnées
• Une liste non ordonnées (puces) s’obtient avec la commande
<UL> qui permet d’avoir une liste précédée d’une puce. La
balise <UL> est définie avec <LI> qui représente un Item
• Exemple d’une liste non ordonnée avec 3 Items
<UL>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</UL>
Résultat
•Item 1
•Item 2
•Item 3

• Exemple
<dl>
<dt>niv1
<dd>niv2 </dd>
<dd>niv2 </dd>
<dd>niv2 </dd>
</dt>
<dt>niv1
<dd>niv2 </dd>
</dt>

<dt>niv1</dt>
<dt>niv1</dt>
</dl>

34

Écrivez le code HTML engendrant la page ci-dessous

Les images :
Insertion d'une image: Pour insérer une image dans un fichier
HTML on utilise la commande <IMG SRC = "chemin et nom de
l'image">
• Exemple
<IMG SRC ="C:\MAGES\PHOTO1.JPG">

Alignement de texte: Pour aligner un texte par rapport à une image on doit ajouter

l'attribut ALIGN qui prend les valeurs suivantes :
TOP : en haut à gauche
MIDDLE : au milieu à gauche
BOTTOM : en bas à gauche
RIGHT : en haut à droite
Exemple

<IMG SRC ="Image1.gif" ALIGN =MIDDLE> c'est une image animée
Résultat :
C'est une image animée

Les images (suite)
• Redimensionnement d’une image:

On peut modifier la largeur et la hauteur d'une image en utilisant les
attributs WIDTH (largeur) et HEIGHT (hauteur)
Exemple
<IMG SRC ="Image1.gif" WIDTH =50 HEIGHT = 100>


Création d’un texte info-bulle:

Il est possible de créer un texte d'info-bulle qui apparaîtra lorsque
l'utilisateur pointera avec la souris sur l'image. Ceci est réalisable avec
l'attribut ALT ="Le texte d'info-bulle"
Exemple
<IMG SRC ="PHOTO1.BMP" ALT ="c'est l'une de mes photo">

Les images (suite)
• L'option border : taille en pixel de la bordure autour de l'image. Si
l'image est en lien et qu'on ne veut pas voir de bordure de la couleur
spécifiée dans l'option LINK du BODY, mettre 0
• L'option usemap : utilisée pour associer à une image une carte de
zones réactives (par défaut aucune).

Les images (suite)
Attention au poids des images, il est important
d'optimiser son fichier image.
Deux formats sont lus par les navigateurs, GIF (
Graphics Interchange Format ) et JFIF ( JPEG File
Interchange Format).On utilise le GIF pour les
illustrations, le JPEG pour les photos.

Les cartes <map></map>
• Ce couple de balises est utilisé pour ajouter une carte à une image.
• L'option name donne un nom à la carte. Ce nom sera utilisé pour réaliser l'association
entre la carte et l'image.

• Une carte est composée de zone (area). À chaque zone est associée une action déclenché
quand l'utilisateur la désigne.

Les cartes <area>
• L'option shape sert à spécifier la forme de la zone. rect (pour un
rectangle), circle (pour un cercle) et poly (pour un polygone).
• L'option href détermine l'URL appelée lorsque l'utilisateur clique sur la
zone que vous êtes en train de décrite.
• L'option coords fixe les coordonnées de la zone décrite. Ces coordonnées doivent être données sous la forme d'une liste d'entiers séparés
par des virgules. Dans le cas d'une zone rectangulaire, on spécifie les
coordonnées de deux points diamétralement opposés
• Dans le cas d'une sphère, on donne son centre et un point de la circonférence.
Enfin, pour un polygone, on énumère les coordonnées de tous les sommets,
deux à deux consécutifs

Les liens hypertextes
• Un lien est le plus souvent un texte assez spécial.
Lorsque l'on pointe dessus, la souris devient une main.
C'est un des moyens de le connaître.
• Un texte qui fait un lien est en général bleu et
souligné.
• Lorsque on clique sur un lien, il nous amène :
• A une autre page Web dans le même site.
• A un autre site Web.
• A un endroit bien précis dans la page Web courante.
• A un logiciel de la messagerie pour envoyer un message.

Les liens hypertextes (suite)
Lien vers une page Web locale
Commande:
<A HREF ="chemin et nom de la page"> un texte </A>

Exemple
<A HREF ="sommaire.html">Cliquez ici pour le sommaire </A>

Liens vers un autre site
Commande:
<A HREF ="adresse du site Web"> un texte </A>

Exemple
<A HREF ="http://www.google.com">Cliquez ici pour le site google </A>
<A HREF ="http://www.allhtml.com>Apprendre le HTML </A>

Les liens hypertextes (suite)

Liens vers un endroit précis sur la même page
• Il est souvent utile de créer des liens vers des endroits précis dans la
même page web.
• Mais il faut donner un nom à cet endroit à l’aide de la commande

<A NAME ="nom d l'endroit"> un texte </A>
Puis utiliser la commande :
<A HREF ="#nom de l'endroit"> un texte </A>
Exemple:
<HTML>
<HEAD>….
…..
<BODY>
<A NAME ="début">Début</A>
….
….

<A HREF ="#début>début de la page </A>


Exercice 4

CV
Etat

• Modifiez la source de
la page web de
l'exercice 3 (CV)
en :
• Plaçant des liens au
début du CV qui
mène directement à la
rubrique désirée.
• Ajoutant votre photo
(voir le schéma)

Coordonnées
Formation
Etat
….
….
….
Début
Coordonnées
….
….
…..
Début
Formations
….
…..
….
Début


Documents similaires


Fichier PDF travail a faire
Fichier PDF techno web seance 4 h t m l
Fichier PDF html guide mode de compatibilite
Fichier PDF html guide
Fichier PDF contenu de formation html et php sarex conseils
Fichier PDF 6rn4nje


Sur le même sujet..