Devweb 101 : Les bases du développement web [Wiki GInfo]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Devweb 101 : Les bases du développement web ======

Ce premier tutoriel a pour but de donner les bases en développement web, en effectuant la création puis la mise en ligne de votre page perso Centrale.

** Compétences abordées : ** HTML, CSS, SFTP, Liens entre fichiers (absolu/relatif) 
===== Prérequis ===== 

Aucune connaissance technique n'est requise, si ce n'est savoir utiliser un minimum un ordinateur. Certains logiciels sont nécessaires, installez les avant de commencer.

==== Notre première page ====
Commençons par créer un fichier base.html (affichez les extensions de fichier sur windows si vous ne pouvez pas ajouter l'extension .html) dans lequel on placera ce contenu de base :

<file html /votredossier/index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
    </head>

    <body>
    	<!-- Un commentaire -->
        Bonjour.<br /> Ceci est mon contenu
    </body>
</html>
</file>

Si vous enregistrez le fichier et que vous ouvrez le fichier avec un navigateur, vous devriez voir ceci.

{{:formations:capture_d_e_cran_2017-10-26_a_23.32.55.png?200|}}

-> La ligne contenant **<!DOCTYPE html>** explique au navigateur que la page contient du html répondant à la norme HTML5

-> La balise **<head>** contient diverses informations qui ne seront pas vues par l'utilisateur directement, mais qui pourront être utile au navigateur pour interpréter la page; ici on peut voir que la balise contient le titre de la page et le codage du texte (UTF-8).

-> La balise **<body>** contient tout le contenu de la page. Vous aurez deviné que la balise **<br>** est une balise permettant de sauter une ligne, elle est dite de balise de structuration de texte.

==== Rajoutons un peu de style ====

=== Stylisons un texte ===
Nous allons maintenant voir comment rajouter un peu de style à notre texte. Modifiez le fichier précédent avec ce contenu et ouvrez le avec un navigateur :

<file html /votredossier/index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
        <style>
           .grand_centre {
               color: blue;
               font-family: verdana;
               font-size: 200%;
               text-align: center;
               }
        </style>
    </head>
 
    <body>
    	<!-- Un commentaire -->
        <div class="grand_centre">Bienvenue sur le CV très quali de Jean Loutre</div>
        <br />
        Ceci est un texte non stylisé. Il n'est entouré d'aucune balise
    </body>
</html>
</file>
Expliquons un peu ce qui a été fait ici :  on utilise ici la balise '<div>' pour entourer le texte que l'on veut "styliser". 
Cette balise est une balise assez générique très utilisée en html, elle permet des actions à appliquer à son contenu. Ici, on précise à la balise **div** une classe de style **grand_centre** que l'on a définie plus haut dans la section head et qui définie tous les styles qui seront appliqués au contenu de la balise <div> (à savoir notre texte). Dans notre cas, la classe de style précise de rendre le **texte plus gros (200%)**, que la police à utiliser est le **Verdana**, qu'il faut **centrer** le texte. et lui donner une **couleur bleue.**

=== Rajoutons une couleur de fond ===

On peut aussi rajouter une couleur de fond à notre site. Pour cela, on va appliquer un élément de style à notre balise **<body>** directement, avec la syntaxe suivante (si l'on ne met pas de "**.**" dans un élément de la balise <style> cela signifie qu'on applique le style directement à la balise dont le nom est indiqué, qui ici est **<body>**)

<file html /votredossier/index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
        <style>

            body{
                background-color:powderblue;
                }
 
           .grand_centre {
               color: blue;
               font-family: verdana;
               font-size: 200%;
               text-align: center;
               }
               
        </style>
    </head>
 
    <body>
    	<!-- Un commentaire -->
        <div class="grand_centre">Bienvenue sur le CV très quali de Jean Loutre</div>
        <br />
        Ceci est un texte non stylisé. Il n'est entouré d'aucune balise
    </body>
</html>
</file>

=== Séparons le style (.css) de la structure (.html) ===

Pour faire un code plus 'propre', c'est à dire plus lisible, il convient de séparer le css (c'est à dire ce qui est dans la borne **<style>** pour l'instant et ce qui est dans le fichier html. Pour cela vous aller devoir créer un fichier 'style.css' (tant qu'il finit par .css c'est bon) qui contient exactement ce que contenait la balise **<style>**. Dans notre exemple précédent cela donnerait alors :

<file css /votredossier/style.css>

body{
    background-color:powderblue;
    }
 
.grand_centre {
    color: blue;
    font-family: verdana;
    font-size: 200%;
    text-align: center;
              } 

</file>

et

<file html /votredossier/index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
        <link href="style.css" rel="stylesheet" />
    </head>
 
    <body>
    	<!-- Un commentaire -->
        <div class="grand_centre">Bienvenue sur le CV très quali de Jean Loutre</div>
        <br />
        Ceci est un texte non stylisé. Il n'est entouré d'aucune balise
    </body>
</html>
</file>

Remarque : On n'oubliera pas d'ajouter la balise **<link href="style.css" rel="stylesheet" />** entre les balises **<head>** qui permettra de faire le lien entre vos fichier html et css et donc de faire appel depuis le html au différents objets de style.css .
==== Les images ====

Nous allons ajouter une image de bienvenue à notre page et la centrer. Créez un dossier **images** dans votre dossier et placez y une image, (dans cet exemple nous utiliserons le portrait de Jean Loutre en guise d'image) nommée **portrait.jpg**

<file html /votredossier/index.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
        <style>
 
            body{
                background-color:powderblue;
                }
 
           .grand_centre {
               color: blue;
               font-family: verdana;
               font-size: 200%;
               text-align: center;
               }
               
            .image_centre {
               text-align:center;
               }
            
        </style>
    </head>
 
    <body>
    	<!-- Un commentaire -->
        <div class="grand_centre">Bienvenue sur le CV très quali de Jean Loutre</div>
        <br />
        <div class="image_centre">
        <img src="images/portrait.jpg" alt="Moi, président" style="width:200px;">
        </div>
        <br />
        Bienvenue sur mon CV. Vous trouverez sur cette page différentes informations concernant ma personne. 
        <br />
    </body>
</html>
</file>

**Expliquons ce qui a été fait ici :**

-> On a ajouté une balise **<img>** pour insérer une image située à l'adresse relative **images/portrait.jpg**

-> A cette image on fixe une largeur de 200 pixels. La hauteur étant automatiquement proportionnellement affichée.

-> On entoure l'image d'une balise **&lt;div>** pour lui appliquer un style qui la centrera

A ce point là, votre page devrait ressembler à ceci :

{{:formations:cvloutre.png?1700|}}

C'est évidemment un site très basique, codé avec du HTML/CSS de base. 


Si vous voulez, vous pouvez vous amuser à modifier le texte et les images, et à rajouter les éléments suivants où vous le souhaitez :

**Un lien :** 

<file html>
   <a href="https://www.centrale-marseille.fr/">Visitez le site de Centrale Marseille</a>
</file>
**Des titres :** 

<file html>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
</file>

**Une citation :**
<file html>
<p>Ma citation préférée <q>For a successful technology, reality must take precedence over public relations, for nature cannot be fooled.</q></p>
</file>

**Un tableau :**
<file html>
<table style="width:100%">
  <tr>
    <th>Prénom</th>
    <th>Nom</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jean Pierre</td>
    <td>Foucault</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jean</td>
    <td>Loutre</td> 
    <td>94</td>
  </tr>
</table>
</file>

==== TP CV SVP ====

<file html /votredossier/TP.html> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Un titre de page</title>
        <style>
 
            body{
                background-color:powderblue;
                padding-left: 10%;
                }
 
           .grand_centre {
               color: blue;
               font-family: verdana;
               font-size: 200%;
               text-align: center;
               }

           .gros_bout {
               color: black;
               font-family: verdana;
               font-size: 200%;
               }

            .gros_bout h2 {    /*Concerne toutes les balises h1 dans les balises de classe gros_bout*/
                color: black;
                font-family: verdana;
                font-size: 200%
            }

            .gros_bout li {    /*Concerne toutes les balises h1 dans les balises de classe gros_bout*/
                font-size: 101%
            }
 
            .image_centre {
               text-align:center;
               }
 
        </style>
    </head>
    <body>
        <div class="image_centre">
            <img src="loutreProfil.png" alt="Moi, président" style="width:200px;">
        </div>
        
        <div class="grand_centre">Bienvenue sur le CV très quali de Jean Loutre</div>

        <div class="gros_bout">
            <h2>Education</h2>
            <ul>
                <li><b>Centrale Marseille Engineering School</b></li>
                <li><b>Classe préparatoire, Saint Loutre (Paris)</b></li>
                <li><b>Obtention du Baccalauréat à Poudloutre, mention Bien</b></li>
            </ul>
        </div>

        <div class="gros_bout">
            <h2>Expérience Professionnelle</h2>
            <ul>
                <li><b>Mascotte du GInfo</b> <i>2015-2019</i></li>
                <li><b>Loutre de Rivière</b> <i>2010-2015</i><br /><i>Remontage des rivières et aide des saumons dans leur périple</i></li>
                <li><b>Loutre de Compagnie</b> <i>1995-2010</i><br /><i>Accompagnement de mon fidèle maître, érégie du GInfo à l'heure actuelle</i></li>
            </ul>
        </div>

        <div class="gros_bout">
            <h2>Compétences</h2>
            <ul>
                <li>Pipeau</li>
                <li>Python</li>
                <li>Piano</li>
            </ul>
        </div>
    </body>
</html>
</file>

Si vous le souhaitez, vous pouvez mettre votre page personnalisée en ligne sur votre page perso Centrale : avec FileZilla en SFTP en vous connectant sur **sas1.centrale-marseille.fr** avec vos identifiants Centrale et le port **22**, fichiers à placer dans **/users/promo2019/votre_nom_utilisateur/html**

Vous aurez alors accès à votre page à cette adresse : 
  https://prenom.nom.perso.centrale-marseille.fr/base.html

Vous aurez certainement remarqué que ce site n'est pas très beau et fait très "Années 2000", et c'est normal vu le temps que l'on y a passé (-20 minutes). Il existe aujourd'hui des outils puissants qui permettent de faire un site "beau" (ce qui en soit est très subjectif) en HTML5/CSS3 sans pour autant avoir à rédiger soit même toutes les classes CSS à la main. Après quelques MOOCS vous devriez être capable de faire un site que vous trouverez jolie (au bout de 30h environ) grâce au Framework Boostrap.
==== Ce qu'il faut retenir : ==== 

-> Le HTML/CSS sont des langages FrontEnd, c'est à dire dont le code est entièrement visible par le visiteur quand il va sur le site

-> Une page HTML est structurée grâce à des balises

-> Ces balises permettent d'appliquer à leur contenu des effets et actions, dont des styles

Lien vers la CheatSheet HTML/CSS : https://docs.google.com/document/d/1GpmQ4go-K1RyFJnJ8AvAbXUCowKHeRzL4HEhta_kmg0/edit?usp=sharing

==== Pour la suite ====
[[formations:devweb_2]]



----
Cette formation a été réalisée par [[user:llaurent|Léo LAURENT]], [[amenasria|Alexandre MENASRIA]] , [[user:rgrondin|Romain GRONDIN]] et [[user:pnahoum|Pierre-Oliver NAHOUM]].