Langages Web

HTML5

L'HTML est le langage dans lequel les pages web sont codées. Il fonctionne sur un système de balises, par exemple si je veux afficher une image, j'utilise la balise <img src='chemin' alt='une image' />

Je ne vais pas refaire un tutoriel sur l'HTML parce que w3School est la référence : https://www.w3schools.com/html/default.asp

Un site web est contenu dans un bloc html.

<!-- indique que cette page est écrite en HTML5 -->
<!DOCTYPE html>
<!-- bloc qui contient la page web, le contenu indiqué ici est français -->
<html lang="fr">
<!-- ici vous préparez votre site -->
<head>

<!-- titre du site, celui affiché dans l'onglet, obligatoire -->
<title>titre du site</title>
<!-- icone du site dans l'onglet, facultatif -->
<link rel="icon" href=".../icon.png">

<!-- informations sur votre page web -->
<!-- écrite en UTF-8 - facultatif -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- auteur, ... pour le référencement (facultatif) -->
<META NAME="AUTHOR" CONTENT="...">
<META NAME="COPYRIGHT" CONTENT="...">
<META NAME="KEYWORDS" CONTENT="....">
<META NAME="DESCRIPTION" CONTENT="...">

<!-- style (css) -->
<!-- la page peut être redimensionnée, en fonction du device (mobile, ordinateur, ...) mais
 vous devrez définir comment -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- importation d'un fichier de style -->
<link rel="stylesheet" href=".../style.css">

</head>
<!-- ici vous gérez l'affichage -->
<body>
	<!-- la partie header est la représentation logique d'une barre de menu -->
	<header></header>
	<!-- les parties section sont les représentations logiques du contenu de la page -->
	<section></section>
	<section></section>
	<!-- les parties asides sont les représentations logiques du contenu à gauche ou à droite des sections -->
	<aside></aside>
	<!-- le footer est la représentation logique du pied de page -->
	<footer></footer>
</body>
</html>

Notez la différence entre une balise <img /> dite autofermante, donc n'ayant pas de contenu ; et une balise <html> qui contient du contenu et qui fini par une même balise mais avec un slash </html>.

Certaines balises sont bloquantes, ce qui veut dire qu'à moins d'appliquer un style dessus, ces balises occupent une ligne entière.

Les balises ont des attributs par exemple un lien possède l'attribut href qui contient le lien en lui-même, mais aussi l'attribut target, qui contient le mode d'ouverte (dans cet onglet, dans un nouvel onglet, etc...).

<a href='https://www.google.com/' target='_blank' >

Il existe des attributs possédés par toutes les balises : style, id et class.

  • style: permet d'écrire du css directement dans l'html (style='color:red')
  • id: donne un identifiant, qui doit être unique. On peut récupérer ce composant si on possède cette id, par exemple pour exécuter du javascript ou lui appliquer un style dans un css.
  • class: regroupe des balises à une classe. On peut récupérer toutes les balises de cette classe, par exemple pour exécuter du javascript ou leur appliquer un style dans un css. class='maClasse1 maClasse2'.
CSS3

Le css sert à donner du style à vos composants.

  • Il peut être appliqué dans le html, sur une balise via l'attribut style.
  • Il peut être écrit dans un fichier .css (généralement style.css)
  • Il peut être écrit dans un fichier .html dans une balise style.

Je ne vais pas refaire un tutoriel sur le css parce que w3School est la référence : https://www.w3schools.com/css/default.asp

Fichier css

@charset "UTF-8";

/* appliquer un style à toutes les div */
/* div est un sélecteur */
div {
	/* ici vous donner le style à appliquer aux éléments capturés par le sélecteur */
	
	background: color; /* fond , red ou code héxa #ddff00 */
	color: color; /* couleur */
	font-size: taille; /* couleur */
	width: 5px; /* 5 pixels (défaut), d'autres unités : rem, pc, ... */
	...
	
	/* vous pouvez ajouter !important pour forcer l'utilisation */
}

/* d'autres selecteurs */
html, hr, section, ..., /* nom de balise */
.uneClasse, /* nom de classe */
#id /* id */ {

}

/* déclarer des constantes */
:root {
	--special-grey1: #5d6372;
	--special-red1: #dd4441;
}

.red {
	color: var(--special-red1);
}

Quelques attributs que j'utilise souvent en vrac (css de ce site)

.souvent {
	/* police */
	font-size: 15px;
	font-family: "Open Sans", sans-serif !important;
	color: #edf1f2;
	font-weight: 400;
	text-decoration: underline #dd4441;
	text-decoration: none;
	
	/* margin et padding */
	margin-bottom: 70px;
	padding: 15px 10px;
	
	/* fond et forme */
	background: url("../img/background.jpg") no-repeat center center fixed;
	background-size: cover;
	border: 1px solid #202735 !important;
	display: none;
	
	/* events */
	cursor: pointer;
	outline: none !important;
	scroll-behavior:smooth;
}

Media-queries

Les média-queries permettent d'ajouter/modifier des balises css en fonction de la taille de l'écran, ce qui permet par exemple de créer un style pour les téléphones tiré du style pour ordinateurs.

@media min-width(750px) AND max-width(950px) {
	.telephone-div {
		...
	}
}
JS

La javaScript (js) est du code qui s'exécute dans le navigateur. Par exemple une personne clique sur "en savoir plus", alors on affiche le contenu supplémentaire.

Le javascript s'écris dans un fichier .js ou dans une balise script.

<!-- balise code 'interne' -->
<script>
//code
</script>

<!-- balise code 'externe' -->
<script src='...'></script>

