coder sa première page web

Comment

et apprendre les bases d'HTML et CSS par la même occasion... ; )

Anne Collet

en quelques heures

Le code, c'est notre avenir...

 plan de notre atelier

  1. choix du sujet de notre page web
  2. esquisse (= design) de notre projet
  3. prise en main des outils
  4. premiers pas avec HTML & CSS
  5. grand plongeon dans le code
  6. déploiement de notre page sur un serveur web

Allons-y! :)

choix de notre sujet

un portfolio perso ?

un projet entrepreneurial ?

un projet associatif ?

ESquisse de notre projet

sur papier

sur papier

et/ou à l'aide d'un outil (gratuit) de prototypage rapide

... comme PoP par exemple

... ou Balsamiq

... ou encore Marvel

prise en main des outils

quels outils pour consulter une page web ?

1. Un ordinateur

un ordinateur ?

quels outils pour consulter une Page web ?

1. Un ordinateur

2. Une connexion (à) Internet

une connexion (à) internet ?

wired

wired

wireless

wireless

en Belgique ?

via un fournisseur d'accès à Internet (FAI)

fournisseur d'accès à Internet (FAI)*

* En anglais, on parle d'Internet Service Provider (ISP)

Internet (1969 - TCP/IP)

INTERconnected NETworks of computers

= LE réseau des réseaux d'ordinateurs interconnectés

Vint Cerf

Bob Kahn

Internet (1969 - TCP/IP)

= LE réseau des réseaux d'ordinateurs interconnectés

Vint Cerf

Bob Kahn

quels outils pour consulter une page web ?

1. Un ordinateur

2. Une connexion Internet

3. Un navigateur web

un navigateur web ?

www (1989 - HTTP)

the (World Wide) Web

= un gigantesque espace de ressources (documents écrits en HTML, images,...)
toutes identifiables par leur URL, reliées entre elles par des hyperliens
et accessibles grâce à un navigateur web (web browser en anglais)

Tim Berners-Lee

Robert Cailliau

Web  ≠ Internet

