Cour préparé par Melle Zineb SAALAOUI HTML/CSS.

Présentation au sujet: "Cour préparé par Melle Zineb SAALAOUI HTML/CSS."— Transcription de la présentation:

1 Cour préparé par Melle Zineb SAALAOUI HTML/CSS

2 Le WEB, comment ça marche?
Le Web est un système client-serveur dont le fonctionnement s'apparente à des relations client-fournisseur. L'ordinateur personnel, doté de son logiciel de navigation (Internet Explorer, Firefox...), joue le rôle du client. Les ordinateurs distants sur lesquels sont hébergés les sites web sont des serveurs. Clients et serveurs, connectés au réseauInternet, communiquent entre eux.

3 Le site WEB, comment ça marche?
consulter n'importe quel site web Aujourd'hui, tout le monde sait aller sur le Web… mais qui sait vraiment comment le Web fonctionne ? Comment créer des sites web comme celui-ci ?

4 Le site WEB, comment ça marche?
Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher

5 HTML CSS Il s'agit de langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991…

6 HTML et CSS : deux langages pour créer un site web
Pour créer un site web, on doit donner des instructions à l'ordinateur. - Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc. Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages

7 HTML et CSS : deux langages pour créer un site web
HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ». CSS (Cascading Style Sheets, aussi appelées Feuilles de style) le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

8 HTML et CSS : deux langages pour créer un site web
SANS CSS C EST PLUS JOLIE AVEC LE CSS

9 HTML les balises, leur fonctionnement : balise = limite d'une boîte où l'on peut mettre des choses <balise> chose </balise> Le langage HTML se décrit comme un ensemble de balises ouvrantes et fermantes qui contiennent le contenu (texte, image, animation) et qui sont interprétées par le navigateur client (Internet Explorer, Netscape, Mozilla, Firefox,…). L’interprétation de certaines balises peut varier d’un navigateur à l’autre. Note importante : seules les fonctionnalités "basiques" sont présentées dans ce cours. Il existe des fonctions plus avancées, qui ne sont hélas pas toujours standardisées et dont l'interprétation peut varier d'un navigateur à l'autre (Internet Explorer et Firefox par exemple).

10 HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <TITLE> : titre d’une page <BR> : passage à la ligne suivante <H1> à <H6> taille du texte <CENTER> : pour entrer le contenu <B> : caractères gras

11 HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <FONT> : police de caractère <FORM> : formulaire <FRAME> : cadre <IMG> : image <TABLE> : tableau

12 HTML Voici la liste des balises de bases nécessaires à la construction d’un site Web : <TH> : légende de ligne ou de colonne <TR> : ligne d’un tableau <TD> : colonne d’un tableau <P> : séparation des paragraphes <OL> : liste numérotée Remarque : Seules les balises <HTML> et <BODY> sont obligatoire dans une page Web.

13 la structutre d'une page HTML

14 HTML 2. La structure de base Le code source d’une page HTML est toujours structuré de cette manière :

15 HTML 3. Exemples HTML Mettre du texte
- Pour remplir une page, il suffit de saisir du texte entre les balises <BODY> et </BODY>. Dans ce texte, le nombre d’espaces entre les mots est ignoré, un ou plusieurs espaces étant équivalent. De même, les retours à la ligne classiques ne sont pas considérés et doivent être marqués à l’aide des balises <BR> et <P>. - La balise <BR> permet d’aller à ligne. - La balise <P> permet également d’aller à la ligne mais avec une interligne.

16 HTML b. Police, taille de la police, couleur
La balise <FONT> sert à définir les caractéristiques des textes dans une page HTML. Ces caractéristiques se définissent à l’aide des attributs de la balise FONT. La police de caractère <font face=" Arial"> Le nom de la police doit être indiqué entre guillemets La taille de la police <font size="-1"> L’attribut « size » prend des valeurs allant de -7 à +7. La couleur de la police <font color="blue"> Cet attribut permet de paramétrer la couleur du texte ou d’une portion de texte.

17 HTML Alignement du texte <FONT align="center">
L’attribut « align » prend comme valeur : « right », « left », « center ». Les attributs d’une balise peuvent parfaitement se cumuler : <font face=" Arial" size="-1" color="blue">

18 HTML c. Mettre en caractère gras, italique
Il suffit de mettre le texte entre les balises appropriées. <B>Mise en caractères gras</B> <I>Mise en italique</I> d. Alignement : utilisation des tableaux et listes Les tableaux :

19 Les listes:

20 HTML Les attributs des tableaux : Border : taille bordure du tableau
Bordercolor : couleur de la bordure Bgcolor : couleur de fon du tableau Cellpadding : espace de remplissage entre les données et le quadrillage Cellspacing : espace entre les cellules du tableau Width : largeur des cellules Les attributs se cumulent : <table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolor="#000000" bgcolor="#0099FF"> Le balises <TR> et <TD> peuvent elle est agrémentée des attributs : Bordercolor et bgcolor

21 HTML:

22 HTML

23 HTML Bgcolor : couleur de fond <body bgcolor="#FFFFFF">
e. Les couleurs et images de fonds Les couleurs Les couleurs sont définies à l’aide de codes que l’on donne à des attributs des balises. On précise pour chaque élément page, tableau, cellule de tableau la couleur qu’elle doit avoir. Il existe un ordonnancement qui fait que la couleur de la balise <TABLE> recouvre la couleur de la balise <BODY> de même que la couleur de la cellule d’un tableau recouvre sa couleur. Les différents attributs pour mettre de la couleur sont : Bgcolor : couleur de fond <body bgcolor="#FFFFFF"> Bordercolor : couleur des bordures <Table bordercolor="#000000" >

24 HTML Images: <img src= «image1.jpg » > Remarque : la balise <IMG> n’a elle aussi pas de balise fermante.

25 HTML f. Les liens (internes, externes) : <a href=" L’attribut href de la balise <a> permet d’indiquer l’adresse vers laquelle il faut pointer. Pour le cas d’une image qui redirige vert une page <a href=" <img src= «../images/image1.jpg »> </a> Exemple: exemple

26 CSS: ou feuilles de style
CSS : cascading stylesheets mise en page dans l'en­tête : <link href="style.css" type= "text/css" rel="stylesheet" title="blablabla" />

27 CSS: structure d’une feuille de style
notion de classe Pour appliquer la classe, il suffira ensuite d'ajouter l‘attribut class="nom" dans le code HTML.

28 CSS: structure d’une feuille de style
toujours dans l'en­tête : <style type="text/css"> table.truc{ border-width: 2px; background-color: blue; } </style> ou dans la balise elle même : <h1 style="text-decoration: underline;">bla bla</h1>

29 CSS: quelques propriétés

30 CSS: quelques propriétés

31 CSS: Quelques propriétés

32 CSS: Quelques propriétés

33 CSS: Quelques propriétés

34 CSS: Quelques propriétés

35 CSS: Autres fonctionnalités

36 HTML+CSS

37 CSS