Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

tutos pour HTML/CSS

2 participants

 :: Software :: Programmation :: Tuto

Aller en bas

tutos pour HTML/CSS Empty tutos pour HTML/CSS

Message par eradikius Lun 29 Juin - 19:43

Bonjour et bienvenue !

On va parler du langage CSS et HTML qui sont tout de même intiment liés. What a Face

Bon tout d'abords il faut comprendre que le langage HTML est un langage de balises, c'est à dire comme une citation sur un forum par exemple [ quote ] blablabla [/quote].

Bon je vais pas vous faire un cours d'histoire donc allons en au fait:

Prenons d'abord le langage HTML:

Pour commencer il faut mettre l'entête de la page c'est un code qui ne faut surtout pas chercher à comprendre, il permet juste de faire fonctionner le tout:


Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml 1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


voilà une fois l'entête en place c'est comme si on avait ouvert un balise ouvrante
Code:
<html>

Ey mais ça veut dire quoi ça balise ouvrante et ç'est quoi ça ?

Oula je m'égare scratch , oui donc une balise en html ce compose de cette façon
Code:
< votre nom de balise>
, ceci est d'ailleur une balise ouvrante, cela permet d'y inscrire des choses qui seront prisent en compte par le code... une balise fermante étant
Code:
</votre nom de balise>
La balise et celle de l'entête donnée, ça permet tout simplement d'ouvrir le code html pour pouvoir y faire notre travail.
Au fait pour faire du html il ne vous faut rien de plus simple que notepad++ (pour windows) ou Gedit qui est déjà inclus dans Linux (donc pour linux tutos pour HTML/CSS 27713 ) !
Vous enregistrerez tel quel : nom-de-votre-fichier.html

Bon reprenons, dans notre code html on va mettre ce qui sera le squelette de notre travail:
La balise "head" permet de mettre du javascript avec la balise "script", et le CSS avec la baliste "style" mais cela on s'y intéressera bien plus tard!
Dans la balise head on met aussi le titre de notre site avec la balise "title", on remarquera que ce nom se met sur l'onglet de la page vourante dans firefox par exemple!

Après le "head" vient le "body", ce sera le corps du site ou il y aura tous nos élèments (textes, images etc...)
La il existe une multitude de balises qui vous permettrons de mettre ce que vous voulez comme les balises "p" pour mettre un paragraphe de texte, ou encore des liens des boutons enfin tout ce dont vous aurez besoin en somme.
Au prochain post je vais vous mettre les balises principales qui vous servirons le plus souvent!

En attendant voici la coquille vide de votre futur site !!

Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml 1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title> Mon Site </title>
    </head>

    <body>
        <p> Ceci est le squelette  bien vide de mon site :) </p>
    </body>
</html>


Voilà le prochain post vous offrira tout un tas de balises pour remplir ce pauvre squelette vide après on parlera encore de tout un tas d'autres choses !
eradikius
eradikius
Admin
Admin

Messages : 55
Points : 61
Date d'inscription : 29/06/2009
Age : 33

Revenir en haut Aller en bas

tutos pour HTML/CSS Empty Re: tutos pour HTML/CSS

Message par eradikius Mar 30 Juin - 0:18

Merci à vous deux ludo et slirox Very Happy
Bon alors comme promis voici la suite...

Avant de parler des balises en brut, j'aimerais apporter quelques précisions sur la création d'un projet de site web en html.

Tout d'abord sachez qu'avant d'être mis en ligne, un site c'est un dossier ou sont stocké vos fichiers html et vos images qui seront dans vos pages, il faut aussi préciser que une page html équivaut à une page de votre site. Il faut aussi que dans se dossier il y est une page html qui soit votre page d'acceuil, moi je la nomme index.html après c'est à vous de voir.
Il est aussi plus pratique de faire un sous-dossier images dans votre dossier de site ça permet de faire moins brouillon.

Une autre précision, une page ne doit pas être lourde au niveau poids, il est donc préférable de mettre des images dans un format moins encombrants (comme .gif, .jpeg ou .png), cela permet de faire une page plus rapide à charger et plus accessible aux petites connection.

