Classe de Matae

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Hey world.
Je ne trouvais pas de formulaire par ici, je ne savais pas si c'était possible de demander un(e) professeur de codage alors je poste :thug:
Je connais les bases du web et j'ai déjà pris des cours, je suis déjà assez formée, mais j'aimerais apprendre à être autonome et à faire des fiches, signatures à onglets, PA, etc.

Merci

Hello!

Alors si, le formulaire se trouvais ici, dans la section cours mais du coup j'ouvre ta classe directement!

Pour commencer je vais peux-être me présenter :3

Donc je suis Alicia (sans déconneeeeer?) et j'ai 18 ans. Je suis en première année de MMI (Métiers du Multimédia et de l'Internet) ce qui fait que je suis en cours de formation d'audiovisuel, de webdesign, de codage HTML, CSS et Javascript, je fais également de la programmation, de la communication et de l'expression.
Voilà voilà! Mes études m'ont appris énooooooormément de choses en matière de codage et je vais essayer de les retranscrire au mieux!

Pour commencer, je voudrais voir ce que tu sais faire. Est-ce que tu aurais un code à me proposer que tu as fais toute seule? Pas un code que tu as modifié mais un que tu as crée (si tu en as plusieurs c'est parfait) pour évaluer ton niveau et voir ce que je peux t'apprendre

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Lors de mes cours sur un autre forum de codage, j'avais du faire face à des exercices donc voilà ce que j'ai fait xD

1- Remplir des balises xD

Code:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Titre du site</title>
</head>
<body>

</body>
</html>

2- "Rajouter un header, dans lequel il y aura un titre de niveau 1 (h1), une image en guise de bannière, puis une navigation, qui comprendra une liste de liens"

Code:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Titre du site </title>
</head>
<body>
<header>
<img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>
<h1>Je suis un titre en H1</h1>
<nav>
<ul>

<li> Accueil <a href="http://www.pixels-paradise.com/"</a></li>
<li> Calendrier <a href="http://www.pixels-paradise.com/calendar"</a></li>
<li> Galeries <a href="http://www.pixels-paradise.com/gallery/index.htm"</a></li>
<li> FAQ <a href="http://www.pixels-paradise.com/faq"</a></li>
<li> Membres <a href="http://www.pixels-paradise.com/memberlist"</a></li>
<li> Groupes <a href="http://www.pixels-paradise.com/groups"</a></li>
<li> Profil <a href="http://www.pixels-paradise.com/profile?mode=editprofile"</a></li>
<li> Messagerie <a href="http://www.pixels-paradise.com/privmsg?folder=inbox"</a></li>
</ul>
</nav>
</header>

</body>
</html>

3- "Rajouter un main avec grand titre, dans lequel il y a un article et un aside, et dans chacun d'entre eux, un tritre principal, trois titres secondaires, et trois paragraphes !"

Code:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Titre du site </title>
</head>
<body>
<header>
<img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>
<h1>Je suis un titre en H1</h1>
<nav>
<ul>

<li> Accueil <a href="http://www.pixels-paradise.com/"</a></li>
<li> Calendrier <a href="http://www.pixels-paradise.com/calendar"</a></li>
<li> Galeries <a href="http://www.pixels-paradise.com/gallery/index.htm"</a></li>
<li> FAQ <a href="http://www.pixels-paradise.com/faq"</a></li>
<li> Membres <a href="http://www.pixels-paradise.com/memberlist"</a></li>
<li> Groupes <a href="http://www.pixels-paradise.com/groups"</a></li>
<li> Profil <a href="http://www.pixels-paradise.com/profile?mode=editprofile"</a></li>
<li> Messagerie <a href="http://www.pixels-paradise.com/privmsg?folder=inbox"</a></li>
</ul>
</nav>
</header>
<main>
<h2>Coucou</h2>
<article>
<h2>Princess</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

<h3>Un zoli titre </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

<h3>Oùne autre zoli titre</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

</article>
<aside>
<h2>Step aside</h2>
<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Rigole please </h3>
<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Gl,hf</h3>
<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Goodbye</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor.</p>
</aside>
</main>
</body>
</html>

4- Rajout d'un footer (un paragraphe pour les mentions légales, et ensuite une liste de liens pour les réseaux sociaux)

Code:

<!DOCTYPE html>

<html lang="">

<head>
<meta charset="utf-8">

<title>Titre du site </title>
</head>

<body>
<header>
<img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>

<h1>Je suis un titre en H1</h1>
<nav>
<ul>

<li> <a href="http://www.pixels-paradise.com/">Accueil</a> </li>
<li> <a href="http://www.pixels-paradise.com/">Règlement</a> </li>
<li> <a href="http://www.pixels-paradise.com/">FAQ</a> </li>
<li> <a href="http://www.pixels-paradise.com/">Rechercher</a> </li>
<li> <a href="http://www.pixels-paradise.com/"></a>Membres</li>
<li> <a href="http://www.pixels-paradise.com/">Groupes</a> </li>
<li> <a href="http://www.pixels-paradise.com/">Profil</a> </li>
<li> <a href="http://www.pixels-paradise.com/">Messages</a> </li>
<li> <a href="http://www.pixels-paradise.com/">Connexion</a> </li>

</ul>
</nav>

</header>

<main>

<h2>Coucou</h2>

<article>

<h2>Princess</h2>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

<h3>Un zoli titre </h3>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

<h3>Oùne autre zoli titre</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

</article>

<aside>

<h2>Step aside</h2>

<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Rigole please </h3>

<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Gl,hf</h3>

<p>Donec lectus mi, interdum at orci vel, commodo vehicula turpis. Nulla ac tincidunt enim, in porttitor ante. Proin luctus posuere elit id aliquet.
Quisque tempor tincidunt mauris sit amet aliquam. Sed sit amet blandit quam. Nullam id tristique velit, ut laoreet mi.
Aliquam ornare, velit a gravida elementum, quam augue volutpat urna, eget rutrum mi orci nec orci.
Vestibulum ut nisl egestas, suscipit est vitae, imperdiet turpis.
Fusce eleifend elit luctus molestie varius. Sed suscipit ultrices condimentum.</p>

<h3>Goodbye</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl.
Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque.
Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue.
Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc.
Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio.
Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor.</p>

</aside>
</main>

<footer>
<p>Thanks blabla truc blabla for blabla-site okok</p>
<ul>
<li> <a href="https://www.facebook.com/">Facebook</a></li>
<li> <a href="https://twitter.com/" >Twitter </a></li>
</ul>
</footer>
</body>
</html>

Pour le moment j'ai déjà fait ça, mes connaisssance s'arrêtent là, aux sites web! XDD

D'accord très bien, au moins tu as les bases!

Est-ce que tu avais modifié l'apparence de cette page web en CSS où tu veux uniquement apprendre les codes HTML?

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Non, on avait uniquement fait du HTML pour bien commencer et il allait me faire passer au CSS :3
Je veux bien continuer sur du CSS ^^

La personne avec qui tu avais fais tes cours de HTML a lâché ta classe ou vous comptiez bosser le CSS de ta page web?

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

On va y arriver je pense mais elle me fait plus bosser sur de l'HTML pour bien y arriver et comme cette personne explique assez bizzarement j'ai du mal donc je préfère passer au CSS avec toi si ça te gêne pas :$

Je ferai de mon mieux pour bien t'expliquer alors!

Tu veux qu'on fasse le CSS de ta page HTML?

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Je pense que il n'y a pas de soucis pour ça! :3
Je veux bien :3

Très bien!

Alors pour ça il faut déjà savoir une chose, pour que ton CSS soit affecté à tes balises HTML, il faudra ajouter à ces balises ce que l'on appelle des id ou des classes.

Pour être plus claires, si par exemple tu veux mettre ton titre que tu as mis dans une balise h1 en rouge, tu fera ceci:

CODE HTML

Code:

<h1 id="nom">Titre que tu veux en rouge</h1>

CODE CSS

Code:

#nom {
color: red
}

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

