http://dev.w3.org/csswg/css-flexbox-1/#flex
http://dev.w3.org/csswg/css-flexbox-1/#visibility-collapse
Création d'une page HTML
L’objectif de ce TD est d’écrire une page de base.
Nous allons écrire
Nous allons écrire
Nous allons apprendre les balises de base et le style de base d'une page HTML.
HTML
HTML
HTML |
Apprendre le langage HTML, c’est d’abord apprendre les balises Notre objectif est d’apprendre par l’exemple les balises de base.
La structure et les données
du document
|
|
++
| EditeurStructure de base
La structure de base est donné par défaut à la création d’un nouveau bean
Vous écrirez le code à partir de la ligne 8.
Ecriture de code
Après chaque ajout de code, créér une nouvelle version.
Exemple de création d’un entête
Ecrire le code html suivant, puis créer une version.
  Création d’un menu de navigation Création d’un article Ajouter dans cet article deux sessions.  Ajouter un pied de page Ajouter un formulaire
Créer une section et ajouter un formulaire
 |
CSS
CSS
Navigateur |
Du style
|
Résumé
Nous allons apprendre à écrire des règles CSS
Exemple :
Dans Jsbin tapez dans l’onglet HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
header>ul.header>.item*2//tapez TAB
nav>ul>#item$*2//tapez TAB
</body>
</html>
Completer pour obtenir
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<ul class="header">
<li class="item">1</li>
<li class="item">2</li>
</ul>
</header>
<nav>
<ul>
<li id="item1">a</li>
<li id="item2">b</li>
</ul>
</nav>
</body>
</html>
Nous allons taper dans l’onglet CSS, quelques régle de Base.
Structure de base :
Tapez :
Nous allons apprendre comment selectionner tous les selecteurs :
Nous allons apprendre à selectionner certains selecteurs en fonction de la structure
Nous allons apprendre à selectionner certains selecteurs en fonction de l’appartenance à une classe
Nous allons apprendre à selectionner un selecteur unique
Comprendre CSS
Nous allons créer un fichier de base HTML et un fichier de base CSS avec le Bloc-Notes.
Observons les différents cas pour mieux comprendre les priorités entre fichiers de style.
Un fichier de style
Plusieurs fichiers de style
Style dans le fichier HTML
Exemple de style
Connectez vous sur votre compte jsbin pour récuperer les différentes version créée lors du TD HTML
 |
Il ne vous reste plus qu’à ecrire le code css dans la partie CSS de l’éditeur
 Centrer la page
Tapez le code suivant
La page devrait être centrée.
Transformer la liste en menu
Rechercher la version 2 correspondant à la création du menu dans le td HTM et ajouter les codes suivant et regarder le resultat.
puis ajouter le code
et finalement
 Etude de la position float
Rechercher la version 3 correspondant à la création d’un article dans le td HTM et ajouter les codes suivant et regarder le resultat.
puis tapez les codes
  |
Les éditeurs
Editeur
Editeur
HTML
CSS
JavaSCRIPT
|
Il existe plus d’une trentaine d’éditeurs ! Inutil de passer en revue les avantages et inconvenients de chacun. Nous allons nous focaliser sur la dernière génération : les editeurs interactifs.
Environnement de travail
|
 | Editeur de base
Commençons par ecrire notre code avec le Bloc-notes, et enregistrer le fichier en index.htm.
<!DOCTYPE html>
<meta charset="UTF-8"> <title>Insert title here</title> <p>Fruits <ul> <li>bananes <li>glissantes </ul>
Utilisez le lien W3C validateur pour tester la validité de ce code. Vous devriez obtenir un message surprenant.
This document was successfully checked as HTML5!
La syntaxe de HTML5 est permissive mais il conviendra d’eviter ce genre d’écriture.
Limite
les limites d’un éditeur de base comme Bloc-notes sont évidentes. Outre le fait, qu’il n’y a pas d’auto-completion, l'absence de verification syntaxique pose des problèmes.
Ecrire le code
<!DOCTYPE html>
<meta charset="UTF-8"> <title>Insert title here</title> <h1> <h2> coucou </h2></h1>
Ce code n’est pas valide, le navigateur va prendre une décision pour l’affichage.
 Editeur professionnel
L’éditeur Eclipse un classique en programmation Java est largement utilisé pour le développement WEB entreprise..
Avantage
Le warning en jaune indique que la balise H2 ne peut être à l’interieur de la balise H1.
 Editeur interactifs
Nous vous proposons de découvrir les éditeurs :
Nous allons utiliser jsbin
Création d’un compte
Votre compte vous permettra de retrouver et partager vos fichiers, il est donc important de créer un compte.Une fois connecté, un logo apparait à droite
  Edition de code HTML
Allez dans l’onglet à gauche Bins->New, puis écrire le code html suivant
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1> coucou </h1>
</body>
</html>
Créer une version 1 de ce fichier
Modifier maintenant votre fichier, verifier que vous êtes à la version 2
Votre fichier est visible par tous à cette adresse. Testez cette interractivité en communiquant l’adresse à un camarade.
Partage
Partager un code permettra d’illustrer une idée, de se faire aider …
Voici un exemple de code partagé pour illustrer la notion de canvas et d’intégration de jsbin dans un blog.
Astuce
Pour eviter de taper toutes les balises, comme par exemple <p>...</p>, vous pouvez vous contenter de taper la lettre p et de taper sur la touche tab.
Aide à la saisie
jsbin utilise Emmet.
Voici un exemple
HTML
tapez div>ul>li suivi de tab (une syntaxe CSS)
 
Pas convaincu : taper .item*5 suivi de tab.
Pour le CSS, essayez
 Limite
A chacun de trouver les faiblesses de cette éditeur !
Sublime est un éditeur très utilisé chez les professionnel. |
Inscription à :
Articles (Atom)