Tag Archives: Approach

HTML5 Elements

In the previous chapter we have discussed about some of the basic HTML 4 elements. Apart form those HTML 5 has introduced some other useful elements and tags and also some of the old elements removed in HTML 5. Let’s discuss those in detail.

HTML 5 New Elements

<canvas>
<details>
<datagrid>
<menu>
<summary> Defines a visible heading for a <details> element
<mark>  to indicate content that is marked in some fashion
<time>  to indicate content that is a time or date
<meter>  to indicate content that is a fraction of a known range – such as disk usage
<progress>  to indicate the progress of a task towards completion
<wbr>

HTML 5 Media Elements

<audio>
<video>
<source>
<embed>
<track>

HTML 5 Form Input Type

datetime
datetime-local
date
month
week
time
number
range

email
url

(Click here for more detail about HTML 5 form elements and input types)

Some elements removed in HTML 5

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • strike
  • tt

Introduction to HTML5

HTML stands for Hyper Text Markup Language. HTML is an application of the Standard Generalized Markup Language (SGML) which is the International Standard (ISO 8879) for text markup. As you know HTML is not a programming language, it is a markup language and it is a set of markup tags. Thelatest version on HTML is know as HTML5. HTML5 has many new tags and attributes to make web sitedesigning simple and attractive. You can create simple and nice animation with the help of HTML5 and CSS3.

What’s new in HTML 5

Let’s discuss what are the new tags and attributes introduced in HTML 5. For the very beginning it makes the document type very simple. Forget about the long document type used in the older version of HTML.

HTML 5 Doctype and Charset

<!doctype html>
<meta charset="UTF-8">

Yes, very simple. To define document type just use doctype as html and for character encoding use charset =’UTF-8′ or something like that.

HTML 5 Structure

HTML 5 can recognize the structure on a web page. The new tag introduced for structure are <header>, <nav>, <section>, <aside>, <article>, <figure>.

<header>   It defines the header part of a webpage.
<nav>  It defines the navigation menu on a webpage.
<section> It used to define the sections of a webpage.
<aside>  It used to defines sidebar on a webpage.
<article>  It defines the content area on a webpage.
<figure>  It defines images that embedded in a webpage content.
<footer>  It defines the footer of a webpage.

You can assign a class or Id to the above tags as you do it for <div> tag.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML 5 Page</title>
<meta name="title" content="My First HTML 5 Page"/>
<meta name="description" content="My First HTML 5 Page"/>
<meta name="keywords" content="My First HTML 5 Page"/>
<meta charset="utf-8">
</head>
<body>

<!-- header -->
<header>
<div> <!-- Head section goes here --> </div>
</header>

<!-- menu -->
<nav>
<div> <!-- Top menu goes here --></div>
</nav>

<!-- Sidebar -->
<aside>
<!-- Left side bar goes here -->
</aside>

<!-- content -->
<section>
<div>
<article><!-- First article goes here --> </article>
<article><!-- Second article goes here --> </article>
</div>
</section>

<!-- footer -->
<footer>
<!-- Footer content goes here -->
</footer>

</body>
</html>

Responsive Table Design

Responsive HTML Table

Lets create our first responsive table. Here we will discuss about two type of table design, one is when the screen width reduce the scroll bar will display and another one is the table will increase row wise. The following image shows how it change on resolution change. We have used bootstrap.css to designthe table.

Table With Scrollbar:

The same table in small resolution

Here you can see the scroll.

Table Structure – 2

The same table in small resolution

Download File from here

Responsive Webpage Layout

Responsive Webpage Layout Design

Lets create our first responsive web page. As we discuss before our layout should auto resize in different screen resolution and should work fine in different device like computers, iPads and phones.

Click here to view list of devise and screen resolution in pixels.

HTML Code:

<body>
<div>
<!-- Heasder Starts Here --> 
<header>
<div> <!-- Head section goes here --> </div>
</header>
<!-- menu -->
<nav>
<div> <!-- Top menu goes here --></div>
</nav>
<div>
<!-- Sidebar -->
<aside>
<!-- Left side bar goes here -->
</aside>
<!-- content -->
<section>
<div>
<!-- Text Content Goes here -->
</div>
</section>
</div>
<!-- footer -->
<footer>
<!-- Footer content goes here -->
</footer>
</div> <!-- End of Wrapper -->
</body>

Output:

CSS Code:

body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background-color:#F1F1F1;
max-width: 980px;
margin: 0 auto;
}
.wrapper{ 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto;
}

.header{
float: left;
width: 100%;
height: 120px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 0 0;
background-color: #e9f7fd;
}
.menu{
float: left;
width: 100%;
height: 40px;
border: 5px solid #007aad; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#009bdb;
}
.content{
float: left;
width: 100%;
border: 5px solid #FFFFFF; 
border-radius: 10px;
margin: 5px 0 0 0;
background-color:#FFFFFF; 
}

.left-side{
float: left;
width: 220px; 
margin: 5px;
border-radius: 10px;
background-color:#009bdb;
min-height: 600px; 
height: auto !important; 
height: 600px; 
}
.container{
float: left;
width: 740px; 
min-height: 600px; 
height: auto !important; 
height: 600px; 
margin: 5px;
border-radius: 10px;
background-color:#F5F5F5; 
}
.footer{
float: left;
width: 100%;
height: 60px;
border: 5px solid #FFFFFF;
border-radius: 10px;
margin: 5px 0 10px 0;
background-color: #bdc8cd;
}

/* Lets make the Design Responsive */

