Créer son site web [Formation en cours ]

Bonjour

Alors la formation sera organisé comme ça ,

1 ère partie

Chapitre 1 :Le xhtml
Chapitre 2 :Le CSS c'est plus joli
Chapitre 3 :CSS & xhtml encore plus beau

2 ème partie

Php

_____________________________________________
_____________________________________
_______________
___
_
Introduction

Alors vous vous demander certainement ce que veut dire Xhtml & css ?

--Ben oui mais tu va nous le dire hein

Logique :p Alors ce sont deux langages qui vont vous servir a créer votre site web en partant de rien et en arrivant a tout ^^

Le xhtml & le css vont dire a votre ordinateur ce qu'il doit afficher ,car ce n'est pas en tapant votre paragraphe que vous aurez un site web ^^

Ces langages sont assez simples a utiliser vous aller voir

Mais ... mais pourquoi tu nous met 2 langages pour un site web ?

Car 1 sert a la mise en forme c'est le css qui vous permettra de mettre des couleurs le fond ,la police la taille etc etc

Sa se dit en anglais et en non abrégée car c'est une abréviation :

Cascading Style Sheets ("Feuille de style")
C'est avec ce language que vous direz a votre naviguateur mon titre "tintin" sera rouge & mon paragraphe en arial Smile

Et mon fond sera violet Razz

Et le xhtml est aussi une abréviation et veut dire :
eXtensible HyperText Markup Language

Dedans vous écrirez vos pages web en disant je veux ceci dnas mon menu ,ceci en bas de ma page etc

Donc pour reprendre rapidement :
>> Xhtml pour le contenu
>> Css pour la presentation

Passons à la suite que vaut t-il pour coder ??

Il faut un editeur de texte, Bloc note peut faire l'affaire mais je ne le conseille pas,

Utilisez plutôt notepad ++ qui colore le texte tout seul et numérote les lignes surtout qu'il est gratuit donc pas la peine de s'en privé Wink

Telecharger Notepad ++

Choisissez la version en .exe Very Happy

Et il faut quoi d'autre ??

Un naviguateur web ,Celui ci sert a afficher les pages web et va tranformer votre code ,c'est à dire si dedans vous dites mettez moi ce titre en bleu il va le mettre en bleu

Voila C'est tout pour ce premier chapitre :

Test de fin de chapitre

>> A quoi sert un editeur de texte ?
1 | A rediger le code
2 |A lire le code

>> Que siginifie xhtml ?
1 || eXtensible HyperText Markup Language
2 || C'est dans un language incompréhensible pour informaticiens

Voila j'espère que vous êtes contant de ce petit debut

J'ai installé notepad Smile

Pour les réponses du test on te les envoies par mp ?

Oui

Voila mp envoye et notepad installe

2 ème Chapitre : Votre première page

Dans ce chapitre nous allons créer votre première page et voir ensemble les différents possibilités pour insérer du xhtml

Les Balises

En
xhtml vous utiliserez du texte mais aussi des balises qui servent a
dire a votre navigateur ce qu'il faut faire car pour lui si on écrit
"écris le mot chèvre en titre a gauche "il comprendra rien lol!

Une balise commence et se termine toujours par < ensuite le nom de votre balise et >

Il faut savoir qu'il excite 2 types de balises ,elles peuvent être par paire ou seules
[center]Exemple de balises par paire

Par exemple une balise par paire serait comme ceci :

Code:: <paragraphe> votre texte</paragraphe>

Mais pourquoi ta mis un slash Suspect

?

Car
pour fermer votre paire il faut rajouter un"/" devant le nom de votre
balise pour dire au naviguateur que c'est par exemple la fin d'un
paragraphe

Exemple de balise seule

Code:: <image />

Ah Ah tu t'est trompé toi même tu a dis de mettre au début le slash et tu l'a mis a la fin sourire

En faite je vous ai dis ça pour une balise paire mais pour une balise impaire on met le slash après le nom de la balise Wink

En
récapitulant une balise se termine toujours par un slash mais pour les
paires c'est avant le nom et pour les uniques c'est après le nom pour
les seuls Very Happy

Besoins d'aspirine ?

Les attributs

Un
attribut va servir a donner des précisions sur une balises par exemple
pour un lien car c'est facile de dire je veux un lien mais vers quelle
adresse ?

Code:: <lien url="smilepub.superforum.fr">

D'après vous ça veut dire quoi ?tout simplement que le lien va vers Smile Pub geek

A savoir

Ce
qu'il faut savoir c'est bien sur ce que je vous ai dit concernant
l'ouverture et la fermeture des balises & les attributs mais 2
autres choses aussi :

