Introduction au wwwebdev

Antoine Bernier

INSTALL

VScode

Chrome

https://code.visualstudio.com/download

https://www.google.com/chrome

webdev freelance

teacher Ironhack

Bootcamp webdev

🙋🏼‍♀️ je candidate

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

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

👆🏻

texte

<orpheline />

balise auto-fermante

<img src="photo.jpg" />

🖼

É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
  • balises...

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

Voir la spec HTML

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

pretty.css

👩🏽‍💻code

body {
  color:red;
}

pretty.css

sélecteur : qui

body {
  color:red;
}

pretty.css

propriété : quoi

body {
  color:red;
}

pretty.css

valeur : comment

Syntaxe générale

selecteur {
  propriété1:valeur;
  propriété2:valeur;
}

couleurs

red

#ff00ff

rgba(255, 0, 255, 0.5)

font-family

body {
  font-family:sans-serif;
}

pretty.css

👩🏽‍💻code

text-align

left

center

right

body {
  text-align:center;
}

pretty.css

👩🏽‍💻code

width

294px

img {
  width:240px;
}

pretty.css

👩🏽‍💻code

border-radius

100%

img {
  border-radius:100%;
}

pretty.css

👩🏽‍💻code

#xp

#xp {
  text-align:left;
}

pretty.css

👩🏽‍💻code

font-size

A

16px

body {
  font-size:36px;
}

pretty.css

👩🏽‍💻code

text-transform

none

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

uppercase

LOREM IPSUM, DOLOR SIT AMET CONSECTETUR ADISPISICING ELIT.

multi-sélecteurs

selecteur1,
selecteur2 {
  propriété:valeur;
}

h1,h2,h3 {
  text-transform:uppercase;
}

pretty.css

s'applique à tous les <h1> ET <h2> ET <h3>

👩🏽‍💻code

box model

border

1px solid black;

3px dashed;

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 : marge interne

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

body {
  padding:125px 150px;
}

pretty.css

👩🏽‍💻code

margin : marge externe

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.

h2 {
  margin-top:165px;
  margin-bottom:110px;
}

pretty.css

👩🏽‍💻code

Styles par défaut du navigateur

body : margin

h1 : margin-top / margin-bottom / font-weight / font-size

p : margin-top / margin-bottom

ul : padding-left / list-style

a : color / text-decoration

font-weight

normal;

A

A

bold;

h1 {
  font-weight:normal;
}

pretty.css

👩🏽‍💻code

text-decoration

underline;
none;

a {
  text-decoration:none;
  color:inherit;
}

pretty.css

👩🏽‍💻code

.location

.location {margin-top:0;}

h3 {
  margin-bottom:0;
  margin-top:100px;
}

pretty.css

👩🏽‍💻code

ul : padding-left

#tagline : color / margin-bottom

etc...

✨ Polish

 JavaScript

<script>

<!DOCTYPE html>
<html lang="fr">
  <head>
    {Tête}
  </head>
  <body>
    {Corps}

    <div id="map"></div>
    <script></script>
  </body>
</html>

👩🏽‍💻code

<script>
alert("bonjour!")
</script>

👩🏽‍💻code

Créons un fichier js

 hello.html

 pretty.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 : `mapOptions.styles`

Responsive

320x480

iphone

768x1024

ipad

1440x900

mba

800px

500px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <meta
      name="viewport"
      content="width=device-width"
    >
  </head>
  ...
</html>

hello.html

no 🔍 zoom

body {...}

@media (max-width:800px) {
  body {
    font-size:18px;
    padding-left:0; padding-right:0;
  }
}

pretty.css

media-queries

320x480

iphone

768x1024

ipad

1440x900

mba

@media (max-width) {}

320x480

iphone

768x1024

ipad

1440x900

mba

@media (min-width) {}

and so on...

img {}

h2 {}
#map {}

...

THE END

des questions ?

Made with Slides.com