Chap 0 : Introduction HTML et CSS

Chap 0 : Introduction HTML et CSS
Cours PHP Chap 0 : Introduction HTML et CSS Ahmed Jebali INSTA mai 2007 Ahmed Jebali – INSTA 2007

Hypertext Markup Language
Introduction Hypertext Markup Language Navigateurs Web établissent une correspondance entre les balises HTML et des caractéristiques de formatage Extrêmement simple et facile d’approche Ahmed Jebali – INSTA 2007

Modèle requête Serveur Client Web internet réponse Disque
Affichage de la page Recherche du fichier sur le disque Préparation de la réponse Socket TCP/IP URL ? Disque utilisateur Document Html Ahmed Jebali – INSTA 2007

Exemple Afficchage sur le navigateur
<html> <body> <h1>Mon premier script</h1> bonjour </body> </html> Exemple de fichier en html sur le serveur Ahmed Jebali – INSTA 2007

Introduction Sous-ensemble du SGML (Standard Generalized Markup Language) Langage de description de “pages” et de leurs éléments Structure Affichage Et liens Version 4, DHTML (Dynamic HTML) … Vers le XML (eXtended) Ahmed Jebali – INSTA 2007

Exemple de document HTML
<HEAD> <TITLE> Bonjour monde</TITLE> </HEAD> <BODY> un document tout simple </BODY> </HTML> Exercice : créer un fichier avec ce contenu puis charger le sur le navigateur Ahmed Jebali – INSTA 2007

Les balises Balises délimiteurs des éléments HTML commencent par < et se terminent par > Les éléments HTML ont généralement une balise de début et une balise de fin <TITLE>Bonjour la terre !</TITLE> Mais pas toujours… balise finale optionnelle (ex. paragraphe) <p> un paragraphe qui débute... pas de balise finale (ex. ligne horizontale) <hr> C'est jusqu'ici (exclusivement) que je me suis rendu au C Ahmed Jebali – INSTA 2007

Les balises Les éléments peuvent être imbriqués les unes dans les autres <P>Je suis passionné de <STRONG>photo</STRONG>; j’en ferais jour et nuit si je le pouvais.</P> Les balises peuvent être écrites en minuscules ou en majuscules Ahmed Jebali – INSTA 2007

Les attributs Certains éléments ont ou peuvent avoir des attributs dans l’étiquette initiale; exemples: <A HREF=" ’accueil du W3C</A> de Le nom l’attribut (ex. HREF) apparaît après le nom d’élément (ex. A) et est suivi du signe "=" puis de la valeur de l’attribut entre guillemets (ex. " Ahmed Jebali – INSTA 2007

Règles simples en HTML Les commandes HTML ont une marque de début et une marque de fin <TITLE>Titre du document HTML</TITLE> Certaines marques de fin sont facultatives Les commandes HTML utilisent les caractères < et > comme délimiteurs. La séquence « < » permet de représenter le caractère < Les commandes HTML peuvent être écrites en minuscules ou en majuscules Un fichier rédigé en HTML doit être suffixé par .html Ahmed Jebali – INSTA 2007

Structure du document HTML
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN">  <HTML> <HEAD> <TITLE> Le titre du document </TITLE> <META NAME="Author" CONTENT= "Aurélien Esnard"> <META NAME="KeyWords" CONTENT= "cours,HTML"> </HEAD> <BODY> <H1> Le titre du document </H1> <P> Le premier paragraphe </P> <P> Le second paragraphe </P> </BODY> </HTML> Ahmed Jebali – INSTA 2007

Structure du document HTML
Ahmed Jebali – INSTA 2007

Quelques éléments du langage
Reportez vous aux documentations sur la PFP aux sources d’information sur le WEB Ahmed Jebali – INSTA 2007

Détail de la balise <BODY>
<BODY ALINK= couleur d’un lien actif BACKGROUND= fichier image arrière plan BGCOLOUR= couleur d’arrière-plan LINK= couleur d’un lien non activé TEXT= couleur du texte VLINK= couleur d’un lien visité > le corps du document... </BODY> <BODY TEXT=red BGCOLOR=BLUE> Ahmed Jebali – INSTA 2007

<H1>, <H2>, <H3>, …, <H6>
Les titres <H1>, <H2>, <H3>, …, <H6> Entêtes de section (titre et sous-titres) Les chiffres réfèrent au niveau hiérarchique H1 est le titre de plus haut niveau et ne doit apparaître qu’une seule fois dans un document H2 à H6 sont de plus bas niveau et chacun peut apparaître plus d’une fois <H1>Les documents structurés</H1> Ahmed Jebali – INSTA 2007

Les Paragraphes <P> <PRE> Paragraphe
Étiquette finale optionnelle <P>Ceci est le texte de mon premier paragraphe. Il comprend une ou plusieurs phrases.</P> <PRE> Un paragraphe de texte préformaté Les sauts de lignes et les espaces sont préservés Ahmed Jebali – INSTA 2007

<P>J'adore les tapirs.<BR>Je déteste les crabes.</P>
Les Séparateurs <BR> Force un retour de chariot Pas de balise fermante Les deux phrases apparaîtront sur des lignes différentes. <P>J'adore les tapirs.<BR>Je déteste les crabes.</P> <HR> Insertion d'une ligne horizontale Ahmed Jebali – INSTA 2007

Listes Liste simple ou ordonnée
Liste à puces (non numérotée) : <UL> Liste numérotée : <OL> Eléments de la liste : <LI> Attributs types de numérotation : type="A|a|i|I|1" types de puces : type="disc|circle|square" <H2>Formats de documents structurés</H2> <UL> <LI>SGML</LI> <LI>XML</LI> </UL> Ahmed Jebali – INSTA 2007

