YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

HTML iD3V - Les bases du HTML

Inscrit
22 Décembre 2013
Messages
2
J'aime
2
Points
16
Reply from iD3V.NET Forums généraux Informatique ⌨️ Programmation Programmation web : iD3V - Les bases du HTML #1
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 :
Vous devez vous inscrire pour voir les liens !


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 vous inscrire pour voir les liens !


Comme je suis très gentil je vous partage les balises les plus utile que vous pourrez consulter à l’adresse suivante :
Vous devez vous inscrire pour voir les liens !


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.
 

Rivals

Donateur
Premium
Inscrit
27 Août 2016
Messages
447
J'aime
421
Points
1 696
Reply from Rivals Forums généraux Informatique ⌨️ Programmation Programmation web : iD3V - Les bases du HTML #2
Pas mal ce tutoriel , mais je me permet de dire que les balises <b> ne sont pas faites pour écrire du texte en gras normalement même si c'est ce qu'elles font.
 

B3K

Super-modérateur
Super-modérateur
Inscrit
25 Novembre 2011
Messages
9 986
J'aime
3 567
Points
12 845
Reply from B3K Forums généraux Informatique ⌨️ Programmation Programmation web : iD3V - Les bases du HTML #3
Merci,
Indique la source qui est :
Vous devez vous inscrire pour voir les liens !


Je rajoute par la même occasion quelque balise et leur fonction :

  • <title> : C'est le titre de votre page.
  • <p> </p> : pour organiser son texte en paragraphes.
  • <br /> : pour aller à la ligne.
  • <head> : L'en-tête
  • <body> : Corps
  • <meta charset="utf-8" /> : Cette balise indique l'encodage utilisé dans votre fichier .html.
  • <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
  • <h2> </h2> : signifie « titre important ».
  • <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez).
  • <h4> </h4> : titre encore moins important.
  • <h5> </h5> : titre pas important.
  • <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
  • <em> </em> : Mette une partie du texte en valeur.
  • <strong> : Texte important (gras).
  • <mark> : Permet de faire ressortir visuellement une portion de texte.
  • <ul></ul> : délimite toute la liste.
  • <li></li> : délimite un élément de la liste (une puce).
  • <a href="lien"></a> : Donne un lien avec un texe.
  • target="_blank" : Lien dan une nouvelle fenetre.
  • title="Texte" : Ajout un texte lors du survole.
  • gref="mailto:[email protected]" : Envoyé un Mail.
  • href="monfichier.zip : Lien pour telecharger un fichié.
  • <img src="images/montagne.jpg" alt="Photo de montagne" /> : Pour affiché une image.

  • __________________________________________________________________________
  • CSS
  • __________________________________________________________________________

  • <link rel="stylesheet" href="style.css" /> : Definie la positiion du fichier CSS.
  • <style></style> : Balise dans lequel on met le css.
  • <p style="color: blue;"> : Ajout de CSS directement dans les balise.
  • /* Commentaire */ : Permet de créer des commentaires CSS.
  • <p class="introduction"> .introduction { color: blue; } : Les balise CSS.
  • <span class="salutations"> : Balise class en CSS/HTML.
  • * { } : sélecteur universel (Selectionne tout less balise).
  • .image { float: left; } : Mettre sur les coté.
 
Inscrit
28 Août 2012
Messages
17
J'aime
2
Points
546
Reply from Skof Forums généraux Informatique ⌨️ Programmation Programmation web : iD3V - Les bases du HTML #4
Copié collé du siteduzero ?
 

MSLift

Membre Premium
Premium
Inscrit
5 Août 2013
Messages
770
J'aime
291
Points
4 236
Reply from MSLift Forums généraux Informatique ⌨️ Programmation Programmation web : iD3V - Les bases du HTML #5
Je pense que parler des bases HTML est inutile, vaut mieux suivre le cours sur Site du zero Open Classroom.

Parle plutot des animations en CSS (transform), c'est peu connu et tellement utile !
 


Haut