Archive for September 2015

Marquee Tag Stop or Start

SEOSIKHO

Marquee Tag Stop or Start

1 Open Notepad and Paste the code.

<!DOCTYPE html >
<html>
<body>
<marquee onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>
</body>
</html>

Save as file marquee.html

Output:

Go on... hover over me!

HTML MARQUEE WITH EXAMPLE

SEOSIKHO 22:47:00 1 Comment

SEOSIKHO

HTML MARQUEE SCROLL AMOUNT WITH EXAMPLE

Note: SCROLLAMOUNT value scrolls marquee slower or Faster.

Example
1 Open Notepad and paste the below code.

2 <!DOCTYPE html >
<html>
<body>

<marquee scrollamount="10">SCROLLAMOUNT marquee equals 10</marquee>
<marquee scrollamount="20">SCROLLAMOUNT marquee equals 20</marquee>

</body>
</html>

Save file.

Output:

SCROLLAMOUNT marquee equals 10 SCROLLAMOUNT marquee equals 20

2) Scroll Image with Marquee Tag

1 Open Notepad and paste the below code

<!DOCTYPE html >
<html>
<body>
<marquee direction="left"> <img src="seo.jpg" /> </marquee>

</body>
</html>

Output:

HTML MARQUEE WITH EXAMPLE

SEOSIKHO 21:55:00 1 Comment

SEOSIKHO

HTML MARQUEE WITH EXAMPLE

You can create scrolling display using <marquee> tag.

SYNTAX

<marquee attribute_name="attribute_value"....more attributes>
text message or image
</marquee>

Example

1 Open Notepad and Paste the below code.

<!DOCTYPE html >
<html>
<body>

<marquee>You can create scrolling display.</marquee>

</body>
</html>

Output:

You can create scrolling display.

Note: Default <marquee> tag scroll the text or image from right to left.

2 Alternate Marquee Behavior

1 Open Notepad and paste the below code

2 <!DOCTYPE html >
<html>
<body>

<marquee behavior="alternate">This is alternate marquee behavior</marquee>

</body>
</html>

Save as marquee.html

Output:

This is alternate marquee behavior

3. Marquee use of direction ie. Right , Left , Down ,Up

a) Right Marquee Direction

1 Open Notepad and Paste the below code

2 <!DOCTYPE html >

<html>

<body>

<marquee direction="Right">This is alternate marquee behavior</marquee>

</body>

</html>

save as right.html

Output:

This is alternate marquee behavior

b) Left Marquee Direction

1 Open Notepad and Paste the below code

<!DOCTYPE html >

<html>

<body>

<marquee direction="left">This is alternate marquee behavior</marquee>

</body>

</html>

save as right.html

Output:

This is alternate marquee behavior

c) UP Marquee Direction

1 Open Notepad and Paste the below code

<!DOCTYPE html >

<html>

<body>

<marquee direction="up">This is alternate marquee behavior</marquee>

</body>

</html>

save as right.html

Output:

This is alternate marquee behavior

d) Down Marquee Direction

1 Open Notepad and Paste the below code

<!DOCTYPE html >

<html>

<body>

<marquee direction="Down">This is alternate marquee behavior</marquee>

</body>

</html>

save as right.html

Output:

This is alternate marquee behavior

How to create a Nested HTML List

SEOSIKHO 02:11:00 1 Comment

SEOSIKHO

Nested HTML List

1 Open Notepad and past the code

<!DOCTYPE html>
<html>
<body>

<ul><li>First item</li>
<li>Second item
<ul><li>First Sub-item</li>
<li>Second Sub-item</li>
</ul></li>
</ul>

</body>

</html>

2 Save as nested.html

Output

First item
Second item
- First Sub-item
- Second Sub-item

HTML LIST (Description List)

SEOSIKHO 02:08:00 1 Comment

SEOSIKHO

Description List:

This type of list can have a description associated with its list items.

■ <dl> tag is used here which stands for description list.

