html/css

le 19 septembre 2009

en fait j'ai créer un autre topic et c'est pas vraiment pratique, il va partir au oubliette et on aura plus les références. Puis pour le visiteur c'est plus simple de regarder directement sur le même topic, blackmesa tu peux mettre

Page 1 : Présentation au html

Page 3 : Différencier les différentes balises

sur le premier post ?

On s'organise comment pour le tuto sur les balises ?

le 19 septembre 2009

j'éssai de joindre un modo pour tout mettre dans le premier post :blush:

le 19 septembre 2009

Bah justement j'y réfléchis, tu compte attaquer le css après? psk dans ce cas la je fais les balises principales puis tu continues par le css, et après on arrive au css et html associé?.

Je vais le faire cabu, si c'est pas déja fait :blush:.

le 19 septembre 2009

Ok pas de souci, je compléterai vite fait avec des balises html si besoin puis je fais la transition css etc.. j'attends ton tuto :blush:

Faudrait trouver un moyen de le up dans google

le 19 septembre 2009

Ok je m'occupe du tuto, je le posterais a la suite pour corriger ce qui ne vas pas au cas ou

le 19 septembre 2009

Voila suite de ce big-tuto, nous allons aborder les balises principales, du moins les plus importantes en html qui vous permettront de vous creer un petit site web.

Nous allons commencer par les balises permettant d'organiser son texte. Je ne parlerais que des balises les plus générales, puisque je rapelle qu'un récapitulatif des balises html sera fait en fin de tuto (avec des balises utilisées assez rarement).

Pour que votre texte soit accueillant et lisible, il doit être aeré et organiser en paragraphe. Une balise html permet justement d'organiser vos phrases en paragraphe, c'est la balise: .

exemple:


<html>

<head><title>Exemple1</title></head>

<body>


<p>ceci est un paragraphe, c'est cool nan?

je m'amuse comme un petit fou...</p>

<p>Hey moi aussi je suis un paragraphe?

c'est quoi ton nom?

tu veux etre mon ami?</p>

</body>

</html>

Il y aura donc ici donc deux paragraphes. Cependant cela pose un autre probleme, lorsque vous faites un retour a la ligne (sur l'ordi) vous tapez sur la touche "entrée", et bien ca ne marche pas en html.

Il s'affichera sur votre écran "ceci est un paragraphe, c'est cool nan?je m'amuse comme un petit fou..".

Pour remedier a ce problème, la balise seul est la. En effet, la balise permet le retour a la ligne. Vous avez donc juste a mettre cette balise en fin de phrase pour aerer le texte.

Parfois, vous avez envie de mettre en valeur un mot ou une phrase, vous pouvez mettre utiliser les balises (pour italique), (pour en gras), (pour en souligné). Voici un exemple:


<html>

...

<body>

<i>ceci est une phrase importante</i><br/>

<b>celle la aussi</b><br/>

<u>et celle la</u>

</body>

</html>

d'autres balises permettant de mettre en valeur un mot ou un texte seront mise dans la liste des balises html (a la fin de ce big-tuto).

Maintenant que nous avons vu comment organiser notre texte, nous allons apprendre a creer des liens.

Les liens permettent d'aller vers une page d'un site internet.

nous avons fait notre premiere page html, l'avons organiser mais on aimerait faire de la pub pour notre site préféré forumfr.com.

Les balises pour un lien sont <a href="" > texte</a>. Href sert a définir la destination. Nous inscrirons donc forumfr.com entre les guillement. Lorsque l'on cliquera sur texte, nous serons redirigés vers forumfr.com

exemple:

<html>...

<body>

<p>Pour finir, je voudrais remercier ce merveilleux site qu'est forumfr.com, <br/>
blablablablabla, voici l'adresse, soyez nombreux a yaller: <a href="forumfr.com">Forumfr</a> :blush: </p>

</body>

</html>

Je n'ai pas fait mention de la différence entre lien absolu ou relatif car le tuto se revele assez long. Mais j'y reviendrais dans le dernier tuto de ce big-tuto.

La derniere partie et non des moindres: l'insertion d'image.

Il est important d'illustrer parfois son site a l'aide d'images. Celles-ci sont souvent stocker dans un dossier différent, pour ne pas les mélanger avec les pages html.

Pour inserer une image dans une page html, il faut utiliser la balise seule: <img src="nomdelimage.extension" alt="descriptioncourtedelimage"/>

src et alt sont deux attributs de la balise <img />, src sert a définir l'image qui sera affichée et alt a donner un court descriptif de l'image lorsque notre icone de souris reste sur l'image.

Seulement voila, mes images sont dans un autre dossier :/!! Mince alors!!

Pas de panique :coeur: il suffit juste de mettre dans l'attribut src "nomdudossier/nomdelimage.extension". Ne vous trompez pas avec l'extention (jpg,jpeg,png) sinon votre image risque de ne pas s'afficher (carré blanc). De plus vérifier bien, que vous ne vous etes pas tromper dans le nom de l'image ou que l'image est bien dans le dossier ^^.

Voici pour terminer, un exemple comme d'habitude, j'ai stocker mon image dans le dossier image et je l'ai appelée "camping.jpg":


<html>

...

<body>

<p>Voici le camping où je suis aller cet été, j'ai pris cette photo spécialement pour vous  <br/>

<img src="image/camping.jpg" alt="camping de cet été"/><br/></p>

<p>c'est beau n'est ce pas? :) </p>

