L’intégrateur Web ou développeur Front-End (anciennement Intégrateur HTML) est le technicien qui va intégrer les maquettes réalisées par le graphiste web et le designer web, en créant des pages HTML lisibles sur tous les navigateurs.
Il doit avant tout maitriser les standards du Web.
Ces standards sont édités par le W3C, ils regroupent les langages de balisages comme le HTML5 ou le XHTML, les langages de présentation de documents comme le CSS, mais aussi d’autres éléments comme le Web sémantique ou le responsive webdesign.
L'intégrateur Web possède des connaissances solides en référencement, en ergonomie et en utilisabilité.
En sont exclus les langages de programmation comme le PHP, ASP, JAVA... qui restent le domaine exclusif des développeurs Web.

Son travail
- Il collabore avec le chef de projet.
Les graphistes Web sont les artistes, ils proposent des ambiances graphiques, les webdesigners eux, mettent ces ambitions graphiques en phase avec les techniques du Web notamment en matière d’ergonomie, d’accessibilité ou de référencement.
Suivant son profil et son degré de compétences, l’intégrateur Web pourra apporter sa réflexion sur le projet ainsi que les modifications qu’il jugera utiles.

- Il transforme un document image en interface
Le plus souvent, les maquettes de sites Web sont créées avec Illustrator ou Photoshop, l’intégrateur transformera ces maquettes en code HTML et CSS lisible par les navigateurs Web et les différents supports.

- Il ajoute des éléments interactifs
A l’aide de javascript ou d’une librairie(ex: jQuery), l’intégrateur Web (motion designer) mettra en mouvement les éléments interactifs de l’interface (menus, carrousel, lightbox…).
C’est pour cela que les intégrateurs Web héritent du titre de "développeurs Front-End". A ne pas confondre avec le métier de développeur Web qui s’occupera plutôt du Back-End.

- Il vérifie la robustesse de son code
Les pages sont elles lisibles sur tous les navigateurs Web ?
Les pages sont-elles bien identiques aux maquettes du graphiste ?
La sémantique Web est-elle correcte ?
Les pages sont-elles optimisées pour faciliter leurs indexations par les moteurs de recherche ?
Après cela le développeur web intervient pour ajouter son code basé sur un langage de programmation de son choix qui va charger le contenu dynamique(texte et images).

- Derniers tests avant mise en ligne
Une fois le travail de l’équipe de développement effectué, l’intégrateur fera une seconde série de tests avant la mise en ligne, ceci afin de vérifier que les pages du site sont toujours optimisées.

Le HTML permet d'inclure :

• des ressources multimédia(images, musique, vidéos...)
• des liens hypertexte
• des formulaires de saisie
• des applications(JQuery, flash/animate CC, Javascript...)

Souvent utilisé avec d'autres langages

• Une ou des feuille(s) de style CSS(Cascading Style Sheets) pour personnaliser l'apparence,
• JavaScript et de nombreuses librairies comme JQuery pour l'interactivité
• PHP, permettant des relations avec la base de données
• ...

Le CSS structure et formate le style de la présentation du document HTML.

Le rendu d'un document HTML stylisé est déterminé par les concepts de boîte, de flux et de grille flexible.

Une grille flexible découpée en plusieurs colonnes (6 / 12 / 24)
un gabarit qui ne dépende pas d'une résolution minimale ou maximale.



Des boites plutôt que des tableaux


Des boîtes positionnées dans le flux ou pas !




Les caractéristiques applicables aux boîtes CSS seront exprimées sous forme de couples propriété: valeur.
Chaque élément de la structure HTML peut être lié à une ou plusieurs propriétés d'affichage paramétrables grâce au CSS.

p { 
    color:#000;
    text-align:center;
  }

Selon les besoins liés à la maquette, les boîtes :

• peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc.
• peuvent être déplacées par rapport à leur position par défaut dans le flux.

