BTS IG Août 2011 INITIATION A L' HTML
• OBJECTIF :
Écrire vite un site en HTML avec seulement le wordpad ou le bloc-note disponibles dans
"Accessoires" de Windows, donc sans l'aide d'une interface ou d'un logiciel de création.
• IMPORTANT IMMEDIATEMENT:
Il faut pouvoir sauvegarder une page, dans le wordpad ou le bloc-note,
avec l'extension .html ou .htm .
POUR CELA aller dans "Explorateur windows", que l'on a dans le menu " Accessoires",
cliquer sur "OUTILS" , dérouler et cliquer sur "Options des dossiers", puis cliquer
sur "Affichage" puis descendre pour décocher la ligne
"masquer les extensions des fichiers dont le type est connu"
enfin cliquer sur OK.
Quand on sauvegardera une page du wordpad ou du bloc-note l'extension .text
pourra être effacée puis l'on écrira à la place l'extension .html
La page sera alors avec l'extension .html
• PREMIERE PARTIE.
-----------------------
1. PRESENTATION brève de l'HTML.
L' HTML (Hyper Text Markup Language) n'est pas un langage de programmation.
C'est du balisage de texte.
On prépare un texte qui devra être mis en page pour être lu par le navigateur
Par exemple on donne à un étudiant un texte en lui demandant de suivre avec précision
les indications que l'on aura inscrites ( concernant le type de police , sa taille, les images à intégrer.).
Ces indications seront données en utilisant uniquement des abréviations
entre les signes < et > pour bien les dintinguer du reste du texte.
On appellera ces indications de mise en page : des balises
Vous allez donc fournir un texte codé qui sera tapé par l'étudiant et sera lu par le navigateur
de l'ordinateur.
OBLIGATOIREMENT dans une page en html au minimum les balises suivantes
doivent être indiquées:
<HTML>
<HEAD>
<TITLE> ...................................... </TITLE>
</HEAD>
<BODY> --------------------------------------
</BODY>
</HTML>
Entre les balises <TITLE> et </TITLE> les pointillés seront remplacés,
en français, par le titre qui servira d'entêtede la page.
Entre les balises <BODY> et </BODY> il y aura, à la place des pointillés,
le contenu du texte du document.
2. PREMIERES SITUATIONS CONCRETES:
• Mettre un texte en gras (qui se dit BOLD en anglais) s'obtient en inscrivant <B>
juste avant le mot ou la phrase à mettre en gras puis en indiquant
</B> après la fin du mot ou de la phrase
( l'ajout du signe / veut dire "fin du").
• En anglais "under " signifie "sous". La première lettre est u.
Il faut donc pour souligner un texte, l'encadrer par les balises <U> et </U>
( les minuscules sont autorisées. )
• Il faut pour mettre en italique un texte, l'encadrer par les balises < I > et < /I>
( les minuscules sont autorisées. )
• Pour aller à la ligne après un mot on met la balise unique <P>
après ce mot ( "Break" fait référence en anglais à une rupture).
La balise < BR> n'a pas de fermeture.
• Pour sauter une ligne on peut mettre deux fois la balise <BR>
ou encore utiliser la balise <P> comme pour commencer un paragraphe.
Cette balise <P> , dans ce cas, est utilisée sans sa fermeture.
• Les balises <H1> ou <H2> ... <H6> avant un mot ou une phrase avec
après le mot ou la phrase les balises de fermeture
</H1>ou </H2> ... </H6> respectivement augmentent la tailles des caractères.
• EXERCICE1
L'étudiant doit créer une page en html intitulé "MON PROJET" .
Il doit mettre en gras la phrase
" Ce site a pour but de présenter un réseau"
Ecrire le texte codé.
-------------------------------------------------
RÉPONSE: L'étudiant doit écrire le texte codé:
<HTML>
<HEAD>
<TITLE> MON PROJET </TITLE>
</HEAD>
<BODY> <B>Ce site a pour but de présenter un réseau</B>
</BODY>
</HTML>
---------------------------------------------
• EXERCICE 2:
L'étudiant doit en plus à présent souligner la phrase précédente:
Ce site a pour but de présenter un réseau.
--------------------------------------------
REPONSE: L'étudiant doit écrire le texte codé:
<HTML>
<HEAD>
<TITLE> MON PROJET </TITLE>
</HEAD>
<BODY> <B><U> Ce site a pour but de présenter un réseau </B> </U>
</BODY>
</HTML>
----------------------------------------------
• EXERCICE 3:
L'étudiant doit en plus à présent mettre en italique la phrase précédente:
Ce site a pour but de présenter un réseau
-------------------------------------------
REPONSE: L'étudiant doit écrire le texte codé:
<HTML>
<HEAD>
<TITLE> MON PROJET </TITLE>
</HEAD>
<BODY> <B><U> < I >Ce site a pour but de présenter un réseau </B> </U> < /I >
</BODY>
</HTML>
--------------------------------------
• EXERCICE 4:
Demander à l'étudiant de mettre la phrase précédente
avec "de présenter un réseau " mis à la ligne en sautant une ligne.
-----------------------------------------
REPONSE: L'étudiant doit écrire le texte codé:
<HTML>
<HEAD>
<TITLE> MON PROJET </TITLE>
</HEAD>
<BODY> <B><U> < I >Ce site a pour but <BR> <BR> de présenter un réseau </B> </U> < /I >
</BODY>
</HTML>
-------------------------------------
3.REMARQUE:
Ainsi le principe de base du HTML est l'utilisation de balises
pour donner des ordres au navigateur .
Le navigateur (Internet Explorer, Netscape...) retranscrit la page HTML
en prenant en compte les balises
(les mots ou ensemble de lettre entre les signes < et > )
comme des ordres à exécuter.
Le reste du texte est affiché en fonction de ces ordres.
Le texte codé, comme dans l'EXERCICE 1, se trouve dans un simple fichier texte
dont on a remplacé l'extension .txt par .html .
Ce fichier a été ensuite placé sur Internet chez un hébergeur de site.
L'hébergeur e-monsite.com présente quatre avantages:
• La gratuité de la création du site et de son hébergement.
• L'ouverture simple immédiate du site avec une adresse internet et le choix d'un nom.
• La possibilité de basculer en permanence entre la page html et l'interface en français.
• Une grande fluidité dans les connextions.
( Plus de 800 000 sites déjà se trouvent chez cet hébergeur. )
IMPORTANT:
Pour faire une page web l'étudiant n'a pas à être connecté.
Il peut très bien, sans connexion, créer entièrement un site, puis,
quand son professeur sera satisfait du résultat, le mettre en ligne.
En attendant le site est en "cale sèche". Il peut faire un site uniquement
avec l'éditeur de texte wordpad de Windows.
----------------------------------------------------------------------
Conseil:
Un site excellent très clair pour apprendre très vite est : http://www.guidegratuit.com/