Introduction HTML/CSS3

Les interfaces hommes/machines

Quelles sont les interfaces hommes/machines que vous connaissez ?

Quelle est la plus vieille interface homme/machine pour le grand public ?

MINItel - 1980's

the mother of all demos - 1968

Quel est le rapport avec l'HTML et le CSS ?

HTML

Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web.

Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques. L'HTML offre également la possibilité de créer des documents interopérables avec des équipements très variés et conformément aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

Wikipedia

HTML - ENvironnement de dev

L'HTML est un langage de programmation :
  -> C'est du texte

Le navigateur permet d'interpréter l'HTML :
  -> C'est l'environnement d'exécution

 

Les outils nécessaires pour développer en HTML/CSS3

  • un éditeur de texte : Visual Studio Code + extension "Emmet"
  • un navigateur : google chrome

HTML - SYNTAXE

L'HTML est consistitué de balises. Exemple

<h1>Salut toi.</h1>

balise "h1" : titre de page (gros titre)

 

Les balises marchent par paires : balise ouvrante et fermante

<h1> : balise ouvrante

</h1> : balise femante

 

Les < et > sont appelés les chevrons de balise. On peut dire :

"les chevrons de la balise h1"

HTML - SYNTAXE

2ième type de balise : auto-fermante

<h1>Salut toi.</h1>
<br />
<h1>Comment ça va ?</h1>

Les balises auto-fermantes s'utilisent de façon isolée, pas par paire.

<br /> : balise auto-fermante

La balise br permet de sauter une ligne.

HTML - Activité 1

Consigne :

  1. Créer un fichier "index.html"
  2. Ouvrir le fichier avec Visual Studio Code
  3. Recopier l'exemple ci-dessus dans le fichier "index.html"
  4. Ouvrir le fichier avec un navigateur
<h1>Salut toi.</h1>
<br />
<h1>Comment ça va ?</h1>

HTML - Validator

Il y a des règles pour l'écriture de fichier HTML.

Spécification du standard HTML

Validateur du W3C

 

Consigne :

  1. Aller sur le validateur W3C
  2. Demander une vérification du fichier index.html de l'Activité 1

W3C : World Wide Web Consortium, est une organisation internationale qui développe et promeut des normes ouvertes pour le Web. Il a été créé en 1994 par Tim Berners-Lee, l'inventeur du Web, et vise à assurer l'interopérabilité et l'accessibilité du Web pour tous.

HTML - Structure

Toutes les pages HTML respectent la structure suivante :

<!DOCTYPE html>
<html lang="en">

  <head>
    ...
  </head>

  <body>
    ...
  </body>

</html>

L'ordre des balises compte. Le document se lit de haut en bas, comme d'habitude.

 

Les balises s'imbriquent les unes dans les autres !

HTML - Structure

<!DOCTYPE html>

DOCTYPE est une instruction spéciale qui indique au navigateur Web quelle version de HTML ou de XHTML est utilisée dans une page Web. Cette instruction doit figurer au tout début de la page HTML, avant même la balise <html>.

Source

HTML - Structure

<html lang="en">
  ...
</html>

html : englobe l'ensemble du document. On dit que c'est la racine du document.

Dans la balise html, on voit lang="en". On dit que lang est un attribut de la balise html.

L'attribut lang sert aux outils vocaux qui "lisent" les pages web pour ajuster la prononciation.

Source

HTML - Structure

<head>
  ...
</head>

head : contient des informations qui ne sont pas directement visibles pour les utilisateurs, mais qui sont importantes pour la structuration et l'affichage de la page.

La balise head peut contenir les balises :

 - <title> : le titre de la page, visible dans le nom de l'onglet

 - <meta> : des informations sur la page, telles que la description, les mots-clés, le jeu de caractères utilisé, etc.

 - <link> : relie la page à des fichiers externes, tels que des feuilles de style CSS ou des fichiers JavaScript.

Source

HTML - Structure

<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="https://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT src="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

Exemple de balise <head> plus complète.

HTML - Structure

<body>
  ...
</body>

body : définit le corps principal d'une page Web. Elle contient le contenu visible de la page, tel que le texte, les images, les liens, les formulaires, les tableaux, etc. Tout ce qui est inclus entre les balises <body> et </body> est affiché dans la fenêtre du navigateur Web.

Source

HTML - ACtivité 2

