La lecture en ligne est gratuite
Télécharger

Publications similaires

Révisions de HTML

de Force_IT

Support de cours

de Shawyeg

Java Printing

de ejegatuz

Vous aimerez aussi

Cours html youssef

de thekiller

5 merise mct

de thekiller

4 merise mcd

de thekiller

suivant
Université Sidi Mohamed Ben Abdellah. É cole S upérieure de T echnologie de F ès. Département : Informatique. __________________________________________________________________________
Environnements et outils de développement WEB
Réalisé par : - M.BENSLIMANE. __________________________________________________________________________ ANNEE UNIVERSITAIRE : 2010 / 2011.
Plan. Introduction I. Bases du WEB. 1. Historique. 2 . Structure web . 3. De nombreux la nga ges... . 4. Pour créer un site web... . II. Première Page. 1. Ava nt de commencer . 2. Ca hier des cha rges . III. HTML et XHTML. 1. HTML et XHTML. 2. Texte et couleurs. 3. La mise en pa ge. 4. Les listes. 5. Les ima ges 6 . Les liens __________________________________________________________________________
01/03/20111
Plan.
OUTILS
1.FIREWORKS 2.DREAMWAVER 3.FLASH
__________________________________________________________________________
I. Bases du WEB.
010/3/20112
I.1. Historique.
Ce n'est que vers 1994/1995, que nous avons entendu parler d'internet, pourtant cette technologie a plus de trente ans : 1969 Le DoD lance son projet ARPANET (Advanced Research Projects Agency Network), dont le but est de créer un réseau capable de fonctionner même en cas de panne de certains de ces composants. Fin 1969, le réseau relie 4 machines. 1972 Première présentation publique, et première application de messagerie électronique. 1973 Des chercheurs présentent les grandes lignes d'un protocole de connexion, ébauche du TCP/IP. Mise en place des IP uniques pour chaque machine connectée. 1976 Conception d'un système permettant des noms aux machines. 1983 Le TCP/IP dans ces spécifications est adopté définitivement. Le réseau est scindé en MILNET dédié à la Défense, et en ARPANET, dédié à la Recherche. 1985/86 Le NFSNET, développé depuis les années 70 par la National Science Foundation, choisi d'adopter le TCP/IP, ce qui va accroître considérablement ses performances. Jusqu'en 1990, Les utilisateurs de ARPANET migrent de plus en plus vers NFSNET. En 1990, ARPANET est abandonné et laisse la place à INTERNET.
I.2. Structure web (1).
Plus qu'un réseau mondial, Internet est un réseau de réseaux. Nous n'étudierons pas la structure d'Internet, mais nous allons tout de même nous intéresser rapidement à l'architecture web. Architecture client/serveur :
Le binôme client serveur se compose : d'un client : c'est à dire le PC de l'internaute, et plus exactement son navigateur. d'un serveur : Le serveur est l'endroit ou sont physiquement stockées les pages du site. Le client demande une page au serveur via la barre d'adresse du navigateur (entre autre), le serveur envoie alors le code de la page demandée, interprétée par le navigateur. Cette architecture est la plus simple.
010/3/20113
I. 2. Les concepts de base d’Active Directory ( 1 ). Architecture multi-tiers : Lorsque le serveur est lui-même client d'un a utre serveur, ou d'une ba se de données, on pa rle a lors d'a rchitecture multi-tiers.
Et il peut y a voir plusieurs nivea ux de serveurs :
Le client (na v ga teur n est ca pa e e compren re et nterpr ter que e HTML et certa ins scripts (ja va script...). Certa ins la nga ges sont interprétés a u nivea u du serveur et tra nsmettent a u client un code HTML généré dyna miquement.
I. 3. De nombreux langages...
De nombreux la nga ges sont utilisés sur le web, en voici quelques uns : HTML, DHTML, XHTML, XML, Javascript, PHP, CSS, ASP, VBscript, SQL, JAVA, CGI, ... Certa ins de ces la nga ges sont interprétés a u nivea u du na viga teur client (HTML, Ja va script, CSS...), ta ndis que d'a utres sont interprétés a u nivea u du serveur (ASP, PHP, CGI...) . Vous le verrez vite, il est plutôt compliqué de ma îtriser cha cun de ces la nga ges, d'a uta nt que la liste n'est pa s exha ustive. Il n'y a pa s de règle a bsolue qua nt a u choix d'un la nga ge plutôt que d'un a utre, cha cun a ses spécificités, ses a touts et ses restrictions.
010/3/20114
I. 4. Pour créer un site web...
Qua nd tout à commencer, on pouva it créer un site a vec le bloc -notes. C'est toujours possible, ma is ce n'est pa s le plus pra tique !!! Pour créer un site, on se sert plutôt des outils développés da ns ce but : Éditeur HTML : Le bloc-notes , donc, mais ce n'est pas le seul. Il y a deux types d'éditeurs, les éditeurs de codes et les éditeurs wysiwyg (ou wisiwig). Parmi les éditeurs non-wysiwyg : Textpad et de nombreux freewares. Parmi les éditeurs wysiwyg : Dreamweaver , GoLive , Frontpage , WebExpert pour les plus connus... Un bon choix également (et gratuit de surcroît) : Netscape Composer (inclus dans la suite Netscape). Logiciel de retouche d'image et de maquettage web : Le plus connu : Photoshop/ImageReady et son équivalent en open source : The Gimps . Mais aussi, PaintShopPro, Fireworks ... Transfert FTP : Si vous avez investi dans un éditeur wysiwyg, cette fonctionnalité est sans doute incluse dedans (C'est le cas de Dreamweaver ). Sinon, il existe des logiciels comme FTPExpert , CuteFTP ... qui sont payants. Parmi les freewares, il y a PowerDesk , SmartFTP ... Il y a une multitude d'outils destinés aux webmasters, tellement qu'il serait impossible de tous les énumérer.
II. Première Page.
01/03/20115
II. 1. Avant de commencer .(1) Votre site se composera sa ns doute des fichiers suiva nts
*.htm ou *.html : les fichiers HTML (les pages) *.js : des fonctions javascripts déportées *.php ou .php3 : des pages et/ou des scripts php *.asp : des pages et/ou des scripts asp .inc : des inclusions * *.jpeg, *.jpg, *..gif, *.png : des images tous les autres fichiers liés (vidéos, sons, pdf...)
II. 1. Avant de commencer .(2)
De plus, votre site, coté serveur, se comporte comme n'importe quel groupe de fichiers. Il est a lors importa nt de réfléchir à une a rborescence cla ire du site. Vous verrez vite, qu'il est indispensa ble d'être orga nisé da ns le cla ssement des fichiers du site, ca r plus le site est gros, et plus les intervena nts sont nombreux, plus le besoin d'orga nisa tion est importa nt.
Bien que le HTML ne soit pa s sensible à la ca sse, il est importa nt d'y fa ire a ttention. Éta blissez une règle et tenez -y-vous.
Da ns les noms de fichiers, n'utilisez que des lettres, des chiffres, le tiret ("-") et le tiret-ba s ("_" underscore). Oubliez les ca ra ctères a ccentués, les espa ces (" ") et tous les ca ra ctères spécia ux. Le premier ca ra ctère du nom de fichiers sera toujours une lettre (ni chiffre, ni tiret, ni underscore !).
01/03/20116
II. 1. Avant de commencer .(3)
REGLES DE NOMMAGES DES FICHIERS
II. 2. Cahier des charges
La réalisation d'un site, la plupart du temps, commence avec un cahier des charges (ça devrait tout du moins !). Le (ou les) cahier(s) des charges est le document qui définit en tout point le site.
Il s'intéresse au contenu du site, au mode de traitement de l'information, à l'esthétique de l'ensemble, à la charte graphique, à l'homogénéité des pages, au mode de navigation, mais aussi au public visé, aux objectifs du site, au mode d'intégration des pages, aux technologies utilisées...
010/3/20117
III. HTML & XHTML.
III. 1. HTML et XHTML(1)
Le HTML : HyperText Markup Language Le HTML est un la nga ge de description. Une pa ge HTML est une succession de ba lises et de texte. Les na viga teurs interprètent les ba lises et a ffichent le texte. La version du HTML a ctuellement utilisé est le HTML 4, définit pa r le W3 Consortium www.w3c.org ). Néa nmoins, il existe une version plus récente, qui prend le nom de XHTML 1.0. Le XHTML ne fa it qu'imposer une synta xe pa rticulière pour HTML et ne définit pa s de ba lise pa rticulière. La syntaxe Une ba lise (ou ma rqueur, ou ta g) est délimitée pa r des chevrons (< >), de cette ma nière : <ba lise> texte </ba lise> La ba lise s'ouvre, et se referme (présence d'un sla sh). Certa ines ba lises a cceptent des a ttributs : <ba lise a ttribut="va leur" a ttribut2="va leur2"> texte </ba lise> Les a ttributs ne sont pa s repris da ns la ba lise ferma nte.
01/032/0118
III. 1. HTML et XHTML(2) Le XHTML Le XHTML est la version a méliorée du HTML, qui redonne à celui-ci sont rôle strictement descriptif. Le XHTML ne définit pa s de nouvelles ba lises, ma is il impose une synta xe pa rticulière.
Le code de ga uche sera correctement interprété pa r la plupa rt des na viga teurs. En effet, le HTML est a ssez souple et a ccepte la plupa rt des erreurs. Le XHTML impose que toutes les ba lises soient fermées, que la ca sse soit minuscule, et que toutes les va leurs soient entre guillemets. Le code de ga uche est a lors conforme a u XHTML. Certa ines ba lises n'éta ient ja ma is fermées en HTML, nota mment la ba lise retour cha riot <br>. En XHTML, il existe deux fa çons de fermer cette ba lise <br /> ou <br></br>
III. 1. HTML et XHTML(3) Premières ba lises Da ns le bloc-notes, nous a llons ta er le code ci dessous :
Cette structure de pa ge, est le minimum obliga toire pour notre pa ge. Les ba lises <html> et </html> contiennent toujours les ba lises <hea d> et <body>. Elles spécifient a ux na viga teurs que le la nga ge codé est du HTML.
01/032/0119
III. 1. HTML et XHTML(4)
III. 2. Texte et Couleurs(1)
Balises de mise en forme <b> , <i>, <u>, <s>, <sub>, <sup> ... Nous sa vons fa ire une pa ge, ma intena nt nous a llons y mettre un peu de contenu. Da ns notre a e, entre les ba lises bod , inscrivons le code suiva nt :
A noter, que nous pouvons sa ns problème combiner les ba lises. Cependa nt, elles ne doivent ja ma is se cheva ucher (<b><i> texte </b></i>) ne fonctionne pa s !)
01/032/01110
III. 2. Texte et Couleurs(2) Il est a ussi possible de mettre le texte en exposa nt ou en indice :
Encore une ba lise de mise en forme, la ba lise de centra ge. Il y a d'a utre moyen de déterminer l'a lignement d'un texte, nous verrons ça plus ta rd.
III. 2. Texte et Couleurs(3) Ba lise police <font>  Nous a llons ma intena nt a gir à proprement pa rler sur la police de texte. Pour cela , nous utiliserons la ba lise <font>.
Da ns cet exemple, nous utilisons les trois a ttributs possibles de la ba lises font. Ces a ttributs sont optionnels, on peut utiliser les 3, 2 ou 1, voire a ucun. Da ns le ca s de la ba lise font, ne pa s utiliser d'a ttributs n'est pa s très cohérent, puisque utilisée seule, la ba lise n'a a ucune utilité. Cependa nt, sa chez que les a ttributs d'une ba lise sont toujours optionnels ! De plus, les normes XHTML imposent l'utilisa tion des cotes pour la va leur des a ttributs. Il est donc fortement conseillé de les utiliser même si les a ttributs semblent s'en pa sser.
010/32/01111