communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Fiche] Les principales balises du HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: [Fiche] Les principales balises du HTML   Jeu 09 Mai 2013, 23:23

Bonjour à tous!

Voici une petite fiche qui vous sera très utile si jamais vous décidez de vous plonger dans le HTML! Elle regroupe les principales balises que l'on utilise pour donner forme à son site internet, quel qu'il soit. Je trouve qu'il est très pratique de les avoir sous la main toutes ensemble, je me suis d'ailleurs fait un carnet qui les contient, c'est vraiment très utile! Bien sûr, cette liste n'est pas exhaustive, car il existe une multitude de balises! Je regrouperai seulement les plus utiles, celles sans qui plus rien n'est possible!




Dernière édition par Natsynchro le Ven 10 Mai 2013, 15:10, édité 4 fois
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 13:32

I. Structuration du code

1. Code minimal

Qu'est-ce que le doctype ?

C'est une information que l'on place en premier, et qui va indiquer au navigateur des information relatives à la version de code utilisé (nous sommes actuellement à la version 5). Concrètement, cela permet de savoir ce qui est autorisé en terme de langage et la validité des balises utilisées.

Il existe pour les sites une certification de validité. Selon le doctype un site va être valide ou pas en mesure du respect de ces règles.
Pour un exemple concret, selon le doctype utilisé, créer un lien qui s'ouvre dans une autre fenêtre va être considéré comme acceptable (transitionnal) ou une faute (strict).
De même, des balises vont être reconnues ou pas. Les balises présentées dans ce tutoriel sont liées au langage HTML5, donc le doctype que je vous indique est celui qui lui est spécifique.

Dans le cadre d'un codage en HTML5, nous utiliserons par exemple celui-ci:
Code:
<!DOCTYPE html>
Sachez donc qu'il existe un DOCTYPE pour chaque langage!

Je parlais donc de code minimal, le voici:
Code:

<!DOCTYPE html>
<html>
      <head>
      <meta charset="utf-8"/>
      <title>Titre de la page</title>
      </head>

<body>
...
</body>
</html>
~ Petite explication:
< html >...< /html >: on indique que la page va être codée en HTML, rien de bien sorcier! On n'oublie donc pas de refermer la balise à la toute fin du codage.
< head >...< /head >: il s'agit là d'une partie que l'on ne verra pas sur la page internet. On y retrouve des informations concernant le codage, le titre de la page, la page CSS associée, mais aussi l'icône que l'on trouve parfois à gauche de l'URL dans le navigateur, etc...
La balise meta (meta données) sert à transmettre des informations sur la page, qui ne seront pas affichées. Celle-ci sert à indiquer le type d'encodage de la page, c'est la seule balise meta indispensable.
< title>...< /title>: donne le titre de votre page!
Enfin, il y a la balise < body>, laquelle va contenir toutes les informations qui vont s'afficher sur votre page internet. C'est la partie qui sera la plus développée!

~ D'autres exemples de balises d'en-tête:

Code:

<link rel="stylesheet" href="..." />
Cette balise sert à lier une page de CSS à la page HTML. Elle est très importante, puisque c'est grâce à la page CSS que votre page internet prendra forme et donnera envie aux navigateurs de passer du temps sur votre site: elle est donc indispensable!

Code:
<link rel="icon" type="image/png" href="... .png" />
<link rel="shortcut icon" type="image/x-icon" href="... .ico" />
La balise ci-dessus sert à insérer ce que l'on appelle une favicon, la petite image à côté de l'URL.
A la place des trois petits points après "href", on indique le nom du document ou de l'image entre guillemets. On place généralement deux lignes de code: la première avec une image de type .ico et la seconde, de type .png au cas où la première aurait du mal à s'afficher.


2. Balises sectionnantes

Les balises sectionnantes sont très utiles pour structurer son texte à l'intérieur du body: cela permet de donner un véritable squelette au corps de la page!