Consigne :

A l'aide de la structure HTML, corriger les erreurs donner par le validateur HTML W3C sur le fichier index.html de l'activité 1.

HTML - Plus de body

Les balises populaires :

<p> : paragraphe

<h1> - <h6> : titres

<ul>, <ol> : listes

<img> : image

<a> : lien

<form> : formulaire

<table> : tableau

HTML - Documentation MDN

La balise <a> est l'une des balises les plus importantes du web. C'est elle qui permet de faire des hyperliens.

 

Consigne :

Consulter la documentation MDN de la balise <a>.

MDN : Mozilla Developer Network est une ressource en ligne gratuite qui fournit des informations, des outils et des ressources pour les développeurs Web. Elle est gérée par Mozilla, l'organisation à but non lucratif qui développe le navigateur Web Firefox, et est maintenue par une communauté de contributeurs.

La MDN propose une documentation complète sur les technologies Web, telles que HTML, CSS, JavaScript, Web APIs, etc. Elle fournit des guides, des tutoriels, des exemples de code et des références techniques pour aider les développeurs à apprendre, à comprendre et à utiliser ces technologies de manière efficace

MDN,
C'est Cool

HTML - Activité 3

Consigne :

Pour chaque balise populaire, créer un exemple d'utilisation à l'aide de la documentation MDN.

QUIZZ SILENCIEUX #1

Si vous connaissez la réponse, levez juste la main.

  • Qu'est-ce qu'une balise ? A quoi ça sert ?
  • Quelles sont les balises que vous connaissez ?
  • Combien de balises populaires est-ce que vous connaissez ?
  • Est-ce que vous connaissez une ressource qui propose des exemples d'utilisation des différentes balises ?
  • Qu'est-ce qu'une balise auto-fermante ?
  • C'est quoi la structure d'un document HTML ?

Developpement - les raccourcis

Quels sont les raccourcis que vous connaissez ?

Quels sont les raccourcis que vous utilisez ?

les raccourcis Populaires

Ctrl + S : Enregistrer

Ctrl + C : Copier

Ctrl + V : Coller

Ctrl + X : Couper

Ctrl + A : Sélectionner tout

Ctrl + Z : Undo

Ctrl + F : Chercher

 

"!" au début d'un fichier vierge pour générer le squelette d'une page HTML dans VSCode avec l'extension Emmet.

Youtube et HTML5

HTML5 Introduit de nouvelles fonctionnalités :

<video> : intègre un contenu vidéo dans un document

<audio> : intègre un contenu sonore dans un document

<canvas> : pour dessiner des graphiques et des animations

 

Ces fonctionnalités ont permis à YouTube de proposer des vidéos de haute qualité et des interfaces plus interactives.

HTML - Activité 4

Consigne :

  1. A l'aide d'une balise <a>, faites un lien vers cette vidéo youtube :
    https://www.youtube.com/shorts/pVMldM3PF-o
  2. Vérifier que vous n'avez pas d'erreur avec le validateur W3C.

HTML - Activité 5

Lorsque vous partagez une vidéo youtube, il y a une option pour "embarqué" une vidéo youtube dans une page web arbitraire.

 

Consigne :

  1. Embarquez cette vidéo dans une de vos page web :
    https://www.youtube.com/shorts/pVMldM3PF-o
  2. Vérifier que vous n'avez pas d'erreur avec le validateur W3C.

HTML - Activité 6

Ce site est réputé pour avoir été le premier site du monde. Il a été créé au CERN.

Consigne :

Reproduire le 1er site web du monde. Pour les liens, utiliser "#" comme valeur pour l'attribut "href".

Le site http://info.cern.ch/hypertext/WWW/TheProject.html a été créé le 13 novembre 1990 par Tim Berners-Lee au CERN, l'Organisation Européenne pour la Recherche Nucléaire en Suisse. Il s'agit du premier site Web jamais créé.

 

CERN : Organisation européenne pour la recherche nucléaire, aussi appelée laboratoire européen pour la physique des particules [...] est le plus grand centre de physique des particules du monde.

Il se situe à quelques kilomètres de Genève, en Suisse, à cheval sur la frontière franco-suisse, sur les communes de Meyrin, Prévessin-Moëns et Saint-Genis-Pouilly. Les anneaux des accélérateurs s'étendent notamment sous les communes françaises de Saint-Genis-Pouilly et Ferney-Voltaire (département de l'Ain).

