பல்சுவை தகவல்கள் - Thagavalgal in Tamil பல்சுவை தகவல்கள் - Thagavalgal in Tamil

பல்சுவை தகவல்கள் - Thagavalgal in Tamil

பல்சுவை தகவல்கள் - Thagavalgal in Tamil- Interesting Information in Tamil Useful Information you should know - Computer Tips, Health Tips, online offers, and more helpful Tips and Tricks நீங்கள் தெரிந்து கொள்ள வேண்டிய பயனுள்ள தகவல்கள்

புதன், 31 டிசம்பர், 2014

HTML Tutorials 26-அட்டவணைகள்(Tables)

Author:  |   | 


கடந்த எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரில் HTML -லில் 
 
பட்டியல்கள் அமைப்பது எப்படி என்பதைப் பார்த்தோம்.
 
 இன்றையப் பதிவில் HTML-ல் அட்டவணைகள்(Tables) அமைப்பது எப்படி 
 
என்பதைப் பார்ப்போம். இதற்கு <TABLE></TABLE> என்ற குறிஒட்டுகள் 
 
பயன்படுகின்றன. எந்த ஒரு HTML ஆவணத்திலும் அட்டவணைகள் அமைக்க 
 
இந்த குறிஒட்டுகளைத்தான் பயன்படுத்த முடியும். இதற்கிடையேதான் 
 
தகவல்களை கொடுத்து அட்டவணைப்படுத்த முடியும். அட்டவணைக்கு 
 
தலைப்பு கொடுக்க வேண்டுமெனில் <CAPTION> என்னும் குறிஒட்டைப் 
 
பயனபடுத்த வேண்டும்.
 
அட்டவணையில் வரிசைகளை உருவாக்க <TR> மற்றும் </TR> குறி 
 
ஒட்டுகளைப் பயன்படுத்த வேண்டும். ஒரு சிற்றறையில் தலைப்பு 
 
இருந்தால் அதனை <TH>..</TH> என்ற குறி ஒட்டுகளுக்கு இடையே 
 
கொடுக்க வேண்டும். தகவல்களை <TD>..</TD> என்னும் குறி ஒட்டுகளுக்கு 
 
இடையே கொடுக்க வேண்டும்.


HTML-ல் அட்டவணை எழுதப்படும் குறிஒட்டுகளும், அதனுடைய 
 
வேலையை விளக்கி ஒரு அட்டவணைப்படுத்தப்பட்டுள்ளது.

Tag
Definition
<TABLE>
Start of table definition
<CAPTION>Caption Contents</CAPTION>
Caption definition
<TR>
Start of first row definition
<TH>cell contents</TH>
First cell in row 1(a head)
<TH>cell contents</TH>
Last  cell in row 1(a head)
<TR>cell contents</TR>
End of first row definition
</TR>
End of first row definition
<TR>
Start of second row definition
<TD>cell contents</TD>
First cell in row 2
<TD>cell contents</TD>
Last cell in row 2
</TR>
End of second row definition
<TR>
Start of last row definition
<TH>cell contents</TH>
First cell in row 1(a head)
<TH>cell contents</TH>
Last cell in row 1(a head)
</TR>
End of last row definition
</TABLE>
End of table definition

<TABLE> குறி ஒட்டுடன் வழக்கமாக WIDTH, CELLSPACING, CELLPADDING 
 
மற்றும் BORDER போன்ற பண்புகள் பயன்படுத்தப்படுகின்றன.


WIDTH பண்பு


WIDTH என்னும் பண்பு அட்டவணையின் அகலத்தைக் கொடுக்கப் 
 
பயன்படுகிறது. அட்டவணையின் அகலத்தைத் திரையின் ஒரு குறிப்பிட்ட 
 
விழுக்காடாகக் கொடுப்பது நல்லது. அப்போதுதான் உலவித் திரையின் 
 
அகலம் மாறுவதற்கேற்ப அட்டவணையின் அகலமும் தானாக மாறும்.  உம். 
 
