Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
objectif général :Concevoir la structure sémantique du contenu d’un site web
objectifs opérationnels :
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire
Veille HTML5/CSS3 sur Twitter: @fgribreau
Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.
Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)
objectif général :Concevoir la structure sémantique du contenu d’un site web
objectifs opérationnels :
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire
Ce cours reprend le web de ses origines (HTML, CSS) aux dernières normes HTML 5 / CSS3. On y voit aussi du Vanilla JS et du JQuery avec une pincée de XML et de JSON. Tout pour le client quoi ...
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
HTML5 et le SEO : quelles opportunités ?Eroan Boyer
Le diaporama projeté par Eroan Boyer pour la conférence "html5 et le SEO" le samedi 27 octobre 2012 au SEOCamp de Nantes.
Plus d'infos : http://www.eboyer.com/referencement/1072-html5-seo/
Mon twitter : http://twitter.com/eroan
Ce cours reprend le web de ses origines (HTML, CSS) aux dernières normes HTML 5 / CSS3. On y voit aussi du Vanilla JS et du JQuery avec une pincée de XML et de JSON. Tout pour le client quoi ...
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
HTML5 et le SEO : quelles opportunités ?Eroan Boyer
Le diaporama projeté par Eroan Boyer pour la conférence "html5 et le SEO" le samedi 27 octobre 2012 au SEOCamp de Nantes.
Plus d'infos : http://www.eboyer.com/referencement/1072-html5-seo/
Mon twitter : http://twitter.com/eroan
objectif général : Mettre en forme le contenu d’un site web
objectifs opérationnel :
Insérer du style dans une page HTML
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
Nous pensons toujours que l’intégration d’un e-mail n’est pas chose facile, mais… ce n’est pas spécialement le cas…
Je vais essayer de vous redonner gout à l’intégration d’e-mail en vous montrant quelques cas pratiques qui montrent le contraire.
Nous allons voir que beaucoup d’éléments graphiques peuvent être issu de ‘snippet’ de code qu’il suffit de styliser en fonction de la charte graphique de vos clients mais également qu’en respectant certaines règles de bonnes pratiques, votre code sera fonctionnel sur la majorité des clients/browsers e-mails.
L’intégration d’e-mail est un art, un art ou rigueur et précision sont de la partie…
La meilleure application est une
page blanche.
Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.
HTML 4 pour les nuls » par E. Tittel, N. Pitts et C. Valentine
« HTML : précis et concis » par J. Niederst et J. Guérin au édition O’Reilly
« Introduction à HTML et CSS » par E. Sarrion au édition O’Reilly
« HTML et XHTML : La référence » de C. Musciano, B. Kennedy et J. Guérin au édition O’Reilly
N’importe quel autre bouquin sur HTML…
2. le HTML
Hyper Text Markup Language
langage descriptif composé de balises
interprété par le navigateur
page HTML = simple fichier texte
(blocnotes, vim, ...)
3. les déclarations
codage des caractères :
<?xml version="1.0" encoding="iso-8859-15" ?>
norme (ici XHTML 1.0 strict) :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
4. le validator !!!!
Il faut respecter les règles de syntaxe !
page valide = même sens pour tous les navigateurs
Une page HTML valide est une page qui passe
le test du validator (http://validator.w3.org)
7. l'entête
<head> ... </head>
informations qui ne seront pas affichées sur la page HMTL
titre de la page : <title>ma page html</title>
informations utilisées par les moteurs de recherche :
<meta name="description"
content="Formation HTML" />
8. le corps
<body> ... </body>
informations qui vont s'afficher dans le navigateur
13. au fil du texte
les liens :
<a href="http://via.ecp.fr">page web</a>
<a href="page2.html">autre page</a>
<a href="mailto:perms@via.ecp.fr">email</a>
14. au fil du texte
les images :
<img src="ma_photo.jpg" alt="description" />
une image lien :
<a href="http://www.perdu.com">
<img src="lost.png" alt="lost" /></a>
15. <?xml version="1.0" encoding="iso-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>titre</title>
</head>
<body>
<p>Ceci est un paragraphe</p>
<hr/>
<h1>bonjour!</h1>
<h3>moyenjour.</h3>
<h6>mauvaisjour.</h6>
<p>je vais aller
<a href="http://www.via.ecp.fr">
rendre visite à via</a>. via c'est bien
<img src="smiley.jpg" alt=":)" />.</p>
<ul>
<li>un élément</li>
<li>un autre élément</li>
</ul>
<ol>
<li>premier élément</li>
<li>deuxième élément</li>
</ol>
</body>
</html>
17. les CSS ou feuilles de style
CSS : cascading stylesheets
mise en page
dans l'entête :
<link href="style.css" type="text/css"
rel="stylesheet" title="blablabla" />
18. structure d'une feuille de style
notion de classe
p.pouet{ balise.nom{
font-size: 12px; propriété: valeur;
background-color: red; propriété: vlaeur;
} }
Pour appliquer la classe, il suffira ensuite d'ajouter l'attribut
class="nom" dans le code HTML.
exemple : <p class="pouet">bla bla bla</p>
classe applicable à tout type de balise : .pouet {...}
classe appliqué à toutes les balises d'un type : p { ... }
19. autres manières de spécifier un style
toujours dans l'entête :
<style type="text/css">
table.truc{
border-width: 2px;
background-color: blue;
}
</style>
ou dans la balise elle même :
<h1 style="text-decoration: underline;">bla bla</h1>
20. quelques propriétés
pour le texte:
font-family: Garamond, Times New Roman, serif;
font-size: taille;
font-style: normal | italic;
font-weight: normal | bold | bolder | lighter;
color: couleur;
text-align: left | center | right | justify;
text-decoration: none | underline;
26. annexe
les couleurs :
#RRVVBB en hexadécimal
ou #RVB en hexadécimal
ou rgb(255,0,128) en décimal
ou encore red, blue, white, green, black...
les tailles et positions :
en pixels : 12px
ou en centimetres : 12cm
ou encore en points : 12pt
et même en pourcentage de l'élément parent : 12%
voire parfois par rapport à la taille de la police : 12em
31. adresses
les adresses peuvent être spécifiées de deux manières:
adresse absolue:
http://www.cti.ecp.fr/~goretg6/site/page.html
adresse relative:
(c'est à dire par rapport à l'emplacement de la page web)
dans le même répertoire: page.html
dans un sous répertoire: rep/page.html
dans le répertoire parent: ../page.html
etc ...