Navigateur - L'inspecteur

L'inspecteur, ou kit de développement, ou débugeur, est intégré aux navigateurs. Il permet de :

  • examiner le contenu HTML, CSS et Javascript d'une page,
  • modifier en temps réel une page,
  • analyser les performances de la page,
  • analyser les communications réseaux de la page,
  • etc...

 

L'outil d'inspection est un outil essentiel pour les développeurs web, car il leur permet de travailler efficacement et d'optimiser leur code en temps réel, ce qui permet de gagner du temps et de minimiser les erreurs.

HTML - Activité 7

Consigne :

Ouvrir l'outil d'inspection sur le 1er site web du monde.

 

Question 1 :

Si je peux modifier le 1er site du monde, est-ce que je suis en train de dégrader un patrimoine de l'humanité ?

 

Question 2 :

Ma banque a un site web que je peux modifier dans l'inspecteur : est-ce que je peux rajouter un zéro ou deux sur mon compte ?

SUperpower

WEB - le client, le serveur et le truant

WEB - 3 technologies fondatrices

HTML : HyperText Markup Language, décrit le contenu des pages

HTTP : HyperText Transfer Protocol, protocole de communication entre machine. Sert à assurer le transport des données.

URL : Uniform Resource Locator, associe une adresse unique à une ressource. Une ressource pouvant être une page, une image, une feuille CSS, une vidéo, un son, du code JavaScript.

 

Analogie de l'enveloppe.

Navigateur - Activité 8

Consigne :

Inspecter les communications réseaux sur le 1er site web du monde.

html - les commentaires

Comme dans la plupart des langages de programmation, on peut mettre des commentaires dans du code HTML. Exemple :

...
<body>
  <h1>Salut toi.</h1>
  <br />
  <!-- <h1>Comment ça va ?</h1> -->
</body>
</html>

Le contenu "Comment ça va ?" ne s'affichera pas.

 

Les commentaires sont très utiles pour "désactiver" du code.

 

Raccourci VSCode : CTRL + /

HTML - Histoire

Date Évènement
1990 Invention du web par Tim Berners-Lee, première page web en ligne, HTML 1
1993 Navigateur NCSA Mosaic (développé alors que le web ne contenait que 200 sites), balise img
1994 Netscape Navigator (navigateur dominant dans les années 1990, supplanté par Internet Explorer), nombre de sites explose, annuaire web/moteur de recherche Yahoo!, création du World Wide Web Consurtium (W3C)
1995 balise table, naissance de JavaScript
1997 HTML 4.0
1998 le W3C crée le standard XML pour remplacer à terme le HTML, création du CSS, XmlHttpRequest, Google, Netscape ouvre ses sources
2000/2006 Évolutions du HTML, explosion de la bulle Internet
2001 Lancement de Wikipédia
2004 Création du WHATWG, première version de Firefox
2004/2006 Web 2.0: AJAX, apparition de géants comme Amazon, Facebook, Youtube et autres réseaux sociaux
2010 HTML5, abandon XHTML2, frameworks front-end, CSS Grids, Responsive web design
2014 Le milliard de sites dépassé

CSS

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Wikipedia

CSS - où ça ?

L'attribut style est disponible sur toutes les balises HTML :

Dans la balise <style> à l'intérieur du <head> :

<p style="color: red">Comment ça va ?</p>
<html>
  <head>
    <style>
      p {
        font-size: 20px;
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <p>Comment ça va ?</p>
  </body>
</html>

CSS - Les feuilles de style

La façon la plus normal de faire, c'est la feuille de style.

L'ajout d'une feuille de style se fait avec la balise <link> à l'intérieur de <head> :

<head>
  <link rel="stylesheet" href="index.css">
</head>

index.css :

p {
  font-family: monospace;
  background: beige;
}

Si une propriété CSS est renseigné à plusieurs endroit, il y a des règle de priorité :

feuille de style < balise style < attribut style

CSS - Syntaxe

p {
  font-family: monospace;
  background: beige;
}

Ici p désigne le sélecteur CSS.

-> Cela veut dire que toutes les balise p seront affectées par les propriétés CSS renseignées.

 

On dit que font-family et background sont des propriétés CSS.

CSS - Activité 9

Consigne :

Modifier la taille des textes de titre de type h1 à l'aide d'une feuille CSS.

HTML/CSS - id

L'attribut id est attaché à un élément HTML pour pouvoir ajouter du style spécifiquement à ce dernier :

<p id="question">Comment ça va ?</p>

Dans le fichier CSS, on style un identifiant avec #nom_identifiant. Noter l'utilisation du "#" devant le nom de l'identifiant.  Dans notre cas :

#question {
  font-family: monospace;
  background: beige;
}

