JPP - Programmation

Bien des livres et des sites de référence, vous parlerons mieux que moi des prompts et de la syntaxe du langage HTML.
Mon but est simplement d'apporter quelques trucs pour agrémenter facilement vos pages sans trop de prises de tête.

Nous voulons toujours plus, plus d'images, plus d'effets spéciaux, mais il ne faut pas oublier les utilisateurs qui ont peut-être des petites machines, des anciens portables, des GSMs, des smartphones, des tablettes et surtout les mals voyants qui utilisent un terminal avec une loupe (logicielle) ou un terminal en braille pour visiter vos belles pages.

Cette course effrénée fait le jeux des éditeurs, des distributeurs de logiciels et des constructeurs de machines et des mémoires. Apprenons à rester simple dans nos présentations, les visiteurs y gagnerons dans leur temps de chargement et un maximum de machines pourront consulter votre sites et ces belles pages.

Ceci dit, rien ne vous empêche d'avoir de l'originalité et d'utiliser des artifices pour étonner vos visiteurs en associant vos idées à la puissance du HTML 5 en l'associant aux feuilles de style CSS3.

Remarques :.

Lorsque nous surfons sur le Web, on trouve souvent des pages qui sont trop chargées. Trop de couleurs, trop de texte par page et beaucoups d'images trop longues à charger.

Il faut apprendre à rester sobre pour que l'impression première reste légère et que la page reste lisible. Il faut penser aux malvoyants, aux machines lentes, les stations portables et autres machines de poche, raccordées à un téléphone portable. Il faut penser aux utilisateurs si nombreux ayant un moins bon matériel que nous et qui visualisent votre site avec des écrans dont la dimmension est moindre !

Evitez les images trop nombreuses et trop grosses (mauvaise évaluation) pour le fond d'écran et qui rendent si souvent illisible vos textes.

Utilisez seulement des images compressées aux formats .png ou .jpg pour gagner en poids.

Ne mettez pas trop d'animations sur une seule page, sauf si c'est réellement nécessaire.

Utilisez plusieurs browsers, Opera, Safari, Firefox, IE, Chrome, etc. pour tester vos pages, vous serez surpris des différences. Noubliez surtout pas le fameux "Lynx" en mode texte, toujours très utilisé, en autre par les malvoyants.

Retour au sommaire

Structure de base de la page HTML 5 :.


<!doctype html>

<html lang="fr"> // type du document

<head> // entête et définitions
  <title>Mon document</title> // titre
   . . . .
   . . . . // définitions
</head>

<body>
  . . . .
  corps de la page affichée
  . . . .
  . . . .
</body>
</html>

Le document "html" se compose de trois élémenta de base :

L'ensemble ou enveloppe du document de type "html".
Une entête "head" avec ses définitions.
Un corps "body" du document avec le contenu de votre présentation.

Dans la partie <HEAD> se trouve les balises <TITLE>Mon document</TITLE> Le 'Mon document' est le titre qui va apparaître dans la barre de titre de la fenêtre de votre navigateur.

Retour au sommaire

Surlignage d'un texte :.



<p>
texte surligné<br>
<mark>texte surligné</mark>
</p>

Voici un nouveau tag pour surligner simplement un texte.

Un exemple sur la gauche montre la mise en place de ce nouveau tag qui permet le surlignage dan sun texte.

Retour au sommaire

Cadres avec ou sans titre :.


   
<fieldset> <legend> TITRE </legend>
<p>
Avec un titre
</p>
</fieldset>
  
<fieldset>
<p>
Sans titre
</p>
</fieldset>

Une belle façon simple et efficace pour mettre sous cadres des informations, ceci avec ou sans titre avec le tag fieldset

TITRE

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Retour au sommaire

Chargement automatique :.



<head>
. . . .
<meta http-equiv=refresh content="10" />
. . . .
<meta http-equiv="refresh" content="5; url=art.htm" />
. . . . 
. . . .
. . . .
</head>

Voici une jolie astuce pour rafraîchier une page html.

Dans la partie "head" introduisez le texte du listing ci-contre, une des lignes, selon votre choix.
Le nombre indique les secondes avant le rafraîchissement ou le chargement de la nouvelle url.

Exemples:

Rafraîchissement de votre page qui affiche une image saisie par votre caméra.

Une page de bienvenue affichée x secondes avant votre home page ou pour indiquer un changement ou une action etc.

Vos pages ont changé d'emplacement, départ après x secondes sur le nouvel URL.

Retour au sommaire

Naviguer dans une page :.



<body>
<h1 id="debut">TITRE DE LA PAGE</h1>
. . . .
. . . .
Retour au <a href="#debut">début</a>
. . . .
. . . .
. . . .
Autre page <a href="suite#milieu">milieu</a>
. . . .
. . . .
</body>

