|
|
|
|
Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour écrire les pages web. Il s'agit d'un format ouvert très utilisé en informatique.
Comme son nom l'indique, HTML permet d'écrire de l'hypertexte. Il permet aussi de structurer sémantiquement le texte, de créer des formulaires de saisie, d'inclure des ressources multimédias dont des images, des vidéos et des programmes informatiques. Il a été conçu pour créer des documents interopérables avec des équipements informatiques variés, dont des équipements destinés aux personnes souffrant d'un handicap nuisant à l'accessibilité du web[1].
HTML est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). Il est inspiré du Standard Generalized Markup Language (SGML).
L'anglais « Hypertext Markup Language » se traduit littéralement en « langage de balisage d'hypertexte »[2]. On utilise généralement le sigle « HTML », parfois même en répétant le mot « langage » comme dans « langage HTML ». Hypertext est parfois écrit HyperText pour marquer le T du sigle HTML[note 1].
Le public non averti parle parfois de HTM au lieu de HTML, HTM étant l'extension de nom de fichier tronquée à trois lettres, une limitation d'anciens systèmes d'exploitation de Microsoft.
Durant la première moitié des années 1990, il n'existe pas de norme du langage et son évolution est dictée par la mise en œuvre des navigateurs Web populaires. En 1995, la RFC 1866 [archive] décrit HTML 2.0, le premier standard pour HTML. Suivent en 1997 les recommandations du World Wide Web Consortium (W3C) HTML 3.2 et HTML 4. Le W3C fonde ensuite HTML sur XML, et publie XHTML 1.0 en 2000 et XHTML 1.1 en 2001. L'orientation technique choisie pour la suite du développement de XHTML n'est pas partagée par les fabricants de navigateurs web, et c'est le Web Hypertext Application Technology Working Group (WHATWG) fondé en 2004 qui développe ce qui devient la version suivante du langage, HTML5. Depuis 2007 le W3C travaille avec le WHATWG, et depuis 2019 seul le standard évolutif du WHATWG, appelé HTML living standard, fait référence.
|
|
|
AFFICHAGE DYNAMIQUE DE L'HEURE
N°64
|
|
Affichage de l'heure en temps réel |
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scripts javascript : Aperçu
<SCRIPT LANGUAGE="JavaScript">
/*
Source : http://www.editeurjavascript.com
Adaptation : http://www.outils-web.com
*/
function HeureCheckEJS()
{
krucial = new Date;
heure = krucial.getHours();
min = krucial.getMinutes();
sec = krucial.getSeconds();
jour = krucial.getDate();
mois = krucial.getMonth()+1;
annee = krucial.getFullYear();
if (sec < 10)
sec0 = "0";
else
sec0 = "";
if (min < 10)
min0 = "0";
else
min0 = "";
if (heure < 10)
heure0 = "0";
else
heure0 = "";
DinaHeure = heure0 + heure + ":" + min0 + min + ":" + sec0 + sec;
which = DinaHeure
if (document.getElementById){
document.getElementById("ejs_heure").innerHTML=which;
}
setTimeout("HeureCheckEJS()", 1000)
}
window.onload = HeureCheckEJS;
</SCRIPT>
</head>
<body>
<br /><p class="tt" >Affichage dynamique de l'heure
<div id="ejs_heure">Initialisation
</body>
</html> |
|
|
Compte à rebours
N°65
|
|
Démarrer un compte à rebours |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Script javascript Compteur à rebours : Outils-web.com
<meta name="description" content="Script javascript, Compteur à rebours, - années, mois, jours, heures, minutes, secondes avant un évènement dont vous aurez défini la la date et l'heure précise. (sympa et facile à paramétrer)" />
<meta name="Robots" content="all"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" type="text/css" href="../../css/style_pop.css"/>
<style>body {color:#000;}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0HJ2R3BJ8E"></script>
vscript>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0HJ2R3BJ8E');
</script>
<script language="JavaScript">
/* régler ici le temps de départ, à reporter aussi en dessous*/
var dix= 0
var sc= 10
var mn= 0
function chrono()
{ dix--;
if (dix<0) {dix=9;sc--}
if (sc<0) {sc=59;mn--}
time=mn+" mn "+sc+" s "+dix;
document.forme.champ1.value=time;
if (mn==0 & sc==0 & dix==0)
/*indiquer ici le message affiché à la fin*/
{alert('Il n'est pas trop tard pour continuer à utiliser outils-web.com !')}
décompte= setTimeout('chrono()', 100);}
/* régler ici le temps de départ, comme au dessus*/
function zéro()
{clearTimeout(décompte)
dix= 0;
sc=10;
mn= 0;
time=mn+" mn "+sc+" s "+dix;
document.forme.champ1.value=time;}
</script>
</head>
<body bgcolor="#FFFFFF">
<a href="http://www.outils-web.com">
<br />
Compte à rebours paramétrable
<form name="forme">
vinput type="text" size="10" name="champ1" style="background-color:#F0FFFF">
<input type="button" value="Départ" onclick="chrono()">
</form>
<br />
FERMER LA FENETRE
<br />
<div align="center">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- Scripts -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1653301921633219"
data-ad-slot="8529892455"
data-ad-format="auto"
data-full-width-responsive="true">
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="top: 20px; right: 0px; height: 50px; overflow: hidden; position: absolute">Tweeter
<a href="https://twitter.com/WebOutils" class="twitter-follow-button" data-show-count="false" data-lang="fr" data-show-screen-name="false">Suivre Outils-web
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
<div class="g-plusone" data-annotation="none">
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.outils-web.com&width&layout=button_count&action=like&show_faces=false&share=true&height=21&appId=301660269867203" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true">
</div>
<br/>
</body>
</html> |
|
|
DATE DANS LA BARRE DE TITRE
N°63
|
|
DATE DANS LA BARRE DE TITRE |
|
<html>
<head>
<script>
window.top.postMessage('{"msg_type":"resize-me","key_value":[{"key":"r_nh","value":"0"},{"key":"r_ifr","value":"true"},{"key":"qid","value":"CNex2NyNxowDFcl9pAQdmXMl2w"}],"googMsgType":"sth"}', '*');
</script>
<script>
window.top.postMessage('{"msg_type":"adsense-labs","key_value":[{"key":"settings","value":"[\"ca-pub-1653301921633219\"]"}],"googMsgType":"sth"}', '*');
</script>
</head>
</html>
|
|
|
Page HTML
N°61
|
|
Structure d'une page HTML |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document sans nom
</head>
<body>
</body>
</html> |
|
|
RAFRECHISSEMENT AUTOMATIQUE
N°62
|
|
La page se rafrechit automatiquement toutes les 5 secondes |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Script javascript Rechargement de page programm� : Outils-web.com
<meta name="description" content="Script javascript, La page se recharge en cas d'inactivit� durant une p�riode � d�finir " />
<meta name="Robots" content="all"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" type="text/css" href="../../css/style_pop.css"/>
<style>body {color:#000;}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0HJ2R3BJ8E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0HJ2R3BJ8E');
</script>
<script type="text/javascript">
var temps=0;
function go(){
document.getElementById('test').firstChild.data=temps;
/* regler le temps ici*/
if(temps<5){temps++}
else window.location.reload();
setTimeout('go()',1000)
}
</script>
</head>
<body onmousemove="temps=0" onload="go()">
<a href="http://www.outils-web.com"><img src="../../img/ow.png" border="0" width="400" height="100" alt="">
<br />Rechargement de page programm�
<br />Ne bougez pas la souris pour constater le rechargement de la page (ici 5s) :
Immobile depuis 0 sec. et la suite....
<br />
FERMER LA FENETRE
<br />
<div align="center">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- Scripts -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1653301921633219"
data-ad-slot="8529892455"
data-ad-format="auto"
data-full-width-responsive="true">
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="top: 20px; right: 0px; height: 50px; overflow: hidden; position: absolute">
<a href="https://twitter.com/WebOutils" class="twitter-follow-button" data-show-count="false" data-lang="fr" data-show-screen-name="false">Suivre Outils-web
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
<div class="g-plusone" data-annotation="none">
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.outils-web.com&width&layout=button_count&action=like&show_faces=false&share=true&height=21&appId=301660269867203" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true">
</div>
<br/>
</body>
</html> |
|
Page : [ 1 ] 2
|
|
|
|
|
|
|
|
|
|
|