D'accord, je sais déjà que pour les forums l'HTML ira dans les templates ou autres mais que le CSS est dans les couleurs > Feuilles de s.de CSS, donc ça met directement tout en lien, mais dans un code unique pour un site web, on met où ça le CSS? Il est assimiié directement au HTML comme tu le dis? :/

Ahhh, je suis contente que tu veuilles apprendre en dehors des forums parce que sinon je connais pas les templates x)

Alors déjà, si tu as un Windows, c'est mieux d'avoir Notepad++ pour éditer tes pages (CSS et HTML), si tu as un Mac, perso j'utilise TextWrangler, c'est le plus proche de Notepad++.

Ta page HTML tu l'as enregistré en .html
Quand tu vas créer un fichier css avec le même traitement de texte, tu l'enregistreras en .css

Dans ta page CSS, tu n'auras rien à mettre, mais dans ton HTML tu copies ce code après ton "title":

Code:

<link rel="stylesheet" type="text/css" href="NOMDETONFICHIER.css">

Attention c'est important, il faut que tes deux fichiers soient dans le même dossier!

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

J'ai NotePad++ déjà :3
J'avais vu qu'il y'avait plusieurs langages en effet xD
D'accord merci :3

Notepad++ c'est sympa parce que tu as les raccourcis quand tu écris, ce que tu n'as pas sur les applis pour Mac :')

