Astuces ,Infos et logiciels

septembre 17, 2016

1)Qu’est ce que c’est?

HTML, HyperText Markup Language, qu’on traduit en français par “langage de balises hypertextes”, est un langage qui va te servir a créé ton propre site web qui, interprété par ton navigateur, va décrire le contenu et la mise en forme de tes pages.
Outre la mise en forme de texte , le langage HTML, permet aussi l’insertion d’images, de sons, d’animations et de scripts de différents langages (Javascript,PHP,Java,ActiveX,…)
Introduit par le C.E.R.N (Centre Européen de la Recherche Nucléaire),
Le HTML existe depuis 1990, car le centre avait besoin d’un système simple et performant pour diffuser ses informations sur différents types de terminaux informatiques.

2) Les bases

Le language html, contient certaines balises qui sont indispensables dans une page.
(les balises ??!!?? Ne vous inquiétez pas, je vous explique)

Une balise, est un code, une valeur, qui sert à faire ton site web. Pour le HTML elle commence toujours par un < et se termine par un > .
Par exemple :
Un site HTML, commence toujours par la balise :

<html>

Donc, lorsque tu veux faire ta page, tu dois commencer par mettre cette balise, car, tout ce qui à avant cette balise, ne compte pas !

Et évidemment, se termine par :

</html>

-Héhé, et une chose d’apprise !-^^

Il existe, 2 autres balises, qui servent à votre mise en page.
Celles-ci sont :
<head>
</head>

et

<body>
</body>

La balise <head>, qui signifie en-tête en anglais, te sert justement à faire l’en tête de ta page.

La balise <body>, elle, te sert à indiquer que le contenu de ta page commence.

Ces 2 balises, ne sont pas obligatoires, mais elles sont fortement conseillées !
Notamment pour la clarté de votre page, si vous devez la montrer à votre copains, ou encore à celui qui fait le projet avec vous.

Conclusion :

Votre page, se présentera comme ceci :

<html>

<head>
</head>

<body>
</body>

</html>

Voila, tu sais maintenant faire une page web !^^
Il te suffit d’insérer du texte entre chaque balise et le tour est joué !

Mais bon…moi qui voulait te montrer comment faire une super page, c’est pas gagné avec ça…

3) Tout pour le texte

Maintenant que tu connais les grandes lignes du HTML (très grandes), je vais t’apprendre à décorer et colorier ton texte.
Lorsque tu veux écrire un long texte, tu dois utiliser certaines balises de mises en forme qui sont celles-ci :

<p></p> --- balise servant à faire des paragraphes.

Par exemple :

<html>
<head>Mon site</head>
<body>
<p>unvb oejnm qm ms kkj dju encjncnsjdbnc
idnc zib havhsxv eruthdb cznc pazojc,
aryebx mlovjeirv êpfef,,v</p>
<p>unvb oejnm qm ms kkj dju encjncnsjdbnc
idnc zib havhsxv eruthdb cznc pazojc,
aryebx mlovjeirv êpfef,,v </p>
<p>unvb oejnm qm ms kkj dju encjncnsjdbnc
idnc zib havhsxv eruthdb cznc pazojc,
aryebx mlovjeirv êpfef,,v </p></body>

Le texte ne veut évidemment rien dire ^^ !

Comment mettre de la couleur dans mon texte ?

Mais voyons, c’est très facile ! Il te suffit d’enrober un mot, ou une phrase ou même un texte avec la balise :
<font color=“red“> Voila, maintenant cette phrase sera en couleur !
</font>

Tu peux attribuer cete balise partout ou tu trouves des lettres (enfin presque) !

Comme tu l’as peut-être remarqué, le HTML, est en grande partie composée de mots anglais.

Quel sont les différents noms de couleurs ?

Tu peux indiquer des couleurs de différentes manières en voici 2 :

En écrivant le nom de la couleur en anglais

Par exemple :

White
Silver
Black
Red
Maroon
Lime
Green
Yellow
…

Ou bien, en écrivant un code qui est unique à chaque couleur:

Blanc = FF#00000
Rouge= FF#25500
Bleu= FF#00255
…

