|
| | |
Auteur | Message |
---|
| Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Classe de Matae Sam 21 Nov - 21:41 | |
| |
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| | | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 12:06 | |
| 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
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 15:29 | |
| 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?
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 16:34 | |
| 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 ^^
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 16:59 | |
| 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?
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:02 | |
| 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 :$
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:04 | |
| Je ferai de mon mieux pour bien t'expliquer alors!
Tu veux qu'on fasse le CSS de ta page HTML?
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:05 | |
| Je pense que il n'y a pas de soucis pour ça! :3 Je veux bien :3
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:11 | |
| 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 }
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:22 | |
| 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? :/
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:29 | |
| 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!
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:40 | |
| J'ai NotePad++ déjà :3 J'avais vu qu'il y'avait plusieurs langages en effet xD D'accord merci :3
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 17:43 | |
| 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?
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:04 | |
| Oui x') J'arrive pas à le renommer mais osef x') On est bon, c'est bien un nouveau fichier pour le CSS? XD
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:20 | |
| T'arrive pas à renommer quoi?
Oui oui, la feuille CSS est un nouveau fichier!
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:21 | |
| Le fichier, mais c'est pas utile x') D'accord merci C'est bon du coup ^^
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:23 | |
| 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
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:31 | |
| |
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Dim 22 Nov - 18:47 | |
| 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?
|
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Dim 22 Nov - 21:00 | |
| Ah oui d'accord xD Je fais ça demain :)
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Lun 23 Nov - 13:17 | |
| Tu me dis quand c'est bon alors, qu'on puisse commencer ^^
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Lun 30 Nov - 20:43 | |
| |
| | | | Matae
CAS's Points : 236 Messages : 164 Date d'arrivée : 15/11/2015
| |
| Sujet: Re: Classe de Matae Mer 2 Déc - 15:00 | |
| On peut continuer, désolée
|
| | | | Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Matae Mer 2 Déc - 20:42 | |
| 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?
|
| | |
| Sujet: Re: Classe de Matae | |
| |
| | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|