avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 26 Déc 2017 - 19:35
Coucou,

Pas de soucis tu n'es pas en retard et je comprends totalement.
Ton code est bon bravo. Fais pas attention au résultat sur le forum, il y a le CSS de FA en plus du CSS de la feuille de style donc on a pas forcément le résultat par défaut.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 26 Déc 2017 - 22:28
Tant mieux, j'ai tout bien compris alors ! o/

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 26 Déc 2017 - 22:57
Très bien, je crois qu'on a parlé un peu de tout, il me semble que la seule chose dont on a pas parlé est les liens. Fais moi un petit rappel de tout ce que tu sais sur les liens.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 27 Déc 2017 - 0:58
Pour faire un lien, c'est la balise a (je sais pas ce que ça veut dire), en mettant l'attribut href pour l'url. Et si o veut que le lien s'ouvre automatiquement dans un nouvel onglet, on doit ajouter target="_blank" dans la balise.

Du coup, voila un lien vers la page d'accueil Epicode qui s'ouvrira dans un nouvel onglet :
Epicode - Page d'accueil
Code:
<a href="http://epicode.bbactif.com/" target="_blank">Epicode - Page d'accueil</a>

Wala c'est tout ce que je sais pour les liens
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 27 Déc 2017 - 18:27
C'est parfait x)

Quand tu dis que tu ne sais pas ce que ça veut dire ça me donne envie d'expliquer Super héro

Notions sur les liens :

a vient du mot "anchor" qui veut dire ancre.

Les attributs :

href : Hypertext Reference : est donc la référence ou la source du lien hypertexte. Sa valeur définit trois types de liens.

- "URL" : (Uniform Resource Locator) est simplement une chaine de texte ou un chemin qui définit la localisation d'un contenu dans le web. Donc c'est le type de lien externe et donc qui renvoie vers une page différente.
<a href="URL" title="description du lien" target="valeur"> Texte à afficher </a>

- "#id" : l'une des utilisation les plus importantes des id est de créer des liens qui renvoient à un contenu dans la même page. On va utiliser ce genre de liens dans un sommaire par exemple. Quand tu vas sur Wikipedia, tu as toujours le sommaire de l'article, tu peux cliquer sur le lien de la partie qui t'intéresse et là la page te renvoie directement à cette partie. On peut aussi l'utiliser pour créer les boutons haut et bas sur une page web. D'ailleurs ils sont sur Epicode à droite.
Pour créer ce genre de lien, il faut d'abord ajouter un id à la partie qu'on veut lier
Dans l'article on aura :
<h2 id="definition"> Définition</h2>

Et dans le sommaire :
<a href="#definition"> Définition </a>

- "mailto:" : comme son nom l'indique, cette valeur permet d'envoyer un mail à quelqu'un. En cliquant sur le lien, l'application de messagerie va s'ouvrir automatiquement avec l'adresse mail du destinataire dans la zone correspondante.

On aura par exemple :
<a href="mailto:reine@epicode.com">envoyer un mail qui n'arrivera jamais<a>
envoyer un mail qui n'arrivera jamais

title : cet attribut est sensé contenir des informations complémentaires utiles sur le lien. Pour un lien de téléchargement par exemple, on peut renseigner le nom et le poids du fichier comme ça la personne qui va télécharger saura d'avance à quoi s'attendre.
Le titre apparait dans une petite infobulle quand on passe la souris sur le lien. Si je reprends ton exemple de lien et j'ajoute title on aura ça :  Epicode - Page d'accueil tu peux passer la souris pour voir l'info.

Target : Comme tu le sais déjà cet attribut définit le mode d'ouverture du lien.
_blank permet d'ouvrir le lien dans un nouveau onglet ou nouvelle fenêtre.
La valeur par défaut est _self qui va ouvrir le lien dans le même "cadre" donc si on ne met pas de target ça va s'ouvrir de cette façon par défaut.
Pour ouvrir le lien dans le même onglet on utilise _top.

Voilà, as tu des questions ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 28 Déc 2017 - 17:26
Non c'est bon, j'ai tout compris :3
Le truc avec les #id, j'ai toujours cru que c'était un truc hyper compliqué, mais en fait c'est super simple ! ^o^

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 28 Déc 2017 - 23:44
Je te félicite avec ça on aurait terminé la partie théorique du HTML, merci de ta patience :3