Listes Liste de définitions : <DL>
Contient des <DT> et des <DD> en alternance <DT> : nom du terme défini <DD> : définition <DL> <DT>SGML</DT> <DD>Standard Generalized Markup Language</DD> <DT>XML</DT> <DD>Extensible Markup Language</DD> <DT> </DL> Ahmed Jebali – INSTA 2007

Les éléments définissant un tableau :
Tableaux Les éléments définissant un tableau : <TABLE> : tableau <CAPTION> : titre du tableau <TR> : rangée du tableau (Table Row) <TD> : cellule simple (Table Data) <TH> : titre d'une colonne ou d'une rangée (Table Heading) Ahmed Jebali – INSTA 2007

Tableaux <TABLE> <CAPTION>Titre du tableau</CAPTION>
<TH>Titre Colonne 1</TH> <TH>Titre Colonne 2</TH> <TH>Titre Colonne 3</TH> </TR> <TD>Objet 1</TD> <TD>Objet 2</TD> <TD>Objet 3</TD> </TR> </TABLE> Ahmed Jebali – INSTA 2007

Tableaux Quelques attributs importants :
Border=0 : la taille de la bordure (<TABLE>) . ALIGN="left|center|right" (TR, TH et TD). VALIGN="top|middletop|baseline" : alignement vertical (TR, TH et TD). COLSPAN et ROWSPAN : permettent de déterminer respectivement le nombre de colonnes et le nombre de rangées sur lesquelles s'étend la cellule (TH ou TD). Ahmed Jebali – INSTA 2007

Hyperliens et Ancres <A NAME="signet"> </A> définit un nom de référence, c'est à dire un nom de signet ou d'ancre, qui sera atteint par un lien hypertexte. <A HREF="#nom de signet"> </A> définit un lien vers un signet dans le document, c'est à dire un lien hypertexte, qui conduira vers un signet après un clic dessus. <A HREF="URL"> </A> définit un lien vers une URL. Une URL est un lien hypertexte vers un document externe qui peut être situé sur un autre serveur. <A HREF="URL#signet. </A> définit un lien vers un URL au signet défini. Ahmed Jebali – INSTA 2007

Exemples Lien vers un document HTML externe Lien vers un signet local
<A href=" Officiel de HTML</A> Lien vers un signet local <A name="sect3">Section 3</A> ... <P>Consultez la <A href="#sect3">section 3</A> de ce document.</P> Addresser un <A Cliquer ici pour m’envoyer un . </A> Ahmed Jebali – INSTA 2007

Images La balise <IMG>
Cette étiquette n'a aucun contenu (donc pas d'étiquette de fermeture) Les attributs src pour spécifier l'URL (absolue ou relative) de l'image formats courants : GIF et JPEG (JPG) attributs alt (texte de remplacement) <IMG src="images/fido.jpg" alt="Photo de mon chien Fido"> Ahmed Jebali – INSTA 2007

Images Les attributs de présentation de <IMG>
BORDER= largeur du bord en pixel ALIGN= right, left, middle, bottom, top WIDTH= largeur de l'image en pixel HEIGHT= hauteur de l'image en pixel HSPACE= distance entre image et texte VSPACE= idem Les liens graphiques (ou images cliquables) <A HREF=[nom] > <IMG SRC=[image]> </A> Ahmed Jebali – INSTA 2007

Pour valider vos pages en ligne : http://validator.w3.org/
Pour aller plus loin Pour valider vos pages en ligne : Ahmed Jebali – INSTA 2007

Le CSS But Les feuilles de styles permettent :
CSS (Cascading Style Sheet) But compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation Les feuilles de styles permettent : d'avoir une présentation homogène sur tout un site. de pouvoir changer l'aspect du site entier en modifiant quelques lignes. une plus grande lisibilité du HTML. le positionnement rigoureux des éléments. des chargements de page plus rapides. Ahmed Jebali – INSTA 2007

Objectif Séparation de la forme et du fond
HTML décrit le fond CSS décrit la forme Comment l’introduire dans le code HTML On insère du CSS entre : <STYLE t ype=" t e x t / c s s "> <!−− du CSS i c i −−> </STYLE> Ou on lie un chier CSS avec : <LINK rel="stylesheet" type="text/css" href=" "> Ou on ajoute du CSS à une balise : <BALISE style=" "> Ahmed Jebali – INSTA 2007

Exemple Fichier style.css <HTML> <HEAD>
body { font−f ami l y : A r i a l ; } p { background−c o l o r :#F0C0C0 ; b o r d e r : t h i n s o l i d b l a c k ; . t i t r e { c o l o r : y e l l ow ; Fichier style.css <HTML> <HEAD> <LINK rel="stylesheet" type= "text/css" href="style.css"> <TITLE>Exemple CSS</TITLE> </HEAD> <BODY> <H1 class="titre">Exemple</H1> <P>Un paragraphe avec bordure et couleur de font </BODY> </HTML> Fichier exemple.html Ahmed Jebali – INSTA 2007

Définition des styles Sélecteur = balise simple : H1 { color: blue }
Syntaxe générale : sélecteur {propriété1: valeur ; propriété2: valeur } Sélecteur = balise simple : H1 { color: blue } On peut regrouper les sélecteurs en les séparant par une virgule. H1, H2, H3 { font-family: arial } On peut regrouper les déclarations. H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: arial; font-variant: normal; font-style: normal; } Ahmed Jebali – INSTA 2007

Documentation http://www.htmlhelp.com/reference/css/
Ahmed Jebali – INSTA 2007

Chap 0 : Introduction HTML et CSS

Présentations similaires

Présentation au sujet: "Chap 0 : Introduction HTML et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Chap 0 : Introduction HTML et CSS

Présentations similaires

Présentation au sujet: "Chap 0 : Introduction HTML et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back