■ It is used in pair.

■ The list items are enclosed in <dt> tag.

■ The description is enclosed in <dd> tag.

Syntax:

<dl>
<dt>any content</dt>
<dd>any description</dd>
<dt>any content</dt>
<dd>any description</dd>
...
...
</dl>

EXAMPLE:

1 Open Notepad and copy and paste the code .

<!DOCTYPE html>

<html>

<body>

<dl><dt>First item</dt><dd>Description of first item</dd>

<dt>Second item</dt><dd>Description of Second item</dd>

<dt>Third item</dt><dd>Description of Third item</dd>

</dl>

</body>

</html>

Output:

First item: Description of first item
Second item: Description of Second item
Third item: Description of Third item

HTML LIST (Ordered List)

SEOSIKHO 02:00:00 1 Comment

SEOSIKHO

ORDERED LIST

This type of list has numbering or alphabets in front of its items.

■ <ol> tag is used here which stands for ordered list.

■ It is used in pairs.

■ Every list item is enclosed in <li> tag.

type attributes

It defines which type of bullet will be used. It may have one of the following values-

◉ 1 ◉ a ◉ A ◉ i ◉ I

Syntax

<ol type= "1|a|A|i|I" start= "any numeric value">
<li>any content</li>
<li>any content</li>
...
...
</ol>

EXAMPLE WITH STEP WISE:

1 Bullet using number .

1 Open Notepad and past below code

<!DOCTYPE html>

<html>

<body>

<ol type="1" start="5" >

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

</body>

</html>

2 save as list.html

Output:

First item

Second item

Third item

Fourth item

2 Bullet using alphabat

1 Open Notepad and copy code.

<!DOCTYPE html>

<html>

<body>

<ol type="a" start="c" >

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

</body>

</html>

Output:

First item

Second item

Third item

Fourth item

3 . Bullet using Roman Number

1 Open Notepad and copy code.

<!DOCTYPE html>

<html>

<body>

<ol type="I" start="3" >

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

</body>

</html>

OUTPUT:

First item
Second item
Third item
Fourth item

HTML Lists

Digital vinod 22:04:00 1 Comment

Digital vinod

Unordered list:

■ This type of list has bullets in front of its items.

■ <ul> tag is used

■ Every list item is enclosed in <li> tag.

Unordered List Attributes

(Optional) It defines which type of bullet will be used. It may have one of the following values-

◉ circle

◉ disc

◉ square

◉ none

Syntax :

<ul type= "circle|disc|square|none">
<li>write here</li>
<li>write here</li>
...
</ul>

Example Unordered list with Stepwise :

1 Open Notepad
2 Copy code

<!DOCTYPE html>

<html><title> welcome to list </title>

<body>

<ul >

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ul>

</body>

</html>

Output:

First item
Second item
Third item
Fourth item

Note: ul means unordered list

Unordered List Using Attributes

1 Open notepad

2 Copy and Past Code and Save file

<!DOCTYPE html>

<html><title> welcome to list </title>

<body>

<ul type=circle>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ul>

</body>

</html>

Output

First item
Second item
Third item
Fourth item

Note: If you change <ul type=disc>

Output:

First item
Second item
Third item
Fourth item

If you change <ul type=Square>

Output:

First item
Second item
Third item
Fourth item

Colspan and row span in html

Digital vinod 02:42:00 1 Comment

Digital vinod

Col span means Merge the column and row span means merge rows
in below example 3 column are merge.

Without Colspan

Output:

Student Detail
Student Name	Roll Number	Class
student detail
vinod	01	BSC
Mohit	02	BSC

1 Open notepad

2 write code and save

<!DOCTYPE html>

<body>

<caption align=top>Student Detail</caption>

<tr> <td colspan="3"> student detail </td> </tr>

<tr>

<th>Student Name</th>

<th>Roll Number</th>

<th>Class</th>

</tr>

<tr>

<td>vinod </td>

</tr>

<tr>

<td>Mohit </td>

