January 2014 ~ Programming Tutorials

Wednesday, January 22, 2014

Background Properties

3:54 PM CSS

CSS Background Image :

Usage:
background-image: url('image.jpg');
background-image: none;

Definition:

Background Image can be set using the tag background-image.
It takes the image in url as said in the example.

a) Url("image directory"). We have to set the image path inside the tag url. It accepts either of the given values.
b) None, if no background image is required.

Examples

Example 1:

<div style="background-image: url('test.jpeg');"> color name <br><br><br></div>

Result:

color name

Example 2:

<font style="background-image: none; background-color: green; "> color using hex values <br><br><br><br></font>

Result:

color using hex values

Background Properties__CSS Background Color

3:51 PM CSS

BackGround Color

Usage:
background-color: red;
background-color: #343434;
background-color: transparent;

Definition:

Background Color in html can be set using the css property background-color.
It accepts values in two formats

a) Color name
b) #xxyyz where xx,yy,zz points to hexadecimal values of red,green,blue
c) Transparent background can also be set in css.

Examples

Example 1:

<font style="background-color: green;"> color name </font>

Result:

color name

Example 2:

<font style="background-color: #888888;"> html text background using css</font>

Result:

html text background using css

Example 3:

<font style="background-color: transparent; color:green;"> transparent backgrounds can also be given using css</font>

Result:

transparent backgrounds can also be given using css

Background Properties_ CSS Text/Font Color

3:47 PM CSS

Property: Color

Usage:
color: red;
color: rgb(125,234,124);
color: #343434;

Definition:

Colors for html font/text can be set using the css tag "color".
It accepts values in three formats

a) Color name
b) rgb(x,y,z) where x,y,z is red,green,blue
c) #xxyyz where xx,yy,zz points to hexadecimal(hex) values of red,green,blue

Examples

The following examples will show on how to set color for a font or text in html using css.

<div style="color: green;"> color name </div> <div style="color: rgb(125,125,125);"> color using rgb(x,y,z) </div> <div style="color: #343434;"> color using hex values</div>

Code:

<div style="color: green;"> color name </div>

<div style="color: rgb(125,125,125);"> color using rgb(x,y,z) </div>

<div style="color: #343434;"> color using hex values</div>

Result:

color name

color using rgb(x,y,z)

color using hex values

Types - External Style Sheet

1:25 PM CSS

This will be very useful when we have so many styles defined. We will want to take all the styles in to a different file. That's what we do in External CSS. We take all the styles in a external file and map it with the html page.

Example:
We will put the following style in a text file say mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

In our head we will link to the external style sheet using the tag link in header portion
Tag:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class".
Example1:

<font class=mystyle1> MY STYLE </font>

Result1:

MY STYLE

Example2:
<a href="index.php" class=mystyle1> MY STYLE </a>

Result2:

MY STYLE

Types - User Defined

1:23 PM CSS

Here user defines his own style and uses it anywhere he wants.

Code:
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class".

Example1:

<font class=mystyle1> MY STYLE </font>

Result:

MY STYLE

Example2:

<a href="index.php" class=mystyle1> MY STYLE </a>

Result:

MY STYLE

Internal Styles - Identifiers

1:18 PM CSS

If we use internal styles with identifiers, we have to set the id for the style to take effect.

Code:

<head>
<style>
a#test1
{
color: red;
background-color: orange;
}

a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

<a href="index.html" id=test1> Index </a><br><br>
<a href="index.html" id=test2> Index </a>

Now you can see how we have different styles for the same "a" tag.

Note 1: If required you can using <span> instead of <div> tags. div tag will start and end on new lines. span will not exceed the tag area.

Internal Styles - Universal

1:13 PM CSS

Example:

This page defines the style as explained above. So we can see how a "a" tag looks like

Code:

<head>
<style>
a
{
color: green;
}
</style>
</head>

Result:

INDEX

CSS Style Types>>Topic-01

1:08 PM CSS

Topic: How can I set a style in html?

Types of styles:

Basically there are three ways we can set styles for the html tags.

a) Inline
b) Internal
c) External CSS

Inline Styles
This kind of style takes values inline with the html tag

e.g:

Result:

Test Font

Internal Styles

universal,
identifiers,
user defined.

Rule with CSS

12:59 PM CSS

A fast and easy method to insert a separating line into a website is with a horizontal rule, the hr tag.

This horizontal rule:

Was bent by the following inline CSS style:

It could also be styled in your inside or exterior style sheet (which is habitually the better come within reach of):

hr {

color: #f00;

background: #f00;

width: 75%;

height: 5px;

}

Note: So as to color AND background-color are practical. This is essential, as some browsers use the background-color, others (IE) the color constituent to apply color to the rule.

HTML Anchor Tag

12:45 PM HTML

Example code:

<html>
<title>Hyperlink or Anchor - link to a location on a page
</title>
<body>
<p>
   <a href="#C1">See also Chapter 1.</a><br>
   <a href="#C2">See also Chapter 2.</a><br>
   <a href="#C6">See also Chapter 6.</a><br>
   <a href="#C12">See also Chapter 12.</a><br>