Voici une petite fiche très simple que j'avais fait pour Anethis. Je te donne ce petit exercice basique pour commencer et on va travailler ensemble sur quelque chose de plus compliquer qui regroupe un peu tout ce qu'on a vu.
Puisque tu as déjà fait une PA à partir d'un schéma je ne vais pas te mettre la fiche en HTML mais j'ai ajouté du CSS donc je te mets la maquette de la fiche. Tu dois me faire la structure (seulement le HTML) en prenant en compte le CSS.

Exercice 1 : HTML

Spoiler:

Et voici le texte pour t'aider :
Grand Titre
une petite phrase qui devrait être un peu longue
Premier sous titre
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!
Lorem ipsum dolor sit amet.
Deuxième sous titre
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos distinctio aperiam officiis nobis autem fugit repellendus vel esse dolor nihil magnam recusandae dicta, culpa odio saepe sint nam eum expedita.
Fiche codée par codeur

Et le lien de l'image que j'ai fait rapidement tu peux la changer si tu veux : https://redcdn.net/hpimg15/pics/183098minibaann.png



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 4:28
J'essaie de faire ça demain ! (enfin tout a l'heure plutôt, vu l'heure). J'ai deux p'tites questions aussi avant :

Je dois utiliser les balises sémantiques ou je peux faire avec des div et des span ?

Tu veux dire quoi par "faire seulement la structure HTML mais en prenant en compte le css" ? Je crois que j'ai compris mais je suis pas sûre... ça veut dire que je fais mon html avec des class="machin" dedans mais je fais pas la feuille css pour l'instant, c'est ça ?

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 14:27
Je veux bien voir des balises sémantiques sinon l'exercice perd son objectif. Bien sûr là où tu ne peux pas mettre de balise sémantique tu vas devoir mettre une div ou span.

Pour le CSS, tu n'as pas à mettre des classes. Ce que je voulais dire c'est que si j'ai par exemple une image et un paragraphe entourés tous les deux d'une bordure. Si je te donne juste la fiche en HTML, tu ne verra qu'une image et un paragraphe donc on aura deux balises dans notre code. Si je te donne la fiche avec le CSS comme dans l'exercice, on va devoir mettre les deux balises dans une div qui servira pour le cadre.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 15:57
D'accord, jje crois que j'ai compris !

Du coup, j'ai fait ça :

Code:
<div>
  <h1>Grand Titre</h1>
  <img src="https://img15.hostingpics.net/pics/183098minibaann.png" />
</div>
<div>
  <i>une petite phrase qui devrait être un peu longue</i>
  <hr />
  <h2>Premier sous titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!
<br /><br />
  Lorem ipsum <u>dolor</u> sit amet.</p>
  <h2>Deuxième sous titre</h2>
  <p><b>Lorem ipsum dolor</b> sit amet, consectetur adipisicing elit.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos distinctio aperiam officiis nobis autem fugit repellendus vel esse dolor nihil magnam recusandae dicta, culpa odio saepe sint nam eum expedita.</p>
</div>
  <div>Fiche codée par codeur</div>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 19:55
C'est bien tout ça :3

Voici donc quelque petites remarques :
Code:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!
<br /><br />
  Lorem ipsum <u>dolor</u> sit amet.</p>
Ici peux-tu m'expliquer pourquoi tu as utilisé 2 fois le br ?
même chose pour le deuxième bloc.

On a un bloc avec un paragraphe et une phrase. Le paragraphe génère automatiquement une marge avant et après, donc tu n'auras pas besoin de br.

N'oublie pas que la fiche entière a un fond et donc on va devoir mettre tout le code dans un bloc.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 23:01
Hum, j'ai mis deux fois br pour faire un saut de ligne ? J'ai mis les deux lignes dans un même paragraphe, alors pour faire le saut de ligne à l'intérieur du paragraphe, j'ai mis deux br... C'est comme ça que j'aurais fonctionné avec des div, pour pas mettre 15 fois un bloc si je reviens 15 fois à la ligne...

Du coup, je devrais faire mon code comme ça ?

Code:
<div>
<div>
  <h1>Grand Titre</h1>
  <img src="https://img15.hostingpics.net/pics/183098minibaann.png" />
</div>
<div>
  <i>une petite phrase qui devrait être un peu longue</i>
  <hr />
  <h2>Premier sous titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!</p>