CSS - Activité 10

Consigne :

Utiliser l'attribut id pour styliser une balise <p>.

QUIZZ SILENCIEUX #2

Si vous connaissez la réponse, levez juste la main.

  • Quelles sont les raccourcis que vous utiliser ?
  • A quoi sert l'inspecteur ?
  • Où peut-on mettre du CSS ?
  • Quels sont les sélecteurs que vous connaissez ?

Qu'est ce que le hacking ?

Consigne :

Lire le texte The Hacker Manifesto (1986)

WEB - J'ai hacké internet

Consigne :

  1. Trouver un site avec une bannière publicitaire (site de presse)
  2. Supprimer la bannière publicitaire à l'aide de l'inspecteur

 

Pour ouvrir l'inspecteur, soit :

  • click droit, inspecter,
  • la touche F12.

HTML/CSS - class

L'attribut class est attaché à un élément HTML pour pouvoir ajouter du style spécifiquement à un ensemble de balise choisi arbitrairement :

<p class="question">Comment ça va ?</p>

Dans le fichier CSS, on style une classe avec .nom_class. Dans notre cas :

.question {
  font-family: monospace;
  background: beige;
}

CSS - Activité 11

Consigne :

  1. Ajouter plusieurs questions réponses dans des balises <p> qui se succède les unes les autres.
  2. Utiliser l'attribut class="question" pour les paragraphes qui contiennent des questions, l'attribut class="reponse" pour les paragraphes qui contiennent des réponses.
  3. Créer les classes ".question" et ".reponse" dans une feuille CSS pour pouvoir donner des styles nettement différents aux questions et aux réponses.

HTML/CSS - Plus de Selecteur

Il y a des sélecteur qui s'appuie sur :

  • la structure du document HTML,
  • l'état d'une balise HTML,
  • la position l'élément dans sa fraterie (:first-child, :last-child),
  • etc...

 

Consigne :

Lire la page de référence W3schools sur les sélecteurs.

CSS - Activité 12

Consigne :

  1. Utiliser des sélecteurs de structure pour styler une page,
    Utiliser le sélecteur div > p par exemple.
  2. Utiliser des sélecteurs d'état pour styliser des éléments,
    Utiliser le sélecteur :hover par exemple.

CSS - leS Couleurs

Les couleurs sont cruciales pour le rendu d'un site.

 

C'est la propriété color qui contrôle la couleur.

 

Les valeurs possibles :

  • chaîne de caractère : "red", "yellow", "blue", "green", ...
  • hexadécimal :
    • "#000" : noir
    • "#F00" : rouge
    • "#0F0" : vert
    • "#00F" : bleu
  • choix du couleur picker

N.B.: Il est aussi possible de spécifier l'opacité des couleurs.

CSS - Activité 13

Consigne :

  1. Lire l'article CSS Colors de W3shools,
  2. Lire l'article CSS RGB Colors de W3shools,
  3. Générer une palette de couleur harmonieuse avec coolors.co (3 couleurs),
  4. Utiliser ces pour colorer le titre, les paragraphes et le fond d'une page web.

 

Autre ressource :

https://colorhunt.co/

QUIZZ SILENCIEUX #3

Si vous connaissez la réponse, levez juste la main.

  • Combien de selecteur CSS est-ce que vous connaissez ?
  • Comment exprime-t-on les couleurs en CSS ?
  • Où peut se positionner l'inspecteur ?

WEB - accessibilité - ACTIVITé 14

Pratique de rendre les sites web, les applications et les contenus en ligne accessibles à tous, y compris aux personnes ayant des handicaps ou des limitations physiques, mentales, auditives, visuelles ou cognitives.

Exemples techniques :

  • structuration correcte du contenu avec des balises HTML,

  • description appropriée des images avec des attributs alt,

  • la prise en compte du contraste des couleurs,

  • etc...

