[HTML/CSS] [HTML/CSS] Portfolio + Cours

    Publicités

Users Who Are Viewing This Thread (Total: 1, Members: 0, Guests: 1)

fsadki

Membre d'Honneur
V
Jun 1, 2010
8,168
1
944
29
Euh... Chez moi
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.

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 :

1388186073-sans-titre.png


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 :mdr1: !
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 ?

Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.

Soit, prenez un exemple simple.
Ouvrez par exemple bloc note.
Puis écrivez un texte quelconque :

1388186881-screen02.jpg


Puis enregistrez-le, mais à la fin du nom de votre fichier, vous allez ajouter l'extension ".html" :

1388186984-screen03.jpg


Vous pouvez observer que son icone est votre navigateur par défaut :)
Puis ouvrez-le :

1388187081-screen04.jpg


Je vous félicite ! Et vous pouvez être fière de vous !
Car vous avez "créer" votre premier site :

1388187627-oscar.png


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!

Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui permet de gérer la présentation d'une page Web

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 !

Un portfolio ou portefolio est un dossier personnel dans lequel les acquis de formation et les acquis de l'expérience d'une personne sont définis et démontrés en vue d'une reconnaissance par un établissement d'enseignement ou un employeur.

Voici donc ma maquette :

1388190337-maquette.png


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 :jesors: )

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 :

1388190979-sans-titre.png


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>
Et c'est ainsi que s'achève notre troisième partie :)

Voici un aperçu du site :

1388193205-screen05.jpg

[Quatrième Partie En Cours]

 
Last edited:
  • Like
Reactions: /Anorata\

ShadowFire

Membre
Jun 19, 2012
37
0
922
25
Aucun commentaire ?
(up ou pah vu qu'il était déjà premier de la liste)
je vous remercie pour ce poste, moi qui ne s'y connaissait rien ce tutoriel m'a bien éclairci
 
M

Membre supprimé 492129

Merci surtout à vous d'avoir détérer ce sujet! :p
 

/Anorata\

Aries no Gold Saint
V.I.P
Jan 23, 2017
80
11
74
Sanctuary
Merci :) moi-même je suis pas un pro web (même si en HTML je me démerde), mais étant un programmeur web occasionnelle merci beaucoup pour ce partage et je te souhaite bonne continuation ;)