Une autre précision, toute page contenant du html et du css ( que l'on verra plus tard), devra être valide au W3C, c'est une norme qui dicte un code au niveau de la rédaction du hmtl et du css (un peu comme le français quoi).

Voilà avec ça en main ce sera déjà plus simple Very Happy , on peut maintenant passer à la suite c'est à dire nos chers balises !!!

Je vais donc faire un résumer des principales balises, c'est à dire des balises le plus fréquement utilisé au début!

Prenons d'abords les balises simples:

Code:
<h1> votre titre </h1>
Cette balise toute simple permet d'écrire un texte plus gros.Un titre quoi. On peut remplacer le 1 par 2,3,4,5,6. 6 étant la plus petite taille de titre.

Code:
<p> votre texte</p>
Cette balise elle aussi toute simple permet tout simplement d'écrire du texte, un paragraphe si vous préférez.

Code:
<br>
Cette balise un peu spécial du fait qu'elle ne se ferme pas est en fait toute bête, elle permet de faire un saute de ligne, comme entré dans un éditeur de texte.

Maintenant que les balises de texte simple sont en place on peut faire un petit essai Very Happy

Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml 1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>Un petit essai</title>
    </head>
    <body>
        <h1> Ceci est un essai</h1>
        <p> Nous testons notre capacité à écrire du texte! <br> C'est pas génial? </p>
    </body>
</html>

Voilà normalement si vous testez ce code vous aller avoir du texte noir sur fond blanc... Oui je sais c'est moche mais patience padawan ça viendra après tout ça tutos pour HTML/CSS 36860

Cependant vous remarquerez comment est organiser mon code, les blaises qui sont dans le head et le body sont un peu plus loin que ces dernières. On appelle cela l'indentation, c'est juste pour rendre son code plus visible et facile à lire pour le corriger ou le modifier sinon je vous raconte pas le bazard geek.

Passons maintenant à des balises un peu plus complexes (mais pas trop vous inquiétez pas !)

Code:
<table>
    <tr>
        <td><p>plop</p></td>
        <td><p>lol</p></td>
    </tr>
</table>

Et oui voici un tableau, alors le principe est simple: on ouvre un tableau avec la balise
Code:
<table>
, cependant ce tableau est vide, pour cela on va rajouter une ligne avec la balise
Code:
<tr>
, celle-ci est à l'intérieure du tableau, elle est donc dans la balise
Code:
<table>
, bon rajoutons une case dans notre ligne (ou une colonne c'est à peu près l'équivalent), on utilise la balise
Code:
<td>
, puis on met ce que l'on veux dans notre case c'est à dire dans la balise
Code:
<td>
, ici en l'occurence j'ai écrit un texte "plop" dans une case et "lol" dans l'autre (je sais ça vole pas haut Rolling Eyes ).
Attention n'oubliez pas de fermer vos balises comme moi sinon ça donnera pas vraiment ce que vous voulez Very Happy .



Code:
<img src="images/monimage.gif" alt="image"/>

Et oui la balise image pointe le bout de son nez c'est pas beau ein?
Mais si c'est facile comme bonjour.. la balise image fait le tout en un, elle s'ouvre et se ferme en une seule balise d'ou le /> à la fin.
le src="..." c'est tout simplement l'URL de l'image dans votre dossier comme je vous l'ai expliquer en haut donc jusque l'a tout va bien non? Ba oui faut bien dire d'ou elle vient l'image Very Happy
Le alt n'est pas obligatoire mais pour que cela soit valide au W3C il faut impérativement la mettre, c'est pour les gens handicapés, ou tout simplement pour dire ce qui est censé se trouver là si l'image n'apparait pas. Vous voyez y'a rien de bien compliqué la dedans Very Happy .



Code:
<a href=".......">lien</a>
Ouuuuuuuuu, encore un truc moche et en fait ba non geek
Ceci est une balise de lien, le "a" est le type de la balise (une ancre vers un lien), href="....." est tout simplement l'URL du lien, ça peut être un site internet, ou une autre page de votre site après le premier > on met le nom de notre lien comme sur un forum (voir mon lien nommé notepad++), on ferme ensuite la balise "a". Comme quoi c'était facile!


Code:
<input type="...." value="....." onclick="......" />

Youpla ici c'est une balise input, généralement utilisée pour les boutons (comme le envoyer quand on poste un message sur notre super forum, OUi il est super Very Happy ), pour cela dans type on met "button", on met dans value ce qui est écrit dans le bouton, et onclick c'est l'action que fera le bouton quand on cliquera dessus, ça peut être un lien ou le démarrage d'une fonction javascript par exemple.

Bon je commence à être fatigué au prochain post je vous parlerai des menus !!!
eradikius
eradikius
Admin
Admin

Messages : 55
Points : 61
Date d'inscription : 29/06/2009
Age : 33

Revenir en haut Aller en bas

tutos pour HTML/CSS Empty Re: tutos pour HTML/CSS

Message par eradikius Mer 1 Juil - 12:25

Aujourd'hui petit post sur les menus.

La base d'un menu se joue sous ce code:

Code:
<ul>
    <li>"ce que vous voulez"</li>
    <li>............................</li>
    .
    .
    .
    .
</ul>

C'est tout bête, la balise "ul" ouvre un menu, puis après on peut mettre autant de balises "li" que l'on veut pour chaque élément de notre menu, puis on ferme la balise "ul".

Dans les balises "li" on peut mettre ce que l'on veut, c'est à dire soit un texte simple, soit un lien, il suffit tout bonnement d'inclure le code entre les balises "li".
Exemples:

Du texte brut:
Code:
<ul>
    <li><p>Mon texte</p></li>
    <li><p>Un autre texte</p></li>
<ul>

Ou un lien:
Code:
<ul>
    <li><a href="MON-URL">Mon texte</a></li>
    <li><a href="MON-URL">Un autre texte</a></li>
<ul>

Bref vous pouvez vous amusez à faire des menus mais vous remarquerez qu'ils sont pas vraiment beau... On commencera à en parler dès le prochain post, parce que faire des trucs pas beau ça commence à bien faire Very Happy

PS: N'oubliez pas pour tester tout ces codes il faut bien mettre l'entête donnée au début du tuto ainsi que les balises ouvrantes et fermantes "body", et la balise fermante "html" ! Pour cela regarder le dernier code du premier post confused , mais si vous voyez:geek:, et vous retirer les balises

et vous avez un squelette effectivement vide pour essayer déjà tout ce dont nous avons parlé!

eradikius
eradikius
Admin
Admin

Messages : 55
Points : 61
Date d'inscription : 29/06/2009
Age : 33

Revenir en haut Aller en bas

tutos pour HTML/CSS Empty Re: tutos pour HTML/CSS

Message par eradikius Sam 11 Juil - 15:07

Bonjour!!!

Bon maintenant que l'on connait quelques bases en HTML, on serait quand même content que sa soit un peu plus jolie en mettant des couleurs par exemple, enfin tout ça quoi!

Et oui tout cela est possible à partir du langage HTML mais c'est franchement très long de mettre à chaque balises ce qu'on veut comme style,couleur d'écriture par exemple... Et pour cela nous avons le CSS, qui est finalement une feuille de style ou vous mettrez tous vos styles pour la mise en forme de votre page !!!

Mais pour commencer voyons ou ce met ce fameux CSS:

Si on reprend notre fameuse coquille vide du premier post ça donne:

Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml 1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title> Mon Site </title>
        <style type="text/CSS">
        /* votre style */
        </style>
    </head>

    <body>
        <p> Ceci est le squelette  bien vide de mon site :) </p>
    </body>
