html/css

le 18 septembre 2009

HTML/CSS

1) Présentation

L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, etc... (source wikipedia).

En gros, l'html est un langage de présentations des données, on l'utilise pour la création de sites web statiques (on devra modifier une page html si on veut modifier le contenu). L'html est un langage facile a utiliser et a comprendre. Il est composé de balises, appelées balises html.

2) Outils

Pour creer un site web, nous allons avoir besoin de deux ou trois choses:

- un dossier: où nous mettrons nos pages html.

- un navigateur: celui que vous utilisez regulierement (firefox, ou opera, ou internet explorer ou google chrome etc).

- un éditeur: le bloc note pourrait faire l'affaire, mais je vous conseille de prendre notepad++ par soucis de lisibilitée.

3) Syntaxe

Comme dit ci-dessus, l'html est un langage composé de balises. Voici un exemple de balises html:

<html> </html>

.

Une balise commence donc de cette facon <balise> et finit de cette facon </balise>

Il faut distinguer deux partie dans l'html:

- l'en tete et le corps.

De plus, lorsqu'on commence une page en html, il faut commencer par la balise <html> puis finir par la balise

</html>

l'en tete, est ce qu'on peut considerer comme une définition et aussi l'endroit où l'on pourra écrire des script en javascript.

Exemple:

<html>
[left]<head><title>premiere page</title>

[/left]

</head>

<body>

voici ma premiere page html

</body>

</html>

Enregistrez votre travail par exemple sous le nom: premierepage.html (le .html est très important) puis executez le et voyez le résultat.

Ca n'affiche que ce que j'ai marquer dans le corps :bo:

:blush: Bah oui, comme je l'ai déja dis, le html est un langage de présentation des données. C'est a dire que c'est a vous de lui dire comment vous voulez que soit votre texte par le biais de balises.

Par exemple je veux que mon titre ai une taille assez conséquente, je lui met la balise <h1>texte</h1>, j'execute, le navigateur voit "tiens balise h1 il faut que je mette le titre de niveau 1".

Il ya énormément de balises en html, mais ne vous inquiétez pas nous ferons un résumé des balises les plus

importantes. Ce post était la pour vous presenter le html, les articles devrait suivre (kelt m'assiste dans ce big-tuto).

Soyez patient, les big-tutos prennent souvent du temps et beaucoup de motivation. :blush:

------------------------------------------

Salut

Voila comme promis => suite du tuto

Je précise qu'à tout moment du tuto, vous pouvez recopier le code dans un bloc note ou notepad++, lui ajouter l'extension html puis l'ouvrir avec votre navigateur pour voir ce que ça donne quand je le précise pas, enfin pour l'instant c'est pas important.

Avant de commencer le tuto, pour ceux qui débute en html et en css, je précise qu'il est préférable d'avoir Mozilla firefox comme navigateur car certaines propriétés css ne fonctionnent pas sur Internet Explorer comme :

text-decoration: blink;

(qui permet de faire clignoter un texte)

Pour l'instant, c'est la partie un peu chiante du tuto, on va faire un peu de cours, histoire de n'être pas gêné lors de la pratique, on va différencier différentes balises. Vous allez me dire, mais on connait aucune balise :coeur: Ici c'est pas utile, et d'ailleurs ne vous préoccupez pas des balises, on le verra plus tard, ce n'est pas ce qui faut retenir de ce chapitre.

En avant ! \o/ :)

Différencier les balises

De plus, lorsqu'on commence une page en html, il faut commencer par la balise <html> puis finir par la balise
</html>

Donc je vais un peu approfondir. Il y a plusieurs sortes de balises,

Premier point : balises pair/seul :

- Les balises par pair, comme dans l'exemple de blackmesa. On voit bien les balises html et body qu'on "ferme" après utilisation à l'aide d'un slash, comme ceci :

<html>
  <body>
  Le contenu du site
  </body>
</html>

- Les balises seules, par exemple une balise qu'on verra souvent la balise br (permet de revenir à la ligne). (Ces balises sont assez rares, ne vous étonnez pas si on en voit jamais ^^)

Les balises seules sont noté <Votrebalise /> :

<html>
  <body>
  Mon premier paragraphe, youpi <br /> J'ai mangé des hamburgers
  <body>
</html>

Qui sera noté sur votre page web comme ceci :

Mon premier paragraphe, youpi

J'ai mangé des hamburgers

Deuxième point : balise bloc/inline