</tr>

</table>

</body>

</html>

Output:

Student Detail
Student Name	Roll Number	Class
student detail
vinod	01	BSC
Mohit	02	BSC

ROW span:

Copy code and paste notepad then save

the file .

<!DOCTYPE html>

<body>

<caption align=top>Student Detail</caption>

<tr> <td rowspan="4"> student detail </td> </tr>

<tr>

<th>Student Name</th>

<th>Roll Number</th>

</tr>

<tr>

<td>vinod </td>

</tr>

<tr>

<td>Mohit </td>

</tr>

</table>

</body>

</html>

Output:

Student Detail
	Student Name	Roll Number
student detail
	vinod	01
	Mohit	02

Html table cell padding

Digital vinod 02:25:00 Add Comment

Digital vinod

Use the cellpadding attribute to create some space around the contents of table cells

The cellpadding attribute is similar to the cellspacing attribute, which is used to create space between and outside of the table cells.

without cell padding

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

use Cell padding

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

1 Open Notepad

2 write code and paste in notepad

<!DOCTYPE html>

<body>

<caption align=top>Student Detail</caption>

<tr>

<th>Student Name</th>

<th>Roll Number</th>

<th>Class</th>

</tr>

<tr>

<td>vinod </td>

</tr>

<tr>

<td>Mohit </td>

</tr>

</table>

</body>

</html>

savas file

Output:

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

HTML Table Background Color and Border Color

Digital vinod 22:05:00 2 Comments

Digital vinod

1 Open Notepad

2 Copy code and Paste

3 <!DOCTYPE html>

<body>

<table border="10" bordercolor="orange" bgcolor="cyan">

<caption align=top>Student Detail</caption>

<tr>

<th>Student Name</th>

<th>Roll Number</th>

<th>Class</th>

</tr>

<tr>

<td>vinod </td>

</tr>

<tr>

<td>Mohit </td>

</tr>

</table>

</body>

</html>

4 Save as .

5 Output:

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

HTML Table Caption

Digital vinod 22:01:00 Add Comment

Digital vinod

Caption is a short description of anything so that it may be understood what that thing is made for. In easy words, caption is the heading of the table.

■ <caption> tag is used for this purpose.

■ It is used just after the opening tag of table element.

■ Important Attributes-

o align= (Optional)
It is used to align the caption with respect to the table. It may have following values-

- bottom

- center (Default)

- left

- right

- top

Syntax

Example

1 Open Notepad

2 Copy code into Notepad

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="4" bordercolor="red">
<caption align=top>Student Detail</caption>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
<th>Class</th>
</tr>
<tr>
<td>vinod </td>
<td>01</td>
<td>BSC</td>
</tr>
<tr>
<td>Mohit </td>
<td>02</td>
<td>BSC</td>
</tr>
</table>
</body>
</html>

3 Save as caption.html

4 Open file into any Browser

O/P

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

If <caption align=bottom>Student Detail</caption>

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

If change in the above code caption tag ie

<caption align=right>Student Detail</caption>

Student Detail
Student Name	Roll Number	Class
vinod	01	BSC
Mohit	02	BSC

Create a table using Border Attribute

Digital vinod 23:30:00 Add Comment

Digital vinod

Create a table using Border Attribute

1 Open Notepad

2 Copy code and past in Notepad

<!DOCTYPE html>
<html>
<body>
<table border="4" bordercolor="red">
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Vinod</td>
<td>01</td>
</tr>
<tr>
</table>

<caption> Student Record </caption>
</body>
</html>

Output:

Student Name	Roll Number
Vinod	01

Note:

Show the border in table use border attribute . It takes the size of the border as its value.

To define a different color of border than black, bordercolor attribute is used.

How to Create HTML Table

SEOSIKHO 22:35:00 Add Comment

SEOSIKHO

Introduction to table

Table tag is used to create a table in html.ie <table>
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
All these tags are in pair.

example: In below i create a table in which have three row and three column .

