Prérequis

Etre à l'aise sur un ordinateur windows ou un mac, être à l'aise sur Internet.

L'auteur

Aurélie ARROT

Html et Css

Cours suivants :

COURS 1 : Prise en main d'Html

COURS 2 : Les balises et attributs HTML

COURS 3 : Intégration multimédia en HTML

COURS 4 : Les feuilles de styles CSS

COURS 1 : Prise en main d'Html


en tete html cours 1

 

 

LES OBJECTIFS :
Connaître le vocabulaire lié au Html, structurer un document simple en HTML

PUBLIC VISE : Tout utilisateurs qui souhaitent se former sur Html

 

 

PROGRAMME

 

HTML (HyperText Markup Language), est un format de données permettant de concevoir des pages Web. Il s'agit d'un langage balisé qui permet d'écrire de l'hypertexte.

HTML permet également de structurer et de formaliser le contenu des pages web, d’inclure des ressources multimédias dont des images, des vidéos, des formulaires de saisie, et des programmes informatiques.
Nous retrouvons souvent le langage de programmation JavaScript et des feuilles de style en cascade (CSS) associés aux pages HTML.

HTML permet aussi de lire des documents sur Internet, grâce au protocole HTTP. C'est ce protocole qui est utilisé par le réseaux internet pour afficher chaque pages possédant une adresse unique : l'URL.

Le navigateur (browser en anglais) est un programme gratuit qui permet de rechercher et visiter des sites Internet.

url d'une page web

Dans le navigateur on tape l’adresse d’un site pour pouvoir le trouver.
La syntaxe d’une adresse est la suivante :
http://www. Organisation. Domaine
http:// (Hypertext Transfert Procol) est obligatoire, Il s'agit d'indiquer à l'ordinateur quel type de processus de communication est utilisé, c'est-à-dire, quel langage informatique on va utiliser pour se comprendre.

Il existe 2 catégories de domaine :
Ceux à 3 ou 4 lettres, désignant des organismes : .com, .org, .edu, .gouv, ….
Ceux à 2 lettres, désignant un pays : .fr, .ca, .be, …

Standard HTML :

Il faut savoir que HTML est un standard du W3C (Word Wide Web Consortium).
En bref, le W3C régit les spécifications du HTML, cela signifie qu'il nous informe sur les instructions du HTML mais pas sur l'implémentation du langage.

Ainsi, selon les navigateurs, les pages HTML peuvent être interprétées différemment, c'est pour cela que l'affichage d'une page peut être différent selon le navigateur que l'on utilise sur son PC.

Il est donc important de tester ces pages HTML sur plusieurs navigateurs avant de les mettre en ligne. Cela permet de vérifier si l'affichage de la page est correct sur les navigateurs les plus utilisés par les internautes.

Au cours des 2 dernières décenies, le Web à énormément évolué. Il est devenu au fil du temps de plus en plus complexe. 

Historiquement la 1ère version du HTML est sortie en 1991 (Tim Berners-Lee, chercheur au CERN), mais ce n'est qu'en 1993 qu'il est reconnu comme un langage à part entière.

En janvier 1997, HTML 3.2 devient le standard, avec notamment l'amélioration de la gestion des tableaux.

En décembre 1997, HTML 4.0 est publié, il apporte notamment la gestion des feuilles de styles (CSS) et des cadres (frames).

Depuis 2012, HTML 5 est en cours d'utilisation. Cette nouvelle version simplifie l'insertion de contenus audio et vidéo. En ce qui nous concerne nous travaillerons avec cette version.

Travailler en local :

Lorsque nous concevons les pages d'un site web, nous avons besoin d'un environement de test, cela afin de pouvoir corrigé, tester et améliorer nos pages pour arriver à une version finale à mettre en ligne.

En informatique, pour signifier que nous concevons nos pages Web sur un environnement de test sur notre machine, on dit qu'on travail en local.

Cela veut dire que nous travaillons avec des fichiers srockés sur notre ordinateur, c'est-à-dire qu'il y'a que nous qui pouvons voir les modifications que nous faisons.

Ci-dessous, nous avons un exemple d'un environnement de travail en local.
D'un côté, nous codons nos pages en HTML grâce à un logiciel permettant d'éditer du code HTML pour créer des pages Web : Dreamweaver. Il en existe d'autres biensûre, on peut citer en gratuit : Brackets , NotePad++ ou encore Netbeans.
Nous pouvons vous suggérer de télécharger Brakets, qui est un éditeur gratuit et moderne.

Nous pouvons tester nos pages dans plusieurs navigateur pour vérifier l'affichage, ici il s'agit de Google Chrome.
Etant donner que nous sommes en local, l'adresse de nos pages commence par C:, ce qui signifie bien qu'elles sont stockées sur notre PC.
Ainsi nous sommes les seuls à pouvoir voir la conception des pages pour le moment.

tester ses pages Html en local

Vous l'aurez compris, l'environnement de travail en local nous permet d'éviter de modifier directement les pages de notre site en ligne.

En informatique, lorsque nous intervenons directement sur des fichiers ou des pages qui sont en ligne, on dit que l'on travail en production.
Cela signifi donc que tout le monde peut voir les modifications que nous sommes en train de faire.

Il est préférable de concevoir et de tester nos pages sur un environnement en local dans un premier temps, puis lorsqu'elles sont terminées de les transferer sur l'environnement en production (en ligne).

Utiliser un éditeur

Pour écrire nos pages en HTML, nous avons besoin d'un éditeur. Il va également nous permettre d'enregistrer nos pages au bon format.

Html est un langage à balise. En effet, au départ il a été conçu pour baliser (marquer) du texte.
Une commande est une balise.

Généralement on utilise 2 balises : une ouvrante et une fermante.

Par exemple :



Ici nous voyons le code HTML à gauche, puis l'aperçu du résultat dans le navigateur à droite.

Il faut garder à l'esprit que tout est balise, la page affichée est une balise (body), le titre affiché dans le navigateur est une balise (Title), la mise en forme du texte, les liens hypertextes, les images, ... etc.

Comme vous pouvez le voir dans notre exemple, une balise est entouré des signes "<>" .C'est le cas du mot "exemple" et du mot "simple"
Lorsque nous ouvrons une balise, nous utilisons ces signes et le nom de la balise,
Lorsque nous fermons une balise, nous utilisons les même signes, mais avec un "/",

Format d'une page HTML :

Une page HTML se construit toujours de la même manière :

Anatomie d'une page Html

Contact

SARL AAT's

N° SIREN : 822580056 - N° TVA intracommunautaire : FR40822580056