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

Le navigateur par excellence : Firefox permet avec le plug-in Firebug de faire du HTML, du CSS, du JavaScript, etc.

Transfert de fichiers FTP

  • Filezilla, Sous Windows, Linux, Mac OSX (télécharger) complet, efficace.
  • Cyberduck, Mac OSX uniquement (télécharger) élégant, simple, et en plus l'icône c'est un canard
  • gFTP, Linux/Gnome uniquement, nécessite gtk (+ d'infos) assez minimaliste mais efficace.

Editeurs de texte

  • Notepad++, sous Windows (télécharger) Simple, met des couleurs
  • Fraise, sous MAC OSX (télécharger) facile à utiliser, met des couleurs, si vous êtes sur un vieux Mac OSX, vous pouvez utiliser 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.

Le 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 (HyperText Markup Language) est le langage de création de documents Web.

<html>
<head>
<title>ANAEL</title>
 
</head>
<body>
	<h1>Association nationale des &eacute;diteurs de livres</h1>
	<p>L'Association nationale des &eacute;diteurs de livres (ANEL) 
		est n&eacute;e en 1992 de la fusion entre l'Association des 
		&eacute;diteurs (1943) et la Soci&eacute;t&eacute; des 
		&eacute;diteurs de manuels scolaires du Qu&eacute;bec (1960). 
		L'ANEL regroupe pr&egrave;s de 100 maisons d'&eacute;dition 
		de langue fran&ccedil;aise au Qu&eacute;bec et au Canada.</p>
	<p>Sa mission est de soutenir la croissance de l'industrie de 
		l'&eacute;dition et d'assurer le rayonnement du livre 
		qu&eacute;b&eacute;cois et canadien fran&ccedil;ais &agrave; 
		l'&eacute;chelle nationale et internationale. Les maisons 
		d'&eacute;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&eacute;es 
		au Qu&eacute;bec, en Ontario, au Manitoba et au 
		Nouveau-Brunswick.</p>
</body>
</html>

Le document HTML commence par <html> et se termine par </html>. Il est constitué d'une en-tête, délimité par les balises <head> et </head> et d'un corps de document délimité par <body> et </body>.

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 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 <!DOCTYPE …>
  • 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>).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>ANAEL</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="gaspard from freelancis" />
 
</head>
<body>
	<h1>Association nationale des éditeurs de livres</h1>
	<p>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.</p>
	<p>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.</p>
</body>
</html>

UTF-8, accents et formats de fichier

Il est recommandé d'utiliser l'enregistrement au format UTF-8 et d'utiliser le code <meta http-equiv=“Content-type” content=“text/html; charset=utf-8” /> 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)

Sous Notepad++, c'est dans le menu Encoding (Encodage)

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Première page XHTML</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 
</head>
<body>
	<h1>Ceci est ma première page XHTML</h1>
	<p>Une fois qu'on sait en faire une, après c'est la même logique pour tous les sites</p>
 
 
</body>
</html>

Quelques éléments de syntaxe utiles

  • <h1>, <h2>, <h3> et <h4> servent à faire des titres
  • <p>texte</p> sert à faire des paragraphes
  • <div>texte</div> permet d'isoler un bloc de texte
  • <br /> permet de faire un saut de ligne
  • <strong>texte</strong> 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

Liens et images

Syntaxe

Liens hypertextes

Pour faire un lien, on utilise

<a href="http://www.freelancis.com" title="freelancis">freelancis</a>

Le <a></a> 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 </a> 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

<img src="http://freelancis.net/lib/tpl/crossblaim/images/macguy.png" alt="Mac guy" />

Le <img /> 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 :

<img src="patate.jpg" alt="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

<img src="images/patate.jpg" alt="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

<a href="../anthony.guedj/apropos.html" title="La page d'Antho">Anthony</a>

:!: 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

ressources/web/td01.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April