Les différents langages

19/02/2015 13:23

Pour résumer :

Le HTML permet de placer des briques, des murs, des fenêtres.
Le CSS permet de mettre de la peinture, changer une taille des éléments HTML.
Le Javascript permet de rendre l'ensemble "interactif" : la porte peut s'ouvrir, etc.
Le méta-langage permet d'afficher les données du blog.

HTML : hyper text markup langage

C'est un format de balisage pour représenter les données sur une page web.

Chaque élément commence par un <nom> et se termine par un </nom>. On dispose d'élément pour beaucoup de chose: <p> pour paragraphe, <em> pour l'emphase (souvent en italique)...

Voici une liste complète : memento des balises html

<p>
    Je suis un paragraphe contenant un mot en <strong>gras</strong>. 
	Et un lien vers <a href="http://www.over-blog.com">overblog</a>.
</p>

CSS : cascading style sheet

Le CSS est un langage permettant de mettre en page le HTML. On peut ainsi définir une couleur de texte, de fond, une taille de texte.

La première partie de cet exemple CSS ajoute de l'espace autour des paragraphes, et change la couleur du texte.

La suite définit la couleur des liens : blanche. Et la couleur des liens lorsqu'ils sont survolés : orange (#ff9900).

p {
    margin : 10px;
	color : blue; 
}
a {
	color : white;
}
a:hover {
	color : #ff9900; 
}

Javascript

Le javascript est un langage de programmation, qui permet d'effectuer des intéractions sur une page web.

On peut par exemple créer un bouton qui affiche un message lorsqu'on clique dessus.

Méta langage

Avec les langages précédents, il est possible de créer un site web. Mais pour afficher des données qui changent (une liste d'article qui se met à jour lorsque vous publiez, une liste des tags..) il faut un méta langage.

Celui utilisé par overblog est basé sur twig.

Ce code d'exemple prend la liste des articles du blog, et pour chacun, affiche le titre, et un lien pour voir la suite.

{% list Blog.Posts %}
    <p>
		<strong>{{ Post.Title }}</strong>
		<a href="{{Post.Permalink}}">Lire la suite</a>
	</p>
{% endlist %}