Saturday, November 24, 2012

HTML Contents

1. HTML Introduction
2. Basic Structure of HTML
3. Heading Tags & Text Display Tags
4. Some HTML Text Out put Display Tags
5. Types of Lists
6. Images
7. Page Links
8. Self Links In Same Page

9. HTML Marquee Tag And Its Attributes With Example
10. HTML Frameset And Frame Tags
11. HTML Inline Frame: ( Iframe Tag )
12. HTML TABLE's With Attributes and Examples
13. HTML Form Object Tags With Example

Images :
<img src=”path of file”>
If both html file and image in the same folder then no need to give path

<img src=”path of file” alt=”This is an Image”>
If the Browser can not display Image with any reasons then Alternative text will display.

Example
<html>
<body>
<img src="sunset.jpg" alt="Sunset Image" border="10" width=250 height=300 align=right>
</body>
</html>
Setting the height adjusts width and vice-versa. Pick the Image from Different Folder In your Folder

Example
<html>
<body>
<img src="Images/roses.jpg" alt="Rose Flower" border="10">
</body>
</html>
Absolute Path : Path According to Drivers
Relative Path : Path According to Reference File

Example
Pick the Image from Different Folder which is out of your Folder
<html>
<body>
<img src="../roses.jpg" alt=" Rose Flower " border="10">
</body>
</html>

See The Following Images are by using <img> Tag:

HTML Page Links <a> Tag
Using anchor <a> tags we can establish the links form one page to another Page.

Syntax : <a href = " Path of HTML file">    text    </a>

Example
red.html
<body bgcolor=red text=yellow>
<Hr/>
This is Red file
<hr/>
<body>

green.html
<body bgcolor=green text=blue>
<hr>
This is green file
<hr> <body>

Color.html (main file)
<body bgcolor=yellow>
<hr>
<a href="red.html"> Red Page </a>   <br>
<a href="green.html"> Green Page </a>
</body>

Target is an attribute of anchor Tag.
Target = "_blank” Opens the target Page in new page.
Target = "_self” Opens the target Page in same page. (It is Default ) .

Example
<html>
<head>
</head>
<body>
<a href="a.html" target="_blank"> Page A </a>   <br>
<a href="b.html" target="_self"> Page B </a>
</body>
</html>

Note : Images can also be taken as Links
Example
<html>
        <head>
        </head>
        <body>
        <a href="b.html"> <img src="sunset.jpg"   height=70 > </a>
        </dody>
</html>

O/P:-----------------------------------

IT Job Careers

HTML
CSS
JS
PHP

About HTML

---------------
---------
---------------------
----------------
--------
-------------------
-------------
------------------
--------------
-------------------
--------

-- Top --

About CSS

---------------
---------
---------------------
----------------
--------
-------------------
-------------
------------------
--------------
-------------------
--------

-- Top --

About JS

---------------
---------
---------------------
----------------
--------
-------------------
-------------
------------------
--------------
-------------------
--------

-- Top --

About PHP

---------------
---------
---------------------
----------------
--------
-------------------
-------------
------------------
--------------
-------------------
--------

-- Top --

HTML Types Of Lists

HTML offers several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
HTML List are of 3 types
1) Ordered List
2) Unordered List
3) Definition List

1) Ordered List:- An ordered list, created using the <ol> element, should contain information where order should be emphasized, as in a recipe:

list with numbers( 1,2,3 (or) a,b,c,.. (or) A,B,C,.. (or) i,ii.iii,… (or) I,II,III,…)
<ol> tag (Order list)
<li> tag (List Item)
Example for Ordered List:
<body>
       <ol >
              <li> Java </li>
              <li> ASP </li>
              <li> PHP </li>
       </ol>
</body>
o/p:----------------------------------------

Java
ASP
PHP

Example for Ordered List with Start Number and/or Type attributes:
<body>
       <ol start=10>
                <li> Java </li>
                <li> ASP </li>
                    <li> PHP </li>
       </ol>
</body>
Example for Ordered List with type of Numbering
<html>
       <head>
       </head>
<body>
       <ol Type="A">
              <li> Java </li>
              <li> ASP </li>
              <li> PHP </li>
       </ol>
</body>
</html>
Note : You can use a,i,I for the Type.

Unordered List: List with bullets only.

Unordered List with 3 types :

Circle
Square
Disk

Example for Un-Ordered List with type of Bullet
<body>
       <ul Type="circle">
              <li> PHP </li>
              <li> JAVA </li>
       </ul>
</body>
o/p:----------------------------

PHP
JAVA

Note : In Unordered list Default bullet is Disk. We can write OL in UL. We can write OL in OL. We can write UL in OL. We can write UL in UL.
Example for Un-Ordered List within Ordered List
<html>
<head>
</head>
<body>
<ol>
<li> Databases </li>
<ul>
<li> Oracle </li>
<li> SQL Server </li>
</ul>
<li> Programming </li>
<li> Testing </li>
</ol>
</body>
</html>

Definition List:
A definition list is not a list of single items. It is a list of items.
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).

