##Pré-requis

##Quelques aides

##Comment est programmé un site internet ?

Site internet

Vulgairement, on peut diviser la programmation en deux partie, le front et le back

###Le front C’est ce que l’on voit à l’écran :

  • Le texte
  • Les images
  • La mise en forme coté client
  • Les vidéos
  • Le titre de la page etc…

Il est généralement fait par un “développeur-front” ou “developpeur-frontend”, ou encore un intégrateur, ou webmaster

###Le back Tout ce que l’on ne voit pas :

  • Liaison du site à une BDD (Base de données), qui permettra de sortir les informations utiles pour chaque produit d’un catalogue par exemple.
  • Traitement des données coté serveur
  • Remontée des informations d’une BDD
  • Mise en place d’un environnement

Il est fait par des “dev back”

##Les premiers outils Afin de suivre et taper les mêmes commandes, nous allons installer les mêmes logiciels.

###traitement de texte Je vous recommande l’excellent SublimeText3 Une fois installé, nous allons le configurer un petit peu. Il faut tout d’abord installer l’essentiel “package control” Ouvrez SublimeText3 après l’avoir installé, cliquez sur “View”, puis “Show console”. Une fois celle-ci ouverte, collez le texte suivant dedans, et faites Entrée :

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Maintenant que le package control est installé, faites le raccourci Ctrl+shift+p pour ouvrir une liste de commande et tapez “Install package”, faites Entrée puis tapez “Emmet”, et encore une fois Entrée Il existe une flopée de plugins pour SublimeText, pour le moment nous n’utiliserons que celui-ci.

###Git Nous utiliserons Gitbash pour gérer Git sur windows. Installez le, nous y reviendrons après (laissez toutes les options par défaut).

Créez vous également un compte sur Github

##Notre premier site

  • Création d’un dossier “Site” sur votre bureau
  • Dans SublimeText, faites un nouveau fichier et enregistrez le avec le nom “index.html” (une des extension possible d’un fichier web)
  • Tapez du texte dedans, n’importe quoi, et si vous n’êtes pas inspiré : Lorem ipsum
  • Enregistrez le, faites clic droit “Open in browser” (ouvrir dans le navigateur)

Grandiose, vous avez fait votre première page web. Mais comme vous le voyez, il y a plusieurs soucis :

  • Notre page n’a pas de titre
  • Bizarre, j’ai tapé plusieurs paragraphe avec des retours à la ligne, mais ça m’affiche tout à la ligne…
  • Les accents que j’ai tapé s’affichent vraiment étrangement

Effectivement, ce serait trop facile, un site internet à besoin d’une structure particulière pour s’afficher correctement. Cette structure est faites de balises Une balise ? késako ? Une balise html (langage que nous utilisons) se présente sous plusieurs formes :

  • La plus commune : <p>Un peu de texte</p> ici, c’est un paragraphe que nous demandons.
  • Balise auto-fermante : <img> il n’y a pas, comme pour le <p></p> de balise pour fermer une image
  • Liste des balises HTML

###Un peu de pratique À chaque fois que vous souhaitez un retour à la ligne, il faut “englober” votre code dans des balises de paragraphe. Exemple :

<p>Loremé ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae, perferendis iure, aspernatur eligendi id minima pariatur natus labore modi, nesciunt molestias nisi minus assumenda nulla a, sintà distinctio commodi.</p>
<p>Lorem ipsum dolor sit amet, consecteturô adipisicing elit. Ratione repudiandae, perferendis iure, aspernatur eligendi id minima pariatur natus labore modi, nesciunt molestias nisi minus assumenda nulla a, sint distinctio commodi.</p>

Essayez dans votre éditeur de texte, sauvegarder le fichier, retournez sur le navigateur et rafraichissez la page. Déjà un peu mieux non ?

####Ok mais mes accents sont toujours mal affichés C’est vrai, à la base, le html à été fait par et pour des anglo-saxons, et eux les accents…ils s’en foutent complètement. Il faut donc spécifier dans notre page que l’on souhaite utiliser des accents et autres caractères spéciaux.

Effacez toute votre page. Nous allons commencer les choses sérieuses. Copiez le code ci-dessous dans votre “index.html” :

