Skip to content

Instantly share code, notes, and snippets.

@EdricChan03
Last active November 18, 2016 13:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EdricChan03/53b971ac18ce06f5fe2c6b3fbcc10b3e to your computer and use it in GitHub Desktop.
Save EdricChan03/53b971ac18ce06f5fe2c6b3fbcc10b3e to your computer and use it in GitHub Desktop.
<html lang="en" dir="ltr">
<head>
<!--
Add stuff you want to import
Below is the syntax for CSS files.
E.x. <link rel="stylesheet" href="main.css">
-->
<link rel="stylesheet" href="sample-css.css">
<!--
Favicon
Note that this also supports other formats such as PNG, JPEG etc.
More info: https://www.w3.org/2005/10/howto-favicon
E.x. <link rel="icon" href="favicon.png">
-->
<link rel="icon" href="favicon.ico">
<!--Meta tags-->
<!--
Meta Author tag
Used for the author who wrote the page
E.x. <meta name="author" content="John Appleseed">
-->
<meta name="author" content="Random user">
<!--
Meta keywords tag
Used for keywords when you search for any of these terms
NOTE: Keywords MUST be separated by commas.
E.x. <meta name="keywords" content="test, welcome, html, css">
Wrong format: <meta name="keywords" content="test welcome html css">
-->
<meta name="keywords" content="html, sample, docs">
<!--
Meta viewport tag
This tag is for mobile capable sites
If not included, the display will be scaled to the end consumer's device, which will be quite small.
More info + syntax: https://css-tricks.com/snippets/html/responsive-meta-tag/
E.x. <meta name="viewport" content="width=device-width, initial-scale=1.0"> (Default)
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Meta refresh tag
This tag sets how often the page refreshes.
E.x. <meta http-equiv="refresh" content="30">
Below will refresh in 2 minutes or 120 seconds
-->
<meta http-equiv="refresh" content="120">
<!--
Meta description tag
This will set a description of your web page, where you can see it on Google
E.x. <meta name="description" content="Free Web tutorials on HTML and CSS">
-->
<meta name="description" content="Some sample page that shows how to load HTML.">
</head>
<body>
<!--Main content-->
<button class="btn" onclick="doSomething()"></button>
<div id="test-content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
<script>
// Scripts go here
</script>
<!--
Source
NOTE: You MUST append a .js extension to it, or the file will not load.
-->
<script src="some-library.js"></script>
<!--
Async
The following script will load asynchronously as soon as it is available
More info: http://www.w3schools.com/tags/att_script_async.asp
-->
<script src="asynchronous.js" async></script>
<!--
Defer
This script will only load after the page has finished loading
More info: http://www.w3schools.com/tags/att_script_defer.asp
-->
<script src="defer.js" defer></script>
<!--
Script type
More info: http://www.w3schools.com/tags/att_script_type.asp
E.x. <script type="text/javascript">...</script>
Media types: http://www.iana.org/assignments/media-types/media-types.xhtml
-->
<script type="text/javascript">
// Some code
var test = document.getElementById('test-content');
test.style.color = 'blue';
</script>
</html>
#test-content {
/* Some content */
/* Background color */
background-color: #FF0000;
}
.btn {
/* !important */
background-color: blue !important;
}
function doSomething() {
alert("Hello World!");
}
function toggle(toggle) {
toggle != toggle;
return toggle;
}
var testNumber = 12;
for (var i=0;i<10;i++) {
testNumber++;
console.log("Added 1");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment