Introduction au wwwebdev

Antoine Bernier

https://youtu.be/Qz68ytJH4cc 

🎤

💬

✋

🎤

💬

✋

muted

🎤

💬

✋

chat ouvert

🎤

💬

✋

raise your hand

webdev freelance

teacher Ironhack

Bootcamp webdev

🙋🏼‍♀️ je candidate

INSTALL

VScode

Chrome

https://code.visualstudio.com/download

https://www.google.com/chrome

open in figma

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

https://www.w3.org/People/Berners-Lee/

Hyper

HTML

Text

HTML

Markup

HTML

Language

HTML

Hyper
Text
Markup
Language

HyperText

💬 chat

Document A

APPRENDRE v. tr. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Document B

MATHÉMATIQUES n.f. [58] Science qui étudie par le moyen du raisonnement déductif les propriétés d'êtres abstraits (nombres, figures géométriques, fonctions, espaces, etc.) ainsi que les relations qui s'établissent entre eux.

Hyper Lien

APPRENDRE v.t. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Doc. A

Doc. B

MATHÉMATIQUES n.f. [58] Science qui étudie par le moyen du raisonnement déductif les propriétés d'êtres abstraits (nombres, figures géométriques, fonctions, espaces, etc.) ainsi que les relations qui s'établissent entre eux.

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

html5.validator.nu

👩🏽‍💻 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 :

Image avatar :
https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/backpackgirl_300x300.jpg

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);
}

https://snazzymaps.com/style/80/cool-grey

Bonus : styles map option

THE END

des questions ?

Ironhack - Intro webdev

By Antoine BERNIER

Made with Slides.com

Ironhack - Intro webdev

  • 2,311

More from Antoine BERNIER