le World Wide Web est juste un service (parmi d'autres) qui s'appuie sur l'infrastructure d'Internet!

quels outils pour consulter une page web ?

1. Un ordinateur

2. Une connexion Internet

3. Un navigateur web

On est paré pour surfer sur le web ! *

* Autrement dit, naviguer d'une page web à une autre

mais quid si on veut coder une page web ??

quels outils pour coder une page web ?

1. Un ordinateur

2. Une connexion Internet

3. Un navigateur web

4. Un éditeur de texte

un éditeur de texte ?

quels outils pour coder un site web ?

1. Un ordinateur

2. Une connexion Internet

3. Un navigateur web

4. Un éditeur de texte

pour créer notre page web, installons donc :

  • un bon navigateur web,​
    comme Google Chrome par exemple
  • un éditeur de texte,
    comme Sublime Text 3 par exemple
  • un outil pour déployer
    notre page sur un serveur web,
    comme GitHub Desktop par exemple

notre boîte à outils (gratuits)

A nous les joies du code ! 

premiers pas avec html & css

Un site web = un dossier plein de fichiers et de sous-dossiers

Créons d'abord ce dossier, vide, sur notre bureau

puis glissons-le  dans notre éditeur de texte

(ici, Sublime Text 3)

éditeur de texte
Sublime Text 3

navigateur (et son inspecteur)
           Google Chrome

tous deux

ouverts

simultanément

Donnons-nous un cadre de travail

Dans ce dossier dédié à notre site web, nous allons
créer 3 fichiers, écrits dans les langages du web :

contenu (-> SEO)
+ structure

style

interactivité
+ usabilité

Hyper Text Markup Language

Cascading Style Sheet

JavaScript

5

3

ES7

Le fichier HTML est celui où nous allons écrire et structurer
le contenu que nous souhaitons afficher sur notre page web

Comment créer notre premier fichier HTML ?

  1. Dans l'éditeur de texte, cliquez-droit sur le nom_de_votre_dossier 
    et ajoutez-y un nouveau     fichier HTML dénommé index.html

  2. Pour visualiser l'évolution de votre page web, ouvrez ce fichier index.html dans votre navigateur à droite de l'écran

Comment faire pour savoir si mon document
a bien été sauvegardé dans Sublime Text ?

Quand ce petit rond apparaît, cela signifie qu'il faut sauvegarder nos dernières modifications, en appuyant sur les touches Ctrl (ou Cmd) + S.
Une petite croix apparaîtra alors à la place du petit rond! 

Comment rédiger un fichier HTML ?

HTML (Hyper Text Markup Language)
est un language de balisage. Version actuelle : HTML5.
 Grâce aux balises (tags), le contenu de notre page
sera structuré en différents blocs d'éléments.

SYNTAXE HTML

Ici, les deux balises html, ouvrante (<h1>) et fermante (</h1>), permettent de coincer (et donc de délimiter) notre titre principal

SYNTAXE HTML

SYNTAXE HTML

Ici, nous ajoutons à notre balise ouvrante <html>
un attribut lang, auquel nous donnons la valeur fr,
pour spécifier la langue du contenu de notre page web.

balises html 

<!DOCTYPE html> 

    <!-- DOCument TYPE definition,
    permet de préciser à notre navigateur que nous 
    utiliserons la dernière version d'HTML: HTML5 -->








<!-- end of file -->

Balises HTML 

<!DOCTYPE html>
<html lang="fr">


  <!-- your content (text, images,...) 
  and all the other html tags 
  to structure this content goes here -->


</html>
<!-- end of file -->

Comment pourrait-on organiser notre code ?

Il nous faut plus de balises...

BALISES HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>

    <!-- intelligence (meta-data) -->

  </head>
  <body>

    <!-- stuff to be displayed on your web page -->

  </body>
</html>
<!-- end of file -->

Séparons notre HTML en 2 grandes parties :
  <head> pour toutes les instructions à donner au navigateur
<body> pour tout le contenu à afficher sur notre page web

BALISES HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- to display properly the special characters -->
    <meta charset="utf-8"/>
    <!-- text appearing in the tab + used by Google in its search results -->
    <title>Mon premier site</title> <!-- 70 characters max + very important for SEO -->
    <!-- description appearing in Google search results + 215 characters max -->
    <meta name="description" content="An example of a basic webpage."> 
  </head>
  <body>

    <!-- stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

Entre les balises <head>,
figureront les instructions pour le navigateur

PS : pour créer le squelette de ma page en un clic :  ! + tab

(grâce au plugin Emmet dans SublimeText3)

BALISES HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    ...
    <meta property:"og:title" content:"Le Wagon - The Coding Bootcamp ...">
    <meta property:"og:image" content:"facebook-card.jpg">
    <meta property:"og:description" content:"Le Wagon is a ...">
  </head>
  <body>

    <!-- stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

BALISES HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    ...
  </head>
  <body>
    <!-- main title of the web page -->
    <h1>Bienvenue!</h1> <!-- 55 characters max + very important for SEO -->
    <!-- paragraph -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Eveniet repellat laborum quis, vero aspernatur cumque!
    </p>
  </body>
</html>
<!-- end of file -->

Entre les balises <body>,
figureront les éléments de contenu à afficher pour nos visiteurs

BALISES HTML 

<h1>[...]</h1>  <!-- Only one per page! SEO important -->

<h2>[...]</h2>

<h3>[...]</h3>

<h4>[...]</h4>

<h5>[...]</h5>

<h6>[...]</h6>
titres

BALISES HTML 

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Veritatis laboriosam mollitia autem at ab omnis iure quis
  asperiores inventore eos nam aut iusto officiis deserunt
  nihil, sequi tempore impedit quae?
</p>
paragraphes

BALISES HTML 

<p>
    You can emphasize <em>some words</em>,
    and even <strong>more if needed</strong>
</p>
emphase

BALISES HTML 

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Butter</li>
</ul>

<h2>World Cup 2014</h2>
<ol>
  <li>Germany</li>
  <li>Argentina</li>
  <li>Netherlands</li>
  <li>Brazil</li>
</ol>
listes
<img src="logo.png" alt="Le Wagon logo"/>
images

BALISES HTML 

<a href="https://www.lewagon.com/" target="_blank">Le Wagon</a>
liens

BALISES HTML

ce code, une fois lu et affiché par notre navigateur, deviendra :
Le Wagon

QUIZZ:

  • Quel est le nom de cet élément HTML?
  • Quel est le contenu de cet élément?
  • Quels sont ses 2 attributs (nom and valeur)?

BaliseS HTML 

<form name="input" action="/subscribe" method="post">

  input elements

</form>
formulaires

BALISES HTML 

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname">

</form>
input - type: text

BALISES HTML 

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female

</form>
input - type: radio

BALISES HTML 

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car

</form>
input - type: checkbox

BALISES HTML 

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>
input - type: submit

PS: pour être en mesure de traiter et de sauvegarder ces inputs,
nous devrons configurer nous-mêmes le serveur web
et coder le back-end de notre application web
ou alors utiliser un outil comme MailChimp! ;-)