Une balise s'écrit toujours en minuscule

Un attribut peut contenir des majuscules

Information :J'ai mis de faux noms de balises inventés par moi vous aurez tous le temps d'apprendre les vrais Wink

Si vous avez compris sa on peut créer votre première page en xhtml

Votre première Page xhtml proprement dite

Je vous ai jusqu'à maintenant fais de la théorie mais je vois que vous êtes impatients passons à la pratique :

Ouvrez notepad ++ et choisissez dans l'onglet language en haut le language "html"

Testons ensemble cette première page,pour commencer copier y ce bout de code

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Une
fois ce code copié et collé enregistrez le fichier (fichier >>
enregistrer sous) en choisisant dans le menu déroulant en dessous html
,nommez votre fichier et enregistrez le a un endroit ou vous savez ou
il est Wink

Ensuite ouvrez le en double cliquant dessus

Eh mais tu te fous de moi ?On a fais tous sa pour une page vide ??

Calmons nous je suis zen

La page n'est pas si vide vous voyez en haut il y a le titre =)

Et elle contient beaucoup d'information nessesaire pour le naviguateur.

Je vais vous expliqué ligne par ligne,reprenons notre bout de code :

Citation :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

La première ligne fais exception aux règles que je vous ai dit elle va
dire au navigateur que la page est en xhml version 1.1 qui est la plus
récente,Cette ligne s'apelle le "doctotype"

la deuxième ligne contient la balise et ses attributs,elle
signifie le début de notre page et contient 2 attributs :

xmlns : Cet attribut mène vers un lien qui contient du xhtml mais pas besoins d'y toucher
xml:lang="fr" contient la langue qui est pour moi le français

La troisième est assez explicite elle contient le titre qui sera affiché en haut de notre page Wink

Ensuite vient et elle contiennent des
informations d'en-tête sur la page mais ce n'est pas très important je
reviendrais dessus plus tard Wink

Entre et se trouve votre page et pour fermer la page on met le

C'est fini pour cette première page mais avant de se quitter je vias juste vous montrer un petit truc pratique :

Les commentaires

Pour l'instant dans vos 5 lignes sa ne sert pas à grand choses
mais plus tard si vous realiser des grandes pages vous aurez des fois
plus d'une centainne de ligne alors pour ne pas s'enrouiller vous
pourrez les commenter
Pour ouvrir un commentaire on utilise la balise
Un commentaire est bien sur invisible aux visiteurs ce n'est que pour vous ,on peut metre des majuscules,des minuscules et tout ce qu'on veut dans un commentaire .

On va tester sur notre script précédent

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

</body>
</html>

Voila j'espère que vous êtes content de vous =)
Ce n'est aps encore le site de l'année mais c'est un debut

Un petit test pour finir en beautée

A quoi sert la balise

Code:: <title> </title>

?
1) A mettre le titre de ma page
2)A commenter mon script

Qu'affichera ce code ?

Code::

1) rien
2) Ceci est quelque chose mais quoi ?

Peut-on mettre un commentaire en majuscule & avec des chiffres
1) Oui
2) Non surement pas

Avez vous bien compris jusqu'ici ?

Oui c'est bon j'ai compris Smile

Je l'ai déjà fait en cours d'information le langage html Smile

Un petit peu d'organisation =D

A la fin de ce chapitre vous saurez mettre des titres du gras ,en italique et je vous demanderais un petit exercice
Bonne chance

Les paragraphes

Alors pour les paragraphe il nous faudra utiliser les balises et
Donc de cette manière vous verrez du texte :

Code:: Ici c'est un paragraphe

Vous pouvez tester si vous voulait Wink

Sauter une ligne

On utilisera une balise seule cette fois il sagit de

Code:: <br />

J'ai fait un petit teste avec ce code :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<p>
Ceci est le premier paragraphe <br />
Avec saut de ligne <br />
c'est magique hein :) </br >
</body>
</html>

Normalement vous l'avez tous compris
cliquez ici pour tester

Je vous poste le 2 points a voir encore avant l'exercice juste après

C'est pas magique c'est le html mdr bien compris pour le moment ca on le savait

oui je sais c'est pour ça que la je fais le dernier chapitre et on passe au css =) que vous ne connaissez crois Wink

Je ne connais pas du tout le css Smile

Enfin en general mais je connais pas tout du css

Ok =D

Mettre en valeur le texte

Vous pouvez mettre le texte plus ou moins en valeur grâce a deux balises Wink

