AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion


Trophées


Classement au
26 juin 2017

Kada'an Ravewood


►►►◄◄◄

Alex & Derek


►►►◄◄◄

Nick O'Sullivan




Classement au
10 juin 2017

James MacAulay


►►►◄◄◄

Caleb Lockhart


►►►◄◄◄

Mickael Wayne




Classement au
27 mai 2017

Jaimie O'Sullivan


►►►◄◄◄

Arès Kye Coleman


►►►◄◄◄

Willem Shepherd




Classement au
13 mai 2017

Les Admins


►►►◄◄◄

Kada'an Ravewood


►►►◄◄◄

Jaimie O'Sullivan




Classement au
28 avril 2017

Gwen W. East


►►►◄◄◄

Caracole O'brien


►►►◄◄◄

Therence Garnet




Classement au
15 avril 2017

Civet


►►►◄◄◄

Stiles & Derek


►►►◄◄◄

Arès Kye Coleman




Classement au
1er avril 2017

Vos 2 Admins


►►►◄◄◄

Arès Kye Coleman


►►►◄◄◄

Kada'an Ravewood




Classement au
19 mars 2017

Kada'an Ravewood


►►►◄◄◄

Alessandro Amaro


►►►◄◄◄

Willem Shepherd




Classement au
4 mars 2017

Derek Hale


►►►◄◄◄

Pia Abramov


►►►◄◄◄

Matthias Lunsford




Classement au
18 février 2017

Kada'an Ravewood


►►►◄◄◄

Stiles Stilinski


►►►◄◄◄

Arès Kye Coleman




Classement au
4 février 2017

Mick & Derek


►►►◄◄◄

Maxine Evans


►►►◄◄◄

Brian O'Conner




Classement au
21 janvier 2017



►►►◄◄◄

Mick & Derek


►►►◄◄◄

Willem Shepherd




Classement au
7 janvier 2017

Liam Dunbar


►►►◄◄◄

Willem Shepherd


►►►◄◄◄

Alex Cormier




Classement au
24 décembre 2016

Mick & Derek


►►►◄◄◄

Willem Shepherd


►►►◄◄◄

Arès Kye Coleman





© Code par Mafdet Mahes

Code onglet coulissant :
Okhmhaka de Never Utopia
Partagez | 
 

 Le codage pour les nuls

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Le codage pour les nuls   Dim 10 Mai - 10:43



Le codage pour


les nuls



Je vais tenter de vous expliquer le charabia des fiches de codes en CSS,
pour que vous puissiez les modifier vous même, dans une certaine mesures
(taille, couleur, image etc...)


Pensez tout de même à conserver les copyrights d'origine par politesse envers l'auteur.

Sommaire en construction







Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Re: Le codage pour les nuls   Jeu 14 Mai - 15:19

Les div...

Tout commence par là.



La div est une boucle de code. Elle peut être incluse dans une autre div.

Par exemple : Div1 [(div2)(div3)(div4)]  
La Div1 est "parent" des div2, div3 et div4. Ce qui aura été défini dans les div2, div3 et div4 sera inclue dans la Div1.

Exclamation Considérez une Div comme un anneau. Il peut entourer ou être entouré par une autre Div, mais jamais se croiser comme les maillons d'une chaine.

Une div commence par
Code:
<div style="... ">
et se termine par
Code:
</div>

Exclamation Ne pas confondre les balises HTML, qui sont entre des [...]
et celles de CSS qui sont entre <...>


Mélanger ces balises, peut parfois créer des bugs !




Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Re: Le codage pour les nuls   Jeu 14 Mai - 15:43

Créer un cadre avec une div


Les attributs simples possibles sont : Le paramétrage est expliqué après