BALISES HTML 

ressources-clefs

HTML ​Cheat Sheet 

HTML5 Doctor

HTML5 Element Index

Le fichier CSS est celui où nous définirons
les propriétés de style de nos éléments HTML

CSS (Cascading Style Sheet)
est un language de balisage. Version actuelle : CSS3.
 Grâce aux sélecteurs et aux propriétés CSS,
nous pourrons styliser à l'envi les éléments du document HTML.

L'effet de css

A quoi ressemblerait le site TechiesLab.org sans l'apport du langage CSS ?

L'Effet DE CSS

Neutralisons temporairement l'impact de CSS
en supprimant la balise <head> de notre fichier html, à l'aide de l'inspecteur de notre navigateur

L'Effet DE CSS

Voici le résultat ! Plutôt impressionnant, n'est-ce pas ? ; )

Comment ajouter un fichier CSS
pour donner du style à notre page web ?

Dans votre éditeur de texte, cliquez-droit sur le nom_de_votre_dossier 
et ajoutez-y un nouveau fichier CSS dénommé style.css

Pour faire la liaison entre nos deux fichiers
(index.html et style.css), que nous manque-t-il ?

lien html-css

Pour que notre feuille de style CSS soit prise en compte,
ajoutons un lien vers elle depuis l'en-tête de notre document HTML

Quelle syntaxe utiliser pour rédiger un fichier CSS ?

Syntaxe css

Syntaxe css

Syntaxe css

propriétés css 

/* syntax 1 : color name in English */

body {
  color: orange;
}
color

PROPRIÉTÉS CSS 

/* syntax 2 : hexadecimal color reference */

body {
  color: #FFA500;
}
color

PROPRIÉTÉS CSS 

/* syntax 3-a : RGB color reference */

body {
  color: rgb(255, 165, 0);
}
color

PROPRIÉTÉS CSS 

/* syntax 3-b : RGBA color & opacity reference */

body {
  color: rgba(255, 165, 0, 0.8);
}
color

RGBA has a 4th parameter: opacity 

(which may vary between 0 and 1)

PROPRIÉTÉS CSS 

color tools

PROPRIÉTÉS CSS 

text color vs
background color

PROPRIÉTÉS CSS 

background image

PROPRIÉTÉS CSS 

fonts - family (1)

PROPRIÉTÉS CSS 

fonts - family (2)

PROPRIÉTÉS CSS 

fonts - family (3)

PROPRIÉTÉS CSS 

fonts - size & spacing

PROPRIÉTÉS CSS 

fonts - color

PROPRIÉTÉS CSS 

fonts - decoration

PROPRIÉTÉS CSS 

fonts - alignment

PROPRIÉTÉS CSS 

fonts tools/services
  • Choose nice free fonts with Google Fonts
  • You can identify any web font with the Fontface Ninja plugin
  • Good practices: 3 fonts max per website/webpage
  • Use sans-serif fonts (such as, Open-Sans for basic text,  
    PillsGothic for h1, h2, Museo-Slab for secondary titles (h3, h4))