ROWS (<tr> tag )		Table Division (<td>)

STEPS

1 Open Notepad

2 Write Code

<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Vinod</td>
<td>01</td>
</tr>
<tr>
<td>Bhim</td>
<td>10</td>
</tr>
<tr>
<td>Vikash</td>
<td>21</td>
</table>
</body>

</html>

Output:

Student Name	Roll Number
Vinod	01
Bhim	10
Vikash	21

How to Create HTML Table

Digital vinod 22:35:00 Add Comment

Digital vinod

Introduction to table

Table tag is used to create a table in html.ie <table>
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
All these tags are in pair.

example: In below i create a table in which have three row and three column .

ROWS (<tr> tag )		Table Division (<td>)

STEPS

1 Open Notepad

2 Write Code

Student Name	Roll Number
Vinod	01
Bhim	10
Vikash	21

html tag

Digital vinod 23:52:00 Add Comment

Digital vinod

HTML tag

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Sub ,Sup,Strike-through HTML TAG

Digital vinod 03:13:00 Add Comment

Digital vinod

Sub ,Sup,Strike-through HTML TAG

1 open notepad

2 write the code in notepad.

<html>
<head>
<title>The title of your page</title>
</head>
<body> <br>
<br><center>
H<sub> 2 </sub> O
<br>

(A + B ) <sup>2 </sup>
<br>
<br>
<strike> hello friends </strike>

</body>
</html>

Output:

H₂O

(A+B)²

hello friends

Note :
Superscript ~ Using HTML, you can create text that is raised above the preceding text and is displayed in a smaller font.

Subscript ~ This kind of text is lowered below the baseline of the preceding text and is displayed in a smaller font.

Strike-through ~ Using HTML, you can create text that looks like it's been crossed out or appears like it has a line drawn through it.

How to Use Preformated Tag in HTML

Digital vinod 03:25:00 Add Comment

Digital vinod

PREFORMATED TAG IN HTML

While you can see the sizes changed, did you notice something special?
Even though we returned after the word html and before the word page,
there is no line break there.

This is because HTML does not recognize the carriage return.
We can make it see the returns by using the <pre></pre> tags
with

<pre> the text is taken just as you type it.
This can however become a hassle because you will not be able to change size, color or format the text in any other way between the <pre> tags.
So usually other tags are used.

Try the pretag as it is written below.

<html>

<head>

<title>The title of your page</title>

</head>

<body>

<PRE>

>>>>>>>>>>>>welcome>>>>>>>>>>>>>>>>

>

>> SAME AS >>>>>>>>>>>>>>

>>> >>>>>>>>>>>>>>

>>>>>>

>?>>>>> >>>>>>>>>>>>>>>

>>>>>>

>>>>> >>>>>>>>>>>>>>>

</PRE>

</body>

</html>

you save it on the notepad and refresh your internet explorer,
the page should look like this:

Output:

>>>>>>>>>>>>welcome>>>>>>>>>>>>>>>>

>

>> SAME AS >>>>>>>>>>>>>>

>>> >>>>>>>>>>>>>>

>>>>>>

>?>>>>> >>>>>>>>>>>>>>>

>>>>>>

>>>>> >>>>>>>>>>>>>>>

How to add a background color and background Image in HTML?

Digital vinod 01:55:00 Add Comment

Digital vinod

Background Color

Step 1 Open Notepad

Step 2 Write the code

<html>
<title>
welcome</title>
<body bgcolor="pink"" >

<h1> hello </h1>

friends

</body>

</html>

Step 3 Save as background.html.

Step4 Open the save file where you save the file ie Desktop, document etc)

as shown in fig

Background Image

Step 1 Open Notepad

Step 2 Write the code

<html>
<title>
welcome</title>
<body background="image.jpg" >

<h1> hello </h1>

friends

</body>

</html>

Step 3 Save as background.html.

Step4 Open the save file where you save the file ie Desktop, document etc)

as shown in fig