HTML Tutorial-2

Posted on 07/09/2009 by

1



Hey! guys… I hope you’ve all understood the basics of HTML…since I’ve spoken about it..Here I’m going to explain, The Methodology of  HTML..and I am going to be briefly talking about, how to place the Links, Images, Forms,Listed items,  Styles and Colors.

Here you go guys!…

1. Placing Images.
The important thing about placing images is to give a link and information about the images.


Example:

<html>
<body>
<h2>The London Bridge</h2>
<img src=”C:\Documents and Settings\All Users\Documents\My Pictures\Travel\Travel180.jpg” width=”350″ height=”200″></a>
</body>
</html>

The London Bridge

Travel180

 

 

 

 

  

  

 

 

 2. The document describes about how to give link to the text


Example:

<html>
<body>
<a href=”sydney_harbour_bridge_at_night_australia.jpg”>Click on the Text to see the Links</a>
</body>
</html>

Output:

sydney_harbour_bridge_at_night_australia

 

 

 

 

 

 

 

  

3. So..as you know…This document describes giving links to the same image, it will open with the default size.

<html>
<body>
<a href=”sydney_harbour_bridge_at_night_australia.jpg”><img src=”C:\Documents and Settings\All Users\Documents\My Pictures\Travel\sydney_harbour_bridge_at_night_australia.jpg” width=”350″ height=”200″></a>
</body>
</html>

Output:

sydney_harbour_bridge_at_night_australia

4.HTML Forms


Forms are used to display the Input boxes, List Items, Radio, Check Boxes, Text areas, Buttons.

Example: Apllications, Registration, Submission and  Request.

<html>
<body>
<h1>Forms</h1>
First Name&nbsp;&nbsp;<input type=”text” size=”35″ maxlength=”15″><br>
Last Name&nbsp;&nbsp;<input type=”text” size=”35″ maxlength=”15″><br>
Password&nbsp;&nbsp;&nbsp;<input type=”password” size=”35″ maxlength=”8″><br><br>
Gender&nbsp;&nbsp;<input type=”radio” name=”sex” value=”male” /> Male

<input type=”radio” name=”sex” value=”female”/>Female<br><br>
Sky Diving:
<input type=”checkbox” name=”vehicle” value=”Bike” />
<br />
Photography:
<input type=”checkbox” name=”vehicle” value=”Car” />
<br />
listening to Music:
<input type=”checkbox” name=”vehicle” value=”Airplane” />

</body>
</html

Output of Forms

First Name
Last Name
Password

Gender   Male Female

Sky Diving:
Photography:
listening to Music:

5. Listed Items in HTML

<html>
<body>
<h1>List & Unordered List Items</h1>
<ol>
<li>Arena Multimedia</li>
<ul>
<li>Computer Training Center
</ul>
<li>Antz Dezins</li>
<ul>
<li>Training and Designing Company
</ul>
<li>Prism Multimedia</li>
<ul>
<li>Training center for 3D Animation
</ul>
<li>Honey Animation Studio</li>
<ul>
<li>Training and Placements for Web and 3D Animations
</ul>
</ol>
</body>
</html

Output of List & Unordered List Items

  1. Arena Multimedia
    • Computer Training Center
  2. Antz Dezins
    • Training and Designing Company
  3. Prism Multimedia
    • Training center for 3D Animation
  4. Honey Animation Studio
    • Training and Placements for Web and 3D Animations

6. Styles

To define the text styles and colors with HTMl

<html>
<body style=”background-color:lime;”>
<h1>Look! Styles and colors</h1>
<p style=”font-family:verdana;color:Green”>
This text is in Verdana and Blue</p>
<p style=”font-family:times;color:Red”>
This text is in Times and Orange</p>
<p style=”font-size:30px”>This text is 36 pixels high</p>
</body>
</html>

Look! Styles and colors

This text is in Verdana and Blue

This text is in Times and Orange

This text is 36 pixels high

 

7. Colors

To change the text color by using color coding

 

<html>
<body>

<p style=”background-color:#abcd00″>
Color set by using hex value
</p>

<p style=”background-color:rgb(210,25,0)”>
Color set by using rgb value
</p>

<p style=”background-color:lime”>
Color set by using color name
</p>

</body>
</html>

Color set by using hex value

Color set by using rgb value

Color set by using color name

Hope you guys found this helpful. I will be adding more to this shortly. till then take care

Written By Ellahax:

Untitled-2

 

 

 

 

Edited by:

EZZK07

 

Advertisements
Posted in: Coding, Html