Compte-rendu vidéo : Atelier HTML5

Posted by
|

Cet article est le compte-rendu vidéo de l’atelier HTML5 animé par Sourouche Bagherzadeh le 16 février à L’EEMI. Cet atelier était organisé par Silex Labs dans le cadre du projet “Le tour du Web en 50 ateliers” qui propose des ateliers d’initiation aux métiers du numérique par la pratique pour permettre de comprendre ce secteur et de s’initier à ses métiers.

Vous pouvez retrouver les sources de cet atelier réalisé avec Thimble, un éditeur de code en ligne lancé par Mozilla pour enseigner les bases du HTML, CSS et JavaScript.

À propos de HTML5

Html 5 (Hypertext Markup Language) est un langage de base pour la création de site internet, il sert à structurer votre page internet . D’autres langages peuvent s’ajouter lors de la conception, mais tout les sites web contiennent du HTML. Le HTML5 vous permettra de coder votre contenu (titre, paragraphe, menu…). HTML5 désignant la version du langage HTML, elle transforme ce qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d’applications. HTML5 propose en effet de nouveaux éléments, attributs et comportements mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web.

 

Introduction

Présentation de l’intervenant et bref présentation des différents langages utilisés pour le côté front (HTML, JavaScript, CSS)

Qu’est-ce que le HTML, HTML5 ?

 

Les balises <html>, <head>, <title>, <link>

On partira d’un projet vierge sur Mozilla Thimble, qui est un éditeur de code en ligne.

On verra dans cette vidéo qu’est ce qu’un fichier html, à quoi correspond le fichier index.html et qu’est ce qu’une balise ? On verra les balises <html>, <head>, <title>, <link>.

Un document HTML est lié à une feuille de style css, on établiera le lien vers cette feuille de style avec la balise link.

 

Structure du document HTML avec les balises <header>, <body>, <main>, <footer> et insertion d’une image

Dans cette vidéo on commencera la structure de notre document HTML avec les balises <header>, <body>, <main>, <footer>. Puis on verra comment on insère une image avec la balise <img> et comment la redimensionner.

( description des balises html, head, title, main, footer)

 

Création d’une deuxième page et de la navigation

Dans cette partie, on créera une deuxième page contact.html avec son lien.

Ici on découvrira les balises navigation <nav> et ancre <a>

 

 

Les balises titres <h1>, <h2>, <h3>…

Ici on verra les balises titres “heading1” <h1> et “heading2” < h2> qui définissent l’importance (elles vont jusqu’à h6)

 

Les listes avec les balises <ul>, <ol>, <li>

Ici on verra comment faire des listes : les “bullet point” avec la balise <ul>, et les listes numérotées avec la balise <ol>.

 

Balises <footer>, <small>, <adress>

Dans cette vidéo on verra le pied de page avec la balise <footer>, la balise <small>, <adress>

 

Le tour du Web en 50 ateliers

Cet atelier entre dans le cadre du projet “Le tour du Web en 50 ateliers” qui propose des ateliers d’initiation aux métiers du numérique par la pratique pour permettre aux personnes défavorisées face à l’accès au numérique, de comprendre ce secteur et de s’initier à ses métiers.

tour-du-web-carre-avr-2016.svg

Intervenant

tof-sourouche

Cet atelier était animé par Sourouche Bagherzadeh, Web designer et développeur front freelance spécialisé dans la création de sites internet tous domaines.

Site internet

LinkedIn

Photos de l’atelier

html-fev-2016-cr-video-carre.svg

Événements à venir / Upcoming Events

  1. Apéropensource #47 – Apérhosting chez Gandi

    25 janvier @ 19:00 - 22:00

News letter

Evénements Silex Labs sur Paris et sa région: Inscrivez vous à la Newsletter mensuelle

Silex Labs community Tweets

Facebook page