<-[[index]] TD01 (3h) Premiers pas de l'autre côté du tuyau, aujourd'hui, on passe d'utilisateur de l'internet à créateur d'un petit morceau de web. ====== Réseaux, serveurs, FTP ====== ===== Noms de domaines et Whois ===== Où sont hébergés les sites, et qui est leur propriétaire ? Il existe de nombreux services de Whois sur Internet, comme [[http://www.whois.net/]] , [[http://www.ovh.com/cgi-bin/whois.pl]] ou [[http://who.is/]] Cherchez ainsi quel est le propriétaire et où sont hébergés les sites suivants : * abcdegustation.com * mdunemployment.com * lafraise.com * solyme.com * iim.fr * etc... Dans quelle ville/pays est hébergé le site ringrex.com ? ===== Logiciels du quotidien ===== Quels sont les logiciels qu'on utilise au quotidien ==== Navigateur et plugin ==== Le navigateur par excellence : [[http://www.getfirefox.net/|Firefox]] permet avec le plug-in [[http://getfirebug.com/|Firebug]] de faire du HTML, du CSS, du JavaScript, etc. ==== Transfert de fichiers FTP ==== * Filezilla, Sous Windows, Linux, Mac OSX ([[http://filezilla-project.org/download.php?type=client|télécharger]]) complet, efficace. * Cyberduck, Mac OSX uniquement ([[http://cyberduck.ch/|télécharger]]) élégant, simple, et en plus l'icône c'est un canard {{:ressources:web:duck.jpg|}} * gFTP, Linux/Gnome uniquement, nécessite gtk ([[http://gftp.seul.org/|+ d'infos]]) assez minimaliste mais efficace. ==== Editeurs de texte ==== * Notepad++, sous Windows ([[http://notepad-plus-plus.org/download|télécharger]]) Simple, met des couleurs * Fraise, sous MAC OSX ([[http://www.macupdate.com/app/mac/33751/fraise|télécharger]]) facile à utiliser, met des couleurs, si vous êtes sur un vieux Mac OSX, vous pouvez utiliser [[http://smultron.sourceforge.net/|Smultron]]. * gEdit, vi ou emacs pour les puristes libristes sous Linux ==== Autres logiciels ==== On utilise aussi notamment * un serveur Http/PHP/MySQL pour faire des sites dynamiques (LAMP sous Linux, WAMP sous Windows, MAMP sous Mac). * des IDE, ou Interfaces de développements, permettant d'éditer du texte avec beaucoup, beaucoup de fonctionnalités. * D'autres trucs... ===== Utiliser FTP ===== Pour commencer, téléchargez cette image de Patate et placez-la sur votre bureau, c'est pour la suite. {{:ressources:web:patate.jpg?200|}} Le [[wp>fr:FTP|FTP]] (File Transfert Protocol ou //protocole de transfert de fichiers//), permet de transférer des fichiers de manière sécurisée et ainsi de mettre à jour les sites web. Les identifiants de connexion pour le groupe X sont host ftp.alwaysdata.com login iim_d ou iim_f pass c'est noté au tableau En utilisant un client FTP (FileZilla, Cyberduck) ajoutez un nouveau serveur et connectez-vous. Dans le dossier www, créez un dossier à votre nom, vous pourrez y accéder par l'URL [[http://iim.alwaysdata.net/iimf/gaspard.beernaert/]] Pensez aux majuscules lorsque vous créez votre dossier : si vous vous appelez Marie-Zoé de L'Estranglette, votre dossier sera marie-zoe.de-l-estranglette. Pour finir, placez votre image de patate dans votre dossier, vous pourrez alors consulter l'image à l'adresse [[http://iim.alwaysdata.net/iimf/gaspard.beernaert/patate.jpg]] ====== Le HTML ====== ===== Elements théoriques ===== ==== Structure d'un document HTML ==== Le HTML ([[wp>fr:HTML|HyperText Markup Language]]) est //le// langage de création de documents Web. ANAEL

Association nationale des éditeurs de livres

L'Association nationale des éditeurs de livres (ANEL) est née en 1992 de la fusion entre l'Association des éditeurs (1943) et la Société des éditeurs de manuels scolaires du Québec (1960). L'ANEL regroupe près de 100 maisons d'édition de langue française au Québec et au Canada.

Sa mission est de soutenir la croissance de l'industrie de l'édition et d'assurer le rayonnement du livre québécois et canadien français à l'échelle nationale et internationale. Les maisons d'édition membres de l'Association publient divers types d'ouvrages, du roman au manuel scolaire en passant par l'essai et le livre jeunesse. Ces maisons sont situées au Québec, en Ontario, au Manitoba et au Nouveau-Brunswick.

Le document HTML commence par <**html**> et se termine par . Il est constitué d'une en-tête, délimité par les balises <**head**> et et d'un corps de document délimité par <**body**> et . ==== HTML et XHTML ==== Il existe de nombreuses versions différentes de HTML, la plus répandue est XHTML 1.1, c'est celle que vous utiliserez. La prochaine version HTML5 [[http://dev.w3.org/html5/spec/Overview.html|n'est pas encore officiellement reconnue]] par l'organisme de recommandation et standardisation appellé W3C (pour World Wide Web Consortium). Le nom est un peu barbare, mais l'utilisation n'en est pas vraiment compliquée, le XHTML est une norme recommandée par le W3C depuis 2001, elle se caractérise notamment par : * une ligne supplémentaire * la spécification de la norme et de la langue dans le tag <**html** **xmlns**="..." **xml**:**lang**="fr"> * les tags se ferment 'à la' XML, c'est à dire que les tags uniques comme meta, img et br s'écrivent dorénavant <**br** /> (au lieu de <**br**>). ANAEL

