Cré'Actif Space ♥
Hello hello !

Soit le ou la bienvenue sur Cré'Actif Space, ton forum de graphisme et de codage !

N'hésite pas à rejoindre la communauté si tu es comme nous un fan de cookies !



AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Classe de Matae

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3, 4, 5  Suivant
AuteurMessage
Matae

avatar

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

MessageSujet: Classe de Matae   Sam 21 Nov - 21:41

Hey world. ** Coeurcoeurcoeur
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: coucou
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 ayaii

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Dim 22 Nov - 8:14

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. (a)
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 Calinn

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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 ^^

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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 :$

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Dim 22 Nov - 17:04

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

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

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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
}

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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? :/

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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!

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Dim 22 Nov - 18:20

T'arrive pas à renommer quoi?

Oui oui, la feuille CSS est un nouveau fichier!

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: 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 ^^

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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 ayaii

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: Re: Classe de Matae   Dim 22 Nov - 18:31

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: Re: Classe de Matae   Dim 22 Nov - 21:00

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Lun 23 Nov - 13:17

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

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Lun 30 Nov - 20:43

UP?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

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

MessageSujet: Re: Classe de Matae   Mer 2 Déc - 15:00

On peut continuer, désolée

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: 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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Contenu sponsorisé




MessageSujet: Re: Classe de Matae   

Revenir en haut Aller en bas
 

Classe de Matae

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 5Aller à la page : 1, 2, 3, 4, 5  Suivant

 Sujets similaires

+

 Sujets similaires

-
» [LIEN] microsd 8 GO classe 6 à prix gratos
» video helico classe 450! sans casse!!!!!
» Le vade-mecum de 1ère classe
» Les cabines de 2ème classe
» Croiseur classe D'Assas .Scratch 1/700éme

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cré'Actif Space ♥ :: Archives du forum :: Archives-