මොකක්ද එච්-ටී-එම්-එල් කියන්නේ

Published at 12:32 AM in එච්-ටී-එම්-එල්

එච්-ටී-එම්-එල් කියන්නේ මේ අද ඊයේ ආපු දෙයක් නෙමේ. නමුත් අදටත් ලොකේ හැමෝම මේක පාවිච්චි කරනවා මේ වෙබ් ඩිවලොප්මන්ට් වලට. මොකද එච්-ටී-එම්-එල් නැත්තං වෙබ් එකක් නෑ. අපි බලමු මොනවද මේ html වලින් කරන්නේ කියලා අද ඉදන්. html – Hyper Text Markup Language කියන එකයි.. ඒක තමා වෙබ් පේජ් වල ගොඩනැගුම ඇත්තටම.මේ html වල වැඩේ තමා හැම දෙයක්ම වෙන්නේ ටැග් අතුලේයි.. උදාහරණයක් විඩියට අපි html එකක් පටන් ගන්නේ <html> හා එක අවසන් කරන්නේ </html> යන විදියටයි. අපි හැම වෙලේම එක ටැග් එකක් විව්‍යත කලාට පසු ඒක වහන්න ඕනේ.. <>..</>.
මේ ගිනි නරියලා එහෙම කියවන්නේ අපි මේ ලියන html ටැග් තමා.ඊට පස්සෙ එයා ඒකට අදාල තොරතුරු එයාගේ browse area එකේ පෙන්නනවා. අපි දැන් බලමු පොඩි උදාහරනයක්


<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>


</body>

</html>

1. හැම වෙලේම පටන් ගන්නේ <html> කියන ටැග් එකෙන් හා අවසන් වන්නේ </html> යන විදියටයි.

…2.<h1></h1> කියන්නේ හෙඩින්ග්ස් කියන එකයි. අපට පුලුවන් මේකට 1 ඉදන් 6 වෙනකල් ඉලක්කම් දෙන්න

…3.<p></p> කියන්නේ පැරග්‍රාෆ් කියන එකයි. අපි මොනවා හරි චේදයක් ලියනකොට තමා මේක පාවිච්චි කරන්නේ.

…4.මේ ලියපු එක අපි save කරන්නේ filename.html කියන එක අගට දාලයි

01-HTML Introduction

HTML කියන්නේ Hyper Text Markup Language කියන එක.මේක programming language නෙවේ එත් markup language එකක්. පහත දැක්වෙන්නේ HTML වල සරලම code එකකි.

<html>
<body>

<h1>University Of Colombo</h1>
<p>Sri Lanka>

</body>
</html>

හොදින් මතක තබා ගන්න.ඔබ HTML ලිවීමට පටන් ගත යුත්තේ <html> tag එක ඇතුලය.ඔබ code එකක් ලියු පසු(සරලවම ලිවීමට notepad එක යොදා ගනී.)එය .html ලෙස ඔබට අදාල තැන save කරගන්න.

1. රූපය

ඉහත ආකාරයට save කල පසු ඔබට 2. රූපය ලෙස දිස්වේ.දැන් එය open කර බලන්න,HTML වල output එක අපට දැක ගත හැක්කේ browser හරහායි.ඔබට කැමති browserයකින් මෙය open කර බැලිය හැක.මතක තබා ගන්න browser වෙනස් වනවාත් සමගම output එකෙත් යම් යම් වෙනස් වීම් දැකගත හැක.අප යොදා ගනුයේ google chrome browser යයි.

ඔබට ප්‍රතිපලය පහත ලෙස දිස්වේ.

3. රූපය

සිතන්න ඔබ notepad එකේ ලියු code එකේ වෙනසක් කලා නම් දැන් එය save කර browser එක reload කිරීමෙන් ඔබ කල වෙනස ඔබට දක්නට ලැබේවි.

02 - HTML Tag

අපි දැන් <html> tag ගැන කතා කරමු.

· HTML Headings(<h> tag)

