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

wifi: CoStationCity

password: BeMoreCurious

Anne

Margo

Qui sommes-nous?

Déroulement de l'atelier

14h Accueil + installation de Sublime Texte

14h20 INTRO

14h50 Mini pause

15h HTML

15h40 Goûter

16h00 HTML + CSS

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

Un jour, j'ai vu un chat.

"" guillemets

? point d'interrogation

! point d'exclamation

"Ah bon? 
C'est supercalifragilisticexpialidocious!"

: Deux points

* astérisque

- tiret

Il m'a dit: *Je suis Bob-le-chat*.

( ) parenthèses

> supérieur

= égal

_ tiret Bas

(Moi j'ai pensé > Bob = _bizzare_!)

< infé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. Glissons ce 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

OuPS!

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 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 un lien vers une autre page

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

<a>

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...

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 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 quelques notions avancées ?

divisions

<div>

le modèle de la boîte

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

bordures

divisions 
et modèle de la boîte

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

prêt pour des notions vraiment avancées ?

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

Ma première page web!