Cour préparé par Melle Zineb SAALAOUI HTML/CSS
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. 2013-2014
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 ? 2013-2014
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 2013-2014
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… 2013-2014
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 2013-2014
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. 2013-2014
HTML et CSS : deux langages pour créer un site web SANS CSS C EST PLUS JOLIE AVEC LE CSS 2013-2014
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). 2013-2014
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 2013-2014
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 2013-2014
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. 2013-2014
la structutre d'une page HTML 2013-2014
HTML 2. La structure de base Le code source d’une page HTML est toujours structuré de cette manière : 2013-2014
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. 2013-2014
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. 2013-2014
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"> 2013-2014
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 : 2013-2014
Les listes: 2013-2014
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 2013-2014
HTML: 2013-2014
HTML 2013-2014
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" > 2013-2014
HTML Images: <img src= «image1.jpg » > Remarque : la balise <IMG> n’a elle aussi pas de balise fermante. 2013-2014
HTML f. Les liens (internes, externes) : <a href="http://www.google.fr"></a> 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="http://mapage.htm"> <img src= «../images/image1.jpg »> </a> Exemple: exemple 2013-2014
CSS: ou feuilles de style CSS : cascading stylesheets mise en page dans l'entête : <link href="style.css" type= "text/css" rel="stylesheet" title="blablabla" /> 2013-2014
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. 2013-2014
CSS: structure d’une feuille de style toujours dans l'entê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> 2013-2014
CSS: quelques propriétés 2013-2014
CSS: quelques propriétés 2013-2014
CSS: Quelques propriétés 2013-2014
CSS: Quelques propriétés 2013-2014
CSS: Quelques propriétés 2013-2014
CSS: Quelques propriétés 2013-2014
CSS: Autres fonctionnalités 2013-2014
HTML+CSS 2013-2014
CSS 2013-2014