HTML¶

Background¶

Stands for HyperText Markup Language
Created in 1989/90 for scientific and technical documents
Defines the structure of a webpage
The "nouns" of a webpage

Page Structure/ Boilerplate¶

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Comments¶

<!-- This is a comment -->

Common Tags¶

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>

Block Level Elements¶

Paired with closing tags
Always starts on a new line

Takes up full available width

// Examples
<div></div>
<h1></h1> to <h6></h6>
<p></p>
<form></form>

Inline Level Elements¶

Self-closing tag.
Does not start on a new line

Takes only width necessary

// Examples
<span>
<a>
<img>
<input>
<link>

Attributes¶

Additional information to Tags

// Syntax
<tag attribute = "value"></tag>

// Examples
<a href="http://google.com">Click</a>
<h1 id="myHeading">Heading 1</h1>

HTML Forms¶

The <form> Tag¶

<form action = "/my-form-submitting-page" method = "post">
  <!-- all our inputs will go in here -->
</form>

action: the URL to send form data to
method: the type of HTTP request

The <input> Tag¶

<input type = "text">
<input type = "date">
<input type = "color">
<input type = "file">
<input type = "checkbox">
<input type = "password">

The <label> Tag¶

<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>

Form Attributes¶

<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 -->
>

HTML5¶

HTML5 specifies scripting application programming interfaces that can be used with Javascript

Cancas & SVG
Drop and Drop
Web Storage
Geolocation
IndexedDB
Web Audio
Editable Content
App Cache

New Tags/Elements¶

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 Article Contents Element <article>¶

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>

The Aside Element <aside>¶

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>

<main>¶

The HTML <main> element represents the main content of the of a document, portion of a document, or application.

Other new tags/elements¶

<header></header>
<footer></footer>

Video & Audio¶

Video¶

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¶

<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>

Canvas¶

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);

SVG¶

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>

Web Storage¶

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

Local Storage¶

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');
}

Session Storage¶

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');
}

Drop and Drop¶

<!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>

Geoloation¶

<!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>

Table of Contents