D é veloppement de sites web statiques Par DRISS AIT EL HADJ Par DRISS AIT EL HADJ Avril 2012
DRISS AIT EL HADJ2 I. Généralités I. Généralités II. Etapes de développement II. Etapes de développement III. HTML III. HTML IV. Dreamwaver IV. Dreamwaver V. Hébergement et administration V. Hébergement et administration PLAN
Avril 2012DRISS AIT EL HADJ3 HTML 1.Introduction 2.Structure de document HTML 3.Formatage 4.Listes 5.Hyperliens 6.Images 7.Tableaux 8.Cadres 9.Formulaires
Avril 2012DRISS AIT EL HADJ4 Introduction 1.HTML: 2.HyperText Markup Language 3.Langage de balisage: 1. 2.texte balisée 3.
Avril 2012DRISS AIT EL HADJ5 Structure de document HTML <html> Balises d ’en-tête Balises d ’en-tête Corps du document Corps du document </html>
Avril 2012DRISS AIT EL HADJ6 Balises d ’ en-tête <base>: Définit les valeurs de référence globales pour les attributs Href et Target Ex:
Avril 2012DRISS AIT EL HADJ7 Balises d ’ en-tête <Meta>: Définit des infos spécifiques au document. Ex: <Head> </Head>
Avril 2012DRISS AIT EL HADJ8 Balises d ’ en-tête <meta>: Ex: <head> </head>
Avril 2012DRISS AIT EL HADJ9 Balises d ’ en-tête <script>: Ex: Ex: //code du script </script><noscript> votre navigateur ne supporte pas les scripts </noscript></head>
Avril 2012DRISS AIT EL HADJ10 Balises d ’ en-tête <title>: Ex: Ex: <title> Site officiel de l ’ISGI </title></head>
Avril 2012DRISS AIT EL HADJ11 STRUCTURE <body>Attributs:alinkvlinklinktextbackgroundbgcolor
Avril 2012DRISS AIT EL HADJ12 Formatage Balises de niveau texte: ,, ,, , ,
Avril 2012DRISS AIT EL HADJ13 Formatage Balises de niveau paragraphe: - -
Avril 2012DRISS AIT EL HADJ14 LISTES Liste de définition <DL> Navigateur: Navigateur: Logiciel de consultation de doc.. Serveur: Machine qui sert des fichiers et… </DL>
Avril 2012DRISS AIT EL HADJ15 LISTES Liste numérotée HTML HTML JAVASCRIPT VBSCRIPT ASP JAVA </OL>
Avril 2012DRISS AIT EL HADJ16 LISTES Liste non ordonnée HTML HTML JAVASCRIPT VBSCRIPT ASP JAVA </UL>
Avril 2012DRISS AIT EL HADJ17 HYPERLIENS 1.Liens internes au site 2.Liens internes à la page 3.Liens vers 4.Liens externes
Avril 2012DRISS AIT EL HADJ18 HYPERLIENS texte</a>
Avril 2012DRISS AIT EL HADJ19 HYPERLIENS Liens internes à la page: Définition de l’ancre: paragraphe paragraphe Définition du lien: texte texte
Avril 2012DRISS AIT EL HADJ20 IMAGES <img src=« logo.gif » width=largeur en pixel height=hauteur en pixel alt=« texte de remplacement » border= épaisseur du cadre align=top/middle/bottom/left/right hspace=espace horizontal autour de l ’image vspace=espace vertical autour de l ’image >
Avril 2012DRISS AIT EL HADJ21 ATELIER
Avril 2012DRISS AIT EL HADJ22 TABLEAUX <table><tr> En-tête1 En-tête1 En-tête2 En-tête2 </tr> Donnée 1.1 Donnée 1.1 Donnée 1.2 Donnée 1.2 </tr></table>
Avril 2012DRISS AIT EL HADJ23 TABLEAUX Alignement : Alignement horizontal: align=left/right/center application: table, ligne, cellule Alignement vertical: valign=top/middle/bottom application: ligne, cellule Alignement par défaut: align. Vert. Middle sur toutes les cellules d align. Horiz.: center pour l ’en-tête et left pour les cellules de données
Avril 2012DRISS AIT EL HADJ24 TABLEAUX Alignement : Alignement horizontal: align=left/right/center application: table, ligne, cellule Alignement vertical: valign=top/middle/bottom application: ligne, cellule Alignement par défaut: align. Vert. Middle sur toutes les cellules d align. Horiz.: center pour l ’en-tête et left pour les cellules de données
Avril 2012DRISS AIT EL HADJ25 TABLEAUX Couleur d ’arriére-plan : bgcolor application: table, ligne, cellule Légende:<table> Quelques statistiques Quelques statistiques ……</table>
Avril 2012DRISS AIT EL HADJ26 TABLEAUX Largeur du tableau : <table width=100%> ….. </table > Bordure: <table width=100% border=4> ….. </table >
Avril 2012DRISS AIT EL HADJ27 TABLEAUX Marge intérieure des cellules : ….. Espacement de cellules: …..
Avril 2012DRISS AIT EL HADJ28 TABLEAUX Extension d ’une cellule : colspan: étendre une cellule sur + col. Rowspan: étendre une cellule sur + lig. Exemple: …. ….
Avril 2012DRISS AIT EL HADJ29 ATELIER
Avril 2012DRISS AIT EL HADJ30 CADRES </frameset></frameset>
Avril 2012DRISS AIT EL HADJ31 CADRES Attributs de la baslie Frame: frameborder=1/0 name=« nom » scrolling=yes/no/auto src=« URL du doc. à charger »
Avril 2012DRISS AIT EL HADJ32 ATELIER
Avril 2012DRISS AIT EL HADJ33 FORMULAIRES 1. Déclaration <formname=« formulaire1 »method=get/postaction=« ajout.asp »> Eléments du formulaire </form>
Avril 2012DRISS AIT EL HADJ34 FORMULAIRES 2. Insertion d ’éléments: Champ de saisie: Champ de mot de passe:
Avril 2012DRISS AIT EL HADJ35 FORMULAIRES 2. Insertion d ’éléments: Zones de texte multiligne; Cases à cocher; Boutons radio; Liste de sélection; Bouton;….
Avril 2012DRISS AIT EL HADJ36 ATELIER