fév
8
2016

Apprendre les bases en HTML

Bonjour à tous et  à toutes et bienvenue dans mon tutoriel consacré à l’apprentissage des bases des langages HTML5 .l’HTML ou Hyper Text Markup Language est le langage qui permet de faire la structure de votre page. Autrement dit  si l’on compare une page web a un corps humain,  L’HTML serait le squelette le CSS serait la peau et le javascript serait les muscles.

SOMMAIRE

 

I/ Introduction au web

A) Deux langages pour créer un site web 

         B) Se munir des bons outils

 

II/ les bases de HTML 5

        

A)  Vos premiers pas

B)   Les balises.

C)   Listes de Balises les plus utilisés avec leurs attributs

 

I/ Introduction au web 

A)  Deux langages pour créer un site web 

 

Bonjour à tous et  à toutes et bienvenu dans mon tutoriel consacré à l’apprentissage des bases des langages HTML5 .l’HTML ou hyper text markup langage est le langage qui permet de faire la structure de votre page autrement dis  si l’on compare une page web a un corp humain. L’HTML serai le squelette le CSS serait la peau et le javascript serait les muscles.

 

 

B)   Se munir des bons outils

 

Pour développer il vous faut un endroit ou taper votre code n’aller pas chercher bien loin vous pouvez facilement écrire votre code HTML dans un block note. En modifiant l’extension de celui-ci:1

Changez le .txt en .html et quand vous ouvrirai le fichier celui-ci s’ouvrira dans votre navigateur.

 

Mais pour plus de clarté quand vous codé je vous conseille de prendre un outil de développement plus coloré que votre block note

Je vous conseille de choisir entre Sublimetext 3 notepad ++ ou atom

https://notepad-plus-plus.org/fr/

http://www.sublimetext.com/3

https://atom.io/

 

 

 

II/ les bases de HTML 5

        

A)  Vos premiers pas

Une fois que vous avez réussi  transformer votre fichier texte en fichier html (.html) vous devriez voir ceci apparaitre sur votre écran2

 

Si vous cliquez dessus vous arrivez certainement sur une page vide car pour le moment le fichier est vide. Je vous invite donc à ouvrir le fichier dans votre environnement de développement.

Nous allons voir la structure de base d’une page HTML.

3

Je vous invite à copier-coller ceci dans votre environnement de développement et à enregistrer.

Voici donc la structure de base d’une page html

J’ai copier-coller ca mais rien ne s’affiche c’est normal ?

Oui c’est tout a fait normal. Commençons par analyser ce bout de code

la première ligne  4

Celle-ci sert a invoquer a votre navigateur quel langage vous aller utiliser elle est donc indispensable

La ligne suivante est la balise ouvrante du code html 5

Celle-ci se ferme a la ligne 11 par </html>  6

C’est entre ces deux balises que vous allez placer votre code html

 

<head> et <body>   une page web se forme de deux parties

Tout d’abord le head cette section donne des informations générale sur la page dans cette section vous trouverez l’encodage les liens vers les feuilles de style (page css ) ainsi que le titre même si ces information n’apparaisse pas directement sur votre page ces informations son très utile pour votre ordinateur elles sont donc indispensable

Vous trouverez les balises suivantes dans le head 7

Sans rentrer dans les détails cette balise indiques comment votre page est enregistré sous quel format. Si vous oublier cette balise votre page vous transformera vous remplacera certaine choses comme vos accent des tirets par d’autre chose qui rendront votre site ou page illisible. Donc cette balise est impérative.8

 

Cette balise donne le titre de votre page plus précisément de votre onglet ainsi notre onglet s appel désormais hello 9

La balise link permet de faire un lien vers les différentes pages généralement la balise permet d’indiquer à notre page ou aller chercher le code CSS  ici mon css  se trouve dans le même dossier et s’appelle index.css

Petit bonus :10

Ce petit morceau de code vous permettra de rajouter une image devant votre nom d’onglet

Comme ça par exemple: 11

 

Parlons maintenant de la balise <body> </body>  c est entre ces deux balises que vous allez placer votre code html et que vous allez pouvoir structurer votre code

A)  Les balises.

A ENFIN ! Ça fait 30 lignes qu’il nous parle de ces balises mais  on ne sait toujours pas ce que
c’est exactement.

Définition :

Une balise : les balises c’est ce qui remplit vos pages HTML elles sont invisibles a l’œil nu quand vous regarder votre page mais permette au développeur de faire voir à l’utilisateur ce qu’il veut qu’il voit. Autrement dit : les balises permettent à l’ordinateur de comprendre ce qu’il doit afficher.