Comment fonctionne le HTML et qu'est-ce qu'un langage de balisage ?
Prenons l'exemple de Word : un logiciel de traitement de texte
Votre texte comprend des titres, des paragraphes, des images, vous employez différentes polices et tailles de caractères.
Les paramètres de mise en page que vous utilisez en plus du texte lui-même sont enregisitrés par votre logiciel.
L'affichage du document final ne laisse pourtant apparaitre que le résultat de votre mise en page

Le HTML c'est très similaire ! Les balises sont dans la source mais ne s'affichent pas à l'écran.
Les balises sont les fondations du site web.
Allez sur un site et afficher le code source avec ctrl + u ou clic droit : "afficher code source"
Le code HTML est un code très bavard : Il faut beaucoup écrire pour afficher peu.
Tout contenu est obligatoirement cerné dans une balise, qu'il s'agisse de texte, d'images ou d'éléments multimédias les plus divers.

Les balises permettent de décrire la sémantique du document
ex : titres, paragraphes, images, liste à puces, citations...
On écrit les balises et leurs attributs toujours en minuscule (règle du XHTML)

La balise div est une boite conteneur qui n'a aucune valeur sémantique tout comme le span
Ces balises sont pourtant très utiles pour disposer, contenir styliser des éléments.

Le HTML5 à apporter tout un lot de nouvelles balises renforçant l'aspect sémantique de la structure HTML :
<main></main>
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
...

balise en paire
Ex : <p></p>
<p> En entrant dans la cuisine, Régis posa sur la table le pain, le pâté et la bouteille de vin blanc. </p>

Dés que l'on ouvre une balise paire, on doit impérativement la fermer(règle du XHTML)

balise orpheline ou auto-fermante
Ex : <img /> ou <br/>

La balise <br/> effectue un retour à la ligne.
Elle ne contient pas de texte.
Elle s’ouvre et se referme aussitôt. Elle est auto-fermante.
Même chose pour la balise image <img src="monfichier.jpg" />
Même chose pour la balise du séparateur de texte <hr/>

On peut désormais ne plus écrire le slash dans les balises auto-fermantes : <br> / <img src="monfichier.jpg">

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Ne pas confondre avec <title></title> dans <head></head> qui lui correspond au titre de la page (les 2 sont tout de même intimement lié)
En HTML 4, il est logique d'avoir une seule balise H1 qui décrit le contenu principal de la page en cours. Le reste de la publication serait alors segmenté en balises H2, H3, ...
En HTML 5, il est logique d'avoir plusieurs balises H1, une dans chaque section clairement définie (uniquement si cette segmentation à un sens).
Format, marge, padding et taille configuré par défaut selon le navigateur mais modifiable dans le CSS
Le jeu d'imbrication hiérarchique des titres, joue un rôle important dans le référencement naturel

Commentaires

<!--Commentaires-->
Permet de commenter le code
Pas visible à l'écran
Visible dans le code source : facilite la lecture et le repérage du contenu pour soi ou les collaborateurs

<em> mot-clé en italique </em>
<strong> mot-clé en gras </strong>
Attention : strong ne signifie pas uniquement mettre en gras mais aussi important.
Amélioration du référencement – reconnu comme mots-clés.
Pour mettre du texte en gras sans lui donner une importance sémantique on utilise la balise "b".
<b> Bold </b>
Même chose pour l'italique, on peut utiliser la balise "i".
<i> Italic </i>

<mark> surlignage </mark>
Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte.
Son style par défaut est celui d'un texte surligné en jaune.

Paragraphe et saut de ligne

<p> Ecrire le paragraphe ici </p>
Définit un paragraphe
Entraine un saut de ligne à la fin du paragraphe

<br>
Break
Saut de ligne, à n'utiliser que dans les balises contenant du texte.