Pour pouvoir avancer en même temps que toi je me suis crée un dossier avec ton HTML où j'ai rajouté le code que je t'ai donné, j'ai crée ensuite un fichier css que j'ai nommé "stylecss.css"

Jusque là on est bon?

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Oui x')
J'arrive pas à le renommer mais osef x')
On est bon, c'est bien un nouveau fichier pour le CSS? XD

T'arrive pas à renommer quoi?

Oui oui, la feuille CSS est un nouveau fichier!

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Le fichier, mais c'est pas utile x')
D'accord merci
C'est bon du coup ^^

Parfait!

Pour tester et voir ci ça marche (si la liaison est bien faite), tu vas mettre le titre (h1) en rouge, comme je t'ai expliqué avant

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Je pense que c'est bon ^w^
https://2img.net/image.noelshack.com/fichiers/2015/47/1448213498-sdfghj.jpg

Cool!

Perso j'ai repris on code HTML que tu m'as monté donc pour le moment j'ai la page avec ta photo, tout le texte et les titres à gauche..

J'ai également ré-indenté tout ton HTML pour qu'il soit plus lisible:

Code:

<!DOCTYPE html>

<html lang="">

<head>
<meta charset="utf-8">
<title>Titre du site </title>
<link rel="stylesheet" type="text/css" href="stylecss.css">
</head>
<body>
   <header>
      <img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>
      <h1>Je suis un titre en H1</h1>
      <nav>
         <ul>
            <li> <a href="http://www.pixels-paradise.com/">Accueil</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">Règlement</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">FAQ</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">Rechercher</a> </li>
         <li> <a href="http://www.pixels-paradise.com/"></a>Membres</li>
   <li> <a href="http://www.pixels-paradise.com/">Groupes</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">Profil</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">Messages</a> </li>
   <li> <a href="http://www.pixels-paradise.com/">Connexion</a> </li>

      </ul>
      </nav>
   </header>
   <main>
      <h2>Coucou</h2>
      <article>
         <h2>Princess</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         <h3>Un zoli titre </h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         <h3>Oùne autre zoli titre</h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
      </article>
<aside>
   <h2>Step aside</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         <h3>Rigole please </h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         <h3>Gl,hf</h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         <h3>Goodbye</h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>

</aside>
      </main>
      <footer>
         <p>Thanks blabla truc blabla for blabla-site okok</p>
         <ul>
            <li> <a href="https://www.facebook.com/">Facebook</a></li>
            <li> <a href="https://twitter.com/" >Twitter </a></li>
         </ul>
      </footer>
</body>
</html>

Une fois que tu as tout ça! Je pense que ça serait sympa de mettre ton contenu dans une page (comme ici la page violette) avec un fond ou un pattern de fond (comme ici le bois gris) non?

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

Ah oui d'accord xD
Je fais ça demain :)

Tu me dis quand c'est bon alors, qu'on puisse commencer ^^

CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015

On peut continuer, désolée

Du coup!
Je suis un peu paumée avec ce temps qui est passé ><

Du coup tu as ton CSS et ton HTML.
On va faire un cadre autour de ta page pour commencer à structurer le tout (comme ici les bordure violettes foncées)

Pour ceci, il faut encadrer tout le contenu dans une div avec l'ID que l'on va nommer "page"

En clair, l'ouverture de la div se fait juste après la balise header et se referme après le footer .

Jusque là tu m'a suivi?

» Classe de Little Star
» Classe de Deutsch'
» Classe de Mystigri
» Classe de louve
» Classe de Célée

Classe de Matae

Classe de Matae

Sujets similaires

Sujets similaires