Tag Archives: cannonbolt script

HTML Colors

You can define HTML colors as string, number or hexadecimal value. But it is always recommended to define the value as hexadecimal. All browser supports hexadecimal color codes.

RGB Colors:

RGB stands for Red, Green and Blue. The HTML format for a RGB value is rgb (Value of RED, Value of GREEN, Value of BLUE). The value range are from 0 to 255. rgb(0,0,0) stand for Black color and rgb(255,255,255) stands for White color.

<body bgcolor="rgb(255,0,0)"> - Returns Red color
<body bgcolor="rgb(0,255,0)"> - Returns Green color
<body bgcolor="rgb(0,0,255)"> - Returns Blue color
<body bgcolor="rgb(255,255,255)"> - Returns White color
<body bgcolor="rgb(0,0,0)"> - Returns Black color

Hexadecimal Colors:

A hexadecimal color code starts with a hash(#) and followed by 6 alpha numeric value. Like #000000 stands for Black color and #FFFFFF stands for White color. The First 2 letter stands for Red, next 2 forGreen and last 2 letter for Blue color. The range is from Zero (0) to F. The Hexadecimal color values are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F total 16 digits.

The Hexadecimal colors created with a simple formula.

(First digit x 16) + Second digit = RGB Color value

If you write #000000 then as per the formula (0x16 + 0) = 0 so it Will be rgb(0,0,0) and it is black in color.

If you write #FFFFFF then as per the formula ((15 x16) +15) = 255 so the result will be rgb (255,255,255) and it is white in color.

So, with the help of the above formula you can convert any hexadecimal color code to RGB.

<body bgcolor="#FF0000"> - Returns Red color
<body bgcolor="#00FF00"> - Returns Green color
<body bgcolor="#0000FF"> - Returns Blue color
<body bgcolor="#FFFFFF)"> - Returns White color
<body bgcolor="#000000"> - Returns Black color

Convert RBG Color to Hexadecimal Color:

RED GREEN BBLUE Result
#
<bgcolor=”#FFFFFF”>
<bgcolor=”rgb(255,255,255)”>

Convert Hexadecimal Color to RGB Color :

RED GREEN BBLUE
#
<bgcolor=”#FFFFFF”>
<bgcolor=”rgb(255,255,255)”>

HTML5 Forms

HTML 5 Form Input Types

Lets discuss what are the new input type introduced in HTML 5 and how to use them.

color [Browser: Opera 11+, Chrome 20+ ]

It used to give an option to the user to select a colour through a color picker. It returns the value as hexadecimal.

<input id="myColor" name="myColor" type="color">

Dates and times [Browser: Opera 11+, Chrome 20+ ]

HTML 5 has introduced 6 input types for date related functionality. Like date, datetime, datetime-local, time, week and month.

Date

<input id="myDate" name="myDate" type="date">

You can also assign date range as min and max attribute as yyyy-mm-dd format.

<input id="myDate" name="myDate" type="date" min="2013-01-01" max="2013-12-31">

Input type datetime is only supported by Opera 9+ and datetime-local will not work in any browser, though you can use it as an input type in your form. So let’s forget about both input type for now.

Time

<input id="myTime" name="myTime" type="time">

Number [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

Another input type introduced in HTML 5 is number. This will force user to enter number only. In case of Iphone the browser will display number pad only.

<input id="myNum" name="myNum" type="number">

Attributes used in number type are valueminmax and step. Value is used to set the default value and where min and max are used to set the Minimum and Maxim value of the input field. Step sets the increment or decrement value of the number field.
The following example will set the default / minimum value of the number field to 10 and maximum to 100. It will increase  or decrease by 2points each time the user change it.

<input id="myNum" name="myNum" type="number" 
       value="10" min="10" max="100" step="2">

Range [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

In order to create a Slider in HTML we can use input type range. Though this will not look fancy, you can use is as a basic slider. You can use negative values in range.
Attributes used in range are  valueminmax and step.

<input id="myRange" name="myRange" type="range" 
       value="10" min="10" max="100" step="2">

Email:

Force user to enter valid email address.

<input id="myEmail" name="myEmail" type="email">

URL:

Force user to enter valid URL.

<input id="myURL" name="myURL" type="url">

Tel:

Force user to enter valid phone number.

<input id="myPhone" name="myPhone" type="tel">

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

 

Responsive web design (RWD)

What is responsive web design?

In very simple language the website which fit in any resolution with the help of CSS is know as responsive web design. Now a days mobile and tablet users are increasing day by day, So you need to create such a web site which fit in all media. You can create responsive web page with the help of HTML5 and CSS3. Before designing your web page keep it in your mind that each and every part of your web site need to be responsive / auto resizable as the browser width changes. Photo gallery, image stroller, top menu, footer links every thing should be resizable.

How to create responsive web design?

With the help of CSS3 media queries you can create responsive web designs. CSS3 media queriesaccept AND, NOT with features like width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution etc.

There are three way to implement media queries:

1. Using @import rule
2. Writing Media Queries Directly in a Style Sheet
3. Include a query in a linked style sheet’s media attribute
Using @import rule
@import url(style600.css) screen and (min-width: 600px);
Writing Media Queries Directly in a Style Sheet
@media screen and (min-width: 600px){
  #section{
     width: 550px;
  }
}
Include a query in a linked style sheet’s media attribute
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 600px)" href="style600.css" />

Viewport in meta tag

Another important option in Responsive Web design is defining Viewport in meta tag. Viewport meta tag is used to control layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1">

Viewport Width

Many sites set their viewport to “width=320, initial-scale=1″ to fit better in iPhone, or other device having viewport 320. Please note that the screen resolution is not always same as viewport. Click here to see screen resolution and viewport of different devices.
<meta name="viewport" content="width=320, initial-scale=1">

Viewport width and Screen width