S Singh File: html tag

Showing posts with label html tag. Show all posts

Monday, September 5, 2011

use of ALT tag in HTML

what is the use of ALT tag in HTML?
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
OR
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

(Note- Internet Explorer also displays the value of the alt attribute as a tooltip when mousing over the image. This is NOT the correct behavior, according to the HTML specification.)

Tip- To create a tooltip for an image, use the title attribute!

Tuesday, August 30, 2011

Align visual element using table in HTML

How align visual element using table or assemble images using table in HTML ?
<html>

<head>
<title>that's good</title>
</head>

<body bgcolor="#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><img src="http://www.gif-picture.com/D/donkey/gif-pict-donkey-18.gif" alt="" /></td>
 <td><img src="http://www.gif-picture.com/P/polecat/gif-pict-polecat-1.gif" alt="" /></td>
 <td><img src="http://www.wilsoninfo.com/bearfish.gif" alt="" /></td>
 </tr>

 <tr>
 <td><img src="http://www.gif-picture.com/D/donkey/gif-pict-donkey-18.gif" alt="" /></td>
 <td><img src="http://www.gif-picture.com/P/polecat/gif-pict-polecat-1.gif" alt="" /></td>
 <td><img src="http://www.wilsoninfo.com/bearfish.gif" alt="" /></td>
 </tr>

 <tr>
 <td><img src="http://www.gif-picture.com/D/donkey/gif-pict-donkey-18.gif" alt="" /></td>
 <td><img src="http://www.gif-picture.com/P/polecat/gif-pict-polecat-1.gif" alt="" /></td>
 <td><img src="http://www.wilsoninfo.com/bearfish.gif" alt="" /></td>
 </tr>

</table>
</body>
</html>

(NOTE-Don't give space between TD tag and IMG SRC tag because space create problem on browser "Internet explorer" . )
that's good

Monday, August 29, 2011

Create table in HTML

How to create table in HTML ?
<html>

<head>

<title>Tables</title>

</head>

<body bgcolor="#ffffff">

<table border="1">

 <caption>
 My Favorite Albums
 </caption>

 <tr>
 <th>Artist</th>
 <th>Title</th>
 <th>Comment</th>
 </tr>

 <tr valign="top">
 <td>Manu</td>
 <td>Naveen</td>
 <td>Siddharth</td>
 </tr>

 <tr valign="top">
 <td>Singh</td>
 <td>Nick</td>
 <td>Sidd</td>
 </tr>

 <tr valign="top">
 <td>Student</td>
 <td>Job</td>
 <td>professional</td>
 </tr>

 </table>

</body>
</html>

(NOTE-<tr> TR tag use for table row ,<th> TH tag use for table heading , <td> TD tag use for table data , <caption> CAPTION tag use for title of table,you can also change VALIGN as bottom & middle )

OUTPUT-

Tables

My Favorite Albums
Artist	Title	Comment
Manu	Naveen	Siddharth
Singh	Nick	Sidd
Student	Job	professional

Change image position in HTML

How to change image position or image alignment in HTML?
<html>

<head>
<title>Image Float</title>
</head>

<body bgcolor="#FFFFFF">


<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/211399_100000292867507_2494843_n.jpg" width="110" height="155" align="right"
hspace="11" border="4"
title=" manusingh " alt="Me " />

Sometimes U Miss Me, Sometime I Do. Sometimes U Hurt Me, Sometimes I Do. Sometimes U SMS Me, Sometimes I Do. Sometimes U Forget Me, Thats The Only Thing I ever not do....


</body>
</html>

Image Float

(NOTE- , BR tag is use for breaking paragraph .)

OUTPUT-

Image Float

Sometimes U Miss Me, Sometime I Do. Sometimes U Hurt Me, Sometimes I Do.
Sometimes U talk Me, Sometimes I Do. Sometimes U Forget Me, Thats The Only Thing I ever not do....

inline with it.

Image Inline

HEADING with the help of HTML tag

How to make HEADING with the help of HTML tag ?
<html>
<head>
<title>Headings</title>
</head>

<body bgcolor="#FFFFFF">

<h1> Headings </h1>

 Headings are used to give structure to a document.


<h2> Structure </h2>

 Automated tools, like search engines and indexes, can read the
headings to get clues about the structure of your document.


<h3> Subject </h3>

 Some automated tools will even guess what your document is about,
based on the headings!


</body>
</html>

(NOTE- You can also change the style in heading , like if u want to change the style of third heading then you can write -:
<h3 style="font-family: sans-serif; font-size:156%; color: #006">Subject </h3> )
OUTPUT-

Headings

Headings are used to give structure to a document.

Structure

Automated tools, like search engines and indexes, can read the headings to get clues about the structure of your document.

Subject

Some automated tools will even guess what your document is about, based on the headings!

Friday, August 26, 2011

To change font size

How to change your font size?
<html >
<head>
<title>Font Tag</title>
</head>

<body bgcolor="#FFFFFF">


Are you using the default font for your browser? If you're like most
people you didn't know that you could change it. Well, that's okay, I
can change it for you!



</body>
</html>

OUTPUT -Font Tag

Are you using the default font for your browser? If you're like most people you didn't know that you could change it. Well, that's okay, I can change it for you!
(Note- font size = "3" is default so you can use greater or smaller then three.)

Thursday, August 25, 2011

How to change HTML font

Font -: Font is Inline-level tag because it only use inside paragraph not outside of paragraph.
To change font you can use font tag.
for eg-:
<html >
<head>
<title>Font Tag</title>
</head>

<body bgcolor="#FFFFFF">


Are you using the default font for your browser? If you're like most
people you didn't know that you could change it. Well, that's okay, I
can change it for you!


</body>
</html>

(Note- I can use three font in above example it mean browser can take automatic one of these if other two are not present.) Some more font you can also use are-: arial , serif , monospace , helvetica etc.

Preformatted Text Example

Output Font Tag

Are you using the default font for your browser? If you're like most people you didn't know that you could change it. Well, that's okay, I can change it for you!

HTML poetry format .

How you can preformatted and should be displayed in a particular way and shape without any reformatting by the browser ?
ans- BY using PRE tag .
for eg -:
<html>
<head>
<title>Preformatted Text Example</title>
</head>

<body bgcolor="#FFFFFF">

<pre>
my name is
 manu singh.
 I am computer
engineer . and
 I am work on
 html
tutorial.
</pre>

</body>
</html>

OUTPUT-How you can preformatted and should be displayed in a particular way and shape without any reformatting by the browser ? ans- BY using PRE tag . for eg -: Preformatted Text Example

my name is 
       manu singh.
           I am computer
      engineer . and
           I am work on
         html
tutorial.

Wednesday, August 24, 2011

Font markup elements

Font markup elements with example -:
<html>

<head>

<title>Font markup elements</title>

</head>

<body bgcolor="#FFFFFF">

 B: Font markup elements change the look of your document!


 BIG: Font markup elements change the <big>look</big> of your
document!


 I: Font markup elements change the look of your document!


 S: Font markup elements change the <s>look</s> of your document!


 SMALL: Font markup elements change the look of your
document!


 STRIKE: Font markup elements change the <strike>look</strike> of
your document!


 TT: Font markup elements change the <tt>look</tt> of your
document!


 U: Font markup elements change the look of your document!


</body>
</html>
OUTPUT-Font markup elements Font markup elements with example -:
B: Font markup elements change the look of your document!
BIG: Font markup elements change the look of your document!
I: Font markup elements change the look of your document!
S: Font markup elements change the look of your document!
SMALL: Font markup elements change the look of your document!
STRIKE: Font markup elements change the look of your document!
TT: Font markup elements change the look of your document!
U: Font markup elements change the look of your document!

HTML Inline-level tags

Some more Inline-level tags with example -:
<html >
<head>
<title>Phrase Elements</title>
</head>

<body bgcolor="#FFFFFF">

 EM: Phrase elements can give meaning to your document!


 STRONG: Phrase elements can give meaning to your
document!


 Q: Phrase elements can give <q>meaning</q> to your document!


 CODE: Phrase elements can give <code>meaning</code> to your
document!


 ABBR: Phrase elements can give <abbr title="meaning">m.</abbr> to your document!


 ACRONYM: Phrase elements can give <acronym title="lots of meaning">LOM</acronym> to
your document!


 DFN: Phrase elements can give <dfn title="meaning and purpose">meaning</dfn> to your document!


 KBD: Phrase elements can give <kbd>meaning</kbd> to your document!


 SAMP: Phrase elements can give <samp>meaning</samp> to your
document!


 VAR: Phrase elements can give <var>meaning</var> to your document!


</body>
</html>

OUTPUT- Some more Inline-level tags with example -: Phrase Elements
EM: Phrase elements can give meaning to your document!
STRONG: Phrase elements can give meaning to your document!
Q: Phrase elements can give meaning to your document!
CODE: Phrase elements can give meaning to your document!
ABBR: Phrase elements can give m. to your document!
ACRONYM: Phrase elements can give LOM to your document!
DFN: Phrase elements can give meaning to your document!
KBD: Phrase elements can give meaning to your document!
SAMP: Phrase elements can give meaning to your document!
VAR: Phrase elements can give meaning to your document!

Two type of tags

Two type of tags in HTML and XHTML .
1-Block-level tags (2-Inline-level tags
1- Block-level tags: The p tag is block-level. Other block-level elements include DIV , CENTER and H1, etc.
2-Inline-level tags :Inline -level tags can be used in-line with text. you can use EM tag in paragraph. Images are inline elements.

S Singh File