Petit truc= :

Pour connaître le code des différentes couleurs, allez dans Paint
Demarrer—tout les programmes—accessoires—Paint

Une fois dessus, cliques sur « couleur », en haut.
Puis, « modifier les couleurs »
Ensuite sur, définir une couleur…
Et là, cliques sur la couleur que tu veux, et en bas à droite, il sera écrit :
Rouge
Vert
Bleu

Avec un numéro à côté, tu copie ce numéro en ajoutant devant : FF#...

Comment aligner une phrase à droite si j’ai envie ?

HA Haa !
Tu ne le sais pas ? (bête question je sais^^)

Pour aligner une phrase au centre, il te suffit de placer cette balise devant celle-ci, et à la fin aussi :

<p align=“right “>Voici ma phrase</p align=“right“>

Ta phrase sera donc à droite ! ^^

Et si je veux la mettre au centre de ma page ?

Héhé, tu pourrais le devine…

Il faut tout simplement mettre à la place de “right“, “center“ .

Comment changer le type d’écriture et mettre des lettres en bold (gras) ou en underline (souligner) ?

Tu en as vraiment marre du caractère Arial ?ouiiii
Bon, bon…je vais t’expliquer :

Pour changer le type d’écriture :

<font face=“type d’écriture“> Ma phrase </font face>=“type d’écriture“>

Exemple :

<font face=“Comic sans ms“> Ma phrase aura comme type de caractère, celle du comic sans ms !</font face=“Comic sans ms“>

Note technique :

Imagine toi, qu’un visiteur, visitant ton site, ne possède pas le caractère comic sans ms sur son PC. Que faire pour qu’il ne lise pas le texte en ce bon vieux et banal Arial ?

Tout simplement, lorsque tu choisis de mettre une phrase en un type particulier de caractère, mets en plusieurs l’un à la suite de l’autre, pour que si jamais ce visiteur n’a pas le Comic sans ms,qu’il puisse le lire en Century par exemple.

<font face=“Comic sans ms,century“>Ma phrase !
</font face=“Comic sans ms,century“>

Tu peux en mettre encore d’autres à la suite si tu le désire .

J’ai l’impression d’avoir oublié quelque chose…
Ah oui !

Pour mettre des lettres ou du texte en gras ou en italique ou même en souligner,
Les balises sont :

<b>---</b> = gras
<i>---</i> = italique
<u>---</u>= souligner
et,
<s>---</s> ou <strike>---</strike> = barrer

Oui, c’est cool, mais il me faut un titre avec mon texte comment je fais?

Bonne question ! +1 ^^

Lorsque tu veux mettre un titre dans ton contenu (body) ou encore dans ton en-tête (head), tu dois insérer ces balises :

<h1>--Mon titre--</h1> = TRES GRAND TITRE
<h2>--Mon titre--</h2>= GRAND TITRE
<h3>--Mon titre--</h3> = Titre moyen
<h4>--Mon titre--</h4>= Titre encore plus petit
<h5>--Mon titre--</h5>= Titre à la limite du minuscule
<h6>--Mon titre--</h6>= Titre minuscule (c’est plus vraiment un titre)

Voilà, maintenant tu connais tout ou presque tout pour bien gérer ton texte !
Fastoche non ?^^

4) Tout pour la déco de ma page

Te voilà enfin à un stade ou on commence à s’amuser avec le langage.
Dans ce chapitre, je vais t’apprendre à insérer des images, des sons,des videos,etc…

Comment insérer une image dans ma page ?

Hé Ho, attend un peu, chaque chose à la fois.
Je vais commencer par t’expliquer les différents formats que peuvent lire les navigateurs.

En faite, il y en a 2 :

Le GIF : Les fichiers GIF possèdent l’extension .gif. Ils servent particulièrement à compacter des images dont le nombre de couleurs est peu élevé (256 maximum acceptées par le format).
Ce format présent aussi l’avantage de la création de Gif animés.

Le JPG : Ce format dont les extensions sont .jpg et .jpe est très utilisé pour les photos. En effet il est très économe en place pour des images dont le nombre de couleurs est élevé. Cependant à l’opposé du GIF, il compresse l’image et donc altère en partie sa qualité.

