Formation Web 2013

Avant-propos Cette formation n’a pas pour but de vous apprendre à créer un site avec Google sites, canalblog… Cette formation n’a pas pour but d’installer un portail Web (Drupal, Wordpress…) sur votre site. Cette formation a pour but de vous apprendre à réaliser intégralement votre site de a à z. Pour la beauté du geste, pour le respect des standards et pour pouvoir faire ce que l’on veut. Bien sûr, on ne déconseille pas les outils ci-haut. Mais ce n’est pas le but de cette formation que d’en parler !

Plan Le HTML : structurer son texte Le CSS : mettre en forme le texte Combo : mettre en forme la structure ! Conclusion Des annexes à lire chez soi

Comment ça marche, une page Web ? Le navigateur demande une page à un serveur, celui-ci retourne du code HTML et CSS qui est interprété par le navigateur. Astuce : notre ordinateur peut très bien jouer le rôle du serveur ! Tout fichier.html enregistré sur notre ordi peut donc être affiché normalement : on dit que c’est une page locale.

HTML : HyperText Markup Language Hypertext : Pour faire bref, tout document qui contient des liens. Markup language : langage avec des balises … On reparle de ces fameuses balises d’ici 5 minutes HTML définit le sens (sémantique) de la page Web : ici, c’est le menu, ici une liste à puces, ici un paragraphe… Minute grammar nazi : "langage HTML", c'est un pléonasme. Comme ça c'est dit.

HTML : les principes Il existe de nombreux standards HTML (HTML 4 et consorts, xHTML 1.0 Strict, HTML 5)… Nous apprendrons le HTML5, dernière version en date de HTML (nota : elle n’est pas encore officiellement sortie !).

Principe du HTML : la syntaxe Les commentaires :, pour s’y retrouver dans le code. Les balises : le cœur de HTML, les instructions que suivra le navigateur : Du texte Les paramètres : du texte Attention à toujours bien fermer les balises dans le bon ordre ! Bla Bla peut faire tout planter.

Principe du HTML : la syntaxe Architecture d’une page : testez vous-mêmes ! Mon titre Hello world! !DOCTYPE : on dit au navigateur que c'est du HTML : tout le contenu de la page : les informations sur la page (le titre, l'encodage, où aller chercher le CSS….) : le contenu utile, celui qui sera affiché

Les paragraphes Taper son texte comme dans Word n'est pas très efficace… HTML supprime tous les retours à la ligne et les espaces multiples ! Pour afficher un paragraphe : Mon paragraphe Magie, les deux paragraphes sont séparés ! Attention, on ne peut pas imbriquer des paragraphes ! Blabla Re-bla Bla n'est pas valide.

Les pas-paragraphes (balises de type block) Il y a des balises qui ne doivent pas être placées dans un paragraphe : Les titres h1, h2, …, h6 Les listes : pour une liste sans numéro, sinon. Chaque élément de la liste est entre deux balises Element 1 de la liste Element suivant etc.

Et dans son paragraphe ? (balises inline) Mettre en emphase : (par défaut, mettre en italique) Insister sur un point : (par défaut, mettre en gras) Aller à la ligne :

Enfin de l'hypertexte ! Faire un lien : Mon lien Oui mais… Un lien vers quoi ? autrepage.html Une autre page de mon site (lien relatif);../dossier/uneautre.html (.. = dossier parent) #ancre la balise dans la page qui a le paramètre id="ancre" Envoyer un mail ! Préférez les liens relatifs. Attention aux deux points.. ! Pas d'antislash, même sous Windows.

Les images monimage : comme pour les liens, bien préciser le chemin. Le paramètre alt est très utile pour les malvoyants, et fait partie des standards, ne l'oubliez pas !

Encore ? Parmi les choses utiles à connaître : La vidéo et l'audio Les formulaires Les tableaux cf l'annexe en fin du diaporama

N'oublions pas la sémantique : un bout de la page parlant d'un sujet précis : partie indépendante de la page, qui peut être comprise sans le texte extérieur : aide à la navigation (généralement, les liens du menu)

N'oublions pas la sémantique (bis) : l'en-tête d'un article, d'une section, ou de la page entière. : pareil, mais avec le pied-de-page. : texte que l'on met à côté du texte principal. Note : toutes ces balises sont de type block

La sémantique : petit exemple

Application : notre site web !

Deuxième partie : la mise en forme et CSS. Pour l'instant, notre site est hideux… Dites bonjour à CSS !

CSS : Cascading Style Sheet Style sheet : le CSS est ce qui nous permet de mettre en forme (donner du style) à notre page Web. Cascading : On peut surcharger (appliquer plusieurs styles différents) un même élément, par le biais de l'héritage. Minute grammar nazi : "feuille CSS" est un pléonasme, et "feuille de style CSS", n'en parlons pas…

Comment insérer du CSS ? Meilleure solution : depuis un fichier.css, appelé dans la balise Autre solution : dans la partie, entre les balises Solution à l'arrache : directement dans les balises

Syntaxe du CSS Commentaires : /* Mes commentaires */ Toute instruction CSS se finit par un point-vigule. Une instruction ressemble à ceci : propriété: valeur; On applique un style à un élément en particulier: element { text-decoration: underline; color: yellow; }

A qui appliquer du style ? img {} : à toutes les balises h1, h2, h3, h4, h5, h6 {} : à toutes les balises,, etc. balise1 balise2{} : toutes les balises contenues dans une balise a img { border: none; }

Plus de précision : class et id On peut mettre à n'importe quelle balise le paramètre class: On sélectionne alors en CSS toutes les classes texte_en_jaune par :.texte_en_jaune Pareil pour les id :, sélectionné par : #unique Attention, chaque id doit être unique dans la page HTML ! Sinon utiliser class

Encore plus de précision : span et div span : balise inline Bla bla bla. div : balise block Bla bla bla. Bla bla. Bla bla ! Bla ?

