Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

June 22, 2009

0 Redirect a User

Posted by raj on 7:29 AM

Redirect a User


<html>
<head>
<meta http-equiv="Refresh" content="5;url="http://www.ABC.com">
</head>
<body>
<p>
Sorry, We have moved! The new URL is: <a href="http://www.ABC.com">http://www.ABC.com</a>
</p>
<p>
You will be redirected to the new address in five seconds.
</p>
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>
</body>
</html>
Read more »

May 11, 2009

0 Unknown meta attributes

Posted by raj on 10:29 PM

Some times you will see meta attributes that are unknown to you like this:

<meta name="security" content="low">

Then you just have to accept that this is something unique to the site or to the author of the site, and that it probablyno relevance to you.

Eg:

Redirect a user:

this example demonstrates how to redirect a user if your site addess has changed

<html>
<head>
<meta http-equi="Refresh" content="5;url="http://www.site.com">
</head>
<body>
<p>
Sorry! We have moved! The new URL is: <a href="http://www.site.com">http://www.site.com</a>
</p>
<p>
you will be redirected to the new address in 4 seconds.
</p>
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>
</body>
</html>
Read more »

0 Head element

Posted by raj on 10:25 PM

the head element contains general information, also called meta-information, about a document. Meta means "information about".

You can say that meta-data means information about data, or meta-information means information about information.

Information inside the Head Element

The elements inside the head element should not be displayed by the browser.
According to the HTML standard, only a few tags are legal inside the head section. These are:<base>, <link>, <meta>, <title>, <style> and <script>.
-------------------------------------------------------------------------------------------------

<head>
<p> This is some text </p>
</head>

In this case browser has two options

Display the text because it is inside a paragraph element.

Hide the text because it is inside a page element

If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is not allowed.
Read more »

0 keywords for search engines

Posted by raj on 10:23 PM

Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages.

this meta element defines a description of your page:

<meta name="description" content="Free Web info on HTML, CSS, XML and XHTML">

this meta element defines keywords for your page:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

The intention of the name and content attributes is to describe the content of a page. However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.
Read more »

0 Image Float

Posted by raj on 10:20 PM

The image Float

this tutorial demonstrates how to let an image float to the left or right of a paragraph.

<html>
<body>
<p>
<img src="yourimage.gif" align="left" width="48" height="48">
A paragraph with an image. the align attribute of the image is set to "left". the image will float to the left of this text.
</p>
<p>
<img src="yourimage.gif" align="right" width="48" height="48">
A paragraph with an image. the align attribute of the image is set to "right". the image will float to the left of this text.
</p>
</body>
</html>









A paragraph with an image. the align attribute of the image is set to "left". the image will float to the left of this text.




A paragraph with an image. the align attribute of the image is set to "right". the image will float to the left of this text.



Read more »

0 HTML fonts

Posted by raj on 10:17 PM

The <font> tag in HTML is depreciated . it is supposed to be removed in a future version of HTML

Even if a lot of people are using it, you should try to avoid it, and use styles instead.

The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the browser output:

<p>
<font size="2" face="Verdana">
This is a paragraph
</font>
</p>
<p>
<font size="3" face="Times">
this is another paragraph
</font>
</p>
Read more »

0 font attributes

Posted by raj on 10:10 PM

<html>
<body>
<table border="1" height="50%" width="100%" border color="yellow">
<tr align="center">
<td>
Attribute
</td>
<td>
Example
</td>
<td>
Purpose
</td>
</tr>
<tr align="center">
<td>
size="number"
</td>
<td>
size="2"
</td>
<td>
defines the font size
</td>
</tr>
<tr align="center">
<td>
size="+number"
</td>
<td>
size="+1"
</td>
<td>
Increases the font size
</td>
</tr>
<tr align="center">
<td>
="-number"
</td>
<td>
="-1"
</td>
<td>
Decreases the font size
</td>

</tr>
<tr align="center">
<td>
face="face-name"
</td>
<td>
face="Times"
</td>
<td>
Defines the font name
</td>

</tr>
<tr align="center">
<td>
color="color-value"
</td>
<td>
color="#eeff00"
</td>
<td>
Defines the font color
</td>

</tr>

<tr align="center">
<td>
color="name"
</td>
<td>
color="red"
</td>
<td>
Defines the font color
</td>
</tr>
</table>
</body>
</html>













































Attribute

Example

Purpose

size="number"

size="2"

defines the font size

size="+number"

size="+1"

Increases the font size

="-number"

="-1"

Decreases the font size

face="face-name"

face="Times"

Defines the font name

color="color-value"

color="#eeff00"

Defines the font color

color="name"

color="red"

Defines the font color
Read more »

May 5, 2009

0 Turn an Image into an image map

Posted by raj on 1:48 AM

this tutorial shows how to turn an image into an image map.You will see that if you move the mouse over the image, the coordinates will be displayed on the status bar.

<html>
<body>
<p>
Move the mouse over the image , and look at the status bar to see how the coordinates the image.
</p>
<p>
<a href="www.makemyhost.com"><image src="your img url here" ismap width="146" height="126">
</p>
</body>
</html>





Move the mouse over the image , and look at the status bar to see how the coordinates the image.
Read more »

April 28, 2009

0 The Alt Attribute

Posted by raj on 11:47 PM

the alt attribute is used to define an "alternate text" for an image.The value of the alt attribute is an author-defined text:

A LEAF IMAGE
-----------------------------------------------------------------------------------------------
Big Leaf
-----------------------------------------------------------------------------------------------

The alt attributes tells the reader what he or she is missing on a page.if the browser can't load images.The browser will then display the alternate text instead of the image.It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Basic Notes

If an HTML file contains ten images - eleven files are required to display the right loading images take time, so my best advice is : Use images carefully.
Read more »

0 HTML Images

Posted by raj on 11:31 PM

With HTML you can display images in a document.

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source".The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image.
-----------------------------------------------------------------------------------------
<img src ="url">
-----------------------------------------------------------------------------------------

The URL points to the location where the image is stored.An image named "boat.gif" located in the directory "images" on "www.mysite.com" has the URL: http://www.mysite.com/images/boat.gif.

The browser puts the image where the image tag occurs in the document.If you put an image tag between two paragraphs, the browser shows the first paragraoh, then the image and then the second paragraph.
Read more »

0 Html Forms and Input

Posted by raj on 11:06 PM

HTML forms are used to select different kinds of user input.

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields,textarea fields, drop-down menus, radio buttons, checkboxes, etc) in a form.

A form is defined with the
tag.

<form>
<input>
</input>
</form>

Input

The most used form tag is the <input tag.The type of input is specified with the type attribute.The most commonly used input types are explained below

Text fields

Text fields are used when you want the user to type letters, numbers, etc. in a form

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="Lastname">
</form>

How it looks in browser:




First name:



Last name:



Note that the form itself is not visible.Also that in most browsers, the width of the text field is 20 characters by default.

Radio buttons

Radio buttons are used when you want the user to select one of a limited number of choices.

<form>

<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

How it looks in browser


Male
Female




Note that only one option can be chosen


Check Boxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
<input type="checkbox" name="bike">bike
<input type="checkbox" name="car">car
</form>



How it looks in browser


i have a bike
i have a car
Read more »

0 Cell padding and Cell spacing

Posted by raj on 10:57 PM

This tutorial shows how to use cell padding to create more white space between the cell content and its borders.Also this example shows how to use cellspacing to increase the distance between the cells




<html>
<body>
<h4>Without cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</td>
<tr>
<td>Second</td>
<td>Row</td>
</td>
</tr>
</table>

<h4> with cell padding: </h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</td>
<tr>
<td>Second</td>
<td>Row</td>
</td>
</tr>
</table>
</body>
</html>
<h4>With cellspacing: </h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</td>
<tr>
<td>Second</td>
<td>Row</td>
</td>
</tr>
</table>




Without cellpadding












FirstRow
SecondRow


with cell padding:












FirstRow
SecondRow



With cellspacing:












FirstRow
SecondRow
Read more »

April 27, 2009

0 Add a BackGround Color or Background image to a table

Posted by raj on 12:17 AM

this tutorial shows how to add a background to a table

<html>
<body>
<table border="1" bgcolor="red">
<tr>
<td>
First
</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>A background image:</h4>
<table border="1" background="your image url here">
<tr>
<td>
background image url here
</td>
<td>background image url here</td>
</tr>
<tr>
<td>background image url here</td>
<td>background image url here</td>
</tr>
</table>
</body>
</html>












First
Row
Secondrow


A background image:












background
image here
background image here
background image herebackground image here
Read more »

0 Tags inside a table

Posted by raj on 12:17 AM

<html>
<body>
<table border="1">
<tr>
<td>
<p>this is a paragraph</p>
<p>this is another paragraph</p>
</td>
<td>this cell contains a table
<table borders="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<td>this cell contains a list
<ul>
<li>apples</li>
<li>lime</li>
<li>orange</li>
</ul>
</td>
<td>Hello</td>
</tr>
</table>
</body>
</html>
Read more »

April 26, 2009

0 Headings in a Table

Posted by raj on 11:51 PM

this tutorial shows how to display table headers


<html>
<body>
<h4>Table Headers</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</th>
</tr>
<tr>
<th>Bill Gates</th>
<th>123456789</th>
<th>123456789</th>
</th>
</tr>

Table Headers















NameTelephoneTelephone
Bill Gates123456789123456789



<html>
<body>
<h4>Vertical headers</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</th>
</tr>
<tr>
<th>Bill Gates</th>
<th>123456789</th>
<th>123456789</th>
</th>
</tr>
</table>
</body>
</html>

Vertical headers












NameTelephoneTelephone
Bill Gates123456789123456789
Read more »

0 frame attribute

Posted by raj on 11:38 PM

this tutorial shows us how to use the "frame" attribute to control the borders around the table.


<html>
<body>
<p>
if you see no frames around the tables in this tutorial,your browser is too old , or does not support it.
</p>
<h4> With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4> With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Read more »

0 Unordered list Nested List 2

Posted by raj on 11:31 PM

this tutorial shows a more complicated nested list



<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Black Tea</li>
</ul>
<ul>
<li>Coffee</li>
<li>Black Tea</li>
</ul>
<ul>
<li>Coffee</li>
<li>Black Tea</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Read more »

0 Different types of unordered Lists

Posted by raj on 11:23 PM

this tutorial shows different types of unordered lists.

<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>orange</li>
<li>grapes</li>
<li>lime</li>
</ul>

<h4>Circle bullets list: </h4>
<ul type="circle">
<li>Apples</li>
<li>orange</li>
<li>grapes</li>
<li>lime</li>
</ul>

<h4>Square bullets list: </h4>
<ul type="square">
<li>Apples</li>
<li>orange</li>
<li>grapes</li>
<li>lime</li>
</ul>
</body>
</html>






Disc bullets list:



  • Apples

  • orange

  • grapes

  • lime



Circle bullets list:



  • Apples

  • orange

  • grapes

  • lime



Square bullets list:



  • Apples

  • orange

  • grapes

  • lime
Read more »

0 Send e-mail from a form

Posted by raj on 11:16 PM

this tutorial shows how to send a e-mail from a form

<html>
<body>
<form action="MAILTO:John@mysite.com" method="post" enctype="text/plain">
<h3>this form sends an email to webprogrammingscripts.blogsopt.com </h3>

Name:<br>
<input type="text" name="name" value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="email" value="your email" size="20">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
</html>










this form sends an email to mysite.com



Name:




Mail:
Read more »

0 Form with input fields and a submit button

Posted by raj on 11:05 PM

this tutorial shows how to add a form to a page.The form contains two input fields and a submit button.





<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.
</p>
</body>
</html>
Read more »

Blogger Themes

RSS FeedSubscribe
Follow Us on Twitter!Follow Us

 
Powered by Blogger