HTML : LES BASES 2

  • Initiateur de la discussion LeSorcier
  • Date de début
  • Initiateur de la discussion
LeSorcier

LeSorcier

Nouveau né
Messages
24
Score réaction
8
Points
20
Bonjour, Bonsoir
Hey, nous nous retrouvons aujourd'hui pour la partie 2 de ma séries de tutoriel sur l'html.
Aujourd'hui nous allons apprendre à :


ⒽⓉⓂⓁ : ⓁⒺⓈ ⒷⒶⓈⒺⓈ™

╔════════════════════════════════════════╗
- Mettre une couleur en arrière plan (bases 2)
- Insérer des images sur notre site (bases 2)
- Faire un bouton(bases 3)
- Faire un lien de redirection après un certain temps(bases 3)
- Gérer son site, trie de son code (bases 3)

╚════════════════════════════════════════╝

I : Mettre une couleur en arrière plan

Si vous être entrain de lire cette partie de la rubrique c'est que vous voulez posséder un background sur votre site, et aujourd'hui je vais vous apprendre à le faire.

Mettre une couleur en fond :

Tout d'abord, rendez-vous sur ce site https://html-color-codes.info/ puis cliquer sur la couleur intéresser et récupérer le code générer :



Une fois le code récupérer, dans mon cas
Code:
#FF0040
vous allez ouvrir une nouvelle balise du nom de style et vous allez ajouter vôtre code couleur à l'endroit ou est situé le "#FFFFFF"
Code:
<style>
body { background-color: #FFFFFF;
}
</style>
Et magie, une fois notre code insérer comme ceci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title> MTX LE PLU BEAU </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" title="Essai" href="Index.css"/>
<style>
body { background-color: #FF0040;
}
</style> </head> <body>
CC MTX
<br />
VOUS ALLEZ BIEN ? é </body>
</html>
Vous obtiendrez normalement cela :




II : Insérer des images sur notre site

Pour mettre une image sur votre site web, c'est très simple. Il suffit de créer un dossier et y glisser votre fichier.html (Il est important que votre fichier soit renommé index car sinon lors de la mise en ligne du site, sa sera la page index.html qui sera ouverte.

Créer le dossier :