@media (min-width: 960px) and (max-width: 1023px) { 
/* CSS for browsers less than 1024px*/
body { max-width: 920px; }
.left-side{ width: 200px; }
.container{ width: 700px; }
}

@media (min-width: 768px) and (max-width: 959px) { 
/* CSS for browsers less than 960px*/
body { max-width: 720px; }
.left-side{ width: 200px; }
.container{ width: 500px; } 
}

@media (min-width: 600px) and (max-width: 767px) { 
/* CSS for browsers less than 768px*/
body { max-width: 580px; }
.left-side{ width: 200px; }
.container{ width: 360px; }
}

@media (min-width: 480px) and (max-width: 599px) { 
/* CSS for browsers less than 600px*/
body { max-width: 460px; }
.header{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 450px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 445px; margin: 5px 2px 5px 2px;}
.container{ width: 445px; margin: 5px 2px 5px 2px; } 
.footer{ width: 450px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (min-width: 320px) and (max-width: 479px) { 
/* CSS for browsers less than 480px*/
body { max-width: 310px; }
.header{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.menu{ width: 300px; border: 3px solid #007aad; border-radius: 5px; }
.content{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
.left-side{ width: 294px; margin: 5px 2px 5px 2px;}
.container{ width: 294px; margin: 5px 2px 5px 2px; } 
.footer{ width: 300px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (max-width: 319px) { /* CSS For 320px or less browsers */
body { max-width: 100%; }
.left-side{ width: 96%; }
.container{ width: 96%; }
}

Download File from here

Media Width/ Device Width

Responsive Web Design Media Width Viewport Size

The Following table shows screen resolution for different devices. For more detail please visit wikipedia. It is always better to write your media query in your CSS file for the following resolutions. 320px, 480px, 600px, 800px, 960px, 1024px and 1280px+. Click here to know how to crate a css file for responsive web design.

Device Name With Resolution
Company Model Diagonal
cm/in
Resolution Viewport
Apple iPad – 1st Gen, 2 25 (9.7) 1024 x 768 768 x 1024
Apple iPad – 3rd Gen, 4th Gen 25 (9.7) 2048 x 1536 768 x 1024
Apple iPad Mini – 1st Gen 20 (7.9) 1024 x 768 768 x 1024
Apple iPhone 4 / iPod Touch 8.9 (3.5) 960 x 640 320 x 480
Apple iPhone 4S / iPod Touch 8.9 (3.5) 960 x 640 320 x 480
Apple iPhone 5 10 (4) 1136 x 640 320 x 568
Apple iMac 21.5-inch 55 (21.5) 1920 x 1080 1920 x 1080
Apple iMac 27-inch 69 (27) 2560 x 1440 2560 x 1440
Blackberry BlackBerry PlayBook 18 (7) 1024 x 600 600 x 1024
Blackberry BlackBerry Z10 11 (4.2) 1280 x 768 345 x 521
Nokia Lumia 710 9.4 (3.7) 800 x 480 320 x 480
Motorola Motorola Defy 9.4 (3.7) 854 × 480 320 x 569
Motorola Motorola Droid 9.4 (3.7) 480 x 854 360 x 599
Motorola Motorola Droid Razr 11 (4.3) 540 x 960 360 x 640
Motorola Motorola Razr HD 4G 12 (4.7) 720 x 1280 360 x 598
Motorola Motorola Milestone 9.4 (3.7) 480 x 854 320 x 569
Motorola Motorola Xoom 25.7 (10.1) 800 x 1280 800 x 1280
Nokia Lumia 800 9.4 (3.7) 800 x 480 320 x 480
Nokia Lumia 820 11 (4.3) 800 x 480 320 x 480
Nokia Lumia 900 11 (4.3) 800 x 480 320 x 480
Nokia Lumia 920 11 (4.5) 1280 x 768 320 x 480
Nokia Lumia 1020 11 (4.5) 1280 x 768  –
Samsung Galaxy W (I8150) 9.4 (3.7) 480 x 800  –
Samsung Galaxy S 10 (4.0) 480 x 800 320 x 534
Samsung Galaxy SII 10.8 (4.27) 480 x 800 320 x 533
Samsung Galaxy S III (I9300) 12 (4.8) 720 x 1280 360 x 640
Samsung Galaxy S4 (I9500) 13 (5) 1080 x 1920
Samsung Galaxy Nexus 11.8 (4.65) 720 x 1280 320 x 532
Samsung Galaxy Tab 18 (7) 600 x 1024 600 x 1024
Samsung Galaxy Tab 7.7 20 (7.7) 800 x 1280 800 x 1280
Samsung Galaxy Tab 10.1 26 (10.1) 800 x 1280 800 x 1280
Samsung Galaxy Note 13 (5.3) 800 x 1280 400 x 640
Samsung Galaxy Note II 14.1 (5.55) 720 x 1280 360 x 640
Samsung Galaxy Note 10.1 26 (10.1) 1280 x 800 800 x 1280
Sony Sony Vaio Z92 33 (13.1) 1600 x 900
Sony Sony Vaio Z128 33 (13.1) 1920 x 1080
Sony Sony Vaio F series 42 (16.4) 1920 x 1080
Sony Xperia S 11 (4.3) 720 x 1280 360 x 640
Sony Xperia Sola 9.4 (3.7) 480 x 854 320 x 569
Sony Xperia U 8.9 (3.5) 854 x 480 320 x 569
Sony Xperia Ion 11.6 (4.55) 720 x 1280
Sony Xperia Z 13 (5) 1920 x 1080 360 x 598
Sony Xperia E 8.9 (3.5) 320 x 480 320 x 480