Apprendre le langage HTML, c’est bien. Créer des trucs pour de vrai sur le web, c’est mieux.
Aujourd’hui, je te montre comment créer ton propre portfolio ! En utilisant le langage HTML et CSS, tu peux créer une jolie page web et montrer tes photos, des images et des graphismes. Une sorte de Tumblr, si tu préfères.
Le défi #OneWebsitePerMonth : Apprendre le langage HTML et CSS en codant son propre Tumblr
C’est difficile à coder ?
On reste sur un code très simple et accessible aux grands débutants (moi comprise, hein, on ne va pas se mentir). Pas grave, toi et moi, on est des codeurs du dimanche et c’est très bien comme ça :)
BONUS : Envie de créer ton propre Tumblr ? Télécharge les fichiers HTML et CSS que je t’ai préparé !
Regarde le résultat, c’est par ici : http://anouc.github.io/creer-un-portfolio-html/
On arrive à un site assez simple – et un peu moins moche que la dernière fois, non ?
Tutoriel : Comment créer ton propre Tumblr ?
Voilà les étapes pour créer ta page web en format Tumblr:
- Installer ton éditeur de code gratuit, si ce n’est pas déjà fait
- Créer la structure de base du fichier HTML et CSS
- Insérer des images dans la page HTML (check les explications en dessous)
- Insérer des liens sortants et modifier la couleur des liens (check ci-dessous)
- Structurer ton fichier HTML en créant des blocs (check ci-dessous)
- Créer un menu de navigation et le styliser rapidement…
- En créant des boutons pour les liens du menu
- En créant un effet de transparence stylé pour indiquer que les liens sont cliquables (on appelle ça un hover)
- Styliser les images (check ci-dessous)
- Créer un effet de transparence sur les images
- Créer une bordure de couleur pour les images
- Centrer les images et leur imposer une taille prédéfinie
- Déployer ta page web sur Github
1. Insérer des images
Tu vas d’abord enregistrer tes images dans un dossier ‘images’ (sans majuscule) qui se trouve à l’intérieur de ton dossier principal.
Pour insérer tes images, tu vas ensuite écrire dans le fichier HTML :
<a href=’http://htmlbordel.fr/banque-dimage-gratuite/’>Découvre 9 banques d’images gratuites<img src=’images/banque-images-gratuites.png’/></a>
On trouve deux balises encastrées :
- La balise <img>, qui contient le lien vers les images de ton dossier
- La balise <a>, qui constitue le lien vers une page web
Comme la balise <img> est à l’intérieur de la balise <a>, cela signifie que l’image est cliquable.
2. Structurer le fichier HTML avec des balises <div>
Comme ton fichier HTML est un chouilla plus complexe que d’habitude, on le structure avec des balises supplémentaires qui vont bien délimiter les différentes parties.
Par exemple, j’ai crée ici une partie <header>, avec tout le texte en introduction. Il y a aussi le <footer>, avec le lien vers le bonus de l’article. Et puis il y a la partie ‘portfolio-content’, qui correspond à toutes mes images.
Grâce à ces distinctions, tu vas pouvoir cibler les effets de style dans le CSS. Par exemple, j’ai choisi de créer un bloc à part avec les images, pour styliser le texte différement et rajouter une marge spécifique. Dans le CSS, j’ai écrit :
.portfolio-content {
text-align: center;
margin: 50px;
}
3. Styliser les images
Tu vas styliser les images en te rendant dans le fichier CSS. Par exemple, j’ai choisi de centrer les images avec la fonction suivante :
img {
width: 600px;
height: 500px;
}
Ensuite, j’ai défini la taille des images (ici, 600 pixels de largeur et 500 de hauteur) :
img {
width: 600px;
height: 500px;
}
J’ai rajouté une petite bordure, avec un trait d’1px, dans un jaune légèrement transparent :
img {
border: 1px solid rgba(242, 202, 58, 0.5);
}
Et puis j’ai rajouté de l’opacité quand la souris passe sur l’image (l’effet hover) :
img:hover {
opacity: 0.7;
}
BONUS : Télécharge les fichiers HTML/CSS et crée ton propre portfolio dès maintenant !
Comme je t’aime bien et que ça m’embêterait de te voir galérer, tu peux télécharger les fichiers HTML et CSS que je viens de coder, pour voir le code en détail et créer dès maintenant ta propre page web !