resources pour icônes 

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
textual icons

Font Awesome

  • A font for icons (hence, to change their color, size, etc. => use CSS!)
  • Paste the following code into the <head> section of your HTML file
  • Choose icons from the Font Awesome set
  • Integrate each of them in your HTML file, where you want each of them
    to be displayed, by adding the <i>...</i> tag provided by Font Awesome
<h1><i class="fa fa-cutlery"></i> MY RESTAURANT</h1>

RESOURCES POUR ICÔNES 

graphical icons

NucleoApp, The Noun Project, Illustrio

You can get these icons in :

  • PNG format = with a transparent background
  • SVG format = perfectly resizable and customisable! 

RESOURCES POUR Images

Be careful about the picture/file's size :
too small, it will be blurred;
too big, it will slow down your page load!

=> to compress your pictures: ImageOptim 

Select your pictures according to specific criteria (free of rights, landscape, min width 1024 px,...) :

PROPRIÉTÉS CSS 

picture size & shape

Tout site web moderne...

BALISES HTML

... est structuré à l'aide de balises <div>

BALISES HTML

Vous devez structurer votre code HTML avec des balises <div>,  
pour regrouper les contenus qui font sens ensemble 

div

BALISES HTML

PROPRIÉTÉS CSS 

the box model

PROPRIÉTÉS CSS 

the box model

PROPRIÉTÉS CSS 

raccourcis de syntaxe

PROPRIÉTÉS CSS 

div{
  border-top: 1px solid red;
  border-right: 2px dotted black;
  border-bottom: 1px dashed green;
  border-left: 2px dotted black;
}
borders
div{
  background: white;
  border: 1px solid lightgrey;
  padding: 20px;
  margin: 30px;
}

vous pouvez rendre le box model plus visible en ajoutant des propriétés CSS à vos <div>

PROPRIÉTÉS CSS 

the box model

PROPRIÉTÉS CSS 

box-shadow

nommer ses éléments html

Pour séléctionner uniquement :

  • un élément html spécifique et unique -> id attribute
  • un set d'éléments html spécifiques -> class attribute
attributs id et class

dans votre fichier HTML

attributs id et class

nommer ses éléments html 

1  #logo {
2     width: 30%;
3  }
4  
5  .staff {
6      border-radius: 50%;
7  }

dans votre fichier CSS

attributs id et class

nommer ses éléments html

exemple 

attributs id et class

nommer ses éléments html

rendre SA page web fully responsive

= dont le design s'adapte à toutes les tailles d'écran

A l'aide d'un framework FRONT-END 

tel que Bootstrap par exemple

documentation Bootstrap

Pour charger un bon canevas de départ :
https://github.com/lewagon/bootstrap-boilerplate

  • Elementary CSS (typos, images, buttons, forms)
  • Advanced Components (navbar, panels)
  • Animation JavaScript (dropdown, modal,..)

 sémantique bootstrap

 class text

 class button

 class list

 class image

 grille bootstrap

Bootstrap inclut un système de grille, fluide, mobile-first,  
basé sur une division de la page en 12 unités élémentaires,
permettant de rendre notre page 100% responsive

 grille bootstrap

class="container"

 grille bootstrap

class="row"

 grille bootstrap

class="row"

<div class="container">
  <div class="row">
    <div class="col-md-1"></div>
    ... (x 12)
  </div>
  <div class="row">
    <div class="col-md-3"></div>
    ... (x 4)
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    ... (x 3)
  </div>
</div>

 grille bootstrap

  • xs: extra small devices (phones < 768px)

  • sm: small devices (tablets > 768px)

  • md: medium devices (> 992px)

  • lg: large devices (desktops > 1200px)

Tailles d'écran

Consolider vos connaissances

à l'aide de ces tutos gratuits en ligne

grand plongeon dans le code

installer un thème FRONT-END

paramétrable & responsive à 100%
sélectionné & téléchargé
sur Start Bootstrap

tel que Stylish Portfolio

paramétrable & responsive à 100%
sélectionné & téléchargé
sur WrapBootstrap

