<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!-- This is a comment -->
Tags | |
---|---|
Paragraph <p> | Button <button> |
Headings <h1> - <h6> | Line Break <br> |
Link <a> | Horizontal Rule <hr> |
Image <img> | Division <div> |
Unordered List <ul> | HTML <html> |
Ordered List <ol> | Head <head> |
List Item <li> | Body <body> |
Table <table> | Strong <strong> |
Form <form> | Emphasis <em> |
Input <input> |
// Examples
<div></div>
<h1></h1> to <h6></h6>
<p></p>
<form></form>
// Examples
<span>
<a>
<img>
<input>
<link>
Additional information to Tags
// Syntax
<tag attribute = "value"></tag>
// Examples
<a href="http://google.com">Click</a>
<h1 id="myHeading">Heading 1</h1>
<form action = "/my-form-submitting-page" method = "post">
<!-- all our inputs will go in here -->
</form>
<input type = "text">
<input type = "date">
<input type = "color">
<input type = "file">
<input type = "checkbox">
<input type = "password">
<form action = "/sign-in-url" method = "post">
<label>Username: <input type = "text"></label>
<label>Password: <input type = "password"></label>
<button>Login</button>
</form>
Alternative syntax, using "for" and "id" attributes
Simple validations with required
attribute
<form action = "/sign-in-url" method = "post">
<label for="username">Username:</label>
<input id = "username" type = "text">
<label for="email">Email:</label>
<input id = "email" type = "email" required>
<label for="password">Password:</label>
<input id = "password" type = "password">
<button>Login</button>
</form>
<label for="password">Password:</label>
<input
type="password"
name="password"
id="password"
pattern=".{5,10}" <!-- between 5 to 10 characters -->
placeholder="your password"
required
title="5 to 10 characters" <!-- re: attribute pattern -->
>
Common examples of navigation sections are menus, tables of contents, and indexes.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
The HTML <article>
element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
<article>
<h3>Some Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget
commodo ac. Nam nisi tellus, ornare vel fringilla vel, venenatis eu mi.
</p>
</article>
Asides are frequently presented as sidebars or call-out boxes.
<aside>
<h3>Sidebar</h3>
<p>Fusce eleifend eget massa fringilla eleifend. Mauris placerat.</p>
</aside>
Using attribute controls
<video id="myvideo" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
<!-- Message to display if not supported -->
Your browser does not support video
</video>
With Custom controls
<div>
<button onclick="document.getElementById('myaudio').play()">Play</button>
<button onclick="document.getElementById('myaudio').pause()">Pause</button>
<button onclick="document.getElementById('myaudio').volume+=0.1">+ Volume</button>
<button onclick="document.getElementById('myaudio').volume-=0.1">- Volume</button>
</div>
<audio id="myaudio" src="http://www.freesound.org/data/previews/95/95026_57789-lq.mp3">
<!-- Message to display if not supported -->
Your browser does not support audio
</audio>
Draw different shapes and text using Javascript
// HTML
<canvas id="myCanvas" width="300" height="300"></canvas>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
Draw a rectangle
ctx.fillStyle='red';
ctx.fillRect(75, 75, 150, 150); //leftover, leftover, width, height
Draw a line
ctx.moveTo(0,0);
ctx.lineTo(250, 100);
ctx.stroke();
Draw a circle
ctx.beginPath();
ctx.arc(150, 150, 60, 0, 2*Math.PI);
ctx.fillStyle='green';
ctx.fill();
ctx.lineWidth=4; //add border
ctx.strokeStyle='red';
ctx.stroke();
Draw Text
ctx.font = '50px Arial';
ctx.strokeStyle='red';
ctx.strokeText('Hello World', 20, 150);
Draw Gradient
var grd = ctx.createLinearGradient(0,0,50,0);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'white');
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,150);
Drawing shapes and text using XHTML instead of using JavaScript
Draw circle
<svg width="300" height="300">
<!-- x-axis, y-axis, radius, border color -->
<circle cx="100" cy="100" r="80" stroke="red" stroke-width="4" fill="green" />
Sorry, your browser does not support inline SVG
</svg>
Draw Rectangle
<svg width="400" height="200">
<rect width="300" height="100" style="fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
Draw Polygon
`html
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
Draw Ellipse with Text (logo)
<svg height="130" width="500">
<ellipse cx="105" cy="70" rx="85" ry="60" fill="black" />
<text fill="#ffffff" font-size="45" font-family="Tahoma" x="50" y="86">LOGO</text>
</svg>
Local/session storage has to be a string
localStorage
string will be kept until you clear the cache even if you close the browser
Use sessionStroage
if you want to clear the string when you close the broswer
You can view the valued stored in local & session storage under tab Application in Chrome
if(typeof(Storage) !== "undefined"){
// Store an item
localStorage.setItem('name', 'John Doe');
// Remove an item
//localStorage.removeItem('name');
// Get Item
console.log(localStorage.name); //F12: show console in chrome
if(localStorage.name){
//get item and display in browser
document.getElementById('name').innerHTML=localStorage.getItem('name');
} else {
document.getElementById('name').innerHTML='No Name Found';
}
} else {
console.log('localStorage Not Available');
}
if(typeof(Storage) !== "undefined"){
// Store an item
sessionStorage.setItem('name', 'Matt Smith');
// Remove an item
//sessionStorage.removeItem('name');
// Get Item
console.log(sessionStorage.name);
if(sessionStorage.name){
document.getElementById('name').innerHTML=sessionStorage.getItem('name');
} else {
document.getElementById('name').innerHTML='No Name Found';
}
} else {
console.log('sessionStorage Not Available');
}
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<!-- Without the CSS style tag, can't see the box defined -->
<style>
#box{
width:300px;
height:150px;
padding:10px;
border:1px solid #ccc; //grey
}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
//hold the data being dragged
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!-- Add attributes to box: ondrop, ondragover -->
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<!-- Add attributes to image: draggable, ondragstart -->
<img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)" width="291" height="145">
<!-- Add attribute contenteditable to header 1 -->
<h1 contenteditable="true">This text can be edited</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<body>
<button onclick="getLocation()">Get Coords</button>
<h1 id="coords"></h1>
<!-- server ampps -->
<script>
var x = document.getElementById('coords');
function getLocation(){
if(navigator.geolocation){ //check if api is available in browser
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported";
}
function showPosition(position){
//console.log(position.coords.latitude);
//innerHTML: print on screen (webpage)
x.innerHTML = "Latitude: "+ position.coords.latitude + "<br>Longitude: "+ position.coords.longitude;
}
}
</script>
</body>
</html>