අකුරු හැඩ වැඩ කර මදැයි නේද. දැන් අපිට ටිකකට මග හැරුනු දෙයක් ගැන මතක් කර ගමු. ඒ <head> ටැග් යුගලෙ. අපි මේ ටැග් යුගල <body> ටැගය පටන් ගන්න කලින් නිකන් ලීව විතරනේ. ඒත් පාවිච්චි කරේ නෑ නෙ. ඔයාලගේ වෙබ් පිටුව බ්‍රවුසරයෙන් දකිද්දි ඔයාල දැක්කද බ්‍රවුසරයේ title bar එකෙ තියෙන නම? ඒකෙ හරිම කැත විදියට ඔයාලගේ වෙබ් පිටුව තියෙන තැනට පාත් path එක පෙන්නනවා නේද? අන්න ඒ දේවල් වෙනස් කර ගන්න විතරක් නෙවෙයි, තව තව දේවල් වෙනස් කර ගන්න උදව් වෙන්නෙ මේ ටැඝ් යුගල අතරේ ලියන තවත් ටැග් කීපයකින්. වෙබ් පිටුවක් ගැන ප්‍රධාන විස්තර ටික සඳහන් වෙන්නේ මෙන්න මේ ටැග් දෙක අතරේ. ඒවා වෙබ් පිටුව ගැන හොඳ විස්තරයක් සපයනවා. විශේෂයෙන් වෙබ් පිටුවක් අපිට ඕනෙ නම් Google වලින් search කරාම පෙන්නවන්න, මෙන්න මේ ටැග් යුගල අතරේ දාන දේවල් තමා ප්‍රයෝජනවත් වෙන්නේ. මූලික වශයෙන්ම අර title bar එකේ පෙන්නන කැත නම වෙනස් කර ගනිමු. ඒ අපේ වෙබ් පිටුවට අපි දෙන නමයි. ඒ කියන්නේ title එකයි. ඒක දෙන ටැග් යුගලෙ නමත් "title". ලියන්නේ "<title> ඔබේ වෙබ් පිටුවේ නම </title>" කියලායි. අපි පසුවට කතා කරන්න ඉන්න css, styles, javascript එහෙම ලියන්නේ head ටැග් යුගල අතරේයි. මොකද ඒවා වෙබ් පිටුවක් අපේ බ්‍රවුසරය මතට එද්දි මුලින්ම පැමිණිය (load විය) යුතු නිසා. <title> ටැග් එක ලියන්නේ මෙන්න මෙහෙමයි <head> ටැග් අතරේ.
<html>
<head>
<title>This is my Web Page</title>
</head>
<body>
</body>
</html>
මෙහෙම දාලා save කරල බැලුවම එප්නෙයි දැන් අර මුලින් තිබුණු කැත නම නැතිව අපි දාපු වචන තියෙන බව. තව මෙටා "meta" කියලා ටැග් විශේෂයක් තියෙනවා. මෙන්න මේ ටැග් තමා අපිට සෙවුම් යන්ත්‍රයකට (search engine) අපේ වෙබ් පිටුව සෙවුම් ප්‍රතිඵල (search results) වලට යොදා ගන්න උපකාරී වෙන්නේ. ඒ ගැන අපි පස්සට කතා කරමු. සමහර විට මේ පාඩම ඉවර වෙලා වගේ. නැත්තම් අපි යන ගමනට ගොඩාක් පරක්කු වෙනවා නේ. ඒ ටැග් ලියන්නෙත් මේ <head> ටැග් දෙක අතරෙමයි. හැබැයි ඒවා නම් තනි ටැග්. යුගල ටැග් නෙවෙයි.
යුගල ටැග් තියෙනවා නම් තනි ටැගුත් තියෙන්න එපැයි. ඒත් වැඩියෙන්ම තියෙන්නේ යුගල ඒවා නිසායි මුලින්ම ඒ ගැන කියලා දුන්නේ. මේ තනි ටැග් අවසන් කරන්නේ අනික්වායේ වගේම "/" ලකුණක් යොදලා. හැබැයි නොදැම්මාය කියලා වරදක් වෙන්නේ නෑ. මොකද ඒවා තනි ටැග් නිසා. ඒත් වඩා හොඳ "/" යොදා ගෙන අවසන් කරන එකයි. මේවායෙන් සමහරක් ටැග් වලට ඇට්‍රිබියුට් තියෙනවා, සමහරෙක්ට නෑ. ලියන්න පටන් ගන්නේ කලින් වගේමයි, "<" වලින් පටන් ගෙන ටැගයේ නම ලියලා "/>" කියලායි අවසන් කරන්නේ. "< tagname />" කියලායි ඔය කීව එක ලියන්නේ. අපේ වෙබ් පිටුවේ කොහේ හරි තැනක රූලක් යටට පනින්න ඕනෙ වුනොත් පාවිච්චි කරන "br" (page break) ටැග් එක මේ ගණයේ. ඒ වගේම පිංතූරයක් එකතු කර ගන්න ඕනේ නම් පාවිච්චි කරන්න තියෙන්නේ "img" (image) කියන මේ විදියේ ටැග් එකක්. එතකොට ඉන්න තැන හරස් අතට ඉරක් ඇඳ ගන්න ඕනෙ නම් පාවිච්චි කරන "hr" (horizontal rule) ටැගයත් මේ ජාතියේමයි.
ඉන්න තැන ඉඳන් රූලක් පහලට ගිහින් ලියාගෙන යන්න ඕනෙ නම් අපි පාවිච්චි කරන "br" ටැගය ලියන්නේ "<br />" කියලායි. ඇට්‍රිබියුට් අවශ්‍ය නෑ.
ඉන්න තැනට පහලින් රූලක් ඇඳ ගන්න, නැත්නම් හරස් අතට ඉරක් ඇඳ ගන්න නම් "hr" ටැගය පාවිච්චි කරන්නේ "< hr />" කියලා. පාවිච්චි කරන්න පුළුවන් ඇට්‍රිබියුට් තුනක් තියෙනවා. ඒ "color", "noshade" සහ "width" කියන ඒවායි. color එක ගැන නම් ඔයාල දැන් දන්නවා අගයන් දෙන හැටි. ඉරේ පාට තමයි මේකට දෙන අගයෙන් තීරනය වෙන්නේ. width එක වෙනුවට කැමති අගයක් දෙන්න පුළුවන්. ඒකෙන් තීරණය වෙන්නේ ඇඳෙන ඉරේ දිග කොච්චරද කියලා. අගයක් නුදුන්නොත් ගන්න පුළුවන් සම්පූර්ණ දිග ගන්නවා. අනික තමයි noshade ඇට්‍රිබියුට් එක. මේකෙන් කියන්නේ ඇඳෙන ඉර ත්‍රිමාන පෙනුමක් තියෙන එකක්ද නැත්තම් ද්වීමාන පෙනුමක් තියෙන එකක්ද කියලා. එන අගය "noshade" විතරයි. මේ ඔක්කොම ලියන්නේ මෙන්න මෙහෙමයි.
<hr color="#003333" noshade="noshade" width="500" />
මීලඟ තනි ටැගය "img". අපේ වෙබ් පිටුවට පිංතූරයක් දා ගන්න ඕනෙ නම් මේ ටැගයයි පාවිච්චි කරන්නේ. ලියන්නේ <img /> කියල. මේකෙ නම් ඇට්‍රිබියුට් කීපයක්ම තියෙනවා පාවිච්චි කර ගන්න පුළුවන්. ඒ "src", "width", "height", "border" සහ "align" කියන ඒවා. මේ හැම ඇට්‍රිබියුට් එකම අවශ්‍ය නෑ "src" කියන එක හැර. ඒකෙන් තමා පෙන්විය යුතු පිංතූරය තෝරලා දෙන්නේ. මේවායේ තේරුම් පහල තියෙනවා.
src (source) - පිංතූරය තියෙන තැන සහ ඒ පිංතූර ෆයිල් එකට පාත් (path) එක.
width - පිංතූරයේ දිග.
height - පිංතූරයේ උස.
border - පිංතූරය වටේට බෝඩරයක් තියනවා නම් ඒ බෝඩරයේ මහත (0 සිට ඉහලට).
align - පිංතූරයත් එක්ක ඒ වටේ තියෙන වචන, ඡේද පිංතූරයට සමගාමිව්ව මොන අතටද වෙන්න ඕනෙ කියලා.
පිංතූරයේ දිග (width) විතරක් දීලා උස (height) අත හැරියොත්, දිගට (width) සාපේක්ශව ඇත්ත පිංතූරයේ උස (height) ඉබේම හැදෙනවා සමානුපාතිකව. ඒ වගේම, පිංතූරයේ උස (height) විතරක් දීලා දිග (width) අත හැරියොත්, උසට (height) සාපේක්ශව ඇත්ත පිංතූරයේ දිග (width) ඉබේම හැදෙනවා සමානුපාතිකව.
සම්පූර්ණ ටැගය ඔක්කොම ඇට්‍රිබියුට් එක්ක ලියවෙන්නේ මෙහෙම.
<img src="C:\ABC\mypic.jpg" align="left" border="2" height="200" width="200" />
<head>
<title>This is my Web Page</title>
</head>
<body>
</body>
</html>
මෙහෙම දාලා save කරල බැලුවම එප්නෙයි දැන් අර මුලින් තිබුණු කැත නම නැතිව අපි දාපු වචන තියෙන බව. තව මෙටා "meta" කියලා ටැග් විශේෂයක් තියෙනවා. මෙන්න මේ ටැග් තමා අපිට සෙවුම් යන්ත්‍රයකට (search engine) අපේ වෙබ් පිටුව සෙවුම් ප්‍රතිඵල (search results) වලට යොදා ගන්න උපකාරී වෙන්නේ. ඒ ගැන අපි පස්සට කතා කරමු. සමහර විට මේ පාඩම ඉවර වෙලා වගේ. නැත්තම් අපි යන ගමනට ගොඩාක් පරක්කු වෙනවා නේ. ඒ ටැග් ලියන්නෙත් මේ <head> ටැග් දෙක අතරෙමයි. හැබැයි ඒවා නම් තනි ටැග්. යුගල ටැග් නෙවෙයි.
යුගල ටැග් තියෙනවා නම් තනි ටැගුත් තියෙන්න එපැයි. ඒත් වැඩියෙන්ම තියෙන්නේ යුගල ඒවා නිසායි මුලින්ම ඒ ගැන කියලා දුන්නේ. මේ තනි ටැග් අවසන් කරන්නේ අනික්වායේ වගේම "/" ලකුණක් යොදලා. හැබැයි නොදැම්මාය කියලා වරදක් වෙන්නේ නෑ. මොකද ඒවා තනි ටැග් නිසා. ඒත් වඩා හොඳ "/" යොදා ගෙන අවසන් කරන එකයි. මේවායෙන් සමහරක් ටැග් වලට ඇට්‍රිබියුට් තියෙනවා, සමහරෙක්ට නෑ. ලියන්න පටන් ගන්නේ කලින් වගේමයි, "<" වලින් පටන් ගෙන ටැගයේ නම ලියලා "/>" කියලායි අවසන් කරන්නේ. "< tagname />" කියලායි ඔය කීව එක ලියන්නේ. අපේ වෙබ් පිටුවේ කොහේ හරි තැනක රූලක් යටට පනින්න ඕනෙ වුනොත් පාවිච්චි කරන "br" (page break) ටැග් එක මේ ගණයේ. ඒ වගේම පිංතූරයක් එකතු කර ගන්න ඕනේ නම් පාවිච්චි කරන්න තියෙන්නේ "img" (image) කියන මේ විදියේ ටැග් එකක්. එතකොට ඉන්න තැන හරස් අතට ඉරක් ඇඳ ගන්න ඕනෙ නම් පාවිච්චි කරන "hr" (horizontal rule) ටැගයත් මේ ජාතියේමයි.
ඉන්න තැන ඉඳන් රූලක් පහලට ගිහින් ලියාගෙන යන්න ඕනෙ නම් අපි පාවිච්චි කරන "br" ටැගය ලියන්නේ "<br />" කියලායි. ඇට්‍රිබියුට් අවශ්‍ය නෑ.
ඉන්න තැනට පහලින් රූලක් ඇඳ ගන්න, නැත්නම් හරස් අතට ඉරක් ඇඳ ගන්න නම් "hr" ටැගය පාවිච්චි කරන්නේ "< hr />" කියලා. පාවිච්චි කරන්න පුළුවන් ඇට්‍රිබියුට් තුනක් තියෙනවා. ඒ "color", "noshade" සහ "width" කියන ඒවායි. color එක ගැන නම් ඔයාල දැන් දන්නවා අගයන් දෙන හැටි. ඉරේ පාට තමයි මේකට දෙන අගයෙන් තීරනය වෙන්නේ. width එක වෙනුවට කැමති අගයක් දෙන්න පුළුවන්. ඒකෙන් තීරණය වෙන්නේ ඇඳෙන ඉරේ දිග කොච්චරද කියලා. අගයක් නුදුන්නොත් ගන්න පුළුවන් සම්පූර්ණ දිග ගන්නවා. අනික තමයි noshade ඇට්‍රිබියුට් එක. මේකෙන් කියන්නේ ඇඳෙන ඉර ත්‍රිමාන පෙනුමක් තියෙන එකක්ද නැත්තම් ද්වීමාන පෙනුමක් තියෙන එකක්ද කියලා. එන අගය "noshade" විතරයි. මේ ඔක්කොම ලියන්නේ මෙන්න මෙහෙමයි.
<hr color="#003333" noshade="noshade" width="500" />
මීලඟ තනි ටැගය "img". අපේ වෙබ් පිටුවට පිංතූරයක් දා ගන්න ඕනෙ නම් මේ ටැගයයි පාවිච්චි කරන්නේ. ලියන්නේ <img /> කියල. මේකෙ නම් ඇට්‍රිබියුට් කීපයක්ම තියෙනවා පාවිච්චි කර ගන්න පුළුවන්. ඒ "src", "width", "height", "border" සහ "align" කියන ඒවා. මේ හැම ඇට්‍රිබියුට් එකම අවශ්‍ය නෑ "src" කියන එක හැර. ඒකෙන් තමා පෙන්විය යුතු පිංතූරය තෝරලා දෙන්නේ. මේවායේ තේරුම් පහල තියෙනවා.
src (source) - පිංතූරය තියෙන තැන සහ ඒ පිංතූර ෆයිල් එකට පාත් (path) එක.
width - පිංතූරයේ දිග.
height - පිංතූරයේ උස.
border - පිංතූරය වටේට බෝඩරයක් තියනවා නම් ඒ බෝඩරයේ මහත (0 සිට ඉහලට).
align - පිංතූරයත් එක්ක ඒ වටේ තියෙන වචන, ඡේද පිංතූරයට සමගාමිව්ව මොන අතටද වෙන්න ඕනෙ කියලා.
පිංතූරයේ දිග (width) විතරක් දීලා උස (height) අත හැරියොත්, දිගට (width) සාපේක්ශව ඇත්ත පිංතූරයේ උස (height) ඉබේම හැදෙනවා සමානුපාතිකව. ඒ වගේම, පිංතූරයේ උස (height) විතරක් දීලා දිග (width) අත හැරියොත්, උසට (height) සාපේක්ශව ඇත්ත පිංතූරයේ දිග (width) ඉබේම හැදෙනවා සමානුපාතිකව.
සම්පූර්ණ ටැගය ඔක්කොම ඇට්‍රිබියුට් එක්ක ලියවෙන්නේ මෙහෙම.
<img src="C:\ABC\mypic.jpg" align="left" border="2" height="200" width="200" />
This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image. This is a sample text paragraph to show how text align with this image.
Posts
2 comments:
keep on writing...
මල්ලි මම ඔයාගෙ පාඩම මුල ඉදලම කියනවා.දිගටම ලියන්න.
Post a Comment