Comment les reconnaitre : les balises sont entourées de ce symbole <  et de celui-ci >

Donc <head> <html> <body> <link>  sont des balises ?

C’est ça ! On peut distinguer deux sortent de balises

Les balises dites pairs  qui s’ouvrent et qui se ferment comme <head> qui se ferme avec </head>   a l’intérieur on pourra trouver du texte des images ou du code.

 

Et les balises dites orpheline  elles servent le plus souvent à insérer un élément dans la page comme une image il n’est pas nécessaire d’indiquer le début et la fin d’une image

On dit donc à l’ordinateur insérer une image ici.

Exemple de balise orpheline <img src= « coucou.jpg » />
<link  />

Comme vous pourrez le constater a default de fermer une balise avec son opposé < /body> les balises orpheline se ferment avec />

Les attributs :

On peut comparer les attributs a des options les attributs viennent compléter les informations sur les balises en donnant par  exemple un nom une classe un type

C) Liste des Balises les plus utilisées avec leurs attributs

12Comme dit plus haut cette balise indique le début et la fin du code html à l’intérieur de cette balise vous pourrez entrer tout votre code

13

cette balise est une balise de déclaration et d’insertion. Elle sert à donner à l’ordinateur les chemins qui  pour les différentes règles :

Ou aller chercher le css
Où aller chercher le java
L’encodage.

 

La balise link14 permet d’indiquer ou aller chercher des fichiers externes comme ici les règles en css
l’attribut rel donne la nature du lien  et href donne le chemin pour aller chercher le fichier

Pour plus d’attributs https://developer.mozilla.org/fr/docs/Web/HTML/Element/link rendez-vous ici

15Cette balise indique l’encodage du la page.

16Balise qui contient tout le code html

17 Cette balise se trouve dans la balise <body >, elle permet de structurer votre page et ainsi donner des règles a certain éléments dans la page

http://www.aliasdmc.fr/balise/zone_html_div.html ses attributs

Prenons un exemple

18

Ici j’ai donné à mes div des Nom grâce à l’attribut id je pourrai par la suite les appeler en css et leur donner des règles
je pourrais par exemple dire que je veux que le block principal ai un fond noir et une couleur de police noir
mais par-dessus je souhaite avoir le block de droite avec un fond d’écran rose et une couleur de police blanche

Les principaux attributs que l’on peut trouver sur une div sont id et class

Id est pour donner un Nom a usage unique a un élément (aucun autre élément ne peux s appeler comme ça)

Class= « » pour donne a plusieurs éléments les même règles css

19les balises h(1,2,3,4, etc ) sont les titres de votre page elle permette de mettre certaine partie en plus grand et en valeur.
20Anciennement utilisé par les développer dans les sites codés en dure cette balise permettait de contenir des paragraphes de texte.

21

Voici comment créer des listes.  Les balises li définiront le début et la fin de  votre liste les balises ul définiront les éléments de votre liste

22Généralement utilisé dans la balise p la balise br permet de passer à la ligne.

23

Les tableaux : s’ouvre par la balise <table> et se ferment par la balises </tables>

Les lignes sont représentées entre les balises <tr> et </tr>

Et les cases sont représentées  par les balises <td> et </td> (sauf pour les noms de colonnes qui sont en gras et délimité par <th> et </th>

24

Voici à quoi ressemblerait notre tableau avec les css suivant:

25

 

La balise image 26s’ouvre se déclare de la manière suivante

Son type et l’endroit où aller chercher l img (le chemin)

27

Les commentaires : tout d’abord à quoi ça sert : et bien c’est très utile quand vous êtes beaucoup à travailler sur un projet pour faire comprendre à l’autre ce qui se passe dans votre code ou même pour vous quand vous reprenez un code

Donc il s’entoure de < !—et de – ->

Les formulaires

28

Voici comment se compose un formulaire et voici à quoi ça ressemble

29

Dans votre page…

La première balise la balise <form> est là pour indiquer à votre ordinateur que l’on commence un formulaire

Cette balise comporte 3 attributs :

Action : la page qui va récupérer et se servir des données du formulaire

Method : qui indique comment on envoie les données

Sans m’attarder dessus il existe 2 méthode la méthode post et la méthode get
la méthode get récupère les données via a l URL
et la méthode Post qui transfère ces données en paquets. Sans passé par l url.

Entre chaque balise p se trouve un champ de votre formulaire

Le premier est un champ qui demande à l’utilisateur de saisir son nom

Et le deuxième demande à l’utilisateur via a un menu déroulant son  pays

 

 

Les commentaires ne sont plus accessibles.