Width="80%" எனக்கொடுக்கலாம். இவ்வாறு குறிப்பிட்ட சதவீத்தில் 
 
கொடுக்கும்போது திரையின் அகலத்திற்கு ஏற்றவாறு அட்டவணையும் 
 
அகலத்தை மாற்றிக்கொள்ளும்.


CELLSPACING பண்பு

 
 சிற்ற்றையின் ஓரத்திற்கும், உரைக்கும் இடையே உள்ள இடைவெளியைக் 
 
 குறிப்பிட CELLPADING என்னும் பண்பு பயன்படுகிறது. இதன் மதிப்பையும் 
 
புள்ளிகளில் (Pixels) கொடுக்க வேண்டும்.

BORDER பண்பு

அட்டவணை ஓரத்தின் தடிமனைக் குறிப்பட BORDER என்னும் பண்பு 
 
பயன்படுகிறது. இதன் மதிப்பையும் புள்ளிகளில் கொடுக்க வேண்டும். 
 
BORDER="0" என்று கொடுத்தால் அட்டவணையின் ஓரம் தனியாகத் 
 
தெரியாது.

அட்டவணையில் வரிசைகளை ஒவ்வொன்றாக உருவாக்க வேண்டும். 
 
ஒவ்வொரு வரிசையையம் தொடங்கி, அதில் உள்ள தகவல்களைக் 
 
கொடுத்துவிட்டு, அந்த வரிசையை மூட வேண்டும். <TR> மற்றும் </TR> 
 
குறி ஒட்டுகள், முறையே வரிசையைத் தொடங்கவும், மூடவும் 
 
பயன்படுகின்றன.  வரிசைகளுக்குள் <TD> மற்றும் </TD> குறிஒட்டுகளைப் 
 
பயன்படுத்தி சிற்ற்றைகளை உருவாக்கலாம். <TH> மற்றும் </TH> குறி 
 
ஒட்டுகளைப் பயன்படுத்தி உருவாக்கப்படும் தலைப்புகள் சிற்றறையின் 
 
மையத்தில் தடிமனாகக் காட்டப்படும்.


கீழ்க்கண்ட அட்டவணையை உருவாக்குவது எப்படி என்பதைக் காண்போம்.

Name
Tamil
English
Computer
Latha
85
76
92
Revathi
97
85
63
Bavya
99
98
100
Ravi
68
77
90


இதுபோல வலைப்பக்கத்தில் அட்டவணையை உருவாக்க கீழ்க்கண்டவாறு 
 
HTML நிரல்வரிகளை எழுத வேண்டும்.


<html>
<head>
<title>Creating a Table</title>
</head>
<body>
<!--Starting a table-->
<table width="100%" cellspacing="5" cellpadding="5" border="5">
<!--Row1-->
<tr>
<th>Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer Science</th>
</tr>
<!--Row2-->
<tr>
<td>Latha</td>
<td>85</td>
<td>76</td>
<td>92</td>
</tr>
<!--Row3-->
<tr>
<td>Revathi</td>
<td>97</td>
<td>85</td> 
<td>63</td> 
</tr>
<!--Row4-->
<tr>
<td> Bavya </td>
<td>99</td>
<td>98</td>
<td>100</td> 
</tr>
<!--Row5-->
<tr>

<td> Ravi</td>
 
<td>68</td>
<td>77</td>
<td>90</td>
</tr>
</table>
</body>
</html>

மேற்கண்ட நிரல்வரிகளை நோட்பேடில் எழுதி, அதை .html என்ற விரிவுடன் 
 
சேமித்து, உலவியில் சேமித்த கோப்பைத் திறந்து பாருங்கள். இப்போது 
 
நீங்கள் உருவாக்கிய அட்டவணையானது அட்டகாசமாக உலவியில் 
 
வெளிப்பட்டிருக்கும்.


எளிய தமிழில் HTML கற்றுக்கொள்ள தொடரின் அனைத்துப் பதிவுகளையும் 
 
