&
Patrick Ngosse
I - De quoi parle-t-on ?
< GENESE HTML />
I - De quoi parle-t-on ?
HTML : HyperText Markup language / Langage de balisage
hypertexte
Langage inventé par Tim Berners-Lee (1989) pour lier ensemble des
documents électroniques avec des options de mise en forme limitées.
HTML est un langage pour décrire l’agencement d’une page et les lier entre
elles.
Gràce à l’HTML on a :
– Un web puissant et pratique (# ligne de commande)
– Un système relativement simple de code de texte en clair (affichage
de la structure)
– Une explosion du web et des documents mis en ligne par
les utilisateurs
< Les pages web deviennent
universelles />
II – Optimisation HTML5
CODE OPTIMISÉ
Caractéristiques :
• Éléments sémantiques
• Éléments médias
• Nouveaux formulaires
• Applications
• Éléments redéfinis
• Suppression d’éléments
+ Accessibilité
+ Référencement
+ Chargement rapide des pages
+ Mobilité (3G / 4G)
Exemple : les nouveaux sites pourront adopter les balises telles
que <header> pour remplacer les <div id= "header"> que l'on trouve sur
la plupart des sites construits actuellement.
Utiliser uniquement HTML en natif, au lieu d'y implémenter
toute une série de plugins JavaScript voire d'extensions
propriétaires.
I – HTML5 pour VS 2013/2015
II – Optimisation HTML5
<!DOCTYPE html>
<html>
<head>
<title></title>
<rel type="text/css" href="#" />
<script type="text/javascript" src="#">
</script>
<meta charset="utf-8" />
</head>
<body>
<header> </header>
<nav> </nav>
<section>
<header> </header>
<article> </article>
<footer> </footer>
</section>
<aside> </aside>
<footer> </footer>
</body>
</html>
Hmtl5 du MVC dans VS2013/2015
I -Quelques balises html
Document
<html></html> : document html
<body></body> : corps du document
Titres
<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... ainsi de suite jusque h6)
Éléments de texte
<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li>: élément d'une liste
<a href=""></a> : lien hypertexte
Tableau
<table></table>: tableau
<th></th> : légende de ligne ou de colonne
<tr></tr> : ligne du tableau
<td></td> : colonne du tableau
Positionnement
<div></div> : délimitation d’un bloc
I -Quelques balises html5
Quelques éléments créant des éléments de rendu En-ligne :
<span> : élément span
<a> : lien
<img> : Insertion d’une image
<em>, <strong> : emphases
<q> : citation
<code> : élément code
<br> : passage à la ligne
<input> : champs de saisie dans un formulaire – etc.
I -Quelques balises html5
Quelques éléments créant des éléments de rendu Bloc :
<div> : bloc container
<h1>, <h2>…<h6> : titres hiérarchisés
<p> : paragraphe
<ul>, <ol>, <li>, <dl>, <dd> : éléments de liste
<blockquote> : bloc de citation
<pre> : texte pré-formaté
<form> : formulaire de saisie
<hr> : filet horizontal – etc.
I -Quelques balises html5
Quelques éléments créant des éléments de rendu Bloc :
<div> : bloc container
<h1>, <h2>…<h6> : titres hiérarchisés
<p> : paragraphe
<ul>, <ol>, <li>, <dl>, <dd> : éléments de liste
<blockquote> : bloc de citation
<pre> : texte pré-formaté
<form> : formulaire de saisie
<hr> : filet horizontal – etc.
I - De quoi parle-t-on ?
< HTML5 />
< CSHTML />
I - De quoi parle-t-on ?
De l’HTML5…. vers le CSHTML5
<form action="[Link]" method="get"> @using ([Link]("Login", "Account", new { ReturnUrl = [Link] }, [Link], new { @class =
"form-horizontal", role = "form" }))
<fieldset> {
<legend></legend> @[Link]()
<label>Informations</label> <h4>Informations</h4>
<input id="prenom" type="text"/> <hr />
@[Link](true, "", new { @class = "text-danger" })
<br /> <div class="form-group">
<label>Sexe :</label> @[Link](m => [Link], new { @class = "col-md-2 control-label" })
<select id="sexe"> <div class="col-md-10">
@[Link](m => [Link], new { @class = "form-control" })
<option value="H">Homme</option> @[Link](m => [Link], "", new { @class = "text-danger" })
<option value="F">Femme</option> </div>
</select> </div>
<br /> <div class="form-group">
@[Link](m => [Link], new { @class = "col-md-2 control-label" })
<label>Mot de passe</label> <div class="col-md-10">
<input type="password" /> @[Link](m => [Link], new { @class = "form-control" })
<br /> @[Link](m => [Link], "", new { @class = "text-danger" })
</div>
<label>Avez-vous des enfants:</label> </div>
<input id="enfants" type="checkbox" /> <div class="form-group">
<br /> <div class="col-md-offset-2 col-md-10">
<label>Dites quelque chose sur vous</label> <div class="checkbox">
@[Link](m => [Link])
<textarea id="apropos" @[Link](m => [Link])
style="height:50px"></textarea> </div>
</fieldset> </div>
</div>
<input type="submit" value="Envoyer le formulaire" /> <div class="form-group">
</form> <div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
<p>
@[Link]("Register as a new user", "Register")
</p>
@* Enable this once you have account confirmation enabled for password reset functionality
<p>
@[Link]("Forgot your password?", "ForgotPassword")
</p>*@
}
I - De quoi parle-t-on ?
< HTML /> + <CSS />
I - De quoi parle-t-on ?
Rappel sur HTML // CSS : le fond et la
forme
/> HTML = le contenu
/> CSS = la présentation
- Les CSS sont apparus lors de la guerre des navigateurs (un CSS utilisant les
normes
du navigateur).
Le W3C associa rapidement le CSS1 à HTML.
Évolution en CSS2 (positions, accessibilité
…)
À l’instar de l’HTML5, le CSS3 fait l’objet d’un
travail
en ce qui concerne sa norme.
II – Ce qui va changer
DOCUMENT
Déclaration de document :
Avant
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN"
"[Link]
----------------------------
Après
<!DOCTYPE html>
III – Les enjeux
< FOCUS ON/>
III – Les enjeux
1 // DES PROJETS DE PLUS EN PLUS ACCESSIBLES
« Mettre le web et ses services à la disposition de tous les individus,
quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur
langue maternelle, leur culture, leur localisation géographique ou leurs
aptitudes physiques ou mentales. »
Tim Berners Lee
[Link]
III – Les enjeux
2 // UN RÉFÉRENCEMENT AMÉLIORÉ
Un code pour une meilleure lisibilité des
référenceurs
(Robot crawling compatibility)
IV – PLAY HTML
< EXEMPLES />
IV – PLAY HTML
À VOIR SUR LE WEB : LES AWARDS
[Link]
HTML5 : [Link] /html5
CSS3 : [Link]
The awards for design, creativity and innovation on the Internet,
which recognize and promote the best web designers in the
world
IV – PLAY HTML
DES RESSOURCES EN LIGNE
[Link]
V – Orienter les projets web
vers…
< Y ALLER ? />
V – Orienter les projets web
vers…
> POINT SUR LES MEDIAS
VI – À voir sur le net
<
RESSOURCES />
VI – À voir sur le net
Valider son code Générateur instantané et multi-navigateurs d'effets
[Link] CSS3
[Link]
Analyser son site, HTML5 est il risqué
[Link] Reconnaissance de HTML5 et CSS3 sur les navigateurs
[Link]/litmus
Compatibilité des navigateurs mobiles
[Link] HTML5 – Convertissez vos vidéos et uploadez les.
[Link]
[Link]
HTML 5 Doctor
[Link]
Astuces navigateurs
[Link]
HTML 5 W3C Working Draft
fonctionner-le-html5-dans-ie-et-firefox/
[Link]
Web Forms 2.0 spec
[Link]
-
work/
< MERCI />
patrickngosse@[Link]
[Link]/[Link]
@Ngossepatrick
< Mai /> // 2016