Voila les 2 formats d’image les plus utilisés. Moins courant mais utilisé aussi, le format PNG.

Comment insérer une image ?

Rooo petit impatient ! ^^
Bon, la balise pour insérer une image est : <img> (facile)
Mais à l’intérieur de cette balise, il y a beaucoup d’attribut possible :

• SRC : adresse de l’image
• BORDER : permet de spécifier la taille de la bordure en pixels . Très utile si on ne veut pas avoir de bordure (mettre BORDER=0). En effet si une image sert de lien, elle est par défaut entourée d’une bordure de 3 pixels pas toujours très esthétique.
• WIDTH : permet d’imposer et de spécifier la largeur de l’image (en pixels). Par défaut l’explorateur utilise la taille réelle de l’image.
• HEIGHT : même chose que WIDTH mais pour la hauteur.
• ALIGN : un attribut très utile. En effet, il permet de coller l’image contre un des bords de la page et laisse alors le texte s’écouler autour de celle-ci. Si on n’utilise pas ALIGN, le texte mis après l’image commencera à la ligne au-dessous de l’image. Pour aligner à gauche: ALIGN=left ; à droite: ALIGN=right
• ALT : Permet de mettre un commentaire sur l’image. Ce commentaire apparaît derrière le pointeur de la souris lorsqu’il passe sur l’image. Ne pas oublier de mettre le texte entre guillemets.

Exemple :

<img src= chemin de l'image/nom de l’image.gif ou jpg border=“0“ width=“100“ height=“250“ alt=“exemple d’insertion d’image“>

Comment insérer un son à ma page ?

Alors, je vais te répondre qu’il y a plusieurs façon de le faire, suivant l’extension du fichier.

Je vais te montrer ici comment intégrer un son WAV,MIDI, MP3

WAV-MIDI

L’intégration d’un fichier wav ou midi, peut s’effectuer de différente façon grâce à différentes balises.
Ces balises sont :
<bgsound> et <embed>

Attention : La balise <bgsound> fonctionne seulement avec le navigateur IE.

a) La balise <bgsound>
Cette balise permet d’intégrer un arrière-plan sonore et possède plusieurs attributs :
-src : Spécifie l’URL complète (chemin) du fichier à charger
-loop : Spécifie le nombre de fois où le fichier sera joué (si la valeur est -1 le fichier sera joué indéfiniment)

b) La balise <embed>
La balise permet d’inclure n’importe quel son. Elle fait appel, dans certains cas, à un module externe (plugin).

Voici les attributs de la balise <embed> :
- align : aligne la console ou le texte (4 valeurs possibles,
right, left, top, bottom).
- border : Largeur de la bordure du cadre (en pixels)
- width : Largeur de la fenêtre qui accueillera la console
- height : Hauteur de la fenêtre qui accueillera la console
- pluginspace : URL de la page Web contenant les informations sur le plug-in
- src : URL complète (chemin) du fichier
- autostart : Spécifie si l’objet multimédia est joué automatiquement (true) ou non (false) (défaut : true)
- autoload : Spécifie si le chargement de l’objet multimédia s’effectue automatiquement (true) ou non (false) (défaut : true)
- loop : Spécifie le nombre de fois où le fichier sera joué (si la valeur est –1 le fichier sera joué indéfiniment)
- type : Indique le type MIME ex : type= »audio/mod » (facultatif)
- controls * : Indique l’aspect de la console de contrôle
- console : Affiche toute la console (choix par défaut)
- smallconsole : Affiche une console réduite
- playbutton : Affiche seulement le bouton lecture
- stopbutton : Affiche seulement le bouton stop
- pausebutton : Affiche seulement le bouton pause
- volumelever : Affiche seulement le bouton volume
- hidden : Cache le panneau de contrôle
- volume * : Volume initial en pourcentage
- startime * : Indique le temps de départ par rapport au début du fichier (sous forme mm :ss)
- endtime * : Indique le temps de fin par rapport au début du fichier (sous forme mm :ss)