காண இந்த இணைப்பைச் சொடுக்கிப் படிக்கவும்.

, ,

HTML Tutorials 25-MARQUEE குறிஒட்டு(TAG)

Author:  |   | 

தொலைக்காட்சியிலும், விளம்பர மின்பலகைகளிலும் உரைகள் நகர்ந்து 

செல்வதை நீங்கள் பார்த்திருப்பீர்கள். அதே போல கணிப்பொறியின் 

திரையிலும் உரைகளை நகர வைக்கலாம். இதற்குத் தேவையான உரையை 

 <marquee> மற்றும் </marquee> என்ற இரு குறி ஒட்டுகளுக்கு இடையே 

கொடுக்க வேண்டும். எடுத்துக்காட்டாக, 

<marquee> Sample Text </marquee>

Sample Textஎன்பது "Sample Text" என்னும் உரையை திரையின் 
வலப்பக்கத்திலிருந்து இடப்பக்கத்திற்கு நகர்த்திக் கொண்டே இருக்கும்.


இந்தக் குறி ஒட்டுடன், நகரும் வரியின் பின்னணி வண்ணத்தையும், அது 
 
நகரும் திசையையும் குறிப்பிடலாம். இதற்கு BGCOLOR, DIRECTION என்னும் 
 
 
இரு பண்புகளைப் பயன்படுத்த வேண்டும். 

உதாரணமாக, 

<marquee bgcolor="Red" direction=""> Sample Text </marquee> 

Sample Textஎன்பது, ஒரு சிவப்புப் பட்டையில் "Sample Text" என்னும் உரையை 
 
இடமிருந்து வலமாக நகர்த்திக் கொண்டே இருக்கும். 


இந்த மார்க்யூ குறிஒட்டில் சிறப்புப் பண்புகளைப் பயன்படுத்த முடியும். இதில் 
 
வலமிருந்து இடம், இடமிருந்து வலம், மேலிருந்து கீழ், கீழிருந்து மேல், 
 
இப்படி நான்கு திசைகளிலும் உரையை நகர்த்தக்கூடிய பண்புகள் இருக்கிறது. 
 
இதைப்பற்றி விரிவாகக் காண நம் தங்கம்பழனி வலைதளத்தில் 
 
இடம்பெற்ற பிளாக்கரில் நகரும் எழுத்துக்களை உருவாக்க என்னும் பதிவில் 
 
காணவும்.



நன்றி நண்பர்களே.. அடுத்த தொடர் பதிவில் அனைவருக்கும் முக்கியமாகத் 
 
பட்டியல்கள் உருவாக்கப்படும் <TABLE> என்னும் குறிஒட்டைப் பற்றி 
 
காண்போம்

, ,

HTML Tutorials 24- பட்டியல்கள் (Lists)

Author:  |   | 


List Tag in Html 
கடந்த சில தினங்களாக எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் பதிவு 
 
எழுத இயலவில்லை என்பதை வருத்தத்துடன் தெரிவித்துக்கொள்கிறேன். 
 
இடைவிடாது பணி இருந்ததால், என்னால் இந்தத் தொடரை முழுவதுமாக 
 
எழுதி முடிக்க முடியுமா? என்ற சந்தேகம் தோன்று மறைந்தபோதும், எடுத்த 
 
முடிவில் உறுதியாய் இருந்து தொடரை முடிப்பதில் மீண்டும் 
 
ஆர்வம்கொண்டு எழுதியுள்ளேன். கடந்த எளிய தமிழில் HTML 
 
 கற்றுக்கொள்ள தொடர்பதிவில் BGSOUND (backgroun sound) என்பதைப் 
 
பார்த்தோம்.


இந்த குறிஒட்டைப் பயன்படுத்தி உங்கள் வலைப்பக்கத்தில் பின்னணி 
 
இசையை ஒலிக்கச் செய்யலாம். பதிவைப் படிக்க நினைப்பவர்கள் இந்த 
 
