Page 1 sur 2 • 1, 2 
Cappuccino- Informations : J'ai soif.
Messages : 135 
![[Cappuccino] On apprend mieux autour d'une tasse Empty](https://2img.net/i/empty.gif)
[Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 12:52
Je me lance enfin dans cette effrayante aventure xD
▬ Module 1 - Manipulation 1
On commence par ceci :
ensuite cela :
Et une petite question sûrement très bête. Comme je suis allée trop vite et que je me suis basée sur Notepad ++, j'ai enregistré en notant le nom et en ouvrant la liste défilante pour sélectionner html. En faisant ça, lorsque j'ai voulu ouvrir la page sur mon navigateur j'ai eu le code en "brut", pourquoi ? Sur Notepad en faisant ça j'avais le résultat du code et non le code
Si vous ne savez pas trop parce que ça rentre dans les fonctions du doc ce n'est pas gênant du tout !
▬ Module 1 - Manipulation 1
On commence par ceci :
- Screen du rendu:
![[Cappuccino] On apprend mieux autour d'une tasse Wais](https://www.zupimages.net/up/20/53/wais.png)
ensuite cela :
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>La première page HTML de Cappuccino</title>
</head>
<body>
<!-- Ici se trouvera le contenu de l'exercice de Cappuccino -->
</body>
</html>
Et une petite question sûrement très bête. Comme je suis allée trop vite et que je me suis basée sur Notepad ++, j'ai enregistré en notant le nom et en ouvrant la liste défilante pour sélectionner html. En faisant ça, lorsque j'ai voulu ouvrir la page sur mon navigateur j'ai eu le code en "brut", pourquoi ? Sur Notepad en faisant ça j'avais le résultat du code et non le code
Si vous ne savez pas trop parce que ça rentre dans les fonctions du doc ce n'est pas gênant du tout !
MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 13:48
Hello !
C'est nickel pour le code
Ensuite, avec sublimeTexte il faut
> Soit que tu lui dises avant d'enregistrer que c'est du HTML (en passant par View > Syntax > HTML) et ensuite tu enregistre en HTML et c'est ok.
> Soit que tu le nomme avec l'extension en plus de sélectionner HTML : monFichier.html
Ca sera le cas uniquement au premier enregistrement, ensuite si tu travaille sur le même fichier tu as juste à enregistrer ça gardera le format
C'est nickel pour le code
Ensuite, avec sublimeTexte il faut
> Soit que tu lui dises avant d'enregistrer que c'est du HTML (en passant par View > Syntax > HTML) et ensuite tu enregistre en HTML et c'est ok.
> Soit que tu le nomme avec l'extension en plus de sélectionner HTML : monFichier.html
Ca sera le cas uniquement au premier enregistrement, ensuite si tu travaille sur le même fichier tu as juste à enregistrer ça gardera le format
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 15:02
Je vois ! Merci pour l'explication, je me note ça pour ne plus me faire avoir.
Voici la suite ▬ Module 1 - Manipulation 2
Pas de screen cette fois, la page est longue et dezoomer rendra le tout illisible je pense :/
Voici la suite ▬ Module 1 - Manipulation 2
Pas de screen cette fois, la page est longue et dezoomer rendra le tout illisible je pense :/
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>La première page HTML de Cappuccino</title>
</head>
<body>
<h1>Page HTML de Cappuccino</h1>
<div>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare, dolor nec tristique eleifend, neque nisl cursus diam, pharetra viverra nulla mi a orci. Ut id lacinia massa. Aenean mollis risus vel nulla feugiat posuere. Integer commodo ex vitae metus facilisis pretium. Aenean fringilla, mi vitae lobortis tempus, dui lorem feugiat justo, at rutrum libero leo faucibus nunc. Nullam venenatis orci sit amet tellus ullamcorper, id rutrum massa viverra. Sed a quam accumsan libero fringilla porta. Nullam at quam vel quam euismod sagittis.</p><!-- Merci pour l'astuce !
--><p>Pellentesque accumsan tincidunt lorem ac elementum. Etiam luctus orci massa, id laoreet purus cursus eu. Duis lacinia,tellus ac feugiat tincidunt, nulla odio feugiat felis, eu tempor odio orci eu nisl. Vivamus vestibulum ut enim non gravida. Suspendisse volutpat enim eu quam tincidunt gravida. Sed nec viverra metus. Donec dolor mauris, imperdiet ut ullamcorper sit amet, sagittis et neque.</p>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
</div>
<h2>Sous-titre</h2>
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <span>Je suis un texte</span> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. <span>Je suis un texte</span> Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. <span>Je suis un texte</span> Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">La Tambouille des Râleuses</a></p>
<h3>Sous-sous-titre</h3>
<p>In pulvinar enim a facilisis mattis. Vivamus aliquet eros nec tortor lacinia, vel commodo mi convallis. Sed tincidunt vel augue at blandit. Vestibulum arcu tellus, suscipit et ex non, interdum mattis nisi. Sed ut tellus scelerisque, cursus nisl vel, porta ante. Nullam vitae elementum velit. In iaculis dictum nisi sed gravida. Integer bibendum eget justo sit amet gravida. Proin tristique laoreet laoreet. Vestibulum ac urna a enim hendrerit scelerisque. Cras euismod feugiat ligula, vel hendrerit libero efficitur in. Cras vel dui in erat rhoncus consequat quis facilisis risus.
<p><!-- Merci pour l'astuce !
--><p>Quisque maximus hendrerit massa vitae pharetra. Nulla vestibulum imperdiet sollicitudin. Nam blandit, ipsum ac elementum varius, dolor magna mattis sapien, ac imperdiet turpis nisl id elit. Nulla volutpat diam a tellus imperdiet consequat non vel lorem. Fusce quis augue sed tortor ornare vulputate. Morbi suscipit dui eget lacus dapibus, sed convallis magna vestibulum. Curabitur luctus orci ultrices arcu consequat, ut fringilla quam bibendum. Nam ligula est, eleifend nec egestas non, consectetur eu mauris. Nulla tristique sodales tincidunt. Donec gravida dolor et ex rhoncus feugiat. Vivamus ultrices sem vitae efficitur consequat.
<p>
<h3>Sous-sous-titre</h3>
<p>Quisque in sem suscipit nisl pellentesque eleifend non sit amet turpis. Nullam varius, leo id varius mollis, ipsum tortor porttitor risus, ut pretium est nisi ac velit. Nunc ultricies pulvinar tortor. Nullam lobortis porta nisl facilisis fringilla. Aenean tristique odio sed tempor bibendum. Aenean id iaculis nibh. Ut non iaculis mauris. Ut condimentum ac augue in mollis. Ut et imperdiet leo. Pellentesque commodo nec metus sed vulputate. Donec sed orci quis ligula egestas tincidunt quis at massa. Donec tincidunt consequat tellus, id semper est tempus sit amet. Phasellus eu sapien at nunc pretium consectetur vitae ut felis.
<p>
<h2>Sous-titre</h2>
<p>Etiam augue sem, bibendum id velit ut, varius aliquet justo. Mauris eleifend varius eros, in viverra lacus. Ut porttitor vitae magna at consectetur. Aliquam dictum quis enim non lobortis. Curabitur tincidunt lobortis urna at accumsan. In ac pellentesque lectus. Sed viverra dictum nunc, euismod pulvinar dolor aliquam nec. Pellentesque in cursus ligula. Aliquam erat volutpat. Morbi hendrerit augue diam, non vehicula velit imperdiet vel.</p><!-- Merci pour l'astuce !
--><p>Curabitur vel tempus orci, at fringilla libero. In hendrerit vehicula viverra. Donec iaculis consectetur porttitor. Donec non aliquet ex. Praesent elementum tortor aliquam iaculis congue. Fusce vel commodo dui. Quisque sed ante facilisis velit luctus aliquet eu quis purus. Aliquam bibendum pretium pellentesque. Curabitur commodo sit amet purus a ultricies.</p><!-- Merci pour l'astuce !
--><p>Sed suscipit risus urna, ac tempor nisi mattis vitae. Nunc facilisis, felis vel molestie consequat, ex mauris tincidunt erat, eget porta leo nulla quis felis. Sed vitae accumsan ex. Nunc dictum condimentum felis, eget finibus ex sodales et. Fusce ac gravida augue. In vitae odio vitae leo cursus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 16:19
Tout est nickel =) Tu peux continuer 
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 16:30
Et voici 
▬ Module 1 - Manipulation 3
Tout le code :
Le petit morceau qui nous intéresse :
Même pas de question !
Edition J'espère qu'il sera vu.
J'ai oublié d'expliquer certains choix. J'ai utilisé strong et em au lieu de b et i parce que je trouvais que mettre lien en évidence pour le navigateur était pas mal. Pour barré j'ai utilisé le s plutôt que le del parce qu'il ne me semblait pas utile de faire "disparaître" le suis, juste de le barrer.
▬ Module 1 - Manipulation 3
- Le screen:
![[Cappuccino] On apprend mieux autour d'une tasse Avk4](https://www.zupimages.net/up/20/53/avk4.png)
Tout le code :
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>La première page HTML de Cappuccino</title>
</head>
<body>
<h1>Page HTML de Cappuccino</h1>
<div>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare, dolor nec tristique eleifend, neque nisl cursus diam, pharetra viverra nulla mi a orci. Ut id lacinia massa. Aenean mollis risus vel nulla feugiat posuere. Integer commodo ex vitae metus facilisis pretium. Aenean fringilla, mi vitae lobortis tempus, dui lorem feugiat justo, at rutrum libero leo faucibus nunc. Nullam venenatis orci sit amet tellus ullamcorper, id rutrum massa viverra. Sed a quam accumsan libero fringilla porta. Nullam at quam vel quam euismod sagittis.</p><!-- Merci pour l'astuce !
--><p>Pellentesque accumsan tincidunt lorem ac elementum. Etiam luctus orci massa, id laoreet purus cursus eu. Duis lacinia,tellus ac feugiat tincidunt, nulla odio feugiat felis, eu tempor odio orci eu nisl. Vivamus vestibulum ut enim non gravida. Suspendisse volutpat enim eu quam tincidunt gravida. Sed nec viverra metus. Donec dolor mauris, imperdiet ut ullamcorper sit amet, sagittis et neque.</p>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
</div>
<h2>Sous-titre</h2>
<p><font color="#248c48" size="2">Morbi<sup>(1)</sup> ut<sub>(a)</sub> nulla eget tortor consectetur maximus quis sed ex. <span><u>Je suis un texte</u></span> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. <span>Je <s>suis</s> un <mark>texte</mark></span> Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. <span>Je suis un texte</span> Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile"><strong><em>La Tambouille des Râleuses</em></strong></a></font></p>
<h3>Sous-sous-titre</h3>
<p>In pulvinar enim a facilisis mattis. Vivamus aliquet eros nec tortor lacinia, vel commodo mi convallis. Sed tincidunt vel augue at blandit. Vestibulum arcu tellus, suscipit et ex non, interdum mattis nisi. Sed ut tellus scelerisque, cursus nisl vel, porta ante. Nullam vitae elementum velit. In iaculis dictum nisi sed gravida. Integer bibendum eget justo sit amet gravida. Proin tristique laoreet laoreet. Vestibulum ac urna a enim hendrerit scelerisque. Cras euismod feugiat ligula, vel hendrerit libero efficitur in. Cras vel dui in erat rhoncus consequat quis facilisis risus.
<p><!-- Merci pour l'astuce !
--><p>Quisque maximus hendrerit massa vitae pharetra. Nulla vestibulum imperdiet sollicitudin. Nam blandit, ipsum ac elementum varius, dolor magna mattis sapien, ac imperdiet turpis nisl id elit. Nulla volutpat diam a tellus imperdiet consequat non vel lorem. Fusce quis augue sed tortor ornare vulputate. Morbi suscipit dui eget lacus dapibus, sed convallis magna vestibulum. Curabitur luctus orci ultrices arcu consequat, ut fringilla quam bibendum. Nam ligula est, eleifend nec egestas non, consectetur eu mauris. Nulla tristique sodales tincidunt. Donec gravida dolor et ex rhoncus feugiat. Vivamus ultrices sem vitae efficitur consequat.
<p>
<h3>Sous-sous-titre</h3>
<p>Quisque in sem suscipit nisl pellentesque eleifend non sit amet turpis. Nullam varius, leo id varius mollis, ipsum tortor porttitor risus, ut pretium est nisi ac velit. Nunc ultricies pulvinar tortor. Nullam lobortis porta nisl facilisis fringilla. Aenean tristique odio sed tempor bibendum. Aenean id iaculis nibh. Ut non iaculis mauris. Ut condimentum ac augue in mollis. Ut et imperdiet leo. Pellentesque commodo nec metus sed vulputate. Donec sed orci quis ligula egestas tincidunt quis at massa. Donec tincidunt consequat tellus, id semper est tempus sit amet. Phasellus eu sapien at nunc pretium consectetur vitae ut felis.
<p>
<h2>Sous-titre</h2>
<p>Etiam augue sem, bibendum id velit ut, varius aliquet justo. Mauris eleifend varius eros, in viverra lacus. Ut porttitor vitae magna at consectetur. Aliquam dictum quis enim non lobortis. Curabitur tincidunt lobortis urna at accumsan. In ac pellentesque lectus. Sed viverra dictum nunc, euismod pulvinar dolor aliquam nec. Pellentesque in cursus ligula. Aliquam erat volutpat. Morbi hendrerit augue diam, non vehicula velit imperdiet vel.</p><!-- Merci pour l'astuce !
--><p>Curabitur vel tempus orci, at fringilla libero. In hendrerit vehicula viverra. Donec iaculis consectetur porttitor. Donec non aliquet ex. Praesent elementum tortor aliquam iaculis congue. Fusce vel commodo dui. Quisque sed ante facilisis velit luctus aliquet eu quis purus. Aliquam bibendum pretium pellentesque. Curabitur commodo sit amet purus a ultricies.</p><!-- Merci pour l'astuce !
--><p>Sed suscipit risus urna, ac tempor nisi mattis vitae. Nunc facilisis, felis vel molestie consequat, ex mauris tincidunt erat, eget porta leo nulla quis felis. Sed vitae accumsan ex. Nunc dictum condimentum felis, eget finibus ex sodales et. Fusce ac gravida augue. In vitae odio vitae leo cursus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</body>
</html>
Le petit morceau qui nous intéresse :
- Code:
<p><font color="#248c48" size="2">Morbi<sup>(1)</sup> ut<sub>(a)</sub> nulla eget tortor consectetur maximus quis sed ex. <span><u>Je suis un texte</u></span> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. <span>Je <s>suis</s> un <mark>texte</mark></span> Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. <span>Je suis un texte</span> Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile"><strong><em>La Tambouille des Râleuses</em></strong></a></font></p>
Même pas de question !
Edition J'espère qu'il sera vu.
J'ai oublié d'expliquer certains choix. J'ai utilisé strong et em au lieu de b et i parce que je trouvais que mettre lien en évidence pour le navigateur était pas mal. Pour barré j'ai utilisé le s plutôt que le del parce qu'il ne me semblait pas utile de faire "disparaître" le suis, juste de le barrer.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Jeu 31 Déc 2020 - 17:55
Re coucou =)
Top pour l'explication Mais pour l'exercice on va dire qu'on le veut seulement visuellement, et pas sémantiquement, donc tu peux remplacer par b et i
C'est nickel =) Je te laisse poursuivre
Top pour l'explication
Mais pour l'exercice on va dire qu'on le veut seulement visuellement, et pas sémantiquement, donc tu peux remplacer par b et i C'est nickel =) Je te laisse poursuivre
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 13:48
Coucou !
▬ Module 1 - Exercice final
Voilà le code !
▬ Module 1 - Exercice final
Voilà le code !
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
</head>
<body>
<h1><font color="red"><u>Titre de la page</u></font></h1>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce lectus ipsum, lacinia quis quam quis, lobortis congue nibh. Integer sapien diam, aliquet et sagittis et, tincidunt id lacus. Vestibulum consectetur, justo sit amet volutpat lacinia, ex dui luctus elit, congue blandit ante eros tempor sapien. Fusce luctus nulla eu convallis lacinia. Fusce sit amet felis nec tellus tristique convallis ac et leo. Maecenas commodo faucibus arcu, vel tristique ex sagittis eu. Duis id nunc vulputate, molestie arcu eget, pulvinar dolor. Maecenas enim enim, vehicula in odio lacinia, venenatis feugiat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum dapibus sodales. Nunc metus est, suscipit et gravida vel, cursus ac mauris. Etiam convallis elit a nisi porttitor, eget egestas sapien porta. Donec aliquet turpis ac nibh aliquet, id commodo purus ullamcorper. Cras gravida dolor a nisi mattis blandit. Duis efficitur mattis massa ac bibendum. Etiam varius orci ipsum, in porttitor metus pellentesque et.</p>
<h2>Titre</h2>
<p>Duis hendrerit id diam ut pellentesque. Donec tincidunt diam id turpis aliquam, quis accumsan ex consequat. Maecenas et urna commodo, malesuada lacus nec, tempor ligula. <font color="grey" size="5">Cras aliquam</font>, elit eget imperdiet semper, ligula dolor porttitor mi, vel bibendum velit massa quis ante. Integer rutrum, diam eget vestibulum egestas, orci turpis tincidunt ex, in cursus augue tortor eget mi. Aenean nec erat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pharetra pretium quam eu ultrices. Sed quis sodales neque. Ut posuere rutrum quam.</p>
<h2>Titre</h2>
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Je suis un lien.</a> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non.</p>
<h3>Sous-titre</h3>
<p>In pulvinar enim a facilisis mattis. Vivamus<sup>1</sup> aliquet eros nec tortor lacinia, vel commodo mi convallis. Sed tincidunt vel augue at blandit. Vestibulum arcu tellus, suscipit et ex non, interdum mattis nisi. Sed ut tellus scelerisque, cursus nisl vel, porta ante. Nullam vitae elementum velit. In iaculis dictum nisi sed gravida. Integer bibendum eget justo sit amet gravida. Proin tristique laoreet laoreet. Vestibulum ac urna a enim hendrerit scelerisque. Cras euismod feugiat ligula, vel hendrerit libero efficitur in. Cras vel dui in erat rhoncus consequat quis facilisis risus.</p><!-- Merci pour l'astuce !
--><p>Quisque maximus hendrerit massa vitae pharetra. Nulla vestibulum imperdiet sollicitudin. Nam blandit, ipsum ac elementum varius, dolor magna mattis sapien, ac imperdiet turpis nisl id elit. Nulla volutpat diam a tellus imperdiet consequat non vel lorem. Fusce quis augue sed tortor ornare vulputate. Morbi suscipit dui eget lacus dapibus, sed convallis magna vestibulum. Curabitur luctus orci ultrices arcu consequat, ut fringilla quam bibendum. Nam ligula est, eleifend nec egestas non, consectetur eu mauris. Nulla tristique sodales tincidunt. Donec gravida dolor et ex rhoncus feugiat. Vivamus ultrices sem vitae efficitur consequat.</p><!-- Merci pour l'astuce !
--><p>Quisque in sem suscipit nisl pellentesque eleifend non sit amet turpis. Nullam varius, leo id varius mollis, ipsum tortor porttitor risus, ut pretium est nisi ac velit. Nunc ultricies pulvinar tortor. Nullam lobortis porta nisl facilisis fringilla. Aenean tristique odio sed tempor bibendum. Aenean id iaculis nibh. Ut non iaculis mauris. Ut condimentum ac augue in mollis. Ut et imperdiet leo. Pellentesque commodo nec metus sed vulputate. Donec sed orci quis ligula egestas tincidunt quis at massa. Donec tincidunt consequat tellus, id semper est tempus sit amet. Phasellus eu sapien at nunc pretium consectetur vitae ut felis.<p>
<h3>Sous-titre</h3>
<div>
<p>Etiam augue sem, <s>bibendum</s> id velit ut, varius aliquet justo. Mauris eleifend varius eros, in viverra lacus. Ut porttitor vitae magna at consectetur. Aliquam dictum quis enim non lobortis. Curabitur tincidunt lobortis urna at accumsan. In ac pellentesque lectus. Sed viverra dictum nunc, euismod pulvinar dolor aliquam nec. Pellentesque in cursus ligula. Aliquam erat volutpat. Morbi hendrerit augue diam, non vehicula velit <mark>imperdiet vel</mark>.</p>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Curabitur vel tempus orci, at fringilla libero. In hendrerit vehicula viverra. Donec iaculis consectetur porttitor. Donec non aliquet ex. Praesent elementum tortor aliquam iaculis congue. Fusce vel commodo dui. Quisque sed ante facilisis velit luctus aliquet eu quis purus. Aliquam bibendum pretium pellentesque. Curabitur commodo sit amet purus a ultricies<sub>(a)</sub>.</p>
</div>
<h4>Sous-sous-titre</h4>
<p>Sed suscipit risus urna, ac tempor nisi mattis vitae. Nunc facilisis, felis vel molestie consequat, ex mauris tincidunt erat, eget porta leo nulla quis felis. Sed vitae accumsan ex. Nunc dictum condimentum felis, eget finibus ex sodales et. Fusce ac gravida augue. In vitae odio vitae leo cursus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p><font size="2"><sup>1</sup>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</font></p><!-- Merci pour l'astuce !
--><p><font size="1"><sub>(a)</sub>Integer rutrum, diam eget vestibulum egestas.</font></p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:15
Voyons ça =)
Déjà, le rendu est OK il me semble. Voyons le code
Ca me parait bien tout ça !
A part l'indentation, tout me semble bien
Veux-tu qu'on revoie l'indentation ? Ca pourra t'aider un peu pour plus tard, des exercices bien compliqué
Déjà, le rendu est OK il me semble. Voyons le code
Ca me parait bien tout ça !
A part l'indentation, tout me semble bien
Veux-tu qu'on revoie l'indentation ? Ca pourra t'aider un peu pour plus tard, des exercices bien compliqué
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:20
Je veux bien, oui ! Mieux vaut partir sur de bonnes bases
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:24
Alors, as-tu bien lu ce tutoriel ?
As-tu des questions dessus ? Peux-tu me dire ce que tu n'as pas comprit ?
As-tu des questions dessus ? Peux-tu me dire ce que tu n'as pas comprit ?
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:32
Je l'avais bien lu et je l'ai relu et je pensais avoir tout saisi. Mais vrai que j'ai peut-être galéré à tout mettre bien avec les commentaires et que je n'ai pas vérifié après avoir utilisé l'option "reindent". Enfin, je lui ai fait confiance pour savoir mieux que moi
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:37
Ok, alors en fait ton indentation est "raté" à cause du fait que tu ouvres et tu fermes les balises sur la même ligne.
Par exemple :
Donc, si tu fais comme ça :
Mais avant de le réutiliser, je voudrai que tu essaie "à la main". Tu peux ?
Par exemple :
- Code:
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Je suis un lien.</a> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non.</p>
<h3>Sous-titre</h3>
Donc, si tu fais comme ça :
- Code:
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Je suis un lien.</a> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non.
</p>
<h3>Sous-titre</h3>
Mais avant de le réutiliser, je voudrai que tu essaie "à la main". Tu peux ?
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:44
Comme ceci ?
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
</head>
<body>
<h1><font color="red"><u>Titre de la page</u></font></h1>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce lectus ipsum, lacinia quis quam quis, lobortis congue nibh. Integer sapien diam, aliquet et sagittis et, tincidunt id lacus. Vestibulum consectetur, justo sit amet volutpat lacinia, ex dui luctus elit, congue blandit ante eros tempor sapien. Fusce luctus nulla eu convallis lacinia. Fusce sit amet felis nec tellus tristique convallis ac et leo. Maecenas commodo faucibus arcu, vel tristique ex sagittis eu. Duis id nunc vulputate, molestie arcu eget, pulvinar dolor. Maecenas enim enim, vehicula in odio lacinia, venenatis feugiat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum dapibus sodales. Nunc metus est, suscipit et gravida vel, cursus ac mauris. Etiam convallis elit a nisi porttitor, eget egestas sapien porta. Donec aliquet turpis ac nibh aliquet, id commodo purus ullamcorper. Cras gravida dolor a nisi mattis blandit. Duis efficitur mattis massa ac bibendum. Etiam varius orci ipsum, in porttitor metus pellentesque et.
</p>
<h2>Titre</h2>
<p>Duis hendrerit id diam ut pellentesque. Donec tincidunt diam id turpis aliquam, quis accumsan ex consequat. Maecenas et urna commodo, malesuada lacus nec, tempor ligula. <font color="grey" size="5">Cras aliquam</font>, elit eget imperdiet semper, ligula dolor porttitor mi, vel bibendum velit massa quis ante. Integer rutrum, diam eget vestibulum egestas, orci turpis tincidunt ex, in cursus augue tortor eget mi. Aenean nec erat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pharetra pretium quam eu ultrices. Sed quis sodales neque. Ut posuere rutrum quam.
</p>
<h2>Titre</h2>
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Je suis un lien.</a> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non.
</p>
<h3>Sous-titre</h3>
<p>In pulvinar enim a facilisis mattis. Vivamus<sup>1</sup> aliquet eros nec tortor lacinia, vel commodo mi convallis. Sed tincidunt vel augue at blandit. Vestibulum arcu tellus, suscipit et ex non, interdum mattis nisi. Sed ut tellus scelerisque, cursus nisl vel, porta ante. Nullam vitae elementum velit. In iaculis dictum nisi sed gravida. Integer bibendum eget justo sit amet gravida. Proin tristique laoreet laoreet. Vestibulum ac urna a enim hendrerit scelerisque. Cras euismod feugiat ligula, vel hendrerit libero efficitur in. Cras vel dui in erat rhoncus consequat quis facilisis risus.
</p><!-- Merci pour l'astuce !
--><p>Quisque maximus hendrerit massa vitae pharetra. Nulla vestibulum imperdiet sollicitudin. Nam blandit, ipsum ac elementum varius, dolor magna mattis sapien, ac imperdiet turpis nisl id elit. Nulla volutpat diam a tellus imperdiet consequat non vel lorem. Fusce quis augue sed tortor ornare vulputate. Morbi suscipit dui eget lacus dapibus, sed convallis magna vestibulum. Curabitur luctus orci ultrices arcu consequat, ut fringilla quam bibendum. Nam ligula est, eleifend nec egestas non, consectetur eu mauris. Nulla tristique sodales tincidunt. Donec gravida dolor et ex rhoncus feugiat. Vivamus ultrices sem vitae efficitur consequat.
</p><!-- Merci pour l'astuce !
--><p>Quisque in sem suscipit nisl pellentesque eleifend non sit amet turpis. Nullam varius, leo id varius mollis, ipsum tortor porttitor risus, ut pretium est nisi ac velit. Nunc ultricies pulvinar tortor. Nullam lobortis porta nisl facilisis fringilla. Aenean tristique odio sed tempor bibendum. Aenean id iaculis nibh. Ut non iaculis mauris. Ut condimentum ac augue in mollis. Ut et imperdiet leo. Pellentesque commodo nec metus sed vulputate. Donec sed orci quis ligula egestas tincidunt quis at massa. Donec tincidunt consequat tellus, id semper est tempus sit amet. Phasellus eu sapien at nunc pretium consectetur vitae ut felis.<p>
<h3>Sous-titre</h3>
<div>
<p>Etiam augue sem, <s>bibendum</s> id velit ut, varius aliquet justo. Mauris eleifend varius eros, in viverra lacus. Ut porttitor vitae magna at consectetur. Aliquam dictum quis enim non lobortis. Curabitur tincidunt lobortis urna at accumsan. In ac pellentesque lectus. Sed viverra dictum nunc, euismod pulvinar dolor aliquam nec. Pellentesque in cursus ligula. Aliquam erat volutpat. Morbi hendrerit augue diam, non vehicula velit <mark>imperdiet vel</mark>.
</p>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Curabitur vel tempus orci, at fringilla libero. In hendrerit vehicula viverra. Donec iaculis consectetur porttitor. Donec non aliquet ex. Praesent elementum tortor aliquam iaculis congue. Fusce vel commodo dui. Quisque sed ante facilisis velit luctus aliquet eu quis purus. Aliquam bibendum pretium pellentesque. Curabitur commodo sit amet purus a ultricies<sub>(a)</sub>.
</p>
</div>
<h4>Sous-sous-titre</h4>
<p>Sed suscipit risus urna, ac tempor nisi mattis vitae. Nunc facilisis, felis vel molestie consequat, ex mauris tincidunt erat, eget porta leo nulla quis felis. Sed vitae accumsan ex. Nunc dictum condimentum felis, eget finibus ex sodales et. Fusce ac gravida augue. In vitae odio vitae leo cursus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p><!-- Merci pour l'astuce !
--><p><font size="2"><sup>1</sup>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</font>
</p><!-- Merci pour l'astuce !
--><p><font size="1"><sub>(a)</sub>Integer rutrum, diam eget vestibulum egestas.</font>
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 15:49
C'est un peu mieux =)
Maintenant, il faut juste régler les tabulations.
Ici, h1, p et h2 sont tous les 3 au même niveau, par exemple :
Je te conseille donc de retirer toutes les tabulations, et de remettre là où il en faut, s'il en faut
Maintenant, il faut juste régler les tabulations.
Ici, h1, p et h2 sont tous les 3 au même niveau, par exemple :
- Code:
<h1><font color="red"><u>Titre de la page</u></font></h1>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce lectus ipsum, lacinia quis quam quis, lobortis congue nibh. Integer sapien diam, aliquet et sagittis et, tincidunt id lacus. Vestibulum consectetur, justo sit amet volutpat lacinia, ex dui luctus elit, congue blandit ante eros tempor sapien. Fusce luctus nulla eu convallis lacinia. Fusce sit amet felis nec tellus tristique convallis ac et leo. Maecenas commodo faucibus arcu, vel tristique ex sagittis eu. Duis id nunc vulputate, molestie arcu eget, pulvinar dolor. Maecenas enim enim, vehicula in odio lacinia, venenatis feugiat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum dapibus sodales. Nunc metus est, suscipit et gravida vel, cursus ac mauris. Etiam convallis elit a nisi porttitor, eget egestas sapien porta. Donec aliquet turpis ac nibh aliquet, id commodo purus ullamcorper. Cras gravida dolor a nisi mattis blandit. Duis efficitur mattis massa ac bibendum. Etiam varius orci ipsum, in porttitor metus pellentesque et.
</p>
<h2>Titre</h2>
Je te conseille donc de retirer toutes les tabulations, et de remettre là où il en faut, s'il en faut
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 16:03
Donc je n'ai pas compris le principe alors parce que pour moi le p étant dans le h1 il doit être décalé. Pareil, le h2 étant dans le h1 il doit être décalé mais au même niveau que le p
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 16:10
C'est un souci de compréhension de "dans"
Ici, on a un "p" dans une "div"
Alors qu'ici on a un "p" après une "div"
Tu comprends un peu mieux ?
Ici, on a un "p" dans une "div"
- Code:
<div>
blabla
<p>
coucou
</p>
</div>
- Code:
<div>
blabla
<p>
coucou
</p>
</div>
Alors qu'ici on a un "p" après une "div"
- Code:
<div>
blabla
</div>
<p>
coucou
</p>
Tu comprends un peu mieux ?
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 16:29
Donc, plutôt comme ça ?
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
</head>
<body>
<h1><font color="red"><u>Titre de la page</u></font></h1>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Fusce lectus ipsum, lacinia quis quam quis, lobortis congue nibh. Integer sapien diam, aliquet et sagittis et, tincidunt id lacus. Vestibulum consectetur, justo sit amet volutpat lacinia, ex dui luctus elit, congue blandit ante eros tempor sapien. Fusce luctus nulla eu convallis lacinia. Fusce sit amet felis nec tellus tristique convallis ac et leo. Maecenas commodo faucibus arcu, vel tristique ex sagittis eu. Duis id nunc vulputate, molestie arcu eget, pulvinar dolor. Maecenas enim enim, vehicula in odio lacinia, venenatis feugiat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum dapibus sodales. Nunc metus est, suscipit et gravida vel, cursus ac mauris. Etiam convallis elit a nisi porttitor, eget egestas sapien porta. Donec aliquet turpis ac nibh aliquet, id commodo purus ullamcorper. Cras gravida dolor a nisi mattis blandit. Duis efficitur mattis massa ac bibendum. Etiam varius orci ipsum, in porttitor metus pellentesque et.
</p>
<h2>Titre</h2>
<p>Duis hendrerit id diam ut pellentesque. Donec tincidunt diam id turpis aliquam, quis accumsan ex consequat. Maecenas et urna commodo, malesuada lacus nec, tempor ligula. <font color="grey" size="5">Cras aliquam</font>, elit eget imperdiet semper, ligula dolor porttitor mi, vel bibendum velit massa quis ante. Integer rutrum, diam eget vestibulum egestas, orci turpis tincidunt ex, in cursus augue tortor eget mi. Aenean nec erat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pharetra pretium quam eu ultrices. Sed quis sodales neque. Ut posuere rutrum quam.
</p>
<h2>Titre</h2>
<p>Morbi ut nulla eget tortor consectetur maximus quis sed ex. <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Je suis un lien.</a> Etiam volutpat viverra ex mollis ultrices. Fusce nibh velit, semper sit amet orci at, sagittis eleifend velit. Proin fermentum felis id orci tincidunt, id tincidunt nisi tristique. Donec quis vehicula augue. Nulla ut orci elit. Cras a ex ut elit tincidunt ullamcorper. Praesent vitae neque convallis, lacinia neque id, euismod turpis. Donec nisl massa, pulvinar sit amet laoreet eu, maximus vitae neque. Donec commodo nulla elit, ut convallis sapien auctor non.
</p>
<h3>Sous-titre</h3>
<p>In pulvinar enim a facilisis mattis. Vivamus<sup>1</sup> aliquet eros nec tortor lacinia, vel commodo mi convallis. Sed tincidunt vel augue at blandit. Vestibulum arcu tellus, suscipit et ex non, interdum mattis nisi. Sed ut tellus scelerisque, cursus nisl vel, porta ante. Nullam vitae elementum velit. In iaculis dictum nisi sed gravida. Integer bibendum eget justo sit amet gravida. Proin tristique laoreet laoreet. Vestibulum ac urna a enim hendrerit scelerisque. Cras euismod feugiat ligula, vel hendrerit libero efficitur in. Cras vel dui in erat rhoncus consequat quis facilisis risus.
</p><!-- Merci pour l'astuce !
--><p>Quisque maximus hendrerit massa vitae pharetra. Nulla vestibulum imperdiet sollicitudin. Nam blandit, ipsum ac elementum varius, dolor magna mattis sapien, ac imperdiet turpis nisl id elit. Nulla volutpat diam a tellus imperdiet consequat non vel lorem. Fusce quis augue sed tortor ornare vulputate. Morbi suscipit dui eget lacus dapibus, sed convallis magna vestibulum. Curabitur luctus orci ultrices arcu consequat, ut fringilla quam bibendum. Nam ligula est, eleifend nec egestas non, consectetur eu mauris. Nulla tristique sodales tincidunt. Donec gravida dolor et ex rhoncus feugiat. Vivamus ultrices sem vitae efficitur consequat.
</p><!-- Merci pour l'astuce !
--><p>Quisque in sem suscipit nisl pellentesque eleifend non sit amet turpis. Nullam varius, leo id varius mollis, ipsum tortor porttitor risus, ut pretium est nisi ac velit. Nunc ultricies pulvinar tortor. Nullam lobortis porta nisl facilisis fringilla. Aenean tristique odio sed tempor bibendum. Aenean id iaculis nibh. Ut non iaculis mauris. Ut condimentum ac augue in mollis. Ut et imperdiet leo. Pellentesque commodo nec metus sed vulputate. Donec sed orci quis ligula egestas tincidunt quis at massa. Donec tincidunt consequat tellus, id semper est tempus sit amet. Phasellus eu sapien at nunc pretium consectetur vitae ut felis.
<p>
<h3>Sous-titre</h3>
<div>
<p>Etiam augue sem, <s>bibendum</s> id velit ut, varius aliquet justo. Mauris eleifend varius eros, in viverra lacus. Ut porttitor vitae magna at consectetur. Aliquam dictum quis enim non lobortis. Curabitur tincidunt lobortis urna at accumsan. In ac pellentesque lectus. Sed viverra dictum nunc, euismod pulvinar dolor aliquam nec. Pellentesque in cursus ligula. Aliquam erat volutpat. Morbi hendrerit augue diam, non vehicula velit <mark>imperdiet vel</mark>.
</p>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Curabitur vel tempus orci, at fringilla libero. In hendrerit vehicula viverra. Donec iaculis consectetur porttitor. Donec non aliquet ex. Praesent elementum tortor aliquam iaculis congue. Fusce vel commodo dui. Quisque sed ante facilisis velit luctus aliquet eu quis purus. Aliquam bibendum pretium pellentesque. Curabitur commodo sit amet purus a ultricies<sub>(a)</sub>.
</p>
</div>
<h4>Sous-sous-titre</h4>
<p>Sed suscipit risus urna, ac tempor nisi mattis vitae. Nunc facilisis, felis vel molestie consequat, ex mauris tincidunt erat, eget porta leo nulla quis felis. Sed vitae accumsan ex. Nunc dictum condimentum felis, eget finibus ex sodales et. Fusce ac gravida augue. In vitae odio vitae leo cursus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p><!-- Merci pour l'astuce !
--><p><font size="2"><sup>1</sup>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</font>
</p><!-- Merci pour l'astuce !
--><p><font size="1"><sub>(a)</sub>Integer rutrum, diam eget vestibulum egestas.</font>
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 17:05
Oui ! C'est bien mieux
Tu comprends mieux le principe ?
Tu comprends mieux le principe ?
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 17:10
Oui, complètement ! Merci <3
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 17:23
pas de souci =) Tu peux passer à la suite du coup
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 17:43
Partie pour la section CSS !
Module 2 - Manipulation 1
J'espère que c'est bon pour l'indentation
Module 2 - Manipulation 1
J'espère que c'est bon pour l'indentation
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
<style type="text/css">
#parun{
color: green;
}
#spanin{
font-size: 18px;
font-family: verdana;
}
h1{
text-align: center;
font-style: italic;
}
a{
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
}
#paragraphes{
text-indent: 15px;
}
#spandeux{
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p id="parun">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin quam id bibendum vehicula. Nunc ut nulla gravida, euismod nulla in, pellentesque nulla. Lorem ipsum dolor sit amet, <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Tambouillons,</a> consectetur adipiscing elit. Nullam mollis sit amet sem ac cursus. Aenean varius neque rutrum, iaculis risus eu, hendrerit leo. Phasellus lacinia ac tellus quis rutrum. Nam vitae leo a turpis dignissim elementum.
</p><!-- Saut de ligne
--><p>Sed tincidunt mollis risus sit amet dignissim. Pellentesque id tellus enim. Nunc quis nibh tristique, posuere leo in, rhoncus dui. Nullam eros nisi, consequat at est a, porta congue odio. Vestibulum egestas auctor viverra. Suspendisse interdum accumsan justo, quis molestie est gravida ac. Donec sodales cursus erat, non maximus felis volutpat non. Fusce in justo lectus.
</p>
<h2>Sous-titre</h2>
<div id="paragraphes">
<p>Maecenas risus risus, cursus varius tristique nec, cursus ac tortor. Etiam consequat leo neque, sed ornare erat tincidunt id. Donec vel rhoncus arcu. In scelerisque, orci at lobortis efficitur, dui felis lobortis nibh, id ullamcorper nulla dolor eget turpis. Aenean eu ligula elit. Praesent sodales a ligula ac interdum. Phasellus fringilla sit amet ligula eget eleifend.
</p>
<p>enean sit amet nisl non lectus tempor accumsan a vel ante. <span id="spanin">Donec cursus quam libero</span>, id feugiat nulla vehicula vitae. Morbi at eros quis sapien iaculis hendrerit. Proin vel quam suscipit, posuere mi sed, vehicula risus. Suspendisse convallis consectetur porta. Curabitur blandit, magna eget suscipit ultricies, sem dui bibendum dolor, at eleifend arcu lorem eget elit. Cras venenatis imperdiet lorem a posuere. <span id="spandeux">Pellentesque hendrerit</span> pellentesque metus a interdum. Nam suscipit <span id="spantrois">quam eget eros pulvinar</span>, sit amet sagittis magna aliquet. Ut eget felis massa. Sed feugiat, augue vitae fringilla bibendum, lacus lorem dictum velit, a maximus augue arcu et eros. Maecenas sodales pharetra tempor. Donec elit felis, euismod non diam quis, scelerisque rutrum lacus. Morbi pulvinar sollicitudin dui sed dapibus. Donec vulputate est id erat accumsan luctus.
</p>
<p>Curabitur hendrerit urna et semper tempor. Pellentesque sit amet lacus eget libero efficitur tempus. Phasellus varius enim magna, quis viverra nulla dictum a. Vestibulum ultricies eros lectus, quis commodo ante lobortis in. Vivamus vel justo et ligula aliquam lacinia. In ultrices dolor quis lorem volutpat, gravida dictum turpis ullamcorper. Duis magna turpis, accumsan sed aliquam ut, faucibus sit amet ex. Suspendisse posuere eros at diam luctus, venenatis malesuada justo tincidunt. Sed id quam dolor. In convallis, enim sodales dignissim congue, nisl massa tincidunt nulla, vitae auctor tortor justo id arcu.
</p>
</div>
<h2>Sous-titre</h2>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Donec tristique eu nulla eu lacinia. Cras hendrerit nibh nec rutrum fermentum. Curabitur ipsum ipsum, sodales et volutpat pharetra, elementum eget nulla. Sed eget velit mollis, faucibus nisi sit amet, fringilla tortor. Suspendisse fringilla orci in justo pulvinar, nec cursus diam molestie. Sed finibus velit nec bibendum suscipit. Ut congue mauris id dolor ornare bibendum. Vestibulum ultrices faucibus fringilla. Quisque gravida nisi urna. Cras viverra interdum libero, sed congue felis posuere vel. Aliquam blandit tincidunt diam vel condimentum.
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Ven 1 Jan 2021 - 21:32
C'est presque tout bon =)
Peux-tu me rappeler quand est-ce qu'on utilise id et quand est-ce qu'on utilise class ? =)
Peux-tu me rappeler quand est-ce qu'on utilise id et quand est-ce qu'on utilise class ? =)
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Sam 2 Jan 2021 - 14:16
Comme discuté sur discord, j'ai un peu trop arrangé à ma sauce en faussant l'exercice :') Voici le rendu correct en principe !
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
<style type="text/css">
#parun{
color: green;
}
#spanin{
font-size: 18px;
font-family: verdana;
}
h1{
text-align: center;
font-style: italic;
}
a{
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
}
.paragraphes{
text-indent: 15px;
}
#spandeux{
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p id="parun">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin quam id bibendum vehicula. Nunc ut nulla gravida, euismod nulla in, pellentesque nulla. Lorem ipsum dolor sit amet, <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Tambouillons,</a> consectetur adipiscing elit. Nullam mollis sit amet sem ac cursus. Aenean varius neque rutrum, iaculis risus eu, hendrerit leo. Phasellus lacinia ac tellus quis rutrum. Nam vitae leo a turpis dignissim elementum.
</p><!-- Saut de ligne
--><p>Sed tincidunt mollis risus sit amet dignissim. Pellentesque id tellus enim. Nunc quis nibh tristique, posuere leo in, rhoncus dui. Nullam eros nisi, consequat at est a, porta congue odio. Vestibulum egestas auctor viverra. Suspendisse interdum accumsan justo, quis molestie est gravida ac. Donec sodales cursus erat, non maximus felis volutpat non. Fusce in justo lectus.
</p>
<h2>Sous-titre</h2>
<div>
<p class="paragraphes">Maecenas risus risus, cursus varius tristique nec, cursus ac tortor. Etiam consequat leo neque, sed ornare erat tincidunt id. Donec vel rhoncus arcu. In scelerisque, orci at lobortis efficitur, dui felis lobortis nibh, id ullamcorper nulla dolor eget turpis. Aenean eu ligula elit. Praesent sodales a ligula ac interdum. Phasellus fringilla sit amet ligula eget eleifend.
</p>
<p class="paragraphes">enean sit amet nisl non lectus tempor accumsan a vel ante. <span id="spanin">Donec cursus quam libero</span>, id feugiat nulla vehicula vitae. Morbi at eros quis sapien iaculis hendrerit. Proin vel quam suscipit, posuere mi sed, vehicula risus. Suspendisse convallis consectetur porta. Curabitur blandit, magna eget suscipit ultricies, sem dui bibendum dolor, at eleifend arcu lorem eget elit. Cras venenatis imperdiet lorem a posuere. <span id="spandeux">Pellentesque hendrerit</span> pellentesque metus a interdum. Nam suscipit <span id="spantrois">quam eget eros pulvinar</span>, sit amet sagittis magna aliquet. Ut eget felis massa. Sed feugiat, augue vitae fringilla bibendum, lacus lorem dictum velit, a maximus augue arcu et eros. Maecenas sodales pharetra tempor. Donec elit felis, euismod non diam quis, scelerisque rutrum lacus. Morbi pulvinar sollicitudin dui sed dapibus. Donec vulputate est id erat accumsan luctus.
</p>
<p class="paragraphes">Curabitur hendrerit urna et semper tempor. Pellentesque sit amet lacus eget libero efficitur tempus. Phasellus varius enim magna, quis viverra nulla dictum a. Vestibulum ultricies eros lectus, quis commodo ante lobortis in. Vivamus vel justo et ligula aliquam lacinia. In ultrices dolor quis lorem volutpat, gravida dictum turpis ullamcorper. Duis magna turpis, accumsan sed aliquam ut, faucibus sit amet ex. Suspendisse posuere eros at diam luctus, venenatis malesuada justo tincidunt. Sed id quam dolor. In convallis, enim sodales dignissim congue, nisl massa tincidunt nulla, vitae auctor tortor justo id arcu.
</p>
</div>
<h2>Sous-titre</h2>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Donec tristique eu nulla eu lacinia. Cras hendrerit nibh nec rutrum fermentum. Curabitur ipsum ipsum, sodales et volutpat pharetra, elementum eget nulla. Sed eget velit mollis, faucibus nisi sit amet, fringilla tortor. Suspendisse fringilla orci in justo pulvinar, nec cursus diam molestie. Sed finibus velit nec bibendum suscipit. Ut congue mauris id dolor ornare bibendum. Vestibulum ultrices faucibus fringilla. Quisque gravida nisi urna. Cras viverra interdum libero, sed congue felis posuere vel. Aliquam blandit tincidunt diam vel condimentum.
</p>
</body>
</html>
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [Cappuccino] On apprend mieux autour d'une tasse
Sam 2 Jan 2021 - 14:37
Nickel =)
As-tu des questions là dessus ?
Peux-tu m'expliquer le choix du nom de tes id ?
Tu peux passer à la suite sans souci =)
As-tu des questions là dessus ?
Peux-tu m'expliquer le choix du nom de tes id ?
Tu peux passer à la suite sans souci =)
- Cappuccino
- Informations : J'ai soif.
Messages : 135
Re: [Cappuccino] On apprend mieux autour d'une tasse
Sam 2 Jan 2021 - 23:36
Finalement je craque, je pense que je ne trouverai pas même si la solution doit être super simple, mais je vais commencer par répondre à tes questions. Je n'ai aucune question et voici l'explication pour chaque titre :
A prendre en compte que je ne me suis pas du tout mise dans l'idée qu'une personne pourrai passer dessus, donc j'ai pris des titres avec mes points de repères
parun : "par" pour "paragraphe et "un" pour dire que c'est le 1er paragraphe
sstitrun : "ss" pour "sous", "titr" pour titre" et "un" pour un. Donc sous-titre 1 ou 1er sous-titre
dsoustitre : "d" pour "div" et forcément "sous titre". La div du sous-titre
paragraphes : il y a 3 paragraphes donc j'écris en entiers avec la marque du pluriel. S'il y avait une autre zone avec plusieurs paragraphe en class alors au lieu de "paragraphes" j'aurai placé "dparagraphes" pour préciser que ce sont les paragraphes de la div
Il est probable que j'aurai choisi des noms différents si j'avais mis un "vrai" contenu de texte, des noms en rapport avec le contenu justement.
Je te présente mon exercice, mais on peut s'arrêter pour rester sur les titres si tu veux !
▬ Module 2 - Manipulation 2
Comme tu le vois, je ne parviens pas à centrer verticalement le titre principal alors que ça doit sûrement être simple. J'ai mis un cadre comme guide pour voir si c'est bien centré et l'ai laissé pour montrer qu'il ne l'est pas justement xD Le lien est devenu blanc pour être lisible. Avec ta question sur la raison des titres ça m'a fait pensé à mettre des commentaires pour situer un peu plus !
A prendre en compte que je ne me suis pas du tout mise dans l'idée qu'une personne pourrai passer dessus, donc j'ai pris des titres avec mes points de repères
parun : "par" pour "paragraphe et "un" pour dire que c'est le 1er paragraphe
sstitrun : "ss" pour "sous", "titr" pour titre" et "un" pour un. Donc sous-titre 1 ou 1er sous-titre
dsoustitre : "d" pour "div" et forcément "sous titre". La div du sous-titre
paragraphes : il y a 3 paragraphes donc j'écris en entiers avec la marque du pluriel. S'il y avait une autre zone avec plusieurs paragraphe en class alors au lieu de "paragraphes" j'aurai placé "dparagraphes" pour préciser que ce sont les paragraphes de la div
Il est probable que j'aurai choisi des noms différents si j'avais mis un "vrai" contenu de texte, des noms en rapport avec le contenu justement.
Je te présente mon exercice, mais on peut s'arrêter pour rester sur les titres si tu veux !
▬ Module 2 - Manipulation 2
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon premier exercice de codage</title>
<style type="text/css">
/*corp de la page*/
body{
width: 850px;
margin: auto;
background-image: url('https://www.zupimages.net/up/21/53/kd1u.png');
background-repeat: repeat;
}
/*premier paragraphe*/
#parun{
color: green;
}
/*premier span*/
#spanin{
font-size: 18px;
font-family: verdana;
}
/*second span*/
#spandeux{
text-decoration: underline;
}
/*titre principal*/
h1{
height: 60px;
width: 400px;
margin-left: auto;
margin-right: 0px;
border: red 2px solid;
text-align: right;
}
/*liens*/
a{
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
color: white;
}
/*div contenu dans le sous-titre*/
#dsoustitre{
background-color: #E0CDA9;
border: brown 6px double;
padding: 5px;
}
/*trois paragraphe de la div*/
.paragraphes{
text-indent: 15px;
}
/*premier sous-titre*/
#sstitrun{
border: #E0CDA9 3px dotted;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Titre principal</h1>
<p id="parun">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin quam id bibendum vehicula. Nunc ut nulla gravida, euismod nulla in, pellentesque nulla. Lorem ipsum dolor sit amet, <a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="rejoindre la tambouile">Tambouillons,</a> consectetur adipiscing elit. Nullam mollis sit amet sem ac cursus. Aenean varius neque rutrum, iaculis risus eu, hendrerit leo. Phasellus lacinia ac tellus quis rutrum. Nam vitae leo a turpis dignissim elementum.
</p><!-- Saut de ligne
--><p>Sed tincidunt mollis risus sit amet dignissim. Pellentesque id tellus enim. Nunc quis nibh tristique, posuere leo in, rhoncus dui. Nullam eros nisi, consequat at est a, porta congue odio. Vestibulum egestas auctor viverra. Suspendisse interdum accumsan justo, quis molestie est gravida ac. Donec sodales cursus erat, non maximus felis volutpat non. Fusce in justo lectus.
</p>
<h2 id="sstitrun">Sous-titre</h2>
<div id="dsoustitre">
<p class="paragraphes">Maecenas risus risus, cursus varius tristique nec, cursus ac tortor. Etiam consequat leo neque, sed ornare erat tincidunt id. Donec vel rhoncus arcu. In scelerisque, orci at lobortis efficitur, dui felis lobortis nibh, id ullamcorper nulla dolor eget turpis. Aenean eu ligula elit. Praesent sodales a ligula ac interdum. Phasellus fringilla sit amet ligula eget eleifend.
</p>
<p class="paragraphes">enean sit amet nisl non lectus tempor accumsan a vel ante. <span id="spanin">Donec cursus quam libero</span>, id feugiat nulla vehicula vitae. Morbi at eros quis sapien iaculis hendrerit. Proin vel quam suscipit, posuere mi sed, vehicula risus. Suspendisse convallis consectetur porta. Curabitur blandit, magna eget suscipit ultricies, sem dui bibendum dolor, at eleifend arcu lorem eget elit. Cras venenatis imperdiet lorem a posuere. <span id="spandeux">Pellentesque hendrerit</span> pellentesque metus a interdum. Nam suscipit <span id="spantrois">quam eget eros pulvinar</span>, sit amet sagittis magna aliquet. Ut eget felis massa. Sed feugiat, augue vitae fringilla bibendum, lacus lorem dictum velit, a maximus augue arcu et eros. Maecenas sodales pharetra tempor. Donec elit felis, euismod non diam quis, scelerisque rutrum lacus. Morbi pulvinar sollicitudin dui sed dapibus. Donec vulputate est id erat accumsan luctus.
</p>
<p class="paragraphes">Curabitur hendrerit urna et semper tempor. Pellentesque sit amet lacus eget libero efficitur tempus. Phasellus varius enim magna, quis viverra nulla dictum a. Vestibulum ultricies eros lectus, quis commodo ante lobortis in. Vivamus vel justo et ligula aliquam lacinia. In ultrices dolor quis lorem volutpat, gravida dictum turpis ullamcorper. Duis magna turpis, accumsan sed aliquam ut, faucibus sit amet ex. Suspendisse posuere eros at diam luctus, venenatis malesuada justo tincidunt. Sed id quam dolor. In convallis, enim sodales dignissim congue, nisl massa tincidunt nulla, vitae auctor tortor justo id arcu.
</p>
</div>
<h2>Sous-titre</h2>
<img src="https://www.zupimages.net/up/20/53/kovp.png" alt="avatar cassé de Cappuccino" />
<p>Donec tristique eu nulla eu lacinia. Cras hendrerit nibh nec rutrum fermentum. Curabitur ipsum ipsum, sodales et volutpat pharetra, elementum eget nulla. Sed eget velit mollis, faucibus nisi sit amet, fringilla tortor. Suspendisse fringilla orci in justo pulvinar, nec cursus diam molestie. Sed finibus velit nec bibendum suscipit. Ut congue mauris id dolor ornare bibendum. Vestibulum ultrices faucibus fringilla. Quisque gravida nisi urna. Cras viverra interdum libero, sed congue felis posuere vel. Aliquam blandit tincidunt diam vel condimentum.
</p>
</body>
</html>
Comme tu le vois, je ne parviens pas à centrer verticalement le titre principal alors que ça doit sûrement être simple. J'ai mis un cadre comme guide pour voir si c'est bien centré et l'ai laissé pour montrer qu'il ne l'est pas justement xD Le lien est devenu blanc pour être lisible. Avec ta question sur la raison des titres ça m'a fait pensé à mettre des commentaires pour situer un peu plus !
Page 1 sur 2 • 1, 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|