How to Create a Hyperlink in HTML?

Link means  redirect to some another Location.

Anchor Tag  <a> is utilized to make a hyperlink in the html.

The area that the connection will direct to is notice by href property.

■ By default, three conditions of a hyperlink:

◉ Unvisited Link

It looks blue and underlined.

◉ Visited Link

It looks purple and underlined.

◉ Active Link :

 It looks red and underline.

For Example:

1   Open Notepad  and Paste code

<!DOCTYPE html>
<html>
<body>

<a href="http://seosikho.blogspot.in/">HTML sikho</a>

<br>
<br>

<a href="http://seosikho.blogspot.in/"> SEO Sikho </a>



</body>
</html>


Output:

HTML Sikho

SEO  Sikho

When we Click HTML sikho Open the Main Blog page (http://seosikho.blogspot.in/).

TAG: html sikho , learn html, seo sikho , learn seo , learn webmaster, sikhko webmaster, seekho seo, seekho html

How to Create a field set and legend in html?

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element.

Example

<!DOCTYPE html>
<html>
<body>

<form>

 <fieldset>

  <legend>Personal information:</legend>

  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text"> <br>
  password:<input type="password">
 </fieldset>

</form>

</body>
</html>


Output:

How to Create a HTML Forms?

Form is used to take data from user and pass it on server.

■ <form> tag is used to create a form.

■ The <form> tag is used for defining the user interface elements , like command buttons , text boxes etc...

■ To pass the data, two attributes of <form> are used-

◉ action= (Required) It defines the name of the file, to which the data will be transferred.

  ◉ method= (Optional) It defines the method of passing the data.
It may have one of two values-

    ◆ get- This is the default value. In this method, the query is generated in the address bar and the data will be visible in url. This can be used for non- secure data.

    ◆ post- In this method, the result is appended to the body of HTTP request and the data will not be visible. This is used for secured data.


Syntax:

 <form action= "script url" method= "get|post">
<input>
<input>
<textarea>
.......
.......
</form>

Html Forms Control

1 Text Control: 

There are three type of Text Controls:

    ◆ Single-line Text field

    ◆ Password field

    ◆ Multi-line Text field

a) Single Line Text Field:

Syntax:

 <input type= "text" name= "any name" />

Example:

<!DOCTYPE html>

<html>

<body>

<form >

Username:<input type="text" name="user_name" />

<br>

Email-id:<input type="text" name="email_id" /><br>

roll:<input type="text" name="roll_id" />

</form>

</body>

</html>

Output: 

Username: 

Email-id:
roll:     

b)  Password Field:

Syntax:

 <input type= "password" name= "any name" />

Example:

1 Open Notepad and copy the below code.

<!DOCTYPE html>

<html>

<body>

<form >

Username:<input type="text" name="user_name" />

<br><br>

Password:<input type="password" name="password" />

</form>

</body>

</html>

save the file .

Output: 

Username:

Password:

c)   Multi-line Text field

 It is not a type of input element. It is an element itself.

■ <textarea> tag is used for this purpose and this is used in pair.

■ It is a rectangle shaped area to let user input multi line text.

Syntax:

 <textarea name= "any name"></textarea>

Example:

1 Open Notepad and paste the code 

<!DOCTYPE html>

<html>

<body>

<form >

Address

<br />

<textarea rows="8" cols="30" name="address">

Write Address here........

</textarea>

</form>

</body>

</html>

save the file.

Output:

Address

Marquee Tag Stop or Start

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

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

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 

2   

 <!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 

2   

 <!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 

2   

 <!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

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)

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)

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:

5. First item
6. Second item
7. Third item
8. 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: 

3. First item
4. Second item
5. Third item
6. 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:

3. First item
4. Second item
5. Third item
6. Fourth item

HTML Lists

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