<p>Lorem ipsum <u>dolor</u> sit amet.</p>
  <h2>Deuxième sous titre</h2>
  <p><b>Lorem ipsum dolor</b> sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos distinctio aperiam officiis nobis autem fugit repellendus vel esse dolor nihil magnam recusandae dicta, culpa odio saepe sint nam eum expedita.</p>
  <div>Fiche codée par codeur</div>
</div>
</div>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 29 Déc 2017 - 23:27
C'est nettement mieux.
div ou p c'est la même chose, les deux sont des blocs. On ne met jamais plus d'un br, ça sert à rien non plus d'avoir 60 blocs pour les sauts de ligne. Dans tous les cas l'espace est géré avec les margins en CSS.
Donc si tu veux mettre tout ton texte dans le même paragraphe, il suffit d'ajouter une span au contenu que tu veux espacer. Tu vas me dire mais une span ne prend pas de marge, c'est vrai mais on peut très bien lui mettre une marge en modifiant le display en block via le CSS.
De même dans ton code j'aurais mis une span pour les phrases vu que c'est juste une phrase et non un paragraphe.
Donc si tu ne veux pas mettre beaucoup de balise, tu peux garder un seul paragraphe qui va prendre la couleur mauve de l'arrière plan et mettre la phrase dans une span. sinon tu mets ta span hors le paragraphe et tu ajoutes une div qui entoure les deux et qui prendra la couleur du fond mauve.

Sinon j'ai vu que tu as participé au cotm, veux-tu qu'on revoit le code de ta fiche ensemble ?

Edit : Ah il y a une div en trop qui va du premier h2 jusqu'à la fin, je ne pense pas qu'elle servira pour le CSS. Si on applique la couleur du fond à la div parente de toute la fiche, on aura pas besoin d'une div pour le reste. J'espère que c'est clair tout ça.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 0:00
Oui mais, c'est sur le paragraphe qu'on va mettre le fond violet, alors c'est pour ça que j'avais mis tout ensemble au début, et pourquoi s'éparpiller après en mettant un coup un p, un coup un span ? On s'y perds pas un peu ?
Je crois que je préfère l'option de la div pour le fond mauve avec des paragraphes dedans alors... C'est possible ?

Pour la div en trop, c'est parce qu'au début j'avais mis une div pour le beige avec le titre et l'image, et une autre pour la partie en orange (que j'avais pas fermé au bon endroit, mais j'ai corrigé sur le deuxième code), puis après tu m'as dit de mettre une div qui englobait tout donc j'ai ajouté, mais en laissant ces deux div. J'ai absolument aucune idée de comment faire l'effet penché entre les deux blocs, alors ça m'a un peu perdu X_x

Mais je vois ce que tu veux dire, du coup, je pense que ce code là est bon :

Code:
<div>
<div>
  <h1>Grand Titre</h1>
  <img src="https://img15.hostingpics.net/pics/183098minibaann.png" />
</div>
  <i>une petite phrase qui devrait être un peu longue</i>
  <hr />
  <h2>Premier sous titre</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis vel dolor veritatis porro ut, ratione sunt cum doloremque eius perferendis molestiae, hic deserunt asperiores nostrum, nisi qui voluptatum facilis assumenda!</p>
<p>Lorem ipsum <u>dolor</u> sit amet.</p>
</div>
  <h2>Deuxième sous titre</h2>
  <div>
<p><b>Lorem ipsum dolor</b> sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos distinctio aperiam officiis nobis autem fugit repellendus vel esse dolor nihil magnam recusandae dicta, culpa odio saepe sint nam eum expedita.</p>
</div>
  <div>Fiche codée par codeur</div>
</div>

Edit : Ah, et pour mon code du COTM, je suis justement en train d'essayer de revoir un peu mon code actuellement, pour faire quelque chose de plus propre. Je veux bien qu'on revoit ensemble ce que j'ai fait après, parce qu'il est pas mal brouillon (et je sens que tu vas un peu vouloir me tuer, huh )
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 0:59
Au fait j'ai parlé de span parce que j'ai imaginé que tu mettais le fond sur le p donc pour avoir un seul p, c'est mieux de mettre un span que deux br.
Ton code est parfait ainsi, j'aime bien, bravo je suis fière de toi

Pour ton code c'est pas grave, on peut le revoir plus tard alors.

Exercice 2 : HTML

Rendu de l'exercice

