අද html පාඩමින් මං ඔයාලට කියල දෙන්නේ <hr />[horizontal line ] tag එක html එක තුල භාවිතා කරන ආකාරය ගැනයි.
<hr /> - {horizontal line] tag
html එකක තිරස් අතට රේඛාවක් (horizontal line)ඇතිකිරීම එහෙමත් නැත්තම් document එක line එකකින් වෙන් කිරීම සඳහා <hr />tag එකභාවිතා කරනු ලබනවා.මේකට horizontal rule එක කියලත් කියනවා. මේ tag එක empty element එකක් විදිහට තමයි හැදින් වෙන්නේ. හේතුව opening tag එක සහ අවසන් tag එක අතර කිසිවක් ලියවෙන්නේ නැති නිසා. මේ tag එක භාවිතා කරනකොට hr එක ලඟට space එකක් තියල forwad slash[/] එක type කරන්න මේ විදිහට "<hr />" මේ space එක තිබ්බෙ නැත්තම් පරන web browser වලට horizontal line එක පෙන් වීමේදී ගැටළු ඇතිවෙනවා ඒ වගේම මේ විදිහට "<hr>" forwad slash එක නැතිව type කරන්නත් එපා එහෙම උනොත් xhtml වලට valid වෙන්නේ නැහැ.
<!Doctype html>
<html>
<head>
<title>horizontal line </title>
</head>
<body>
<p>this paragraph is above the line</p>
<hr />
<p>this paragraph is below the line</P>
</body>
</html>
Output
this paragraph is abov the line
this paragraph is below the line
ඔයාලට පේනව ඇති ඉහත උදාහරනයේ
<hr /> tag එක තියෙන තැනින් line එකක් ඇඳිල තියෙනවා.
හරි දැන් අපි බලමු color,size,width attribute භාවිතාකර line එකේ color එක සහ size සහ width එක වෙනස් කරන ආකාර ගැන.
[color changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line color</title>
</head>
<body>
First Line
<hr color="blue"> Second Line
<hr color="red">
</body>
</html>
Output
this paragraph is below the line
ඔයාලට පේනව ඇති ඉහත උදාහරනයේ
<hr /> tag එක තියෙන තැනින් line එකක් ඇඳිල තියෙනවා.
හරි දැන් අපි බලමු color,size,width attribute භාවිතාකර line එකේ color එක සහ size සහ width එක වෙනස් කරන ආකාර ගැන.
[color changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line color</title>
</head>
<body>
First Line
<hr color="blue"> Second Line
<hr color="red">
</body>
</html>
Output
දැන් අපි බලමු line එකේ size එක වෙනස් කරන ආකාරය ගැන
[Size changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line size</title>
</head>
<body>
First Line
<hr size="12px" color="blue"> Second Line
<hr size="28px" color="brown">
</body>
</html>
Output
ඒවගේම අපිට පුළුවන් width attribute එක භාවිතා කර line එකේ width එක වෙනස් කරන්න.
[Width changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line width</title>
</head>
<body>
First Line
<hr width="40%" size="10px" color="red"> Second Line
<hr width="75%" color="blue"> Third Line
<hr color="green">
</body>
</html>
Output
ඔන්න එහෙනම් අදත් html ගැන වටින පාඩමක් මන් ඔයාලට කියලදුන්නා.තවත් වටිනා ලිපියකින් නැවතත් හමුවෙන තුරු අදට සමුගන්නවා. මේකෙන් යමක් ඉගෙන ගත්තනම් comment එකක් දාල යන්න අමතක කරන්න එපා.
ගිහින් එන්නම්.....
Go to >> Html පාඩම 2
Go to >> html පාඩම 1
[Size changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line size</title>
</head>
<body>
First Line
<hr size="12px" color="blue"> Second Line
<hr size="28px" color="brown">
</body>
</html>
Output
ඒවගේම අපිට පුළුවන් width attribute එක භාවිතා කර line එකේ width එක වෙනස් කරන්න.
[Width changing]
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line width</title>
</head>
<body>
First Line
<hr width="40%" size="10px" color="red"> Second Line
<hr width="75%" color="blue"> Third Line
<hr color="green">
</body>
</html>
Output
ඔන්න එහෙනම් අදත් html ගැන වටින පාඩමක් මන් ඔයාලට කියලදුන්නා.තවත් වටිනා ලිපියකින් නැවතත් හමුවෙන තුරු අදට සමුගන්නවා. මේකෙන් යමක් ඉගෙන ගත්තනම් comment එකක් දාල යන්න අමතක කරන්න එපා.
ගිහින් එන්නම්.....
Go to >> html පාඩම 1
Posts
No comments
Post a Comment