====== 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 : Un titre de page Bonjour.
Ceci est mon contenu 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 **** explique au navigateur que la page contient du html répondant à la norme HTML5 -> La balise **** 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 **** contient tout le contenu de la page. Vous aurez deviné que la balise **
** 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 : Un titre de page
Bienvenue sur le CV très quali de Jean Loutre

Ceci est un texte non stylisé. Il n'est entouré d'aucune balise Expliquons un peu ce qui a été fait ici : on utilise ici la balise '
' 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
(à 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 **** directement, avec la syntaxe suivante (si l'on ne met pas de "**.**" dans un élément de la balise
Bienvenue sur le CV très quali de Jean Loutre

Ceci est un texte non stylisé. Il n'est entouré d'aucune balise === 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 **
Bienvenue sur le CV très quali de Jean Loutre

Moi, président

Bienvenue sur mon CV. Vous trouverez sur cette page différentes informations concernant ma personne.
**Expliquons ce qui a été fait ici :** -> On a ajouté une balise **** 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 **<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 :** Visitez le site de Centrale Marseille **Des titres :**

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6
 **Une citation :**

Ma citation préférée For a successful technology, reality must take precedence over public relations, for nature cannot be fooled.

 **Un tableau :**
Prénom Nom Age
Jean Pierre Foucault 50
Jean Loutre 94
==== TP CV SVP ==== Un titre de page
Moi, président
Bienvenue sur le CV très quali de Jean Loutre

Education

  • Centrale Marseille Engineering School
  • Classe préparatoire, Saint Loutre (Paris)
  • Obtention du Baccalauréat à Poudloutre, mention Bien

Expérience Professionnelle

  • Mascotte du GInfo 2015-2019
  • Loutre de Rivière 2010-2015
    Remontage des rivières et aide des saumons dans leur périple
  • Loutre de Compagnie 1995-2010
    Accompagnement de mon fidèle maître, érégie du GInfo à l'heure actuelle

Compétences

  • Pipeau
  • Python
  • Piano
 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]].