Introduction au wwwebdev
https://youtu.be/Qz68ytJH4cc
🎤
💬
✋
🎤
💬
✋
muted
🎤
💬
✋
chat ouvert
🎤
💬
✋
raise your hand
webdev freelance
teacher Ironhack
Bootcamp webdev
- fulltime / partime
- full-stack JS
- certifiante bac+3/4
🙋🏼♀️ je candidate
INSTALL
VScode
Chrome
C'est parti !
ironcv
Sur le bureau, créons un nouveau dossier
Glissons le dossier dans VScode
ironcv
🤚🏻
🦴 HTML
Voir la spec
1993
Tim Berners-Lee
Hyper
HTML
Text
HTML
Markup
HTML
Language
HTML
HyperText
💬 chat
Document A
Document B
Hyper Lien
Doc. A
Doc. B
Markup
HTML
💬 chat
texte
texte
<a>
</a>
texte
<a>
</a>
balise ouvrante
texte
<a>
</a>
balise fermante
texte
<a href>
</a>
attribut
texte
<a href="value">
</a>
valeur
<a href="http://example.org/doc">texte</a>
URL
<orpheline />
balise auto-fermante
Écrivons notre premier document HTML
👩🏽💻 code
Bonjour !
👩🏽💻 code
Bonjour !
👩🏽💻 code
↲
↲
↲
Bonjour !
👩🏽💻 code
<!DOCTYPE html>
Bonjour !
👩🏽💻 code
<!DOCTYPE html> <title>hello</title> Bonjour !
👩🏽💻 code
<!DOCTYPE html> <title>hello</title> Bonjour !
👩🏽💻 code
👩🏽💻 code
✅ This is HTML
👩🏽💻 code
hello.html
👩🏽💻 code
💾
Transformons ce fichier
HTML en page web
Format HTML
- DOCTYPE
- TITLE
Pages web
- d'autres
- choses...
Étape 0 : point de départ
<!DOCTYPE html> <title>hello</title> Bonjour !
hello.html
👩🏽💻 code
Étape 1/3 : <html> wrapper
<!DOCTYPE html> <html> <title>hello</title> Bonjour ! </html>
hello.html
👩🏽💻 code
hello.html
Étape 1/3 : <html> wrapper
<!DOCTYPE html> <html> <title>hello</title> Bonjour ! </html>
👩🏽💻 code
TAB
aparte : Indentation
<html>
<title>hello</title>
👩🏽💻 code
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>hello</title> Bonjour ! </html>
Étape 2/3 : jeu de caractères
hello.html
👩🏽💻 code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> Bonjour ! </body> </html>
Étape 3/3 : <head> & <body>
hello.html
👩🏽💻 code
<!DOCTYPE html> <html> <head> {💆🏻♀️Tête} </head> <body> {🧥Corps} </body> </html>
<!DOCTYPE html> <html> <head> {💆🏻♀️Tête} </head> <body> {🧥Corps} </body> </html>
Définitions (👁 invisible)
- charset
- title
- etc ...
<!DOCTYPE html> <html> <head> {💆🏻♀️Tête} </head> <body> {🧥Corps} </body> </html>
Contenu
<!DOCTYPE html> <html> <head> {💆🏻♀️Tête} </head> <body> {🧥Corps} </body> </html>
<head>
<body>
<html>
<!DOCTYPE html> <html> <head> {💆🏻♀️Tête} </head> <body> {🧥Corps} </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> Bonjour ! </body> </html>
Résultat final
hello.html
👩🏽💻 code
Les éléments de contenu web
Chiara PHILLIPS
graphics & web development
Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.
Expérience
Webdev bootcamp
Ironhack | Barcelone | 2019 – 2020
Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec
tempor risus nisi, quis bibendum nibh sollicitudin sed.
- Maecenas egestas ut eros ut tempor. Proin dapibus eget felis
- Phasellus convallis arcu sed dui faucibus : vel, semper
- Donec ex risus, faucibus ut porttitor
ART DIRECTION
Publicis | Paris | 2014 – 2019
Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.
- Curabitur porta viverra odio
- Proin varius justo
Contact
06 08 40 44 18 – cphillips@gmail.com – https://cphillips.me
Texte brut :
Texte brut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est velit, suscipit eget nisi nec, gravida dapibus justo. Sed pretium lacus arcu, vel fermentum odio maximus vitae. Vestibulum efficitur urna quis massa vulputate sollicitudin. Mauris at mauris tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer non fermentum tortor. In hac habitasse platea dictumst. Nulla a ipsum sagittis, tincidunt sapien volutpat, facilisis arcu. Nullam venenatis eu tellus vitae bibendum. Donec imperdiet odio est, a imperdiet velit placerat ut. Mauris turpis massa, mattis vitae nibh vitae, blandit molestie urna.
Paragraphe
<p>
Je suis un
paragraphe
</p>
Titres
<h1>Gros titre</h1>
<h2>titre niveau 2</h2>
<h3>titre niveau 3</h4>
<h4>titre niveau 4</h4>
<h5>titre niveau 5</h5>
<h6>titre niveau 6</h6>
Lien
<a href="http://google.com">
Rechercher
</a>
👆🏻
"click"
Image
<img src="dog.png"/>
Liste à puces
<ul> <li>element A</li> <li>element B</li> <li>element C</li> </ul>
Groupe
<div> <p>Lorem amet…</p> <p>Ipsum sit…</p> </div>
Et bien d'autres...
Objectifs / finalités
Donner du sens aux différents éléments de la page (cf. SEO)
🧠
🍱
Grouper / structurer le contenu (cf. styles)
à vous !
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
🤔
💬 chat
img
h1
p
p
h2
h3
p
p
ul
a
a
a
Chiara PHILLIPS
graphics & web development
Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.
Expérience
Webdev bootcamp
Ironhack | Barcelone | 2019 – 2020
Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec
tempor risus nisi, quis bibendum nibh sollicitudin sed.
- Maecenas egestas ut eros ut tempor. Proin dapibus eget felis
- Phasellus convallis arcu sed dui faucibus : vel, semper
- Donec ex risus, faucibus ut porttitor
ART DIRECTION
Publicis | Paris | 2014 – 2019
Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.
- Curabitur porta viverra odio
- Proin varius justo
Contact
06 08 40 44 18 – cphillips@gmail.com – https://cphillips.me
h2
👩🏽💻code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/backpackgirl_300x300.jpg" alt> <h1>Chiara PHILLIPS</h1> <p>graphics & web development</p> <p>Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.</p> <h2>Expérience</h2> <h3>Webdev bootcamp</h3> <p>Ironhack | Barcelone | 2019 – 2020</p> <p>Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec tempor risus nisi, quis bibendum nibh sollicitudin sed.</p> <ul> <li>Maecenas egestas ut eros ut tempor. Proin dapibus eget felis</li> <li>Phasellus convallis arcu sed dui faucibus : vel, semper</li> <li>Donec ex risus, faucibus ut porttitor</li> </ul> <h3>ART DIRECTION</h3> <p>Publicis | Paris | 2014 – 2019</p> <p>Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.</p> <ul> <li>Curabitur porta viverra odio</li> <li>Proin varius justo </li> </ul> <h2>Contact</h2> <a href="tel:0033608404419">06 08 40 44 18</a> – <a href="mailto:cphillips@gmail.com">cphillips@gmail.com</a> – <a href="https://cphillips.me">https://cphillips.me</a> </body> </html>
hello.html
💅🏻 CSS
Voir la spec
<center>
<font size="3" color="red">
<table width="500">
<td valign="middle">
<marquee>
<center>
<font size="3" color="red">
<table width="500">
<td valign="middle">
<marquee>
Contenu
!=
Présentation
☝🏻
<balise style="color:red;">
règle CSS
<balise style=" ">
color:red;
pretty.css
<balise style=" ">
pretty.css
feuille de styles
<link rel="stylesheet">
hello.html
pretty.css
Créons une feuille de style
👩🏽💻code
<link rel="stylesheet" href="pretty.css">
hello.html
Dans le <head> de notre page
👩🏽💻code
body { color:red; }
style.css
👩🏽💻code
body { color:red; }
style.css
sélecteur : qui
body { color:red; }
style.css
propriété : quoi
body { color:red; }
style.css
valeur : comment
p { color:blue; }
style.css
s'applique à tous les p
👩🏽💻code
Syntaxe générale
selecteur { propriété1:valeur; propriété2:valeur; }
selecteur1, selecteur2 { propriété:valeur; }
multi-sélecteurs
p, h1 { color:blue; }
style.css
tous les p ET tous les h1
👩🏽💻code
Quelques propriétés CSS
color
red
#ff00ff
rgba(255, 0, 255, 0.5)
font-weight
normal;
A
A
bold;
font-size
A
24px
text-align
left
center
right
text-transform
none
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
uppercase
LOREM IPSUM, DOLOR SIT AMET CONSECTETUR ADISPISICING ELIT.
font-family
sans-serif;
cursive;
text-decoration
underline;
none;
border
1px solid black;
3px dashed;
box model
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.
bordure (visible ou non)
contenu
Dessine moi une balise
padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.
padding : marge interne
padding : marge interne
p { padding:50px; }
padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.
margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae dolorum placerat quaerat recusandae error eaque fugit non Lorem adipiscing ipsum dolor sit amet aliquam metus mollis mauris volutpat, placerat tortor sit amet, mollis leo.
margin : marge externe
margin : marge externe
p { margin:20px; }
margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae dolorum placerat quaerat recusandae error eaque fugit non Lorem adipiscing ipsum dolor sit amet aliquam metus mollis mauris volutpat, placerat tortor sit amet, mollis leo.
Styles par défaut du navigateur
body : margin
h1 : margin-top margin-bottom font-size
p : margin-top margin-bottom
ul : padding-left list-style
a : color text-decoration
Sélecteurs
p
p, ul
#xp
.location
JavaScript
<script>
<!DOCTYPE html> <html lang="fr"> <head> {Tête} </head> <body> {Corps} <script></script> </body> </html>
👩🏽💻code
<script> alert("bonjour!") </script>
👩🏽💻code
Créons un fichier js
hello.html
style.css
program.js
👩🏽💻code
<script src="program.js"></script>
👩🏽💻code
alert("Bonjour !");
👩🏽💻code
Instruction1; Instruction2;
Instruction1; Instruction2;
alert("Bonjour !"); alert("Ça va ?");
👩🏽💻code
program.js
commentaires
/* je suis un commentaire multi-lignes */
👩🏽💻code
program.js
alert("salut"); // commentaire de fin de ligne
👩🏽💻code
variables
Instruction1; Instruction2;
🐟
var message = "hey"; ... alert(message);
🐟
🧠
"hey"
message
👩🏽💻code
program.js
Carte Google maps
voir la documentation
👩🏽💻code
Avant la fermeture du </body>
<script src="program.js"></script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyBpGpPE0UBhpXIil7Og5frlvJAncWi_jTU"></script>
hello.html
👩🏽💻code
Dans program.js
var mapElement = document.getElementById('map');
👩🏽💻code
Dans program.js
var mapElement = document.getElementById('map'); // Paramétrage de la carte var mapOptions = { zoom: 14, center: { lat: 48.8566, lng: 2.3522 } };
👩🏽💻code
var mapElement = document.getElementById('map');
// Paramétrage de la carte
var mapOptions = {
zoom: 14,
center: {
lat: 48.8566,
lng: 2.3522
}
};
// Création de la carte
function initMap() {
new google.maps.Map(mapElement, mapOptions);
}
Bonus : styles map option
THE END
des questions ?
Ironhack - Intro webdev
By Antoine BERNIER
Ironhack - Intro webdev
- 2,295