AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  



 
Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

Partagez
 

 HTML et CSS, lexique,bonnes pratiques et première utilisation

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

Ethan Valtena
Ethan Valtena
oh my fantastic
Messages : 59
Age : 32
Date d'inscription : 21/07/2016

HTML et CSS, lexique,bonnes pratiques et première utilisation Empty
MessageSujet: HTML et CSS, lexique,bonnes pratiques et première utilisation   HTML et CSS, lexique,bonnes pratiques et première utilisation EmptyJeu 21 Juil - 13:49

Bonjour,

Nous allons voir comment utiliser le HTML, puis le CSS. Mais d'abord à quoi ça sert :

- le HTML sert à donner une structure et un sens à votre page et son contenu
- le CSS sert à rendre votre page belle.

sommaire :
I. le HTML
II. Le CSS
II.a la méthode crade
II.b la méthode passe partout
II.c la méthode optimale
III annexes utiles

I. le HTML

une balise HTML se présente sous deux formes :

une balise fermée :
Code:
<img src="lien de l'image" alt="le texte quand l'image ne charge pas">

ou ouvrante :
Code:
<div id="maDiv" class="uneClass"></div>

src, alt, id et class renferment des informations pour le bon fonctionnement de la balise HTML. On appelle cella un attribut

Certains attribut ne corresponde qu'à une balise (src, alt pour img) ou sont plus génériques comme class et id qui sont utiles avec du CSS.

liste des éléments en HTML5

II. Le CSS

le CSS est l'ensemble des règles définissant l'aspect visuel de votre page.
une règle, généralement appelée propriété, se présente ainsi :

Code:
color : red;

color est le nom de la propriété.
red est la valeur de la propriété.
: est le séparateur entre le nom et la valeur.
; marque la fin de la propriété. Mettez toujours un ; à la fin de vos propriété. Il y a des cas où ce n'est pas obligatoire mais vous éviterez bien des bugs en le mettant toujours.

comment mettre du CSS dans le HTML ? Il y a trois méthodes :

II.a la méthode crade

on va se servir de l'attribut style pour faire :

j'écrit en vert


Code:

<div style="color:green">j'écrit en vert</div>

Mais ça marche bien et on voit bien où est la propriété. Alors pourquoi est-ce crade ?
Parce que sur un gros code, une PA par exemple, ce ne sera pas lisible !

Pour exemple voilà le début d'un code :
Code:
<div style=" text-align: center; background-color:#090909;width:500px;"><div style="padding:10px; text-align:justify;"><span style="display: block; width:480px; height: 150px; background: url(http://image.noelshack.com/fichiers/2016/20/1463923446-01pub11.jpg) top; ceter; border:2px solid darkcyan;border-top-left-radius:5px;border-top-right-radius:5px;opacity:0.5;"></span><div style="margin-bottom:0px; background-color:#090909;  text-transform:small-caps;font-size:18px; text-align:center;width:478px;color:darkcyan;">texte </div></div></div>

je vous épargne la suite qui n'est pas plus lisible.

II.b la méthode passe partout

là il va falloir utilisé une balise HTML qui s'appelle style. Attention, je ne parle pas de l'attribut, mais bien d'une balise que nous allons découvrir ensemble.

Il nous faudrat aussi comprendre un nouveau concept en CSS, les selecteurs.

Un sélecteur est un bout de code qui va nous dire sur quel(s) élément(s)
appliqué un ensemble de propriété CSS. Ce qui nous donne :

Code:

selecteur { propriétés css}

transformons notre code de tout à l'heure. et utilisons des class CSS. Une class CSS est juste un nom marquant une balise HTML Prenons par exemple une class nommé "pleinDePropriété" son selecteur serat ".pleinDePropriété". Et oui il suffit de rajouter un "." pour en faire un selecteur


texte


Code:

<style>.pleinDePropriété{margin-bottom:0px; background-color:#090909;  text-transform:small-caps;font-size:18px; text-align:center;width:478px;color:darkcyan;}</style>
<div class="pleinDePropriété">texte </div>

comme on le voit, il suffit de mettre la balise style avant le reste et de mettre le CSS dedans. On ne mets qu'une seule balise style et on peut mettre tout son css dedans. Le gros avantage de cette méthode est d'être utilisable en temps que simple membre sur FA.

note : On peut mettre plusieurs class sur un élément à condition de les séparer par des espace comme  class="class1 class2 class3"

II.c la méthode optimale

pour passé du code propre à l'optimal, il suffit de :
- mettre le contenu de style dans un fichier nommé blabla.css
- supprimer la balise style pour la remplacer par

Code:
<link rel="stylesheet" href="lien vers blabla.css">

il ne faut pas oublié d'héberger le fichier, comme par exemple sur http://www.petit-fichier.fr/.

note : Par contre sur FA, on ne peut pas utiliser l'optimal sauf si on fait des iframe ou qu'on est admin. Je la cite car elle est utile quand on fait une page html depuis le panneau d'admin.

III annexes utiles :

liste des éléments en HTML5
listes des propriétés CSS
liste des selecteurs CSS


Dernière édition par Ethan Valtena le Ven 22 Juil - 6:33, édité 1 fois
Revenir en haut Aller en bas
http://rpdiv.com

Dreamzz
Dreamzz
modératrice
Messages : 375
Age : 30
Date d'inscription : 09/07/2016
Localisation : Montréal

HTML et CSS, lexique,bonnes pratiques et première utilisation Empty
MessageSujet: Re: HTML et CSS, lexique,bonnes pratiques et première utilisation   HTML et CSS, lexique,bonnes pratiques et première utilisation EmptyVen 22 Juil - 0:29

Merci pour ton partage utile! Surtout pour ce qui concerne "la méthode optimale", je n'avais pensé à faire comme ça pour mes codes lorsque je n'ai pas accès au pa d'un forum. Ça évitera de foutre le bordel dans les codes des autres et d'avoir de jolies mises en page pour mes fiches de liens ou alors de publicité.
Revenir en haut Aller en bas

Ethan Valtena
Ethan Valtena
oh my fantastic
Messages : 59
Age : 32
Date d'inscription : 21/07/2016

HTML et CSS, lexique,bonnes pratiques et première utilisation Empty
MessageSujet: Re: HTML et CSS, lexique,bonnes pratiques et première utilisation   HTML et CSS, lexique,bonnes pratiques et première utilisation EmptyVen 22 Juil - 6:32

J'ai mal précisé. la solution passe partout est utilisable en temps que simple membre (la crade aussi mais à éviter). Par contre sur FA, on ne peut pas utiliser l'optimal sauf si on fait des iframe ou qu'on est admin. Je la cite car elle est utile quand on fait une page html depuis le panneau d'admin.

Je corrige ça tout de suite.
Revenir en haut Aller en bas
http://rpdiv.com


Contenu sponsorisé

HTML et CSS, lexique,bonnes pratiques et première utilisation Empty
MessageSujet: Re: HTML et CSS, lexique,bonnes pratiques et première utilisation   HTML et CSS, lexique,bonnes pratiques et première utilisation Empty

Revenir en haut Aller en bas
 

HTML et CSS, lexique,bonnes pratiques et première utilisation

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
OH MY RPG! :: OH MY SERVICES ! :: Le codage :: Tutoriels-