Glisser votre site.html et vos images (le nom de l'image est très importante) :



Une fois ceci effectué, aller dans votre code et rajouter ceci :
Code:
 <img src="lenomdelimage.png" />
Et si vous faites bien tout ceci, sa devrais faire un rendus comme ça :



Merci d'avoir suivis le tutoriel et nous nous retrouverons prochainement pour la dernière partie du tutoriel en html consacré aux bases.

LA BISES
 
᠌ ᠌ ᠌ ᠌ ᠌ ᠌᠌ ᠌ ᠌ ᠌

᠌ ᠌ ᠌ ᠌ ᠌ ᠌᠌ ᠌ ᠌ ᠌

Psychopathe
Messages
742
Score réaction
808
Points
265
LeSorcier à dit:
Bonjour, Bonsoir
Hey, nous nous retrouvons aujourd'hui pour la partie 2 de ma séries de tutoriel sur l'html.
Aujourd'hui nous allons apprendre à :


ⒽⓉⓂⓁ : ⓁⒺⓈ ⒷⒶⓈⒺⓈ™

╔════════════════════════════════════════╗
- Mettre une couleur en arrière plan (bases 2)
- Insérer des images sur notre site (bases 2)
- Faire un bouton(bases 3)
- Faire un lien de redirection après un certain temps(bases 3)
- Gérer son site, trie de son code (bases 3)

╚════════════════════════════════════════╝

I : Mettre une couleur en arrière plan

Si vous être entrain de lire cette partie de la rubrique c'est que vous voulez posséder un background sur votre site, et aujourd'hui je vais vous apprendre à le faire.

Mettre une couleur en fond :

Tout d'abord, rendez-vous sur ce site https://html-color-codes.info/ puis cliquer sur la couleur intéresser et récupérer le code générer :



Une fois le code récupérer, dans mon cas
Code:
#FF0040
vous allez ouvrir une nouvelle balise du nom de style et vous allez ajouter vôtre code couleur à l'endroit ou est situé le "#FFFFFF"
Code:
<style>
body { background-color: #FFFFFF;
}
</style>
Et magie, une fois notre code insérer comme ceci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title> MTX LE PLU BEAU </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" title="Essai" href="Index.css"/>
<style>
body { background-color: #FF0040;
}
</style> </head> <body>
CC MTX
<br />
VOUS ALLEZ BIEN ? é </body>
</html>
Vous obtiendrez normalement cela :




II : Insérer des images sur notre site

Pour mettre une image sur votre site web, c'est très simple. Il suffit de créer un dossier et y glisser votre fichier.html (Il est important que votre fichier soit renommé index car sinon lors de la mise en ligne du site, sa sera la page index.html qui sera ouverte.

Créer le dossier :



Glisser votre site.html et vos images (le nom de l'image est très importante) :



Une fois ceci effectué, aller dans votre code et rajouter ceci :
Code:
 <img src="lenomdelimage.png" />
Et si vous faites bien tout ceci, sa devrais faire un rendus comme ça :



Merci d'avoir suivis le tutoriel et nous nous retrouverons prochainement pour la dernière partie du tutoriel en html consacré aux bases.

LA BISES
S'il te plaît avant de faire des tuto apprends le language que tu présente pour donner de bonne base au gens. Genre un code lisible ?
 
  • J'aime
Réactions: Lap3che, Taink et Membre supprimé 72008
Taink

Taink

El Magnifico
Messages
5 292
Score réaction
2 720
Points
965
LeSorcier à dit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Tin du xhtml, sérieusement.
On est sur html 5 là hein.
 
  • J'aime
Réactions: stephXX62
  • Administration
Numerix

Numerix

Admin
Membre du Staff
Messages
1 913
Score réaction
356
Points
315
Un petit conseil pour tout ce qui est du <style> il est préférable de mettre tout cela dans un fichier ".css"
 
Specimen

Specimen

Geek
Messages
147
Score réaction
54
Points
70
Gros, rend ton code plus lisible et après tu pourras faire un Tuto.
Ton code est incompréhensible, tu fous une balise style dans le .html au lieu du CSS...
 
Reijin

Reijin

Psychopathe
Messages
1 739
Score réaction
401
Points
290
Pour ceux qui veulent du vrai petit tuto pour apprendre l'HTML et CSS il y a https://www.codecademy.com/fr qui propose des tutos et des exercices (il y a d'autre langue comme Python même si l'HTML n'est pas un vrai language) ensuite il faut apprendre le responsive (tout ce positionne selon la taille et la résolution de l'écran) vous avez sa https://getbootstrap.com/ tout est expliquer il suffit de savoir parler un minimum anglais. Après vous pouvez allé plus loin avec le PHP et javascript vous avez toujours open classroom et code https://www.codecademy.com/fr
 
ZarosOVH

ZarosOVH

Modérateur
Membre du Staff
Messages
6 527
Score réaction
5 488
Points
1 295
Reijin à dit:
Pour ceux qui veulent du vrai petit tuto pour apprendre l'HTML et CSS il y a https://www.codecademy.com/fr qui propose des tutos et des exercices (il y a d'autre langue comme Python même si l'HTML n'est pas un vrai language) ensuite il faut apprendre le responsive (tout ce positionne selon la taille et la résolution de l'écran) vous avez sa https://getbootstrap.com/ tout est expliquer il suffit de savoir parler un minimum anglais. Après vous pouvez allé plus loin avec le PHP et javascript vous avez toujours open classroom et code https://www.codecademy.com/fr
Fallait pas up un truc mort né :(
 
  • J'aime
Réactions: Lap3che
Reijin

Reijin

Psychopathe
Messages
1 739
Score réaction
401
Points
290
Zaros_Live à dit:
Fallait pas up un truc mort né :(
Au contraire, c'est bien beau de critiquer le poste mais ceux qui ne savent pas il faut les rediriger. (Après je suis peut-être à la ramasse xD)
 
  • J'aime
Réactions: Lap3che
Discord d'entraide
Rejoignz-nous sur Discord