Logo HTML5-CSS3

Un peu d'histoires

Afin de comprendre le langage HTML, il faut se replonger dans la naissance de ce langage.

Tout a commencé par la DARPA (Defense Advanced Research Projects Agency) qui crée ARPANET (Advanced Research Projects Agency Network), ce fut le premier réseau à transférer des paquets, développé aux Etats-Unis par la DARPA.

Le concept de transfert de paquets deviendra la base de transfert des données sur Internet, avant la communication était basée sur la communication par circuits électroniques (par exemple l'utilisation du téléphone).

Naissance du HTML

Partie 1

Dans les années 1980, le réseau est scindé en deux "Milnet": Réseau militaire et "NSFnet": réseau universitaire, l'échange d'informations se faisait par le bais du protocole FTP ou par mail sur des serveurs dont la vitesse ne dépassait pas les 56 kbit/s.

Vidéos sur HTML4

Taper une adresse IP(Internet Protocol) était contraignante et lourde, il fallait toujours se rappeler des chiffres comme 173.194.67.94, suite à une demande de la DARPA, Jon Postel et Paul Mockapetris ont inventés en 1983 un système de résolution de nom DNS (Domain Name Systemem), plus besoin de taper une adresse IP par exemple 173.194.67.94, mais tout simplement google.fr.

Je pourrais continuer l'histoire du HTML, mais je vous conseille vivement de regarder cette vidéo ci-dessous ainsi que les autres expliquant de manière plus précise le langage HTML.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Apprentissage du langage HTML5

Dans cette vidéo, nous allons voir le langage HTML,en l'occurrence la version 5 du HTML.

C'est donc le début d'une longue série de vidéos sur l'apprentissage du langage HTML5 et le code de mise en forme que l'on appelle CCS3.

Tout au long de ces vidéos, je ferais référence à un livre dont le titre du livre est "HTML5, une référence pour le développement WEB"

Dans cette vidéo, nous verrons le site web caniuse puis quelques éditeurs HTML comme SublimeText, Atom, Notepad++ et ainsi de suite

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise Doctype

Dans cette vidéo, nous allons apprendre ce que l'on appelle le consortium W3C puis nous verrons ensemble pourquoi la balise doctype est primordiale au bon fonctionnement d'une page web.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise HTML

Dans cette vidéo, nous allons apprendre et comprendre le fonctionnement de la balise HTML, nous verrons ensemble les différents attributs que l'on peut associer.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise HEAD

Dans cette vidéo, nous allons apprendre et comprendre le fonctionnement de la balise HEAD, nous verrons ensemble les différents atributs que l'on peut associer à cette balise

A l'intérieur de cette balise, on va retrouver toutle nécessaire (titre, balise meta, css ...)

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise META

Dans cette vidéo, nous allons apprendre et comprendre le fonctionnement de la balise META, nous verrons ensemble les différents types de meta que l'on intégrer.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise LINK

Dans cette vidéo, nous allons apprendre et comprendre le fonctionnement de la balise LINK, nous verrons ensemble les différents attributs que l'on peut associer à cette balise

Cette balise permettra de linker une page CSS afin d'avoir une belle mise en forme.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Balise Standards

Dans cette vidéo, nous allons apprendre et comprendre les différentes balises de base, fonctionnement de la balise META, nous verrons ensemble les différents types de balises comme:

  • - Gestion des phrases
  • - Gestion d'une liste à puces
  • - Gestion d'une image
  • - Gestion d'un titre (allant de h1 à h6)

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion du CSS (partie 1)

Dans cette vidéo, nous allons apprendre l'origine du CSS.

Nous verrons les différentes versions de CSS

Ensuite nous verrons comment attacher une page CSS par le biais de la balise LINK.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion du CSS (partie 2)

Dans cette vidéo, nous allons apprendre et comprendre les différentes sélections au niveau d'une page CSS, nous verrons comment mettre de la couleur, souligner un texte, mettre en forme du texte et ainsi de suite

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Structure HTML5

Dans cette vidéo, nous allons apprendre et comprendre la structure en langage HTML5, on trouvera les éléments suivants:

  • - Balise HEADER
  • - Balise FOOTER
  • - Balise SECTION
  • - Balise ARTICLE

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Couleur

Dans cette vidéo, nous allons apprendre et comprendre la gestion des couleurs, on aura:

  • La gestion des couleurs primaires
  • La gestion d'une couleur hexadécimal ex: #fff
  • La gestion d'une couleur en RGB ou RGBA

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion d'un background

Dans cette vidéo, nous allons apprendre et comprendre le fonctionnement d'un fond d'écran que cela soit la gestion d'une couleur ou la gestion d'une ou une plusieurs images en fond d'écran.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion d'une FONT

Dans cette vidéo, nous allons apprendre et comprendre la gestion d'une FONT ou police, la forme, la graisse, le style et ainsi de suite

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Bordure en HTML

Dans cette vidéo, nous allons apprendre et comprendre la gestion des bordure sur une balise de type DIV ou tout simplement une image, on pourra modidier la couleur, l'épaisseur, la couleur ou gérer une forme arrondie.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion d'un margin et padding

Dans cette vidéo, nous allons apprendre et comprendre la gestion des marges internes et externes dont les noms respectifs sont "padding" et "margin".

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Propriété text en CSS

Dans cette vidéo, nous allons apprendre et comprendre la propriété text, son alignement, modifier son type, sa forme.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion de la flottaison

Dans cette vidéo, nous allons apprendre et comprendre la gestion d'une flotaison, on aura une flottaison à droite, à gauche ou au centre.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Propriété display en css

Dans cette vidéo, nous allons modifier le display d'une balise, par défaut une balise est soit de type inline soit block, donc regardons cela de plus près.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion des listes

Dans cette vidéo, nous allons apprendre et comprendre la gestion d'une liste à puces ou une liste ordonnée ou même désordonnée, on verra aussi une liste à définition.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Intégration d'une FONT

Dans cette vidéo, nous allons apprendre comment intégrer une font externe comme par exemple une de google fonts, on verra les extensiosn de font (SVG, TTF, EOT, WOFF).

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion de la balise a

Dans cette vidéo, sans la balise a, on aurait pas cette évoution des pages web, donc dans cette vidéo nous verrons ce que l'on appelle une balise externe ou interne.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion des tableaux en HTML5

Dans cette vidéo, nous allons voir les différentes balises d'un tableau en langage HTML5, attention les tableaux sont de moins en moins utilisés, car ceux-ci sont mal gérés par le robot qui se promène sur la toile afin de référencer vos page web.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion des pseudo éléments

Dans cette vidéo, nous allons apprendre à utiliser la gestion des pseudo éléments, on pourra par exemple ajouter une image avant ou après une balise.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Nouveau design du site web [ Poisson Pour Tous ]

Dans cette vidéo, nous allons voir un nouveau site web qui a été complètement remodél afin que celui-ci tienne sur une seule page, on appelle cela un site web OnePage.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion de la balise Audio

Dans cette vidéo, nous allons voir la balise audio ainsi que les différentes extensions utilisées, il est bien évident que depuis l'évolution du HTML5, le fait d'avoir de nouvelles balises multimédia va nous permettre de rendre plus animé notre page web.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion de la balise vidéo

Dans cette vidéo, nous allons voir la balise vidéo ainsi que les différentes extensions utilisées, l'insertion de balises vidéo a vraient donner vie à votre site web.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Intégration d'une vidéo Youtube

Dans cette vidéo, nous allons voir comment intégrer une vidéo d'une plate forme de streaming comme dans notre exemple on utilisera Youtube, le but d'intégrer une vidéo Youtube permettra de gagner de la place sur votre serveur et donc de pointer vers un lien vidéo.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Position en CSS

Dans cette vidéo, nous allons voir comment positionner un élément en position absolu, relative, fixed et sticky, on pourra grâce à cette position créer par exemple un menu.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

Gestion d'un formulaire

Dans cette vidéo, nous apprendre les différentes balises d'un formulaire, on commencera par la balise form, puis ensuite on verra les balises standards afin de créer un formulaire de contact.

Vous trouverez les sources du code à l'adresse suivante Langepourtous

BACK TO TOP