Installer l'éditeur de texte Sublime Text 3

Ouvrir la page www.sublimetext.com
Aller à l'onglet Download
Télécharger les fichiers selon votre système d'exploitation (Windows, Mac, Ubuntu)
Installer l'éditeur de texte

Qui sommes nous?

Anne

Margo

Comment fonctionne un site web?

un ordinateur

internet

différentes façons de se connecter

un navigateur

une adresse

le message est envoyé à...

un serveur

centres de données à sT Ghislain, en bElgique

Quelle réponse du serveur?

langages utilisés

pour communiquer avec le navigateur

contenu et structure

style et apparence

animations

Requête http / réponse http

+ browser

Avant de coder,

une petite mise en forme

, Virgule

' apostrophe

. point

: Deux points

* astérisque

- tiret

Un jour, j'ai Vu un chAt.
Il m'a dit: *je suis Bob-le-chat*.

"" gants de toilette

? point d'interrogation

! point d'exclamation

"Ah bon? C'est sympa!"
(Moi j'ai pensé, Bob = _bizzare_!)

( ) parenthèses

= égal

_ tiret Bas

< inférieur

> supérieur

@ arrobe

/ barre oblique

</ @ mais non >

| barre verticale

{ } accolade

# dièse

{ si | si | compose le #123 }

premiers pas avec HTML & CSS

Un site web = un dossier plein de fichiers

1. Sur notre bureau (desktop), créons un dossier intitulé, par exemple, mon_premier_site

2. Ouvrons le dossier dans l'éditeur de texte (Sublime Text)

Dans l'éditeur de texte, cliquons-droit sur le nom de notre dossier
et ajoutons-y un nouveau fichier HTML intitulé index.html

Comment rédiger un fichier HTML ?

On écrit n'importe quoi!
C'est drôle, non?

Voici ma liste de choses à faire:
    - mettre des belles couleurs;
    - rajouter des images;
    - une vidéo?

Une petite croix apparaîtra alors à la place du petit rond!

Sauvegardons nos modifications en appuyant sur les touches

Ctrl (ou Cmd) + S.

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

On a besoin de balises HTML

Balise PARAGRAPHE

<p>On écrit n'importe quoi!</p>

<p>C'est drôle, non?</p>

<p>Voici ma liste de choses à faire:
    - mettre des belles couleurs;
    - rajouter des images;
    - une vidéo?</p>

Organisons notre code

squelette html

<!DOCTYPE html>
<html>

  <head>



  </head>

  <body>
    <p>On écrit n'importe quoi!</p>
    
    <p>C'est drôle, non?</p>
    
    <p>Voici ma liste de choses à faire:
        - mettre des belles couleurs;
        - rajouter des images;
        - une vidéo?</p>
  </body>

</html>

balise meta et commentaires

<!DOCTYPE html>
<html>

  <head>
    <title>Site de Bob le chat</title> 
    <!-- onglet et recherches Google -->
    
    <meta charset="utf-8"/> 
    <!-- pour les caractères spéciaux -->


  </head>

  <body>
    <p>On écrit n'importe quoi!</p>
    
    <p>C'est drôle, non?</p>
    
    <p>Voici ma liste de choses à faire:
        - mettre des belles couleurs;
        - rajouter des images;
        - une vidéo?</p>
  </body>

</html>

ajoutons un lien vers une autre page

<a href="https://www.techieslab.org" target="_blank">Techies Lab</a>

<a>

ajoutons un titre

  <body>
    <h1>On écrit n'importe quoi!</h1>
    
    <p>C'est drôle, non?</p>
    
    <p>Voici ma liste de choses à faire:
        - mettre des belles couleurs;
        - rajouter des images;
        - une vidéo?</p>
  </body>

<h1>

Ajoutons une liste

  <body>
    <h1>On écrit n'importe quoi!</h1>
    
    <p>C'est drôle, non?</p>

    <p>Voici ma liste de choses à faire:</p>
    <ul>
        <li>mettre des belles couleurs;</li>
        <li>rajouter des images;</li>
        <li>une vidéo?</li>
    </ul>
  </body>

<ul> <li>

ajoutons une image

<img src="logo.png" alt="Le Wagon logo"/>

<img src="http://jolabistouille.j.o.pic.centerblog.net/45777f7a.png" alt="Chat">

<img>

ajoutons une video

<iframe src="https://www.youtube.com/embed/oqNKD9YVe4U" width="560" height="315"></iframe>

<iframe>

pour s'aider...

HTML Cheat Sheet

HTML5 Doctor

W3Schools

le pouvoir du css

utiliser l'inspecteur

Créons un fichier CSS intitulé style.css

Créons un lien de notre fichier HTML vers notre fichier CSS

syntaxe css

changeons la couleur du texte

body {
  color: orange;
}

color

/* syntaxe alternative : référence hexadécimale  */

body {
  color: #FFA500;
}

Changeons la police du texte

body {
    color: orange;
    font-family: 'Jim Nightshade', cursive;   
}

https://fonts.google.com/

<link href="https://fonts.googleapis.com/css?family=Jim+Nightshade" rel="stylesheet">

changeons la couleur de fond

body {
    color: orange;
    background-color: yellow;
}

background-color

Comment changer seulement la couleur du titre?

body {
    color: orange;
    background-color: yellow;
}

h1 {
    color: blue;
}

Une image de fond?

background image

PRêt pour du lourd ?

divisions

<div>

div{
  border-top: 1px solid red;
  border-right: 2px dotted black;
  border-bottom: 1px dashed green;
  border-left: 2px dotted black;
}

bordures

Ajoutons des Bordures

<body>
    <h1>On écrit n'importe quoi!</h1>
  
    <div>
        <p>C'est drôle, non?</p>
    </div>
  
    <p>Voici ma liste de choses à faire:</p>
      
    <ul>  
        <li>mettre des belles couleurs;</li>
        <li>rajouter des images;</li>
        <li>une vidéo?</li>
    </ul>
</body>

index.html

style.css

le modèle de la boîte

divisions et modèle de la boîte

div{
  background: white;
  border: 1px solid lightgrey;
  padding: 20px;
  margin: 30px;
}

mix & Match

Pour les VRAIS PROS

id et class

dans le fichier HTML

id et class

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

dans le fichier CSS

Crée ta première page web

comme un pro!