Informatique


Wablief, html...!

Aller à

Histoire

Sir Timothy John Berners-Lee (Tim Berners-Lee né le 8 juin 1955 à Londres) est un citoyen britannique surtout connu comme le principal inventeur du World Wide Web. En juillet 2004, il est anobli par la reine Elizabeth II pour ce travail et son nom officiel devient Sir Timothy John Berners-Lee. Depuis 1994, il préside le World Wide Web Consortium (W3C), organisme qu'il a fondé.

L’HTML (Hypertext Markup Language) est né au CERN de Genève (Centre Européen de Recherche Nucléaire), Tim Berners-Lee propose en mars 1989 un projet de système hypertexte destiné à permettre aux physiciens du monde entier d’échanger aisément des informations. La première version de l’HTML n’apparaît qu’en mai 1991, il faut attendre janvier 1992 pour une version destinée au grand public.

Tout démarre vraiment en février 1993, quand Marc Andreessens, un étudiant de l’université d’Illinois (USA), annonçe Mosaic, un navigateur (browser) Web sous XWindows. Mosaic se caractérise rapidement par sa facilité d’utilisation. La consécration date de fin 1993 quand apparaissent des versions pour Windows et Macintosh.
Un outil performant est né pour « surfer » sur le réseau Internet au travers du protocole « http:// ». La grande aventure du WWW (World Wide Web) peut commencer.

Marc Andreessens et Jim Clark fondent la société Mosaic Communication, rebaptisée peu après Netscape.


Programmes utilisés

  1. Des IDE (Integrated Development Environment), ces "Environnements de développement Intégrés" sont assez nombreux.
    Notepad++ est l'éditeur gratuit que nous utiliserons pour créer les documents HTML, CSS et PHP avec le plugin
    Emmet.
    Pour ceux qui les préfèrent, Visual Code (raccoursis clavier), Sublime Text, Brackets, Atom, etc. font aussi très bien l'affaire.
  2. Des navigateurs (browsers) pour visualiser et tester les programmes.
    Nous utiliserons chrome pour la qualité de sa console.
  3. L'explorateur de Windows permettra de gérer l'arborescence des dossiers et le stockage des fichiers.

Version d'HTML

La version actuelle d'HTML est la version 5.
L'aspect sémantique des nouvelles balises (ainsi que les anciennes recyclées) est une avancée particulièrement importante pour le programmeur, celles-ci sont utilisées par les robots des moteurs de recherche pour référencer les pages et leur utilisation est donc indispensable.
De plus, les API (Application Programming Interface) introduites avec cette nouvelle version nous offrent des outils permettant de s'affranchir des éditeurs de type Flash car elles sont beaucoup plus performantes en terme de traitements.
Un bémol toutefois, IE continue à faire une résistance qui, à la longue, s'avère de plus en plus ridicule. Microsoft traine les pieds pour se conformer aux standards du W3C et se place hors jeu "à l'insu de son plein gré".

La standardisation d'HTML est le fruit des travaux du W3C (Word Wide Web Consortium) et du WHATWG (Web Hypertext Application Technology Working Group). Ces deux organismes (plus rivaux qu'amis!) sont à l'origine des nouvelles spécificationsde la version 5 d'HTML.


Syntaxe

La balise (tag)

Une balise s'ouvre et se ferme:

  • la balise ouvrante commence par < et se termine par >
  • la balise fermante commence par < ensuite le caractère / et se termine par >
Syntaxe
	<!-- Un magnifique paragraphe -->
	<p>Un beau contenu...</p>
	
La balise vide

Une balise peut très bien ne rien contenir, dans ce cas elle ne se ferme pas:

  • <br> provoque un saut de ligne, elle ne contient aucune information, elle ne se ferme donc pas
  • <img> permet de placer une image, elle ne contient aucune information, elle ne se ferme donc pas
  • ... et quelques autres.
Syntaxe
	<!-- Un magnifique paragraphe avec un saut de ligne -->
	<p>Un beau contenu...<br>Vraiment beau ce contenu!</p>
	
La balise avec attribut(s)

Une balise peut porter un ou plusieurs attributs:

  • l'attribut est un couple nom="valeur"
  • la balise fermante ne porte jamais d'attributs
Syntaxe
	<!-- Un magnifique paragraphe avec un attribut -->
	<p class="para">Un beau contenu...<br>Vraiment beau ce contenu!</p>
	
Les balises imbriquées

Les balises peuvent être imbriquées les unes dans les autres, elles doivent se fermées dans le bon ordre!

Syntaxe
	<!-- Un magnifique paragraphe imbriqué dans une superbe division -->
	<div>
		<p class="para">
			Un beau <strong>contenu<strong>, vraiment beau ce contenu!
		</p>
	</div>
	

Frameworks

Un framework est un programme permettant de générer l'architecture d'une application.

Il ne faut pas confondre framework et bibliothèque de fonctions.
Certes, le framework contient effectivement une bibliothèque de fonctions mais celles-ci sont uniquement destinée à faciliter le travail en équipe pour la mise en place de la structure générale d'une application.

Pour bien utiliser un framework il faut bien connaître le langage qu'il utilise.
Utiliser VueJS sans avoir une bonne maîtrise du langage JavaScript est une hérésie.

Le but des cours dispensés dans la section est de vous amener à pouvoir apprendre par vous-même les framworks, nous ne les aborderons pas en classe, mais j'espère pouvoir vous apporter l'ensemble des outils vous permettant d'y accéder avec la plus grande facilité.

Quelques frameworks Front-end...

  • Pour le CSS: Bootstrap, Foundation, etc.
  • Pour le JavaScript: AngularJS, VueJS, jQuery, etc.
  • Pour le PHP: Laravel, Symfony, Phalcon, etc.