<h1> University Of Colombo </h1>
<h2> University Of Colombo </h2>
<h3> University Of Colombo </h3>

<h1> සිට <h6> දක්වා භාවිත කල හැක. එවිට අකුරු වල ප්‍රමාණයන් වෙනස් වේ.

h1>h2>h3>h4>h5>h6

· HTML Paragraphs(<p> tag)

<p> University Of Colombo <p>
<p> University Of Colombo <p>

<p> tag ජේදයක් ලිවීමට යොදා ගනී.

· HTML Links(<a> tag)

Link කිරීම මගින් වෙනත් වෙබ් පිටුවකට පිවිසීම සිදුකල හැක.

· HTML Images(<img> tag)

මෙමගින් පින්තුරය ඇති ස්ථානය දැක්වේ. පින්තුරයේ ප්‍රමාණය අවශ්‍ය පරිදි වෙනස් කල හැකිය.

සිතන්න ඔබ ලියු code එක save කලේ desktop එකේ ucsc නම් folder එකේ නම් පින්තුරයද එහිම විය යුතු නැත.ඔබ නිවැරදිව පින්තුරය ඇති තැන ලබාදෙන්න.නමුත් පින්තුර වලට ucsc folder තුලම images නමින් folder එකක් සදා එහි තැන්පත් කරන්න.මන්ද එවිට ඔබේ වැඩ කටයුතු වලට පහසු වනු ඇත.

ඔබ පින්තුරය ucsc folder එක තුල තැන්පත් කලේ නම්,

ඔබ වෙනත් වෙබ් අඩවියකින් පින්තුරයක් උපුටා ගනීනම් එහි එක නිවැරදිව ලබාදෙන්න.

පින්තුරයේ ප්‍රමාණය වෙනස් කලයුතුනම් width=" " height=" " යොදාගනී.අනවශ්‍ය නම් එය භාවිතා නොකරන්න.

03 - HTML Elements

Start tag *	Element content	End tag *
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />

අපි දැන් සරල උදාහරනයක් සලකමු .

<html>

<title> Sri lanka </title>

<body>

<hr/>

<h3>Colombo</h3>

<p>colomo is the main city of sri lanka.<br/>It is so beautiful.</p>

<br/>

For more details<a href="http://www.srilanka.com">Click Here</a>

<hr/>

</body>

</html>

මෙහි ප්‍රතිපලය පහත වේ.

4. රූපය

ඉහත ඇති එක එක හදුනාගමු.

1. <title> - ඔබේ වෙබ් අඩවියට title එකක් ලබාදේ.

2. <body> - වෙබ් අඩවියේ වැදගත්ම කොටසයි.මෙම tag එක භාවිතා නොකළ මුත් කිසි වෙනසක් සිදු නොවුනත් වඩා හරවත්ව ලිවීමේදී යොදා ගනී.

3. <hr/> - මෙමගින් සරල රේඛාවක් ඇදීමට හැක.

4. <br/> - පේලියක් පන්නා print කිරීමට මෙම යොදාගනී.

· Comment කිරීම.

HTML වල පහත ලෙස comment කල හැක.

04- HTML Text Formatting

පහත උදාහරණය සලකන්න.

<html>

<body>

<p><b> Sri lanka </b></p>

<p><strong> Sri lanka </strong></p>

<p><big> Sri lanka </big></p>

<p><i> Sri lanka </i></p>

<p><em> Sri lanka </em></p>

<p><code> Sri lanka </code></p>

<p>our<sub> Sri lanka </sub> one <sup> Sri lanka </sup></p>

</body>

</html>

මෙහි ප්‍රතිපලය පහත වේ.

5. රූපය

මෙතෙක් අප කල පාඩම් වල ඔබට ගැටළුවක් ඇත්නම් අපේ වෙබ් අඩවියේ forum එක වෙත පිවිසෙන්න.

HTML Fonts

University Of Colombo

</font>

මෙහි ප්‍රතිපලය :

