Embed Size (px)
Citation preview
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 1/33
Plan Logiciels de création site-web
Langage HTML Historique de l·HTML
Structure d·une page HTML
Créer sa première page site-web L·hébergement
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 2/33
Logiciels HTMLLogiciels HTML
LES EDITEURS
Dreamweaver (éditeur : Macromedia)
GoLive (éditeur : Adobe)
FrontPage (éditeur : Microsoft)
LES NAVIGATEURS Internet Explorer
Mozilla
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 3/33
Langage HTML
Résultat visiblesur l·écran
Traduction par l·ordinateur
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 4/33
et
Deux langages pour créer un site web
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 5/33
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 6/33
HyperText Markup Langage est la langue vivante du web, avec sagrammaire, sa syntaxe et son vocabulaire , il permet de structurer une page web à
l¶aide de plusieurs BALISES.
Les balises traduisent:
Textesdes liens
hypertextesImages/son/
vidéos
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 7/33
HISTORIQUE
Fin 1999
XHTML Draft Des améliorations ajoutées à HTML
17/12/1996CSS 1 Première tentative de séparation du fond et de la forme
août 1994
HTML 1.0 Version définitive
juin 1993
HTML 1.0 draft Le premier brouillon
mars 1989
The WWW Project Proposal L'idée de base
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 8/33
Structure d'une page HTML
<HTML>
<HEAD>
<TITLE> Titre de la page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Les fichiers HTML doivent être enregistrés avec
l'extension .html ou .htm.
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 9/33
Les balises
HTML
De structure
De formatageet mise en page
De listes
D¶images
Hyperliens
Tableaux
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 10/33
Balises de StructureBalises de Structure
<HTML>«
</HTML>
<HTML>«
</HTML>
<HEAD>«
</HEAD>
<HEAD>«
</HEAD>
<TITLE>«
</TITLE>
<TITLE>«
</TITLE>
<BODY>«
</BODY>
<BODY>«
</BODY>
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 11/33
Balisesformatage etmise en page
Forme
Police
<B>«</B>:.
<I>«</I>
mise en forme
<DIV ALIGN ="RIGHT">«</div
>
<CENTER> «.</center>
Couleur
texte
<FONT color=¶·red··>«
</FONT >
Arrirée plan<body
bgcolor="red"«.</body>
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 12/33
Balises de listes
Listesnumérotées
Listes àpuces
Listes dedéfinitions
Listesrépertoires
Listesmenus
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 13/33
SRC
WIDTH
HEIGHT
BORDER
ALIGN
VSPACE
Spécifie l'URL (chemin) du fichier qui contient l'image.
Spécifie la largeur de l'image en pixels.
Spécifie la hauteur de l'image en pixels.
Définit l'épaisseur du cadre de l'image
Gère l'alignement du texte adjacent à l'image
Définit l'espace qui sera réservé en haut et en bas del'image
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 14/33
Balises Hyperliens
Grâce au langage HTML on peut créer
un hyperlien vers :
- un autre site web situé sur le Web
² un autre endroit du document.
² un autre fichier Html situé sur votreordinateur.
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 15/33
La syntaxe simplifiée est :
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 16/33
Un lien vers un site-web:
Un lien vers une page HTML
Un lien vers un document
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 17/33
Balises TableauxPremière balise à connaître : <table> </table>. C'est cettebalise qui permet d'indiquer le début et la fin d'un tableau.Cette balise est de type block, donc il faut la mettre endehors d'un paragraphe.
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 18/33
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 19/33
Résultat sur la page-web
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 20/33
Créer un formulaire
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 21/33
Resultat
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 22/33
Créer sa première pageCréer sa première pagesitesite--web !!web !!
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 23/33
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 24/33
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 25/33
un hyperlien vers une pageHTML
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 26/33
Hyperlien vers un document
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 27/33
Résultat
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 28/33
Hyperlien vers une image
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 29/33
Résultat
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 30/33
N.B N.B
Il faut toujours gardé au mémoireque l·html surtout (une Balise)
marque une action pour lenavigateur en lui montrant ce qu·ildoit faire.
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 31/33
L·hébergement d·un site-
web Une fois votre site « terminé », il
vous faut trouver un hébergeur afin
de rendre votre site visible sur leweb.
L·hébergeur stocke votre site sur
internet et vous attribue une adresseinternet (ou URL).
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 32/33
Meilleurs sites
d·hébergementhttp://www.hostpapa.eu
http://www.1and1.fr/
http://www.mavenhosting.com/
http://www.mavenhosting.com/
http://hosting-review.com/
http://www.strato-hosting.fr/
5/12/2018 exposé html - slidepdf.com
http://slidepdf.com/reader/full/expose-html 33/33
