Yo tout le monde !
Intro : Tout d'abord, c'est plusieurs heures de travail pour réaliser ce tutoriel. Je vous prierai de ne pas le prendre sans mon autorisation.
Ceci est mon premier tutoriel dans le domaine de l'HTML. Donc j'accepterai toute critique qu'elle soit.
(Idem pour les fautes d'orthographes/grammaires etc.. je ne suis pas très bon dans ce domaine).
Il en va de même pour les fautes que je ferais au cours de ce tuto (dans le sens de dire ou non des 'bêtises' sur l'HTML).
Sommaire :
--I) Ressources.
----II) Quelques notions.
------III) Partie HTML.
--------IV) Partie CSS.
Intro : Tout d'abord, c'est plusieurs heures de travail pour réaliser ce tutoriel. Je vous prierai de ne pas le prendre sans mon autorisation.
Ceci est mon premier tutoriel dans le domaine de l'HTML. Donc j'accepterai toute critique qu'elle soit.
(Idem pour les fautes d'orthographes/grammaires etc.. je ne suis pas très bon dans ce domaine).
Il en va de même pour les fautes que je ferais au cours de ce tuto (dans le sens de dire ou non des 'bêtises' sur l'HTML).
Sommaire :
--I) Ressources.
----II) Quelques notions.
------III) Partie HTML.
--------IV) Partie CSS.
I) Ressources nécessaire :
Donc tout d'abord n'importe quel logiciel fera l'affaire (pas vraiment n'importe hein*). Par la j'entend bien des éditeurs de texte. Eh oui Bloc-note peut tout à fait faire l'affaire.
Ceci dit c'est pas très recommandé. Et il y a plus sioux.
Voici un petit argument :
La comparaison :
Si vous souhaitez donc un logiciel autre que bloc note, je vous propose la liste suivante :
-> NotePad+.
-> Adobe Dreamweaver (celui que je compte utilisé pour ce tuto) : http://www.cheat-gam3.com/programmes-utiles/adobe-dreamweaver-webtools-153037/
-> BlueGriffon.
-> Et bien d'autres ;)
Autre chose, il vous faut un logiciel de "montage" comme Photoshop (vivement conseiller) ou bien Gimp.
Comme vous le souhaitez.
:hein: Pourquoi un logiciel de montage ? :hein:
Eh bien pour tout site (du moins de mon avis personnel) il vous faut une maquette de votre site qui vous servira de premier support, d'un premier aperçu de votre site (dans notre cas ce sera un PortFolio).
Si vous souhaitez une version de Photoshop :
[YOUTUBE]QXgQTmmXx20[/YOUTUBE]
Lien de la vidéo : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris! (Vidéo et upload par moi-même).
Maintenant commençons notre deuxième partie
!
Donc tout d'abord n'importe quel logiciel fera l'affaire (pas vraiment n'importe hein*). Par la j'entend bien des éditeurs de texte. Eh oui Bloc-note peut tout à fait faire l'affaire.
Ceci dit c'est pas très recommandé. Et il y a plus sioux.
Voici un petit argument :
La comparaison :
Si vous souhaitez donc un logiciel autre que bloc note, je vous propose la liste suivante :
-> NotePad+.
-> Adobe Dreamweaver (celui que je compte utilisé pour ce tuto) : http://www.cheat-gam3.com/programmes-utiles/adobe-dreamweaver-webtools-153037/
-> BlueGriffon.
-> Et bien d'autres ;)
Autre chose, il vous faut un logiciel de "montage" comme Photoshop (vivement conseiller) ou bien Gimp.
Comme vous le souhaitez.
:hein: Pourquoi un logiciel de montage ? :hein:
Eh bien pour tout site (du moins de mon avis personnel) il vous faut une maquette de votre site qui vous servira de premier support, d'un premier aperçu de votre site (dans notre cas ce sera un PortFolio).
Si vous souhaitez une version de Photoshop :
[YOUTUBE]QXgQTmmXx20[/YOUTUBE]
Lien de la vidéo : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris! (Vidéo et upload par moi-même).
Maintenant commençons notre deuxième partie
!II) Quelques notions :
/!\Je pars du principe que vous avez quelques bases en HTML/CSS, dans le cas contraire je vous conseille d'en connaître :) Disons que je compte être assez vague sur certaines notions et que si vous bloquez sur certains points, n'hésitez pas à vous renseigner sur internet ou de me demander (dans la mesure du possible je tenterai de vous aidez)/!\
Qu'est-ce que l'HTML ?
Soit, prenez un exemple simple.
Ouvrez par exemple bloc note.
Puis écrivez un texte quelconque :
Puis enregistrez-le, mais à la fin du nom de votre fichier, vous allez ajouter l'extension ".html" :
Vous pouvez observer que son icone est votre navigateur par défaut :)
Puis ouvrez-le :
Je vous félicite ! Et vous pouvez être fière de vous !
Car vous avez "créer" votre premier site :
Mais je me doute bien que cela ne vous suffit pas !
Vous voulez ajoutez de la couleur(s), des images, des sections, articles etc..
Eh bien pour ce faire on a deux choix !
Mais avant de les énumérées, on va rentrer dans ce que l'on appel la charte graphique!
C'est la qu'intervient le CSS !
Déjà je me doute bien que vous vous demandez ce qu'est le CSS ! :fou:
source : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Et la vous vous posez certainement la question : Comment ça marche ?
Il faut crée ce que l'on appel une feuille de style.
Eh bien, pour se faire nous avons deux choix :
--> On crée une feuille de style CSS ( de la même façon que l'HTML mais au lieu de mettre l'extension .html, on va mettre.
.
.
.
Suspense
.
.
On va mettre comme vous l'avez devinez : .css :)
/!\ Je vous conseille vivement de n'utiliser que cette méthode /!\
--> Ou bien on va crée DANS notre fichier .html une balise.
C'est à dire avec :
Attention : On ne parle plus HTML la mais d'xHTML :)
Car la feuille de style est directement intégrer dans notre code HTML ! ^_^.
*Pour en savoir plus sur les balises en CSS, je vous conseille d'effectuer quelques recherches car nous allons débuter notre troisième partie :jemendors:
Si comme ce smilley vous êtes fatiguer n'hésitez pas à faire une pause :)
Le poste sera toujours là ne vous en faîtes pas.
/!\Je pars du principe que vous avez quelques bases en HTML/CSS, dans le cas contraire je vous conseille d'en connaître :) Disons que je compte être assez vague sur certaines notions et que si vous bloquez sur certains points, n'hésitez pas à vous renseigner sur internet ou de me demander (dans la mesure du possible je tenterai de vous aidez)/!\
Qu'est-ce que l'HTML ?
Soit, prenez un exemple simple.
Ouvrez par exemple bloc note.
Puis écrivez un texte quelconque :
Puis enregistrez-le, mais à la fin du nom de votre fichier, vous allez ajouter l'extension ".html" :
Vous pouvez observer que son icone est votre navigateur par défaut :)
Puis ouvrez-le :
Je vous félicite ! Et vous pouvez être fière de vous !
Car vous avez "créer" votre premier site :
Mais je me doute bien que cela ne vous suffit pas !
Vous voulez ajoutez de la couleur(s), des images, des sections, articles etc..
Eh bien pour ce faire on a deux choix !
Mais avant de les énumérées, on va rentrer dans ce que l'on appel la charte graphique!
C'est la qu'intervient le CSS !
Déjà je me doute bien que vous vous demandez ce qu'est le CSS ! :fou:
source : Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Et la vous vous posez certainement la question : Comment ça marche ?
Il faut crée ce que l'on appel une feuille de style.
Eh bien, pour se faire nous avons deux choix :
--> On crée une feuille de style CSS ( de la même façon que l'HTML mais au lieu de mettre l'extension .html, on va mettre.
.
.
.
Suspense
.
.
On va mettre comme vous l'avez devinez : .css :)
/!\ Je vous conseille vivement de n'utiliser que cette méthode /!\
--> Ou bien on va crée DANS notre fichier .html une balise.
C'est à dire avec :
Code:
[COLOR="Blue"]<STYLE type="text/css">[/COLOR]
l
l
------->[I]Feuille de style[/I]
l
l
[COLOR="Blue"]</STYLE>[/COLOR]Attention : On ne parle plus HTML la mais d'xHTML :)
Car la feuille de style est directement intégrer dans notre code HTML ! ^_^.
*Pour en savoir plus sur les balises en CSS, je vous conseille d'effectuer quelques recherches car nous allons débuter notre troisième partie :jemendors:
Si comme ce smilley vous êtes fatiguer n'hésitez pas à faire une pause :)
Le poste sera toujours là ne vous en faîtes pas.
III) A l'assaut de l'HTML :
/!\ je ne ferais pas la partie "contact" /!\
Tout d'abord, j'insiste sur le faite que l'on va crée ensemble un PORTFOLIO.
Ainsi qu'une certaine maquette sur photoshop doit être réalisée !
Voici donc ma maquette :
Donc c'est parti !
On va tout d'abord s'organiser :
Dans un DOSSIER que l'on va nommer on va mettre tout ceci :
On crée un fichier HTML, que je vais nommer par exemple : site.html (why not ? :hein:).
Ainsi qu'une feuille de style : style.css (Pourquoi faire compliquer hein* x) )
Et enfin un dossiers que l'on va nommer images qui va inclure nos images (dans notre maquette on à deux images, oui je sais compter ! bon ok
)
On ouvre donc Adobe Dreamweaver et on a ainsi notre code de base qui est le suivant :
On peut voir la balise <title></title>, eh bien entre ces deux balises, ce que l'on écrira dans l'espace, cela modifiera le titre de votre site, c'est à dire ce qu'il y a marquer sur votre onglet par exemple ;)
Un petit screen :
Moi je vais y écrire : e-Portfolio :
On va ensuite relier notre fichier HTML et notre fiche de style de CSS !
Avec ceci :
Que l'on va placer entre nos balise <head></head>
Dans notre cas :
On a ainsi :
Dans notre maquette, on voit bien que le site est divisé en deux parties (nooon sans blague ! :hein:).
On a ainsi la partie gauche que l'on va mettre entre des <div> avec un id que l'on va nommer "left" mais vous pouvez l'appelez comme vous le souhaitez bien évidemment :).
Soit :
Ce que l'on observe, c'est que nous avons un MENU !
Et qui dit menu, dit liste.
Pour crée une liste avec puces on va se servir de la balises <ul>
ainsi que <li> de la façon suivante :
Or nous voulons un menu ou l'on peut cliquer dessus et qu'il nous renvoi vers la partie qui lui est destiner.
On va ainsi ajouter :
On a ainsi :
On va crée une autre balise
.
Pour y placer le contenu de droite :)
A l'intérieur on a titre en : "Fsadki & CG3"
On va donc utiliser la balise <h1>
Puis on a le mot "accueil" :)
Puis nous avons notre premier texte :
De même pour le reste :
Et c'est ainsi que s'achève notre troisième partie :)
Voici un aperçu du site :
/!\ je ne ferais pas la partie "contact" /!\
Tout d'abord, j'insiste sur le faite que l'on va crée ensemble un PORTFOLIO.
Ainsi qu'une certaine maquette sur photoshop doit être réalisée !
Voici donc ma maquette :
Donc c'est parti !
On va tout d'abord s'organiser :
Dans un DOSSIER que l'on va nommer on va mettre tout ceci :
On crée un fichier HTML, que je vais nommer par exemple : site.html (why not ? :hein:).
Ainsi qu'une feuille de style : style.css (Pourquoi faire compliquer hein* x) )
Et enfin un dossiers que l'on va nommer images qui va inclure nos images (dans notre maquette on à deux images, oui je sais compter ! bon ok
)On ouvre donc Adobe Dreamweaver et on a ainsi notre code de base qui est le suivant :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
</body>
</html>On peut voir la balise <title></title>, eh bien entre ces deux balises, ce que l'on écrira dans l'espace, cela modifiera le titre de votre site, c'est à dire ce qu'il y a marquer sur votre onglet par exemple ;)
Un petit screen :
Moi je vais y écrire : e-Portfolio :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-Portfolio</title>
</head>
<body>
</body>
</html>On va ensuite relier notre fichier HTML et notre fiche de style de CSS !
Avec ceci :
HTML:
<link rel="stylesheet" type="text/css" href="nom_fiche.css" />Que l'on va placer entre nos balise <head></head>
Dans notre cas :
HTML:
<link rel="stylesheet" type="text/css" href="style.css" />On a ainsi :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-Portfolio</title>
</head>
<body>
</body>
</html>Dans notre maquette, on voit bien que le site est divisé en deux parties (nooon sans blague ! :hein:).
On a ainsi la partie gauche que l'on va mettre entre des <div> avec un id que l'on va nommer "left" mais vous pouvez l'appelez comme vous le souhaitez bien évidemment :).
Soit :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-Portfolio</title>
</head>
<body>
<div id="left">
</div>
</body>
</html>Ce que l'on observe, c'est que nous avons un MENU !
Et qui dit menu, dit liste.
Pour crée une liste avec puces on va se servir de la balises <ul>
ainsi que <li> de la façon suivante :
HTML:
<ul>
<li>Accueil</li>
<li>PortFolio</li>
<li>Contact</li>
</ul>Or nous voulons un menu ou l'on peut cliquer dessus et qu'il nous renvoi vers la partie qui lui est destiner.
On va ainsi ajouter :
HTML:
<ul id="nav">
<li><a href="#">Accueil</a></li>
<li><a href="#">PortFolio</a></li>
<li><a href="#">Contact</a></li>
</ul>On a ainsi :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-Portfolio</title>
</head>
<body>
<div id="left">
<ul id="nav">
<li><a href="#">Accueil</a></li>
<li><a href="#">PortFolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>On va crée une autre balise
HTML:
<div id="right"></div>Pour y placer le contenu de droite :)
A l'intérieur on a titre en : "Fsadki & CG3"
On va donc utiliser la balise <h1>
Puis on a le mot "accueil" :)
HTML:
<p class="sous_titre">Accueil</p>Puis nous avons notre premier texte :
HTML:
<p>
Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter
obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur,
non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi
quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum
prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere
poterit victu.
</p>De même pour le reste :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>e-Portfolio</title>
</head>
<body>
<div id="left">
<ul id="nav">
<li><a href="#">Accueil</a></li>
<li><a href="#">PortFolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div id="right">
<h1>Fsadki & CG3</h1>
<p class="sous_titre">Accueil</p>
<p>
Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter
obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur,
non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi
quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum
prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere
poterit victu.
</p>
<p>
Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis
uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum
absentia pauperis erubesceret patris.
</p>
<p>
Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, et in eois tractibus bella
rediviva consurgunt, anno sexto decimo et eo diutius post Nepotiani exitium, saeviens per urbem
aeternam urebat cuncta Bellona, ex primordiis minimis ad clades excita luctuosas, quas obliterasset
utinam iuge silentium! ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam
delictis.
</p>
<p>
Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in
proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn
sine spiramento ullo ad usque praetorium traxere praefecti.
</p>
<p>
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere
trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum
aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit
inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens
ad tranquilliora vitae discessit.
</p>
<h1>Compétences</h1>
<p class="sous_titre">PortFolio</p>
<p>
Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter
obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur,
non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi
quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum
</p>
</div>
</body>
</html>Voici un aperçu du site :
[Quatrième Partie En Cours]
Last edited:
