Intro Web. PICARD GRAVEL Marie-Eve

Dimension: px

Commencer à balayer dès la page:

Download "2011-2012. Intro Web. PICARD GRAVEL Marie-Eve"

Amaury Ratté
il y a 8 ans
Total affichages :

1 Intro Web «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande à afficher une page Web à l'aide d'un navigateur. Nous montrons finalement comment définir une page Web.» Mathieu Lacroix Ce document est un "résumé" du cours d'intro Web de M. Lacroix, professeur à l'iut de Villetaneuse. Il portera sur : Internet, Web, XHTML, CSS, PHP,, etc. Université Paris 13 IUT de Villetaneuse DUT Informatique - Semestre 2 INTRO WEB : Notes de Cours

navigateur. Nous montrons finalement comment définir une page Web.» Mathieu Lacroix Ce document est un "résumé" du cours d'intro Web de M.

2 INTERNET, WEB et XHTML Définitions Réseau : Ensemble de machines pouvant communiquer entre elles, reliées soit par des câbles, soit par des ondes (wifi). Internet : Interconnexion de réseaux. Web : Application permettant de consulter les pages d'un site à l'aide d'un programme spécifique appelé navigateur. Si le site et le navigateur se trouvent sur des ordinateurs différents, le Web utilise l'internet pour la communication entre les deux ordinateurs. Navigateur : Le navigateur est un logiciel qui permet l'affichage des pages d'un site Web. Langage XHTML (ou HTML) : Langage de balises permettant de spécifier quelles parties d'une page Web correspond à un titre, un paragraphe, etc. Url : Une Url est une adresse Web. Une adresse Web est de la forme : nom_du_protocol://adresse_du_site/chemin_du_répertoire/fichier Nom du Protocol : indique le langage utilisé pour la communication entre deux ordinateurs. Adresse du site : adresse du serveur sur lequel se trouve le fichier que l'on désire consulter. Chemin du répertoire : correspond au répertoire où se trouve le fichier sur le serveur. Fichier : C'est le nom du fichier que l'on consulte. 2

Si le site et le navigateur se trouvent sur des ordinateurs différents, le Web utilise l'internet pour la communication entre les deux ordinateurs.

3 Le Langage XHTML Le langage XHTML est un langage balise permettant d'écrire des pages Web. Ce langage est régit par des règles qui contraignent l'écriture du code en obligeant par exemple les balises à être écrites en minuscule. L'intérêt de ces règles est identique à celui des règles de grammaire, d'orthographe ou ponctuation pour la langue française. Pour modifier l'affichage d'une page Web écrite en XHTML, il faut utiliser du code CSS. Dans un fichier CSS, il y a des instructions qui permettent de gérer l'affichage d'une page Web, par exemple en définissant la couleur ou la police d'écriture des textes et tout ce qui touche aux effets visuels d'un site Web. D'ailleurs, pour que toutes les pages Web d'un site aient le même style d'affichage, il convient d'utiliser un même fichier CSS pour chacune d'entre elles. Les règles d'écriture (DTD) 1) Pas d'imbrication de balises. 2) Noms des balises et attributs en MINUSCULE 3) Valeurs d'attributs entre guillemets 4) Toute balise de type inline doit être comprise dans une balise de type block. 5) Une balise de type block ne peut pas être comprise dans une balise de type inline. ) Tout texte doit être dans une balise de type block, et non libre dans le corps du texte. 7) Un paragraphe n'existe pas à l'intérieur d'un titre, ni un paragraphe dans un paragraphe ou un titre dans un paragraphe. Une liste ordonnée ou non-ordonnée ne peut contenir que des items. Insertion de caractères spéciaux Caractère "<" : <p> 1 < 2 </p> signifie "1 < 2" Caractère "&" : &amp 3

L'intérêt de ces règles est identique à celui des règles de grammaire, d'orthographe ou ponctuation pour la langue française.

4 Les Balises Balises obligatoires : Elles forment le document. Les balises html contiennent les balises head et body. Les balises head contiennent les balises title. Les balises body contiennent les balises de type bloc, qui à leur tour contiennent des balises de type inline. <html> Racine du document </html> <head> En-tête du document </head> <title> Titre qui apparait dans l'onglet du navigateur </title> <body> Corps du document </body> Balises de Type Block : Retour à la ligne systématique après le bloc. <h1> Titres (Du plus grand au plus petit : h1, h2, h3, h4, h5, h) </h1> <p> Paragraphe </p> <ol> Liste ordonnée </ol> <ul> Liste non-ordonnée </ul> <li> Items d'une Liste </li> Ligne horizontale </hr> <table> Tableau </table> <tr> Ligne d'un tableau </tr> <td> Cellules de lignes de tableaux </td> Balises de Type Inline : Pas de retour à la ligne après le bloc. <em> Mise en valeur du texte </em> <strong> Mise en valeur du texte </strong> <br> Saut de ligne </br> <img src="image/image1.png" alt="logo de " /> <a href="lien"> Lien Hypertexte </a> 4