installer un thème FRONT-END

fichiers ouverts dans notre éditeur
& affichés dans notre navigateur

installer un thème FRONT-END

intégrer des web services

sélectionner les meilleurs
ceux déjà largement testés & reconnus
pour leur facilité & fonctionnalité

Stripe (payment)

Google Map (maps)

MailChimp (e-mailing)

MailChimp

(pour collecter les inputs de nos visiteurs)

intégrer des web services

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="http://8thcolor.us4.list-manage.com/subscribe/post?u=506ea88e9f457f1a4960a3310&id=868a950c07" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    ...
  </form>
</div>

Copy & paste a snippet of code from MailChimp

onto your HTML file, to call & consume the MailChimp API

A form...

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
  <label for="mce-EMAIL">Email Address </label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>

with minimal fields...

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>

error messages...

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
  <input type="text" name="b_506ea88e9f457f1a4960a3310_868a950c07" tabindex="-1" value="">
</div>

bot signup protection...

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

<div class="clear">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

and the action.

intégrer des web services

MailChimp

(pour collecter les inputs de nos visiteurs)

Google Maps

(pour insérer une carte personnalisée sur notre page web)

intégrer des web services

tuto qui reprend tout, étape par étape ici

<!--
    You need to include this script on any page that has a Google Map.
    When using Google Maps on your own site you MUST signup for your own API key at:
        https://developers.google.com/maps/documentation/javascript/tutorial#api_key
    After your sign up replace the key in the URL below or paste in the new script tag that Google provides.
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCukr6vo0mkusgzjemMGVI83TDUo-oqpzw&sensor=false"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 15,

            disableDefaultUI: true,
            panControl: false,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            scrollwheel: false,


            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(48.864848, 2.379853),

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"featureType":"all","stylers":[{"saturation":0},{"hue":"#e7ecf0"}]},{"featureType":"road","stylers":[{"saturation":-70}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"simplified"},{"saturation":-60}]}]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        var myMarker = new google.maps.Marker({
          position: new google.maps.LatLng(48.864848, 2.379853),
          map: map
        });
    }
</script>

Google Maps

(pour insérer une carte personnalisée sur notre page web)

intégrer des web services

Google Maps

(pour insérer une carte personnalisée sur notre page web)

Le style de la carte aussi peut être modifié
-> Google Maps Style
-> Snazzy Maps

intégrer des web services

Olark

(pour offrir un support-utilisateurs, en live, via chat)

intégrer des web services

Olark

(pour offrir un support-utilisateurs, en live, via chat)

Suivez notre tutorial pour implémenter Olark

intégrer des web services

Déploiement sur le web

déployer mon site ? Où ça ?

sur un ordinateur ultra-puissant et connecté non-stop à Internet : un serveur

comprendre l'architecture client-serveur

site web statique

 (aka site vitrine)

+ browser

http Request/ http response

dynamic website

 (aka web application)

+ browser

Page built

chaque page web a une Adresse unique

Utiliser les serveurs de GitHub Pages

qui hébergent gratuitement des sites web statiques

(pour la marche à suivre, suivez notre tutoriel)

quel serveur web choisir pour mon site ?

Comment cHANGER mON NOM DE DOMAINE ?

Suivez notre tutoriel !

Installez Google Analytics

pour suivre ce qui s'y passe en temps réel

Pour la marche à suivre, suivez notre tutoriel

QUEL TRAFIC SUR MON SITE ?

QUELLES INFORMATIONS SERONT COLLECTÉES ?

  • ​Les pays d'origine de mes visiteurs
  • Les infos recherchées par mes visiteurs sur mon site
  • Les éléments sur lesquels ils cliquent le plus
  • Les contenus les plus et les moins lus
  • Le moment et l'endroit sur mon site où mes visiteurs le quittent (taux de rebond)
  • Le nombre de visites depuis des appareils portables (tablettes, smartphones)

BRAVO ! Et Merci. 

See you soon !

Twitter - Meetup - Facebook 

www.lewagon.org

Tutoriel gratuit en ligne :

Made with Slides.com