Technoblog: 2011

Sunday, 13 November 2011

Wednesday, 9 November 2011

Creating Email links

Creating Email Links on a web page

Example code for a Email link will be as follows

<a href="mailto:youremailaddress">Email Me</a>

Combine all the options and allow your visitor to send email with the address, subject and text already entered.

<a href="mailto:email@echoecho.com?subject=SweetWords
&body=Please send me a copy of your new program!">Email Me</a>

Set link Colours with CSS

If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.

Target attribute in link

The Anchor tag attribute for target tells the web browser where to open the link. There are 4 defined target presets which come in handy for many web designers of all levels. They are _blank, _self, _parent, and _top. You can also specify a descriptive name with the underscore( _ ).

_blank will open a new browser window with no name.
_self will replace the current html page, so if it is in a frame or frameset it will load within that frame. If it is the full browser, it will open to replace the page in the full browser.
_parent will replace the html page it came from.
_top will load in the current browser by replacing anything within the browser such as a frameset.

A descriptive name is used when

you want to use a named frame as your target, setting the frame name in the frameset you want it to load into.
you want for example say all your outside links to open in the same window, name the target as one.
you have popup windows that are for example larger images from a thumbnail and you want them to always open in the same window, name the target all the same.

HTML Color Chart

Colors Chart, Hexadecimal Code

Hex Code	Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF66CC
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3399
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000

Hex Code	Color
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000

Hex Code	Color
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000

Hex Code	Color
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000

Hex Code	Color
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000

Hex Code	Color
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF	DeepSkyBlue
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999	DarkCyan
#009966	Teal
#009933
#009900	Green
#0066FF
#0066CC
#006699
#006666
#006633
#006600	Dark Green
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF	Blue
#0000CC	Med. Blue
#000099	Dark Blue
#000066	Navy
#000033
#000000	Black

CSS Class

The class selector allows you to set multiple styles to the same element or tag in a document. For example, you might want to have certain sections of your text called out in a different colors from the rest of the text in the document. You would assign your paragraphs with classes like this:

CSS Code :

<style type="text/css">

  p.blue { background-color: #0000ff; }

  p.red { background-color: #ff0000; }

</style>

Then, when you want to call the various classes you would use the class attribute within the paragraph (<p></p>) tag. Any tag that did not have a class attribute would be given the default style for that tag.

HTML Code :

<p class="blue">

blue background.

</p>

<p>

normal style.

</p>
<p class="red">
 
red background color.

</p>

CSS Background

The background-color property specifies the background color of an element or page.

Example :

body {background-color:#000;} or body {background-color:black;}

Adding Background Image:-

body {background-image:url('bg.png');}

Background Image - Repeat:-

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically

Repeat horizontally (repeat-x):-

body{background-image:url('bg.png');background-repeat:repeat-x;}

Repeat vertically (repeat-y):-

body{background-image:url('bg.png');background-repeat:repeat-y;}

Embed style sheet with the element

Embed style sheet with the <style></style> element

Code for embedding CSS with HTML page
<link href="csslink.css" rel="stylesheet" type="text/css"/>

Put this code between <head><head> Tag

Example :

XHTML

XHTML (eXtensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language (HTML), the language in which web pages are written.

Example :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>XHTML 1.0 Strict Example</title>
 <script type="text/javascript">
 //<![CDATA[
 function loadpdf() {
    document.getElementById("pdf-object").src="http://www.w3.org/TR/xhtml1/xhtml1.pdf";
 }
 //]]>
 </script>
 </head>
 <body onload="loadpdf()">
 <p>This is an example of an
 <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.0 Strict document.<br />
 <img id="validation-icon"
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Strict" /><br />
 <img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 500px; width: 100%px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="pdf-object" data-original-id="pdf-object" />
 </p>
 </body>
</html>

Position and aligh text with CSS

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

CSS code:

fixed
{
position:fixed;
top:30px;
right:5px;
}

Static Positioning:-

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Fixed Positioning:-

An element with fixed position is positioned relative to the browser window.

Relative Positioning:-

A relative positioned element is positioned relative to its normal position

Attach CSS Style Sheet to page

First check out how we can add a CSS code inside HTML page.

To add CSS inside HTML page add <STYLE type="text/css"> </style> tag and add your CSS code between <style> tag.

Example:

CSS code inside HTML Page

CSS code on CSS code file

CSS code

HTML Code

Result :

Font weight Prperty in CSS

Font weight property uses to change font weight such as bold, normal etc

Example:

Result:

Select Font Colours in CSS

The color property sets the color of the font

Example:

Result Will be :

Monday, 7 November 2011

Select Font Family in CSS

The font-family property sets the font family.
Example :
Code

<p style="font-family:Arial;font-size:20px;">
This is arial font
</p>

<p style="font-family:'Times New Roman';font-size:20px;">
This is Times New Roman font
</p>

<p style="font-family:Verdana;font-size:20px;">
This is Verdana font
</p>

<p style="font-family:'Monotype Corsiva';font-size:20px;">
This is Monotype Corsiva font
</p>

Result

Adjust font size in CSS

The font-size property sets the size of a font.

Code Example:

Example Result:

Inline CSS

Writing style property the same way you would in a style sheet. But it needs to be all one line. Separate multiple properties with a semi-colon just as you would in a style sheet. Inline styles are easy and quick to add. You don't need to create a whole new document (as with external style sheets) or edit a new element in the head of your document (as with internal style sheets). You just add the style attribute that is valid on nearly every XHTML element.

Example : background:#fff; color:#000; border: solid #000 1px;

Place that line of styles inside the style attribute of the element

Example : <p style=”background:#fff; color:#000; border: solid #000 1px;”></p>

Identify Quotation with <q>

The <q> tag defines a short quotation. The browser will insert quotation marks around the quotation.

Example Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body>

<p>
Here is my short quotation - <q>a short quotation</q>
</p>

</body>

</html>

Result

Sunday, 6 November 2011

<hr/> - Horizontal Rule

The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page.

Code :

<p>First sentence goes here </p>
<hr/>
<p>Second sentence goes here</p>

Result :

First sentence goes here

Second sentence goes here

HTML Line breaks <br/>

Line breaks are different then most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within the <p> (paragraph) tag.

Examples:

Code,

<p>
Hai, Pradeep <br/>
<br/>
Its Me…<br/>
How are you ? <br/>
</p>

Result :

Hai, Pradeep

Its Me…
How are you ?

HTML Add Image

The following step illustrates how to add an image to a Web page by entering an <img> tag in the HTML file using the tags.

Image attributes and functions

alt

Alternative text to display when an image is being loaded
Especially useful for screen readers, which translate information on a computer screen into audio output
Should be a brief representation of the purpose of the image
Generally should stick to 50 characters or fewer

height

Defi nes the height of the image, measured in pixels
Improves loading time

hspace

Defi nes the horizontal space that separates the image from the text

src

Defi nes the URL of the image to be loaded

vspace

Defi nes the vertical space that separates the image from the text width
Defi nes the width of the image, measured in pixels
Improves loading time

Example :-

Ordered List in HTML

An ordered list, which also is called a numbered list, formats information in a series using numbers or letters. An ordered list works well to organize items where order must be emphasized, such as a series of steps. The <ul> and </ul> tags must be at the start and end of an unordered or bulleted list. The <ol> and </ol> tags are used at the start and end of an ordered or numbered list. Unordered and ordered lists have optional bullet and number types. An unordered list can use one of three different bullet options: disc, square, or circle. If no type is identifi ed, the default, disc, is used. An ordered list can use numbers, letters, or Roman numerals.

Example code:

<ul style="list-style-type:circle">
<li>1 - circle</li>
<li>2 - clrcle</li>
</ul>

<ul style="list-style-type:square">
<li>1 - square</li>
<li>2 - square</li>
</ul>

<ul style="list-style-type:decimal">
<li>1 - decimal</li>
<li>2 - decimal</li>
</ul>

<ul style="list-style-type:lower-roman">
<li>1 - lower-roman</li>
<li>2 - lower roman</li>
</ul>

<ul style="list-style-type:upper-roman">
<li>1 - upper roman</li>
<li>2 - upper roamn</li>
</ul>

Result :

Saturday, 5 November 2011

HTML Hyperlinks

The World Wide Web as we know it is founded on hyperlinks. A hyperlink is a location in a resource that links to another location in that resource or links to another resource. When you click on the link in your browser, your browser knows where to go through the uniform resource locator, or URL. A URL (Uniform Resource Locators) is the address that identifies a resource. Usually that resource is another Web page, although it might be something else, such as an image or video.

Use the anchor tag <a> to reference other locations. Those locations can be other locations in the same document or different documents. The marking up anchors task illustrates the use of the anchor tag for linking to other locations in the same document. This task illustrates the use of the anchor tag for navigating to other documents. You use the anchor tag’s href attribute to specify to other documents. This task illustrates using href to point to external sites using absolute URLs. The next task illustrates internal links using relative URLs.

Example : <a href="http://www.youtube.com"> YouTube – Broadcast Yourself</a>

Relative URLs

The link in main.html to sub.html simply references the file, as they are in the same folder. The link from main.html to sub two.html includes a . to indicate the current directory, a forward slash, the subdirectory’s name and the file. The link from sub two.html back to main.html includes a .. which navigates back to the next level up.

Example: <a href="../main.html">Main.</a>

Special Characters in HTML

Some characters, such as the ampersand or multiplication and division symbols, cannot be easily entered using your keyboard. HTML allows you to use codes as a convenience. But, note that we must represent the ampersand (&) symbol in HTML using the & code.

Example :

Symbol	Code
&	&	ampersand
£	£	pound sterling character
¢	¢	cent character
©	©	copyright character
®	®	registered character
°	°	degree character
±	±	plus or minus character
x	×	multiplication character
	÷	division character
“	"	quotation mark
<	<	less-than sign
>	>	greater-than sign

Friday, 4 November 2011

HTML text elements

The text elements drives their names form the intended function or purpose of the text. For example, the <strong> element stands for strong (bold) text. Generally, browsers will display <strong> text with a bold type face.

Indentifying text with text elements

<em></em> The emphasis element is an element used for emphasizing important portions of a document. It generally displays Italicized text.
<strong></strong> The strong element indicates stronger emphasis than does <em> and usually displays as bold text.
<kbd></kbd> Standing for keyboard, this element identifies its content as user input through a keyboard. Generally, it displays as a monospaced font. Some browsers also might display it as bold.
<cite></cite> The citation element identifies a portion of the document as a reference to an outside source.
<var></var> This element indicates a variable, as might be uses in computer code.
<dfn></dfn> This element identifies a portion of text as a defining instance of a term. It also generally displays in italic.
<code></code> This element not only displays in a courier, fixes width font but also indicates that the text is portion of computer code.
<samp><samp> This element identifies its content as sample output, for example from a computer program, most often rendering text in a monospaced font.
<abbr></abbr> This identifies an abbreviation.
<acronym></acronym> This element identifies text as an acronym.
<address></address> This element to set apart your address or personal information at the bottom of a web page.

HTML Superscripts and subscripts

The superscripts and subscripts elements are reflective of the need to add foot notes for source as well as the need to be able to write chemical formulas. They are also useful tools for the web page author. Perhaps you’ll need to document a source on your website by inserting a foot note reference at the end of a quotation. For this we will use <sup> element.

<sup></sup> This element creates a superscript
<sub></sub> This element forces test to display as a subscript.

To see these elements type the following codes in a notepad then save and open in a web browser.

<html>

<head>

<title>Superscript and Subscript</title>

</head>

<body>

The <sup>superscript</sup> and <sub>Subscript</sub> elements.

</body>

</html>

HTML List Contents

HTML lists are great way to organize content on Websites.

Using <ul> and <li> to create unsorted lists

We need two elements to create an unordered (bulleted) list

<ul></ul> The unordered list element creates the list
<li></li> We can specify individual items on the list with the list item element

Let us see how to use <ul> and <li>

Start with <ul> tag
Add a pair for list tags <li></li>.
For each new item add another pair of <li></li>.
To complete enter </ul> closing tag.

The must be as follows:

<html>

<head>

<titile>List Items</title>

</head>

<body>

<ul>

<li>First Item</li>
<li>First Item</li>
<li>First Item</li>

</ul>

</body>

</html>

Indentifying Deleted and Inserted Text in HTML

In the process of editing and rewriting manuscripts, deleted text is displayed with a line through the middle (strikethrough), and newly added text is displayed as underlined. That way, the writers and editors of a document can clearly discern the changes that are being made. HTML’s <del></del> and <ins></ins> perform the same function, causing text to display as strikethrough or as underlined.

<del></del> The deleted text indicates (by a strikethrough) that the text has been deleted but left in the page.
<ins></ins > The inserted text element indicates new text has been inserted to the document.

Create an HTML file using the following code to test <del> and <ins>

<html>

<head>

<title>Deleted and inserted Text</title>

</head>

<body>

Text that are <del>Deleted</del> and <ins>Inserted.</ins>

</body>

</html>

HTML Headings

The purpose of heading element is to indicate different heading levels in a document. The tags are made up of an ‘h’ with a number following it. For example to specify a level heading you would write:

<h1>Level one heading</h1>

And level 2 heading would look like this:

<h2>Level two heading<.h2>

HTML includes six heading levels: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Try typing the following HTML code to see how the six heading levels will display on a Web Browser.

<html>

<head>

<title>Title Element</title>

</head>

<body>

<h1>This is heading level one</h1>
<h2>This is heading level one</h2>
<h3>This is heading level one</h3>
<h4>This is heading level one</h4>
<h5>This is heading level one</h5>
<h5>This is heading level one</h6>

</body>

</html>

Type the above code on a Notepad and save as ‘heading.htm’ and open it in your Web Browser. The following figure shows the result. The test displays in a range of different sizes, from very large to quite small.

Wednesday, 2 November 2011

HTML Frames

Let us see how to create a simple Frame to load any web page inside a HTML page.

Check the code for loading http://my-technoblog.blogspot.com/ in a web page.

The result will look like this

HTML Radio Buttons

Radio buttons are a form element usually used for choices, such as voting. They are defined in groups where only one button at a time can be selected.

Example

Option 1
Option 2
Option 3

The HTML code of above will be like this

Radio button used standard 'input' tag.

Tuesday, 1 November 2011

Document Type Definition (DTD)

A document type definition declares the HTML version. There are three HTML 4.01 DTDs: HTML 4.01 Strict DTD; HTML 4.01 Transitional DTD; and HTML 4.01 Frameset DTD. In this book we use HTML 4.01 Transitional. You don’t really need to know too much about the doctype, other than that it is good form to add this to an HTML document’s first line.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Monday, 31 October 2011

Multiline HTML Text Box

The basic code for Multiline text box as follows

</textarea>

As with any form element, we must specify a name (in this case text). You may have noticed that, unlike the standard text box and button, this form element has a closing tag. This is because, as well as allowing the user to enter more text than other elements, it is also designed to allow the webmaster to set more initial text. Anything between the closingand opening tags will be placed inside the textbox and, unlike with standard HTML, new lines taken in your code between these tags will be shown as new lines on the page.

We can create a multiline textbox as follows.

And the HTML code might be like this

Simple HTML Tables

Let us see how to create a simple HTML Table

See a simple HTML Code below

after you have typed the code, your table should look like this illustration

A	A	A
A	A	A
A	A	A

Now its an uncomplicated table, take a look back through the HTML you've written to learn each of the element we used. You created that table with only thee elements, <table>, <tr> and <td>

<table></table> the table element creates the table. use this element for each table
<tr></tr> the table row element established, as you would expect, a row. If your table is to have ten rows, you will use this element ten times.
<td></td> td stands for table data. This element creates individual cells in a row

Formatting Ordered and Unordered lists

Ordered lists, use the following types
type="1" for list of 1, 2, 3 …
type="a" for list of a, b, c …
type="A" for list of A, B, C …
type="i" for list of i, ii, iii … (lowercase Roman numerals)
type="I" for list of I, II, III … (uppercase Roman numerals)

Unordered lists
type="disc" for list of disc
type="circle" for list of circle
type="square" for list of square

The ordered list should go from one to three and then the second list from four to six. The unordered list should be squares rather then round bullets.

Sample Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Strict//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type"content="text/HTML; charset=UTF-8">
    <title>Lists </title>
    </head>
<body>
    <h3>a, b, c, List</h3>
    <ol type="a">
        <li>Step a.</li>
        <li>Step b.</li>
        <li>Step c.</li>
    </ol>
    <h3>The Number list.</h3>
    <ol>
        <li value="3">Step four.</li>
        <li>Step five.</li>
        <li>Step six.</li>
    </ol>
    <ul type="square">
        <li>Item one.</li>
        <li>Item two.</li>
    </ul>
</body>
</html>

Friday, 28 October 2011

Diwali Decoration, Jaipur

Ubuntu 11.10

Ubuntu 11.10 released, It comes with some clever enhancements to make our Ubuntu experience even more easy and enjoyable.

And It comes with new features as follows

Ubuntu Application Center

The New Application launcher

The dash

Application switching

Saturday, 1 October 2011

Starting With HTML

HTML is a markup language and stands for Hyper Text Markup Language. HTML uses HTML markup tags to describe web pages.

Example

<html>
<title>Hello World !</title>

<body>
<h1>Hello World !</h1>
<p>Hellow World</p>
</body>

</html>

To create the above HTML page, first open note pad from Start > All Programs > Accessories > Notepad. Type the above code and choose File > Save as, then select save as type 'All' and file name 'test.html'.

Done ! open the saved test.html on any browser like Internet Explorer, Chrome of Firefox. Your web page look like this.