Consigne :

Vérifier et corriger vos couleurs avec le Contrast Checker de coolors.

WEB - accessibilité - Ressources

Le W3C maintient et définit les normes WCAG, APA et ARIA pour permettre aux développeurs d'avoir des critères quatifiable d'accessibilité.

 

Le W3C fournit aussi une liste d'outil de vérification en ligne.

Cette liste contient le site https://www.accessibilitychecker.org.

CSS - transition

La sélection par rapport à des "états" de balises est particulièrement intéressante à combiner avec de la capacité de transition du CSS.

 

Consigne :

Lire la page CSS Transitions du W3schools.

CSS - Activité 15

Consigne :

Utiliser les transitions pour changer la couleur de fond d'un paragraphe avec la propriété :hover.

CSS - Les propriétés par défaut

En HTML, l'utilisation de différentes balises permet d'associer de la sémantique à du contenu, comme on l'a vu avec les balises populaire (<p>, <h1> - <h6>, <ul>, <ol>, <img>, <a>, <form>, <table>).

 

En fonction de la sémantique, un style par défaut est associé à une balise.

CSS - <a> style par defaut

A travers l'inspecter, on peut voir les styles par défaut des balises. En regardant le style par défaut de la balise <a>, on voit les propriétés suivantes qui sont affectées :

Sous google chrome, le style par défaut est inséré par "user agent stylesheet".

CSS - Activité 16

Consigne :

  1. Utiliser l'inspecteur pour découvrir les propriétés par défaut de la balise <a>,
  2. Avec l'inspecteur, explorer les valeurs possibles des propriétés CSS par défaut de la balise <a>,
  3. Créer une feuille de style qui change les propriétés par défaut de la balise <a>.

HTML/CSS - Div et Span

Les balises <div> et <span> définissent des zones de contenu, ce qui permet d'appliquer des styles à ces zones. Mais elles ont des utilisations différentes :

La balise <div> est un élément de bloc utilisé pour regrouper du contenu en blocs logiques. Elle est généralement utilisée pour diviser une page Web en sections distinctes ou pour regrouper des éléments de contenu connexes, tels que des paragraphes, des images et des formulaires.

La balise <span> est un élément en ligne utilisé pour regrouper du contenu en ligne. Elle est généralement utilisée pour appliquer des styles à des parties spécifiques de texte, telles que des mots ou des phrases, ou pour ajouter des éléments en ligne tels que des liens ou des icônes.

HTML/CSS - Div et Span

Utilisation de <div> :

Si vous avait besoin d'avoir des marges régulières sur tout le document, vous souhaitez avoir une balise <div> qui va servir de container. Avec cette balise, vous pourrez ajuster les marges.

 

Utilisation de <span> :

Si vous avez besoin de mettre des mots en gras, en italique, ou mettre des phrases en fluo, vous avez besoin d'une balise <span>. Cette balise s'utilise dans le corps du texte.

HTML/CSS - Div et Span

Les différences entre <div> et <span> :

Principalement, les balises <div> délimitent des regroupement en bloc logique dans la page, alors <span> s'utilise sur une ligne dans le corps d'un texte.

 

De plus, les  <div> peuvent s'imbriquer les unes, les autres. Alors qu'il n'est pas recommandé d'imbriquer des balises <span>.

 

Bien sûr, ces différences sont visibles dans les propriétés CSS par défaut.

CSS - Activité 17

Consigne :

  1. Inspecter le style par défaut de <div>,
  2. Inspecter le style par défaut de <span>,
  3. Qu'est-ce qui change ?

CSS - display

La propriété display, c'est LA PROPRIÉTÉ la plus importante du CSS.

 

Consigne :

  1. Lire la page Layout - The display Property de W3schools.
  2. Tester tous les exemples.
  3. Faire les exercices contenus dans cette page.

CSS - position

La propriété position est la deuxième propriété la plus importante pour maîtriser l'agencement sur une page.

 

Consigne :

  1. Lire la page CSS Layout - The position Property du W3schools.
  2. Tester tous les exemples.
  3. Faire les exercices contenus dans cette page.

QUIZZ SILENCIEUX #4

