PARTIE I LES BASES BIENVENUE Ce cours a

PARTIE I LES BASES

BIENVENUE ! • Ce cours a été optimisé pour des personnes souhaitant : – Travailler et optimiser leur référencement, – Créez des sites innovants et optimisés, • Une approche directe et concrète des langages HTML et CSS.

PRESENTATION • Pierre – 24 ans • Ecole de Commerce – Master 2 Entrepreneur. • Employé chez Presta. Shop. • Créé 5 e-commerces et a beaucoup étudié les problématiques de référencement.

PRESENTATION • Plus de formations sur mon site : pierre-giraud. fr • N’hésitez pas à vous abonner à ma chaîne You. Tube ! • Pour me suivre : – – – Twitter : @pierregird Facebook : Facebook. com/Pierre. Giraud. fr G+, Twitter : cherchez Pierre Giraud

POURQUOI APPRENDRE LE HTML & LE CSS ? • Les langages HTML et CSS sont incontournables car n’ont pas de concurrent et sont à la base de tout projet de développement web; • Une base pour comprendre son site, le modifier et résoudre les problèmes au besoin; • Indispensable pour optimiser son référencement; • Pour comprendre et se faire comprendre des développeurs avec qui vous travaillez.

HTML & CSS : DEFINITION • HTML = Hyper. Text Markup Language. – Créé en 1991 – Fonction : donner du sens et structurer le contenu • CSS = Cascading Style Sheets – Créé en 1996 – Fonction : mettre en forme le contenu en lui

LES VERSIONS HTML & CSS • Versions actuelles : – HTML 5 & CSS 3 • Toutes les deux non finalisées (encore en développement) mais totalement stables et déjà très largement utilisées. • Introduisent de nouvelles fonctionnalités très attendues : insérer des vidéos, bordures arrondies, etc.

UN MOT SUR LE XHTML • XHTML = Extensible HTML – Version plus stricte, plus codifiée d’HTML… Donc plus difficile à utiliser ! – Créé en 2000 pour succéder au HTML puis abandonné en 2009 (ou plus exactement intégré dans le HTML 5).

L’EDITEUR DE TEXTE • Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur de texte, gratuit • • • Pc = Komodo, Note. Pad++, etc. Mac = Komodo, Text. Wrangler, etc. Linux = Komodo, g. Edit, etc. • Première chose à faire : changer la couleur du fond !

LES FONDATIONS DU HTML

ELEMENTS, BALISES & ATTRIBUTS • Eléments = – Définissent des objets dans notre page web • • • L’élément p définit un paragraphe, Les éléments h 1, h 2, … , h 6 définissent des titres, L’élément a définit un lien… – Généralement constitués d’une paire de balises : • Balise ouvrante : <p> • Balise fermante : </p> • Exception : balises orphelines comme <br/>

ELEMENTS, BALISES ET ATTRIBUTS • Attributs = – Propriétés utilisées pour donner des indications supplémentaires aux éléments. – Ex: Indiquer la cible d’un lien. Balise ouvrante Balise fermante <a href=“http: //www. youtube. com”> Le site You. Tube </a> attribut élément a

STRUCTURE D’UNE PAGE EN HTML 5 • Doctype : <!DOCTYPE html> • Eléments : – html, – head, – title, – meta, – body.

BONNES PRATIQUES, REGLES & COMMENTAIRES • Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez les refermer dans le bon ordre : <a> <b> </a>. • Indentez votre code et commentez le pour le rendre plus lisible, plus professionnel et plus simple à comprendre.

BONNES PRATIQUES, REGLES & COMMENTAIRES • <!-- Voici un commentaire en HTML --> ! Tout le monde peut voir votre code HTML ! N’écrivez donc pas d’infos sensibles en commentaires comme des mots de passe !

HEADING, PARAGRAPH, BREAK • • • L’élément p définit un paragraphe. L’élément br crée un retour à la ligne. Les éléments h 1, h 2, … jusqu’à h 6 définissent des titres (par ordre d’importance). • Vous ne devez jamais utiliser des éléments pour appliquer un style à votre contenu !

STRONG, MARK, EMPHASIS • L’élément strong est utilisé pour définir un contenu comme important. • L’élément em est utilisé pour définir un contenu comme assez important. • L’élément mark est utilisé pour faire ressortir du contenu.

LISTES ORDONNEES & NONORDONNEES • Pour créer une liste non-ordonnée, on utilise les éléments ul (pour la liste) et li (pour les éléments de la liste). • Pour créer une liste ordonnée, on utilise ol et li.

LISTES DE DEFINITIONS & LISTES IMBRIQUEES • Les listes de définition sont utilisées pour… définir des termes. – On utilise les éléments dl, dt et dd. – Le terme à définir doit toujours être placé avant la description. – On peut avoir plusieurs descriptions pour le même terme ou plusieurs termes pour une description.

LISTES DE DEFINITIONS & LISTES IMBRIQUEES • Vous pouvez très simplement imbriquer des listes en HTML : <ul> <li> Elément 1 </li> <li> Elément 2 <ol> <li> Elément 1 ol </li> <li> Elément 2 ol </li> </ol> </li> </ul>

LIENS INTERNES ET EXTERNES • Liens internes = entre 2 pages d’un même site. • Liens externes = d’un site vers un autre site. • Pour créer des liens, on utilise l’élément a avec son attribut href (Hypertext reference).

