Caouinche

Structure et contenu

Organiser et alimenter

Suite à la création de la maquette graphique, on va devoir structurer et organiser notre code afin de concevoir la page HTML.

Pour ce faire nous allons utiliser des balises de structure. Certaines seront nommées donc ce sera simple de comprendre a quoi elles servent et/ou les positionner, pour d’autres, aucun nom n’existe, ce sera à nous de les créer.

Petite redite :
Quand on code on code dans le body du document.
Il s’agit d’un jeu de blocs dans des blocs, de boites dans des boites, de ce que vous voulez dans ce que vous voulez…

Une balise ouverte doit être fermée. Il y a quelques exceptions de balises auto fermantes que l’on verra par la suite.

Balises de structure

Déterminer les grandes parties du document

Quand on conçoit un design, on imagine un design pour le haut du site qui est la partie qui recevra la navigation, on travaille le contenu principal et on stylise le bas du site. Toutes ces parties bénéficient d’un terme.

header : haut de site
nav : navigation
main : partie principale du site
footer : bas du site

Tout comme vu plus haut il s’agit ici de balise qui doivent être ouverte et fermée. On commence par la balise ouvrante et on termine par la balise fermante, il faut que cette notion d’ouverture fermeture devienne un automatisme.

Ces balises peuvent être en fonction du design les unes sous les autres, mais aussi les unes dans les autres

Balise générique

Quand il n'y a pas de balise de structure

    		
<div>

</div>
	  
  

class et id

Différencier les balises génériques

Si l’on conçoit un document avec les balises de structures et les balises génériques, ce sera facile de comprendre à quoi celle de structure fait référence, mais ce sera complexe de comprendre le sens de celles qui sont génériques, car le terme div ne parle pas.

Pour organiser et permettre par la suite une stylisation de ces balises, on va attribuer aux div des class ou des id dans le but de les différencier.

Une class est un élément qui pourra être répété au sein de la même page HTML

Un id est un élément qui sera unique dans la page HTML

C’est nous qui déterminons le nom de la class ou de l’id, donc c’est à nous de trouver un terme qui sera cohérent par rapport au contenu de la surface en question.

id : unique
class : peu être répété

Si l’on a peur de se tromper on peut tout simplement travailler à l’aide de class, cela ne sera pas faux et ne créera pas d’erreur. Si l’on veut intégrer des id on peut le faire, mais étant donné qu’il s’agit d’un élément qui ne peut être utilisé qu’une seule fois au sein de la page HTML il faut privilégier un bloc qui structurera un espace.

Au niveau de l’écriture on a la balise ouvrante et la balise fermante, l’utilisation soit de l’id ou de la class et l’ajout sur la balise ouvrante d’un égal et de guillemets pour nommer et ainsi différencier la div

Au niveau du nom à choisir pour ses id et class :
– utilisation de termes cohérents avec le contenu, pas de termes farfelus comme papa maman tonton tata
– on reste en bas de casse, on évite les capitales
– pas de numéro pour introduire le nom, même si un numéro peut être utilisé après le nommage principal (ex : 01coucou : Non/coucou-01 : possible)
– si on souhaite parler d’une div class se nommant présentation ou pourra écrire le mot, mais sans l’utilisation de caractères spéciaux, donc pas d’accents, de cédilles…
– si l’on souhaite avoir un nom de class avec plusieurs mots c’est possible, mais ne jamais laisser d’espace être ces termes. Soit on les accroche les un aux autres soit on ajoute un tiret. (ex : presentationguillaume ou presentation-guillaume)

Structure simple de page

Balise de structure et balises génériques

Maintenant que la notion de balise de structure et de balise générique est comprise on peut imaginer une structure de document.

Le contenu : Les titres

Différencier les types de contenus et utiliser la bonne sémantique

    		
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
	  
  

    		
<h1>Titre pricipal</h1>
<h2>Sous titre</h2>
<h3>Sous sous titre ou élément auquel je veux donner une importance</h3>
<h4>Sous sous sous titre ou élément auquel je veux donner une importance</h4>
<h5>Sous sous sous sous titre ou élément auquel je veux donner une importance</h5>
<h6>Sous sous sous sous sous titre ou élément auquel je veux donner une importance</h6>
	  
  