6. රූපය

HTML වල අලුත්ම version එක වන HTML 5 හි <font> එක ඉවත් කර එය CSS වලට ඇතුල් කර ඇත.

font size="5" - ලියන වාක්‍යයේ ප්‍රමාණය වෙනස් කල හැක.

face="arial" - ලියන වාක්‍යයේ font එක

color="red"> - ලියන වාක්‍යයේ වර්ණය

05 - HTML Style

අපි උදාහරණ කීපයක් සාකච්චා කරමු.

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">Sri lanka</h2>
<p style="background-color:green;">Colombo></p>
</body>
</html>

body style - මෙහිදී පසුබිම(සම්පුර්ණ වෙබ් පිටුව) කහ වර්ණය යොදන ලෙස කියා ඇත.

h2 style - ඔබ ලියන මාතෘකාවට රතු වර්ණය යොදන ලෙස කියා ඇත.

p style - ජේදයේ පසුබිම කොළ වර්ණය යොදන ලෙස කියා ඇත.

7. රූපය

දෙවෙනි උදාහරණය

<html>

<body>
<h1 style="font-family:verdana;">UCSC</h1>
<p style="font-family:arial;color:red;font-size:20px;">sri lanka,the miracle of asia.</p>
</body>

</html>

8. රූපය

තුන්වන උදාහරණය

<html>

<body>
<h1 style="text-align:center;">Sri lanka</h1>
<p>Sri lanka is a beautiful country.</p>
</body>
</html>

මෙහිදී සිදු කර ඇත්තේ මෙහි මාතෘකාව වෙබ් පිටුවේ මැදට ගැනීමයි.මිට අමතරව ඕනෑම වාක්‍යක්,වචනයක්,පින්තුරයක් හෝ වෙනත් දෑ වෙබ් පිටුවේ මැදට ගැනීමට <center> යන tag එක යොදා ගත හැක. නමුත් දැන් ඒවා භාවිතයෙන් ඉවත් කර ඇත.

මෙහි දක්වා ඇත්තේ .gif ගනයේ පින්තුරයක් වෙබ් පිටුවේ මැදට ගන්න ආකාරයයි.

තුන්වන උදාහරණයේ ප්‍රතිපලය පහත වේ.

9. රූපය

06 - HTML Links(part 2)

HTML Links ගැන අපි කලින් සරලව කතා කලා.සිතන්න ඔබ Link එකක් ඔබේ වෙබ් පිටුවට යොදයි නම් ඔබට එම Link එක වෙනත් tab එකකින් open කිරීමට අවශ්‍ය නම් පහත පරිදි එක ලිවිය යුතුය.

<a href="http://www.cricmore.com" target="_blank">cricket</a>

ඔබ එකම folder එකක sa.html හා uoc.html යන්න save කර ඇතැයි සිතන්න.sa.html හි code එක පහත පරිදි නම් ඔබ click here යන්න click කල විට uoc.html විදානයන් ට (uoc.html ට අදාල වෙබ් පිටුව) අදාලව ක්‍රියාත්මක වේ.

<html>

<a href=”uoc.html”> click here </a>

</html>

සියලුම උදාහරණ ඔබ විසින් අත්හදා බැලීමෙන් ඔබේ දැනුම වර්ධනය කරගන්න.

07 - HTML Images(part 2)

පහත උදාහරණය බලන්න.

ඉහත alt attribute එක මගින් ඔබේ internet connection එක slow වූ විට හෝ අනෙකුත් ප්‍රශ්නයක් නිසා ඔබට පින්තුරය නොපෙනේනම් alt attribute එකෙහි ලියා ඇති text එක පෙන්නුම් කරයි. එමගින් පින්තුරය පිළිබද අවබෝදයක් ඔබට ලබා ගත හැක.

width="30" height="22" යන්න වෙනස් කරමින් ප්‍රතිපලය සලකා බලන්න.

08 - HTML Tables

