Vous êtes ici : Puissance Sayen >> Services >> Bases du html
Puissance Sayen [Services - Bases du html]
Le Html, Hypertext Markup Language, un language parmis d'autres mais l'un des plus connus et des plus importants dans la créations de sites web.
Il faut savoir que le html fut crée par les européens, ce qui nous change des américains. Le html est, pour un programmeur, un language de base qui permet de donner un rendu au site. Ce language permet, en d'autres termes, la structure d'un site web. C'est pour cela que n'importe quel programmeur vous dira que, pour être programmeur, votre premier but et d'apprendre le html, ou plutot le xhtml, une version modifié du html.
Tout dabord, avant de commencer, il est plus pratique que votre système d'exploitation (Windows par exemple) affiche les extentions de vos fichiers. Si ce n'est pas le cas, dirigez-vous dans votre panneau de configuration >> Options des dossiers puis dans l'onglet Affichage, repérez la ligne ou est écrit "Masquer les extensions des fichiers dont le type est connu" et décochez cette ligne. Les extension de vos fichiers sont maintenant activés.
Pour commencer, il vous faut une page html et pour en avoir une, rien de plus simple, crée un fichier bloc-notes en faisant Clic droit >> Nouveau >> Document texte (Bloc-notes). Renommez ensuite votre fichier index.html et voila votre première page html.
Lorsque vous cliquez sur ce fichier, votre navigateur s'ouvre et une page affiche blanc, ce qui est signe que votre page a bien été crée mais que cette page est vide. Il faut donc remplir votre page.
Pour modifier votre page, faite Clic droit >> Ouvrir avec >> Bloc-notes et vous voilà pret à remplir votre première page.
Commençont par les bases :
Il faut savoir que les balises <html>, <head> et <body> sont la structure de votre page html.
Commencez dabord par ajouter la balise <html> sur votre page, cette balise est comme un signale indiquant que d'autres codes html se trouvent après. Mettez par la suite la balise <head> qui indique les codes à mettre en en-tête. Ce qui vous permet d'appliquer une même application sur toute la page.
La balise <title> n'est qu'une option mais très utile, elle vous permet de donner un titre à votre page. C'est pour cela qu'elle doit apparaitre dans les balises <head>.
Une fois la balise <head> ouvert, femez la avec la balise </head> si vous n'avez
rien à mettre entre ces deux balises. Ajoutez ensuite la balise <body> qui indiquera tous ce qui sera affiché dans votre page. Ecrivez dans cette balise tous ce qui vous vient par la tête pour y voir un exemple comme "Ma première page Web !". Et pour finir il ne faut pas oublier de fermer les balises <body> et <html>.
Passons maintenant à la correction, voila ce que vous devriez avoir à peut près :
<html>
<head>
<title>Le titre de ma page </title>
</head>
<body>
Ma première page Web !
</body>
</html>
Edit : Vous pouvez remarquez que je reviens souvent à la ligne, vous n'êtes pas obliger de le faire mais cela rend la page plus propre.
Des couleurs pour votre texte :
Je vous déconseille d'utiliser les balises ci-dessous à chaque fois que vous voulez changer la couleur de votre texte. La raison en est simple, il existe un autre language appelé Css vous permettant d'avoir un meme style de couleurs ce qui vous evite de mettre vos couleurs sur chacunes de vos pages.
Les codes pour ajouter de la couleur à votre texte se metteront dans les balises <body> vue que ces balises font partit du contenu de votre page à afficher. Il existe plusieurs manières d'afficher de la couleur et c'est pour cela que je préfère vous parler des balises <font> qui vous permet également d'autre possibilités tel que le changement de la police...
Voici un exemple de la page entière avec un exemple de la balise <font> :
<html>
<head>
<title>Le titre de ma page</title>
</head>
<body>
<font color="#ff0000">Ma première page Web ! En rouge ! </font>
</body>
</html>
Voulez-vous un autre code couleur ? Une petite liste est à votre disposition, cliquez ici.
Insertion d'une image :
Pour faire apparaitre une image dans votre page, c'est toujours une histoire de balises et ce sera avec la balise <img> :
<html>
<head>
<title>Le titre de la page</title>
</head>
<body>
<img src="Adresse_image" width="Largeur_image" height="Hauteur_image " border="0">
</body>
</html>
Edit : Vous n'êtes pas obligé de mettre la largeur et la hauteur de l'image si vous désirez voir apparaître sa taille original.
Faire un lien :
Pour crée un lien, les balises <a> permettent de rendre un texte cliquable capable de vous redirigez à un fichier désiré :
<html>
<head>
<title>Le titre de la page</title>
</head>
<body>
<a href="Adresse_fichier" target="_blank" >Contenu</a>
</body>
</html>
Edit : La valeur _blank vous permet d'ouvrir sur une nouvelle page. Si vous ne voulez pas ouvrir sur une nouvelle page, enlevez cette valeur.
Image survolé :
Certains peuvent se dire que faire un code permettant de changer une image au contact de la souris est difficile, détrompez-vous c'est tous aussi facile à faire :
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nom_image_2','','Adresse_image_2',1)"><img src="Adresse_image_1" border="0" /></a>
Edit : Il faut bien remarquer que vous aurez l'adresse de l'image de base à écrire dans la balise <img> et l'adresse de l'image qui remplacera la première à écrire dans la balise <a>.
Codes utiles :
<br /> : Ce petit code vous permet de retourner à la ligne.
<center>Contenu</center> : Votre contenu sera affiché au centre.
<p align="left">Contenu</p> : Votre contenu sera affiché à gauche.
<p align="right">Contenu</p> : Votre contenu sera affiché à droite.
<a href="mailto:Adresse_Email">Contact</a> : mailto te permet de faire apparaitre la boîte de message d'envoie avec comme destinataire l'adresse email indiqué.
Référencement Google Meta Tags :
Ce code ne fait pas vraiment partit de bases mais il sera celui auquel vous vous poserez obligatoirement la question d'un moment à l'autre. Ces balises <meta> appelés Tags vous permettent d'être affiché dans le moteur de recherche de Google.
Ce code se met entre les balises <head> et il est complètement inutile de mettre ce code sur toute vos pages, la page principal suffit... Il faut également avoir de la patience, vous ne serez pas affiché sur Google après avoir écrit ce code, vous devrez attendre plusieurs heures voir jours avans de voir apparaitre votre site.
<META content="Description_de_votre_site" name="description">
<META content="MSHTML 6.00.2900.2802" name="GENERATOR">
<META name="keywords" content="les,mots,clés">
Voila que mon petit apprentissage sur les bases du html se terminent mais cela ne veut pas du tout dire que vous connaissez toute les bases, il en reste encore et c'est pour cela que je vous invite à visiter le Site du zero qui vous apprendra également bien d'autre choses concernant la programmation de sites web.
Puissance Sayen [Services - Bases du html] |
