H comme HTML5 (code html exemple) hypertext markup language. La 1iere partie concerne le langage HTML et HTML5 avec des exemples de code HTML et des exemples comment coder un site internet en HTML5. Tandis que la 2ieme partie de cette page concerne les Doctype en HTML et HTML5. Pour finir, la dernière partie concernera l'hébergement d'un site internet.
Table des matières
Langage de programmation html hypertext markup language
Le HTML (hypertext markup language° est un langage de programmation. On l'écrit avec des balise HTML. C'est un standard érigé par le W3C. Le code HTML permet d'afficher des pages internet. Et donc plus généralement de créer des sites web par exemple, comme le site de WASI.
Sans plus tarder, un peu de code en html ci-dessous.
Code en html
Pour ce 1ier exemple de code en HTML, je vous propose d'ouvrir un éditeur de texte simple tel que Notepad, Notepad++ ou Wordpad. Pas de document Microsoft World car le logiciel World va ajouter du code en HTM dans votre document.
L'étape 1 consiste à ouvrir un nouveau document dans votre éditeur de texte et de copier-coller ce code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- section dentete -->
<title>Ma page en code HTML</title>
</head>
<body>
<!-- contenu principal de mon code htlm -->
<h1>Un grand titre avec la balise H1</h1>
<p>Un parapgraphe avec la balise P
<a href="https://www.wasi.fr/">un lien avec la balise A</a>
la suite de mon paragraphe.</p>
<!-- un commentaire -->
</body>
</html>La 2ieme étape consiste à enregistrer ce codehtlm dans votre ordinateur. En général, on fait enregistrer sous. Ensuite, on nomme le fichier ma-page-avec-wasi par exemple. Avec l'extension.html. Donc le fichier s'appellera ma-page-avec-wasi.html
Etape 3, vous cliquez sur ce fichier, et vous l'ouvrez dans un de vos navigateurs préféré (firefox, chrome, etc). Et voilà ! Votre page écrite en langage de programmation html s'ouvre.
HTML
HTML est l'acronyme désignant le langage informatique permettant de créer des pages web. Il signifie "HyperText Markup Language" ou le langage de balise hypertexte. Ce langage informatique permet en particulier d'insérer des liens hypertextes, d'où le nom du langage. Il peut être complété par d'autres langages (java, javascript, …) pour offrir des fonctionnalités avancées et rendre votre site plus dynamique et surtout beaucoup plus joli 🙂
Comment créer un site web html ?
Voici comment créer un site web html :
- Tout d'abord, vous achetez un nom de domaine, par exemple chez O2Switch ou chez OVH (voir le chapitre plus haut à propos de l'hébergement web).
- Ensuite avec FTP Filezilla vous accédez à l'hébergement associé au nom de domaine.
- Ici, deux solutions : la plus simple est de transférer un CMS type WordPress. Auquel cas vous devez configurer le fichier wp-config.php pour permettre au code HTML d'accéder à la base de données. Dès lors, vous pouvez vous connecter à votre site avec par exemple cette URL :
http://nom-de-domaine.fr/wp-admin
- L'autre solution est de transférer directement vos fichiers statiques HTML, CSS et JS sur l'hébergement web. Bien entendu il faudra que votre code HTML, CSS et JS soient liés et structurés (cf. chapitre suivant).
- Dans tous les cas, vous accèderez au site de cette façon :
http://nom-de-domaine.fr/
Quels logiciels pour coder en HTML ?
Pour développer en HTML, il est tout à fait possible d'utiliser des logiciels de traitement de texte. En particulier notepad++. Bien entendu on peut aussi utiliser des logiciels simples comme le Blocnote sous Windows. Ou encore TextEdit sous Mac. Finalement KEdit sous KDE.
En revanche, n'utilisez pas un logiciel de traitement de texte avancé. Comme par exemple Microsoft Word ou OpenOffice. En effet, ils ajoutent des données (métadonnées plus exactement) qui vont détourner (poluer!) votre code HTML.
Ensuite, vous enregistrez votre fichier sur votre ordinateur avec l'extension .html ou .htm. Pour finir, il vous suffira d'ouvrir ce fichier dans un navigateur web pour voir votre exemple de code HTML s'afficher.
Les navigateurs web sont Google Chrome, Firefox, Safari, etc.
Hébergement Internet (Hébergement Web)
L'hébergement Internet (ou hébergement Web) est ce qui permet de stocker votre code informatique. Et donc ce qui va permettre aux internautes de consulter votre site internet. Imaginez une maison et son terrain, l'hébergement est le terrain et la maison est le code informatique. Les hébergeurs (OVH, Gandi, WASI, ... ) hébergent votre code informatique.
Comment choisir l'hébergement web ?
Puisque c'est une notion importante pour le référencement et pour votre site internet, je pense qu'il ne faut pas négliger cette étape dans la création de votre site internet. En effet, pour que le site web soit performant, vous devez vous assurer d'un hébergement solide et fiable. Au contraire, un hébergement de mauvaise qualité vous promet piratage et instabilité. Voire même serveur surchargé. C'est à dire un site internet inaccessible.
Quelles solutions d'hébergement web choisir ?
Ainsi, le choix de votre hébergement web pèse dans la balance. Aujourd'hui il existe beaucoup de solutions d'hébergement. Finalement, pratiquement autant que d'hébergeurs !
En bref, les hébergeurs classiques sont OVH, O2Switch et Gandi. Chacun offre des services différents. En ce qui concerne les types d'hébergement. On peut les classer en 4 catégories :
- L’hébergement sur serveur mutualisé. En réalité il s'agit d'hébergement partagé. Autrement dit sur un serveur, on partage l'espace disque. Bien entendu chacun a son répertoire, et ne peut accéder au répertoire de l'autre. Souvent pour un site vitrine sur WordPress cette solution convient très bien.
- L’hébergement VPS. Comme Virtual Private Server ou Serveur Privé Virtuel. En fait il s'agit d'un serveur virtuel. En particulier il offre plus de possibilités qu'un hébergement mutualisé. Mais moins de possibilités qu'un serveur dédié. Par exemple il permet un meilleur contrôle de son espace disque. C'est la raison pour laquelle on choisira cette solution web.
- L’hébergement sur un serveur dédié. Cette solution s'adresse aux sites internet haut de gamme. C'est à dire d'une part avec un grand nombre de pages ou d'articles. D'autre part, avec un trafic assez élevé. Le serveur vous sera entièrement dédié. Autrement dit, seul votre site internet (ou votre logiciel web) sera hébergé sur ce serveur.
- L’hébergement Cloud. En réalité, il s'agit d'une solution accessible sur internet. Indifféremment des serveurs.
Point de vigilance pour choisir son hébergement web
Vous devez choisir votre hébergement web en fonction des services qu'il offre. En effet, vous serez particulièrement vigilant à l'espace disque acheté. Mais aussi le trafic permis. C'est à dire la capacité à traiter rapidement l'information. Pour finir, le nombre et la taille de la base de données.
Quoiqu’il en soit, ne négligez pas non plus l'aspect sécurité. Sans oublier les sauvegardes et capacités de restauration de votre développement web ou site internet.
Hébergement exemple
Par exemple, parmi les plus connus on peut citer ces hébergement web : OVH, O2Switch et Gandi.
Base de données
Indispensable, la base de données stocke les données structurées de votre site internet ou de votre programme informatique. Le programme informatique insère des données, modifie, supprime les données de la base de données, selon les actions souhaitées et écrites par le programmeur.
L'affichage des sites internet créés avec un CMS, se fait conjointement par requêtes (PHP le plus souvent) vers la base de données et chargement de pages HTML, permettant entre autre de séparer les données de la mise en forme.
SQL est un des langages pour accèder aux données grâce à des requêtes. MySQL est un SGBDR. Cela signifie Systeme de gestion de base de données relationnelle. C'est à dire que l'intégrité référentielle est préservée. Généralement, le SGBDR permet de stocker, modifier et administrer une base de données. Phpmyadmin est un outil permettant de travailler dans la base de données.
Les requêtes SQL permettent d'accéder, de manipuler et de mettre à jour des données dans la base de données à l’aide de certaines commandes. Les commandes SQL sont les suivantes
- SELECT,
- UPDATE,
- DELETE,
- CREATE,
- DROP,
- etc.
Code HTML : un exemple général
Alors voici un exemple de code HTML basique qui peut servir de base à la création d'un site web :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<img src="" alt="Mon image de test">
</body>
</html> Dans cet exemple de code pour la création de sites web, nous spécifions quel est le type de document et aussi nous indiquons à l'ordinateur que contient la tête du site ("<head>") et que contient son corps ("<body>"). Un peu comme pour nous, les balises contenues dans la tête ne se voient pas sur le site, comme nos idées ou nos opinions sont invisibles. Par contre les balises contenues dans le corps du site vont former sa structure et son apparence. Ainsi dans notre exemple, le site fera apparaitre une image, insérée par la balise <img>.
Code HTML exemple : les balises
Bien sûr, nous pourrons ajouter des titres avec les balises <h1>, <h2>, et <h3>, et des liens vers une autre page du site comme par exemple la page " développeur wordpress à Montauban " ou vers un lien externe grâce à la balise <a>.
En ce qui concerne les balises des titres :
Les balises <h1>, <h2>, et <h3> sont utilisées pour les titres de la page. On dit aussi que les h1 sont des titres de premier niveau. Quant aux h2, ce sont des titres de second niveau. Vous l'aurez compris les h3 sont des titres de troisième niveau. Et etc jusqu'à la balise titre h6.
<h1>Est le titre principal de la page.</h1>
Ainsi, les balises <h2>, <h3>, ... servent pour les sous-titres de la page.
En ce qui concerne les balises des liens ou hyperliens :
On dit link en anglais. Pour faire un lien d'une page à une autre on utilise cette balise. Il s'agit de la balise <a>. Comme par exemple un lien vers le site WASI. Pour faire cela voici le code que l'on utiliserait :
<a href="https://www.wasi.fr>Lien vers le site wasi</a>
Doctype en HTML et HTML5
Qu'est-ce que <! DOCTYPE HTML en HTML?
Dans les documents plus anciens (HTML 4 ou XHTML) que le HTML5, la déclaration est plus compliquée car la déclaration doit faire référence à une DTD (Document Type Définition).
Comment définir DOCTYPE en HTML ?
<!DOCTYPE html>
Est-ce <! DOCTYPE HTML une balise ?
Doctype en HTML4
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Doctype en XHTML 1.1
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Quel est le doctype d'un document html5 ?
En HTML5, la déclaration doctype est simplifiée :
<!DOCTYPE html>
La déclaration doctype est-elle obligatoire en HTML5 ?
html5 exemple
Voici un bout de code en exemple HTML5
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Contactez WASI pour des informations pour la créer un site web sur Montauban (code html exemple). Ou pour un devis pour la création de site internet à Montauban dans le Tarn et Garonne et départements voisins : Caussade, Septfonds, Castelsarrasin, Bioule, etc.