Si vous connaissez la réponse, lever juste la main.

  • Qu'est-ce que le hacking ?
  • Avez-vous des notions d'accessibilité du web ?
  • Quel outil utilisez-vous pour vérifier que des couleurs vont bien ensemble ?
  • Comment faire pour vérifier le style par défaut des balises ?
  • Quelle est LA PROPRIÉTÉ CSS la plus importante pour la disposition ?

CSS - BOX-MODEL/padding/margin

La gestion de l'espace autour des élémentes HTML est gérée par trois paramètres/aspects du CSS :

  • le box model : décrit les couches qui entourent un élément HTML,
  • le margin : gère la taille de la couche extérieur d'un élément,
  • le padding : gère la taille de la couche intérieur d'un élément.

 

Consigne :

  1. Lire les pages CSS Box Model, CSS Margins et CSS Padding du W3schools,
  2. Tester tous les exemples et faire les exercices si disponibles.

CSS - border

Comme vu précédemment dans le Box model, chaque élément HTML a une bordure. Le CSS permet de styliser la bordure. Lors du développement, il est pratique de pouvoir visualiser la bordure des éléments pour voir quelle est la place qu'il occupe sur une page.

 

Consigne :

  1. Lire la page CSS Borders de W3schools.

  2. Tester tous les exemples.
  3. Faire les exercices contenus dans cette page.

CSS - Height, Width and Max-width

La largeur et la hauteur des éléments HTML sont des éléments aussi essentiels pour maîtriser la rendu de la page.

 

Consigne :

  1. Lire la page CSS Height, Width and Max-width de W3schools.
  2. Tester tous les exemples.
  3. Faire les exercices contenus dans cette page.

Consigne :

Reproduire la disposition de cette page. Vous avez besoin de CSS Layout - float.

CSS - Activité 18

CSS - Les unités de distance

Pour préciser les espaces que prennent les margins, padding, border, etc... on a besoin de donner des distances. Les distances peuvent être exprimées en plusieurs unités. Vous connaissez certainement l'unité px pour pixel. Mais ce n'est pas la seule.

 

Consigne :

  1. Lire la page CSS Unit de W3schools pour découvrir les différentes unités de distance.
  2. Tester tous les exemples.
  3. Faire les exercices contenus dans cette page.

CSS - Activité 19

Consigne :

Spécifier des margins avec des unités de distance que vous venez de découvrir.

HTML - TOUJOURS PAREIL

HTML - Plus de semantique

Plus de balises :

<main> : le contenu principal du site,

<header> : l'entête du site,

<footer> : le pied de page du site,

<aside> : menu latéral,

<nav> : menu de navigation,

<section> : "compartiment" du contenu principal,

<article> : forme spécialisée de section.

 

Consigne :

Lire l'article d'Aurone qui présente les nouveautés de l'HTML5.

CSS - Activité 20

Consigne :

Sur un des exemples précédents, utilisez des balises sémantiques décrites précédemment.

Web - le maquettage

  • Créer une représentation visuelle statique de l'interface utilisateur, qui permet de définir l'apparence, la disposition et la navigation de la page.
  • Des logiciels de maquettage : Adobe Photoshop, Sketch, Figma, Adobe XD
  • Une étape essentielle pour la conception d'un site web ou d'une application, car il permet de visualiser l'interface utilisateur et de définir les détails de conception avant de passer à la phase de développement.

 

La référence dans le domaine : Dribbble

Web - Activité 21

Consigne :

  1. Consultez la maquette sur ce lien,
  2. Choisissez une des maquettes,
  3. Reproduire la maquette en HTML/CSS.

CSS - les nouveauté CSS3

