Be yourself; Everyone else is already taken.
— Oscar Wilde.
This is the first post on my new blog. I’m just getting this new blog going, so stay tuned for more. Subscribe below to get notified when I post new updates.
Editor with JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv= »CONTENT-TYPE » content= »text/html; charset=UTF-8″>
<title>Document Format Page!</title>
<style> * { font-family: Helvetica, sans-serif; font-size: auto; letter-spacing: 0.5px; }
div.scroll {
margin:4px, 4px;
padding:4px;
background-color: green;
width: auto ;
height: 300px;
overflow-x: hidden;
overflow-x: auto;
text-align:justify;
}
.imgleftp {
width: auto;
height: auto;
object-fit: cover;
float: left;
margin-right: 20px;
max-width:50%;
maw-height:50%;
}
.imgnormal {
width: 100%;
height: 100%;
float: none;
}
.imgrightp {
width: auto;
height: auto;
object-fit: cover;
float: right ;
margin-right: 20px;
max-width:50%;
maw-height:50%;
}
</style>
</head>
<body>
<br /><br />
<button id= »html_code »>HTML Code</button>
<button id= »html_preview »>HTML Preview</button>
<button id= »html_pdf »>PDF</button>
<button data-edit= »insertImage:images/map.jpg »><b>Image</b></button>
<button onclick= »imgLeft(); »><b>Image Left</b></button>
<button onclick= »imgCenter(); »><b>Image Center</b></button>
<button onclick= »imgRight(); »><b>Image Right</b></button>
<button data-edit= »bold »><b>B</b></button>
<button data-edit= »italic »><i><b>I</b></i></button>
<button data-edit= »underline »><b><u>U</u></b></button>
<button data-edit= »strikeThrough »><b><del>U</del></b></button>
<button data-edit= »superscript »><b>a</b><sup>x</sup></button>
<button data-edit= »subscript »><b>a</b><sub>x</sub></button>
<button data-edit= »backColor:red »><mark style= »background-color: red; »><b>T</b></mark></button>
<button data-edit= »backColor:blue »><mark style= »background-color: blue; »><b>T</b></mark></button>
<button data-edit= »backColor:yellow »><mark><b>T</b></mark></button>
<button data-edit= »backColor:green »><mark style= »background-color: green; »><b>T</b></mark></button>
<button data-edit= »backColor:black »><mark style= »background-color: black; color:white; »><b>T</b></mark></button>
<button data-edit= »backColor:white »><mark style= »background-color: white; »><b>T</b></mark></button>
<button data-edit= »backColor:pink »><mark style= »background-color: pink; »><b>T</b></mark></button>
<button data-edit= »backColor:violet »><mark style= »background-color: violet; »><b>T</b></mark></button>
<button data-edit= »backColor:powderblue »><mark style= »background-color: powderblue; »><b>T</b></mark></button>
<button data-edit= »ForeColor:red »><b style= »color:red »>T</b></button>
<button data-edit= »ForeColor:blue »><b style= »color:blue »>T</b></button>
<button data-edit= »ForeColor:yellow »><b style= »color:yellow »>T</b></button>
<button data-edit= »ForeColor:green »><b style= »color:green »>T</b></button>
<button data-edit= »ForeColor:black »><b style= »color:black »>T</b></button>
<button data-edit= »ForeColor:white »><b style= »color:white »>T</b></button>
<button data-edit= »ForeColor:pink »><b style= »color:pink »>T</b></button>
<button data-edit= »ForeColor:violet »><b style= »color:violet »>T</b></button>
<button data-edit= »ForeColor:powderblue »><b style= »color:powderblue »>T</b></button>
<button data-edit= »formatBlock:p »><b>P</b></button>
<button data-edit= »insertHorizontalRule »><b>Rule</b></button>
<button data-edit= »insertBrOnReturn »><b></b></button>
<button data-edit= »formatBlock:H1″><b>H</b>1</button>
<button data-edit= »formatBlock:H2″><b>H</b>2</button>
<button data-edit= »formatBlock:H3″><b>H</b>3</button>
<button data-edit= »formatBlock:H4″><b>H</b>4</button>
<button data-edit= »formatBlock:H5″><b>H</b>5</button>
<button data-edit= »formatBlock:H6″><b>H</b>6</button>
<button data-edit= »insertUnorderedList »><b>UL</b></button>
<button data-edit= »insertOrderedList »><b>OL</b></button>
<button data-edit= »justifyLeft »><b>⇤</b></button>
<button data-edit= »justifyCenter »><b>↹</b></button>
<button data-edit= »justifyFull »></button>
<button data-edit= »justifyRight »><b>⇥</b></button>
<button data-edit= »indent »>Tab In</button>
<button data-edit= »outdent »>Tab Out</button>
<button data-edit= »removeFormat »>×</button>
<button data-edit= »selectAll »>Select All</button>
<button data-edit= »copy »>Copy</button>
<button data-edit= »cut »>✂</button>
<button id= »paste » onclick= »textPaste() »>Paste</button>
<button data-edit= »delete »>⌫</button>
<button data-edit= »forwardDelete »>DEL</button>
<button data-edit= »undo »><b>↶</b></button>
<button data-edit= »redo »><b>↷</b></button>
<select id= »select_font » onchange= »changeFont(this.value); »>
<option value= »Arial »>Arial</option>
<option value= »Sans Serif » selected>Sans Serif</option>
<option value= »Comic Sans MS »>Comic Sans MS</option>
<option value= »Times New Roman »>Times New Roman</option>
<option value= »Courier New »>Courier New</option>
<option value= »Verdana »>Verdana</option>
<option value= »Trebuchet MS »>Trebuchet MS</option>
<option value= »Arial Black »>Arial Black</option>
<option value= »Impact »>Impact</option>
<option value= »Bookman »>Bookman</option>
<option value= »Garamond »>Garamond</option>
<option value= »Palatino »>Palatino</option>
<option value= »Georgia »>Georgia</option>
</select>
<button id= »text_increase_size » style= »font-weight:bold; » >S+</button>
<button id= »text_decrease_size » style= »font-weight:bold; » >S-</button>
<br/>
<br/>
<script >
//change Font Name
var font = « Arial »;
var fontId;
document.onselectionchange = OnChange;
function OnChange () {
//alert (« Document onselect « );
document.execCommand(« fontName », false, « Arial »);
var fontElements = window.getSelection().anchorNode.parentNode ;
sel = window.getSelection();
if(font != « Arial »){
font = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘face’);
}
//alert (« Font Name : » + font );
//size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
//alert (size);
//fontElements.removeAttribute(« face »);
fontElements.style.fontName = font ;
var fonts = document.querySelectorAll(« font »);
for (var i = 1; i <= fonts.length ; ++i){
fontId = « font » + (fonts.length – 1).toString();
fontElements.setAttribute(« id » , fontId);
}
}
document.getElementById(« select_font »).onclick = function() {
// Get Selection
sel = window.getSelection();
aler(« Select Text : » + sel);
}
function changeFont(font_name) {
alert (« Font Name : » + font_name);
alert (« fontId : » + fontId);
var fontElements = document.getElementById(fontId);
//fontElements.removeAttribute(« face »);
fontElements.setAttribute(« face », font_name );
}
</script>
<script>
function imgLeft(){
var images = document.querySelectorAll(« img »);
alert (« images : » + images );
// Get Selection
sel = window.getSelection();
alert (« Select : » + sel);
for (var x = 0; x < images.length; ++x) {
/*
if (images[x].parentNode.tagName != « QWE ») {
images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
}*/
if(x == imageId){
images[x].className = « imgleftp »;
}
}
}
function imgCenter(){
var images = document.querySelectorAll(« img »);
alert (« images : » + images );
// Get Selection
sel = window.getSelection();
alert (« Select : » + sel);
for (var x = 0; x < images.length; ++x) {
/*
if (images[x].parentNode.tagName != « QWE ») {
images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
}*/
if(x == imageId){
images[x].className = « imgnormal »;
}
}
}
function imgRight(){
var images = document.querySelectorAll(« img »);
alert (« images : » + images );
// Get Selection
sel = window.getSelection();
alert (« Select : » + sel);
for (var x = 0; x < images.length; ++x) {
/*
if (images[x].parentNode.tagName != « QWE ») {
images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
}*/
if(x == imageId){
images[x].className = « imgrightp »;
}
}
}
document.addEventListener(« paste », event => {
const text = event.clipboardData.getData(« text/plain »);
alert (text);
//window.document.execCommand(‘insertText’, false, text);
//document.execCommand(‘Paste’);
});
document.getElementById(« paste »).addEventListener(« click », function(){
//alert (« Paste Event « );
var editor = document.getElementById(« content »);
//alert(editor);
editor.focus();
//alert (« Paste Event « );
//var text = window.clipboardData.getData(‘Text/plain’);
//alert (« Paste Event « );
//alert (« Text : » );
//editor.select();
//document.getElementById(‘paste’).addEventListener(‘paste’, handlePaste);
var text = document.execCommand(« paste »);
//var text = window.clipboardData.getData(‘Text’);
//var event = document.addEventListener(« paste »);
//const text = event.clipboardData.getData(« text/plain »);
// alert (text);
alert (« Text : » + text );
window.document.execCommand(‘insertText’, false, text);
});
[].forEach.call(document.querySelectorAll(« [data-edit] »), function(btn) {
btn.addEventListener(« click », edit, false);
});
function edit(event) {
event.preventDefault();
var cmd_val = this.dataset.edit.split(« : »);
if(cmd_val[0] == « insertImage »){
alert (cmd_val[1]);
cmd_val[1] = prompt(« Please enter url of image « , « images/map.jpg »);
}
document.execCommand(cmd_val[0], false, cmd_val[1]);
var images = document.querySelectorAll(« img »);
for (var x = 0; x < images.length; ++x) {
/*
if (images[x].parentNode.tagName != « QWE ») {
images[x].outerHTML = « <qwe> » + images[x].outerHTML + « </qwe> »;
}*/
if(images[x].hasAttribute(« class »)){
//images[x].className = « imgnormal »;
}else{
images[x].className= »imgnormal »;
}
//
var imgId = x;
//alert(« image id : « +imgId);
images[x].setAttribute(« id »,imgId);
images[x].setAttribute(« onclick », »storeImgId(« +x+ »); »);
}
}
var imageId;
function storeImgId(id){
imageId = id;
alert(« Image Selected ! »);
}
//Add P Tag when press Enter
document.addEventListener(‘keypress’, function(e){
if(e.keyCode == ’13’) {
e.preventDefault();
document.execCommand(‘insertParagraph’, false);
document.execCommand(‘formatBlock’, false, ‘p’);
}
if(e.keyCode == ’86’) {
alert (« Ctl+V pressed key »);
e.preventDefault();
window.document.execCommand(‘insertText’, false, « test »);
//document.execCommand(‘insertParagraph’, false);
// document.execCommand(‘formatBlock’, false, ‘p’);
}
if(e.keyCode == ’67’) {
alert (« Ctl+C pressed key « );
e.preventDefault();
// document.execCommand(‘insertParagraph’, false);
// document.execCommand(‘formatBlock’, false, ‘p’);
}
}, false);
document.getElementById(« html_pdf »).onclick = function() {
var ctn = document.getElementById(« content »);
alert (ctn.innerHTML);
var sTable = ctn.innerHTML;
/*
var style = « <style> »;
style = style + « img{ background-color :red;} »
style = style + « table { background-color:red; width: 100%;font: 17px Calibri;} »;
style = style + « table, th, td {border: solid 1px #DDD; border-collapse: collapse; »;
style = style + « padding: 2px 3px;text-align: center;} »;
style = style + « </style> »;
*/
// CREATE A WINDOW OBJECT.
var win = window.open( », », ‘height=700,width=700’);
win.document.write(‘<html><head>’);
win.document.write(‘<title>Profile</title>’); // <title> FOR PDF HEADER.
//win.document.write(style); // ADD STYLE INSIDE THE HEAD TAG.
win.document.write(‘</head>’);
win.document.write(‘<body bgcolor= » »>’);
win.document.write(sTable); // THE TABLE CONTENTS INSIDE THE BODY TAG.
win.document.write(‘</body></html>’);
win.document.close(); // CLOSE THE CURRENT WINDOW.
win.print(); // PRINT THE CONTENTS.
}
document.getElementById(« html_preview »).onclick = function() {
var ctn = document.getElementById(« content »);
alert (ctn.innerHTML);
document.body.innerHTML = ctn.innerHTML;
//window.print();
}
document.getElementById(« html_code »).onclick = function() {
var ctn = document.getElementById(« content »);
alert (ctn.innerHTML);
}
document.getElementById(« html_preview »).onclick = function() {
var ctn = document.getElementById(« content »);
alert (ctn.innerHTML);
document.body.innerHTML = ctn.innerHTML
}
var intSize = « »;
// text_decrease_size
document.getElementById(« text_decrease_size »).onclick = function() {
document.execCommand(« fontSize », false, « 7 »);
var fontElements = window.getSelection().anchorNode.parentNode ;
sel = window.getSelection();
if(intSize == « »){
size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
intSize = size.replace(« px », » »);
intSize = +intSize – 10;
intSize = intSize.toString() + « px »;
}else {
intSize = intSize.replace(« px », » »);
intSize = +intSize – 10;
intSize = intSize.toString() + « px »;
}
//size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
alert (size);
fontElements.removeAttribute(« size »);
fontElements.style.fontSize = intSize ;
}
// text_increase_size
document.getElementById(« text_increase_size »).onclick = function() {
document.execCommand(« fontSize », false, « 7 »);
var fontElements = window.getSelection().anchorNode.parentNode ;
sel = window.getSelection();
if(intSize == « »){
size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
intSize = size.replace(« px », » »);
intSize = +intSize + 10;
intSize = intSize.toString() + « px »;
}else {
intSize = intSize.replace(« px », » »);
intSize = +intSize + 10;
intSize = intSize.toString() + « px »;
}
//size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue(‘font-size’);
alert (size);
fontElements.removeAttribute(« size »);
fontElements.style.fontSize = intSize ;
}
</script>
<div class= »scroll » id= »content » contenteditable>
<h1>
Hello, World!
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa. Curabitur fermentum odio risus, vel egestas ligula rhoncus id. Nam pulvinar mollis consectetur. Aenean dictum ut tellus id fringilla. Maecenas rutrum ultrices leo, sed tincidunt massa tempus ac. Suspendisse potenti. Aenean eu tempus nisl. </p>
</div>
<br/><br/>
</body>
</html>
Leçon 3: Éléments dans HTML
Un élément HTML est défini par le début d’une balise, du contenu et la fin d’une balise.
Éléments HTML
Un élément HTML se compose généralement le début d’une balise et la fin d’une balise, le contenu étant inséré entre les deux:
<tagname> Le contenu va ici … </tagname>
L’élément HTML est tout, du début de la balise à la fin de la balise :
Début de la balise
Contenu de l’élément
Fin de la balise
<h1>
Ma première rubrique
</h1>
<p>
Mon premier paragraphe.
</p>
<br>
Les éléments HTML sans contenu sont appelés éléments vides. Les éléments vides n’ont pas la fin de la balise, comme l’élément <br> (qui indique un saut de ligne).
Éléments HTML imbriqués
Les éléments HTML peuvent être imbriqués (les éléments peuvent contenir des éléments). Tous les documents HTML sont constitués d’éléments HTML imbriqués. Cet exemple contient quatre éléments HTML:
Exemple
<! DOCTYPE html>
<html>
<body>
<h1> Ma première rubrique </h1>
<p> Mon premier paragraphe. </p>
</body>
</html>
Explications de cette exemple
L’élément <html> définit l’ensemble du document. Il a le début d’une balise <html> et la fin d’une balise </html>. À l’intérieur de l’élément <html> se trouve l’élément <body>. L’élément <body> définit le corps du document. Il a le début d’une balise de <body> et la fin d’une balise </body>. À l’intérieur de l’élément <body> se trouve deux autres éléments HTML: <h1> et <p>. L’élément <h1> définit un en-tête. Il a le début d’une balise <h1> et la fin d’une balise </h1>. Le contenu de l’élément est: My First Heading. L’élément <p> définit un paragraphe. Il a le début d’une balise <p> et la fin d’une balise </p>. Le contenu de l’élément est: Mon premier paragraphe.
N’oubliez pas la fermeture de la balise
Certains éléments HTML s’afficheront correctement, même si vous oubliez la balise de fin:
Exemple
<html>
<body>
<p> Ceci est un paragraphe
<p> Ceci est un paragraphe
</body>
</html>
L’exemple ci-dessus fonctionne dans tous les navigateurs, car la balise de fermeture est considérée comme facultative.
Ne comptez jamais là-dessus. Cela peut produire des résultats inattendus et / ou des erreurs si vous oubliez fermer la balise.
Éléments vides dans HTML
Les éléments HTML sans contenu sont appelés éléments vides. <br> est un élément vide sans fermeture de la balise (la balise <br> définit un saut de ligne):
Exemple
<p> Ceci est un paragraphe <br> avec un saut de ligne. </p>. Les éléments vides peuvent être « fermés » dans l’ouverture de la balise comme ceci: <br />. HTML ne nécessite pas la fermeture d’éléments vides. Mais si vous souhaitez une validation plus stricte ou si vous devez rendre votre document lisible par les analyseurs XML, vous devez fermer correctement tous les éléments HTML. Le HTML n’est pas sensible à la casse. Les balises HTML ne sont pas sensibles à la casse: <P> signifie la même chose que <p>. La norme HTML ne nécessite pas de balises en minuscules, mais la recommandation de l’utilisation de minuscules en HTML et exige des minuscules pour les types de documents plus stricts comme XHTML.
Leçon 2: Éditeurs HTML
Apprenez le HTML à l’aide du Bloc-notes ou de TextEdit
Les pages Web peuvent être créées et modifiées à l’aide d’éditeurs HTML professionnels.
Cependant, pour apprendre le HTML, nous recommandons un éditeur de texte simple comme le Bloc-notes (PC) ou TextEdit (Mac).
Nous pensons que l’utilisation d’un simple éditeur de texte est un bon moyen d’apprendre le HTML.
Suivez les étapes ci-dessous pour créer votre première page Web avec le Bloc-notes ou TextEdit.
Étape 1: Ouvrez le bloc-notes (PC)
Windows 8 ou version ultérieure:
Ouvrez l’écran de démarrage (le symbole de la fenêtre en bas à gauche de votre écran). Tapez Bloc-notes.
Windows 7 ou version antérieure:
Ouvrez Démarrer> Programmes> Accessoires> Bloc-notes
Étape 1: Ouvrez TextEdit (Mac)
Ouvrez le Finder> Applications> TextEdit
Modifiez également certaines préférences pour que l’application enregistre correctement les fichiers. Dans Préférences> Format> choisissez « Texte brut »
Ensuite, sous « Ouvrir et enregistrer », cochez la case qui indique « Afficher les fichiers HTML sous forme de code HTML au lieu de texte formaté ».
Ouvrez ensuite un nouveau document pour placer le code.
Étape 2: écrire du HTML
Écrivez ou copiez du HTML dans le Bloc-notes.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Étape 3: enregistrer la page HTML
Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier> Enregistrer sous dans le menu Bloc-notes.
Nommez le fichier « index.htm » et définissez l’encodage sur UTF-8 (qui est l’encodage préféré pour les fichiers HTML).
Étape 4: afficher la page HTML dans votre navigateur
Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le fichier ou faites un clic droit – et choisissez « Ouvrir avec »).
Le résultat ressemblera beaucoup à ceci:
Exemples de base HTML
Dans ce chapitre, nous allons montrer quelques exemples HTML de base.
Ne vous inquiétez pas si nous utilisons des balises que vous n’avez pas encore connues.
Documents HTML
Tous les documents HTML doivent commencer par une déclaration de type de document: <! DOCTYPE html>.
Le document HTML lui-même commence par <html> et se termine par </html>.
La partie visible du document HTML se situe entre <body> et </body>.
Exemple:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Rubriques HTML
Les en-têtes HTML sont définis avec les balises <h1> à <h6>.
<h1> définit le titre le plus important. <h6> définit la rubrique la moins importante:
Exemple :
<h1> Ceci est la rubrique 1 </h1>
<h2> Ceci est la rubrique 2 </h2>
<h3> Ceci est la rubrique 3 </h3>
Paragraphes HTML
Les paragraphes HTML sont définis avec la balise <p>:
Exemple
<p> Ceci est un paragraphe. </p>
<p> Ceci est un autre paragraphe. </p>
Liens HTML
Les liens HTML sont définis avec la balise <a>:
Exemple
<a href= »https://www.google.com »> Ceci est un lien </a>
La destination du lien est spécifiée dans l’attribut href. Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments HTML. Vous en apprendrez plus sur les attributs dans un chapitre ultérieur.
Images HTML
Les images HTML sont définies avec la balise <img>.
Le fichier source (src), le texte alternatif (alt), la largeur et la hauteur sont fournis comme attributs:
Exemple
<img src = « w3schools.jpg » alt = « W3Schools.com » width = « 104 » height = « 142 »>
Boutons HTML
Les boutons HTML sont définis avec la balise <button>:
Exemple
<button> Cliquez sur moi </button>
Listes HTML
Les listes HTML sont définies avec la balise <ul> (liste non ordonnée / à puces) ou <ol> (liste ordonnée / numérotée), suivie par les balises <li> (éléments de liste):
Exemple
<ul>
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ul>
<ol>
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ol>
មេរៀនទី១១ : ព្យញ្ជនៈ L
សំឡេង ល ឬ ឡ
lien : li- ien អានថា លី-យាំង ប្រែថា ទំនាក់ទំនង
lieu : li-ieu អានថា លី-យើ ប្រែថា កន្លែង
Leçon 1: Introduction HTML
HTML est le langage de balisage standard pour les pages Web.
Avec HTML, vous pouvez créer votre propre site Web.
Le HTML est facile à apprendre – vous l’apprécierez!
Exemples dans chaque chapitre
Ce didacticiel HTML contient des centaines d’exemples HTML.
Avec notre éditeur HTML en ligne, vous pouvez éditer le HTML et cliquer sur un bouton pour voir le résultat.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Title du Page </title>
</head>
<body>
<h1>C’est un Heading</h1>
<p>C’est un paragraph.</p>
</body>
</html>
Explications de l’exemple
La déclaration <! DOCTYPE html> définit ce document comme HTML5
L’élément <html> est l’élément racine d’une page HTML
L’élément <head> contient des méta-informations sur le document
L’élément <title> spécifie un titre pour le document
L’élément <body> contient le contenu de la page visible
L’élément <h1> définit un grand en-tête
L’élément <p> définit un paragraphe
Balises HTML
Les balises HTML sont des noms d’éléments entourés de crochets:
Les balises HTML sont généralement fournies par paires comme <p> et </p>
La première balise d’une paire est le début de la balise, la deuxième balise est la fin de la balise.
La balise de fin est écrite comme la balise de début, mais avec une barre oblique insérée avant le nom de la balise
Conseil: le début dela balise est également appelé la balise d’ouverture et la fin de balise est la balise de fermeture.
Navigateurs Web
Le but d’un navigateur Web (Chrome, Edge, Firefox, Safari) est de lire des documents HTML et de les afficher.
Le navigateur n’affiche pas les balises HTML, mais les utilise pour déterminer comment afficher le document:
Structure de la page HTML
Voici une visualisation d’une structure de page HTML:
Remarque: Seul le contenu de la section <body> (la zone blanche ci-dessus) est affiché dans un navigateur.
La déclaration de <! DOCTYPE>
La déclaration <! DOCTYPE> représente le type de document et aide les navigateurs à afficher correctement les pages Web.
Il ne doit apparaître qu’une seule fois, en haut de la page (avant toute balise HTML).
La déclaration <! DOCTYPE> n’est pas sensible à la casse.
La déclaration <! DOCTYPE> pour HTML5 est:<!DOCTYPE html>
Historique HTML
Depuis les débuts du World Wide Web, il existe de nombreuses versions de HTML:
Année
Version
1989
Tim Berners-Lee a inventé www
1991
Tim Berners-Lee invente le HTML
1993
Dave Raggett rédige HTML +
1995
HTML Working Group a défini HTML 2.0
1997
Recommandation du HTML 3.2
1999
Recommandation du HTML 4.01
2000
Recommandation du XHTML 1.0
2008
WHATWG HTML5 Premier projet public
2012
WHATWG HTML5 Living Standard
2014
Recommandation du HTML5
2016
Recommandation du HTML 5.1
2017
Recommandation du HTML5.1 2e édition
2017
Recommandation du HTML5.2
មេរៀនទី១០ : ព្យញ្ជនៈ k
សំឡេង ក ឬ គ
kaki : ka- ki អានថា កា-គី ប្រែថា ពណ៍កាគី
kiosque : ki-ios-ke. អានថា កី-យូស-កឺ ប្រែថា ខ្ទម
Tutoriel de HTML
HTML est le langage de balisage standard pour les pages Web.
Avec HTML, vous pouvez créer votre propre site Web.
Le HTML est facile à apprendre – vous l’apprécierez!
Chaque exemples dans chaque chapitre
Ce didacticiel HTML contient des centaines d’exemples HTML.
Avec notre éditeur HTML en ligne, vous pouvez éditer le HTML et cliquer sur un bouton pour voir le résultat.
Exemple :
<head>
<title>Title du Page </title>
</head>
<body>
<h1>C’est un Heading</h1>
<p>C’est un paragraph.</p>
</body>
</html>
ការដាក់ចំណងជើងក្នុង HTML
HTML Headings គឺប្រភេទ tag មួយដែលប្រើសំរាប់បំឡែងពីអក្សរធម្មតារអោយទៅជាអក្សរធំ ឬអក្សរចំណងជើង (Title) ។ Tags របស់វាមានចាប់ពី <h1></h1> រហូតដល់ <h6></h6> ដែល <h1> សំរាប់កំនត់អក្សរមានទំហំធំបំផុត និង <h6> សំរាប់កំនត់អក្សរតូច បំផុត។ Web browsers នឹងបន្ថែម បន្ទាត់ទទេមួយបន្ទាត់ បន្ទាប់ពី Headings ។ដើម្បីបង្កើតវាសូមធ្វើដូចខាងក្រោម:
> Tag ដែលត្រូវប្រើគឺ <h1>?</h1> ដល <h6>?</h6> ។
> ដែល ? អក្សរសំរាប់ធ្វើជា heading ហើយ <h1></h1> ជាចំណងជើងដែលមានទំហំធំបំផុត ឯ <h6></h6> ជាចំណងជើងដែលមសនទំហំតូចបំផុត
> ទីទាំងដែលដាក់ tag គឺនៅចន្លោះ tag <body> ។
សរសេរកូដដូចនេះ
មេរៀនទី9: ព្យញ្ជនៈ j
សំឡេង ហ្ស
jambe : jam- be អានថា ហ្សម-បឺ ប្រែថា ជើង
jardin : jar-din. អានថា ហ្សារ-ដាំង ប្រែថា សួនផ្ការ ឬ រងដំណាំ
How to create Calendar with JavaScript
Create HTML Page :
<!DOCTYPE html><html> <head> <meta http-equiv= »CONTENT-TYPE » content= »text/html; charset=UTF-8″> <title> Monthly </title> <link href= »css/calendar.css » rel= »stylesheet » /> </head> <body onload=’currentDate();’> <h1> Monthly Schedule </h1> <input type= »button » id= »yesterday » value= »❮″ onclick= »yesterday() »> <label for= »today »> Today : </label> <input type= »date » id= »myDate » onchange = »changeDate(event); »> <input type= »button » id= »tomorrow » value= »❯″ onclick= »tomorrow() »> <br /> <br /> <script > function changeDate(e){ alert (« Date changed ! » ); var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate(); alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function yesterday (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1; var d = currentDate.getDate() -1; //check current date is the first day of month or not. And if it’s the first day of the current month , it’s the last day of the previous month if (d == 0){ m = m-1 ; // m – 1 cuz month 0-11 d = getDaysInMonth(m-1,y) ; } //alert ( » Month : » + m); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function tomorrow (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate() + 1; //check current date is the last day of month or not. And if it’s the last day of the current month , it’s the first day of the previous month if (d == getDaysInMonth(m-1,y) + 1){ m = m+1 ; // m – 1 cuz month 0-11 d = « 01 » ; } //alert ( » Month : » + m); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function tdClick(el){ // alert (« Cell Index : » + el.cellIndex + » Text : » + el.innerText); el.style.backgroundColor = ‘#007d00’; var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = el.innerText; //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m,d); } function CreateTable(yy, mm, dd) { //if exists table entries for the div, delete them if (table = document.getElementById(« empTable »)) { //table.destroy(); //Just clean data in the table it enough document.getElementById(« empTable »).innerHTML = « »; //alert (« Table exists ! »); /* // CREATE DYNAMIC TABLE. var table = document.createElement(‘table’); // SET THE TABLE ID. // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE. table.setAttribute(‘id’, ’empTable’); */ }else { // CREATE DYNAMIC TABLE. var table = document.createElement(‘table’); // SET THE TABLE ID. // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE. table.setAttribute(‘id’, ’empTable’); } var arrHead = new Array(); arrHead = [‘Sun’,’Mon’, ‘Tue’, ‘Wed’,’Thu’,’Fri’,’Sat’]; var arrValue = new Array(); arrValue.push([’01’, ’02’, ’03’,’04’,’05’,’06’,’07’]); arrValue.push([’08’, ’09’, ’10’,’11’,’12’,’13’,’14’]); arrValue.push([’15’, ’16’, ’17’,’18’,’19’,’20’,’21’]); arrValue.push([’22’, ’23’, ’24’,’25’,’26’,’27’,’28’]); arrValue.push([’29’, ’30’, ’01’,’02’,’03’,’04’,’05’]); var tr = table.insertRow(-1); var th = document.createElement(‘th’); // TABLE HEADER. th.innerHTML = « ❮ »; var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « prev(); »; // Set the value of the class attribute th.setAttributeNode(att); th.classList.add(« active »); tr.appendChild(th); var th = document.createElement(‘th’); var months = [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]; var monthIndex = mm-1; th.innerHTML = months[monthIndex] + ‘<br><span style= »font-size:18px »>’ + yy + ‘</span>’; th.classList.add(« active »); var att = document.createAttribute(« colspan »); // Create a « class » attribute att.value = « 5 »; // Set the value of the class attribute th.setAttributeNode(att); // Add the class attribute to <h1> tr.appendChild(th); var th = document.createElement(‘th’); th.innerHTML = « ❯ »; var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « next(); »; // Set the value of the class attribute th.setAttributeNode(att); th.classList.add(« active »); tr.appendChild(th); var tr = table.insertRow(-1); for (var h = 0; h < arrHead.length; h++) { var th = document.createElement(‘th’); // TABLE HEADER. th.innerHTML = arrHead[h]; tr.appendChild(th); } var n = 1; var nbDays = getDaysInMonth(mm-1,yy) ; //alert (« number of days » + nbDays); var firstPos = (new Date(yy+ »-« +mm+ »-01″)).getDay(); var lastPos = (new Date(yy+ »-« +mm+ »-« +nbDays)).getDay(); //alert (« First day » +firstPos + » / Last Day : » +lastPos ); var row = 6 ; for (var c = 0; c < row; c++) { tr = table.insertRow(-1); for (var j = 0; j < 7; j++) { var td = document.createElement(‘td’); // TABLE DEFINITION. td = tr.insertCell(-1); var att = document.createAttribute(« onclick »); // Create a « class » attribute att.value = « tdClick(this); »; // Set the value of the class attribute td.setAttributeNode(att); //td.innerHTML = arrValue[c][j]; // ADD VALUES TO EACH CELL. if (c == 0 ){ if(j < firstPos){ td.innerHTML = « »; td.classList.add(« blank »); }else { if (n == dd){ td.classList.add(« active »); } td.innerHTML = n; n += 1 ; } }else { if (n > nbDays){ //n = 1 ; td.innerHTML = » »; td.classList.add(« blank »); row = row – 1; }else if (n == dd){ td.innerHTML = n; td.classList.add(« active »); }else if (n == nbDays && lastPos == j){ td.innerHTML = n; row = row – 1; }else { // n += 1 ; td.innerHTML = n; } n += 1 ; } //td.innerHTML = n; //n += 1 ; } } // NOW CREATE AN INPUT BOX TYPE BUTTON USING createElement() METHOD. var button = document.createElement(‘input’); // SET INPUT ATTRIBUTE ‘type’ AND ‘value’. button.setAttribute(‘type’, ‘button’); button.setAttribute(‘value’, ‘Read Table Data’); // ADD THE BUTTON’s ‘onclick’ EVENT. button.setAttribute(‘onclick’, ‘GetTableValues()’); // FINALLY ADD THE NEWLY CREATED TABLE AND BUTTON TO THE BODY. document.body.appendChild(table); //document.body.appendChild(button); //Pass value to update dropdown var mLength = mm.toString().length; if (mLength < 2){ mm = « 0 » + mm.toString(); } var dLength = dd.toString().length; if (dLength < 2){ dd = « 0 » + dd.toString(); } document.getElementById(« myDate »).value = yy + « -« +mm+ »-« +dd; } function getDaysInMonth(m, y) { // months in JavaScript start at 0 so decrement by 1 e.g. 11 = Dec–m; // if month is Sept, Apr, Jun, Nov return 30 days if( /8|3|5|10/.test( m ) ) return 30; // if month is not Feb return 31 days if( m != 1 ) return 31; // To get this far month must be Feb ( 1 ) // if the year is a leap year then Feb has 29 days if( ( y % 4 == 0 && y % 100 != 0 ) || y % 400 == 0 ) return 29; // Not a leap year. Feb has 28 days. return 28;} function currentDate() { var currentDate = new Date(); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var mLength = m.toString().length; if (mLength < 2){ m = « 0 » + m.toString(); } var d = currentDate.getDate(); var dLength = d.toString().length; if (dLength < 2){ d = « 0 » + d.toString(); } //alert (d.toString().length); document.getElementById(« myDate »).value = y + « -« +m+ »-« +d; CreateTable(y,+m,d); } function prev (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1; var d = currentDate.getDate(); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m-1,d); } function next (){ var txtDate = document.getElementById(« myDate »).value; //alert (« My Date : » + txtDate); var currentDate = new Date (txtDate); var y = currentDate.getFullYear(); var m = currentDate.getMonth() + 1 ; var d = currentDate.getDate(); //alert (y + »/ » + m + « / » +d); var nbDIM = getDaysInMonth(m,y); //daysInMonth(y,m) ; //alert (« Number of Days in this month is » +nbDIM); CreateTable(y,m+1,d); } </script> </body></html>
Create CSS files
H1 { padding: 10px; white-space: nowrap; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color: #FFFFFF; color: #444444; text-align: center; justify-content: center; text-transform: uppercase;}INPUT { font-family: »Segoe Print », Verdan, Arial; -moz-border-radius:4px; border:1px solid gray; border-radius:4px; background-image:url(images/papier1.jpg); padding-left:8px; max-width: 100px;}table, th, td { font: 17px Calibri; border: solid 1px #DDD; border-collapse: collapse; padding: 2px 3px; text-align: center; margin: 10px 0; } th { font-weight:bold; background-color: #ddd; text-align: center; margin: 0; padding: 10px 0; }TD { padding: 10px 0; width : 10%; background: #eee; margin: 0;}.active { padding: 5px; background: #1abc9c; color: white !important}.blank { padding: 5px; background: #333 ; color: white !important}* {box-sizing: border-box;}@media screen and (max-width: 420px) { .weekdays li, .days li {width: 12.5%;} .days td .active {padding: 2px;}}@media screen and (max-width: 290px) { .weekdays td, .days td {width: 12.2%;}}
eShop 