-Cours de domi-marine-

Pro designer Nombre de messages : 1948 Age : 42

Ok ok mdr c'est pas grave

Ancestor designer Nombre de messages : 621 Age : 32

Voici le début du cours! ^^ (je pense que tu as du voir çà avec la prof que tu avais avant!)

Tout d'abord, voici le point de départ de toutes nos pages.

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

DOCTYPE sert à dire au navigateur que nous sommes entrain de faire une page en HTML.
La balise <html> va englober toute la page.
La balise <title> va donner le titre de la page pour le navigateur.

On va écrire le contenu de notre page entre les balises <body> contenu </body> et on va terminer la page par </html>.

Le texte va s'organiser en paragraphe.

<p> début du paragraphe
</p> fin du paragraphe

Code:: <body>
<p>Chalut les gueux =) Comment allez vous? Bon bien moua très très bien..lol</p>
</body>

Rappel des balises
https://learning-design.actifforum.com/Creation-sur-le-web-c8/L-ecole-f114/L-ecole-de-site-web-f136/Classe-de-Dotox-HTML-CSS-et-un-peu-PHP-et-JS-f137/Rappel-des-balises-HTML-t4549.htm

Pour organiser le texte, vous pouvez utiliser les balises qui sont sur la page (lien ci dessus Wink

).

Concernant les liens et les images

https://learning-design.actifforum.com/Creation-sur-le-web-c8/L-ecole-f114/L-ecole-de-site-web-f136/Classe-de-Dotox-HTML-CSS-et-un-peu-PHP-et-JS-f137/Tutorial-les-liens-t4612.htm

As tu des questions?

Pro designer Nombre de messages : 1948 Age : 42

Non je pense avoir tout compris, j'avais pas vu ça avec ma prof

Ancestor designer Nombre de messages : 621 Age : 32

Je continue le cours dans l'après midi ou demain!

Pro designer Nombre de messages : 1948 Age : 42

Ok d'accord

Ancestor designer Nombre de messages : 621 Age : 32

Maintenant le CSS, faut donner du style à la page.

On peut faire de deux façons différentes.

Number 1
On crée une page spéciale pour le css et une autre pour le HTML.

/!\Attention de bien enregistrer la page au format .css

On crée une page spéciale pour le css et une autre pour le HTML.

/!\Attention de bien enregistrer la page au format .css

Pour la page XHTML:

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>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="nomdufichier.css" />
</head>
<body>
[b/]Contenu de la page[/b]
</body>
</html>

Pour la page css:

Code:: body
{
width: 750px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #000000;
color: #daa520;
}
#en_tete
{
width: 800px;
height: 250px;
text-align: center;
background-image: url();
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
width: 750px;
text-align: center;
}

.element_menu
{

margin-bottom: 00px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
#corps
{
margin-left: 000px;
margin-bottom: 000px;
padding: 0px;
text-align: left;

}
#pied_de_page
{
padding: 20px;
border: 0px dashed purple;
text-align: center;
}
p
{
width: 750px;
border: 0px solid black;
text-align: justify;
padding: 00px;
margin-bottom: 00px;
}
a,img
{
border:none;
}
a
{
color:goldenrod
}

Number 2

On le met directement dans la page avec le HTML (je conseille la première..mais pour débuter on le fait directement sur la page). Ensuite tu pourras modifier ton site plus facile avec une feuille style.

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>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
[b]Style de votre page[/b]
</style>
</head>
<body>
[b]Contenu de la page[/b]
</body>
</html>

http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html

Je pense que çà sera plus simple pour toi de lire directement les articles et de me poser des questions.

Pro designer Nombre de messages : 1948 Age : 42

Ok bon j'ai lu, c'et pas facile mais je crois avoir compris

Ancestor designer Nombre de messages : 621 Age : 32

D'accord, je t'explique pourquoi je te donne des liens pour travailler le cours.
J'ai débuté avec ce site et je pense qu'il donne de bonnes explications. Alors je peux faire des résumés (mais je vais oublier des informations probablement importantes mais je te donne un lien comme çà tu apprends plus facilement.

Comme tu le dis ce n'est pas facile, pose moi les questions que tu veux. (je vais te préparer un petit devoir qui va regrouper tous ce que tu as déjà vu Wink

)

Pro designer Nombre de messages : 1948 Age : 42

Ben j'ai pas trop de questions, il faut que je relise tout ça pour que ça rentre mais en application je verrai ce que je devrasi travailler

Ancestor designer Nombre de messages : 621 Age : 32

Oki, je vais finir de préparer le QCM (tu vas avoir la chance de tester mon qcm qui est sur mon site Smile

)

Pro designer Nombre de messages : 1948 Age : 42

Oué super!!!

Ancestor designer Nombre de messages : 621 Age : 32

http://slidoopy.free.fr/qcm.htm

Hop cinq petites questions pour voir si tu as bien compris Wink

Peux-tu me donner le score dès que tu l'as passé s'il te plaît?

Pro designer Nombre de messages : 1948 Age : 42

Ja'i eu 4/5, je me suis trompée à la 3 Very Happy

Ancestor designer Nombre de messages : 621 Age : 32

C'est bien, bon au boulot...on commence la création de ton site?!

Pro designer Nombre de messages : 1948 Age : 42

Oui!!!

Ancestor designer Nombre de messages : 621 Age : 32

Hop, on y va!

Tout d'abord, le HTML...

Il faut choisir la structure générale de ton site ton d'abord.

Sur un shéma, tu vas me mettre ou tu veux mettre ton menu, le contenu de la page et l'header.

Code:: <div id="en_tete">
La bannière
</div>

<div id="menu">
Ici le menu
</div>

<div id="corps">
Ici le texte de la page
</div>

Si tu veux avoir des précisions sur les balises div.

http://perso.orange.fr/bernard.quevillier/toposnew/div.htm

Pro designer Nombre de messages : 1948 Age : 42

Ok ben pour le design, je suis pas pro donc je vais le commander. Mais si tu veux je peux te dire ce que je voudrais?

Ancestor designer Nombre de messages : 621 Age : 32

Voui, vas y Wink

Tu pourrais faire un shéma avec l'emplacement de toute les parties s'il te plaît?

Header, mettre en le menu en dessous centré puis le contenu à gauche et le menu à droite. (tout çà en forme de shéma)

Pro designer Nombre de messages : 1948 Age : 42

Ben j'ai fait ça , j'espère que tu voulais ça

-Cours de domi-marine- - Page 2 Shma1ge7.th

Ancestor designer Nombre de messages : 621 Age : 32

Oh bien voilà, je te prépare le cours pour chaque partie ce soir et demain.

Bonne aprem;)

Pro designer Nombre de messages : 1948 Age : 42

Oua merçi!! Je vais passer ma commande mais tu chosirai quoi toi?

http://design.between-us.org/index.php?page=prix

Ancestor designer Nombre de messages : 621 Age : 32

Je ne sais pas. Je suis étonné qu'on fasse des services comme çà...je te conseille de le faire toi même et au moins tu l'auras fait sans payer Wink

Après tu fais ce que tu veux mais moi mon design est peut-être pourri mais au moins je les fais moi même et j'ai pris du plaisir.

Pro designer Nombre de messages : 1948 Age : 42

Oui ok ben je vais essayer lol

Ancestor designer Nombre de messages : 621 Age : 32

Super

Je vais débuter le cours ce soir Wink

Pro designer Nombre de messages : 1948 Age : 42

Ok mais j'au du mal lol