Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

How to Responsive web design

Mobile Websites & Responsive Web Design from Go-Mobile

Mobile Websites, Convert your existing website into a mobile device friendly
 format for your visitors & customers in just a few minutes.
http://go-mobile.com

Responsive Web Design is a term coined by Ethan Marcotte that articulates how to adapt a website’s layout for multiple screen resolutions.

Choose between responsive design or a native mobile app is difficult
since both options present advantages and disadvantages for
 a cash-strapped company.


Responsive web design gives web creators some tools for making layouts
 that respond to any screen size. This article uses fluid grids,
flexible images and media.

Responsive Web Design RWD Over the last few years the devices used
 to access web applications have grown like anything. 

FluidApp is a responsive, mobile app website HTML template for iPhone,
iPad, Android and more. Coded using the latest HTML5 and CSS3 standards,
 FluidApp features are a lots.

Html Email Links


An email link is just like a standard link, except that, instead of sending you to another page,
 the link opens the associated email application so you can email the individual directly.
Email links are especially useful for contact emails for individuals,
staff members on a company site, and customer service and support feedback.

Email links use the mailto: attribute along with the HRef attribute and the recipient's
email address to accomplish this function .

 The mailto: attribute to create an email link

<a href="mailto:test@example.com">email me</a>

If you'd like to make your link a little more user-friendly, you can also add a subject line
by following the email address with a question mark (?) and the subject attribute and value .


<a href="mailto:test@example.com?subject=Connect with our technician">email</a>


You'll want to consider accessibility features for your links as well, especially the title
 attribute and a description, and tabindex if the sequential order of links on a given page is
particularly important to your site visitors.

<a href="mailto:test@example.com?subject=Connect our technician" title="email regarding Connect"
 tabindex="3">email molly</a>

W3C node types

Node type Numeric type value Description
Element - Represents an element.
Attribute - Represents an attribute.
Text-3 Represents character data in an element or attribute.


HTML 4.01 and XHTML 1.0 and 1.1 standards

As defined in the HTML 4.01 and XHTML 1.0 and 1.1 standards, a <div> tag divides your document into separate, distinct sections. It may be used strictly as an organizational tool, without any sort of formatting

Html Core Attributes

Prior to HTML 4.0, few attributes could be used consistently for all the HTML tags. HTML 4.0 changed this, defining a set of 16 core attributes that you can apply to almost all the elements in both HTML 4.01 and XHTML 1.0. For brevity, we list these core attributes   table that follows:

The svg element HTML5

The <svg> element allows the author to build a vector-based image directly in
the page using the SVG markup language.

<svg xmlns:xlink=”http://www.w3.org/1999/xlink”
xmlns=”http://www.w3.org/2000/svg”
viewBox=”0 0 200 100”
width=”200px” height=”100px”>
<circle cx=”50” cy=”50” r=”30”
style=”stroke:#0000ff; stroke-width: 5px;
fill:#ff0000;”/>
<rect x = ”100”
y = ”0”
height = ”50”
width = ”50”
stroke-width = ”2px”
stroke = ”#ffff00”
fill = ”#00ff00” />
</svg>

The context object drawing functionality HTML5

arc(): The arc command draws an arc (portion of a circle) as part of a
path. The arc is defined like a circle, with a center and radius, but also with
beginning and ending angles. If the angles describe a full circle (0 to 2 × pi
radians), the arc command will draw a full circle. See the preceding example
for a custom circle function created from the arc command.

beginPath(): This command begins the definition of a path. Normally a
path is defined by a single moveTo command, followed by a series of
lineTo commands, and finished by a stroke, closePath, or fill.

closePath(): This command connects the last point of a path (drawn
with moveTo and lineTo commands) to the first, creating a closed shape
that can be filled.

drawImage(): The drawImage command allows you to draw an image (from
an external image file) on the canvas. Many implementations allow pixel-level
manipulation, allowing you to apply custom filters and transformations to
your images, which allows far more control than the typical <img> tag.

 fill(): The fill command (and its variants — like fillRect) allows you to
apply the current fill style to elements drawn on the screen.

 fillRect(): This command builds a rectangle of a specified size and
position, filled in with the current fill style.

fillStyle(): Allows you to specify the fill style. This can be a standard
color value, or a predefined gradient.

 lineTo(): This command (along with the moveTo command) allows you
to build a path on the screen. The lineTo command takes a point as input
and draws from a previously defined point to the current point. Note that
the path is not displayed until the application of the stroke function.

lineWidth(): This defines the width of the line being drawn by a stroke
command.

 moveTo: Used in path definition, the moveTo command is used to indicate
the starting point of a path.

stroke(): This command draws the currently defined path. Note that
paths are not immediately drawn; the stroke command actually draws the
path on the screen.

The canvas tag HTML5

The <canvas> tag sets up a portion of the screen for program-controlled graphics.
The HTML simply sets aside a portion of the screen to be used as a canvas.
All the drawing and manipulation of the image is done through JavaScript code.
The following HTML code sets up a canvas element and provides a button.

<canvas id = “myCanvas”
width = “300”
height = “200”>
This example requires HTML5 canvas support
</canvas>
<button type = “button”
onclick = “draw()”>
click me to see a drawing
</button>



The canvas element does little on its own. To do anything interesting with the
canvas tag, use JavaScript to extract a drawing context (a special element that
can be drawn on) and use the methods of that context object to create dynamic
graphics. For example, here is the draw() function that will be enabled when
the user clicks the button

function draw(){
var myCanvas = document.getElementById(“myCanvas”);
var context = myCanvas.getContext(“2d”);
context.fillStyle = “blue”;
context.strokeStyle = “red”;
circle(context, 1, 1, 1);
for (i = 1; i <= 200; i+= 2){
circle(context, i, i, i, “blue”);
circle(context, 300-i, 200-i, i, “red”);
circle(context, 300-i, i, i, “blue”);
circle(context, i, 200-i, i, “red”);
} // end for
} // end draw
function circle(context, x, y, radius, color){
context.strokeStyle = color;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.stroke();
} // end circle

video element of HTML5.

The video element is one of the more anticipated features of HTML5. With this
tag, developers will be able to embed videos into a Web page without requiring
a plugin like Flash.

<video src = “bigBuck.ogv” controls>
Your browser does not support embedded video
through HTML5.
</video>


The <video> tag itself is pretty simple to understand, but the actual implementation
is somewhat complex. HTML5 indicates a video tag, but it doesn’t specify
what format the browser will support. It will not surprise you that all the
browser manufacturers have a different opinion about which format will be supported.
At the moment, there are three main video formats in contention.


If you want to incorporate HTML5 video, use the <source> tag to include all the
major formats. (You can use the free FFmpeg tool available for all major software
platforms to convert your videos.) As a final fallback, use the <embed> tag inside
your <video> tag to load the video with a Flash player.
You can use JavaScript to control the video element in the same way you control
audio. See the “audio” section earlier in this part for more information
about controlling your media elements through JavaScript code.

The details Element HTML5

This new element helps mark up a section of the document that’s hidden, but can
be expanded to reveal additional information. The aim of the element is to provide
native support for a feature common on the Web—a collapsible box that has a title,
and more info or functionality hidden away.
Normally this kind of widget is created using a combination of markup and scripting.
The inclusion of it in HTML5 intends to remove the scripting requirements and
simplify its implementation for web authors.

<details>
<summary>Some Magazines of Note</summary>
<ul>
<li><cite>Bird Watchers Digest</cite></li>
<li><cite>Rowers Weekly</cite></li>
<li><cite>Fishing Monthly</cite></li>
</ul>
</details>


If details lacks a defined summary, the user agent will define a default summary
(for example, “Details”). If you want the hidden content to be visible by default,
you can use the Boolean open attribute.

The head Element HTML5

The next part of our page is the <head> section. The first line inside the head is the
one that defines the character encoding for the document. This is another element
that’s been simplified. Here’s how you used to do this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 improves on this by reducing the character encoding <meta> tag to the bare
minimum:
<meta charset="utf-8">

In nearly all cases, utf-8 is the value you’ll be using in your documents.

The html Element HTML5

Next up in any HTML document is the html element, which has not changed significantly
with HTML5. In our example, we’ve included the lang attribute with a
value of en, which specifies that the document is in English. In XHTML-based
syntax, you’d be required to include an xmlns attribute. In HTML5, this is no longer
needed, and even the lang attribute is unnecessary for the document to validate or
function correctly.



<!doctype html>
<html lang="en">
</html>

The Doctype HTML5

First, we have the Document Type Declaration, or doctype. This is simply a way to
tell the browser—or any other parsers—what type of document they’re looking at.
In the case of HTML files, it means the specific version and flavor of HTML. The
doctype should always be the first item at the top of all your HTML files. In the
past, the doctype declaration was an ugly and hard-to-remember mess.

HTML5
has done away with that indecipherable eyesore. Now all you need is this:

<!doctype html>

A Basic HTML5 Template

As you learn HTML5 and add new techniques to your toolbox, you’re likely going
to want to build yourself a blueprint, or boilerplate, from which you can begin all
your HTML5-based projects. In fact, you’ve probably already done something similar
for your existing XHTML or HTML 4.0 projects. We encourage this, and you
may also consider using one of the many online sources that provide a basic HTML5
starting point for you.
In this project, however, we want to build our code from scratch and explain each
piece as we go along. Of course, it would be impossible for even the most fantastical
and unwieldy sample site we could dream up to include every new element or
technique, so we’ll also explain some new features that don’t fit into the project.
This way, you’ll be familiar with a wide set of options when deciding how to build
your HTML5 and CSS3 websites and web apps, so you’ll be able to use this book
as a quick reference for a number of techniques.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
1