L'imbrication hierarchique est intrinsèque à l'écriture du HTML.
Le système d'indentation est primordial dans l'écriture du code
Il permet la mise en évidence ddu modèle d'imbrication.
Ancêtre / Père / enfant / frères ou soeurs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ma première page web</title>
    <meta name="description" content="250 caractères">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link rel="icon" type="images/x-icon" href="img/fashion.icon">
</head>
<body>
    <h1>TITRE 01</h1>
    <section>
        <h2>TITRE 02</h2>
        <p>paragraphe 01</p>
        <ul>
            <li>list item 01</li>
            <li>list item 02</li>
        </ul>
    </section>
</body>     
</html>

résultat

TITRE 01

Le HTML :
Les balises ont principalement 2 rôles :

Structurel
Une page HTML se structure selon un schéma conteneur/contenu que l'on peut représenter comme un arbre.
La bonne réalisation de cette structure est importante car elle détermine l'héritage :
Des ancêtres, les parents, les enfants, les frères et/ou soeurs.
Cela facilitera leur manipulation en CSS et en JavaScript et/ou JQuery.

Sémantique
Les balises, en plus de délimiter "physiquement" des zones, définissent la nature de leur contenu. . Plus votre page est "parlante" au niveau du code, plus elle aura de chance d'être correctement indexée et référencée sur le web.

Le corps d'une page web. Des règles, des contraintes (RWD : responsive web design).
Il faudra le réfléchir, l'écrire, l'ordonner.

EXO 01
Créer un dossier html_css
Ouvrir l'éditeur de code : Visual studio code
Intégrer dans ce fichier les balises :

• DOCTYPE,
• html,
• head,
• meta charset,
• meta description,
• meta viewport,
• title,
• body,
• h1,
• p
• et une balise autofermante

Enregistrer le fichier : ex01.html dans votre dossier
Placer le dossier sur votre espace serveur
Tester votre page en ligne
Installer un éditeur de code :
Visual studio code
Atom
Sublime text
(liveweave : éditeur en ligne)
Emmet : Toolkit pour web-developers

EXO 02 : Questionnaire
Reprendre le fichier précédent et écrire vos réponses dans des paragraphes
1/ Dans quelle balise écrit-on le titre de la page HTML ?
2/ Dans quelle balise écrit-on la balise <body> ?
3/ Quel encodage utilise-t-on pour écrire une page web et à quoi sert il ?
4/ Comment écrit-on une balise ouvrante :
a/ <balise />
b/ <balise>
c/ </balise>
5/ Comment écrit-on une balise auto-fermante :
a/ <balise />
b/ <balise>
c/ </balise>
6/ Quelle balise contient les informations générales de la page ?
7/ Quelle balise contient le code html visible de la page web ?
8/ Quelles sont les règles à respecter lors de l'écriture du code d'une page web ?

EXO 03 : Titres
Reprendre le fichier précédent
Ecrire les différents titres
placez le fichier via FTP dans le dossier html_01
Testez-la page sous Chrome

EXO 04 : Paragraphe et saut de ligne
Reprendre le fichier précédent
Tester les différentes manières de sauter une ligne :
a/ balises <p></p>
b/ balises <br>
c/ insérez un <hr>
Testez-la page sous Chrome
Quelles sont les différences visibles sur la page web entre ces 2 procédés ?
Donnez la réponse sous forme de paragraphe dans votre code

EXO 05 : Structure HTML5
Créer une page HTML5 : ex02.html
Reproduire le zoning HTML dans un document(sans CSS)
UTILISER LES BALISES HTML5 CORRESPONDANTES
Ècrire en plus le nom de chacune de ces balises dans un paragraphe à l'intérieur de la balise HTML5 en question

EXO 06 : Page web
Reprendre la structure html5 et alimenter la avec des titres et paragraphes

Qqes liens utiles :
- Smashing magazine (en)
- Alsacreation (fr)
- CSS Tricks (en)
- W3C (en) & (fr)
- W3C Validator (en)
- mammouthland CSS débutant

Corrections