January 2014 ~ Programming Tutorials

HTML Tutorial

This is a set of HTML tutorial. If you want to know web designing or blogging or other related to this filed, You must know HTML.

CSS Tutorial

As a web designer, you probably spend more time working with text than any other element.

PHP tutorial

We have already added PHP tutorial and Database Tutorial.

Internet

The best ways to make money both online and offline as a student. Lots of original ideas on how to make money quickly and easily to boost your finances.

Video Tutorials

Not everyone learns by reading books! Often the best way is to watch someone else first.

Wednesday, January 22, 2014

Background Properties

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

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

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


Sunday, January 19, 2014

Types - External Style Sheet

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: 

Types - User Defined

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: 

Internal Styles - Identifiers

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

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: 

CSS Style Types>>Topic-01

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:
<font style="color: red; background-color: orange;"> Test Font </font>

Result:


Test Font
 

Internal Styles
universal, 
identifiers, 
user defined
. 


Rule with 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:
<hr style="color: #f00; background: #f00; width: 75%; height: 5px;">
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

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

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

<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

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)

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:

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

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

ValueOrdering Style
11, 2, 3, ...
ii, ii, iii, ...
II, II, III, ...
aa, b, c, ...
AA, 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