Example using Definition List
<body bgcolor=violet>
<strong>
Drinks
</strong>
<hr color=brown>
    <dl>
                <dt> Pepsi</dt>
                         <dd>Cool Drink </dd>
                         <dd>Contains Alcohol </dd>
                <dt> Boost </dt>
                       <dd>Health Drink</dd>
                       <dd>Contains Chocolate</dd>
    </dl>
</body>

o/p:-------------------------
Drinks

Pepsi: Cool Drink; Contains Alcohol
Boost: Health Drink; Contains Chocolate

This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i

Different computer-output tags:-

Line Breaks: <br/> tag.

Horizontal rule: <hr/>

Ex: <hr color="brown" width="50%" size="5" />

Attributes: align, width, size, color

o/p:--

Address Tag:
<html>
<body>
<address>
Millennium Software Solutions<br>
Dwarakanagar<br>
Vizag<br>
INDIA
</address>
</body>
</html>
o/p>--------------------------------------------

Millennium Software Solutions
Dwarakanagar
Vizag
INDIA

Text Formatting Tags

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<s>	Deprecated. Use <del> instead
<strike>	Deprecated. Use <del> instead
<u>	Deprecated. Use styles instead

Citations, Quotations, and Definition Text Format Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<address>	Defines an address element
<bdo>	Defines the text direction
<blockquote>	Defines a long quotation
<q>	Defines a short quotation The <q> tag is supported in all major browsers, except Internet Explorer.
<cite>	Defines a citation
<dfn>	Defines a definition term

Ex:
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>
o/p>-----------------------------------------------------------------------------

UN
WWW
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation

<bdo> stand for bidirectional override.
The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm.
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
o/p>-----------------------------------------------------------

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text

<html>
<body>
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
<dfn>Definition term</dfn><br />
<code>Computer code text</code><br />
<samp>Sample computer code text</samp><br />
<kbd>Keyboard text</kbd><br />
<var>Variable</var><br />
<cite>Citation</cite>
</body>
</html>
O/P>-----------------------------------------------

Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation

HTML Headings & Text Formatting Tags

Heading Styles
<html>
<body>
<h1 align=”center”>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
0/p>---------------------------------------------------
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
* <h1 style="text-align:center">This is heading 1</h1>
* <body style="background-color:yellow"> background

HTML Formatting Text Examples
<p> tag used for Paragraph.
<html>
<body>
<p><b>This text is bold </b></p>
<p><strong>This text is strong </strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
o/p>--------------------------------------------------

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript

Basic Structure of HTML

Basic HTML Structure Tags: <html>, <head> <title>, <meta> and <body>

<html>
This tag is used to indicate that this is a HTML document. Most HTML documents should start and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.
<title>
The title is what is displayed on the upper left corner of your browser when you view a web page..
<title> tag indicate what the page content is.
<meta>
The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content.
<body>
The <body> tag includes the HTML body of the document.
The <body> tag may contain several attributes are listed below:

Attribute	Description
alink	The color of the links. Specifies the color of an active link in a document
background	Specifies a background image for a document
bgcolor	Specifies the background color of a document
link	Specifies the default color of unvisited links in a document
text	Specifies the color of the text in a document
vlink	Specifies the color of the visited links in a document

Ex: <body bgcolor="#ffffff" text="yellow">
<body background="background.jpg">

So, in general, all HTML Documents have the following format:

<html>
<head>
<title>
Here is the title of the HTML document.
</title>
<meta name="Ganesh " content="Sample HTML " />
</meta>
</head>
<body bgcolor="ff00ff”>
Here is the body of the HTML document.
</body>
</html>
o/p>--------------------------

Here is the body of the HTML document.

HTML(Hyper Text Markup Language) Introduction

HTML is a language for describing web pages.

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

HTML Tags

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> (start tag) and </b> (end tag)

HTML tags are not case sensitive: <P> means the same as <p>.

Editing HTML Files:

Notepad

Dreamweaver

FrontPage

HTML Builder

HTML File Extension:

To save an HTML file, we can use either the .htm or the .html extension. With new software it is perfectly safe to use .html.

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
Ex: <b><i>welcome</i></b>

Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can be closed in the start tag.
<br> is an empty element without a closing tag (it defines a line break).

In XHTML, XML, and future versions of HTML, all elements must be closed. Ex: <br/>

IT Job Careers

Pages

Saturday, November 24, 2012

HTML Contents

HTML Image Tag

HTML Self Links In The Same Page

IT Job Careers

About HTML

About CSS

About JS

About PHP

HTML Types Of Lists

Different HTML Text Output Tags

Line Breaks: <br/> tag.

Horizontal rule: <hr/>

Attributes: align, width, size, color

Text Formatting Tags

Citations, Quotations, and Definition Text Format Tags

HTML Headings & Text Formatting Tags

Basic Structure of HTML

HTML(Hyper Text Markup Language) Introduction

HTML Tags

Editing HTML Files:

Notepad

Dreamweaver

FrontPage

HTML Builder

HTML File Extension:

Nested HTML Elements

Empty HTML Elements

HTML Attributes

HTML Comments: Comments are ignored by the browser and are not displayed.