මම අද පාඩමෙන් කතා කරන්න බලාපොරොත්තු වෙන්නේ, අපි හැම වෙලාවෙම භාවිතා කරන tag එකක් ගැන‍යි. ඒ තමයි <head> Tag එක. මේ tag එක ඉතාමත් විශේෂ tag එකක් මොකද මේ Tag එක නැති වෙබ් පිටුවක් හොයා ගන්නවත් නැති තරම් නිසා. ඒ තරමටම මේ tag එක භාවිතා වෙනව.
මේ tag එක ඇත්තටම තනිව කාර්යයක් නොකලාට, මෙය තුල අඩංගු කල හැකි head elements භාවිතා කරල අපි කරගන්න දේවල් නම් ඉතා විශාලයි. දැන් මොනවද මේ head elements කියන්නේ? අපි දැනටමත් දන්නවනේ වෙබ් පිටු නිර්මාණය කිරීමේදී JavaScript, CSS වගේ තාක්ෂණ භාවිතා කරනව කියල, ඉතින් ඒ වගේ අපේ වෙබ් පිටුවට අවශ්‍ය වෙන වෙනත් files හොයාගන්න browser එකට ඒවා ගැන කියන්න මේවා භාවිතා වෙනව තව scripts ආදිය වගේ අපේ වෙබ් පිටුවට අදාල meta dataද ඇතුලත් කල හැකියි. ඒ වගේ තව බොහෝ දේවල් තියෙනව. දැන් අපි වැදගත් වෙන head elements කිහිපයක් ගැන කතා කරමු.
<title> head element
මේ head element එක අපි භාවිතා කරන්නේ අපේ වෙබ් පිටුවට title එකක් ලබා දෙන්නයි. ඒක කරන්නේ මෙන්න මේ විදිහටයි.
<html>
<head>
<title>THIS IS MY FIRST WEB PAGE</title>
</head>
<html/>
ඒක පේන්නේ මෙන්න මේ වගේ
ඔයාල කැමති විදිහකට ඔයාලගේ වෙබ් පිටු වලට titles එකතු කර ගන්න පුළුවන්. ඒ වගේම කව්රුහරි අපේ වෙබ් පිටුව bookmark කරන කොට එතන නම විදිහට එන්නෙත්, search engine වලදි පෙන්වන්නෙත් මේ Title එකම තමයි
<base> head element
මේ tag එකෙන් අපි කරන්නේ අපේ වෙබ් පිටුව තුලදී මින් ඉදිරියට භාවිතා කරන URL සඳහා අවශ්‍ය වන මූලික ටික ලබා දෙන එකයි. ඒ කියන්නේ URL එකේ පොදු කොටස ලබා දෙන එක, එතකොට හැම තිස්සෙම ඒ ටික ලියන්න ඕන නෑනේ. මේක ඉතා වැදගත් images වලට වගේ URL දෙන කොට. syntax එක පහතින්,
<html>
<head>
<base href="http://codingsihalen.blogspot.com/2013/01/" target="_blank"/>
</head>
</html>
<link> head element
මේ tag එක නම් ගොඩක් අය භාවිතා කරල ඇති. අපි මේක භාවිතා කරන්නේ අපේ වෙබ් පිටුව හා වෙනත් බාහිර document එකක් අතර සම්බන්ධයක් ඇති කරන්නයි. සරලම උදාහරණය තමයි අපේ වෙබ් පිටු වලට භාහිර stylesheet සම්බන්ද කර ගැනීම. ඒ ගැන වැඩි විස්තර අපේ CSS පාඩම් මාලාවෙන් ඔයාලට ඉගෙන ගන්න පුළුවන්.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
</html><style> head element
මේ Tag එක අපි යොදා ගන්නවා අපේ HTML elements වලට head එක තුලදී CSS styles ලියන්න. මේ tag එකත් හරිම ජනප්‍රිය එකක්.
<html>
<head>
<style type="text/css">
body
{
background-color:yellow
}
p
{
color:blue
}
</style>
</head>
</html>
<meta> head element
මේ tag එකෙන් අපි කරන්නේ අපේ වෙබ් පිටුවට අදාල දත්ත සඳහන් කරන එකයි. Search engine වලට මේ දත්ත වැදගත්. මේවා වෙබ් පිටුව බලන අයට පේන්නේ නෑ. අපිට පුළුවන් පේ වෙබ් පිටුවට අදාල keywords, description, author වගේ දේවල් සඳහන් කරන්න. අපි පොඩි උදාහරණයක් බලමු.
<html>
<head>
KEYWORDS සඳහන් කරන හැටි
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
වෙබ් පිටුවේ description එක සඳහන් කරන හැටි
<meta name="description" content="Free Web tutorials on HTML and CSS">
වෙබ් පිටුවේ කතෘ සඳහන් කරන හැටි
<meta name="author" content="Hege Refsnes">
වෙබි පිටුව ඉබේම refresh කරන හැටි.
<meta http-equiv="refresh" content="30">
</head>
</html>
<script> head element
මේක ඉතින් අපි භාවිතා කරන්නේ client side scripts ලියන්න තමයි, JavaScripts වගේ. අපි මේ tag එක ගැන වැඩි විස්තර පසු පාඩමකින් කතා කරමු. අයෙත් අපි තවත් පාඩමකින් හමුවෙන තුරු ගිහින් එන්නම්.......
thank you .....
ReplyDeleteall the best!