Toujours plus loin a:hover (marche aussi avec n'importe quelle autre balise) Un lien sur lequel on passe la souris. a:visited (ne marche que avec ) Un lien déjà visité Et de nombreux autres… cf annexes.

Le style en CSS : la police font-family : Arial, "Comic Sans MS", "Sans Serif"; Donne la police avec laquelle on veut écrire, par ordre de préférence. font-size: 150% | 12px | large; Taille de la police. C'est une taille absolue en pixels (px), relative en % (par rapport à la taille normale), ou un mot-clef. Italique et gras : font-style : normal | italic font-weight : normal | bold

Le style en CSS : le texte text-decoration: underline | line-through | overline Souligne, barre ou met une barre en haut du texte. text-align: left | center | right | justify aligne le texte à gauche, au centre, à droite, ou le place en justifié. text-indent : 12px décale le texte de 12px vers la droite.

Le style en CSS : les couleurs color: blue | red | orange | … color: #5F86A3; color: rgb(255, 23, 156, 0.7); Donne la couleur du texte blue, red, … : code HTML de couleurs. Ils sont tous disponibles ici.ici #5F86A3 : code hexadécimal de la couleur. C'est par là.là rgb : code rgb, plus l'opacité. 0 pour transparence totale, 1 pour l'opacité complète. opacity: 0.5; Donne la transparence d'un attribut de type block.

Le style en CSS : l'arrière-plan background-color : red | green | #FAC113 La couleur de l'arrière-plan (mêmes possibilités que color) background-image: url('lienvers/monimage.png'); Une image en arrière-plan ! background-repeat: repeat | no-repeat | repeat-x | repeat-y Répétition ou non de l'arrière-plan, suivant l'axe horizontal ou vertical (pratique pour les images trop petites)

Les bordures border-style: none | solid | dashed | … Le style de la bordure. border-width: 3px; L'épaisseur de la bordure. border-color: blue | #F4F4F4 | rgb(45,42,156) Devinez. Border-radius : 5px Un arc arrondi de rayon 5px pour les coins de la bordure.

Partie 3 : intégrer notre page Web

Faire flotter des éléments float : left | right | none Faire flotter un bout de texte/image… sur la gauche/droite : il s'échappe du flux (il flottera à côté du texte qui le suit dans le code) clear: none | left | right | both Pour annuler les effets de flottants à gauche, à droite, des deux côtés.

Emboîtement, block et inline Balise block : prendra toute la place disponible, et place automatiquement un espace avant et après le block h1 … h6, p, div, table, ul, ol, … Balise inline : elles se placent les unes à côté des autres, ne prennent que la place dont elles ont besoin. span, a, em, strong, img, … On a déjà vu dans la deuxième partie comment appliquer du style aux inline. Maintenant, c'est le tour des blocks !

Les marges Marge extérieure : margin Marge intérieure : padding margin-left, margin-right, margin-top, margin-bottom Idem pour padding Sur des balises block uniquement !

La taille width: 500 px; height: 23 px; Encore une fois, block uniquement.

Positionnement (block ou inline) position: static : position normale (cas par défaut) fixed: position fixe sur l'écran, même en défilant absolute: par rapport au plus proche parent déjà positionné relative : par rapport à son positionnement en static (un peu casse-gueule) Puis : top: 25px; left: 6px; right: 20px; bottom: 0px; absolute relative

Changer le display display : block | inline | none Si on veut passer une image en block, c'est possible ! On peut aussi cacher un élément avec display: none;

Application ! Réalisation du site formationweb.via.ecp.fr Au boulot !

Conclusion Il paraît qu'il faut toujours en faire une Un code HTML qui respecte la sémantique, c'est : la possibilité d'avoir une charte graphique, une vraie ; du temps gagné lors de l'intégration du CSS ; un plus grand respect des normes HTML ; un meilleur référencement ! HTML, c'est aussi beaucoup d'essais : ne désespérez pas, c'est en forgeant qu'on devient forgeron !

Des ressources utiles Un bon ami à moi : Google Openclassrooms.com (ex SiteduZéro) : plein de tutos, de bons forums. Alsacréations.com : plein de tutos, plein d'articles. w3schools.com : LA référence. Après tout, ce sont eux qui éditent HTML, alors…

CSS sans peine : bootstrap & lessCSS Bootstrap : un CSS prémâché il ne reste plus qu’à utiliser les paramètres déjà définis Utilisé notamment par la NASA et MyECP Un tutoriel qui tient en quelques pages Less : du CSS dynamique Plus besoin de se taper des ctrl+c ctrl+v à rallonge. avec-less

Ca y est C'est fini ! \o/ (enfin)

Pour aller plus loin

Annexe : HTML comme vous ne l’avez jamais vu Drag n’ drop Audio, vidéo Le dessin avec canvas, map HTML5 propose des choses absolument folles (mais pas encore compatibles avec tous les navigateurs) : (en particulier, rubrique HTML5 News)

Annexe : sélecteurs utiles en CSS a:active : quand on clique sur le lien a:focus : quand le lien vient d'être cliqué p:first-letter, p:first-line : respectivement la première lettre et la première ligne d'un paragraphe.

Annexes : CSS, j’aime trop ton style Plein d'autres sélecteurs, citons notamment :before et :after Des infobulles personnalisées (plutôt compliqué) : Des polices à foison ! votre-site-web-avec-html5-et-css3/la-police-2

Annexes : les tableaux (balise block) Ma légende du tableau, facultatif Colonne1 Colonne2 Colonne3 cellule1 cellule2 Cellule3

Annexes : les formulaires Trop de choses pour être dites ici… Tout est sur votre-site-web-avec-html5-et-css3/creer-un-formulaire-3 votre-site-web-avec-html5-et-css3/creer-un-formulaire-3

display Il existe aussi display:inline-block. Ca permet de donner une height et une width à une balise de type inline, ce qui peut être très très utile.

Annexe : un site extensible Pour créer un site qui s'adapte à la taille de l'écran, il faut définir la taille du corps : body{ witdth:100%; } (en %, c'est capital). On peut alors définir toutes les margin, padding en % aussi. margin:auto permet de centrer le contenu d'un block, s'il est inclus dans un bloc à qui on a défini une taille. Autres propriétés utiles : min-width, max-width, min-height, max-height.

Annexe : le code-source du site Regardez donc le code-source, notamment de la version avancée du site, il peut vous réserver encore quelques découvertes !