Le CSS3 a été publié en 2011 et inclut plusieurs nouvelles fonctionnalités. On peut citer :

  • Des sélecteurs avancés,
  • Des transitions et animations,
  • Les médias querys (largeur d'écran),
  • Flexbox,
  • Grid.

 

Bonus :

Lire l'article de gafish sur les nouveautés du CSS3.

WEB - Responsive

Permet de créer des pages qui s'adaptent automatiquement à la taille de l'écran de l'utilisateur. S'implémente principalement grâce :

  • aux requêtes de média : media queries
  • aux grilles flexibles : flexbox, grid

 

Le Web Responsive est devenu une norme de facto dans la conception de sites web modernes, car il offre une solution pratique et économique pour atteindre un public plus large, quel que soit le dispositif utilisé.

Web - Activité 22

Consigne :

Faire le tutoriel de W3schools sur les Media Query.

 

Bonus :

Article de CSS Trick sur le sujet.

CSS - flexbox - ACTIVITE 23

Consigne :

  1. Consulter le magnifique poster de CSS Tricks - flexbox,
  2. Manipuler les flexbox avec le tutorial interactif FLEXBOX FROGGY.

 

Il y a d'autre tutoriel comme :

CSS - GRID - ACTIVITE 24

Consigne :

  1. Consulter le magnifique poster A Complete Guide to CSS Grid de CSS Tricks,
  2. Manipuler les grid avec le tutorial de Fjolt.

Web responsive - activité 25

Consigne :

A partir de l'activité ci-dessus, adapter le code HTML/CSS pour que affichage de la page s'adapte en fonction de la largeur de l'écran. Pour y parvenir, vous aurez principalement besoin de :

  • la propriété display: flexbox,
  • la propriété visibility,
  • et des autres propriétés CSS abordées jusqu'ici.

 

Tous les éléments doivent s'afficher correctement lors que la fénêtre est ouverte en grand et lorsqu'on demande un affichage en mode tablette ou mobile.

Activité "Web - Activité 21"

WEB - hebergeur

La finalité du développement web, c'est d'avoir quelque chose en ligne.

 

Les hébergeurs sont des prestataires qui permettent de mettre un site en ligne. Il existe de nombreux prestataires, certains avec une offre gratuite, d'autres uniquement payant.

 

Il existe de - nombreuses - comparaisons des différents hébergeur en ligne.

WEB - Activité 26

Consigne :

Reprenez un des exemples précédents et mettez le en ligne grâce à l'hébergeur 000webhost qui propose une solution gratuite.

HTML/CSS - l'interface des logicielS

Aujourd'hui, une grande partie des logiciels utilisent l'HTML/CSS pour programmer leur insterface. On peut citer :

  • Visual Studio Code
    Raccourci vers la console : Ctrl + Shift + P -> "Developer: Toggle Developer Tools"
  • Obsidian
    Raccourci vers la console : Ctrl + Shift + I
  • slides.com (le site qui héberge cette présentation)

 

Les logiciels construits avec electronjs utilise HTML/CSS pour leur interface graphique.

WEB - bank d'images

Lorsqu'on fait du développement web, on a souvent besoin d'image pour travailler, faire des propositions, voir à quoi ça peut ressembler.

 

Des banques d'images gratuites existent :

 

D'autres banques d'images existent.

Developpement - les bibliothèques

Par exemple : FontAwesome

Site pour chercher des alternatives :

Developpement - le no code

Méthode de développement logiciel qui permet aux utilisateurs de créer des applications sans avoir à écrire du code. Se concentre sur l'utilisation d'outils visuels tels que :

  • glisser-déposer,
  • générateurs d'interfaces utilisateur,
  • connecteurs de services,
  • flux de travail,
  • etc.

 

WordPress est le logiciel le plus connu dans ce domaine. Du la forte attractivité de cette approche, il y a de plus en plus de concurrent comme Webflow, Glide, et bien d'autre.

Developpement - Support des IA

IA : Intelligence artificielle

 

Vous pouvez demander plein de chose à ChatGPT.

 

Certains disent même que c'est le nouveau meilleur ami des développeurs Frontend.

HTML - Webgl

Consigne :

Lire l'article du site awwwards qui présentent la tendance des jeux vidéos en HTML5

HTML - Activité 27

Google, vous connaissez ?

 

Consigne :

1. Examiner la page d'accueil de google à l'aide de l'inspecteur

2. Recréer la page d'accueil de google à partir d'un projet vierge.

Pour aller plus loin

MDN : documentation de référence avec exemple

Can I Use : vérification de compatibilité

Khan Academy : apprentissage du projet par projet

Codecademy : apprentissage du projet par projet

W3School : documentation et tutorial avec exemple

freeCodeCamp : apprentissage exhaustif par thèmatique

CSS-tricks : article de discussion sur les pratiques CSS

Dribbble : vitrine des meilleurs web designer

Frontend Mentor : apprentissage par résolution de challenge

HTML Standard : spécification du langage HTML

Introduction HTML/CSS3

By Fabien ROZAR

Made with Slides.com

Introduction HTML/CSS3

Introduction à la programmation web HTML/CSS3

  • 88

More from Fabien ROZAR