-Une balise bloc est une balise dont le contenu sera affiché en commençant sur une nouvelle ligne. Par exemple <H1> (Titre le plus important) <P> (paragraphe)

-Une balise inline, elle s'utilise à l'intérieur d'un paragraphe, exemple : <strong> (indiquer ce texte comme "important", généralement marqué en gras, ça dépend du navigateur) ou encore <span> (balise qui sert à rien, enfin presque :snif: on le verra dans le chapitre sur les balises)

Edit: En relisant mon tuto, j'ai plutôt l'impression que cette phrase n'est pas très claire ^^

En gras je mets les balises bloc et souligné, les balises inline :

Gras et souligné ne marche pas dans un code, voici le code :

-----------------------------------------------------------------------------------------------------------------------------------------------

<html>

<body>

<h1> Mon titre le plus important </h1>

<p> Salut salut ! Comment va la <strong>compagnie</strong> ? <br /> Je vais m'acheter des cacahouètes ! </p>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------------------------

Remarque :

Toutes les balises que j'ai cité (à part <br />) sont des balises paires, donc n'oubliez pas de la fermer après utilisation </ balise>

Prochain tuto apprentissage des balises les plus utilisés, ça sera déjà plus intéressant on va pouvoir faire notre première page web. Vous allez encore m'engueuler en me disant que sans css, ça risque pas d'être très jolie ^^ Mais je trouve que c'est mieux de maitriser chaque langage séparément, de sorte à ne pas tout mélanger.

suite du tuto (3 ème partie): ici

suite et précision du tuto (3 ème partie): ici

le 18 septembre 2009

cool ! merci !

le 18 septembre 2009

Ah y'a quelqu'un qui t'assiste, tu m'avais dit que c'était pas ton truc préféré le html :blush:

le 18 septembre 2009

J'aime pas trop ca mais bon ^^. Tu pourras aider pour le css tiens xd

le 18 septembre 2009

en effet il y a un problème avec tes balises html..

Un exemple le plus simple du monde :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
   <title> le nom de votre site</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
Bon salut c'est kelthuzad, voici un contenu de page web sans css avec un lien qui donne nulpart <a href=www.nulpart.com>ici</a>
  </body>
</html>

copier coller le code avec l'extansion .html dans un bloc note pour l'essayer

le 18 septembre 2009

ce que j'avais mis était bon aussi mais pas valide w3c ^^

le 18 septembre 2009

pff t'est vraiment bon à rien :blush:

t'a oublié un point au troisième tiret :coeur:

quoi je suis exigeant? :bo:

le 18 septembre 2009

au deuxieme tiret tu veux dire? :blush:, bon ok je le met. Par contre ca m'embete que ca rentre pas dans la balise de code. Ya plus qu'a attendre la suite de kelt pour que je continue :coeur:

le 18 septembre 2009

tes commentaires ne sont pas bon

les commentaires en html sont sous cette forme :

le 18 septembre 2009

sérieusement ,il y a des erreurs ou pas?

le 18 septembre 2009

Oui je confonds avec les commentaires de php (plus l'habitude), je change :blush:. Non ce n'est pas une grosse erreur.

le 18 septembre 2009

d'accord, parce que moi je ne fais pas la différence (pour le moment :coeur: )

:blush:

le 18 septembre 2009

Les commentaires servent a donner des informations sur ton code, par exemple j'utilisais des commentaires pour vous expliquer les balises.

Il ya des commentaires dans presque-tous les langages informatiques. La j'avais juste confondu entre les commentaires de php et les commentaires d'html ^^

le 18 septembre 2009

d'accord,merci

les commentaires n'apparaissent pas en fait sur le site, ce sont des repères perso, c'est ça?

le 18 septembre 2009

exactement :blush:

le 18 septembre 2009

exactement

pour le html c'est pas très utile mais pour du langage plus évolué tel que le php ou y'a des calcul etc tu est bien content de pouvoir mettre des commentaires pour te souvenir à quoi correspond ce bout de code lol

le 18 septembre 2009

j'imagine (rien que ça ,ça fait mal,lol)

le 18 septembre 2009

Oui et lorsqu'un codeur reprend le travail de quelqu'un d'autre, il a besoin d'avoir des infos pour ne pas etre perdu.

le 18 septembre 2009

précisions intéressantes ,ça aide à comprendre

le 18 septembre 2009

déjà qu'avec les commentaires c'est pas forcément simple lol

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

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