இணைப்பைச் சொடுக்கவும்.


இன்றைய பதிவில் பட்டியல்களைப்((LISTS)) பற்றிப் பார்ப்பும்.


நாம் பல சமயங்களில், பல தகவல்களை ஒன்றன்பின் ஒன்றாக 
 
பட்டியலிட்டுக் காட்ட வேண்டியிருக்கும். நீங்கள் MS Word போன்ற 
 
சொற்செயலிகளால்(Word processor) எண்வரிசை மற்றும் புல்லட் குறி 
 
வரிசைகளை உருவாக்குவது பற்றி தெரிந்து வைத்திருப்பீர்கள்.


இதில் மூன்று வகையான பட்டியல்களை உருவாக்கலாம். அவையாவன:


 1. வரிசைப் பட்டியல் (Ordered list)
 
 2. வரிசைப்படுத்தாப் பட்டியல் (Unordered list)
 
 3. வரையறைப் பட்டியல் (Definition List)


வரிசைப் பட்டியல் (Ordered list) 


இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் எண்வரிசைப் 
 
பட்டியலைப் போன்றதாகும். இந்தப் பட்டியலில் 1,2,3.. போன்ற எண்கள், 
 
(I,II,II... i,ii,iii,... போன்ற ரோமன் எண்கள் அல்லது A,B,C... a,b,c... போன்ற 
 
ஆங்கில எழுத்துக்கள் இருக்கலாம். வரிசைப் பட்டியலை <OL> என்னும் குறி 
 
ஒட்டில் தொடங்கி, </OL> என்னும் குறிஒட்டில் முடிக்க வேண்டும். இந்தக் 
 
 குறிஒட்டுகளுக்கு இடையே கொடுக்கப்படும் ஒவ்வொரு தகவலும் <LI> 
 
என்னும் குறிஒட்டுடன் (TAG)என்னும் குறிஒட்டுடன் தொடங்க வேண்டும்.


உதாரணத்திற்கு ஒரு HTML ஆவசத்தில் வழக்கும்போல <BODY></BODY> 
 
குறிஒட்டுகளுக்கிடையே கீழிருப்பதைப் போல எழுதி அதன் வெளிப்பாட்டை 
 
உலவியில் திறந்து பாருங்கள்.


<OL>
<li>Tamil</li>
<li>English</li> 
<li>Science</li> 
<li>Maths</li> 
</OL>


இதனுடைய வெளிப்பாடு

  1. Tamil
  2. English
  3. Science
  4. Maths

இவ்வாறு இருக்கும். அதேபோல HTML ஆவணத்தில் நாம் விரும்பிய எண் 
 
வரிசையிடலாம். நாம் விரும்பிய வரிசையை <OL> குறிஒட்டில் TYPE 
 
என்னும் பண்பைப் பயன்படுத்தி கொடுக்கலாம். கீழிருக்கும் உதாரணத்தைப் 
 
பாருங்கள்.

HTML ஆவணத்தில் <OL> குறிஒட்டில் பயன்படுத்தும் பண்புகள்
TYPE=”1”
1,2,3,….
TYPE=”A”
A,B,C,..
TYPE=”I”
I,II,III,…
TYPE=”I”
i,ii,iii,….
START என்னும் பண்பின் மூலம் பட்டியல் எந்த எண்ணிலிருந்து தொடங்க 
 
வேண்டும் என்பதைக் குறிப்பிடலாம். உதாரணமாக, <OL TYPE="1" 
 
START="4"  என்னும் குறிமுறை, பட்டியலை 4,5,6.. என நான்கு(4) 
 
எனத்தொடங்கும் எண்ணிலிருந்து தொடங்கும்படி அமைக்கலாம். START 
 
என்னும் பண்பு இதுபோல எந்த எண்ணிலிருந்து தொடங்க வேண்டும் 
 
என்பதைக் குறிக்கப் பயன்படுகிறது.

வரிசைப்படுத்தா பட்டியல்கள் (Unordered Lists)

இந்தப் பட்டியல் MS Word சொற்செயலியில் உருவாக்கப்படும் புல்லட் குறி 
 
பட்டியலை போன்றதாகும். இந்தப் பட்டியலில் வட்டமான அல்லது 
 
சதுரமான புல்லட் குறிகளைப் பயன்படுத்தி பட்டியல்களை உருவாக்கலாம். 
 
இந்த பட்டியலை <UL> என்னும் குறி ஒட்டுடன் தொடங்கி, </UL> என்னும் 
 
குறி ஒட்டுடன் முடிக்க வேண்டும். இந்தக் குறி ஒட்டுகளுக்கு இடையே 
 
கொடுக்கப்படும் ஒவ்வொரு தகவலும் கீழ்க்கண்ட உதாரணத்தில் 
 
உள்ளவாறு 
 
<LI> என்னும் குறி ஒட்டுடன் தொடங்க வேண்டும்.

HTML Code
Browser Display
<UL>
<li>Red
<li>Green
<li>Blue
</UL>
·         Red
·         Green
·         Blue


 
<UL> குறி ஒட்டுடன் பயன்படுத்தப்படும் TYPE பண்பு புல்லட் குறிகளின் 
 
ஸ்டைல்களைக் கொடுக்கப் பயன்படுகிறது. TYPE="Disc" என்பது நிரப்பிய 
 
வட்டத்தையும்,TYPE="Square"என்பது நிரப்பிய சதுரத்தையும், 
 
TYPE="Circle" என்பது வட்டக் கோட்டையும் புல்லட் குறிகளாகக் கொடுக்கப் 
 
பயன்படுகிறது.

வரையறைப் பட்டியல்கள் (Definition Lists)

இந்தப் பட்டியல், ஒவ்வொரு தகவலையும் அது என்ன என்று வரையறுத்துக் 
 
கூற உதவுகிறது. இதில் தகவல்கள் <DL> மற்றும் </DL> என்னும் குறி 
 
ஒட்டுகளுக்கு இடையே வர வேண்டும். ஒவ்வொரு தகவலும் <DT> என்ற 
 
குறி ஒட்டை அடுத்தும், ஒவ்வொரு வரையறையும் <DD> என்ற குறி 
 
ஒட்டை அடுத்தும் வர வேண்டும்.

 
<DT> மற்றும் <DD> குறி ஒட்டுகளுக்கு, முடிவுக் குறி ஒட்டுகள் இல்லை.

DL, DD, DT என்பதன் விரிவாக்கங்கள் முறையே Definition List, Definition 
 
Data, Definition term என்பதின் முதல் எழுத்துக்களைக்கொண்ட சுருக்கம் 
 
ஆகும்.

 
இந்த வரையறைப் பட்டியல்கள் (Definition Lists) பயன்படுத்தி ஒரு HTML 
 
Document எழுதுவோம் வாருங்கள்.

<HTML>
<HEAD>
<TITLE>Definition Lists</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Tea
<DD>A type of hot drink
<DT>Coffee
<DD>Another type of the hot drink
</DL>
</BODY>
</HTML>

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

Definition list in html

 
பதிவு பயனுள்ளதாக இருந்தால் சமூக தளங்களில் பகிர்ந்து உங்கள் 
 
நண்பர்களுக்குத் தெரியப்படுத்துங்கள்.

, ,

HTML Tutorials 23-Image குறி ஒட்டில் align, border மற்றும் HIGHT AND WIDTH பண்புகள்

Author:  |   | 

HTML IMG TAG ATTRIBUTES
img tag attributes
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
கடந்த பதிவில் HTML ஆவணத்தில் படங்களை சேர்ப்பது எப்படி என்பதைப் பற்றிப் பார்த்தோம்.


இப்பதிவின் தொடர்ச்சியாக <IMG> குறிஒட்டில் பயன்படுத்தும் பண்புகளைப் 
 
பற்றிப் பார்ப்போம்.

ALIGN பண்பு

உங்களுடைய படம் வலைப்பக்கத்தில் எந்த இடத்தில் தெரிய வேண்டும் 
 
என்பதை <IMG> குறிஒட்டில் ALIGN பண்பில் கொடுக்க வேண்டும். இந்த 
 
பண்பிற்கு left, right, top, bottom மற்றும் middle போன்ற மதிப்புகளைக் 
 
கொடுக்கலாம். <IMG> குறிஒட்டில் ALIGN பண்பை கொடுக்காதபோது, 
 
உங்களுடைய படம் வலை உலவி சாளரத்தின் இடதுபக்க மேல் ஓரத்தில் 
 
காட்டப்படும்.

<IMG SRC="image name with path" ALIGN = "Left/right/top/bottom/middle">

இதில் Left/right/top/bottom/middle என்பதில் படமானது எப்படி 
 
அமையவேண்டும் என்பதை நிர்ணயிக்க ஏதாவது ஒன்றைத் தேர்ந்தெடுத்துக் 
 
கொடுக்கலாம்.

இடது பக்கம் அமைய இவ்வாறு கொடுக்கலாம்.
 
<IMG SRC="image name with path" ALIGN = "Left">


BORDER பண்பு

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


இதன் பொது வடிவம் 



<IMG SRC="image name with path" BORDER="Value">



இங்கு BORDER என்னும் பண்பு படத்துடன் சேர்க்கப்படும் எல்லைகளின் 
 
தடிமனைக் குறிக்கிறது.



HIGHT AND WIDTH பண்பு

<IMG> குறி ஒட்டில் height மற்றும் Width பண்புகளைப் பயன்படுத்துவதன் 
 
மூலம் ஒரு படத்தின் உயரம் மற்றும் அகலத்தை நிர்ணயிக்க முடியும். 
 
படத்தின் உயரம் மற்றும் அகலத்தை புள்ளிகளில் (Pixels) கொடுக்கலாம். 
 
அல்லது சாளரத்தின் அளவில் எத்தனை சதவீதம் இருக்க வேண்டும் என்றும் 
 
கொடுக்கலாம்.

படத்தின் ஈரம் குறையாமல் இருக்க, அதன் உயர, அகல விகிதத்தை 
 
மாற்றக்கூடாது. நாம் ஏதேனும் ஒரு அளவைக் கொடுத்து படத்தின் அளவை 
 
மாற்றும் போது, மூலப் படத்தின் அளவு விகித்த்திற்கேற்ப மற்றொரு அளவு 
 
தானாகவே மாற்றப்படும்.



உங்கள் வலைப்பக்கதிற்குச் சரியாகப் பொருந்தக்கூடிய அளவுள்ள படத்தைத் 
 
தேர்ந்தெடுத்து, பின்னர் <IMG> குறி ஒட்டில் கீழ்க்கண்டவாறு பண்புகளைச் 
 
சேர்க்க வேண்டும்.



<IMG SRC="image name with path" HEIGHT= "pixels" WIDTH="pixels" >



ALT பண்பு

சில சமயங்களில் உங்கள் வலைப்பக்கங்களைப் பார்வையிடும் 
 
பார்வையாளர் உரையை மட்டும் காட்டும் உலவியைப் பயன்படுத்தலாம். 
 
அல்லது கோப்புகளை விரைவாகப் பார்வையிடுவதற்காக, படங்களைக் 
 
காண்பிப்பதைத் தடை செய்திருக்கலாம். இது போன்ற சமயங்களில் வலை 
 
உலவியானது படங்களைக் காட்டாது.

உலவித் திரை படங்களைக் காட்டாதபோது, அதற்குப் பதிலாக காட்ட 
 
வேண்டிய உரையை alt பண்பின் மூலம் கொடுக்கலாம். இந்த உரையானது 
 
நீங்கள் கொடுத்திருக்கும் படத்தைப் பற்றிய விளக்கமளிக்கக் கூடியதாக 
 
இருக்க வேண்டும்.

 
பொதுவடிவம்: 

<IMG SRC = "image name with path" ALT = "Alternative text">

குறிப்பு: <IMG> குறி ஒட்டிற்கு முடிவுக் குறி ஒட்டு கிடையாது. இந்தக் குறி 
 
ஒட்டு <IMG> குறிஒட்டில் SRC என்னும் பண்பு கட்டாயம் இடம்பெற 
 
வேண்டும். இந்த குறிஒட்டு <BODY></BODY> என்னும் குறிஒட்டிற்கு 
 
இடையில் பயன்படுத்தப்படுகிறது.


ஆவணத்தில் எத்தனைப் படங்களைச் சேர்க்க வேண்டுமோ, அதே 
 
எண்ணிக்கையில் <IMG> குறிஒட்டுகளைப் பயன்படுத்த வேண்டும்.

அடுத்த பதிவில் HTML ஆவணத்தில் ஒலியைச்(AUDIO) சேர்க்கப் பயன்படும் 
 
குறிஒட்டான <BGSOUND> -ஐப் பற்றிப் பார்ப்போம்.


இப்பதிவின் உதாரண நிரல்களைக் காண கடந்த பதிவைப் பார்க்கவும்.

,

HTML Tutorials 22-HTML ஆவணத்தில் படங்களைச் சேர்க்க

Author:  |   | 

பல வலையகங்கள்(Websites) படங்களைக் கொண்டிருக்கின்றன. 

நம்முடைய வலைபக்கத்தில் படங்களைச் சேர்ப்பதன் மூலம் 

பார்வையாளரின் கவனத்தை ஈர்க்க முடியும். வலைப்பக்கத்தில் மூன்று 

விதமான படக்கோப்புகளைச்(Image Files) சேர்க்க முடியும்.

GIF (Graphics Interchange Format)
JPG/JPEG(Joint Photographic Experts Group)
PNG(Portable Netwrok Graphics)

மேற்கண்ட கோப்புவகையுடன் கூடிய படங்களை HTML ஆவணத்தில் 
 
சேர்ப்பதன் மூலம் உங்கள் வலைப்பக்கங்களில் படங்களை காட்ட முடியும்.
 
இதற்குப் பயன்படும் குறிஒட்டு(TAG) <IMG> குறிஒட்டு எனப்படும்.


இந்த <IMG> குறிஒட்டு எப்பொழுதும் SRC என்னும் பண்புடன் சேர்த்தே 
 
கொடுக்கப்படுகிறது.  SRC என்னும் பண்பு, படக் கோப்பின் பெயரை 
 
தடத்துடன்(File Path) குறிப்பிடப் பயன்படுகிறது.


உதாரணமாக,
 
<IMG SRC = "image name with path">
 
என்னும் வகையில் அமைந்திருக்க வேண்டும்.



உதாரண நிரல் வரிகளைக் காண்போம்.
 
<IMG SRC = "C:\mypictures\cartoons\mickeymouse.jpg">  என்றவாறு இருக்க வேண்டும்.

ஒரு முழு HTML ஆவணத்தைக் காண்போம்.

<HTML>
<HEAD>
<TITLE>Inserting images in html doucment</TITLE>
</HEAD>
<BODY>
<IMG SRC = "C:\mypictures\cartoons\mickeymouse.jpg"> 
</BODY>
</HTML>

மேற்கண்ட நிரல்வரிகளை நோட்பேடில் எழுதி .html என்ற விரிவுடன் 
 
சேமித்து , அதை உலவியில் திறந்துப் பாருங்கள்..


குறிப்பு: சிவப்பு நிறத்தில் உள்ளதிற்கு பதில் உங்கள் கணினியில் உள்ள 
 
படத்தின் (File Path) தடத்தைக் கொடுக்கவும்

, ,

Popular Posts

Facebook

Blog Archive