වගුවක්(table) පේලි කීපයකට බෙදු විට (<tr> tag එක මගින්),සෑම පේලියක්ම දත්ත කුටි (data cells) වලට බෙදා ඇත. (<tr> tag එක මගින් වගුවේ දත්ත දරන අතර ඒවා data cell වල අන්තර්ගත වේ.

Tag එක	විස්තරය
<table>	වගුව විස්තර කිරීම.
<th>	වගුවේ නම විස්තර කිරීම.
<tr>	වගුවේ row විස්තර කිරීම.
<td>	වගුවේ cell විස්තර කිරීම.
<caption>	වගුවේ ශීර්ෂය විස්තර කිරීම.

පහත උදාහරණය සලකන්න.

<html>

<table border="1">
<tr>
<td>kamal</td>
<td>anura</td>
</tr>
<tr>
<td>madawa</td>
<td>lakshan</td>
</tr>
</table>
</html>

ප්‍රතිපලය:

table border="1" යන්නෙහි අගය වෙනස් කරමින්  කුමක් වන්නේදැයි බලන්න.

<html>

<table border="1">

<tr>

<th>smart</th>

<th>handsome</th>

</tr>

<tr>

<td>kamal</td>

<td>anura</td>

</tr>

<tr>

<td>madawa</td>

<td>lakshan</td>

</tr>

</table>

</html>

ප්‍රතිපලය:

පහත උදාහරණයේ වගුවක් සඳහා වර්ණ එක කිරීමද පෙන්වා ඇත.ඔබ එය අත්හදා බලන්න.

<html>

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

<tr>

    <td bgcolor="#660000">

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

    <tr>

        <td bgcolor="#FF00FF"> kamal </td>

        <td bgcolor="#FFFFCC"> anura </td>

    </tr> <tr>

        <td bgcolor="#FFFFCC"> madawa </td>

        <td bgcolor="#FFFFCC"> lakshan </td>

    </tr> </table>

   </td> </tr>

</table> </html>

 ප්‍රතිපලය:

HTML

<html>

<title> Sri lanka </title>

<body>

<hr/>

<h3>Colombo</h3>

<p>colomo is the main city of sri lanka.<br/>It is so beautiful.</p>

<br/>

For more details<a href="http://www.srilanka.com">Click Here</a>

<hr/>

</body>

</html>

මෙහි ප්‍රතිපලය පහත වේ.

ඉහත ඇති එක එක හදුනාගමු.

1. <title> - ඔබේ වෙබ් අඩවියට title එකක් ලබාදේ.

2. <body> - වෙබ් අඩවියේ වැදගත්ම කොටසයි.මෙම tag එක භාවිතා නොකළ මුත් කිසි වෙනසක් සිදු නොවුනත් වඩා හරවත්ව ලිවීමේදී යොදා ගනී.

3. <hr/> - මෙමගින් සරල රේඛාවක් ඇදීමට හැක.

4. <br/> - පේලියක් පන්නා print කිරීමට මෙම යොදාගනී.

· Comment කිරීම.

HTML වල පහත ලෙස comment කල හැක.

පහත උදාහරණය සලකන්න.

<html>

<body>

<p><b> Sri lanka </b></p>

<p><strong> Sri lanka </strong></p>

<p><big> Sri lanka </big></p>

<p><i> Sri lanka </i></p>

<p><em> Sri lanka </em></p>

<p><code> Sri lanka </code></p>

<p>our<sub> Sri lanka </sub> one <sup> Sri lanka </sup></p>

</body>

</html>

මෙහි ප්‍රතිපලය පහත වේ.

මෙතෙක් අප කල පාඩම් වල ඔබට ගැටළුවක් ඇත්නම් අපේ වෙබ් අඩවියේ forum එක වෙත පිවිසෙන්න.

බහුතරව යොදා ගන්නා HTML Lists වන්නේ ordered (පිළිවලක් ඇති) හා unordered (පිළිවලක් නැති)යන ඒවායි

Comments

Post a Comment

Popular posts from this blog