mardi 8 février 2011

TP en HTML et CSS

Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.??
Par exemple, pour écrire "Vous êtes en ligne sur Formation web" en XHTML,il suffit de le taper dans votre document XHTML :
Vous êtes en ligne sur Formation web !.
mais l'écriture de cette phrase doit être dans une balise que nous avons vu ici ,comme vous voiez Une balise commence par "<" et se termine par ">". Par exemple :
<balise>.
Les balises en html sont toujours  invisibles pour le visiteur et se qui visible c'est le texte qui se trouve entre les balises .


-Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.

exemple:



<titre>Bienvenue sur formation web
 </titre> c'est une  balise paire,<titre> indique le début du titre, et elle est refermée plus loin avec </titre>,avec cette balise le navigateur comprendre que ce qui entre <titre> et </titre> 
et le titre de votre site web et sera affiché en tête de votre page pour indiquer aux visiteurs 
que c'est sa le titre de votre site dans notre exemple nous avons choisi comme titre se notre site
la phrase suivante "Bienvenue sur formation web",pour revenir à la ligne on met cette balise <br/> 
 c'est  une balise seule

 donc C'est le moment d'ouvrir votre éditeur
(Bloc-Notes, Notepad++ ou un autre), et de tester avec moi ce que nous avons entrain de dire
et sera  votre première page web  :)



Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :
 


Recopiez ce code dans votre éditeur, et enregistrez la page avec l'extension .html (ou .htm ça marche aussi). Par exemple avec Notepad++, allez dans le menu "Fichier / Enregistrer", et tapez "essai.html" comme sur la capture d'écran ci-dessous 
 

<!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>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>



J'ai appelé ma page "test .html", mais pour vous vous pouvez lui donner le nom que vous voulez par exemple
"index.html" ou "footer.html" ca dépend de votre choix .

Rendez-vous ensuite dans le dossier où vous avez enregistré la page. Vous devriez voir votre fichier (x)HTML pour mon exemple il apparue comme la suite:


Double-cliquez sur l'icône pour l'ouvrir dans votre navigateur.pour tester ce que vous avez fait jusqu'à maintenant,la résultat de votre clic sera la suivante.

Voici les explications ligne par ligne :
  1. Sur la toute première ligne se trouve la déclaration "Doctype". C'est une balise un peu particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données tout à l'heure.
    Concrètement, cette balise sert à dire au navigateur que ce que vous faites est une page XHTML, et que vous utilisez la version 1.0 du langage XHTML (eh oui, comme dans les programmes il y a des versions !).
    Pourquoi je vous apprends à utiliser le XHTML 1.0 ? Parce que c'est une des versions les plus récentes, et que votre site sera ainsi à jour
  2. Vient ensuite la balise <html> . C'est la balise principale qui englobera toute votre page (x)HTML. Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html> , qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html> .
    La balise <html> contient 2 attributs :

    • xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en préoccupez pas et laissez comme ça, ça ne nous intéresse pas particulièrement.
    • xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en italien "it", espagnol "es" etc etc...

  3. La balise <head> contient quelques informations d'en-tête pour votre page web. Elle est refermée un peu plus loin.

    1. A l'intérieur de la balise <head> , vous trouvez notamment la balise <title> . Elle est très importante : c'est elle qui contient le titre de votre page web. Ici, le titre est "Bienvenue sur mon site !", mais c'est à vous de mettre le bon titre de votre page 
    2. Ensuite, vous pouvez voir une balise <meta> . Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard parce qu'elles ne sont pas indispensables. Seule celle que je vous ai donnée est indispensable : elle sert à indiquer que vous allez taper des caractères spécifiques au français (éèàê etc...).

  4. Enfin (ouf!), après la fermeture de la balise <head> commence une nouvelle balise : <body>
    C'est entre <body> et </body> que vous taperez le contenu de votre page web. En clair, c'est entre ces 2 balises que nous allons passer 99% de notre temps
    Pour le moment, il n'y a rien entre ces 2 balises, donc la page n'affiche rien (il y a un fond blanc comme vous avez pu le constater tout à l'heure).
-pour que ma page va apparaitre clairement je vais écrire quelque chose au cœur de la page:



pour que l'organisation de ma page sera bien fait je vais utiliser un fichier CSS où je vais mettre mon code
Style.
et je nome ce fichier "style.css"
je reviens à ma page test.html pour mettre le lien entre la page style.css et la page test.html






je reviens au fichier style.css pour mettre les codes style

 
on va remplir chaque partie de notre style :

J'ai appelé mon fichier style "style.css", mais pour vous vous pouvez lui donner le nom que vous voulez par
enregistrez le fichier dans le même dossier où se trouve le fichier "test.html"

Double-cliquez sur l'icône  pour l'ouvrir dans votre navigateur.pour tester ce que vous avez fait jusqu'à maintenant,la résultat de votre clic sera la suivante.

j'espère que ces explications sont utiles pour vous à très bientôt 
 
Publié par à

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)