headfirsthtml5.html: from HTML to HTML5 (code with black color)
<!doctype html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8">
<link rel="stylesheet" href="first.css">
<script src="first.js"></script>
</head>
<body>
<div id="counterInJS"></div>
<h1>Hi, HTML5</h1>
<p>
<img src="html5_back_cover.gif" alt="reference page">
</p>
<p>
<div>Reference books:
<ul>
<li><a href=".. ">Head first HTML5 Programmin</a></li>
<li><a href=".. ">JavaScript: The Good Parts</a></li>
</ul></div>
<div class="note">
Yoopii! This is the starting my HTML5 and Javascript!<br>
- by Pomm (-:</div>
</p>
</body>
</html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8">
<link rel="stylesheet" href="first.css">
<script src="first.js"></script>
</head>
<body>
<div id="counterInJS"></div>
<h1>Hi, HTML5</h1>
<p>
<img src="html5_back_cover.gif" alt="reference page">
</p>
<p>
<div>Reference books:
<ul>
<li><a href=".. ">Head first HTML5 Programmin</a></li>
<li><a href=".. ">JavaScript: The Good Parts</a></li>
</ul></div>
<div class="note">
Yoopii! This is the starting my HTML5 and Javascript!<br>
- by Pomm (-:</div>
</p>
</body>
</html>
var c = "";
var count = 300;
var counting = setInterval(function(){counter()},1000);
function counter(){
if (count > 0){
c = "Javascript is loading in.. " + count;
count = count - 1;
} else {
c = "Congrats! Loading completed!!";
clearInterval(counting);
}
document.getElementById("counterInJS").textContent = c;
//why textContent rather than innerHTML?
//http://dochub.io/#dom/element.innerhtml
}
window.onload = counting;
//vs. using element.addEventListener()!?
//http://dochub.io/#dom/window.onload
var count = 300;
var counting = setInterval(function(){counter()},1000);
function counter(){
if (count > 0){
c = "Javascript is loading in.. " + count;
count = count - 1;
} else {
c = "Congrats! Loading completed!!";
clearInterval(counting);
}
document.getElementById("counterInJS").textContent = c;
//why textContent rather than innerHTML?
//http://dochub.io/#dom/element.innerhtml
}
window.onload = counting;
//vs. using element.addEventListener()!?
//http://dochub.io/#dom/window.onload
first.css: formating
/*HTML Elements*/
body,
h1, h2, h3,
p {
font-family: Arial, Helvetica, sans-serif;
line-height: 120%;
}
h1 {
color:orange;
text-shadow: 0 0 0.2em #CCC;
}
a:link, a:visited {color:grey;}
a:hover {color:cornflowerblue;}
/*Page Elemets*/
#counterInJS {
font-family: courier;
}
/*Other classes*/
.note{
font-size: small;
}
body,
h1, h2, h3,
p {
font-family: Arial, Helvetica, sans-serif;
line-height: 120%;
}
h1 {
color:orange;
text-shadow: 0 0 0.2em #CCC;
}
a:link, a:visited {color:grey;}
a:hover {color:cornflowerblue;}
/*Page Elemets*/
#counterInJS {
font-family: courier;
}
/*Other classes*/
.note{
font-size: small;
}
HTML5 is made up of a family of technology. In the book of Head first HTML5, it give an unofficial definition: HTML5 = HTML markup + JavaScript APIs + CSS. (also see another intro in Chinese.) One of the design principles behind HTML5 is to allowed your pages to degrade gracefully.
Software Requirements:
To write HTML5 and Javascript, you are good to go with a text editor, a brower, and sometimes a webserver. There are many editors available for Windows users such as PSPad, TextPad, EditPlus, Notepad++, or Notepad (if this is all you have). It's also encouraged to use more than one browsers for testing. Chrome and Safari, in general, are the most up-to-date. Other major browsers including Firefox, Opera, and IE are also worth to try. I'm currenlty practicing on Notepad++ with Firefox(firebug) and Chrome(developer tools and Javascript console).
Reference:
http://dochub.io/ (Mozilla Documentation)
W3School vs W3Fool (debate articles: 1 2.. )
caniuse.com (So, who is ready for up to date HTML5 and CSS?)
No comments:
Post a Comment