දන්න කියන දෙයක් හැමෝටම දැනගන්න කියලා ලියන මේ බ්ලොග් පිටුවට ඔයාලව ආදරයෙන් පිළි ගන්නවා. ඉගෙන ගන්න පුළුවන් දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා. ආපු වෙලාවක කොමෙන්ට් එකක් දාන්නත්, පාඨකයෙක් විදියට ෆොලෝ කරන්නත් පුළුවන් නම් වටිනවා.

Wednesday, May 26, 2010

PHP කරා යමු - 16 (HTML)

පහු ගිය පාඩමෙන් අපි කොටස් දෙකකට අදාල ටැග් ජාති ඉගෙන ගත්තනේ ළමයිනේ. ඒ කීවෙ head ටැග් එකේ එන title ටැග් එක ගැනයි, body ටැග් අතුලෙ එන තනි ටැග් වර්ගයේ ටැග් ජාති තුනක්ම. මීලඟට අපි බලන්න යන්නේ අපි හදන වෙබ් පිටුවේ ඉඳන් තවත් වෙබ් පිටුවකට සම්බන්ධිතයක් හදන හැටි. ඒ කීවේ, අපි අපේ වෙබ් පිටුවේ කොහේ හරි තැනක click කරාම වෙන පිටුවකට යන්න හදන්නේ කොහොමද කියලා. මේ දේට සිංහලෙන් කියන්නේ "linking" කියලා. එක තැනක ඉඳලා තවත් තැනකට hyperlink එකක් හදන එක තමා මේ පාඩමෙන් කියලා දෙන්න යන්නේ.

මේ වැඩේ කොර ගන්න අපිට ඉන්න සහායකයා තමා "a" නොහොත් "anchor" ටැග් එක. මේක නම් ද්විත්ව ටැග් එකක්. ඒ කීවේ සුපුරුදු යුගල ටැග් ජාතියෙ. ලියන හැටි දන්නවා නෙව. මෙයාගෙත් විශේෂ ඇට්‍රිබියුට් කීපයක්ම තියෙනවා. ඒ ඇට්‍රිබියුට් උදව්වෙන් අපිට පුළුවනි වෙන පිටුවකට වගේම දැන් ඉන්න පිටුවේම තැනකට යොමු කරන්න, නැත්තම් බ්‍රවුසරය ඇතුලේදි ඒ තැනට ඉබේම ගෙනියවන්න. අර ඇට්‍රිබියුට් තමා "href","name" සහ "target" කියන ඒවා. href කියන ඇට්‍රිබියුට් එකේ අගයක් විදියට දෙන්න ඕනෙ අපි යා යුතු වෙබ් පිටුවේ වෙබ් ලිපිනයයි. ඒ කීවේ කොහේ හරි click කරොත් යන්න ඕනෙ වෙබ් පිටුවට තියෙන පාත් (path) එකයි. href="www.google.com" වගේ. href ඇට්‍රිබියුට් එක නැතුව නම් "a" ටැගෙන් කිසි වැඩක් නෑ.

ඕකෙන් විතරක් ගන්න පුළුවන් වැඩේ ඔච්චරයි. ඒත් name කියන ඇට්‍රිබියුට් එකත් පාවිච්චි කරාම තව වැඩක් කර ගන්න පුළුවන්. ඒ එකම වෙබ් පිටුවේ තැනකට යොමු කරවන එක. ඒක කරන්නේ මෙන්න මෙහෙම. අපේ වෙබ් පිටුවේ තියෙන කරුණු ප්‍රමාණය ගොඩක්ය කියලා හිතන්න. අපිට උඩ තැනක (පටුනක ) ඉඳන් පහල තැනක මාතෘකාවකට යන්න ඕනෙ. ඒ වෙලාවෙදි කරන්නේ පහල මාතෘකාවට අපි සලකුණක් දා ගන්නවා නමකුත් එක්ක. හරියට පොතක් කියවද්දි දාන පොත් සලකුණක් වගේ. ඔව්. මේ දේට HTML වලින් කියන්නේ "bookmark" යෙදීම කියලා. bookmark එකක් දා ගන්නේත් a ටැග් එකෙන්මයි. ඒ, <a name="mybookmark1">Harry Potter</a> විදියට. ඔය තමා අපි bookmark එක දාපු තැන. දැන් අපි පටුනේ ඉඳලා ඔතෙන්ට කෙලින්ම එනවා නම් පටුනේ අදාල link එක උද click කරාම ඔතෙන්ට එන්න ඕනෙ. ඒකට අපි ඒ පටුනේ තියෙන වචනයට link එකක් දෙනවා. ඒ, href වල අගයට අර bookmark එකේ නම දීලා. නිකන්ම දීලා බෑ. මුලින්ම "#" (hash) ලකුණක් දාල ඊට පස්සෙයි නම දාන්නේ. මෙන්න මේ විදියට, <a href="#mybookmark1">Go to Harry Potter</a>. ඔය link එක උඩ click කරාම අපි bookmark එක දාපු තැනට යොමු වේවි. කරලාම බලන්නකෝ. මෙන්න අපි ලීව එකේ උදාහරණය...

Go to Harry Potter
-----------------------
-----------------------
-----------------------
-----------------------
-----------------------
Harry Potter

මේ වගේ වෙනත් පිටුවක තියෙන bookmark එකකට වුණත් ඒ පිටුව බ්‍රවුසරයට ගන්න ගමන්ම ඒ පිටුවේ අදාල තැනට යොමු කරන්නත් පුළුවන්. ඒ මෙන්න මෙහෙම. සුපුරුදු විදියට අපි වෙන පිටුවක bookmark එක හදනවා. අපි දැන් ඉන්න පිටුවේ වෙබ් link එකේ href එකට අගය දිය යුතු වෙන්නේ මෙන්න මේ වගේ විදියකට. ඒ, href="mypage2.html#mybookmark2"


මීලඟට අපි target කියන ඇට්‍රිබියුට් එක ගැන බලමු. මේකෙන් කියන්නේ අපි කොහේටද අපේ පිටුව පෙන්නන්න ගන්න ඕනේ කියලා. අපිට පුළුවන් තව අළුත් ටැග් යුගලක් මෙතෙන්දි ඉගෙන ගන්න මේක අත් හදා බලන්න.

ඒ "<iframe></iframe>" කියන යුගලෙ. මේකේ අපිට මෙතෙන්දි පාවිච්චි කරන්න පුළුවන් වැදගත් ඇට්‍රිබියුට් නම්, "name, height, width" තමා. ඔයාලා දැනටමත් height, width ගැනත් ඒවාට අගය දෙන හැටිත් දන්නවා. name එකක් දෙන්නත් දන්නවා නෙ. මෙන්න මේ වගේ "iframe" එකක අපිට පුළුවන් තමන් ඉන්න පිටුවේ ඉඳන්ම කොහොමත් පිටින් වෙබ් පිටුවක් දිග ඇරලා පෙන්නන්න. ඔන්න ඔය හේතුව නිසා අපිට පුළුවන් a ටැග් එකෙන් දිග ඇරෙන පිටුවේ target හෙවත් ඉලක්කෙ කියන්න. ඉලක්කේ හෙවත් target එකට දිය යුත්තේ අපේ iframe එකේ අපි දාන නමයි. (name attribute). iframe එකක් හදන්නේ මෙන්න මෙහෙම.
<iframe width="400" height="150" name="myiframe" ></iframe>

මේ තියෙන්නේ ඒ iframe එක.


දැන් මේ link එක හදලා ඒක උඩ click කරාම link කරන පිටුව දිග ඇරෙන්නේ අපේ iframe එක ඇතුලේ නේද? කරලා බලන්නකෝ.

<a href="http://www.google.com" target="myiframe" >Load Google Search Engine </a>

Load Google Search Engine

3 comments:

Kaniskha Dilshan said...

බොහොම ලස්සනට පැහැදිලි ක‍රලා තිබෙනවා. වැඩේ නියමයි!

Madhawa Habarakada said...

මේකෙන් නම් මම නොදන්න දේවල් ටිකකුත් ඉගෙන ගත්ත. ස්තුතියි.

Manjula Peiris said...

නියමයි thanks

Post a Comment