</html>

Vous remarquerez donc la balise
Code:
<style>
qui ouvre le CSS!!
D'ailleurs le
Code:
type="text/CSS"
, n'est pas obligatoire il permet juste d'être plus lisible et d'être valide au W3C (ce qui au passage est mieux ^^).
Vous remarquerez que c'est une balise qui se ferme donc ne pas oublier notre bon
Code:
</style>
, à la fin du code et pas besoin de remettre ce qu'il y a dans la balise ouvrante Wink

Oh oui au fait pour écrire un commentaire dans le CSS il faut bien faire comme je l'ai mis, c'est à dire
Code:
/* votre code */
.
On ouvre le commentaire
Code:
/*
,
et on le ferme
Code:
*/
.

Je vous conseille fortement de commenter tous vos codes que ça soit CSS, javascript ou n'importe quel type de programmation.

Pourquoi? affraid
Parce que ... Very Happy
Non sans rire un code sans commentaire c'est comme lire du chinois, on comprend rien.
Les commentaires servent non seulement pour vous à savoir ou vous en êtes dans votre code, et à revenir sur une partie antérieur que vous auriez envie de corriger, ou à n'importe quel personne extérieure qui voudrais lire, modifier, corriger votre code. Dans les commentaires on y explique ce qu'on à fait et pourquoi mais tout cela très brièvement!

