AccueilAccueil  FAQFAQ  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 [ Cours ] Réaliser sa première page internet

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Miku
Invité



MessageSujet: [ Cours ] Réaliser sa première page internet   Sam 12 Jan - 15:54

Bonjour à tous,
afin de partir sur une même base pour tous, nous allons partir du principe que l'on n'y connait rien, ainsi nous verrons tout plus en moins en détail dans ces cours ! Si vous avez d'éventuelles questions, n'hésitez pas à les poster à la suite du cours - en vous assurant qu'elles sont en rapport avec ce même cours -.
Bref, ne tardons pas et commençons sans plus attendre ! Réalisons notre première page web en xHTML !

I. Une affaire de balises
    Les balises

Afin de pouvoir mieux comprendre le code d'une page xHTML, je vais vous présenter son fonctionnement.
Voici un début de script d'une page
mapage.html a écrit:
[...]
.....<title>Ma page xHTML</title>
.....<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
.....<link rel="stylesheet" media="screen" type="text/css" href="styles.css" />
</head>

<body>
.....<div id="world">
..........<h1>Mon premier site</h1>
[...]

Comme ça, vous pouvez voir à quoi ressemble du code xHTML si vous n'en avez encore jamais vu. La colorisation est celle utilisé avec Notepad++, c'est ainsi que seront colorés tous les codes que je vous montrerai.
Bien, désormais analysons un peu ce code, vous remarquez ces machins bleus tous bizarres là ? Ce sont les balises, elles servent, pour la majorité, à donner des informations à votre navigateur pour retranscrire le tout et afficher votre page. Les balises sont des éléments entourés de crochets (<balise>) qui sont divisés en deux types : les balises simples et les balises doubles.
  • Balises simples
    Les balises simples sont de la forme <balise />. Elles sont utilisées pour afficher une image ou lier une feuille de style par exemple.
  • Balises doubles
    Les balises doubles sont de la forme <balise></balise>, la première s'appellant la balise d'ouverture et la seconde... de fermeture (logique).

    Les attributs

Maintenant que nous savons ce que sont les balises, voyons ce que sont les trucs rouge et violet dedans ! Et bien ce sont les attributs, ce qui permet de personnaliser une balise en fait. Prenons pour exemple le <div id="world"></div>, on indique ici à ce calque (div) une id du nom de world. Nous verrons plus tard à quoi cela peut servir, avec le CSS.

II. Une page xHTML


Maintenant que nous avons vu un peu le fonctionnement des balises, il serait peut être temps de rentrer dans le vif du sujet.
Le code d'une page se regroupe en plusieurs parties, l'en-tête et le corps... m'enfin, je ne fais que parler sans montrer concrètement alors je vais vous montrer le strict minimum d'une page xHTML.
mapage.html a écrit:

<!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>Ma page xHTML</title>
.....<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
.....Corps de ma page ici
</body>
</html>
[...]
Maintenant, regardont cela de plus près.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Le !DOCTYPE est a placer en haut de votre page, avant même la balise <html>, c'est ce qui indique, entre autre et surtout, dans quel langage est programmé votre page (ici xHTML 1.0 Strict).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
la balise <html> indique le début de votre page web (et la fin par son tag de fermeture (</html>). Les attributs apparaissant sur ce tag servent à donner une adresse traitant du xHTML, et l'autre à définir la langue dans laquelle vous écrivez votre page (si vous ne la faites pas en français, modifiez simplement le petit "fr" par "en" par exemple si vous désirez écrire une page en anglais).

Vient ensuite l'un des grands éléments d'une page web : l'entête, ou <head></head>.
C'est entre ces deux balises que l'on trouvera de nombreuses balises telles que les liens vers les feuilles de styles CSS, d'éventuels fichiers javascript, c'est également là que l'on indiquera le titre de la page gràce aux balises <title></title>. Le titre de la page est en fait ce qui apparait en haut de la fenêtre (par exemple : iGraph | on the wagon again lorsque vous êtes sur l'accueil du forum ^^).
Bon, ca va pour le title, mais c'est quoi la balise "meta" alors ? Et bien, il en existe de nombreuses, qui ont chacune leurs fonctions. Celle que je vous donne là est quasi indispensable car elle permet à votre navigateur de comprendre et lire les caractères spéciaux français (tel que les accents, etc. éèàùç...)

Suivant l'entête se trouve enfin le corps de votre page, soit les balises <body></body>. C'est entre ces deux balises que se trouvera l'intégralité de votre page affichée par le navigateur, tous les textes, images, liens, etc.

