Bonjour à tous est bienvenue dans ce tutoriel. Celui-ci a pour but de vous initier au langage de programmation tel que le HTML, ou le CSS.
C’est 2 langages de programmation sont indispensable pour la création d’un site web tel qu’un portfolio, une boutique…
Le fonctionnement d’un site web
Je suis quasiment sur que chacun d’entre vous consulte des sites internet tel que « Facebook, YouTube… ». Pour les consultez-vous utilisez un petit programme tel que « IE, Chrome… ».
Un petit peu d’histoire ne vous fera pas de mal. Le HTML et le CSS sont de langage de programmation universel et obligatoire pour la création d’un site web tel que « Wikipédia ». Le HTML à étais inventé par Tim Bernes-Lee en 1991.
Les rôles de HTML et CSS
Le HTML ou plutôt « HyperText Markup Language » permet de gérer et d’organiser le contenu du site.
Le CSS ou plutôt « Cascading Style Sheets » permet de gérer l’apparence du site
C’est 2 langage de programmation sont tout récent car le HTML est apparue en 1991 contrairement au CSS qui lui est arrivé en 1996.
Il est toujours possible de créer un site web seulement en HTML mais celui-ci ne seras pas très beau, l’informatique apparaitra donc brute.
La différente version de HTML et du CSS
Depuis 1991 le HTML n’as fait que de s’améliorer, dans la version HTML 1.0 il n’était impossible d’affichez des images contrairement à la version 5.0 qui elle permet d’insérez facilement des vidéos.
Le CSS lui a vécu 3 version qui ont vraiment était marqué notamment pour la dernière CSS3 qui permet de gérer les bordures, les ombres…
L’éditeur de texte
Pour crée son site web vous n’avez pas besoin d’un logiciel particulier, et oui votre bloc note feras largement l’affaire, même si l’organisation n’est pas terrible du tout. Je vous conseille donc d’utiliser Notepad++ qui est éditeur de texte gratuit et avec une interface très fluide.
Votre première page web
Allez commençons.
Pour commencer si vous utilisez Notepad++ je vous invite à vous rendre dans Langage>H>HTML ce qui vas configurez Notepad++ pour une utilisation spécifique au HTML.
Nous allons donc crée un dossier que nous allez nommer comme vous voulez.
Attention : Eviter les espaces ou remplacez les par des « _ ».
Dans de dossier vous allez créer un nouveau fichier auquel vous allez donner le format suivant :
- index.html
- style.css
Comme vous pouvez le voir on a nommé notre feuille de style « style.css » est notre base « index.html ».
Dans notre index nous allons insérez du texte, pour ma part se seras « Bienvenue ». Puis vous allez enregistrer votre page au format html et vous allez l’ouvrir avec votre navigateur.
Ce qui donne la chose suivante :
Pour améliorer l’interface du site nous allons donc mettre le texte « Bienvenue » en gras, mais il serait trop simple s’il suffisait de cliquer sur le bouton « G ». C’est pourquoi le HTML est remplie de balise qui détermine la nature du texte mais qui reste invisible à l’écran du visiteur.
Exemple : « <b>Bienvenue</b> »
Ce qui va donnez :
Comme je suis très gentil je vous partage les balises les plus utile que vous pourrez consulter à l’adresse suivante :
Pour apporter des informations supplémentaires à notre balise nous allons utiliser des attributs. Les attributs se trouvent après la balise.
Pour comprendre son fonctionnement voici un petit exemple :
<image nom="photo.jpg"/>
L’ordinateur comprend alors qu’il faut affichez le fichier se nommant « photo » et ayant le format « jpg ».
Structure du page HTML
Chaque page HTML doit être accompagné d’un « DOCTYPE html » qui indique que c’est bien une page HTML. Par la suite vous pouvez apercevoir les balises « html », « body » et « head ». La balise HTML permet d’englober tout votre code. La balise « head » permet d’apporter des informations sur la page web comme son titre, la gestion des caractères spéciaux… La balise « body » permet d’affichez tout ce que l’on écrira dans son corps. « meta charset="utf-8" » permet d’indiquer l’encodage utiliser dans votre « index.html ».
Voilà nous sommes à la fin de ce tutoriel vous savez des à présent crée une page HTML, dans mon prochain tutoriel je vous expliquerez comment bien organiser son texte.
J’espère que se tutoriel vous auras aidé, sachez que celui-ci m’as pris beaucoup de temps, avant tout copier / coller de se tutoriel merci de me contactez en privée.
Cordialement iD3V.
C’est 2 langages de programmation sont indispensable pour la création d’un site web tel qu’un portfolio, une boutique…
Le fonctionnement d’un site web
Je suis quasiment sur que chacun d’entre vous consulte des sites internet tel que « Facebook, YouTube… ». Pour les consultez-vous utilisez un petit programme tel que « IE, Chrome… ».
Un petit peu d’histoire ne vous fera pas de mal. Le HTML et le CSS sont de langage de programmation universel et obligatoire pour la création d’un site web tel que « Wikipédia ». Le HTML à étais inventé par Tim Bernes-Lee en 1991.
Les rôles de HTML et CSS
Le HTML ou plutôt « HyperText Markup Language » permet de gérer et d’organiser le contenu du site.
Le CSS ou plutôt « Cascading Style Sheets » permet de gérer l’apparence du site
C’est 2 langage de programmation sont tout récent car le HTML est apparue en 1991 contrairement au CSS qui lui est arrivé en 1996.
Il est toujours possible de créer un site web seulement en HTML mais celui-ci ne seras pas très beau, l’informatique apparaitra donc brute.
La différente version de HTML et du CSS
Depuis 1991 le HTML n’as fait que de s’améliorer, dans la version HTML 1.0 il n’était impossible d’affichez des images contrairement à la version 5.0 qui elle permet d’insérez facilement des vidéos.
Le CSS lui a vécu 3 version qui ont vraiment était marqué notamment pour la dernière CSS3 qui permet de gérer les bordures, les ombres…
L’éditeur de texte
Pour crée son site web vous n’avez pas besoin d’un logiciel particulier, et oui votre bloc note feras largement l’affaire, même si l’organisation n’est pas terrible du tout. Je vous conseille donc d’utiliser Notepad++ qui est éditeur de texte gratuit et avec une interface très fluide.
Votre première page web
Allez commençons.
Pour commencer si vous utilisez Notepad++ je vous invite à vous rendre dans Langage>H>HTML ce qui vas configurez Notepad++ pour une utilisation spécifique au HTML.
Nous allons donc crée un dossier que nous allez nommer comme vous voulez.
Attention : Eviter les espaces ou remplacez les par des « _ ».
Dans de dossier vous allez créer un nouveau fichier auquel vous allez donner le format suivant :
- index.html
- style.css
Comme vous pouvez le voir on a nommé notre feuille de style « style.css » est notre base « index.html ».
Dans notre index nous allons insérez du texte, pour ma part se seras « Bienvenue ». Puis vous allez enregistrer votre page au format html et vous allez l’ouvrir avec votre navigateur.
Ce qui donne la chose suivante :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Pour améliorer l’interface du site nous allons donc mettre le texte « Bienvenue » en gras, mais il serait trop simple s’il suffisait de cliquer sur le bouton « G ». C’est pourquoi le HTML est remplie de balise qui détermine la nature du texte mais qui reste invisible à l’écran du visiteur.
Exemple : « <b>Bienvenue</b> »
Ce qui va donnez :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Comme je suis très gentil je vous partage les balises les plus utile que vous pourrez consulter à l’adresse suivante :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Pour apporter des informations supplémentaires à notre balise nous allons utiliser des attributs. Les attributs se trouvent après la balise.
Pour comprendre son fonctionnement voici un petit exemple :
<image nom="photo.jpg"/>
L’ordinateur comprend alors qu’il faut affichez le fichier se nommant « photo » et ayant le format « jpg ».
Structure du page HTML
Chaque page HTML doit être accompagné d’un « DOCTYPE html » qui indique que c’est bien une page HTML. Par la suite vous pouvez apercevoir les balises « html », « body » et « head ». La balise HTML permet d’englober tout votre code. La balise « head » permet d’apporter des informations sur la page web comme son titre, la gestion des caractères spéciaux… La balise « body » permet d’affichez tout ce que l’on écrira dans son corps. « meta charset="utf-8" » permet d’indiquer l’encodage utiliser dans votre « index.html ».
Voilà nous sommes à la fin de ce tutoriel vous savez des à présent crée une page HTML, dans mon prochain tutoriel je vous expliquerez comment bien organiser son texte.
J’espère que se tutoriel vous auras aidé, sachez que celui-ci m’as pris beaucoup de temps, avant tout copier / coller de se tutoriel merci de me contactez en privée.
Cordialement iD3V.
