Skip to main content

Bonjour à tous,

Nouveau tuto aujourd’hui pour vous présenter une partie de programmation dont vous aurez certainement besoin si vous souhaitez par la suite développer un système domotique relativement puissant et surtout agréable à utiliser. En effet, les deux langages que nous allons aborder aujourd’hui : HTML et CSS sont des langages qui vont vous permettre de développer des interfaces web et donc de donner un « visage » à votre application.

Vous allez pouvoir constater que ces langages ne sont pas complexes dans la mesure où ils sont assez « logiques ».

Dans un premier temps, nous allons aborder la programmation HTML, c’est la programmation essentielle à connaitre puisqu’elle va donner une forme à votre page. Le CSS lui sera chargé d’améliorer l’aspect de votre page, c’est-à-dire de styliser votre page.

Nous partons du principe que vous avez déjà téléchargé et installé Notepad++ ou équivalent (Sublime text 2, etc…). Pour tester vos pages html, il suffira de les enregistrer au format .html et de les ouvrir grâce à un navigateur classique : Google Chrome, Firefox, Opera, Internet Explorer

Ainsi, en html, il y a un « format  » de page que vous réutiliserez à chaque fois :

<!DODCTYPE html>
<html>
   <head>
   </head>

   <body>
   </body>
</html>

Nous allons détailler ligne par ligne cette partie essentielle à votre page.

 <!DOCTYPE html><!--Permet de signaler au navigateur que le code que nous allons écrire est du html. Sans cette ligne, chacun des navigateurs interprétera le script à sa propre manière.>
 <html></html><!--Ici, on dis que le code html sera compris entre ces deux balises et donc qu’il faudra interpréter tout ce que nous écrirons à l’intérieur comme tel.
<head></head><!--On va déclarer l’en-tête de notre page. Ce sont un peu les "options" de notre page, elles ne modifierons pas le contenu de la page.>

<body></body><!-- C’est entre ces deux balises que nous allons écrire notre page. La plupart du temps, tout ce que nous modifierons entre ces balises modifiera le contenu et/ou l’aspect du site.>

Ensuite, il y a quelques balises html à connaitre :

<p></p> <!-- C’est la balise "paragraphe ", c’est elle qui encadrera le plus souvent notre texte à
<h1></h1> <!--de <h1> à <h6>, ces balises sont des balises de titres, sous-titres, sous-sous-titres, etc… -->

Et enfin, la balise qui permet le retour à la ligne :

    <br/>

Vous remarquerez la plupart des balises est de la forme <ouverture><fermeture/>, c’est la forme la plus courante des balises html.

Toutes ces balises nous permettrons de constituer le corps de la page, mais en fait, que mettons-nous dans l’en-tête ?

Et bien nous allons définir l’encodage des caractères (les normes de caractères qui permettront par exemple d’afficher les é, è, à, etc…) ainsi que le titre qui s’affichera dans l’onglet du navigateur et enfin, les feuilles de styles (.css) qui s’occuperont de l’apparence de notre site.

Allez, c’est parti ! Codons notre première page :

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Ma première page web

<p>Voici la première page web que j’ai codé grâce au tutoriel disponible sur <a href= »https://simple-duino.com »>Simple-Duino

</body> </html>

Hein ? Quoi ?! Mais c’est tout moche !

Et bien oui, nous n’avons pas spécifié d’encodage dans notre en-tête donc les caractères spéciaux ne s’affichent pas. Pour l’encodage, je vous conseil la norme utf-8 qui contient la plupart des caractères spéciaux européens.

Ajoutons donc cette ligne :

    <meta charset="utf-8" />

dans notre en-tête et profitons-en pour ajouter un nom dans l’onglet du navigateur, toujours dans l’en-tête en ajoutant la balise :

Nom de ma page;

Vous remarquerez que j’utilise la balise qui permet de placer des liens sur ma page. En fait, elle utilise une « condition  » : href qui va permettre de spécifier le lien. Ensuite, on place le texte souhaité entre les et notre lien est en place.

Maintenant, vous savez coder votre première page internet mais elle est quand même fade vous ne trouvez pas ? Allez, allons égayer tout ça.

Pour améliorer l’aspect de notre page, nous allons avoir besoin d’aborder la notion de classes. En fait, on peut spécifier des classes à chacune des balises html. On fait cela de manière très simple en ajoutant simplement class= « nom_de_la_classe  » à l’interieur de la balise :

On peut spécifier plusieurs classes en les séparant par un espace.

Bien, vous êtes désormais en mesure d’attribuer des classes à chacun des éléments de votre page. Nous allons donc créer un fichier style.css, l’enregistrer dans le même répertoire que votre première page et lier la page html au style css grâce à la balise suivante : à placer dans l’en-tête de votre page.

En attribuant une classe à chaques élements, on arrive donc au script de page html suivant :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" />

<title>Nom de ma page

</head>

<body>

<h1 class="titre1" >Ma première page web

<p class= »paragraphe1″ >Voici la première page web que j’ai codé grâce au tutoriel disponible sur Simple-Duino

</body> </html>

Maintenant, nous allons aborder les bases du css mais sachez qu’il existe une infinité de possibilité pour styliser votre page. Il existe de très nombreuses balises disponibles, tellement nombreuses que nous ne pouvons pas toutes les présenter.

Tout d’abord, il faut savoir que la structure de notre fichier .css est totalement différente de celle de notre page html. En effet, ici, on utilisera une structure de la forme suivante :

.class

{

}

Ou alors

Balise

{

}

Nous allons modifier un peu notre page.

Commençons par modifier la police utilisée sur notre site :

*

{

font-family: sans-serif;

}

L’étoile nous permet de spécifier que toutes les balises devront adopter cette police de caractères.

Modifions aussi la couleur du texte :

color: #333333;

à ajouter entre les deux {} que nous avons mis en place précédemment.

Pour centrer notre texte, utilisons l’instruction suivante :

body

{

text-align :center ;

}

Modifions la couleur d’arrière-plan :

background-color : #eeeeee ;

à ajouter entre les deux {} du body précédemment défini

Soulignons notre titre :

.titre1

{

text-decoration : underline ;

}

Et faisons en sorte que notre lien soit en gras non-souligné :

a

{

text-decoration: none;

font-weight: bold;

}

Et qu’il change d’apparence lors du survol :

a:hover

{

opacity:0.7;

}

Et voilà ! Votre page commence à avoir un peu plus de style mais son apparence peut encore être améliorée.

apperçu

Vous avez désormais des bases essentielles en programmation html et css. En complément, nous ne pouvons que vous conseiller de visiter l’excellent tutoriel disponible sur le site d’openclassroom, ex-site du zéro réalisé par Mathieu Nebra :

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Merci d’avoir suivi notre tutoriel et bonne continuation dans vos projets futurs…

A plus !

Fabien Aubret

Co-fondateur SimpleDuino, Co-fondateur SimpleDomo. Ingénieur de l'Ecole Nationale Supérieure des Arts Et Métiers (ENSAM). Passionné d'électronique, d'informatique et des nouvelles technologies en général, j'ai à cœur de transmettre ce que d'autres ont pu m'apprendre.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.