<!doctype html>
<head>
        <meta charset="UTF-8">
        <title>Mon super site</title>
</head>
<body>
    <p>Loremé ipsum dolor sit amet, consectetur adipisicing elit. Ratione repudiandae, perferendis iure, aspernatur eligendi id minima pariatur natus labore modi, nesciunt molestias nisi minus assumenda nulla a, sintà distinctio commodi.</p>

    <p>Lorem ipsum dolor sit amet, consecteturô adipisicing elit. Ratione repudiandae, perferendis iure, aspernatur eligendi id minima pariatur natus labore modi, nesciunt molestias nisi minus assumenda nulla a, sint distinctio commodi.</p>
</body>
</html>

Waouh, beaucoup de choses que je ne comprends pas ! Effectivement, voici une structure de base “minimale” pour un fichier html correct !

<!doctype html> on déclare que l’on va utiliser le langage html

<head></head> Tout ce qui se trouve là dedans ne sera pas visible sur votre site, head pour tête, c’est ici que l’on va mettre tout ce qui est utile au site. Mise en forme, titre etc…

<title>Titre de mon site</title> Le titre du site qu’affichera votre navigateur préféré (donc pas Internet Explorer…)

<body> On mettra ici tout le contenu “visible” de notre site, ici, nos fameux paragraphes

On sauvegarde et on rafraîchi notre page et “ooooh miracle”, maintenant nos accents passent nickel ! C’est parce que l’on a spécifié dans le head qu’on utiliserai un jeu de caractère comprenant les accents, ici l’UTF-8 <meta charset="UTF-8">

Voici donc votre première “vraie” page. Vous pouvez vous entraîner en rajoutant ou supprimant de nouveaux paragraphes.

##Les liens

L’une des balises les plus importantes, la balise de lien <a href="">Ceci est un lien</a>

href ? Voilà un nouvel élément, après les balises, il faut retenir ceci, les balises peuvent avoir des attributs, ici l’attribu href nous permet de renseigner une adresse vers lequel le lien va pointer. Exemple : <a href="http://jvenerosy.fr">Site de bogoss</a> pointera vers l’un des meilleurs site du web.

Vous pouvez essayer de mettre des liens dans vos paragraphe !

Ok, maintenant on va créer un deuxième fichier (reprenez la structure minimale ci-dessus) que vous nommerez “toto.html”, vous pouvez changer son contenu de façon à avoir deux fichier distincts.

On va maintenant lier ces 2 pages par un lien. Pour ce faire, sur l’index, en bas de page (avant la fermeture du </body>), vous allez mettre un lien vers votre deuxième page de la façon suivante :

<a href="toto.html">Ma deuxième page</a>

Vous voyez en rafraichissant la page que le texte est devenu souligné, et que le pointeur de la souris change lorsque l’on passe dessus. Vous avez fait un lien !

Petit exercice : Faites un lien sur la deuxième page qui ramène vers “index.html”

##Insérer une image Les images se mettent avec la balise <img>. Pour mettre une image de façon correcte, il faut renseigner 2 attributs principaux, “src” qui nous dira vers quelle image pointer, et “alt”, qui sera un petit texte alternatif, au cas ou l’image ne s’affiche pas et qui aidera aussi à la lisibilité du code par les moteurs de recherche. Exemple :

<img src="http://placehold.it/150x150" alt="Une image de merde">

Vous pouvez donc essayer d’en mettre dans votre page.

Petit exercice Mettre un lien autour de votre image pour que l’on puisse voir la page google au clic sur cette dernière.

Fin du cours.

##Devoirs pour la semaine prochaine

###Créer un mini dictionnaire 1. Une page d’accueil avec une liste de 5 mots 2. Au clic sur un mot, on va sur la page qui contiendra en gros le mot, et en texte normal sa définition, une image illustrative, ainsi qu’un lien de retour vers l’accueil. 3. Contraintes : utiliser les bonnes balises pour le mot en gros et pour la liste (recherche sur le site MDN), les images ne doivent pas être téléchargées. 4. Uploadez vos fichier sur votre “repo” Github, dans un repertoire que vous nommerez “exercice1”