Ouffff fini…Il y a beaucoup d’attributs tu trouves pas ?
A oui, tu veux un petit exemple ?
Voilà :

Exemple : <embed src=”divers/funky2.mid” width=145 height=45 autostart=”false”>

Comment intégrer du son au format mp3 ?

Simplement, tu fais la même chose que les autres formats sauf que la taille de ton fichier ne doit pas dépasser 40 à 60 ko, sinon propose un téléchargement.Si tu veux encoder un fichier mp3, tu dois encoder(logique).

Tu peux aussi utiliser un module supplémentaire bien pratique comme dewplayer (lecteur flash gratuit, à installer sur le serveur de ton site, et composé d'une commande assez simple : en attendant la fin de ce tutoriel, tu peux toujours en savoir plus en tapant "DewPlayer" dans google...).

Voilà une petite liste de lien, d’utilitaire permettant de travailler les fichiers mp3 :

- Le site officiel du MP3
- Le site officiel du MPEG
- Le player Winamp (Windows)
- Le player Macamp (Mac)
- AudioActive : un lecteur-encoder MP3
- Audacity (a priori le meilleur logiciel disponible actuellement, gratuit et simple d'utilisation, il permet de travailler les sons, encode en MP3... etc...)

Voilà, maintenant je suis sûr qu’avec toutes ces infos, tu maitrîses parfaitement l’intégration des sons !

Comment insérer une video à ma page ?

Exactement de la même façon que les sons, avec la balise <embed> et ses attruibuts et comme extension, à la place de MID ou WAV : AVI

5) Les hypertextes

Les hypertextes c’est quoi ça encore ?

Les hypertextes, permettent de relier une page à une autre.
Il y a 2 types d’hypertextes (hyperliens en français) :

-Les Hypertextes internes
-Les Hypertextes externes

Je vais commencer par t’expliquer les internes.

Qu’est ce qu’un hyperlien interne ?

Un hyperlien interne permet de se déplacer dans un fichier HTML (ton site).
Donc, quand le visiteur cliquera sur un lien d’une page, il sera amené vers une autre page de ton site.
La balise pour faire des hyperliens est : <a href=“…“>… </a>

Entre les guillemets, doit se trouver le nom de la page vers laquelle l’hyperlien mènera.
Par exemple :

<a href=“accueil.htm “>Cliquez ici pour retourner à la page d’accueil</a>

Qu’est ce qu’un hyperlien externe ?

Un hyperlien externe fonctionne toujours avec la balise <a> mais par contre, suivant le protocole, la syntaxe varie.

a ) Lien externe vers un site http
Exemple : <a href="http://www.allhtml.com">Découvrez ALL HTML</a>

b ) Lien externe vers un serveur FTP
Exemple : <a href="ftp://ftp.allhtml.com">FTP ALL HTML</a>

c ) Lien externe vers un serveur de news (Attention pour que ce lien soit valide il faut que le visiteur soit abonné à ce serveur de news)
Exemple : <a href="news:news.site">Serveur de news</a>

d) Lien vers adresse e-mail
Exemple : <a href="mailto :adresse@adresse.com ">

Note : Avec un lien externe vous pouvez également proposer un fichier (.exe ou .zip) en téléchargement
Exemple : <a href="util.exe">Cliquez ici pour télécharger le fichier</a>

Voici les différents attributs que peux prendre la balise <a> :

- href : Permet d'indiquer la source du document (relative ou absolue)
- target : Permet de définir la source d'un cadre comme document (dans la cas d'une frame)
- style : Permet de spécifier une feuille de style
- title : Permet de spécifier une description du lien (identique à l'attribut ALT pour une image et uniquement avec Internet Explorer)

Les liens, sont évidemment très important. Sauf si votre site ne contient qu’une seule page…

Rechercher dans ce blog

Astuces ,Infos et logiciels

Windows 10 Digital Activation

[ Tuto ] sur HTML

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Comment utiliser un smartphone Android sans compte Google ?

NEW ! KYNG Advanced Channel Editor v5.02.1

KYNG KACE HD v5.01 FINAL RELEASE 2