1 - Création d'une page web basique

CoursCréer une page Web en html

Préparation et rappels de base

Difficulté : Facile
Temps requis : 30 minutes
Application(s) et fichier(s) requis : Notepad de Windows (ou "Sublim Text" shareware)

Avant de commencer, nous allons voir si vous vous rappelez des bases du sytème informatique de votre poste de travail (ordinateur).

1.1 - Les raccourcis clavier utiles :

- Maj + Curseur droite/gauche : Sélection d'un morceau de texte
- Double clic sur un mot : Sélection du mot
- Ctrl + C : Copier
- Ctrl + V : Coller
- Ctrl + X : Couper
- Ctrl + A : Tout sélectionner
- Alt + Tab : Passage d'une fenêtre à l'autre

et bien d'autres à découvrir au fil du cours ...


Maintenant, il faut organiser votre travail afin d'avoir une structure cohérente dans votre projet.

 

1.2 - Organiser son projet

Sur votre bureau, vous allez créer un dossier nommé "Ma-page-web" - Pour ceux qui ont oublié, voici un rappel :

- Clic droit avec la souris sur un espace libre du "bureau" (desktop) puis dans le menu contextuel qui s'ouvre, faire un clic gauche sur "Nouveau" et dans le 2ème menu, clic gauche sur "Dossier".

- Si tout va bien, vous avez un dossier portant le nom de "Nouveau dossier" qu'il va falloir renommer en "Ma-page-web"  (3 solutions : soit 1 clic gauche sur le nom pour obtenir la surbrillance sur celui-ci, soit clic droit et recherche de "Renommer", soit 1 clic gauche sur le dossier jaune puis touche "F2")

Tout va bien ? Vous arrivez à suivre ? On continue, alors !

Dans votre nouveau dossier vous allez mettre 3 sous-dossiers en prévision d'une extention future de votre page (Pourquoi pas faire un site web complet ?!!)

Dans le dossier "Ma-page-web", créez le dossier "css", "images" et "pages" - Voilà, vous avez votre arborescence de site web basique.

 

1.3 - Notepad ou sublime text ?

Pour commencer, nous allons utiliser Notepad. Sublim text est un "shareware" (license payante).

Pas de long discours, vous savez écrire dans Notepad !! Savez-vous le trouver sous Win 8 ou 10 ?

Il se trouve dans le dossier "c:\windows\notepad.exe" comme dans tous les MS-Win !!

Nous allons le mettre sur notre bureau pour avoir un accès plus rapide :

- Une fois le fichier notepad.exe repéré, vous faites un "clic-droit maintenu" sur ce fichier et vous le déplacé vers votre "Bureau" puis relâchez et clic gauche sur "Créer les raccourcis ici".

- Retour sur le bureau et "double-clic" sur le raccourci pour ouvrir notepad et voilà !

 

1.4 - Ecrire votre page web en html

La structure générale d'une page html :

Nota : En version smartphone, vous devez poser le doigt sur la zone de texte blanche et faire défiler vers le bas pour voir l'ensemble du texte.

<html> sert a informer votre navigateur qu'il s'agit d'une page web en html
<head> permet d'insérer le titre de la page visible en haut de votre navigateur
<body> contient l'ensemble de vos textes et images

Ces 3 "expressions" sont les principales balises html. Une balise a besoin d'être ouverte est donc ... il faut la fermer lorsque vous avez insérer votre contenu. Ce qui donne :

<html> xxxxx </html>

<body> xxxxx </body>

Voici votre première ligne à écrire pour commencer votre page html :

Cette ligne indique à votre navigateur qu'il doit ouvrir un fichier html. C'est une déclaration en html 5

Ensuite, vous devez indiquer que votre page est en français :

Vous avez maintenant 2 lignes.

Nous allons remplir notre page avec un titre pour le navigateur, un titre principale (important), un sous-titre (moins important), du texte et ... c'est tout pour le moment.

Voici l'exmple :  Nota : En version smartphone, vous devez poser le doigt sur la zone de texte et le glisser vers le bas pour voir tout le texte.

Vous venez d'écrire votre première page html. Il faut l'enregistrer dans votre dossier de travail sous le nom de "index.html" et bien sûr l'ouvrir dans votre navigateur en double-cliquant dessus.

Il y a des choses bizarres comme le "<h1>" ou le "<h2>", non ?

Pour information, cette page est lisible sans connexion internet et peut servir de base pour partager sur une clé USB, un CV, par exemple !

Pour tout problème et/ou commentaire, merci de vous rendre sur facebook dans le groupe "Div ID SDW"

 

1.5 - Mais, c'est quoi le html ?

Le html ou "HyperText Markup Language" est un ... language de balisage séquentiel ou sémantique permettant d'écrire de l'hypertexte ... ouille, j'ai pas tout compris !
Bon, vu comme ça, c'est pas plus clair que la vie sexuelle des mouches en captivité. Il fallait bien que je vous donne une définition.

Pour faire plus simple, le code html permet d'écrire des pages de textes avec des images comme dans les livres de jadis. Pour le lire, il faut un navigateur et un ordinateur ou le contraire. Le mot hypertexte est associé à hyperlien qui permet de naviguer dans la page ou d'une page à une autre ou bien encore d'un site web à un autre. C'est un peu plus clair là ? C'est du wild wide web truc, le www ou "surf" sans vague et sans océan.

J'ai pas l'impression que ça suit au fond de la classe ... Allez, fin de la littérature sur le html. Envoyez-moi vos copies.

Le CSS, c'est par ici : CSS - Accès