</p>
  <h3><a name="C1">Chapter 1</a></h3>
  <p>This chapter explains about html. </p>

  <h3><a name="C2">Chapter 2</a></h3>
  <p>This chapter explains advanced html tutorial.</p>

  <h3>Chapter 3</h3>
  <p>This chapter explains anchor tag.</p>

  <h3>Chapter 4</h3>
  <p>This chapter explains meta tag.</p>

  <h3>Chapter 5</h3>
  <p>This chapter explains css tutorial.</p>

  <h3><a name="C6">Chapter 6</a></h3>
  <p>This chapter explains about javascript.</p>

  <h3>Chapter 7</h3>
  <p>This chapter explains about image tag.</p>

  <h3>Chapter 8</h3>
  <p>This chapter explains about mapping image.</p>

  <h3>Chapter 9</h3>
  <p>This chapter explains more about meta tag.</p>

  <h3>Chapter 10</h3>
  <p>This chapter explains about multimedia.</p>

  <h3>Chapter 11</h3>
  <p>This chapter explains about frame.</p>

  <h3><a name="C12">Chapter 12</a></h3>
  <p>This chapter explains about iframe.</p>

  <h3>Chapter 13</h3>
  <p>This chapter explains more on anchor tag.</p>

  <h3>Chapter 14</h3>
  <p>This chapter explains about FAQ's.</p>

</body>
</html>

HTML>>acronym/abbreviation

12:43 PM HTML

Code:

<acronym title="Cascading Style Sheets">CSS</acronym>
<acronym title="Hyper Text Markup Language">HTML</acronym>
<acronym title="World Wide Web">WWW</acronym>

Result:

CSS - stands for Cascading Style Sheets

HTML - stands for Hyper Text Markup Language

WWW - stands for World Wide Web

HTML Phrase Tags

12:42 PM HTML

<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>.

<em>	Renders as emphasized text
<strong>	Renders as strong emphasized text
<dfn>	Defines a definition term
<code>	Defines computer code text
<kbd>	Defines keyboard text
<var>	Defines a variable
<tt>	Defines a teletype
<cite>	Defines a citation

Code:

<html>
<body>
<em>This is an example for emphasized</em>
<strong>This is an example for strong</strong>
<dfn>This is an example for definition</dfn>
<code>some code..some code... </code>
<kbd>This is an example for Keyboard text</kbd>
<tt>This is an example for teletype</tt>
<cite>Citation</cite>
</body>
</html>

Result:

This is emphasized
This is an example for strong
This is an example for definition
some code..some code...
This is an example for Keyboard text
This is an example for var
This is an example for teletype
Citation

Html>> Canvas

12:39 PM HTML

Using the <canvas> element is not very difficult but you do need a basic understanding of HTML and JavaScript. This tag allows you to literally create a blank canvas that you can then "paint" onto using javascript.

code:

<canvas id="test" width='100' height='100'>
// javascript: set up the canvas object for drawing
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,0);
context.lineTo(50,100);
context.stroke();

Html >>Lists with HTML Bullets - (PART_53)

12:38 PM HTML

Topic: bullet styles

code:
<ul>
<li> <b>Unordered Lists</b>
   <ul>
   <li type="disc"> Disc bullet
   <li type="circle"> Circle bullet
   <li type="square"> Square bullet
   </ul>

<li> <b>Ordered Lists</b>
   <ul>
   <li> Numbered
      <ul>
      <li> Decimal
      <li> Lowercase Roman numeral
      <li> Uppercase Roman numeral
      </ul>
   <li> Alphabetical
      <ul>
      <li> Lowercase
      <li> Uppercase
      </ul>
</ul>

Result:

Unordered Lists

Disc bullet

Circle bullet

Square bullet

Ordered Lists

Numbered

Decimal
Lowercase Roman numeral
Uppercase Roman numeral

Alphabetical

Lowercase
Uppercas

Example code:
<ol type="a" >
   <li> Decide on order type.
   <li> Use appropriate order styles.
   <li> Enjoy with different bullet styles.
</ol>

Result:

Decide on order type.
Use appropriate order styles.
Enjoy with different bullet styles.

Just change the type of <ol> to <ol="value"> to have the desired ordered list.

Value	Ordering Style
1	1, 2, 3, ...
i	i, ii, iii, ...
I	I, II, III, ...
a	a, b, c, ...
A	A, B, C, ...

Bullets with CSS:

Bullets can also be used with CSS to have a great look. Here let us have an example to add a gif file as bullets for a list using CSS.

Example code:
<ul class="TickList">
<li>hscripts</li>
<li>funmin</li>
<li>indiandir</li>
</ul>

Here goes the CSS style

<style type="text/css"> ul.TickList { list-style-image: url('tick.gif') } </style>

Result:

hscripts
funmin
indiandir

HTML Tutorial

CSS Tutorial

PHP tutorial

Internet

Video Tutorials

Wednesday, January 22, 2014

Background Properties

Background Properties__CSS Background Color

Background Properties_ CSS Text/Font Color

Sunday, January 19, 2014

Types - External Style Sheet

Types - User Defined

Internal Styles - Identifiers

Internal Styles - Universal

CSS Style Types>>Topic-01

Rule with CSS

HTML Anchor Tag

HTML>>acronym/abbreviation

HTML Phrase Tags

Html>> Canvas

Html >>Lists with HTML Bullets - (PART_53)

Visitor Counter

Blogroll

Blog Archive

Programming Tutorials

ADVERTISING

About Author

Wednesday, January 22, 2014

Sunday, January 19, 2014

Social Profiles

Visitor Counter

Blogroll

Blog Archive

Programming Tutorials

ADVERTISING

About Author