Elles fonctionnent toutes les deux par paire :
Strong pour mettre en gras & em pour mettre en italique,

Elle s'utilisent donc comme ceci :

Code:: <strong> Ce texte sera en gras </strong>

Et comme cela

Code:: <em> Ceci sera en italique</em>

Donc em = italique
strong = gras

Les titres

Nos amis les informaticiens ont tous prévu,il existe 6 type de titre différents ,
allant tu plus grand au moins grand .
Le plus grand étant h1 et le plus petit h6

Voila un petit code pour vous permettre de voir le resultat Wink

Code:: <h1> Ceci est un titre en h1 </h1><br />
<h2> Ceci est un titre en h2 </h2><br />
<h3> Ceci est un titre en h3 </h3><br />
   <h4> Ceci est un titre en h4 </h4><br />
      <h5> Ceci est un titre en h5 </h5><br />
         <h6> Ceci est un titre en h6 </h6><br />

Tester ici

Voila donc pour les titres passons aux autres types de balises :

Les citations
Pour mettre une citation dans un paragraphe donc une courte citation utilisez cette balise :

Code:: Je sais déja <q>faire du xhtml </q> comme disait Valentin

Comme vous avez vu on utilise la balise

Et pour les longues citation ,hors paragraphe,utilisez la balise

Code:

[b]<blockquote>
Votre très très très longue citation ^^
[/b][b]</blockquote>[/b]

Les exposants et indices

Pour mettreen exposant ou en indice il ya 2 jolis balises :p

Pour les indices utilisez

Code:

<sub></sub>

Et les exposants

Code:

<sup> </sup>

Les acronymes
Les acronymes permettent de mettre une petit bulle d'information quand vous parlez d'une abréviation pour bien comprendre de quoi il sagit,je vous invite vivement a la tester d'ailleur

Vous utiliserez pour cette balise l'attribut title

Code:

<acronym title="Cascading Style Sheets">CSS</acronym>

Les balise type inline ou bloc

Dans le xhtml on distinguie 2 catégorie de balises,
Les balises de type inline :
Elle doivent être mis dans des paragraphes comme par exemple , ,

Les balises de type bloc
Elle font un nouveau bloc dans la page et ne doivent être mise dans des balises inline .
Ce sont toutes la balises comme
,
etc ...

Les liens

Insérer un lien :
Pour faire des liens vous pouvez faire des liens relatifs ou absolus,

Les relatif se forme comme ceci c'est pour lier a une autre page de votre site:
/mon_dossier/index.html

Et pour les absolus ce sont les plus courant qui se forme avec le http devant comme par exemple :
https://smilepub.superforum.fr
Ces dernier sont donc appelés lien absolus

Je reviens d'ici quelques heures pour voir comment lier a d'autres pages et insérer des images et après bonjour le css

Savez vous mettre des liens et image ?Si oui je passe au css

oui les liens et images ca va passe au css

Pour commencer ouvrez dans notepad un nouveau fichier et choisissez dans codage language css

Les balises en css ?
Non pas de balise ce sont des propriétés sous cette forme Very Happy

Code:: background-color: Black;

En css une propriété se termine toujours par un point virgule ,Sans ça votre ligne du dessous de fonctionnera pas,

Nous allons donc appliquer un style a une balise Wink

Il ya donc plusieurs méthodes pour se faire je vous conseil d'ailleurs la première Smile

1 ère methode et celle que je vous conseille

C'est d'utiliser un fichier css externe,ça a comme avantage de pouvoir changer votre design facilement d'avoir le même sur toutes les pages et d'alléger les pages Wink

Pour ce faire vous devez dans votre fichier html rajouter une ligne avant :

Code:: <link rel="stylesheet" media="screen" type="text/css" title="Design de base" href="design.css" />

La balise link prend 2 attributs :
href ="lien relatif vers votre design"
Et title =" "
je pense que c'est assez compréhensible href pour un lien relatif et title pour le nom que vous voullez donner a votre css Wink

2 ème methode

Vous pouvez mettre votre css dans le haut de votre page xhtml de cette manière

Code:: <!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>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*Ici se trouveront les balises et propriétés css */
</style>
</head>
<body>
<p>la page utilisera le css utilisé plus haut </p>
</body>
</html>

Voila c'est assez simple

La troisième solution directement sur des balises en ajoutant l'attribut style a la balise comme ceci

Code:: <p style =" votre propriété css >
</p>

Désolé pour mon retard je continue le cours dès ce soir

Désolé je suis overbooké =S

» demande de formation graphiste
» Demande de formation analyste
» formation de pubeuse
» Formation analyste