Voilou, maintenant, écrivons un simple texte entre ces balises body, histoire de tester un peu. Maintenant, pour enregistrer, il suffit de sauvegarder votre fichier avec l'extension .html (avec le bloc note, il faudra séléctionner "tous types de fichiers". Maintenant, on lance la page avec le navigateur et notre texte s'affiche =).

Petite astuce
Afin de mieux vous y retrouver dans votre code, vous pouvez ajouter des petits commentaires. Ces commentaires ne s'affichent pas sur votre page, uniquement sur le code, ainsi très pratiques pour s'y retrouver sur une page que l'on avait pas touchée depuis quelque temps et dont la programmation en détail nous avait un peu échappée.
Pour inscrire un commentaire, il suffit de l'entourer des tags <!-- et --> comme suit
Citation :
<!-- Ceci est un commentaire -->
Revenir en haut Aller en bas
Toshiro
Good Morning
avatar

Féminin Nombre de messages : 11
Age : 25
Logiciel(s) : Photoshop CS
Date d'inscription : 15/12/2007

MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Jeu 17 Jan - 22:37

Bonjour =D

Voilà j'ai une question, mais j'espère que tu n'y as pas déjà répondu dans ton cours, ce que je n'aurais pas vu ^^'' :

Quand tu parles des balises, simples et doubles, tu dis que les simples sont faîtes pour les images, mais les doubles elles servent pour quoi ?

Merci de ta réponse ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Miku
Invité



MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Jeu 17 Jan - 23:48

Coucou !
Mmmh, voui, les balises simples servent pour mettre des images, mais ce n'est qu'un exemple parmi d'autres hein ^^
par exemple les séparateurs se font ainsi : <hr />

Pour les balises doubles en fait, elles encadrent un élément, un peu comme le BBCode. Un exemple ? en BBCode pour mettre en gras on fait texte, en xHTML c'est <strong>texte</strong>. Mais plus général par exemple, les balises <html></html> en sont, ou encore <head></head> et <body></body> ^^

en ésperant avoir répondu à ta question =)
Miku
Revenir en haut Aller en bas
Toshiro
Good Morning
avatar

Féminin Nombre de messages : 11
Age : 25
Logiciel(s) : Photoshop CS
Date d'inscription : 15/12/2007

MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Ven 18 Jan - 0:15

Ah d'accord, je comprends mieux maintenant.
merci beaucoup d'avoir répondu à ma question ^.^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Miku
Invité



MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Ven 18 Jan - 0:43

zut, j'me suis raté T.T
pour les balises double en BBCode... j'ai oublier le tag Code, donc le texte en gras c'est comme ça hein ^^
Code:
[b]texte[/b]

Mais de rien ^_^
(c't'un plaisir de répondre à mini-Shun *shbaff*)
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Dim 20 Jan - 15:42

Gomen, encore moi ><

Je voudrait savoir comment fait t'on pour faire des sous-lien [En plus je m'explique mal], enfin il y a l'index, et aprés il y a d'autre pages comme Textures, brush, ...
Je voudrais savoir comme on les mets en place, je sais pas vraiment si c'est le bonne endroits ><

Gomen, Gomen ><
Revenir en haut Aller en bas
Miku
Invité



MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Dim 20 Jan - 18:05

Des sous-liens ? oO
mmmh... ca existe des sous liens ? xD
tu veux parler de simples liens vers d'autres pages ?
A mon avis tu n'es pas au bon topic, mais pas grave ^^ c'est vrai que le titre de ce cours porte un peu a confusion m'enfin...
Dans le deuxième cours je viendrais détail sur la création de liens, entre autre, mais si c'est bien de ça que tu parles, un lien se fait ainsi :
Code:
<a href="destination">texte ou image lié vers la destination</a>
(destination étant l'adresse vers la page amenée par ce lien, par exemple si c'est dans le même dossier que ta page index, ca pourra être href="textures.html".)
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: [ Cours ] Réaliser sa première page internet   Dim 20 Jan - 18:35

Merci ^^
Pardon, je savais pas trop où mettre @_@
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: [ Cours ] Réaliser sa première page internet   

Revenir en haut Aller en bas
 
[ Cours ] Réaliser sa première page internet
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Accès réseau internet (modem) cependant impossible démarrer page internet
» pages internet sauteuses
» Détecter des liens dans une page web [RESOLU]
» impossible d afficher la page internet
» [Résolu] Problème Internet qui ne s'ouvre plus et fenetres intempestives

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
iGraph :: Oh my graph ! :: - on the net-
Sauter vers: