Crée ta première page web
comme un pro!
Présentation très sérieuse du
Techies Lab
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...
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
merci!
www.techieslab.org
Crée ta première page web comme un pro!
By Techies Lab ASBL
Crée ta première page web comme un pro!
Atelier dispensé dans le cadre de la Journée "Génération digitale" de l'Athénée Royal Jean Absil