Pour se déplacer dans une page, il suffit de donner un lien sur un emplacement de la page courante. Il faut pour celà profiter d'une balise avec un nom, par exemple <h1>, comme dans l'exemple de gauche et profiter ainsi de lui donner un identifiant [id=""]

Vous pouvez aussi pointer sur une autre page, mais dans son chapitre "milieu". Vous préciserez alors dans votre link, le nom de la page(suite) et son point de connection(milieu).

En pratiquant ainsi, le lecteur, peut sauter dans le texte, sans tout faire défiler.

Vous pouvez sauter au début de cette page avec le mot en lien hypertexte ou avec une image.

Retour au sommaire

Un message d'info avec un bouton :.


                
                
<form>

<input type="button" name="b1" value="Information"
onClick="alert('\nBonjour\nVive le langage HTML 5'">

</form>

Dans le corps de votre page vous pouvez simplement ajouter un ou plusieurs boutons pour donner des informations complémentaires sur le sujet traité.

Remarque : le \n donne un saut de ligne dans le texte.

Les boutons sont souvent utilisés dans les formulaires.

Retour au sommaire

Informations sur les abréviatons




<p>

<abbr title="Commité International Olympique">CIO</abbr> ...

</p>

Les acronymes et autres abréviations font partie de notre quotidien. Le problème c'est la quantité pour chacune des spécialités, en médecin, en chimie, en informatique, dans le sport, la musique, la politique etc ...

Il y a la possibilité de glisser dans le texte des informations intéressantes sur les abréviations ou autres.

Sur la partie gauche un exemple de code à introduire dans vos textes html.

Exemple: le CIO a fait une demande au CDGF

Retour au sommaire

Boutons de commande :.



<form>

  <input type="button"
            name="b1"
            value=" Haut de page "
            onClick = location="#html">
  <input type="button"
            name="b2"
            value=" Bas de page  "
            onClick = location="#bas">
  <input type="button"
            name="b3"
            value=" Home page "
            onClick = location="homepage.htm">

</form>

Il est parfois intéressant de mettre des boutons pour la navigation. Ils seront placés en bas de pages ou sur le côté. Ceux-ci sont très faciles à réaliser en langage HTML.

Retour au sommaire

Curseur :.




<b style="cursor:help">MON TEXTE SENSIBLE<b>

<b style="cursor:move">MON TEXTE SENSIBLE<b>

Vous pouvez changer la forme de votre curseur selon sa position, passez votre souris sur les textes ci-dessous.

MON TEXTE SENSIBLE 1

MON TEXTE SENSIBLE 2

Vous pouvez utiliser aussi pour le curseur, les mots suivants: crosshair, hand, move, text, pointer, resize, wait.
Bien entendu, ceci pour une utilisation sous Windows. Cela limite donc cet artifice à une utilisation sur vos fichiers Intranet.

Ne fonctionne bien que sur les device avec une souris ...

Retour au sommaire

Mise en valeur d'une image :.


<head>
  ...
  ...
  <style type="text/css">
	<!--
    figure.jp { 
		display: inline-block;
		-moz-box-shadow: 0px 0px 20px #aaa; 
		-webkit-box-shadow: 0px 0px 20px #aaa;
		box-shadow : 0px 0px 20px #aaa;
		padding: 2em; 
	}
	figcaption.jp{
		text-align : center;
		margin : 1em 0 0 0;
		color : #666;
		font-style: italic;
		font-family : arial;
		font-size: 1em
	}
    -->
  </style>
</head>


<body>
...
...
<figure class="jp">
	<br>
	<img src="piton201.jpg" width="200">
	<br>
	<figcaption class="jp"><b>Noeud de Piton<b><br>
         Photo @JP Perroud)</figcaption>
</figure>
... 
</body>

Pour mettre en valeur une image et lui donner un commentaire.

Voici quelques lignes de "style" à ajouter dans le "head" et quelques tags dans le corps pour avoir cette belle mise en valeur.

L'effet est intéressant et demande peu de code pour réaliser cette mise en valeur de l'image. On peu ajouter plusieurs images dans les tags <figure></figure> et un seul texte en commentaire avec <figcaption>

Retour au sommaire

TEST :.

Il est 10:45

Retour au sommaire

Le langage HTML ::..

Remarques :.

Structure de base de la page HTML 5 :.

Surlignage d'un texte :.

Cadres avec ou sans titre :.

Chargement automatique :.

Naviguer dans une page :.

Un message d'info avec un bouton :.

Informations sur les abréviatons

Boutons de commande :.

Curseur :.

Mise en valeur d'une image :.

TEST :.