LIENS INTERNES ET EXTERNES • Pour créer des liens internes, on utilise un chemin relatif. 3 cas : – – – Même dossier : href = « page 2. html » Sous-dossier : href = « sous_dossier/page 2. html » Dossier parent : href= «. . /page 2. html » • Pour des liens externes, on spécifie un chemin absolu. La valeur de l’attribut href est l’adresse du site. • Pour ouvrir le lien dans une nouvelle fenêtre / onglet,

AUTRES TYPES DE LIENS • Lien menant à un autre endroit de la même page web : spécifier un id puis #. • Lien pour envoyer un mail avec mailto: • Lien pour télécharger un fichier en précisant un chemin relatif.

ELEMENTS STRUCTURELS DU HTML 5 • Créés pour améliorer la sémantique et mieux structurer les pages web. • Eléments introduits : header, nav, article, section, aside et footer. • Vont avoir un rôle de plus en plus important dans le futur concernant l’optimisation du référencement.

VALIDATION & COMPATIBILITE • Différents navigateurs peuvent produire différents résultats à partir d’un même code. • Pourquoi ? Différents navigateurs et différents versions de chaque navigateurs coexistent + navigateurs mobiles ! • Nécessité de tester son code sous différents navigateurs !

VALIDATION & COMPATIBILITE • Le W 3 C met deux outils à notre disposition : – Validateur HTML : http: //validator. w 3. org – Validateur CSS : http: //jigsaw. w 3. org/cssvalidator • Vous devez vous efforcer d’avoir toujours un code valide.

LES FONDATIONS DU CSS

SELECTEURS, PROPRIETES, VALEURS • Un sélecteur détermine à quel élément un style doit être appliqué. • Une propriété détermine le style qui va être appliqué à un élément. • Une valeur détermine le comportement d’une propriété.

SELECTEURS, PROPRIETES, VALEURS • Exemple: sélecteur propriétés p { color: blue; font-size: 16 px; } valeurs

OÙ ECRIRE LE CSS ? • 3 possibilités : – Dans l’élément head du document HTML, – Dans la balise ouvrante d’un élément, – Dans un fichier CSS séparé. Il est recommandé d’utiliser la dernière méthode. • Pour lier un fichier HTML avec un fichier CSS, on écrit : <link rel= « stylesheet » href= « fichiercss. css » />

LES COMMENTAIRES EN CSS • Les fichiers CSS sont très vite très longs : il est donc essentiel de les commenter proprement ! • Un commentaire en CSS : /* Je suis un commentaire CSS */

LES SELECTEURS SIMPLES • On appellera sélecteurs simples éléments HTML qui ne possèdent pas d’attribut (ex : p). • Ces sélecteurs doivent être préférés autant que possible car ils requièrent moins de code que des sélecteurs plus complexes et le code s’exécute donc plus vite. • Limite : Comment appliquer un style différent à deux

CLASS & ID • Class et Id sont deux attributs HTML, créés pour pouvoir appliquer différents styles à des éléments de même type. • Class permet également d’appliquer le même style à différents élément HTML (en leur appliquant la même valeur pour l’attribut class). • Différence ? Id ne peut être utilisé que pour cibler un unique élément, au contraire de class.

DIV & SPAN • Div et Span sont deux élément HTML créés, entre autres, pour pouvoir appliquer un style à du contenu n’ayant pas de balise. • Div et Span servent de containers mais ne possèdent aucune valeur sémantique. On doit les utiliser seulement si cela est nécessaire.

ELEMENTS DE TYPES BLOCK & INLINE • Tout élément, en HTML, est soit un élément de type block, soit un élément de type inline. • Div = élément de type block • Span = élément de type inline

ELEMENTS DE TYPES BLOCK & INLINE • Les élément de type block… – – – Commencent sur une nouvelle ligne, Occupent toute la largeur disponible, Peuvent être imbriqués les uns dans les autres et peuvent contenir des élément de type inline. • Les éléments de type inline… – Ne commencent pas sur une nouvelle ligne, – Occupent seulement la largeur nécessaire, – Peuvent contenir d’autres éléments de type inline mais pas d’éléments de type block.

ELEMENTS DE TYPES BLOCK & INLINE Eléments block p Eléments inline em h 1, h 2, h 3… strong header, article, footer… mark ol, ul, dl a table img

SELECTEURS AVANCES • Il est possible de combiner les sélecteurs pour cibler précisément du contenu. • Sélecteur universel (sélectionne tous les éléments) : * • Appliquer un style aux élément A et B : A, B { propriété: valeur; } • Sélectionner un élément B contenu dans A :

SELECTEURS AVANCES • Sélectionner le premier élément B suivant un élément A : A + B { propriété: valeur; } • Sélectionner tous les éléments C possédant un attribut en particulier : C[attribut] { propriété: valeur; } • Sélectionner tous les éléments D possédant un attribut en particulier et une valeur exactement : D[attribut= « valeur » ] { propriété: valeur; } • Sélectionner tous les éléments E possédant un attribut en particulier et une valeur : E[attribut*= « valeur » ] { propriété: valeur; }

L’HERITAGE • Les éléments en HTML « héritent » des styles de leurs parents. D’où le « cascading » de CSS. • En cas de conflit, le style le plus proche de l’élément en question sera appliqué.