<html> Racine du document </html> <head> En-tête du document </head> <title> Titre qui apparait dans l'onglet du navigateur </title> <body> Corps du document </body> Balises de Type Block : Retour à

5 Mise en page avec CSS Le CSS permet de spécifier comment afficher les différents éléments d'une page Web. Pour relier un fichier CSS à un document XHTML afin qu'il en gère l'affichage, il faut le spécifier dans le document XHTML. Pour ce faire on insère une balise link dans la balise head: <link href="fichiercss.css" rel="stylesheet" type="test/css" /> Structure Type sélecteur propriété : valeur ; Le sélecteur est la cible de la modification. Par exemple, une balise. Ce qui est modifié, c'est la propriété de ce sélecteur. Par exemple, une couleur d'affichage. La valeur correspond à ce que l'on souhaite affecter à la propriété. Par exemple, rouge. Exemple h1 color : red ; Ici, on souhaite que le sélecteur "h1" ait sa propriété "color" modifié par la valeur "red". En fait, on veut que les titres du document soient rouges. 5

Pour ce faire on insère une balise link dans la balise head: <link href="fichiercss.

6 Principales Propriétés et Valeurs TEXTES font-family : Spécifie la police à utiliser. Arial, Times, Verdana, Script, Courrier font-size : Indique la taille du texte xx-small, x-small, small, medium, large, x-large, xx-large font-style : Spécifie si le texte est en italique. italic ou normal (sauf pour la balise em où la valeur est italique). font-weight : Indique la taille du texte bold, normal ou un nombre entre 100 et 900. test-align : Spécifie l'alignement du texte. Possible seulement pour les balises de type block. left : gauche right : droite center : centré justify : justifié text-decoration : Spécifie si le texte est souligné, barré, clignotant, avec un trait au dessus, ou sans décoration. underline : souligné line-through : barré blink : clignottant overline : avec un trait au dessus none : sans décorations color: Spécifie la couleur d'affichage du texte. red, blue, green, fuschia, gray, olive, purple,, etc. On peut aussi donner le code hexadecimal d'une couleur ou son code RVB.

italic ou normal (sauf pour la balise em où la valeur est italique). font-weight : Indique la taille du texte bold, normal ou un nombre entre 100 et 900. test-align : Spécifie l'alignement du texte.

7 FONDS background-color : Spécifie la couleur de fond. Les mêmes valeurs que pour color, avec en plus, la valeur "transparent". background-image : Spécifie l'image de fond. url("image") où image correspond au nom du fichier image ainsi que son chemin. background-repeat : Spécifie si l'image de fond doit être répétée ou pas, lorsqu'elle est plus petite que l'élément. repeat-x : image répétée horizontalement repeat-y : image répétée verticalement repeat : image répétée horizontalement et verticalement no-repeat BORDURES border : Spécifie la bordure d'un bloc. La valeur est constituée de trois éléments : taille, style, couleur. dotted : pointillés solid : trait plein dashed : tirets Exemple : p border : 1px solid blue ; Si l'on souhaite donner des valeurs différentes aux différentes bordures, on doit spécifier : border-top border-bottom border-left border-right 7

repeat-x : image répétée horizontalement repeat-y : image répétée verticalement repeat : image répétée horizontalement et verticalement no-repeat BORDURES border : Spécifie la bordure d'un bloc.

8 MARGES margin : Spécifie la taille de la marge extérieure en pixels, en taille relative ou pourcentage. Pour les éléments de type inline, seules les marges extérieures gauches et droites peuvent être définies. Exemple : table width : 500 px ; margin-left : auto ; Si l'on souhaite donner des valeurs différentes aux différentes bordures, on doit spécifier : margin-top margin-bottom margin-left margin-right padding : Spécifie la taille de la marge intérieure en pixels, en taille relative ou pourcentage. Pour les éléments de type inline, seules les marges intérieures gauches et droites peuvent être définies. Exemple : table width : 500 px ; padding left : auto ; Si l'on souhaite donner des valeurs différentes aux différentes bordures, on doit spécifier : padding-top padding-bottom padding-left padding-right 8

Exemple : table width : 500 px ; margin-left : auto ; Si l'on souhaite donner des valeurs différentes aux différentes bordures, on doit spécifier : margin-top margin-bottom margin-left margin-right

9 LISTES & TABLEAUX border-collapse : Spécifie si les cellules d'un tableau son collées ou séparées. collapse separate list-style-type : Définit le type de puces utilisées dans les listes non ordonnées. square circle disc : cercle plein none Définit également la numérotation utilisée dans les listes ordonnées. decimal : chiffres décimaux upper-roman : chiffres romains majuscules lower-roman : chiffres romains minuscules 9

square circle disc : cercle plein none Définit également la numérotation utilisée dans les listes

Documents pareils

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations