Visitez mon nouveau site web » mongo.ca

jeudi 30 octobre 2008

Petit cours de balises HTML et de CSS pour les pages MySpace et les réseaux sociaux

Cet article vise à aider les utilisateurs de MySpace et autre réseaux sociaux qui donne la possibilité d'utiliser du HTML et CSS dans leurs pages.

HTML

Le langage HTML est à la base de TOUTES les pages web que vous visitez, même les sites en FLASH. Ce langage est constitué de balises qui organise le texte ou l'informations (Images, vidéos, etc...). Un document HTML typique se constitue de la façon suivante :


<html>

<head>
<title>Le titre de votre page</title>
</head>

<body>
Contenu de votre page web...
</body>

</html>


La compréhension de la structure d'un document HTML n'est pas très importante lorsqu'on ne créé pas une page en totalité. Le plus important à retenir est que le langage HTML se compose de balises (ex:<body></body>) et que celles-ci doivent être refermées (ex:<div>Bonjour) (ex:<div>Bonjour</div>). Vous aurez compris que la balise de fermeture comprend un «/». Ces balises ne sont bien entendue pas visibles par l'utilisateur final qui consulte la page avec un navigateur comme Firefox.

Balises HTML utiles pour les pages MySpace:

<a href="http://www.ecoutez.ca">exemple de texte</a> : créé un lien vers http://www.ecoutez.ca avec le texte «exemple de texte»

<img src="http://www.ecoutez.ca/image.jpg" /> : affiche l'image http://www.ecoutez.ca/image.jpg (cette balise n'a pas besoin d'une balise de fermeture mais demande un «/» avant la fin.

<p>exemple de texte</p> : délimite un paragraphe

<div>exemple de texte</div> : délimite une boîte de texte (avec changement de ligne après)

<span>exemple de texte</span> : délimite une boîte de texte (sans changement de ligne)

La différence entre une balise <span></span> et <div></div> est le changement de ligne après la balise. Si vous voulez isoler un mot dans une phrase vous devez utiliser la balise <span></span> car elle ne brisera pas votre phrase avec un changement de ligne.

<span>Bonjour,</span> ce blog ...
Affiche :
Bonjour, ce blog ...



<div>Bonjour,</div> ce blog ...
Affiche :
Bonjour,
ce blog ...


Maintenant que vous connaissez les principales balises HTML, il est temps de leur trouver une utilité!

CSS

Le CSS est un langage ajouté au HTML qui permet de définir le style de votre page. Vous pouvez ajouter à toutes vos balises HTML un paramètre style="" contenant les informations de mise en forme (ex:<div style="font-weight:bold;">Bonjour</div> affiche le texte contenu dans la balise <div></div> en gras)

Voici les principaux paramètres CSS:






















Détails

Valeurs

font-size

Définir la taille du texte

Valeurs possibles:
<chiffre> px

ex: font-size:14px;

font-weight

Définir l'épaisseur du texte

Valeurs possibles:
normal
bold

ex: font-weight:bold;

color

Définir la couleur du texte

Valeurs possibles:
#<valeur hexadécimale>
<nom de la couleur>

ex: color:#ffffff;
ex: color:red;

background

Définir l'arrière-plan

Valeurs possibles:
#<valeur hexadécimale>
<nom de la couleur>
url(<adresse de l'image>) no-repeat

ex: background:#ffffff;
ex: background:red;
ex: background:url(http://www.ecoutez.ca/image.jpg) no-repeat;



Je vais ajouter peu à peu d'autres paramètres CSS et d'autres balises HTML.

BoosterBlog

lundi 27 octobre 2008

Un petit truc pour éviter que votre page MySpace EXPLOSE!

En me promenant sur MySpace pour chercher des groupes du Québec pour Écoutez.ca, j'ai remarqué une erreur d'affichage sur la plupart des pages MySpace. Beaucoup utilisent des widgets Flash ou des vidéos YouTube sur leur page. Le chargement peut parfois être long et les widgets se mettent à apparaître un après l'autre ce qui a pour conséquence d'agrandir la page et de déplacer le lien où vous alliez cliquer. Voici la solution pour que votre page s'ouvre avec la bonne taille. Fini les liens qui se retrouvent 1 km plus bas après le chargement de vos widgets. Oui oui, rien de moins!



Donc, je commence! Vous devez aller dans «modifier votre profil» et repérer tous les éléments Flash(les balises commençant par <object> et se finissant par </object>). Dans ces balises se trouvent les dimensions finales de l'élément Flash.

Voici un exemple avec le code d'un player YouTube :


<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>


Largeur : 425
Hauteur : 344

Il vous suffit donc d'utiliser ces dimensions pour entouré votre élément Flash avec une balise <div> à grandeur fixe. Attention, il est important d'entourer la balise <object> seulement et de ne pas y inclure d'autres balises <div> ou du texte.



<div style="width:425px; height:344px;">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>
</div>



N'oubliez pas d'ajouter px après les chiffres.

Voilà c'est fait, votre page est beaucoup plus agréable à visiter!

Visitez mon nouveau site web » mongo.ca