Aller au contenu


[Tutoriel] Site Web - Création / Organisation d'une page web


5 réponses à ce sujet
  • Vous ne pouvez pas répondre à ce sujet

#1
Invité_F@bienb_*

Bonjours à tous,

Étant DEV du site, je me suis dit que sa pourrais en intéressé certain de connaitre comment été organiser une page web

Le logiciel que j'utilise pour coder est Dreamweaver (d'adobe) qui est très pratique. Mais il est aussi possible d'en créé avec le bloc-note mais faudra renommer l'extension du fichier et l'enregistrer en UDF-8

Et oui une page web (html/htm/aspx/php...) à une certaine organisation.
On retrouve :

-> La doctype (elle spécifie le type de page : html/xhtml...)
-> L'en-tête (ou en retrouve les informations sur la page ainsi que ces scriptes et styles)
-> Le corps de la page (contenu de la page)

Exemple d'organisation :

////////////////////////////////////////////////////////////////////////////////////

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>Exemple</title> <!-- Balise titre -->
<meta name="language" content="fr-FR" /> <!-- langue de la page -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- Caractère d'affichage / Encodage (ex : UDF-8)-->

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <!-- Icone de la page -->
<link type="application/rss+xml" rel="alternate" title="RSS" href="rss.xml" /> <!-- Rss de la page (en .xml) -->
<link rel="stylesheet" href="global.css" type="text/css" /> <!-- Css externe de la page -->

<!-- Css de la page -->
...
<!-- /Css de la page/ -->

<!-- Scripte de la page -->
...
<!-- /Scripte de la page/ -->

</head>

<body>

<!-- Contenu -->
...
<!-- /Contenu/ -->

</body>
</html>

////////////////////////////////////////////////////////////////////////////////////

Modifié par F@bienb, 17 novembre 2010 - 12:25.


#2
Karasa

      Dénicheur d'hors-la-loi

  • messages 2 118
  • Inscrit(e) : 30 décembre 2009

  • Humeur du actuel : Aucun choisi

Réputation : 414 (Adulé !)
Très bien présenté !

Je trouve néanmoins que ton texte n'est pas accessible pour quelqu'un qui n'aurait jamais touché à de l'informatique.
Par exemple, tu aurais dû préciser que les <!-- --> sont utilisés afin de placer des commentaires (ce qui ne gêne pas le navigateur lorsqu'il lit ta page web). Tu pouvais mettre un peu plus de couleur afin de différencier les balises/commentaires/mot-clé. Enfin une petite introduction au HTML/CSS.


En tout cas, tu tombes bien car je venais d'apprendre la prog.web au travail. Ça me sera très utile merci !

Modifié par Karasa, 14 novembre 2010 - 22:52.

  • 0

Image IPB


#3
Invité_F@bienb_*

Utilisation des commentaires

Il existre 3 types de commentaire

////////////////////////////////////////////////////////////////////////////////////

Commentaire dans une page :

<!-- description -->

////////////////////////////////////////////////////////////////////////////////////

Commentaire dans le code css :

/* description */

////////////////////////////////////////////////////////////////////////////////////

Commentaire dans le php (sur une ligne) :

// description //

////////////////////////////////////////////////////////////////////////////////////

#4
Karasa

      Dénicheur d'hors-la-loi

  • messages 2 118
  • Inscrit(e) : 30 décembre 2009

  • Humeur du actuel : Aucun choisi

Réputation : 414 (Adulé !)
Hihihihi je pense que c'est mieux comme ça ;)

Je rajouterais que les plus curieux pourront savoir comment s'organise votre site web préféré en faisant un clic-droit sous Firefox et choisir "Code Source de la page".
C'est clair que c'est un capharnaüm total dès que vous le verrez mais il faut être habitué ;)
  • 0

Image IPB


#5
abrahel

  • messages 646
  • Inscrit(e) : 26 août 2010

  • Humeur du actuel : Aucun choisi

Réputation : 29 (Neutre)
ctrl + u c est mieux :P
que dis je...
prenez firebug sous firefox(pour les autres, je connais pas >_>)
et z'allez voir, c est bien mieux ranger que le code source de la page :P

beau boulot fabienb :)
  • 0

#6
Invité_F@bienb_*

Merci ^^.

Je ferais d'autre complément par la suite....
Pour mieux comprendre le code source d'une page, il faut passer par : http://validator.w3.org/
Il affiche en plus les erreurs de codage et beaucoup utilisé pour comprendre d'où viennent ses dernières.





0 utilisateur(s) dans ce forum

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)

Community Forum Software by IP.Board
Licence accordée à : AnimeServ.NET
Design & Code by Bad.Y o/
© 2013 AnimeServ