Technoblog

Windows 8 Images

2011-11-13T21:07:00.001-08:00

Creating Email links

2011-11-09T23:47:00.000-08:00

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

2011-11-09T23:42:00.000-08:00

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

2011-11-09T23:41:00.000-08:00

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

2011-11-09T23:39:00.000-08:00

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

2011-11-09T23:36:00.000-08:00

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 () 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

2011-11-09T23:31:00.000-08:00

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

2011-11-09T23:22:00.000-08:00

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

2011-11-09T23:18:00.000-08:00

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()">
 This is an example of an
 <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.0 Strict document. 
 <img id="validation-icon"
 src="http://www.w3.org/Icons/valid-xhtml10"
 alt="Valid XHTML 1.0 Strict" /> 
 <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" />
 
 </body>
</html>

Position and aligh text with CSS

2011-11-09T23:12:00.000-08:00

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

2011-11-09T23:08:00.000-08:00

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

2011-11-09T22:38:00.000-08:00

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

Example:

Result:

Select Font Colours in CSS

2011-11-09T22:22:00.000-08:00

The color property sets the color of the font

Example:

Result Will be :

Select Font Family in CSS

2011-11-07T01:03:00.001-08:00

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


This is arial font



This is Times New Roman font



This is Verdana font



This is Monotype Corsiva font


Result

Adjust font size in CSS

2011-11-07T00:51:00.001-08:00

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

Code Example:

Example Result:

Inline CSS

2011-11-07T00:23:00.001-08:00

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 :

Identify Quotation with <q>

2011-11-07T00:12:00.001-08:00

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>

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

</body>

</html>

Result

<hr/> - Horizontal Rule

2011-11-06T23:56:00.001-08:00

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 :

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

Result :

First sentence goes here

Second sentence goes here

HTML Line breaks

2011-11-06T23:48:00.001-08:00

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 within the code is the same as pressing the return key in a word processor. Use the tag within the (paragraph) tag.

Examples:

Code,

Hai, Pradeep 
 
Its Me… 
How are you ?

Result :

Hai, Pradeep

Its Me…
How are you ?

HTML Add Image

2011-11-06T23:43:00.001-08:00

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

2011-11-06T20:22:00.001-08:00

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 :

HTML Hyperlinks

2011-11-05T05:10:00.001-07:00

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

2011-11-05T04:53:00.001-07:00

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

HTML text elements

2011-11-04T21:16:00.001-07:00

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

Indentifying text with text elements

 The emphasis element is an element used for emphasizing important portions of a document. It generally displays Italicized text.
 The strong element indicates stronger emphasis than does 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

2011-11-04T21:14:00.001-07:00

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 element.

This element creates a superscript
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 superscript and Subscript elements.

</body>

</html>

Technoblog

Windows 8 Images

Creating Email links

Set link Colours with CSS

Target attribute in link

HTML Color Chart

Colors Chart, Hexadecimal Code

CSS Class

CSS Background

Background Image - Repeat:-

Embed style sheet with the element

XHTML

Position and aligh text with CSS

Static Positioning:-

Fixed Positioning:-

Relative Positioning:-

Attach CSS Style Sheet to page

Font weight Prperty in CSS

Select Font Colours in CSS

Select Font Family in CSS

Adjust font size in CSS

Inline CSS

Identify Quotation with <q>

<hr/> - Horizontal Rule

HTML Line breaks <br/>

HTML Add Image

Ordered List in HTML

HTML Hyperlinks

Special Characters in HTML

HTML text elements

HTML Superscripts and subscripts