Home
CS POK MON Projets

Web Front 1 HTML/CSS/JS

Tags :
  • MON
  • 2022-2023
  • temps 1
  • web
  • front
  • html
  • css
  • canvas
Auteurs :
  • Nathan Gissler
Promotions/2022-2023/Nathan Gissler/MONs de Nathan GISSLER/Web Front 1 HTML/CSS/JS

Avec ce MON, je vais apprendre à utiliser les outils de front qui me permettront de réaliser le POK "Mon site chez moi"

1. Prise en main de HTML et CSS

1.1 Cours Openclassrooms

J'étais au départ assez peu familier avec HTML, CSS, JavaScript et le front en général. J'ai choisi de suivre le cours HTML et CSS d'Openclassrooms car il m'a paru assez complet.

Le cours est assez facile à suivre, chaque partie apparaît sous la forme d'une vidéo et de manière détaillée sous forme de texte, il y a des exercices réguliers si on veut s'entraîner et des ouvertures sont proposées à la fin pour aller plus loin ainsi qu'un récapitulatif des balises et fonctionnalités.

1.2 Site

En parallèle du cours, j'ai réalisé un site en HTML et CSS qui m'a simplement servi à tester la plupart des fonctionnalités au fur et à mesure. Ce site de test me servira également à retrouver les différentes balises et autres propriétés lors de la réalisation du POK.

1.3 Principales fonctionnalités de HTML

Bases

Le langage HTML sert à définir le contenu d'une page web. Il fonctionne avec des balises qui peuvent être seules : <img />, ou par deux : <title> </title>.

Le code de base d'un fichier HTML est le suivant :

Titre de la page

On place ensuite le contenu de la page entre les balises <body> </body>.

On peut insérer des commentaires sous la forme <!-- commentaire -->.

Quelques balises

Il existe de nombreuses balises, notamment :

Balises pour structurer la pages

Certaines balises peuvent servir à identifier les différentes sections de la page.

Balises pour identifier les sections de la page

Tableaux

La structure des tableaux HTML est la suivante :

ligne 1 colonne 1 ligne 1 colonne 2
ligne 2 colonne 1 ligne 2 colonne 2

Il est possible de fusionner des cellules avec colspan et rowsspan.

Formulaires

Il est possible d'insérer des formulaires avec la balise <form> </form>, dans laquelle on peut placer la balise <input type="text" /> par exemple, où l'attribut type peut prendre un certain nombre de valeurs pour demander à l'utilisateur une date, une couleur, un numéro de téléphone, etc.

La récupération des informations doit se faire en php.

1.4 Principales fonctionnalité de CSS

Bases

On écrit le code CSS dans un fichier .css qu'on relie au(x) fichier(s) HTML au(x)quel(s) il s'applique en insérant cette ligne dans la balise <head> </head> du fichier HTML :

Où style.css est le nom du fichier CSS.

On peut écrire des commentaires sous la forme /* commentaire */

Appliquer un style à des balises HTML spécifiques

Grâce aux sélecteurs, il est possible d'appliquer un style :

Propriétés CSS

Il existe de nombreuses propriétés pour le texte :

Quelques propriétés pour le fond (de toute la page ou de n'importe quelle balise) :

Quelques propriétés pour les éléments de type block (contrairement aux éléments de type inline) :

Autres propriétés :

Il est possible de définir un style pour un élément seulement lorsqu'il est survolé (pour un lien par exemple) avec :hover

a:hover { color: blue; }

Il existe également :active pour un élément cliqué (lors du clic), :focus pour un élément sélectionné, ou encore :visited pour un élément déjà visité.

Il est possible d'ajouter la propriété display: flex à un conteneur pour gérer la disposition de ses éléments assez simplement avec Flexbox (disposition verticale ou horizontale, ordre, espacement...).

Responsive

Les Medias Queries permettent de paramétrer les propriétés CSS à appliquer en fonction de différents paramètre de l'appareil sur lequel on affiche le site (type d'appareil, taille de la page, etc.).

2. Canvas HTML

2.1 Tutoriel

J'ai également regardé une partie de ce tutoriel sur les Canvas HTML qui pourraient être utiles pour créer une partition intéractive pour le POK "Mon site chez moi".

Les canvas se placent dans des balises HTML et permettent de dessiner au sein de la page (placer des formes, du texte, des images, les faire se déplacer, intéragir avec...), ils peuvent être utilisés grâce à JavaScript.

2.2 Quelques fonctionnalités

Bases

Insertion du canvas dans le fichier HTML :

Paramétrage de la taille et du fond du canvas dans le fichier main.js :

let canvas = document.getElementById("canvas");

let context = canvas.getContext("2d");

var window_height = window.innerHeight; var window_width = window.innerWidth;

canvas.style.background = "#fff";

Création d'objets

On se place pour la suite dans main.js

Rectangle (la couleur est facultative) :

context.fillStyle = "colorName"; context.fillRect(xpos, ypos, width, height);

Cercle :

context.beginPath(); context.strokeStyle = "colorName"; context.lineWidth = lineWidth; context.arc(x, y, radius, startAngle, endAngle, anticlockwise?); context.stroke(); context.closePath();

Texte (la police est également facultative) :

context.fillText(text, xpos, ypos); context.font = "20px Arial";

Image :

let image = document.createElement("img"); image.src = imagePath; image.onload = function() { context.drawImage(image, xpos, ypos, width, height); }

Création de classes

Classe permettant de créer des cercles :

class Circle { constructor(xpos, ypos, radius, color) { this.xpos = xpos; this.ypos = ypos; this.radius = radius; this.color = color; }

draw(context) { context.beginPath(); context.strokeStyle = color; context.arc(xpos, ypos, radius, 0, Math.PI * 2, false); context.stroke(); context.closePath(); } }

Création d'un cercle grâce à cette classe :

let circle = new Circle(100, 200, 50, "red");

circle.draw(context);

Animation d'un objet

Une fonction de ce type permet d'avoir un objet en mouvement (la méthode update modifie légèrement la position du cercle) :

let updateCircle = function() { requestAnimationFrame(updateCircle); circle.update(); }

Intéractions avec le canvas (clic)

Pour exécuter une action en cas de clic sur le canvas :

canvas.addEventListener('click', (event) => { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // action à effectuer en utilisant la position x, y du clic })

3. Liens