Bon maintenant on sait créer l'endroit pour mettre du CSS, c'est bien mignon mais on en fait quoi? Et bien on le rempli, il existe tout un tas de code et méthodes dans le CSS pour pouvoir embellir vos création. Attention le CSS est surpuissant on peut pratiquement tout faire au niveau style!

Pour commencer on va parler des choses simples Very Happy .

Dans le CSS on peut modifier un type de balise, par exemple dans mon html j'aurais ça (dans le body vous l'aurez compris):

Code:
<h1>Mon site est cool</h1>
<p>Mmmm ceci reste à voir</p>
<p>t'es qu'un kikoolol</p>
<h2>ou pas!</h2>

dans le CSS on pourras instaurer un certain style à un type de balise, c'est à dire que les balises "p" auront un certain style ainsi que les "h1" et "h2", on peut faire trois style différents donc!

Bon venons en à la syntaxe!

Je vais écrire tout le code pour afficher mon petit texte ci-dessus, dans une page.
-Donc disons que je veux que la balise "h1" soit centrée, en rouge, et en gras.
-Les balises "p" je les veux en "comic sans ms", en italique et bleu.
-La balise "h2" je la veux en Blanc, alignée à droite.
-Et puisque je suis sympa je vais même mettre un fond d'écran noir!

Attention CSS magie nous voilà, je vais commenter mon code suivez donc bien Razz !

Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml 1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title> Mon Site </title>
        <style type="text/CSS">
          /* je commence par le fond d'écran on utilise le mot body pour le      corps de la page! */
          body {
                  background-color: black; /*soit couleur de fond=noir */
                  } /* c'est tout ce que je voulais faire dnas le corps je ferme! */
          /* maintenant ma balise h1 */
          h1 {
                text-align: center; /* je centre mon texte*/
                color: red; /* je met le texte en rouge */
                font-weight: bold; /* et mon texte en gras! */
              } /* et c'est fini pour mon h1 */
          /* on passe au p maintenant */
          p {
              font-family: comic sans MS; /* je choisis mon style d'écriture! */
              font-weight: italic; /* je le met en italique ! */
              color: blue; /* et vous le devinez j'imagine ^^ */
            } /* plus qu'une ouf :p */
          h2 {
                color: blue;
                text-align: right;
              } /*et voila finit le CSS */
      </style>

    </head>

    <body>
        <h1>Mon site est cool</h1><p>Mmmm ceci reste à voir</p>
        <p>t'es qu'un kikoolol</p>
     
<h2>ou pas!</h2>
    </body>
</html>

Bon vous voyez c'est pas bien compliqué, mais c'est long... La ça ne se voit pas trop mais si vous faites une page d'articles vous verrez que grâce au CSS vous n'aurez à vous souciez du style qu'une seule fois après ce sera toujours le même, tandis que dans l'HTML il faudrait réécrire cela autant de fois que nécessaires...
Vous remarquerez aussi qu'il y a beaucoup, beaucoup, beaucoup.... d'attributs utilisable si bien que faire une liste est assez fastidieux...
Je vous propose donc de chercher sur google pour tout attribut manquant.

Bon la prochaine fois on ira observer d'autres horizons du CSS Twisted Evil !!
eradikius
eradikius
Admin
Admin

Messages : 55
Points : 61
Date d'inscription : 29/06/2009
Age : 33

Revenir en haut Aller en bas

tutos pour HTML/CSS Empty Re: tutos pour HTML/CSS

Message par Slirox Sam 11 Juil - 22:32

lol c'est quand la prochaine fois ?

Sinon très bon tuto en tout cas Wink, pour que ceux que ça intriguent: entre les posts d'éra, je supprime les autre posts pour que ce soit suivit Wink Vous pourrez, quand le tuto sera fini, poster vos commentaires/questions mais pour le moment vous pouvez poster mais dès qu'une nouvelle partie du tuto apparaîtra, votre post sera supprimé Wink
Slirox
Slirox
Admin
Admin

Messages : 195
Points : 253
Date d'inscription : 28/06/2009
Age : 28
Localisation : Bruxelles

http://geek-game.phpbb9.com

Revenir en haut Aller en bas

tutos pour HTML/CSS Empty Re: tutos pour HTML/CSS

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 :: Software :: Programmation :: Tuto

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum