Tutoriel HTML / XHTML

HTML

Découvez les bases de HTML et XHTML dans ce tutoriel.

HTML5 CSS Dreamweaver Bootstrap PHP

Support de formation sur HTML / XHTML

Je vous propose de découvrir pas à pas les bases du HTML et XHTML.

Qu'est ce que HTML et XHTML ?

HTML : Hypertext Markup Language

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’oà son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources ?multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il permet de créer des documents interopérables avec des équipements trés variés de maniére conforme aux exigences de l’ accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

XHTML : the eXtensible Hyper Text Markup Language

Qui signifie langage de balisage hypertexte extensible. Il est la conséquence de l'incompatibilité des fichiers HTML et XML que certains navigateurs n'arrivaient pas à déchiffrer, nous pouvons préciser que c'est un langage dit de description et non de programmation.

Pour mettre en forme mon code HTML, je vais avoir besoin d'un autre langage :

le CSS

CSS : Cascading Style Sheets (feuilles de style en cascade)

CSS est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Support de formation sur le CSS

De quoi ai je besoin pour créer un site web ?

Nous écrirons du code source à l'aide d'un éditeur et nous visualiserons le résultat dans un navigateur !

Dès que votre site sera terminé, il faudra acheter un nom de domaine ainsi qu'un hébergement puis transférer le site que nous avons développé en local vers notre hébergement à l'aide d'un client FTP (Logiciel permettant de transférer des données vers votre serveur web)

Dans un premier temps, nous aurons besoin :

1 d'un éditeur de code

Ce logiciel vous permettra d'écrire le code source qui constituera vos pages HTML.

Si vous ne savez pas quel éditeur choisir, je vous propose une petite liste de logiciels gratuits.

Editeur Lien de téléchargement
Notepad ++ Télécharger
Brackets Télécharger
Netbeans Télécharger

2 d'un navigateur

Le navigateur vous permettra d'interpréter le code que nous aurons écrit dans notre éditeur et vous donnera le rendu de votre page HTML.

Voici une liste de navigateurs pour Windows et Mac que vous pouvez télécharger gratuitement.

Editeur Lien de téléchargement
Internet Explorer
(Windows uniquemement)
Télécharger
Mozilla Firefox Télécharger
Chrome Télécharger
Safari Télécharger
Opera Télécharger

Il est indispensable de tester le rendu dans différents navigateurs et maintenant de penser à adapter votre site pour les tablettes et smartphones.

Dans un second temps, dès que notre site sera finalisé, il faudra le metre en ligne, nous aurons besoin :

3 d'un nom de domaine

Un nom de domaine (NDD en notation abrégée française ou DN pour Domain Name en anglais) est, dans le système de noms de domaine, un identifiant de domaine internet. Un domaine est un ensemble d'ordinateurs reliés à Internet et possédant une caractéristique commune. Par exemple, un domaine tel que .fr est l'ensemble des ordinateurs hébergeant des activités pour des personnes ou des organisations qui se sont enregistrées auprès de l'AFNIC qui est le registre responsable du domaine de premier niveau .fr ; en général, ces personnes ou ces entreprises ont une certaine relation (qui peut être ténue dans certains cas) avec la France ; le domaine paris.fr est l'ensemble des ordinateurs hébergeant des activités pour la ville de Paris.

Un nom de domaine est un « masque » sur une adresse IP. Le but d'un nom de domaine est de retenir et communiquer facilement l'adresse d'un ensemble de serveurs (site web, courrier électronique, FTP). Par exemple, wikipedia.org est plus simple à mémoriser que 208.80.154.224 ou 91.198.174.192.

Source Wikipédia

4 d'un hébergeur

Un hébergeur web (ou hébergeur internet) est une entité ayant pour vocation de mettre à disposition des internautes des sites web conçus et gérés par des tiers.

Il donne ainsi accès à tous les internautes au contenu déposé dans leurs comptes par les webmestres souvent via un logiciel FTP ou un gestionnaire de fichiers. Pour cela, il maintient des ordinateurs allumés et connectés 24 heures sur 24 à Internet (des serveurs web par exemple) par une connexion à très haut débit (plusieurs centaines de Mb/s), sur lesquels sont installés des logiciels : serveur HTTP (souvent Apache), serveur de messagerie, de base de données...

Source Wikipédia

5 d'un logiciel permettant de transférer nos données chez notre hébergeur

Pour transférer le site que vous aurez conçu en local vers votre serveur web, il faudra transférer vos données vers un serveur FTP (File Transfert Protocol), à l'aide d'un client FTP tel que Filezilla.

Les informations permettant de vous connecter au serveur FTP, vous aurons été fournies par votre hébergeur.

Je vous conseille de télécharger Filezilla qui est un client FTP gratuit et le plus utilisé par les webmasters.

Télécharger Filezilla

Quelques tutoriels sur Filezilla

Site Format Lien
Framasoft PDF Voir
Youtube Vidéo Voir
Craym HTML Voir