TECH-CRE | 10|10|13

Secrétariat de cours

TECHNOLOGIE DE CRÉA.

---

RE-CAP

10|10|13

CSS / Merci Maxime !

+ S.E.O.

Sens équi[voc] : SEO* / référencement naturel

*SEO : Search Engine Optimisation • Revisiter ce lien

Le SEO est un système permettant d’améliorer le référencement d’un site web par un moteur de recherche. Il repose sur l’utilisation d’un ensemble de mots-clefs écrits dans le HTML (on parle de référencement naturel). Le but est de faire remonter le site web sur la première page des moteurs de recherche, pour rendre le site visible de façon pérenne, capter du trafic et améliorer son image de marque.

EXPOSÉ / MATHIEU

SUITE DU COURS...

Le CSS (cascading style sheet)

Le HTML est limité dans la mise en page par l’utilisation des attributs. Pour palier à cette limite, le CSS permet de charter la structure du site web, en améliorant la mise en page (gains pratiques et esthétiques). Il permet en plus de simplifier le HTML en le déchargeant de tous les aspects de mise en page (ce qui facilitera le référencement). Le HTML5 combiné au CSS3 permet énormément de créativité ! • Revisiter ce lien.

Il existe 3 types de CSS :

            - incorporé : ce sont les attributs placés directement dans les balises HTML

            - interne : Il se place en head dans le HTML <style> </style>

            - externe : il est écrit sur une feuille de style séparée 

 Généralement, on appel la feuille de style "style.css" / elle est liée au fichier index.html

Le CSS est plus sensible que le HTML, son écriture se fait À LA VIRGULE PRÈS.

 SYNTHAXE : Son écriture se fait sur ce mode :

BALISE {

 ATTRIBUT : XXXXX ;

}

NB : Si un attribut possède plusieurs déclinaisons, on place une virgule pour les séparer :

 Exemple pour proposer des polices "de secours" :

            Fonte-family : XXXXX , YYYYYY, ZZZZZZ ;

 On utilise un sélecteur pour attribuer un style à une partie du HTML

Il y a des sélecteurs de liens, d’idendité ou de classe

Ex :

Dans l’index.html ->    <p class= « exemple »>      </p>

Dans le style.css->        .exemple {        }

CLASS peut être placé plusieurs fois sous le même nom CLASS = "chapitres" alors que ID a un usage unique.

 Une balise dite UNIVERSELLE : <SPAN>

Une balise pour mettre en valeur un élément dans une page (HTML) : 

<span> un mot, une phrase… </span>

Design fluide vs design responsive :

Fluide = adaptation de la largeur selon le type d’écran (100%)

Responsive = dimensions de la page proportionnelles aux dimensions de l’écran + restructuration des éléments en enfilade (les uns en dessous des autres).

Dans le CSS, il est possible de trouver les 2 combinés.

TEMPLATES : On peut trouver des templates ou frameworks pour faciliter la création d’un site web (par exemple sur Skeleton, Bootstop ou YAML). À visiter.