Resident Evil
Accueil Présentation Chapitres Apocalyps Extinction Afterlife Retribution Chapter final
Resident Evil est une hexalogie cinématographique, adaptée de la série de jeux vidéo japonaise Resident Evil et développée par Paul W. S. Anderson entre 2002 et 2016.
Les films mettent en scène les aventures d’Alice (incarnée par Milla Jovovich), un ancien agent de sécurité de la multinationale Umbrella Corporation, qui tente de survivre dans un monde envahi par des morts-vivants et autres armes biologiques à cause d'un virus libéré par la société. Au cours de ses aventures, elle rencontrera de nombreux personnages issus de la série des jeux dont Claire Redfield (Ali Larter), Jill Valentine (Sienna Guillory) ou Carlos Oliveira (Oded Fehr) qui vont l'accompagner dans son combat contre Umbrella. Plus
Films Fiche technique Distribution
Films
Resident Evil (2002) Resident Evil: Apocalypse (2004) Resident Evil: Extinction (2007) Resident Evil: Afterlife (2010) Resident Evil: Retribution (2012) Resident Evil : Chapitre final (2016)
Fiche technique
Distribution
Alicia Marcus : Milla Jovovich (opus 1, 2, 3, 4, 5 et 6) Rain Ocampo : Michelle Rodríguez (opus 1 et 5) Claire Redfield : Ali Larter (opus 3, 4 et 6)

Et l'image :

image:

On va faire une page d'un site qui parle de Resident Evil, maintenant que j'y pense j'aurais peut-être dû faire une maquette sur un site pokémon *sort*

On va le faire progressivement pour ne pas se perdre.

Donc ta première mission est de mettre la structure de base de notre page et dans le corps, le grand titre, la bannière et les trois liens Accueil, Présentation et Chapitres.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 1:27
Est-ce que je dois mettre du css déjà ou pas ?

Parce que j'ai commencé sans css donc, j'ai juste mis ça :
Code:
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exercice Resident Evil</title>
  </head>
  
  <body>
    <div>
    <h1>Resident Evil</h1>
     <img src="https://i62.servimg.com/u/f62/17/26/27/57/mila10.png" />
      <div>
       <a href="">Accueil</a> <a href="">Présentation</a> <a href="">Chapitres</a>
      </div>
    </div>
  </body>
  
</html>

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 15:40
C'est bien, bravo.
Juste une petite question, pourquoi tu as mis l'image et le titre dans une div ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 16:03
Je suis sur tél donc j'ai pas mon code sous les yeux, mais je me souviens pas avoir fait ça ? Je voulais mettre une div qui engloberait le tout en fait, où j'y mettrait la couleur de fond et la largeur, donc que j'ouvre avant le titre mais que je fermerais a la toute fin. Je l'ai pas fermé au bon endroit ?

Envoyé depuis l'appli Topic'it
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 17:30
Ah d'accord, non c'est bon alors.

Donc pour ajouter les chapitres, on va transformer nos trois liens en une liste non ordonnée de trois éléments, dans le dernier élément "Chapitres" on va créer une nouvelle liste de 5 éléments.
Donc on aura une liste de liens imbriquée dans une autre liste de liens.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 21:10
Woh, une liste dans une liste, je ne savais même pas qu'on pouvais faire ça ! o:

Donc, voila, si j'ai bien compris ?

Code:
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exercice Resident Evil</title>
  </head>
 
  <body>
    <div>
    <h1>Resident Evil</h1>
    <img src="https://i62.servimg.com/u/f62/17/26/27/57/mila10.png" />
     
      <div>
      <ul>
        <li><a href="">Accueil</a></li>
        <li><a href="">Présentation</a></li>
        <li><a href="">Chapitres</a>
        <ul>
          <li><a href="">Apocalyps</a></li>
          <li><a href="">Extinction</a></li>
          <li><a href="">Afterlife</a></li>
          <li><a href="">Retribution</a></li>
          <li><a href="">Chapter final</a></li>
        </ul>
        </li>
      </ul>
      </div>
     
    </div>
  </body>
 
</html>

(D'ailleurs, j'avais mis les trois liens dans une div, je sais pas si c'est nécessaire en fait ?)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 30 Déc 2017 - 23:52
C'est parfait
En effet tu peux enlever la div, ul est par défaut un bloc.

Tu penses pouvoir faire le reste ?
Tu auras un lien vers une source externe pour "plus".
Le sommaire avec des liens vers le contenu sur la même page.
Une liste ordonnée et une liste de définition.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 31 Déc 2017 - 14:05
Oui, c'est bon, j'ai fait tout le reste :)