- width : La largeur qui est exprimée en px ou en %
- height : La hauteur qui est exprimée en px, en % ou mise en "auto"
- border : Les bordures : qui sont définies par une épaisseur en px, une couleur, une nature (pleine, double, pointillés..), des arrondis aux angles
- margin : Son centrage par rapport à l'élément (div) qui l'encadre, exprimé en px ou mis en  "auto"
- padding : La marge interne (entre le cadre et le texte qu'il contient), exprimée en px ou mis en "auto"
- background-color : La couleur du fond, exprimé par une couleur, une opacité (qui affecte même le texte)
- background-image : Une image de fond, exprimée par une url, et sa manière de prise en compte (mise à l'échelle ou non)
- box-shadow : Une ombre, définie par une couleur et 3 largeur en px (le décalage, le floutage en x, le floutage en y)
- overflow : L'apparition d'une scroll barre sur la droite i le texte déborde, définie en "auto" (votre navigateur prend la main) ou scroll

Exemple ci-dessous :

Une 1ère div (bordure blanche fond vert) encadre une 2ème div (bordure en pointillé, fond gris avec opacité de 0,8 )

Dans la 1ère div :
- J'ai défini un padding: 20px, cela centre la 2ème div à l'intérieur.
- box-shadow, donne un halo sur la droite et le bas
- border: 3px double #fff, pour une bordure double il faut au minimum une largeur de 3px

Dans la 2ème div :
- background-color: #cccccc; opacity: 0.8, défini un fond gris avec une transparence de 0,8. (0 = transparent  et 1 = 100% opaque) Exclamation le texte de la div est aussi affecté.
- padding: 20px définit une marge de 20px entre le texte et les bords du cadre
- overflow: auto, colle une scroll barre à droite
- border: 4px dotted #0f1428 définit une bordure en pointillé

Code:
<div style="width:400px; height: 400px; background-color: #307a0c; margin: auto; padding: 20px; border: 3px double #fff; box-shadow: 2px 5px 5px #cccccc; "><div style="width: 300px; height: 350px; text-align: justify; background-color: #cccccc; opacity: 0.8; overflow: auto; padding: 20px; border: 4px dotted #0f1428; ">Blabla...
</div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.


Autre exemple :

La première div a une image en fond. Dans la 2ème div, j'ai placé une image.  
Exclamation  Notez la différence de codage.

Code:
<div style="width:400px; height: 200px; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); margin: auto; padding: auto; border: 5px groove #7a4a0c; border-radius: 100px 0 100px 0; "><div style="margin: auto; padding: 20px;">
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://img11.hostingpics.net/pics/3309092003.gif&sa=X&ei=3b1UVeuHB8TSU6vlgeAC&ved=0CAkQ8wc4Og&usg=AFQjCNHde52O5h_8EwuuFUBST9ONluPHYg" style="width: auto;"></div></div>




Paramétrage de ce merdier


- width : La largeur qui est exprimée en px ou en % de la largeur définie dans la div parent

Code:
<div style="width: 200px;">Blabla...</div>

- height : La hauteur qui est exprimée en px, en % de la largeur définie dans la div parent ou mise en "auto". Pour la 1ère div, je vous conseille de mettre "auto", elle s'agrandira en fonction du contenu que vous ajoutez dedans.

Code:
<div style="width: 500px; height: auto;">Blabla...</div>

- border :
On peut définir les bordures individuellement, dans ce cas, spécifiez avant les attributs: border-left , border-right, border-top ou border-bottom
L'épaisseur peut être différente : border-width:1px 2px 3px 2px; (gauche, haut, droite, bas)

Les différents types de bordure :
Code:
<div style="width:200px; height: auto; font-family: Times New Roman; font-size: 18px; text-align: center; color: #fff; padding: 10px; border: 4px solid #27859c;">solid</div>

solid

double

dotted

dashed

double (3px mini)

groove (4px mini)

ridge (4px mini)

inset (4px mini)

outset (4px mini)

Les arrondis :
border-radius:10px ==> donne un arrondi de rayon 10 px aux 4 angles
border-radius:10px 100px 0 10px ==> angle supérieur gauche à 10 px, après on tourne dans le sens des aiguille d'une montre (pour une valeur à 0, pas besoin de mettre l'unité px)

Code:
<div style="border: 5px double #cccccc; border-radius: 10px 100px 0 10px;">Blabla...</div>

border-radius: 10px 100px 0 10px


- margin :
margin: 15px => met une marge extérieure de 15px mini avec la div qui entoure celle-ci
Cette marge peut être spécifiée vis à vis d'un côté : margin-left, margin-right, margin-top ou margin-bottom
auto, valeur seule, marge calculée automatiquement,
inherit, valeur seule, hérite des propriétés de son parent

Code:
<div style="width: 500px; height : auto; margin-left: 20px; margin-top: 30px;">Blabla...</div>

- padding :
padding : 15px => met une marge intérieure de 15px mini avec le contenue de la div
Cette marge peut être spécifiée vis à vis d'un côté : padding-left, padding-right, padding-top ou padding-bottom
► très utile pour écarter du texte de son cadre

Code:
<div style="width: 500px; height : auto; padding: 50px;">Blabla...</div>

- background-color :
Généralement donnée en hexadécimal (#000000 pour le noir, #ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)
On peut y ajouter une valeur de transparence avec opacity (valeur de 0 pour transparent à 1 pour opaque) ex: opacity: 0.8  Exclamation affecte tout le contenu de la div

Code:
<div style="width: 250px; height : 40px; background-color: #c5c5c5; opacity: 0.9;">Blabla...</div>

background-color #c5c5c5; opacity: 0.9

- background-image :
Permet de mettre une image en fond. la syntaxe est : background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png')
On y ajoute des indicateur de positionnement :
background-repeat: repeat (ou no-repeat) reproduit X fois l'image si la taille de la div est plus grande que l'image
background-position: center center (ou 50% 50%) pour centrer l'image dans la div
background-position: left top (ou 0% 0%) pour la mettre en haut à gauche dans la div
background-position: right bottom (ou 100% 100%) pour la mettre en bas à droite dans la div
background-size : cover ou contain, l'image se redimensionne sans déformer à la taille de la div
background-size : auto, l'image garde sa taille initiale
background-size : % ou px, on impose la taille de l'image

Code:
<div style="width: 650px; height 100px: auto; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat;">Blabla...</div>

background-size : cover; background-repeat: no-repeat


background-size : none; background-repeat: repeat


- box-shadow :
les deux 1er chiffres correspondent au décalage en x et y, le dernier l'épaisseur du floutage, suit la valeur de la couleur
box-shadow: 1px 1px 12px #555;

Code:
<div style="width: 500px; height : auto; box-shadow: 1px 1px 12px #555;">Blabla...</div>

box-shadow

- overflow :
Permet de gérer les débordements de texte
visible ou inherit : tout le texte sera visible et pourra parfois déborder sur le reste
hidden : ce qui dépasse du cadre de la div est invisible
auto : ce qui dépasse du cadre de la div sera visible grace à une scroll barre horizontale ou verticale (overflow-x, ou overflow-y force la scroll barre que dans un sens)
initial : garde les propriété de la div parent

Code:
<div style="width: 500px; height : auto; overflow: auto;">Blabla...</div>

Exemple d'une div avec tous les paramètres réunis :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.

Code:
<div style="width:400px; height: 250px; font-size: 14px; text-align: justify; color: #252524; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat; background-color: white; opacity: 0.8; overflow: auto; padding: 30px; border: solid #212c57; border-width:1px 2px 3px 2px; border-radius:100px 10px 0 50px; box-shadow: 3px 3px 5px #8ca2f8; ">Blabla...Duis vel quam et enim interdum venenatis.</div>




Dernière édition par Mafdet Mahes le Ven 15 Mai - 15:24, édité 4 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Re: Le codage pour les nuls   Jeu 14 Mai - 15:51

Gérer du texte, police, taille...


Les attributs simples possibles sont :
- font-family: La police de caractère, on peut utiliser celles déjà contenues dans l'éditeur du forum (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS et Verdana)
Il est possible d'ajouter une autre police supporté par GOOGLE Fonts. Attention, toutes ne supportent pas des transformation (gras, italique, etc...)

Le "link href..." peut être coller en fin de fiche ou au début

Code:
<div style="font-family: 'Frijole', cursive; font-size:35px;">Exemple</div>
<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
Exemple


- font-size: La taille, valeur en px
Code:
<div style="font-size: 18px;">Exemple...</div>
Exemple...


- font-weight: L'épaisseur des lettre, bold = gras, lighter = fin
Code:
<div style="font-weight: bold ;">Exemple...</div>
Exemple...


- text-align: Son centrage, les valeurs sont left, center, right ou justify.
Code:
<div style="text-align: justify;">Exemple...</div>

- font-style: Pour mettre en italique
Code:
<div style="font-style: italic;">Exemple...</div>
Exemple...


- line-height: Gère l'espacement des lignes de texte, valeur en px
Code:
<div style="line-height: 35px;">Exemple...</div>

- color: La couleur du texte, généralement donnée en hexadécimal (#000000 pour le noir, #ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)
Code:
<div style="color: green;">Exemple...</div>
Exemple...


- text-shadow: Son ombrage, le code est: text-shadow: 2px 2px 5px #ff0000. les 2 premiers chiffres sont le décalage en x et y, le 3ème la largeur du flou, ensuite le code couleur
Code:
<div style="text-shadow: 2px 2px 5px #ff0000;">Exemple...</div>
Exemple...


- text-transform: Impose des majuscules ou des minuscules.
capitalize = met le premier caractère de chaque mot en majuscules
lowercase = affichent tous les caractères en minuscule
uppercase = affichent tous les caractères en majuscule
Code:
<div style="text-transform: capitalize;">Exemple etc et voilà...</div>
Exemple etc et voilà...


- letter-spacing:: permet de changer l'écartement des lettres, cela peut être négatif pour serrer les caractères, valeur en px
Code:
<div style="letter-spacing: -1px;">Exemple...</div>
Exemple...


- text-decoration: permet de souligner, barrer, ou mettre un trait en dessus
line-through = barre le texte
overline = met une ligne au dessus du texte
underline = souligne le texte
Code:
<div style="text-decoration: underline ;">Exemple...</div>
Exemple...





Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Re: Le codage pour les nuls   Ven 15 Mai - 14:07

Gérer les images :

taille, effets...


L'Éditeur basique du forum :

code HTML


- Si je me sers de la fonction disponible dans l'éditeur du forum, j'ai ce code (en HTML)
Code:
[img]http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw[/img]

Qui me donne ce résultat :
Vous avez la possibilité de changer la largeur et la hauteur, mais vous devez calculer la proportion entre les 2 pour ne pas déformer l'image = GONFLANT ! Et on ne peut rien faire d'autre.



***

Utilisation du CSS


- L’intérêt est de pouvoir la redimensionner plus facilement et ensuite de lui ajouter des attributs sympathiques.

Le code commence par :
Code:
<img src="
Vous écrivez ensuite l'URL de l'image :
Code:
http://www.etc
Le code fini par :
Code:
">

Code de base (qui reproduit ce que fait le code HTML)
Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw">



***

Gérer la largeur (Ici j'ai mis 300px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="width: 300px; (dans la boucle img)

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 300px;">



***

Gérer la hauteur (Ici j'ai mis 100px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="height: 100px; (dans la boucle img)

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="height: 100px;">



***

Mettre une ombre

L'attribut a ajouter est : style="2px 2px 12px #83e5fe;"
Les 2 premiers nombres donnent le décalage en x et Y, le 3ème l'importance du floutage

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px;box-shadow: 2px 2px 12px #83e5fe;">



***

Mettre des arrondis

L'attribut a ajouter est : style=" border-radius: 40px 0 40px 0;"
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">



***

Ajouter une bordure

L'attribut a ajouter est : style="border: 10px groove #cccccc;" (épaisseur, type, couleur)
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">



Les différents types de bordure :

solid

double

dotted

dashed

double

groove

ridge

inset

outset





Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mafdet Mahes

avatar

Humeur : Féline
Messages : 453
Réputation : 141
Date d'inscription : 17/11/2014
Localisation : Beacon Hills

MessageSujet: Re: Le codage pour les nuls   Mer 1 Mar - 13:24

Ajouter une musique

sur son RP


Le plus classique : You tube



Que propose Youtube ?

Un lien à copier où on peut personnaliser la taille de la vidéo (mais en conservant le ratio L * H)
Comment ? Cliquez sur "Partager" sous la vidéo choisie / puis sur "intégrer". Cela fait apparaitre le code à recopier.

Exemple

Code:
<iframe width="200" height="113" src="https://www.youtube.com/embed/cYVL3LkPBXA" frameborder="0" allowfullscreen></iframe>


Nos besoins courants pour nos RP :

Taille :

C'est rare que l'on souhaite afficher la vidéo associée à la musique que l'on a choisi pour souligner l’ambiance d'un RP.
► Besoin donc d'un bouton pas trop laid et qui ne prend pas une place trop importante.

Dans le lien précédent, il faut réduire (width="200" height="113") à (width="30" height="30")
C'est la taille minimal pour avoir juste le curseur de lecture affiché.

Code:
<center><iframe width="30" height="30" src="https://www.youtube.com/embed/cYVL3LkPBXA" frameborder="0" allowfullscreen></iframe></center>

Donne :

J'ai ajouté une balise "center" pour que cela soit plus esthétique.

A quoi sert le (frameborder="0") dans le code ? ► A mettre une bordure quand on passe la variable de 0 à 1. Cela donne ceci :


Durée d'écoute:

C'est souvent frustrant que la musique s’arrête alors que l'on n'a pas fini de lire le RP. Il y a une parade à devoir recliquer sur le bouton, c'est de mettre la lecture en boucle. Attention, ce n'est pas une exécution automatique qui s'active dès qu'on ouvre la page où se trouve le RP.

C'est la commande loop. Elle s'insère juste après l'adresse de la vidéo. Si je reprends mon dernier exemple :

Code:
<center><iframe width="30" height="30" src="https://www.youtube.com/embed/cYVL3LkPBXA?version=3&loop=1&playlist=cYVL3LkPBXA" frameborder="1" allowfullscreen></iframe></center>



J'ai ajouté (?version=3&loop=1&playlist=cYVL3LkPBXA) juste après le code (VIDEO_ID)
de la vidéo (cYVL3LkPBXA) qui également à recopier dans la commande

Structure du lecteur YouTube:
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Dans mon exemple VIDEO_ID = cYVL3LkPBXA

La musique est jouée en continu tant qu'on ne reclique pas sur le bouton de lecture ou que l'on ferme la fenêtre.

Il existe une commande pour que la lecture de la vidéo se lance automatiquement. Je ne l'indique pas, car je trouve cela très envahissant que d'ouvrir une page sur son navigateur et qu'une musique se lance sans que l'on ait rien demandé. Imaginez le rendu sur un RP si chaque joueur le fait.




Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Le codage pour les nuls
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le codage pour les nuls
» Le Rock/Métal pour les Nuls
» La navigation pour les nuls...| PV Acarvius. |
» Manuel-mode d'emploi en vue d'être président, pour les Nuls
» 2- Les vampires pour les nuls

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Teen Wolf RPG, la limite : l'imagination :: Hors RP :: La FicheÔtèque-
Sauter vers: