[Tutoriel] Apprendre à coder son portail.
Bonjour,
Dans ce tutoriel je vais vous expliquer comment faire une homepage facilement. Pour ceux qui ne le savent pas, une homepage est une page qui sépare la plupart du temps : Site et Forum.
I)Prés-requis :
Dans notre quête de la homepage vous aurez besoin de :
-1 Dossier Images
-1 Index.html
-1 Style.css
Pour ce tutoriel je fournis le pack d'images, disponible en pièce jointe.
II)Un codage simple !
Pour codé notre Homepage il vous faudra quand même connaitre les bases du HTML (Inséré lien et image) pour le reste je vais vous expliquer . Donc nous allons commencer par mettre ceci dans notre index.html comme toutes pages web bien faites Big Grin
Rediriger votre style.css à votre index.hml avec ce code ci :
Il est à placer entre les deux balises head.
Ouvrez votre style.css et insérez y :
Maintenant nous allons adaptée le futur positionnement de nos deux boutons Site/Forum.
Dans le style.css créer deux nouvelles classes une pour chaque élément la première se nommant .forum et la seconde .site ce qui devrait nous donner :
Dans l'index.html mettez ce code ci :
Ce qui nous donne :
Il ne nous reste plus qu'a placer le logo, pour le logo histoire ne pas vous faire utiliser le css et de vous faire apprendre d'autres attributs en HTML, équivalents à ceux utilisé en CSS.
Pour plus d'informations sur les attributs HSPACE et VSPACE clique: ici
Voilà, c'est la fin de ce tutoriel sur la création d'une HomePage en HTML .
Les images : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Bonjour,
Dans ce tutoriel je vais vous expliquer comment faire une homepage facilement. Pour ceux qui ne le savent pas, une homepage est une page qui sépare la plupart du temps : Site et Forum.
I)Prés-requis :
Dans notre quête de la homepage vous aurez besoin de :
-1 Dossier Images
-1 Index.html
-1 Style.css
Pour ce tutoriel je fournis le pack d'images, disponible en pièce jointe.
II)Un codage simple !
Pour codé notre Homepage il vous faudra quand même connaitre les bases du HTML (Inséré lien et image) pour le reste je vais vous expliquer . Donc nous allons commencer par mettre ceci dans notre index.html comme toutes pages web bien faites Big Grin
PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>Rediriger votre style.css à votre index.hml avec ce code ci :
PHP:
<link rel="stylesheet" type="text/css" media"screen" href="style.css">Il est à placer entre les deux balises head.
Ouvrez votre style.css et insérez y :
PHP:
body{
background-image: url("images/bg.jpg"); //--Indique l'emplacement du Background (Fond de la page).
background-attachment: fixed; //--Permet de faire collé le background au bas de la page.
background-repeat: no-repeat; //--En cas de mauvais redimensionnement, permet de ne pas mettre plusieurs fois le fond.
background-position: top center; //--Fixe un point de positionnement en partant du haut et du centre.
background-size: cover; //-- Permet de faire collé l'image aux bords de la page.
}Maintenant nous allons adaptée le futur positionnement de nos deux boutons Site/Forum.
Dans le style.css créer deux nouvelles classes une pour chaque élément la première se nommant .forum et la seconde .site ce qui devrait nous donner :
PHP:
.site
{
position:absolute;
bottom : 115px; //-- Distance en pixels par-rapport au pied de la page.
left: 170px; //-- Distance pixels par-rapport à la gauche de la page.
}
.forum
{
position: absolute;
bottom : 115px; //-- Distance en pixels par-rapport au pied de la page.
right : 170px; //-- Distance en pixels par-rapport à la droite de la page.
}Dans l'index.html mettez ce code ci :
PHP:
<a href="#"><img src="images/site.png" class="site" ></a> //--Image du site
<a href="#"><img src="images/forum.png" class="forum"></a> //--Image du ForumCe qui nous donne :
Il ne nous reste plus qu'a placer le logo, pour le logo histoire ne pas vous faire utiliser le css et de vous faire apprendre d'autres attributs en HTML, équivalents à ceux utilisé en CSS.
PHP:
<a href="#"><img src="images/logo.png" HSPACE=50 VSPACE=20 ></a>Pour plus d'informations sur les attributs HSPACE et VSPACE clique: ici
Voilà, c'est la fin de ce tutoriel sur la création d'une HomePage en HTML .
Les images : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
