Introduction au langage HTML 1. Histoire d`internet : Issu d`une

Transcription

Introduction au langage HTML
1. Histoire d’internet :
Issu d’une initiative militaire, Internet a d’abord été utilisé par les scientifiques avant de s’ouvrir au
commercial et à toute personne humaine. En voici les grandes étapes :
En 1962, c’est la « guerre froide ». US Air Force veut créer un système de communication qui
résisterait à une première attaque nucléaire, afin de pouvoir répliquer. La stratégie de l’époque
suppose qu’un pays doté de l’arme atomique ne l’utilisera pas s’ il s’expose à une réplique qui lui
causera des dommages trop importants. Cela s’appelle la « force de dissuasion » ou l’ « équilibre
de la terreur ». L’USAF s’adresse donc aux universités et instituts de recherche pour concevoir un
tel système.
En 1964, Paul Baran a l’idée de créer un réseau à l’image d’une grande toile, en anglais « wide
web ».Il met au point un réseau sans centre unique de communication, où les données se déplacent de façon dynamique, c’est-à-dire cherchant à chaque communication le chemin le moins
utilisé, voire même patientant lorsque toutes les routes sont utilisées.
En 1969, le réseau expérimental ARPANET est créé par l’ARPA (Advanced Research Projects
Agency dépendant du DOD, Department of Defense des USA). Il relie les quatre instituts universitaires suivants : Stanford Institute ; Université de Californie à Los Angeles ; Université de
Californie à Santa Barbara ; Université d’Utah. Il est considéré comme le précurseur d’internet,
car il comporte déjà les caractéristiques suivantes : le non-fonctionnement d’un ou de plusieurs
noeuds du réseau n’en perturbe pas le fonctionnement, le communication entre machines se fait
sans machine centralisée intermédiaire, toutefois les protocoles utilisés sont encore basiques.
En 1971, Ray Tomlinson inaugure un nouveau mode de communication, le courrier électronique.
Le contenu de ce premier e-mail était le suivant : « QWERTYUIOP ». En juillet 1972, Lawrence G.
Roberts a mis au point la première application permettant de lister, de lire de manière sélective,
d’archiver, de répondre ou de faire suivre un e-mail. En 1972 également, le réseau ARPANET est
présenté en public, lors de la conférence ICCC (International Computer Communication Conference).
En 1980, Tim Berners-Lee, un chercheur au CERN de Genève, développe un système de navigation hypertexte et, avec l’aide de Robert Cailliau, le logiciel « Enquire », qui signifie « se renseigner », qui permet de naviguer selon ce principe. Fin 1990, il développe le protocole HTTP (Hyper
Text Tranfer Protocol) et le langage HTML (HyperText Markup Language), permettant de naviguer
à l’aide de liens hypertextes. à travers les réseaux.
En 1992, 1 000 000 de machines sont connectées et le premier lien vers le site Web du CERN
créé sur le serveur de Fermilab aux États-Unis : la toile mondiale se tisse :
1971 : 23 ordinateurs sont reliés sur ARPANET.
1984 : 1 000 ordinateurs connectés
1992 : 1 000 000 ordinateurs connectés
1996 : 10 000 000 ordinateurs connectés.
Informatique 2˚ - Introduction au langage HTML
2. Espace de travail minimal :
Nous ouvrons le programme « Bloc-notes Démarrer / Tous les programmes / Accessoires / Blocnotes (ou Notepad)
Reproduisons le texte suivant (indentations comprises) :
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
Ici, j'écris mon texte
</body>
</html>
Nous enregistrons par « Fichier / Enregistrer sous ... » en respectant les indications suivantes :
– Emplacement : dans notre dossier « Documents », créer un dossier « HTML »
– Nom de fichier : mots au choix en utilisant UNIQUEMENT les 63 caractères suivants :
_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz
– Extension du fichier : « .htm » ou « .html »,
– Type : « Tous les fichiers »,
– Le codage, lui, reste « ANSI ».
Par « Démarrer / Documents », nous cliquons deux fois sur le fichier obtenu, afin de l’ouvrir avec
le navigateur internet par défaut (ou un clic droit et « Ouvrir avec ») et nous pouvons admirer le
résultat obtenu.
Pour travailler, nous utilisons deux fenêtres sur notre écran : le navigateur sur une moitié et le Blocnotes sur l’autre. Lorsque nous avons modifié la page html dans le bloc-notes, nous l’enregistrons
(Menu : Fichier / Enregistrer), puis nous l’actualisons dans le navigateur (Menu : Affichage /
Actualiser ou le bouton correspondant).
3. Structure de base d’une page HTML, langage à balises.
Le langage html est constitué de balises allant par paires, < ... > pour la balise d’ouverture et
</ ... > pour la balise de fermeture.
Ces balises sont lues et interprétées par le navigateur. Elles lui indiquent ce qu’il doit afficher sur
l’écran et comment il doit l’afficher. Elles ne sont pas lisibles normalement par l’utilisateur.
La page html telle qu’elles nous apparaît dans le « Bloc-notes » avec ses balises s’appelle le
« code source » de la page.
Pour la lisibilité du code source, nous respectons les règles d’indentation :
– une balise d’ouverture et sa balise de fermeture correspondante sont alignées sur une même
verticale et tout ce qui est entre elles est décalé vers la droite.
– une balise d’ouverture et sa balise de fermeture correspondante peuvent également êtres placées au début et à la fin d’une ligne lorsqu’elles définissent l’affichage de peu d’informations.
Dans toute page html, on doit trouver les balises suivantes, qui constituent sa structure de base :
– <html> </html> délimitent la page HTML
– <head> </head> délimitent l’entête de la page HTML, qui contient des informations utiles au
navigateur, mais qui ne s’affichent pas dans la fenêtre elle-même.
– <title> </title> dans l’entête, délimitent ce qui doit d’afficher dans la barre de titre de la fenêtre
et comme titre de l’onglet lorsqu’il est utilisé.
– <body> </body> délimitent le corps de la page HTML, qui contient ce qui sera affiché dans la
fenêtre du navigateur.
Les balises peuvent également contenir des attributs qui modifient les effets de la balise (ne pas
oublier les guillemets) :
– <body bgcolor="red"> ou <body bgcolor="#FF0000"> définit en plus la couleur rouge de
l’arrière-plan du corps de la page.
– <h1 align="center"> définit en plus que le titre de taille h1 sera centré.
4. Balises de titres
<h1> </h1> ... <h6> </h6> délimitent ce qui devra être affiché comme titre, c’est à dire comme
texte en gras et dans une autre taille que le texte normal. Six tailles différentes sont disponibles :
5. Balises d’image
Pour insérer une image dans une page HTML, nous utilisons le balise suivante :
<img src="dossier\athlete.jpg" width="100px" height="10px"> qui indique qu’il s’agit de :
– img, donc une image,
– src="dossier\athlete.jpg", donc la source de l’image est enregistrée dans un dossier « dossier »
et nommée « athlete.jpg »
Les autres attributs :
– ALIGN, avec comme valeurs "bottom" "center" "left" "middle" "top" "right" pour les alignement
de l’image.
– ALT, qui définit un texte à afficher au cas où l’image ne s’affiche pas.
– BORDER, qui définit le nombre de pixels de la bordure., qui définit
– HEIGHT, qui définit la hauteur de l’image (en pixels ou en %).
– HSPACE, qui définit le nombre de pixels entre l’image et le texte adjacent (horizontalement).
– VSPACE, qui définit le nombre de pixels entre l’image et le texte (verticalement).
– WIDTH, qui définit la largeur de l’image (en pixels ou en %).
6. Balises de tableau
Un tableau est un espace défini par des cases rangées en lignes et en colonnes.
<table border="5" align="center">
<tr>
<td> première ligne, premiere case. </td>
<td> première ligne, deuxième case. </td>
</tr>
<tr>
<td> deuxième ligne, premiere case. </td>
<td> deuxième ligne, deuxième case. </td>
</tr>
</table>
Nous utilisons les balises suivantes :
– <table border="5" align="center"> , donc début du tableau, avec attributs de bordure et d’alignement,
– <tr>, donc début d’une ligne de tableau,
– <td>, donc début d’une case de tableau,
– </td>, donc fin d’une case de tableau,
– </tr>, donc fin d’une ligne de tableau,
– </table>, donc fin du tableau.
7. Balises de liens
Un lien hypertexte est un élément d’une page HTML, qui, lorsque l’on clique dessus, envoie
l’utilisateur :
– soit à un autre endroit de la même page,
– soit à une autre page,
– soit à un endroit précis d’une autre page.
Cette autre page peut appartenir au même site ou à un site différent.
Réalisation, première opération : repérer ou créer la destination du lien.
– Si la destination existe, il suffira de copier/coller son adresse qui apparaît dans la fenêtre
d’adresse URL du navigateur.
– Si la destination n’existe pas, il faudra créer la page ou le site voulu.
– S’il s’agit d’atteindre un endroit précis d’une page, il faudra créer à cet endroit une étiquette,
signet ou label en insérant dans le code : <a name="signet"></a> ou <a id="signet"></a> Rien
n’apparaît au lecteur, mais le navigateur, lui, lit ce label.
Réalisation, deuxième opération : créer le départ du lien.
Il faut encadrer l’objet ou le texte sur lequel on devra cliquer par deux balises <a> et </a>. Cela
apparaîtra normalement en bleu souligné.
Trois cas peuvent se présenter :
– aller à un autre endroit de la même page : <a href="#signet"> ... </a>
– aller à une autre page du même site : <a href="index.html"> ... </a>
– aller à un autre site : <a href="http ://www.ccro.be"> ... </a>
Ces écritures peuvent se combiner :
<a href="http ://www.site.ext/nom_du_fichier.html#signet"> qui envoie à un endroit désigné par
« signet » de la page « nom_du_fichier.html » du site « www.site.ext ».
8. Balises diverses
<br /> est une balise qui fait passer à la ligne suivante.

Introduction au langage HTML 1. Histoire d`internet : Issu d`une

Transcription

Documents pareils

le rallye photo

Partie 1: Le web et le langage HTML

Créer une page HTML5

Fiche BALISES - JCM Distribution

HTML : que cachent donc ces quatre lettres ?

Langage HTML 5

Roadbook parcours découverte