CSS and Canvas HTML5

As with most HTML elements, CSS can be applied to the canvas element itself to add borders, padding,
margins, etc. Additionally, some CSS values are inherited by the contents of the canvas; fonts are a good
example, as fonts drawn into a canvas default to the settings of the canvas element itself.
Furthermore, properties set on the context used in canvas operations follow the syntax you may
already be familiar with from CSS. Colors and fonts, for example, use the same notation on the context
that they use throughout any HTML or CSS document.
Browser Support for HTML5 Canvas
With the arrival of Internet Explorer 9, all browser vendors now provide support for HTML5 Canvas, and
it is already in the hands of a majority of users. This is a major milestone in web development, allowing
2D drawing to thrive on the modern Web.
In spite of the dwindling market share of previous versions of Internet Explorer, it is still a good idea
to first test whether HTML5 Canvas is supported before you use the APIs. The section “Checking for
Browser Support” later in this chapter will show you how you can programmatically check for browser
support.

Overview of HTML5 Canvas

When you use a canvas element in your web page, it creates a rectangular area on the page. By default,
this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set
other attributes for your canvas element.  A Basic Canvas Element
<canvas></canvas>
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any
way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add
advanced animations to it.
The Canvas API supports the same two-dimensional drawing operations that most modern
operating systems and frameworks support. If you have ever programmed two-dimensional graphics in
recent years, you will probably feel right at home with the Canvas API because it is designed to be similar
to existing systems. If you haven’t, you’re about to discover how much more powerful a rendering
system can be than the previous images and CSS tricks developers have used for years to create web
graphics.
To programmatically use a canvas, you have to first get its context. You can then perform actions on
the context and finally apply those actions to the context. You can think of making canvas modifications
as similar to database transactions: you start a transaction, perform certain actions, and then commit
the transaction.

Using the Selectors API HTML5

getElementById() -Returns the element with the specified id attribute value
<div id="foo">
getElementById("foo");

getElementsByName() -Returns all elements whose name
attribute has the specified value
<input type="text" name="foo">
getElementsByName("foo");

getElementsByTagName() Return all elements whose tag name
matches the specified value
<input type="text">
getElementsByTagName("input");

With the new Selectors API, there are now more precise ways to specify which elements you would
like to retrieve without resorting to looping and iterating through a document using standard DOM. The
Selectors API exposes the same selector rules present in CSS as a means to find one or more elements in
the page. For example, CSS already has handy rules for selecting elements based on their nesting,
sibling, and child patterns.

CSS File for the HTML5 Page

body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
13
}
header h2 {
margin: 0px;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
One last thing to keep in mind is that browsers may seem to render things as if they actually
understand these new elements. The truth is, however, that these elements could have been renamed
foo and bar and then styled, and they would have been rendered the same way (but of course, they
would not have any benefits in search engine optimization). The one exception to this is Internet
Explorer, which requires that elements be part of the DOM. So, if you want to see these elements in IE,
you must programmatically insert them into the DOM and display them as block elements.

Sectioning HTML5 Elements

header :-Header content (for a page or a section of the page)
footer:- Footer content (for a page or a section of the page)
section:- A section in a web page
article:- Independent article content
aside:- Related content or pull quotes
nav:- Navigational aids

All of these elements can be styled with CSS. In fact, as we described in the utility design principle
earlier, HTML5 pushes the separation of content and presentation, so you have to style your page using
CSS styles in HTML5. Listing 1-1 shows what an HTML5 page might look like. It uses the new DOCTYPE,
character set, and semantic markup elements—in short, the new sectioning content. The code file
(sample.html) is available in the code/intro folder.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>Header</h1>
<h2>Subtitle</h2>
<h4>HTML5 Rocks!</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<a href="http://www.example.com">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing
elit. Vivamus at
est eros, vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque,
turpis
lorem dictum nunc.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur
adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque
odio</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing
elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
rhoncus</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>

HTML5 Content Types

Embedded:-Content that imports other resources into the document, for example audio, video,
canvas, and iframe

Flow:-Elements used in the body of documents and applications, for example form, h1, and
small
Heading :-Section headers, for example h1, h2, and hgroup
Interactive:- Content that users interact with, for example audio or video controls, button, and
textarea

Metadata:- Elements  commonly found in the head section— that set up the presentation or
behavior of the rest of the document, for example script, style, and title

Phrasing:- Text and text markup elements, for example mark, kbd, sub, and sup

Sectioning :-Elements that define sections in the document, for example article, aside, and title