Tutoriel complet sur w3School

Quelques éléments de javascript

let variable; //déclaration d'une variable
const constante; //déclaration d'une constante
var variable;//déclaration d'une variable, portée différente

let tab = []; //Déclaration d'un tableau

//variable window contient en attribut tout ce qui concerne la page dans le navigateur
window
window.localStorage //emplacement de sauvegarde dans le navigateur

//document contient tout ce qui concerne la page web
document

//Déclaration d'une fonction nommée avec deux arguments
function nom(a, b){
	//récupère l'élément ayant cet ID
	let div = document.getElementById('');
	//récupère tous les éléments ayant cette classe
	let divs = document.getElementsByClassName('');
	
	//si l'attribut div a className alors contient sa valeur, sinon alors vous pouvez créer
	div.className //cet attribut en lui donnant une valeur

	//afficher dans la console
	console.log(...)
	
	//afficher dans une popup
	alert(...);
	
	//changer le style
	div.style.width = ...;
	div.style.display = ...;
}
PHP 7

Le php est un langage permettant d'exécuter du code sur le serveur avant d'envoyer une page web au client. Cela nécessite donc un serveur php.

Comme pour l'HTML, si vous tapez une url, avec s'il n'y a pas d'index.html, le script index.php sera exécuté.

Le code php doit être écrit dans un fichier .php. Il est possible d'écrire du code HTML dans un fichier php mais pas l'inverse. On écrit du PHP dans un bloc PHP.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>titre du site</title>
</head>
<body>
	<p>
	<!-- un bloc php qui affiche Hello World suivit de la date dans une balise p -->
	<!-- cette page va être différente à chaque rafraichissement mais le code est unique -->
	<!-- c'est l'utilité du PHP. -->
	
	<?php
		echo "Hello World (".date());
	?>
	</p>
	
	<p>
	<!-- si le bloc php ne contient qu'une ligne est c'est un echo, alors 
	on peut écrire le code comme suit -->
	
	<?= "Hello World (".date()); ?>
	</p>
</body>
</html>

Comme d'habitude, en web votre référence est w3school. (voir le tutoriel sur le PHP)

Synthèse

Les variables en php n'ont pas de type et sont toutes déclarées $nom

Les php s'écrit dans un bloc de la forme <?php ?> ou <?=?> s'il ne s'agit que d'un echo

Il est possible de glisser de l'html dans du php (exemple avec if):

<?php if(condition) : ?>
<p>vrai</p>
<?php else : ?>
<p>faux (facultatif)</p>
<?php endif; ?>

Les structure existantes en C comme if, for, while ... existent et leur utilisation est la même.

On déclare une fonction avec le mot clef function.

function nom($args1, ...){
	//...
}

Les tableaux sont déclarés [] ou array.

$tab = [];
$tab = array(5, 7);
$tab[0]; //5

Il est possible de créer des tableaux dits associatifs.

$assos = array('clef1'=>valeur1, ...)
//accès
$assos['clef1'] //retourne valeur1
//accès dans une string
"$assos[clef1]" //retourne "valeur1"

Quelques fonctions

date('format') //donne la date du jour
isset\($variable) //indique si une variable existe
echo 'texte' //affiche texte
count($array) //nombre d'éléments d'un tableau
is_array($array) //retourne true si $array est un tableau

PHP 5.6 vers PHP 7

  • la syntaxe de bloc est différente, on appelle du code PHP dans des balises <?php ?> alors qu’avant il était possible d’écrire du code PHP dans des balises <? ?>
  • des fonctions telles que « ereg » et « mbstring » ont étés supprimées, mktime a changé.
  • list a été remplacée par str_split, changement dans les foreach
  • changement dans la gestion des sessions
  • toutes les fonctions mysql sont deprecated (ne devraient plus être utilisés) et ont été remplacées par leur équivalent mysqli.
Console

La console est présente normalement dans tous les navigateurs. Elle vous permet de consulter le code source de la page, de voir les fichiers utilisés, etc... Et de modifier votre version de la page.

Elle s'ouvre généralement avec F12.

Éléments

Vous pouvez voir les balises de la page et le style.

Il existe également une pipette permettant de trouver le code d'une couleur sur la page.

Console

Vous pouvez tapper du code javascript et lire les valeurs des variables.

Source

Vous pouvez consultez les fichiers sources, et les site tiers utilisés par ce site.

Application

Vous pouvez consulter et modifier les variables dans le localStorage. Vous trouverez également les variables de session et les cookies.

Bootstrap4

Le principe de Bootstrap est de proposer des classes avec un style. Par exemple la classe px-5 met un padding de "taille 5 (vous ne pouvez que constater visuellement combien 5 vaut)".

L'un des avantages des framework css est qu'ils sont déjà responsive donc s'adaptent à la taille de l'écran.

Les tutoriels du site officiels sont bien faits donc je ne vais pas refaire un tutoriel.

  • Mise en page : Système de grille. L'idée est qu'une ligne (class row) fait 12 colonnes. Vous donnez
    <!-- L'idée est qu'une ligne (class row) fait 12 colonnes -->
    <!-- j'ajoute m-0 pour magins:0 car de base une row à des margins -->
    <div class='row m-0'>
    	<div class='col-7 col-md-6'>
    		...
    	</div>
    	<div class='col-5 col-md-6'>
    		...
    	</div>
    </div>
    
  • appliquer un fond (text-danger, text-warning, ...)
  • appliquer une couleur (text-danger, text-warning, ...)
  • barre qui se déplient (accordéons)
  • cartes