Association nationale des éditeurs de livres

L'Association nationale des éditeurs de livres (ANEL) est née en 1992 de la fusion entre l'Association des éditeurs (1943) et la Société des éditeurs de manuels scolaires du Québec (1960). L'ANEL regroupe près de 100 maisons d'édition de langue française au Québec et au Canada.

Sa mission est de soutenir la croissance de l'industrie de l'édition et d'assurer le rayonnement du livre québécois et canadien français à l'échelle nationale et internationale. Les maisons d'édition membres de l'Association publient divers types d'ouvrages, du roman au manuel scolaire en passant par l'essai et le livre jeunesse. Ces maisons sont situées au Québec, en Ontario, au Manitoba et au Nouveau-Brunswick.

==== UTF-8, accents et formats de fichier ==== Il est recommandé d'utiliser l'enregistrement au format UTF-8 et d'utiliser le code pour supprimer les problèmes d'accents ou de jeux de caractères, et ainsi utiliser plusieurs de jeux de caractères, avec plusieurs alphabets, いくつかのアルファベット, ตัวอักษรหลาย, det gør min web nemmere. Pour s'assurer que vos fichier sont bien en UTF-8 : Sous Fraise, c'est dans le menu Text (Texte) {{:ressources:web:fraise_utf8.png|}} Sous Notepad++, c'est dans le menu Encoding (Encodage) {{:ressources:web:npp_utf8.png|}} ===== Exercices ===== Quelques exercices rapides de mise en pratique du HTML avant de passer à JavaScript. ==== Espace de travail ==== En web, lorsque vous créez des fichiers et des dossiers, il est recommandé de n'utiliser que des lettres en minuscule, sans accents et les caractères - (tiret), _ (underscore) et . (point). Les règles d'écriture des noms de fichiers et de dossiers pour le web sont donc : * Proscrire les espaces * Proscrire les accents et caractères spéciaux pas de é, è, ç, à, ", ', @, ?, &, (, ), etc. * Proscrire les majuscules, tous les noms de fichiers et leurs extensions doivent être écrits en minuscule, afin d'éviter les bugs de compatibilité Windows/Linux lors du transfert FTP. * Les extensions pour les fichiers HTML sont .html et pour les images JPG sont .jpg, pas de .htm, .jpe, .jpeg parce que certains utilisateurs n'affichent pas les extensions. Créez-vous un espace de travail propre et structuré, dans votre dossier iim, créez un dossier **web-initiation** et un dossier **td01**. ==== Un document XHTML ==== Créez un fichier dans votre éditeur de texte collez-y le contenu HTML ci-dessous, Et enregistrez-le en tant que fichier **page.html** dans le dossier **td01**. Première page XHTML

Ceci est ma première page XHTML

Une fois qu'on sait en faire une, après c'est la même logique pour tous les sites

==== Quelques éléments de syntaxe utiles ==== *

,

,

et

servent à faire des titres *

texte

sert à faire des paragraphes *
texte
permet d'isoler un bloc de texte *
permet de faire un saut de ligne * texte permet de mettre du texte en gras (sans sauter de ligne) :!: Modifiez la page page.html de telle sorte qu'elle affiche ce résultat {{:ressources:web:anael.png|}} ==== Liens et images ==== === Syntaxe === == Liens hypertextes == Pour faire un lien, on utilise freelancis Le est une "//anchor//" (ancre en anglais) et le **href** signifie hyper références vers l'élement de destination. N'oubliez pas de fermer par un le lien que vous avez ouvert. L'attribut **title** permet d'afficher un texte d'aide en survol avec la souris. == Images == Pour inclure une image, on utilise Mac guy Le correspond au tag "//image//", on ne le ferme pas, c'est pour ça qu'en XHTML il s'écrit avec un /> à la fin. L'attribut **src** sert à spécifier la source et l'attribut **alt** sert à spécifier du texte alternatif si on ne peut pas voir l'image. Quand on veut faire un lien vers un élément se trouvant dans le dossier Attention : si le fichier patate.jpg n'est pas exactement dans le même dossier que le fichier page.html sur-lequel nous sommes en train de travailler, l'image ne s'affichera pas. === Liens relatifs, absolus === == lien absolu == Pour aller chercher un lien ou une image sur Internet, on spécifie **http:/****/**, on appelle ça un lien absolu. == lien relatif == En revanche, si l'image est à côté du fichier HTML, on peut simplement faire un lien relatif : une grosse patate Pour aller chercher une image dans un dossier, on tape le nom du dossier, puis un / (slash), puis le nom du fichier, par exemple, si j'ai mis le fichier patate.jpg dans le dossier images/, je dois taper {{:ressources:web:dossier_img.png|}} la patate ! Pour retourner dans un dossier parent (un dossier avant), on utilise la syntaxe ../ Par exemple, pour faire un lien vers le fichier page.html du dossier d'Anthony à partir du fichier page.html du dossier de Gaspard, on doit écrire {{:ressources:web:dossier_href.png|}} Anthony :!: Créez un fichier **apropos.html** où vous vous présentez et faites des liens vers les pages **apropos.html** des étudiants de la classe que vous connaissez. :!: Créez un fichier **index.html** qui fait des liens vers les pages **apropos.html** et **page.html**