Le contenu : Les textes

Différencier les types de contenus et utiliser la bonne sémantique

La gestion des titres c’est OK, maintenant, gérons les textes.
Un texte pour qu’il soit bien balisé doit être intégré dans une balise p, balise que l’on doit ouvrir et fermer.

Tout comme pour les titres, le contenu du paragraphe se place entre l’ouverture et la fermeture de la balise

Le contenu : Les liens

Différencier les types de contenus et utiliser la bonne sémantique

Un lien est un élément cliquable.
Ce lien peut exister en tant que tel : Je suis un lien qui renvoie quelque part et basta
Ce lien peut exciter en étant un lien hypertext : Un paragraphe et à l’intérieur un élément que l’on souhaite rendre cliquable
Ce lien peut exister autour d’un élément : je suis un bouton et je veux pouvoir être cliquer
Ce lien peut exister sur un élément : je suis une image et je veux être cliquable

Pour créer un lien on utilise la balise a qu’on ouvre et qu’on ferme à laquelle on va donner une destination, un élément à attendre comme une autre page web ou qui peut aussi être un lien mort.

Ce lien peut s’ouvrir dans le même onglet ou dans un nouvel onglet.

Présentation des différentes balises liées aux éléments mentionnés ci-dessus
balise a : le lien. Peut s’ouvrir dans la même page ou une autre page, être placé sur du texte, un bouton ou une image. Le lien de destination peut être une page web ou un lien mort.

Balise button : utilisée pour créer un bouton

Balise img : pour faire appel à une image, balise auto fermante, donc PAS BESOIN de la fermer elle le fait elle même.
La balise image bénéficie d’un attribut src qui permet de déterminer la source qui peut être locale ou distante.
Local : Elle est dans un dossier sur mon ordinateur, je parle donc d’un lien en relatif
Distante : Elle est sur un autre site, je parlerai d’un lien en absolu

Balise br : balise auto fermante pour retour chariot. Un br retour à la ligne, deux br saut de ligne

Exemple d’une page web

Balise de structure, génériques et contenu

Maintenant que la notion de balise de structure et de balise générique est comprise, on peut imaginer une structure de document.

Exemple visuel de structure de site

Des id et class même sur les balises de structure ou de contenu

On complexifie les choses

    		
< !-- ICI JE NE PARLE QUE D'UN H2 -- >	
<h2></h2>

< !-- ICI JE PARLE D'UN H2 AUQUEL J'ATTRIBU UN ID -- >	
<h2 id="logo"></h2>

< !-- ICI JE PARLE D'UN H2 AUQUEL J'ATTRIBU UNE CLASS -- >	
<h2 class="logo-footer"></h2>

< !-- ICI JE PARLE D'UN H2 AUQUEL J'ATTRIBU UN ID ET UNE CLASS -- >	
<h2 id=logo class="logo-footer"></h2>

< !-- ICI JE PARLE D'UN H2 AUQUEL J'ATTRIBU DEUX CLASS -- >	
<h2 class="logo-footer marge"></h2>
	  
  

Balise générique qui se joue uniquement en ligne

Mettre en exergue ou styliser un élément dans un contenu

    		
<div class="contenu">
Je suis du contenu textuel et <span class="fat">je veux qu'on puisse me voir.</span>
</div>


<h2>
<span class="number">02</span> Je suis un sous titre
</h2>

< !-- Source http://dalaipsum.com/ -- >
<p>
The first drawback of anger is that it <span class="rouge">destroys</span> 
your inner peace; the second is that it <span class="rouge">distorts</span> 
your view of reality. If you think about this and come to understand 
that <span class="rouge">anger</span> is really unhelpful, that it is only 
<span class="rouge">destructive</span>, you can begin to distance yourself from anger.
</p>