Code:
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exercice Resident Evil</title>
  </head>
 
  <body>
    <div>
    <h1>Resident Evil</h1>
    <img src="https://i62.servimg.com/u/f62/17/26/27/57/mila10.png" />
     
      <ul>
        <li><a href="">Accueil</a></li>
        <li><a href="">Présentation</a></li>
        <li><a href="">Chapitres</a>
        <ul>
          <li><a href="">Apocalyps</a></li>
          <li><a href="">Extinction</a></li>
          <li><a href="">Afterlife</a></li>
          <li><a href="">Retribution</a></li>
          <li><a href="">Chapter final</a></li>
        </ul>
        </li>
      </ul>
     
      <p>
        Resident Evil est une hexalogie cinématographique, adaptée de la série de jeux vidéo japonaise Resident Evil et développée par Paul W. S. Anderson entre 2002 et 2016.
      </p>
      <p>
        Les films mettent en scène les aventures d’Alice (incarnée par Milla Jovovich), un ancien agent de sécurité de la multinationale Umbrella Corporation, qui tente de survivre dans un monde envahi par des morts-vivants et autres armes biologiques à cause d'un virus libéré par la société. Au cours de ses aventures, elle rencontrera de nombreux personnages issus de la série des jeux dont Claire Redfield (Ali Larter), Jill Valentine (Sienna Guillory) ou Carlos Oliveira (Oded Fehr) qui vont l'accompagner dans son combat contre Umbrella.
      </p>
      <span><a href="">Plus</a></span>
      <hr />
     
      <ul>
        <li><a href="#films">Films</a></li>
        <li><a href="#fiche">Fiche technique</a></li>
        <li><a href="#distribution">Distribution</a></li>
      </ul>
     
      <h2 id="films">Films</h2>
        <ol>
          <li>Resident Evil (2002)</li>
          <li>Resident Evil: Apocalypse (2004)</li>
          <li>Resident Evil: Extinction (2007)</li>
          <li>Resident Evil: Afterlife (2010)</li>
          <li>Resident Evil: Retribution (2012)</li>
          <li>Resident Evil : Chapitre final (2016)</li>
        </ol>
     
      <h2 id="fiche">Fiche technique</h2>
     
      <h2 id="distribution">Distribution</h2>
        <dl>
          <dt>Alicia Marcus</dt>
          <dd>Milla Jovovich (opus 1, 2, 3, 4, 5 et 6)</dd>
          <dt>Rain Ocampo</dt>
          <dd>Michelle Rodríguez (opus 1 et 5)</dd>
          <dt>Claire Redfield</dt>
          <dd>Ali Larter (opus 3, 4 et 6)</dd>
        </dl>
     
    </div>
  </body>
 
</html>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 3 Jan 2018 - 23:53
Bonsoir,

Je m'excuse pour le retard, je ne pouvais pas me connecter ces derniers jours.

Ton code est très bien, bravo.

Code:
<span><a href="">Plus</a></span>
ici tu n'auras pas vraiment besoin de la span. Mais le plus important, on veut que la personne qui parcourt notre site reste dessus et donc il est plus intéressant d'ouvrir les sites externes dans un nouvel onglet. L'attribut target est très important surtout quand on lie une page par iframe, ce n'est pas pratique d'ouvrir les liens dans le cadre.

Je te laisse donc modifier ce petit détail.

Bonne année :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 4 Jan 2018 - 21:45
Ah, pas de span donc ? Je me suis embrouillé, je crois x3 Je l'avais mis par rapport à ce que tu m'avais dit la dernière fois, de mettre un span pour gérer les marges avec les span plutôt que des br, mais c'est vrai que le p qui est avant suffit à faire ça puisque mon span est à l'extérieur... c'est bien ça, je fais pas d'erreur ? Donc je dois laisser le "plus" tout seul ?

Pour le target, j'aurais du y penser, oui ! ^^'

Du coup j'ai modifié, j'ai remplacé la ligne que t'as cité par ceci :
Code:
<a href="" target="_blank">Plus</a>
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 6 Jan 2018 - 18:09
Oui c'est tout à fait ça. Ici une div sera plus utile pour gérer les marges et le positionnement du lien qu'une span.

En tout cas c'est parfait.

Avec ça on peut passer à l'exercice libre, tu peux donc choisir le schéma et la structure que tu veux faire. Peut-être le nouveau concours ou une fiche qui te sera utile sur ton forum, c'est comme tu veux.


Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum