HTML கற்போம் - 7

HTML Frame

ஒரு HTML Document இனை வேவ்வேறு பகுதிகலாக பரிப்பதற்கு இச்சட்டக அமைப்பு பயன்படுகின்றது. அதற்கு பிரதானமாக <FRAMESET>, <FRAME> ஆகியTag பயன்படுத்தப்படுகின்றது.

Sample Code

<HTML>

<HEAD> ................... </HEAD>

<FRAMESET>

     ..............................

     ...............................

</FRAMESET>

</HTML>

Frame tag இனுல் பின்வரும் attributes பயன்படுத்தப்படும்.

1.   Bordercolor =“Color”

2.   Frameborder =”Yes/No”

3.   Framespacing=”Value”

4.   Marginheight=”Value”

5.   Marginwidth=”Value”

6.   Scrolling=”yes/no”

7.   SRC=”Document”

Frameset tag இனுல் பின்வரும் attributes பயன்படுத்தப்படும்.

1.   Border=”Value”

2.   Cols=”Scale Value”    Colum Scale

3.   Rows=”Scale value”    Row Scale 

HTML Frame ROWS/COLS attributes

Rows attributes இன் மூலம் கிடையா வழங்கப்படும் frame களின் எண்ணிக்கையினை பின்வருமாறு காட்டப்படும்.

<FRAMESET ROWS=”VALUE,VALUE,VALUE”>

Value – அதற்குரிய அகலம் pixels அளவுகளில் வழங்குதல் வேண்டும்.

Value% - அதற்குரிய அகலம் விகித அளவுகளில் வழங்குதல் வேண்டும்.

Value* - * குறியீடு மாத்திரம் உள்ளதாயின் மிகுதியாக உள்ள இடம் முழுவதும் குறிப்பிட்ட         frame க்காக பயன்படுத்தல் வேண்டும்.

உதாரணமாக

<frameset rows=”20%,60%,20%”>

இங்கு 3 Row ஆக பிரிக்கப்பட்டு இருக்கும் முதலாவது Row மொத்த உயரத்தின்20% ஆகவும், இரண்டாவது Row மொத்த உயரத்தின் 60% மூன்றாவது Rowமொத்த உயரத்தின் 20% காணப்படும்.

<frameset rows=”50,*,2*,20%”>

இங்கு நான்கு Row ஆக பிரிக்கப்பட்டு இருக்கும் முதலாவது Row 50 pixel அளவு உள்ளதாகவும், நான்காவது Row மொத்த உயரத்தின் 20% மாகவும், இரண்டாம்,மூன்றாம் Row முறையே மிகுதியாக உள்ள உயரத்தினை 1:2 என்ற வீதத்தில் பிரிக்கும்.

இதே போலவே Cols பயன்படுத்தப்படும் இங்கு Value ஒவ்வரு Column த்தின் அகலத்தினை தீர்மாணிக்கும்.

HTML Frame களில் தரவு உள்ளடக்கப்படும் விதம்

குறிப்பிட்ட frame இன் தகவல்கள் உள்ளடக்கங்களை <frameset> tag கீழ் வரும்<frame> tag இனை பயன்படுத்தி  இடமுடியும். இதன்போது SRC (Source)என்னும் attributes பயன்படுத்தப்படும்.

உதாரணம்

<frame src=”cell.html”>

<HTML>

<HEAD>

      <TITLE> frame Example </TITLE>

</HEAD>

<FRAMESET rows="50%,50%">

      <FRAMESET COLS="20%,80%">

            <FRAME SRC="CELL1.HTML">

            <FRAME SRC="CELL2.HTML">

      </FRAMESET>

      <FRAMESET COLS="80%,20%">

            <FRAME SRC="CELL3.HTML">

            <FRAME SRC="CELL4.HTML">

      </FRAMESET>

</FRAMESET>

</HTML>

இங்கு CELL1.HTML, CELL2.HTML, CELL3.HTML, CELL4.HTML என்னும் வேவ்வேறு நான்கு HTML ஆவனங்கள் Frame களினுல் உள்ளடக்கப்பட்டுள்ளது.

Read More

HTML கற்போம் - 6

Cell spacing

<html>

<body>

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

                                                 <td>First</td>

                                                <td>Row</td>

</tr>

<tr>

                                                 <td>Second</td>

                                                 <td>Row</td>

</tr>

</table>

<h4>With cellspacing="0":</h4>

<table border="1" cellspacing="0">

<tr>

                                                <td>First</td>

                                                <td>Row</td>

</tr>

<tr>

                                                 <td>Second</td>

                                                <td>Row</td>

</tr>

</table>

<h4>With cellspacing="10":</h4>

<table border="1" cellspacing="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

                                                 <td>Second</td>

                                                <td>Row</td>

</tr>

</table>

</body>

</html>

Without cellspacing:

First	Row
Second	Row

With cellspacing="0":

First	Row
Second	Row

With cellspacing="10":

First	Row
Second	Row

HTML Unordered Lists

வரிசைப்படுத்தப்படாத பட்டியல்களை அமைப்பதற்கு <ul> tag (ul – unordered list). ஒவ்வரு பட்டியல் உருப்படியையும் வரையறை செய்வாதற்கு <li> tag (li- list)பயன்படுகின்றது.

<ul>
            <li>Coffee</li>
            <li>Milk</li>
</ul>

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

• Coffee
• Milk

HTML Ordered Lists

வரிசைப்படுத்தப்பட்ட பட்டியல்களை அமைப்பதற்கு <ol> tag (ol – ordered list). ஒவ்வரு பட்டியல் உருப்படியையும் வரையறை செய்வாதற்கு <li> tag (li- list)பயன்படுகின்றது.

<ol>
            <li>Coffee</li>
            <li>Milk</li>
</ol>

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

1. Coffee
2. Milk

HTML Definition Lists

பட்டியலில் உள்ள ஒவ்வரு உருப்படி பற்றிய விபரிப்புக்களை வழங்குவதற்கு

<dl> - definition list

<dt> - definition item in the list

<dd> - describes the item in the list

போன்ற tag பயன்படுத்தப்படுகின்றது.

<dl>
            <dt>Coffee</dt>
            <dd>- black hot drink</dd>
            <dt>Milk</dt>
            <dd>- white cold drink</dd>
</dl>

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

1.      Coffee

- black hot drink

2.      Milk

- white cold drin

வெவ்வேறு வகையான வருசைப்படுத்தப்பட்ட பட்டியல்களை சமர்பிக்கும் முறைக்கான உதாரணம்.

<html>

<body>

<h4>Numbered list:</h4>

<ol>

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

                                                <li>Oranges</li>

</ol> 

<h4>Letters list:</h4>

<ol type="A">

 <li>Apples</li>

                                                <li>Bananas</li>

                                                <li>Lemons</li>

                                                <li>Oranges</li>

</ol> 

<h4>Lowercase letters list:</h4>

<ol type="a">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol> 

<h4>Roman numbers list:</h4>

<ol type="I">

 <li>Apples</li>

 <li>Bananas</li>

                                                <li>Lemons</li>

                                                <li>Oranges</li>

</ol> 

<h4>Lowercase Roman numbers list:</h4>

<ol type="i">

 <li>Apples</li>

                                                <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol> 

</body>

</html>

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

Numbered list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Lowercase letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Lowercase Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

அடுக்குமுறைப்பட்டியல்களை சமர்பிக்கும் முறைக்கான உதாரணம்.

<html>

<body>

<h4>A nested List:</h4>

<ul>

 <li>Coffee</li>

                                                 <li>Tea

                                                                <ul>

                                                                                <li>Black tea</li>

                                                                                 <li>Green tea</li>

                                                                </ul>

                                                </li>

                                                <li>Milk</li>

</ul>

</body>

</html>

 

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

A nested List:

• Coffee
• Tea
• Black tea
• Green tea
• Milk

Tag	Description
<ol>	Defines an ordered list
<ul>	Defines an unordered list
<li>	Defines a list item
<dl>	Defines a definition list
<dt>	Defines an item in a definition list
<dd>	Defines a description of an item in a definition list

Read More

HTML கற்போம் - 5

HTML Images

Example

<html>

<body>

<h2>Norwegian Mountain Trip</h2>

<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

</body>

</html>

The <img> Tag and the Src Attribute

HTML,இல்  images ஆனது  <img> tag இனால் வரையரை செய்யப்படும்.

<img> tag ஆனது  closing tag கொண்டிருப்பது இல்லை இது attributes மட்டும் கொண்டிருக்கும்

<img src=”image path/image URL” alt=”image description” width="value" height="value">

Src attributes இனால் image இருக்கம் இடத்தினையும், alt attributes இனால் imageபற்றிய தகவலும் வழங்கப்படும் இத்தகவல் வெளியீடாக அமையாது. அத்துடன் படத்தின் நீள அகலங்கள் width, height என்ற attributes இனால் வழங்கப்படும்.

HTML Tables

HTML document இல் Tables ஆனது  <table> tag வரையறை செய்யப்படும்.

Table இல் உள்ள ஒவ்வரு row வும் <tr> tag (Table row) இனாலும், ஒவ்வரு cellலும்<td> tag (table data) இனாலும் வரையறை செய்யப்படும்.

Table Example

<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>

Browser இல் பின்வருமாறு காட்சியளிக்கும்.

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Read More