Code:
<header>
Pour l'en-tête de la page.
Code:
<footer>
Pour le pied de page.
Code:
<nav>
Pour faire un menu par exemple, et y indiquer les principaux liens de navigation.
Code:
<section>
C'est une balise qui sert à regrouper du contenu qui a la même thématique
Code:
<aside>
On utilise cette balise pour mettre en ligne du contenu supplémentaire en relation avec le thème de la section (par exemple), on les retrouve en général sur le côté (d'où le nom!)
Code:
<article>
Enfin, cette balise représente une partie autonome de la page, le vif du sujet en quelque sorte!

Comme ça fait un peu beaucoup, voici un schéma qui regroupe tout cela!



Il existe aussi des balises génériques, des balises qui n'ont pas de sens réel.
Code:
Il s'agit des balises <span> et <div>
La première est utilisée pour les éléments linéaires, et la seconde pour des éléments de type bloc.
Ces balises sont surtout utiles pour le design de la page, elles servent à donner un nom à certains éléments que l'on souhaite personnaliser. Pour cela, on leur donne un attribut:
L'attribut id="..." sert à donner un nom unique sur toute la page à la balise.
L'attribut class="..." sert à donner un nom que l'on pourra reprendre plusieurs fois.

Ces balises servent donc aussi à structurer votre code, vous pouvez les utiliser dans n'importe quelle partie: footer, header, article, aside, etc... Ces balises sont, en fait, comme des sortes de boîtes dans lesquelles on range nos éléments. Sur le modèle des matriochka, les balises span et div sont les plus petites poupées.


Dernière édition par Natsynchro le Sam 02 Nov 2013, 18:17, édité 10 fois
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 13:52

II. Des balises en veux-tu, en voilà!

En HTML, il existe toutes sortes de balises à insérer dans son code. En voici une petite liste!
N'oubliez jamais de refermer vos balises!


1. Mise en forme de texte

Code:
<q>
Permet de faire une citation

Code:
<cite>
Citation du titre d'une oeuvre ou d'un événement

Code:
<sup>
Mettre le texte en exposant

Code:
<sub>
Mettre le texte en indice

Code:
<strong>
Mettre le texte en valeur forte (gras)

Il existe aussi des balises dites de liste, pour créer des listes.
Code:

<ul> pour une liste non numérotée
<ol> pour une liste numérotée
<li> est la balise à placer pour chaque élément de la liste
Tchoutchou vous a réalisé une très belle fiche ici en ce qui concerne les tableaux! Wink


2. Structure de texte

Code:
<p>
Pour faire des paragraphes

Code:
<h1> ou <h2> ou <h3> ou <h4> ...
Ce sont des balises que l'on utilise pour mettre des titres. h1 sera le plus gros titre, h2 en dessous etc... Il est possible de les personnaliser grâce au CSS.
Choisissez bien vos titres, car le texte inséré entre ces balises sera aux premières loges en ce qui concerne le référencement de votre site internet sur les moteurs de recherche.

Code:
<br />
Cette balise est spéciale aussi, car l'antislash se met à la fin et il n'y a qu'une partie. Mais vous l'utiliserez souvent: elle permet de faire des retours à la ligne!


3. Balises spéciales

Code:
<img src="..." alt="..." />
La balise pour insérer une image est spéciale, car elle n'est composée que d'une seule partie. L'attribut src permet d'indiquer le nom de l'image ou son URL, et l'attribut alt demande un texte alternatif, au cas où l'image ne s'afficherait pas, ou pour les malvoyants: mettez-y un texte bref, un mot clé qui décrit votre image.
On peut aussi y mettre l'attribut title="..." qui permet d'avoir une infobulle en laissant le curseur de la souris sur l'image.
Attention au format de votre image: on évite à tout prix les formats non compressés, tels que *.bmp, *.gif... Ces formats sont très lourds, donc la page mettra du temps à se charger. Préférez  un format .jpg pour de simples images! Le format en .png peut toutefois se substituer au .jpg, lorsque vous utilisez des images avec transparence.

Code:
<a href="...">Lien</a>
Cette balise permet de faire un lien vers une autre page! On renseigne l'attribut href en donnant le lien de cette page.


Dernière édition par Natsynchro le Sam 02 Nov 2013, 18:16, édité 4 fois
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 15:07

III. Les accents

Ah, ces accents... Ils sont partout en français! Parfois ils apparaissent correctement sur une page, d'autres fois pas du tout! Et là, horreur, on se demande bien que faire!
Pas de panique, il existe une solution: les accents possèdent leur propre code. Évidemment, ce n'est pas un plaisir de remplacer tous les accents par leur code, mais c'est nécessaire parfois! L'application est toute simple: remplacez la lettre accentuée par la suite de caractères correspondante!


Je vous renvoie ainsi au tutoriel de Maripiou, sur les accents de l'échange! Wink


Dernière édition par Natsynchro le Jeu 31 Oct 2013, 21:10, édité 2 fois
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 15:09

Voilà, cette fiche est terminée! Il y a bien sûr un très grand nombre de balises, on ne peut pas tout regrouper, mais on a fait le tour de ce qui me semble être le plus important! Amusez-vous bien avec vos lignes de codes! Wink


MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée

Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
As de l'acrylique
avatar
Sucréomiel
As de l'acrylique
Féminin Date d'inscription : 03/01/2010
Age : 23
Localisation : Imaginarium

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 16:34

Merci pour cette fiche Nats !
Je m'y pencherai sérieusement lorsque j'aurais un peu de temps libre. Néanmoins, j'ai survolé les différentes parties et ça m'a l'air fort instructif.
Revenir en haut Aller en bas
Admin
avatar
Delise
Admin
Féminin Date d'inscription : 05/04/2012
Age : 39
Localisation : Lyon

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 16:35

Merci pour la fiche ! Smile



   
Sign by Lady, merci ♥ ♥
Spoiler:
 
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 16:37

merci Sucrée!
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Ange gardien
avatar
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 36
Localisation : Mons (Belgique)

MessageSujet: Re: [Fiche] Les principales balises du HTML   Ven 10 Mai 2013, 22:16

Merci Nat ! Very Happy
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
Maître du Jeu
avatar
Goby03
Maître du Jeu
Masculin Date d'inscription : 21/08/2012
Age : 21
Localisation : quelque part en auvergne

MessageSujet: Re: [Fiche] Les principales balises du HTML   Sam 11 Mai 2013, 09:27

Merci beaucoup Nat ! Smile



Merci Maya pour ces superbes signatures !

Spoiler:
 
Revenir en haut Aller en bas
http://plaisirdessims.blogspot.fr/
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 30
Localisation : Plein Sud !

MessageSujet: Re: [Fiche] Les principales balises du HTML   Sam 11 Mai 2013, 10:45

Merci Nats, ça va bien m'aider !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Fiche] Les principales balises du HTML   Sam 11 Mai 2013, 11:30

de rien! cheers
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 31

MessageSujet: Re: [Fiche] Les principales balises du HTML   Sam 11 Mai 2013, 11:51

Merci Nats!


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: Re: [Fiche] Les principales balises du HTML   Mar 14 Mai 2013, 22:00

En tout cas super tuto c'est bein expliqué et accessible  sunny


Spoiler:
 


Dernière édition par Fuyaya le Sam 02 Nov 2013, 09:51, édité 1 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Illustre illustrateur
Ness
Illustre illustrateur
Féminin Date d'inscription : 26/12/2011
Age : 48

MessageSujet: Re: [Fiche] Les principales balises du HTML   Mer 15 Mai 2013, 21:03

Merci Nat pour cette fiche !
Revenir en haut Aller en bas
Timide du pinceau
avatar
randomcorey
Timide du pinceau
Masculin Date d'inscription : 18/03/2015
Age : 55
Localisation : pas loin de Mickey

MessageSujet: Re: [Fiche] Les principales balises du HTML   Lun 23 Mar 2015, 15:00

Merci Natsynchro !

c'est le deuxième tuto que je lis sur l'HTML. j'avais cru que ça faisait des dizaines d'années que l'HTML avait été abandonné. M'aurait-on enduit d'erreur à l'insu de mon plein gré ? Pour le coup, j'ai envie d'y retourner un peu "pour voir". Le problème est que sur notre site, une question en entraîne une autre et on est vite éparpillé. Je me recentre ! Merci encore Natsynchro !
Revenir en haut Aller en bas
Contenu sponsorisé


MessageSujet: Re: [Fiche] Les principales balises du HTML   

Revenir en haut Aller en bas
 
[Fiche] Les principales balises du HTML
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Fiche] judoBoy
» [Fiche] jeune-demon et radine
» [Fiche] Sombre-Panda
» Fiche d'accueil et de présentation
» [Fiche] Pierman

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: