Ce tutoriel est dédié à la création du code html de votre page web.
Budget : 0€
Lancez votre éditeur de texte et créez un nouveau fichier que vous enregistrerez comme « index.html ».
Toute page html a besoin de cette structure principale pour fonctionner correctement.
On a rempli le code précédent pour créer la page d’accueil de notre portfolio. Ce code nous donne la page ci-dessus.
On remarque plusieurs éléments distincts :
On va donc voir ensemble comment insérer ces différents éléments dans le code et pour cela on va utiliser les balises.
Les <balise> : permettent de donner des instructions à l’ordinateur et lui indiquer quoi afficher sur la page. On peut par exemple les utiliser pour afficher du texte et des images.
Dans le code, les balise sont indiquées par des chevrons « < > » qui les entourent. On ouvre la balise, puis on la referme comme cela : <balise> <balise/>.
Dans l’en-tête on mettra l’encodage utilisé par la page en priorisant l’utf8. Ici à la deuxième ligne avec <meta charset="utf-8" />.
La troisième ligne commençant par <link> est très importante, c’est elle qui nous permet de relier notre page html à son style, pour la lier on écrira le nom de notre fichier de style dans la partie href = « » entre les guillemets.
La quatrième ligne commence aussi par <link> et permet de donner une icône à notre page en utilisant une image en ligne ou sur notre ordinateur. Par exemple ici, on a récupéré une image sur internet en copiant son adresse dans href=«https://img.icons8.com/material/452/source-code--v1.png ».
La cinquième ligne permet de changer le titre de la page en l’écrivant dans la balise <title> Votre titre </title>.
Les éléments que l'on écrit dans le body apparaissent dans le même ordre sur la page.
1. Menubar : On place le menu dans la balise <header> tout en haut du body pour qu'il soit placé en haut de la page.
L’élément <div> est un conteneur qui permet d’organiser son contenu, on l’utilise ici car on veut réunir les éléments de la barre de menu.
Les éléments <a> sont du texte cliquable à placer dans la balise comme cela : <a> Votre texte </a> , on peut les relier à un lien avec le href vu précédemment, ici on les relis aux autres pages html de notre site. On a ajouté un attribut title en plus pour donner une description lorsque l’on passe notre souris sur le texte.
Ce menu sera utilisé pour chaque page de notre site, gardez donc cette partie du code pour vos autres html.
Vous avez aussi dû remarquer les arguments « class », ils permettent d’identifier et d’appeler des éléments spécifiques dans le css.
2. A propos : On place tout dans un élément section pour créer un groupe de contenu.
L’élément <h1> est un niveau de titre, les élément de titres vont du niveau h1 à h6, h1 étant le plus important d'entre eux. La balise h1 permet d'insérer un titre comme cela: <h1>Votre titre</h1>.
L’élément <p> permet d’insérer un paragraphe de texte en mettant votre texte dans la balise comme cela : <p>Votre texte</p>.
Dans notre balise <p> on a aussi inséré une image avant le texte. Pour cela on utilise une balise de type orpheline <img src= « »> , src étant la source de l’image pouvant être un lien ou une image de votre ordinateur, on précisera alors le chemin d’accès ex: <img src="Bureau\images\photo.png">.
3. Slider : Pour donner un aperçu de nos projets on a créé un slider dont le but est de faire défiler différentes images (les fonctions pour créer du mouvement seront abordées dans le css).
Création de deux div pour contenir le slider ainsi que les slides qui défileront.
Les slides sont composées d’images cliquables qui nous envoient vers le projet concerné. Pour ce faire on va ouvrir des balises <a> et y insérer des balises <img>. Puisque que les images doivent toutes être dans la même slider on leur donne une taille fixée, afin qu’elles soient de même largeur, pour cela on écrit dans <img>, width= « 500 ». Pour que la troisième image tienne on a aussi du changer sa hauteur avec height= « 380 ». Afin de lier les images à leur projets respectifs sur la page Projets on met en href Projets.html#prog1/2/3 (prog1/2/3 correspondent à l'id des projets que l'on verra sur la page Projets).
4. Le CV : Pour que les utilisateurs puissent avoir accès à notre cv on va créer un paragraphe cliquable qui ouvrira un nouvel onglet avec notre CV en format pdf. Pour cela on ouvre une balise <p> dans laquelle on insère une balise <a> liée à notre CV.pdf avec un attribut target= «_blank » c’est ce dernier qui fait en sorte que le CV s’ouvre dans une nouvelle fenêtre.
1. Paragraphes de compétences : On utilise l’élément section vu précédemment dans lequel on va mettre le titre de notre compétence dans la balise <h3>, titre de niveau 3 ainsi qu’une balise paragraphe où l’on va détailler la compétence.
2. Les compétences en images : Comme précédemment on utilise des sections et cette fois en plus d’un titre et d’un paragraphe on ajoute une balise image et pour que les illustrations soient de même taille on leur donne le même width.
Ajoutez toutes les compétences que vous voulez mettre en valeur avec de nouvelles sections en changeant le titre, la description et ou l’image.
On range d’abord nos projets dans un div. Puis on place les projets dans des balises <figure> qui prennent une image et lui associent une légende avec <figcaption>.
Les balises <figure> ont toutes un id afin d’identifier les différents projets, cet id en plus permet que lorsque l’on clique sur l’aperçu du projet dans l’accueil d’être envoyé sur la page projet et déplacé à la position de celui-ci dans la page.
On crée un div pour rassembler les informations relatives au contact. Dans ce div on met un paragraphe donnant des indications pour nous contacter, "Envoyez moi un email en cliquant sur l'adresse ci-dessous".
On met aussi une balise <p> rendue cliquable en y insérant une balise <a> avec comme href :mailto:adressemail@mail.com, cela permet que lorsque l’on clique sur le texte d’ouvrir la messagerie avec l’adresse du destinataire déjà remplie. Pour relier ce bouton à votre propre adresse il suffit de la remplacer dans « mailto » .
En cliquant sur le paragraphe Mon-email@gmail.com, la fenêtre ci-dessous devrait s’afficher :
On a ensuite mis une image cliquable qui renvoie vers notre profil LinkedIn avec une balise <img> dans une balise <a> avec en href le lien vers notre profil LinkedIn.
On a donc crée notre portfolio mais il manque d'esthétisme et d'organisation c'est là qu'on va faire appel au css dans la suite de ce tutoriel.
Différents éditeurs de texte que vous pouvez utiliser : https://www.ionos.fr/digitalguide/sites-internet/developpement-web/editeurs-de-code/