</body>

</html>

Voila ce tutoriel est terminé, je vous donne rendez vous avec kelt pour le prochain tutoriel ^^.

le 19 septembre 2009

pour le css vaut mieux d'abord s'être super bien familiarisé avec le html et donc approfondir ce dernier davantage.

le 20 septembre 2009

Re !

Beau boulot blackmesa, y a un problème avec les codes ? ça dépasse sur le côté. J'essayerai de compléter et de résumer un maximum, comme la dit mdr il faut bien assimiler le fonctionnement des balises avant le css.

le 20 septembre 2009

Oui il ya pas mal de notions et de balises dont je n'ai pas parler. Psk le tuto serait assez lourd déja qu'il est assez long et parce que je fatiguais ^^.

le 20 septembre 2009

Je suis entrain de faire un mémo :blush:

le 20 septembre 2009

Re ! Je vais faire un petit résumé des balises présentées par Blackmesa (avec quelque précision au niveau de la pratique) avant d'introduire le css.

Copier coller les codes dans Notepad++, vous y verrez plus clair.

<html> </html> Pas de question.. <html> au tout début et </html> à la toute fin.

Remplacer <html> par

<html xmlns="http://www.w3.org/1999.xhtml" xml:lang="fr">

On indique l'url et la langue français.

Comme son nom l'indique, c'est l'entête de la page :

<head> </head> Dedans vous mettez ces balises :

- <title> </title> Le texte à l'intérieur sera le titre afficher dans la barre de votre navigateur.

- <meta /> Cette balise indique que vous allez utilisez des lettres dérivés du francais " â ï é... " Si quelqu'un peut apporter des informations sur cette balise, ce ne serai pas de trop malgré qu'il n'est pas d'une importance crucial pour le moment.

Sur votre page mettez :

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

- <link /> Cette balise indique quel fichier css doit on charger pour cette page html. Pour ce faire mettez le fichier html et css dans le même dossier, puis mettez sur votre page :

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="pagedeform.css" />

=> Avec pagedeform.css le nom de votre fichier css. (On peut également mettre le titre qu'on veut mais encore une fois pour l'instant on s'en fou :bo: )

C'est tout pour la balise head. Et si vous avez suivi, il est inutile de rappeler que c'est maintenant qu'il faut ferme sa balise </head> ! :blush:

Maintenant, encore une fois comme son nom l'indique, c'est le corps de la page:

<body> </body> Dedans on peut mettre énormément de balises..^^ Je vais mettre l'essentiel pour sa page web

- <h1></h1> Donc h veut dire titre, et 1 le 1er. En fait h1 = le titre le plus important, h2 = le 2éme plus important, h3 = 3éme plus important etc.. jusqu'à h6. (Oui 1 titres et 5 sous titres c'est suffisant :))

<h1>Mon premier titre</h1>
<h2> Mon deuxième et dernier titre</h2>

-  Permet de faire des paragraphes, au passage je rappelle la balise   pour revenir à la ligne.

<h1>Mon premier titre</h1>
<p> youpi j'ai un titre, je vais pouvoir faire mon premier paragraphe, tiens je reviens à la ligne<br />Je vais pouvoir passer à mon deuxième titre !</p>
<h2> Mon deuxième et dernier titre</h2>
<p> et bla bla bla dans le paragraphe </p>

Remarque : On met autant de paragraphes qu'on veut où on veut :blush:

Comme d'hab : on ferme sa balise </body>

Puis sa balise </html>

Si on combine tout ce qu'il y a ici, on peut faire une page comme ceci :

<html xmlns="http://www.w3.org/1999.xhtml" xml:lang="fr">
<head> 
<title> TonTitre </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<h1>Mon premier titre</h1>
<p> youpi j'ai un titre, je vais pouvoir faire mon premier paragraphe, tiens je reviens à la ligne<br />Je vais pouvoir passer à mon deuxième titre !</p>
<h2> Mon deuxième et dernier titre</h2>
<p> et bla bla bla dans le paragraphe </p>
</body>
</html>

Il y a encore beaucoup de balises très utiles qu'il faut apprendre au fur et à mesure avec la pratique, on a déjà beaucoup de par cœur à avaler.

Très bientôt je vais parler un peu de css, histoire de mettre un minimum en forme notre texte brut puis je laisserai la place à Blackmesa :coeur:

Bon courage et MP si y a des questions, d'ici la on ne sera peut-être plus sur ce topic ^^ !

:coeur:

le 20 septembre 2009

Remarque : On met autant de paragraphes qu'on veut dans un seul titre biensur.

ca peut preter a confusion ^^', on a pas forcément un titre. Un paragraphe n'oblige pas d'avoir un titre (je précise au cas où il yaurait confusion).

le 20 septembre 2009

Oui exact je vais changer. éa fait 10minutes que je me relis et que je change plein de truc ^^

Edit: Après une 20aine de modifications ^^, ça me parait plutôt correct. Hésitez pas à me corriger s'il y a des erreurs.

Bonne nuit je vais me coucher, je vais essayer de trouver un temps demain pour le css

Connexion

html/css

Messages recommandés

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Lien à poster

Partager sur d’autres sites

Archivé

Populaires actuellement

Bienvenue sur Forum Fr !

FFr Mag' 2.0

Dire à un ami