CV en Html & CSS avec Dreamweaver fichier source : CV.html (Télécharger: clic droit « enregistrer sous »)
Le HTML qu’est-ce que c’est
Le HTML signifie HyperText Markup Language. C’est un langage de formatage web qui permet de structurer notre page avec son contenu. Facile à utiliser. Dans tous les contenus d’une page web on peut retrouver une structure composer de plusieurs balises récurrente tel que h1, p, title, head, html, body…
Le HTML5 est de la « programmation » orientée web. Il s’agit d’un langage de balisage utile pour mettre en forme des documents souvent créés pour être visualisés avec les navigateurs. C’est pourquoi il est bon de parler d’un langage de formatage (ou de balisage) plutôt que d’un langage de programmation.
L’expression « langage de balisage » fait référence à un langage qui permet de décrire des données par le biais d’un formatage spécifique. Cette mise en forme est possible grâce aux marqueurs susmentionnés.
En HTML, nous ferons référence aux marqueurs avec le nom de balise. Un peu d’histoire. Le projet HTML est né en 1989 grâce à Tim Berners-Lee avec le protocole HTTP. Le développement a été achevé et rendu public en 1993 au CERN à Genève.
Dans les années 90, le World Wide Web se répand rapidement grâce à la naissance des navigateurs commerciaux. Le premier navigateur à entrer dans les foyers a été Netscape, suivi par Internet Explorer de Microsoft qui, pendant une dizaine d’années, a eu l’hégémonie sur le Web. Nous parlons d’un langage du domaine public qui en est aujourd’hui à sa cinquième version. La syntaxe du HTML est établie, éditée et révisée par le World Wide Web Consortium (W3C).
L’Internet est un réseau de télécommunications
Tout contenu que vous voyez dans votre navigateur lorsque vous naviguez sur le web est renvoyé à partir d’un appel à un serveur : logos, images, textes, vidéos, etc …. Tout cela est contenu dans des fichiers physiques sur un serveur. Les fonctionnalités et services en ligne ne sont pas exclus. Par exemple, lorsque vous vous connectez à un espace privé de votre banque à domicile, vous ne faites qu’un appel au serveur de votre banque. Le serveur vérifiera la validité des informations d’identification saisies et répondra à votre appel en vous communiquant le résultat de sa vérification. Si les informations d’identification sont correctes, il vous laissera entrer, sinon il vous refusera l’accès. Ce système de demande (demande du client) et de réponse (réponse du serveur) est possible grâce à l’architecture client-serveur.
Maintenant que nous avons une compréhension plus claire du contexte dans lequel se situe notre langage de balisage, nous pouvons commencer à coder en créant notre première page HTML.
Structure d’une page HTML
Portez une attention particulière à l’imbrication car la plupart des erreurs commises en HTML concernent la mauvaise fermeture des balises
Comment Écrire en HTML5
Pour écrire du HTML, vous avez besoin de deux outils:
1. Un navigateur:
Google Chrome, Safari, Internet Explorer, Edge, Mozilla Firefox et Opera.
2. Un éditeur de texte:
L’éditeur de texte est un logiciel qui permet d’écrire. Le simple Bloc-notes et Bloc-notes Windows et le TextEdit MacOs sont suffisants pour pouvoir écrire en HTML. Cependant je vous recommande Dreamweaver pour gagner du temps et en productivité. J’utilise Dreamweaver pour être plus efficace en écriture html5🙂. Si ce n’est de trouver celui avec qui vous avez le plus de feeling.
Il en existe d’autres : Sublime texte, Komodo edit, Notepad++ , Visual code studio
Cependant je vais m’attarder sur Adobe CC Dreamweaver.
Considérez les balises comme de petits mots, chacun avec une fonction particulière. Ils se reconnaissent parce qu’ils sont entourés de deux caractères spéciaux: « < » et « > ».
Les noms de balises sont établis et mis à jour par le W3C. La syntaxe des balises, bien que chacune d’elles ait un nom différent, est toujours la même : <nom_tag>contenu</nom_tag>.
- <nom_tag> – balise d’ouverture;
- </nom_tag> – balise de fermeture (une barre oblique de fermeture avant le nom «/»);
- contenu – est le contenu de la balise.
Pour écrire un mot ou une partie de texte en italique, il est nécessaire d’inclure le texte susmentionné dans la balise d’ouverture <em> et la balise de fermeture </em>.
Alors <em>Salut les gens!</em> apparaîtra dans votre navigateur comme ceci: Salut le gens!
Que se passe-t-il si nous supprimons la balise <em> ? Le texte sera simplement affiché normalement
Le navigateur lit de haut en bas et de gauche à droite. Dès qu’il rencontre le caractère « < », il vérifie immédiatement s’il y a une balise par la suite. Si c’est le cas, il formatera le contenu de cette balise conformément aux instructions de la balise.
Essayez plusieurs balises avant de passer à la suite, d’ouvrir une balise sans la fermer ou même d’inventer votre propre balise pour voir comment le navigateur réagit
Balises de structuration du texte
Ces balises permettent de disposer des blocs dans la page contenant du texte, des images ou encore des menus.
- <abbr> – </abbr>: abréviation
- <blockquote> – </blockquote>: citation longue
- <q> – </q>: citation courte
- <cite> – </cite>: citation du titre d’une œuvre ou d’un événement
- <sub> – </sub>: mise en indice
- <sup> – </sup>: mise en exposant
- <h1> – <h6>: titre de différents niveaux
- <img />: image grâce aux attributs src (adresse de l’image) et alt (texte de remplacement)
- <mark> – </mark>: mise en valeur visuelle (le texte est surligné)
- <strong> – </strong>: mise en valeur forte (le texte est en gras)
- <em> – </em>: mise en valeur faible (le texte est en italique)
- <figure> – </figure>: figure (image, code…)
- <figcaption> – </figcaption>: description de la figure
- <audio> – </audio>: son
- <video> – </video>: vidéo
- <source> – </source>: indique un format possible pour les balises <audio> et <video>
- <a> – </a>: lien hypertexte grâce à l’attribut href.
- <br />: retour à la ligne
- <p> – </p>: paragraphe
- <hr />: ligne de séparation horizontale
- <address> – </adresss>: adresse de contact
- <del> – </del>: texte supprimé
- <ins> – </ins>: texte inséré
- <dfn> – </dfn>: définition
- <kbd> – </kbd>: indiquer un code que doit taper le visiteur
- <progress> – </progress>: barre de progression
- <time> – </time>: date ou heure
- <pre> – </pre>: le texte à l’intérieur de la balise sera sous forme de code
Balises de listes
Ces balises permettent de créer des listes (numérotées, à puces…).
- <ul> – </ul>: liste à puces, non numérotée
- <ol> – </ol>: liste numérotée
- <li> – </li>: élément de la liste à puces
- <dl> – </dl>: liste de définitions
- <dt> – </dt>: définition du terme
Balises de tableau
Ces balises ont pour but de créer un tableau structuré avec des lignes et des colonnes.
- <table> – </table>: tableau
- <caption> – </caption>: titre du tableau
- <tr> – </tr>: ligne de tableau
- <th> – </th>: cellule d’en-tête
- <td> – </td>: cellule
- <thead> </thead>: section de l’en-tête du tableau
- <tbody> – </tbody>: section du corps du tableau
- <tfoot> – </tfoot>: section du pied du tableau
Balises de formulaire
Ces balises permettent de créer des formulaires de contact par exemple.
- <form> – </form>: délimite un formulaire (method : indique la méthode d’envoi du formulaire (get ou post). Si vous ne savez pas quoi utiliser, mettez post / action : la page vers laquelle le visiteur doit être redirigé lorsqu’il a validé votre formulaire. )
- <fieldset> – </fieldset>: permet de regrouper plusieurs éléments d’un formulaire
- <legend> – </legend>: titre d’un groupe dans un formulaire
- <label> – </label>: titre d’un élément de formulaire
- : champ de formulaire grâce à l’attribut type
- <textarea> – </textarea>: zone de saisie multiligne grâce aux attributs rows et cols (nombre de lignes et de colonnes)
- <select> – </select>: liste déroulante
- <option> – </option>: élément d’une liste déroulante
- <optgroup> – </optgroup>: groupe d’éléments d’une liste déroulante
Balises sectionnantes
Ces balises nous sert à construire les éléments de base d’un site web.
- <header> – </header>: en-tête
- <nav> – </nav>: liens principaux de navigation
- <footer> – </footer>: pied de page
- <section> – </section>: section de page
- <article> – </article>: article (contenu autonome)
- <aside> – </aside>: informations complémentaires
Balises génériques
Il y a deux balises génériques: l’une est inline, l’autre est block. Elles n’ont pas de sens sémantique.
- <span> – </span>: balise générique de type inline
Autorise les autres éléments à venir s’asseoir à gauche et à droite.
Ne se redimensionne pas avec width et height.
Respecte les marges gauches et droites, mais pas les marges haut et bas.
- <div> – </div>: balise générique de type block
Force un passage à la ligne.
Ne tolère pas d’élément à gauche ou à droite.
Se redimensionne avec width et height.
Respecte toutes les marges.
Structure HTML5 dans Dreamweaver
<html>: balise parent de tous les autres. Représente la racine d’un document HTML.
<meta>: contiens des métadonnées relatives au document HTML. Le UTF-8 signifie le jeu de caractère alphanumérique. Avez-vous déjà remarqué des points d’interrogation, des carrés ou en général, des symboles particuliers dans les pages Web? Dans ces cas, un caractère qui n’est pas présent dans le jeu de caractères spécifié a été utilisé dans l’en-tête et le navigateur ne savait donc pas comment l’afficher.
<head>: contiens les balises <style> (pour insérer le css), <meta>, <title>, <script>… Tous ceux qui caractérisent une page web.
Les éléments HTML BLOCK et INLINE
Dans le HTML il y’a deux familles d’éléments HTML. Des balises BLOCK et des balises INLINE. les éléments HTML de type BLOCK commencent toujours sur nouvelle une ligne et prennent toute la largeur de l’écran. Comme les éléments de titre <h1> jusqu’à <h6>. Chaque élément commence sur une nouvelle ligne et ne laisse aucune place pour mettre un autre élément HTML à côté.
Les éléments HTML block:
| <address> | <article> | <aside> | <blockquote> | <canvas> | <dd> | <div> | <dl> | <dt> | <fieldset> |
| <figcaption> | <figure> | <footer> | <form> | <h1>…<h6> | <header> | <hr> | <li> | <main> | <nav> |
| <noscript> | <ol> | <p> | <pre> | <section> | <table> | <tfoot> | <ul> | <video> |
Cependant je ne vais pas vous demander de retenir tous les éléments HTML par cœur 😱. il y’a des éléments qui reviennent souvent dans les pages web et qui sont incontournable. À force de pratique, on les intègre !
Les éléments HTML de type INLINE font le contraire et prennent seulement la place qu’on leur donne. Comme la balise image <img>. Remarquer <h1> et <p > sont de type BLOCK.
Les éléments HTML Inline:
| <a> | <abbr> | <acronym> | <b> | <bdo> | <big> | <br> | <button> | <cite> | <code> |
| <dfn> | <em> | <i> | <img> | <input> | <kbd> | <label> | <map> | <object> | <output> |
| <q> | <samp> | <script> | <select> | <small> | <span> | <strong> | <sub> | <sup> | <textarea> |
| <time> | <tt> | <var> |
Comment insérer des titres en HTML5
Fichier > Nouveau > Créer > dans <body> insérez les balises HTML
Ne pas mettre en gras et insérer des balises <strong> dans les titres h1…h6. Oui j’ai vu ça😐
Comment insérer une image en HTML5
Insertion > image > choisir une image dans l’ordinateur
Comment insérer des liens en HTML5
Insertion > Hyperlink > mettre l’URL source (cible: _blank pour ouvrir la page dans un nouvel onglet)
Liens menus
Double clic sur le texte pour une sélection facile puis choisir l’élément HTML
Lien Mailto
L’indication mailto, à l’intérieur de l’attribut href de la balise <a>, indique au navigateur, en cliquant dessus qu’il doit ouvrir un logiciel d’email par défaut installé sur l’ordinateur (Outlook par exemple).
Dans l’exemple ci-dessous, lorsque vous cliquez sur le texte « Contactez moi ! » , La page d’envoi d’un nouvel e-mail dédié au logiciel sera ouverte avec le champ destinataire déjà rempli avec « info@votresite.fr ». De toute évidence, quel que soit la messagerie utilisé par l’utilisateur, cela fonctionne. Si le clic est effectué à partir d’un smartphone, l’application dédiée à la gestion des emails s’ouvrira.
Insertion > lien de messagerie
Un code html mal écrit ne pose pas de problèmes au navigateur. Mais il peut causer des problèmes dans la mise en forme des pages. Le résultat esthétique/fonctionnel pourrait être compromis.
Le HTML est « insensible à la casse ». Cela signifie qu’il est complètement indifférent que les balises soient écrites en MAJUSCULES ou en minuscules.
Erreurs courantes :
- Si une balise ouverte (par exemple <em>) n’est pas fermée, son effet peut être très différent selon le type de navigateur utilisé. Si <em> n’est pas fermé, par exemple, le reste de la page sera mis en italique. C’est une excellente « bonne pratique » de fermer tout de suite la balise dès que vous l’ouvrez pour éviter de l’oublier;
- Une balise de fermeture sans la balise d’ouverture correspondante n’a aucun effet ;
- Si une balise contient une syntaxe incorrecte, elle est presque toujours ignorée par le navigateur ;
- Si la forme conventionnelle de la balise est erronée, par exemple si le signe mineur « < » est écrit deux fois « << », le navigateur l’interprétera comme du texte et l’affichera dans la page Web.
Liens Ancres
Remplissons les trois paragraphes <p> avec du texte long afin d’allonger verticalement la bar du navigateur. De cette façon, nous pouvons tirer parti de la fonction d’ancrage de la balise <a>. Cette balise lien permet de lier aussi des éléments entre eux sur la même page HTML.
La première chose à faire est de rendre nos trois titres de paragraphe identifiables.
Pour ce faire, nous utiliserons l’attribut « id » . Fondamentalement, cet attribut nous permet de donner un identifiant unique à n’importe quelle balise HTML. Utilisons-le à l’intérieur de la balise d’ouverture de chaque sous-titre individuel <h2> qui introduit nos paragraphes. Comme valeur unique, nous écrivons les ancres #un #deux #ok
Chemin absolu et chemin relatif qu’est-ce que c’est
Chaque fois que vous avez besoin de cliquer sur un mot ou, plus généralement, sur un contenu pour rediriger l’utilisateur vers une autre ressource (une page web, un contenu multimédia, un contenu téléchargeable, etc.) ou, même, pour afficher une image dans le navigateur, ou pour charger une ressource externe utile à la fonctionnalité de notre page HTML. Il est obligatoire de spécifier un chemin d’accès. Les sites Web sont en fait organisés en dossiers et sous-dossiers comme nous organisons les documents sur notre ordinateur tous les jours. Les chemins sont utilisés pour pouvoir se déplacer entre les dossiers de notre site Web.
Nous en avons déjà vu quelques-uns lorsque nous avons défini l’attribut href dans la balise <a>. Nous avons en effet précisé l’URL de la page web qui nous intéressait.
Dans ce cas, nous avons utilisé un chemin absolu. C’est un lien direct qui affiche le contenu, quelle que soit votre position d’où vous le chercher.
Un chemin relatif indiquera seulement le chemin à prendre par rapport à votre position dans le dossier et où vous êtes situé dans le dossier du site. En effet ça ne sera pas un chemin direct (absolu), ça sera un chemin relatif qui dépendra de votre positionnement.
Les attributs HTML5
Les attributs Html5 sont placés dans les balises ouvrantes et vont donner plus de caractéristiques pour définir au mieux nos éléments HTML. Pour voir plus clair, voici un exemple:
On voit la balise image qui contient 4 attributs dont « src » pour la source de l’image, « width » la largeur, « height » la hauteur et alt pourra contenir le nom de l’image qui permet le référencement. Chaque attribut va jouer un rôle pour définir notre balise et apporter plus d’informations.
la balise <a> a pour attribut « href » pour la source du lien.
la balise <p> contient l’attribut style pour donner une couleur verte dans cet élément paragraphe.
Comment créer un formulaire en HTML5
Ce formulaire en Html5 ne pourra pas fonctionner directement, car il lui faudra un serveur PHP pour recevoir des données. Nous avons vu les différentes balises qui composent notre formulaire pour au mieux stylé ce formulaire avec du CSS. Même dans les formulaires il existe différents attributs qui sont en vert comme « cols » et « maxlength » qui définit le nombre de colonnes soit la largeur de la zone du texte et le nombre de caractères autorisés 120. Fichier source: Formulaire1
Comment mettre les CSS en HTML5
Il y’a trois manières d’insérer du CSS dans un document HTML. Nous allons voir sur Dreamweaver comment les insérer.
