autorisation donnée par l’auteur d’utiliser, d’étudier, de modifier et de diffuser son œuvre, dans la mesure où cette même autorisation reste préservée
Prénom - NOM
Quel est votre niveau en développement Web ?
Que souhaitez-vous apprendre aujourd’hui ?
Nous rejetons les rois, les présidents et le vote. Nous croyons en un consensus approximatif et un code qui fonctionne
IP, TCP, SMTP, FTP, …
pour être validé, tout nouveau protocole doit proposer une implémentation libre et ouverte !
lecture non linéaire ( Vs livre)
⬇️
1991 invention du World Wild Web, communément WWW ou W3
1994 création du Consortium, le W3C
Unified Resource Locator
Structure classique : DOCTYPE, html, head, title, body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page HTML</title>
</head>
<body>
partie visible
</body>
</html>
HyperText Markup Language = Langage à balises
<head> utile pour définir des métadonnées
la référence du W3C
spécial développeur
balise ouvrante <div>...
balise fermante ...</div>
balise orpheline ouvrante et fermante <br/>
<br>imbrication, l’ordre est important
| BON ✅ | <div><span> contenu </span></div> |
| MAUVAIS 💣 | <div><span> contenu </div></span> |
peut contenir des attributs de balise séparés par des espaces ou non
<... attr1='v1 v2' attr2='v3' attr3>
<!-- commentaire -->div, p, spanh1, h2, h3, h4, h5, h6ol, ul, contenant plusieurs listyle, class, hrefa et son attribut href <a href='https://www.crealise.io'>
École
Digitale
Créalise
</a>
Rq: les espaces en trop sont réduits à un seul !
<a href='https://fr.wikipedia.org/wiki/Hyperlien#World_Wide_Web'>
Rubrique WWW dans Wikipedia
</a>
⬇️
Télécharger Version MacOs 🔗
Télécharger Version Win64 🔗
* Créez un premier fichier (index.html)
* Formatez le document
* Dans Preferences/Settings, activez le champ `format on save`
Live Server Ctl+P
ext install ritwickdey.LiveServer
* Démarrez avec `Go Live`
* Vérifiez que vos modifications sont prises en compte
Modifier votre page HTML (index.html)
* dans <head>, modifiez la balise <title> pour que la page s'appelle "CVThèque"
* puis dans <body>
* écrivez un titre de niveau 1 avec <h1>
* écrivez une liste <ul> de 1 ou 2 élèves avec la balise <li>
* faites un hyperlien vers une deuxième page...([votre_prénom].html)
Faire une deuxième page HTML ([votre_prénom].html)
* nom de la page "CV de [prénom] [nom]" => remplacer avec votre prénom...
* qui contient un lien vers la CVThèque
* vérifier que le lien permet de naviguer entre les 2 pages
<section class='identité'>
<h2>[Prénom NOM]</h2>
<h3>[age]</h3>
<img alt='photo' src='...' />
</section>
...
<section class='contact'>
<p class='email'>
<span>mel</span>
<a href='mailto:...'>...</a>
</p>
<p class='telephone'>
<span>tel</span>
<a href='tel:...'>...</a>
</p>
</section>
<section class='accroche'>
Mon rêve est ...
</section>
...
Attention: HTML et CSS sont 2 langages complétement différents !
style<... style="prop1: valeur1 valeur2; prop2: valeur3">
;exemple
<section style="color: Blue; font-size:2em; ">
[...]
</section>
style
<head>
<style>
sélecteur1 {
prop1: valeur1 valeur2;
prop2: valeur3;
}
</style>
...
</head>
<body>
...
h1 {...}section {...}.
.identité {...}section.identité {...}section.contact span.email {...}Attention: dans un sélecteur le caractère espace définit une imbrication !!!
... style="border: 1em solid black"
... style="margin: 1em 1.5em 1.5em 2em"
... style="margin: 1em"
... style="margin-top: 1em; margin-bottom: 2em"
Sur la page de votre CV, ajouter du style
* le titre CV => 2 x plus grand que d'habitude
* pt, px, em => préférez `em`
* définir une bordure pour chaque section
* changer la couleur de fond `background-color`
images/images/email.pngimages/telephone.pngbackground: url(images/email.png) no-repeat left /2em;
padding: .5em 0 .5em 2.5em;
background: url(images/telephone.png) no-repeat left /2em;
padding: .5em 0 .5em 2.5em;
<style><head>
<style>
.identité { ... }
.accroche { ... }
</style>
</head>
<body>
<section class="identité">...</section>
<section class="accroche">...</section>
</body>
<style>...</style> dans un fichier distinct main.cssmain.css grace à la balise <link>
<link
r...="..."
h...="..."
>
changement majeur pour positionner des élements de page, avant on utilisait
floatet c’était difficile
Jouer à https://flexboxfroggy.com/
* intégrer FLEX à votre CV
* vérifier que le CV est lisible en mode responsive
* notion de conteneur et de contenus
* définir flex au niveau du conteneur
* ne pas hésiter a rajouter des <div> ou des <span>
pour faciliter les styles
En se basant sur une recherche active sur Internet, vous devez mettre en commun vos connaissances, puis présenter à l’oral à l’ensemble de la classe, comme si vous êtiez un expert du sujet.
- 20mn de recherche active
- 10mn de mise en commun avec son binôme (ou trinôme)
- 5 mn de présentation à l’oral
- Ne pas oublier de parler des MOTS CLEFS !
* CERN
* La neutralité du Net
* Solid
* données personnelles
* protocole de communication
* méthodes HTTP
* codes d'erreur HTTP
* HTTPS
* TLS
* la guerre des navigateurs
* Internet Explorer Vs Netscape
* Firefox
* Google Chrome
* Chromium
* indexation
* robot aspirateur
* Altavista
* Google
* PageRank
* smartphone, tablette
* @media
* Flex
* outil de vérification WebDeveloper
* Apache
* NGinx
* NodeJS
* RubyOnRails
Question subsidiaire
Qui est le premier programmeur ?
algorithme de calcul des nombres de Bernoulli, 1843
