Tag Archives: Application Services

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

HTML Elements

What is HTML Elements?

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element’s content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element’s attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute=”value”> Content </element-name>). Some elements, such as <br>, do not have any content and have no closing tag.

Example

<span id="myId" style="color:blue;" 
title="a2zwebhelp">A2ZWebHelp </span>

Head elements

<title>…</title>: Define a document title. This element is required in every HTML document. Web browsers usually display the title in a window’s title bar when the window is open, and in the task bar when the window is minimized.

<title> My Home Page </title>

<link>: Specifies links to other documents. To Link an external stylesheets you can write:

<link rel="stylesheet" type="text/css" href="path to file">

<script>…</script>: Used to add JavaScript or other scripts to the document.

<script language="javascript" >…</script>

<style>…</style>: Specifies a style for the document.

<style type="text/css">…</style>

<meta>: Can be used to specify additional metadata about a document, such as author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs. Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client: for example,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML Elements with category

Category Element Name
Top-level Elements HTML
HEAD
BODY
FRAMESET
Head Elements BASE
ISINDEX Removed in HTML 5
LINK
META
SCRIPT
STYLE
TITLE
Generic Block-level Elements ADDRESS
BLOCKQUOTE
CENTER Removed in HTML 5
DELDIV
H1
H2
H3
H4
H5
H6
HR
INS
ISINDEX
NOSCRIPT * Removed in HTML 5
P
PRE
Lists DIR Removed in HTML 5
DL
DT
DD
LI
Tables TABLE
CAPTION
COLGROUP
COL
THEAD
TFOOT
TBODY
TR
TD
TH
Forms FORM
BUTTON
FIELDSET
— LEGEND
INPUT
LABEL
SELECT
— OPTGROUP
— OPTION
 
TEXTAREA
Special Inline Elements A
APPLET Removed in HTML 5
BASEFONT Removed in HTML 5
BDO
BR
FONT Removed in HTML 5
IFRAME Removed in HTML 5
IMG
MAP
— AREA
OBJECT
PARAM
Q
SCRIPT
SPAN
SUB
SUP
Phrase Elements ABBR
ACRONYM Removed in HTML 5
CITE
CODE
DEL
DFN
EM
INS
KBD
SAMP
STRONG
VAR
Font Style Elements B
BIG Removed in HTML 5
I
S
SMALL
STRIKE Removed in HTML 5
TT Removed in HTML 5
U
Frames FRAMESET – Frameset Removed in HTML 5
FRAME – Frame Removed in HTML 5
NOFRAMES – Frames alternate content Removed in HTML 5

 

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