Fix + diapos

 - [Présentation des technologies du web](articles/presentation-html5.html)

 - [Première page web](articles/premiere-page-web.html)

 - [Les bases du CSS](slides/introduction-au-css.html)

 - [Propriétés CSS](articles/mise-en-forme.html)

 - [Structures HTML](slides/structure-html.html)

 - [Propriétés CSS](slides/proprietes-css.html)

 - [Gestion de site](slides/gestion-de-site.html)

###  

% Mise en forme CSS

% Stéphane Bouvry

% 2018

# Introduction

## Un monde vaste

Il existe plusieurs 100ènes de propriétés CSS pour gérer la mise en forme des documents.

Nous aborderons ici quelques propriétés usuelles uniquement. Pour plus de détail sur les usages / problème de compatibilité,

le site : [MDN](https://developer.mozilla.org/fr/docs/Web/CSS) centralise une documentation en français exhaustive maintenue par une communauté de développeur (une sorte de wikipedia pour intégrateur Web).

## Préfixe

Les préfixes sont généralement utilisés pour garantir la viabilité d'un propriété sur des navigateurs dattés

ex : [Voir en bas de page](https://developer.mozilla.org/fr/docs/Web/CSS/filter) ou encore [CanIUse](https://caniuse.com)

# Aspect de la font

## font

[Propriété FONT](https://developer.mozilla.org/fr/docs/Web/CSS/filter)

 - `font-family` : Famille de la police de caractère (ou typo), `@font-face`

 - `font-size`: Taille (en EM, REM, PX, %)

 - `font-weight` : Graisse (bold, normal, 100 < 900)

 - `font-style` : italic | normal

 - `font-variant` : Petites capitales (Attention à la font)

## font sans font

 - `line-height` : Interlignage

 - `text-transform` : Capitale, UPPER, lower

 - `color` : #HEXA, rgb, rgba

 - `text-decoration` : underline, none, etc...

## Texte

- `white-space` : Gestion des blancs

- `letter-spacing` : Espacement des lettres

- `text-align` : left|right|center|justify

- `word-spacing` : Espacement des mots

- `letter-spacing` : Espacement des lettres

- `text-shadow` : Ombres/lumières

# Bloc

## Arrière plan

 - `background-color` : couleur

 - `background-repeat` : répétition

 - `background-position` : placement

 - `background-url` : url()

 - `background-size` : COVER / TAILLE

## Habillage

- `border` : Voir doc

- `padding` : espacement intérieur

- `margin` : espacement extérieur

- `border-radius` : Arrondis

- `box-shadow` : Ombre / lumière

- `opacity` : alpha

- `visibility` : hidden (on reviendra sur ça)

- `transform` : scale(X,Y), rotate(Ddeg), translate(X,Y), skew(Xdeg,Ydeg)

- `filter` : blur(PX), greyscale(%), contrast(%), saturate(%) etc...

% Structure HTML

% Stéphane Bouvry

% 2018

# Balises textuelle

## Sémantique

Les balises qui suivent sont affichées avec une certaine mise en forme dans le navigateur, par exemple la balise `<strong>` est affiché en gras. MAIS ce *confort* ne doit pas être retenu lors du choix des balises car l'apparence sera géré par le CSS par la suite.

Donc utiliser ces balises pour la valeur **sémantique** uniquement.

## Bloc

Quelques balises courantes pour structurer des blocs de contenu en HTML

 - `<h1>`,`<h2>`,`<h3>`, `<h4>`, `<h5>`, `<h6>` : Titres

 - `<p>` : Paragraphes

 - `<ul><li>` : Listes

 - `<ol><li>` : Liste ordonée

 - `<blockquote>` : Bloc de citation

 - `<pre>` : Préformatté (un truc de développeur)

 - `<address>` : Pour... les adresses

## Texte

Quelques balises donnant du sens au texte.

 - `<em>` : Emphase

 - `<strong>` : Important

 - `<abbr>` : Abbréviation

 - `<acronym>` : Acronyme

 - `<i>` : Terme technique

 - `<q>` : Citation en ligne

 - `<sub>` : Indice

 - `<sup>` : Exposant

 - `<time>` : Données temporelles

 - `<code>` : Du code

 - `<small>` : Texte de moindre importance

## Autres

 `<figure>` : Encadre une illustration (fonction souvent avec `<img />` et `<figcaption>`)

```html

<figure>

    <img src="guernica.jpg" alt="Guernica">

    <figcaption>Guernica - Pablo Picasso - 1937</figcaption>

</figure>

```

# Balises de structure

## Sémantique toujours

Ces balises sont utilisées pour hiérarchiser les informations et fournir une structure **sémantique**.

## ARTICLE

Délimite un contenu auto-suffisant (pas forcement un article au sens journalistique).

En théorie, le contenu d'une balise article doit pouvoir être réutilisé tel quel.

Exemple : Dans un site d'actualité, une liste d'articles sera une serie de balise article.

```html

<body>

    <h1>Liste des artilces</h1>

    <article>

        <h2>Article 1</h2>

        <p>Texte</p>

    </article>

    <article>

        <h2>Article 1</h2>

        <p>Texte</p>

    </article>

</body>

```

## SECTION

La balise `<section>` permet de regrouper des contenus qui ont un thème communs.

```html

<h1>Liste des artilces</h1>

<section>

    <h2>Peinture</h2>

    <article>

        <h2>Jean-Michel Basquiat</h2>

        <p>Texte</p>

    </article>

    <article>

        <h2>Francis Bacon</h2>

        <p>Texte</p>

    </article>

</section>

<section>

    <h2>Musique</h2>

    ...

</section>

```

## HEADER

Elle délimite un contenu qui va introduire la suite : titre, résumés, métas informations (date de publication, auteur, mots clefs).

```html

<body>

    <header>

        <h1>Titre du site</h1>

        <h2>Accroche</h2>

        <p>prambule</p>

    </header>

    <section>

        <header>

            <h2>Titre</h2>

        </header>

    </section>

</body>

```

## FOOTER

Délimite un contenu qui va conclure : Pied de page

```html

<body>

    <header>

        <h1>Titre du site</h1>

    </header>

    <section>

        <header>

            <h2>Titre</h2>

        </header>

    </section>

    <footer>

        Pied de page

    </footer>

</body>

```

## NAV

La balise `<nav>` permet de délimiter un contenu qui va permettre la navigation.

Cette navigation doit être relative à l'emplacement de la balise (Table des matière d'un article, sommaire d'une section, menu d'un site, etc...).

```html

<body>

    <header>

        <h1>Titre du site</h1>

        <h2>Accroche</h2>

    </header>

    <nav>

        <a href="accueil.html">Actualités</a>

        <a href="peintures.html">Peinture</a>

        <a href="litterature.html">Littérature</a>

    </nav>

</body>

```

## ASIDE

> Il délimite un contenu tanganciellement relatif au contenu auquel il est attaché, sans que le contenu soit dépendant de l'aside pour être compris

On l'utilise généralement sur le site entier (body) ou un  article pour délimiter une information complémentaire. Ex : Citation, glossaire dans un article. Liste de liens dans un site

```html

<article>

    <h1>Titre</h1>

    <p>HTML et CSS</p>

    <aside>

        <h3>Glossaire</h3>

        <dl>

            <dt>CSS</dt>

            <dd>Cascading Style Sheet</dd>

            <dt>HTML</dt>

            <dd>HyperText Markup Language</dd>

        </dl>

    </aside>

</article>

```

# Divers

## Attributs communs

Voici la liste des attributs communs à toutes le balises (et souvent facultatifs) : </p>

| Attribut  | Description

|-----------|-----------------------------------------------------------------

| `class`   | Permet d'assigner une ou plusieurs classes CSS à l'éléments

| `id`      | Fixe l'identifiant (unique) de l'élément.

| `style`   | Définit une "CSS en ligne"

| `title`   | Description complémentaire (affiche une info-bulle)

| `lang`    | Précise la langue utilisée dans le contenu (si différente de celle du document)

## Balises neutres

Ces balises n'ont pas fonction sématique, elles sont (très) utilisées par les intégrateurs pour structurer la page pour la mettre en forme (délimiter des colonnes, des zones)

 - `<div>` : Zone type bloc

 - `<span>` : Contenu texte (dans le flux)