HTML5 et CSS3

Le cours

Comment lire ce syllabus

Vous êtes prêts à lire ce syllabus ? Super ! Voici brièvement quelques conventions typographiques utilisées dans ce syllabus. Celles-ci vous permettront de mieux percevoir la structure de ce syllabus mais également de distinguer les points importants.

Le menu principal (bleu) se trouve en haut de la page et se compose de 6 rubriques. Chaque rubrique est divisée en section et sous-section. A gauche un menu (orange) permet de naviguer rapidement à l'intérieur d'une rubrique. Ce menu propose également un rappel des différents liens intéressants de la rubrique (bleu marine).

Les conventions typographiques :

Je suis une section

Je suis une sous-section

Je suis une sous-sous-section

Je suis en évidence. Je suis donc une clé du paragraphe qui me contient.

Je suis un mot du langage HTML ou CSS

Information Je suis une information complémentaire pour votre culture générale. Vous pouvez m'ignorer.

Important Je suis important. Vous ne pouvez pas m'ignorer.

Introduction

Pourquoi un cours d'Introduction au Web?

Reflexion Vous désirez connaître la date de sortie du prochain Harry Potter? Vous voulez vendre vos anciens jeux PS2? Vous recherchez des informations sur l'Inde? Envoyer une carte de voeux? Un conseil universel : Allez sur le Web! C'est quoi le Web? Comment ça marche? Comment créer un site? Comment publier un site? ...

Commençons par la définition : Internet est un réseau informatique mondial. Ni plus ni moins, Internet est un outil universel de communication (parmi d'autres).

Le but du cours est de vous ouvrir quelques portes sur le web et ses nombreuses technologies. Il s'agit d'une introduction; à la fin du cours, vous serez capables de comprendre le code source d'un site Web et de créer un site web correctement (respectant les critères normatifs) en HTML et CSS.

HTML5 et un peu d'histoire

Dans le cadre de ce cours, nous avons choisi de vous exposer les standards du langage de balisage pour le Web propres au HTML5. C'est le standard actuel recommandé par le W3C (World Wide Web Consortium). Le W3C est un organisme international dont le but est de développer des standards ouverts afin de permettre l'évolution et la croissance du Web. Les navigateurs(Firefox, Chrome, Internet Explorer) que vous utilisez suivent ces standards et les implémentent. C'est ainsi que les navigateurs peuvent vous afficher le rendu d'une page HTML5.

Avant le standard HTML5, deux autres standards étaient en concurrence. Le HTML 4.0.1 qui est l'ancêtre du HTML5 et le XHTML 2 (le XHTML 1 fut un premier essai) basé sur le langage XML, que vous étudierez en deuxième année. Vous serez peut-être encore confronter à ces 2 autres standard qui restent utilisés aujourd'hui. Le langage HTML 4.0.1, tout comme HTML 5 n'est pas très rigoureux, vous pouvez oublier de fermer une balise par exemple et malgré cela votre page HTML s'affichera correctement. Cependant l'oubli de cette balise handicapera fortement des programmes lisant votre code HTML5 dans le but par exemple de référencer votre site Web. Le langage XHTML est né de cette faiblesse, il permet quant à lui d'avoir un contrôle plus strict sur code XHTML.

En résumé, ce qui importe dans ce cours, c'est la production d'un document HTML vierge de tout élément de style; ce qui correspond au respect de la norme HTML 5. Voir la norme ici

Important Avis Attention à ceux qui ont déjà créé des sites Web: beaucoup de gens savent concevoir un site Web mais peu le font correctement ! Assurez-vous de bien maîtriser tous les concepts véhiculés dans ce cours avant de croire que le tour est joué;. Profitez-en pour améliorer davantage vos compétences!

E-learning

Le fonctionnement de ce cours se veut original car nous savons que certains d'entre vous sont déjà des développeurs Web, d'autres ont déjà gouté aux technologies Web mais d'autres encore les ignorent totalement.

Nous avons choisi de pratiquer de l'eLearning. KeKseKça?

Selon l'Union Européenne,

l’e-learning est l’utilisation des nouvelles technologies multimédias de l’Internet pour améliorer la qualité de l’apprentissage en facilitant d’une part l’accès à des ressources et à des services, d’autre part les échanges et la collaboration à distance.

Dans le cadre du cours d'introduction au web, vous disposez de théories et d'exercices articulés dans un parcours pédagogique. Vous disposez également de forums pour toutes vos questions.

La méthodologie employée pour ce cours permettra à chacun d'avancer à son rythme et de prendre en main son évolution. En somme, vous êtes maîtres de votre apprentissage.

E-syllabus

Cette année nous nous basons essentiellement sur ce syllabus en ligne que vous êtes en train de lire.

Cette théorie est mise en lien avec les exercices dans le parcours pédagogique.

Le parcours pédagogique vous présente également un ordre de lecture du syllabus; il est donc préférable de suivre cet ordre lors d'un premier apprentissage.

Important Le parcours pédagogique fait partie de l'évaluation continue !

Organisation

Le cours en tant que tel s'étend sur une semaine. Cette semaine est consacrée à l'apprentisage d'HTML5 et des feuilles de styles CSS3. Une présentation du framework Bootstrap sera également faite en semaine 4. Un cours théorique en auditoire vous donnera les éléments essentiels pour pouvoir réaliser un premier site Web. Ce cours sera suivi par 3 séances d'exercices. Durant la première séance d'exercice, vous réaliserez un premier site Web en étant guidé. Pour la deuxième séance d'exercice, vous ré-appliquerez ce qui a été vu à la première séance d'exercice mais sans guide cette fois-ci. La dernière séance servira à terminer les exercices ou à développer votre propre site Web.

L'évaluation (partie HTML)

L'évaluation :

Autres Ressources

Il existe une multitude de possibilités pour apprendre le HTML et les CSS. Les professeurs encouragent les étudiants à effectuer des recherches par eux mêmes : sur le Web(OpenClassRoom par ex., site W3schools, site Alsacreation), à la bibliothèque, ... .
Les liens utiles proposés ci-contre vont dans ce sens.

Toutefois, la matière du cours est celle qui se trouve sur claco.