කාටහරි වැදගත් වෙයි කියලා හිතලා දැන්මේ.. බලලා නිකම් යන්න එපා පොඩි බම්ප් එකක් දෙන්න හොදේ...
Example
HTML Home
<html><head><title> My First Heading</title></head>
<p>My first paragraph.</p>
</body>
</html>
My First Heading – Title Name
My first paragraph.
Example – HTML Basic - 4
Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Links
HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>
This is a link
HTML Images
HTML images are defined with the <img> tag.
<img src="w3schools.jpg" width="104" height="142" />
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Document Example
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
HTML Text Formatting
<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><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is big
This text is italic
This is computer output
This is subscript and superscript
The HTML <font> Tag
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
This paragraph is in Arial, size 5, and in red text color.
This paragraph is in Verdana, size 3, and in blue text color.
The font element is deprecated in HTML 4. Use CSS instead!
HTML Styles - CSS
<html>
<body style="background-color
owderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
HTML Style Example - Background Color
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color and Size
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
A heading
A paragraph.
HL Style Example - Text Alignmen
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Center-aligned heading
This is a paragraph.
HTML Images - The <img> Tag and the Src Attribute
<img src="url" alt="some_text"/>
HTML Images - The Alt Attribute
<img src="boat.gif" alt="Big Boat" />
HTML Images - Set Height and Width of an Image
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Alignment Image
<html>
<body>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>
An image with align="bottom".
An image with align="middle".
An image with align="top".
Tip: align="bottom" is default!
An image before the text.
An image after the text.
Let the image float
<html>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
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="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right 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 right of this text.
Make a hyperlink of an image
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Create an image map
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
Click on the sun or on one of the planets to watch it closer:
HTML Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Row 1, Cell 1 Row 1, Cell 1
Row 1, Cell 1 Row 1, Cell 1
Table Border - Example - 01
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr> <tr> <td>Second</td>
<td>Row</td>
</tr> </table>
<h4>With a thick border:</h4>
<table border="8">
<tr> <td>First</td>
<td>Row</td>
</tr> <tr> <td>Second</td>
<td>Row</td> </tr>
With a normal border:
First Row
Second Row
With a thick border:
First Row
Second Row
With a very thick border:
First Row
Second Row
Tables - Example1 - 02
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
One column:
100
One row and three columns:
100 200 300
Two rows and three columns:
100 200 300
400 500 600
HTML Table Headers
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Header 1 Header 2
Row 1, Cell 1 Row 1, Cell 1
Row 1, Cell 1 Row 1, Cell 1
Apples 44%
Bananas 23%
Oranges 13%
Other 10%
Tables without border
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
This table has no borders:
100 200 300
400 500 600
And this table has no borders:
100 200 300
400 500 600
Table headers
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Table headers:
Name Telephone Telephone
Bill Gates 555 77 854 555 77 855
Vertical headers:
First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855
Table with a Caption
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Month Savings
Month Savings
January $100
February $50
Example
HTML Home
<html><head><title> My First Heading</title></head>
<p>My first paragraph.</p>
</body>
</html>
My First Heading – Title Name
My first paragraph.
Example – HTML Basic - 4
Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Links
HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>
This is a link
HTML Images
HTML images are defined with the <img> tag.
<img src="w3schools.jpg" width="104" height="142" />
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Document Example
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
HTML Text Formatting
<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><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is big
This text is italic
This is computer output
This is subscript and superscript
The HTML <font> Tag
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
This paragraph is in Arial, size 5, and in red text color.
This paragraph is in Verdana, size 3, and in blue text color.
The font element is deprecated in HTML 4. Use CSS instead!
HTML Styles - CSS
<html>
<body style="background-color
owderBlue;"><h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
HTML Style Example - Background Color
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color and Size
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
A heading
A paragraph.
HL Style Example - Text Alignmen
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Center-aligned heading
This is a paragraph.
HTML Images - The <img> Tag and the Src Attribute
<img src="url" alt="some_text"/>
HTML Images - The Alt Attribute
<img src="boat.gif" alt="Big Boat" />
HTML Images - Set Height and Width of an Image
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Alignment Image
<html>
<body>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>
An image with align="bottom".
An image with align="middle".
An image with align="top".
Tip: align="bottom" is default!
An image before the text.
An image after the text.
Let the image float
<html>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
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="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right 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 right of this text.
Make a hyperlink of an image
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Create an image map
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
Click on the sun or on one of the planets to watch it closer:
HTML Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Row 1, Cell 1 Row 1, Cell 1
Row 1, Cell 1 Row 1, Cell 1
Table Border - Example - 01
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr> <tr> <td>Second</td>
<td>Row</td>
</tr> </table>
<h4>With a thick border:</h4>
<table border="8">
<tr> <td>First</td>
<td>Row</td>
</tr> <tr> <td>Second</td>
<td>Row</td> </tr>
With a normal border:
First Row
Second Row
With a thick border:
First Row
Second Row
With a very thick border:
First Row
Second Row
Tables - Example1 - 02
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
One column:
100
One row and three columns:
100 200 300
Two rows and three columns:
100 200 300
400 500 600
HTML Table Headers
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Header 1 Header 2
Row 1, Cell 1 Row 1, Cell 1
Row 1, Cell 1 Row 1, Cell 1
Apples 44%
Bananas 23%
Oranges 13%
Other 10%
Tables without border
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
This table has no borders:
100 200 300
400 500 600
And this table has no borders:
100 200 300
400 500 600
Table headers
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Table headers:
Name Telephone Telephone
Bill Gates 555 77 854 555 77 855
Vertical headers:
First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855
Table with a Caption
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Month Savings
Month Savings
January $100
February $50
