සුභ දවසක් හැමෝටම.

හරි අද මම කියලා දෙන්න යන්නේ HTML භාෂාවේ තියෙන වැදගත්ම Tags මොනවද කියලා. මම මීට කලින් ලිපියක් දැම්මා HTML හැදිවීම ගැන. ඒ ලිපිය බලන්න පුළුවන් ඔයාලට මෙතනින් – ‌HTML හැදින්වීම හා ඉතිහාසය #පාඩම් මාලාව 01

හරි අපි ඉහත HTML පාඩමෙන් සදහන් කලා HTML Tags ගැන කියලා දෙන්නම් කියලා. අද අපි බලමු මේ tags කියන්නේ මොනවද,ඒවා භාවිතා වන අවස්ථා මොනවද කියලා,

අද අපි කතාකරන්න යන්නේ Basic HTML Tag ටික.

  • <html>
  • <head>
  • <title>
  • <body>
  • <h1> to <h6>
  • <p>
  • <br>
  • <hr>

<html>

මේ <html> ටැග් එකෙන් තමයි අපි කෝඩ් කරන්න පටන් ගන්නේ. එහෙම නැත්නම් මේ <html> ටැග් එකෙන් තමා මේක HTML document එකක් කියලා වෙබ් බ්‍රවුසරය හදුන ගන්නේ. අපි මොන කෝඩ් ලිව්වත් මේ tag එක HTML Content එකේ ඉහලින්ම සදහන් කල යුතුයි. ඒ වගේම වෙබ් පිටුව අවසානයේදී </html> ලෙස සදහන් කර වෙබ් පිටුව අවසන් කළ යුතුයි. පහත උදාහරණය බලන්න.

මෙහි අන්තර්ගතය ආරම්භ වන්නේ <html> ලෙස සටහන් කිරීමෙනි. එමෙන්ම අවසන් වන්නේ </html> ලෙස සටහන් කිරීමෙනි.HTML Document එකක් ආරම්භය හා අවසානය සනිටුහන් කරනුයේ මෙම tag එක මගිනි.

 

<head>

<head> tag යොදනුයේ <html> tag එකෙන් පසුවය. head යනු වෙබ් පිටුවෙහි හිස කිවහොත් නිවැරදි. පහත උදාහරණය බලන්න.

 

<head> මගින් ආරම්භ වන අතර </head> මගින් අවසන් කරනු ලබයි. වෙබ් පිටුවකට යෙදීමට අවශ්‍යය css,java scripts,meta වැනි දෑ මෙම <head> හා </head> අතරමැද යොදනු ලබයි. එම කොටස තුල සදහන් ක‍රන දෑ මුලු වෙබ් පිටුවටම අයිතියක් ඇති බව හගවයි,

<title>

මෙම tag යොදනු ලබන්නේ <head> and </head> tag අතර මැදය. මෙම tag මගින් හගවනු ලබන්නේ වෙබ් පිටුවේ නමයි. එසේත් නැතිනම් එම වෙබ් පිටුවෙහි Title එකයි. <title> මගින් ආරම්භ කර </title> මගින් අවසන් කරනු ලබයි. පැහැදිලි වෙන්න මම උදාහරණයක් පහත දෙන්නම්.

ඔයාලා දන්නවා Music.lk කියන්නෙත් වෙබ් අඩවියක් කියලා.  මම ගූගල් සර්ච් කලා music.lk කියලා. එතකොට මට මේ ප්‍රථිඵල දකින්නට ලැබුනා.මම රතු පාට ඊතලයකින් දක්වලා තියෙන්නේ ඒ වෙබ් පිටුවට අදාල වූ නාමය. මම ඉහත සදහන් කල වෙබ් පිටුවේ Title එක. Music.lk හි HTML Title Tag එක මෙසේ යොදා ඇත.

<html>

<head>
<title>Music.lk | Official Web Portal</title>
</head>

</html>

එය වෙබ් වෙබ් බ්‍රවුසරයෙහි මෙසේ පෙන්නුම් කරයි.

 

<body>

</head> tag එක අවසාන වී <body> tag එක පටන් ගන්නවා. වෙබ් අඩවියේ සියළුම Content එක (text,images,media) නිර්මාණය කරනුයේ මෙම tag එක තුළය. <body> වලින් ආරම්භ කර වලින් </body> වලින් අවසන් කරයි.

 

<h1> to <h6>

මේවා තමා Heading Tags, <body> and </body> tags  තුළ තමයි Heading Tags යොදාගන්නේ. එක එක Sizes  වල Heading දක්වන්න මෙම <h> tag එක යොදාගන්නවා. Heading එකක් පටන් ගන්නේ <h> වලින් හා එම Heading එක අවසන් කරන්නේ </h> වලිනි. පහල උදාහරණය බලන්න. පහසුවෙන්ම අවබෝධ වේවි.

ඔයාලා දකිනවා මම මෙතනදී  slgeek.lk heading කියන එක heading 6ක් යටතේ වෙන වෙනම සදහන් කරන් code එක ලියනවා. බලන්න අපිට කොයි වගේ OutPut එකක් ලැබෙයිද කියලා,

මෙතනදී ඔයාලට දැකගන්න පුළුවන් hහි අගය වැඩිවෙන්න වැඩි වෙන්න තමයි මේ Heading එකේ size එක කුඩා වෙන්නේ කියලා.

 

<p>

<body> tag එක තුළ භාවිතා කරයි. යම් කිසි චේදයක් නිර්මාණය කිරීමට යොදා ගනී. Paragraph එක පටන් ගැනීමට පෙර <p> සදහන් කර අවසාන කිරීමට </p> යොදනු ලබයි. පහත උදාහරණය බලන්න.

OUT PUT:-

දැන් ඔයාලා අවබෝධයක් ගන්න ඇති <p> tags භාවිතා කරන්නේ Paragraph නිර්මාණය කිරීම සදහා කියලා.

 

<br>

මෙම tag එක යොදනු ලබන්නේ <body> tag එක තුලයි. Line Break කිරීම සදහා යොදා ගනු ලබයි. පහත උදාහරණය බලන්න.

බලන්න ඉහත උදාහරනය, To break lines in a text, use br element. එක අතරමැද යෙදූ <br> tags  මගින්  එම ස්ථානයෙන් line එක break කර ඊලග පෙලට හරවා ඇත. හොදින් බලන්න, මෙම අන්දමින් <br> tag එක යොදා අපට line break කරගත හැක.

 

<hr>

මෙම tag එකද යොදාගනු ලබන්නේ <body> තුලයි. content දෙකක් horizontal line  එකක් මගින් break කිරීමට යොදාගනු ලබයි. පහත උදාහරණය මගින් ඔබට තවත් පැහැදිලි වේවි,

OUT PUT:- 

 

මේ වගේ tags භාවිතා කරලා තමයි මේ web page එකක් සකස් කරන්නේ. අපිට වෙබ් පිටුවක දකින්නට ලැබෙන එක එක type,style වල අකුරු, , ජේද, හයිලයිට් කරපු අකුරු,,පාට කරපු අකුරු ,මේ වගේ විවිධ විවිධ නොයෙකුත් Contents දකින්නට පුළුවන්, ඒ සියල්ල නිර්මාණය වනුයේ මෙම tags තුළයි. අපි මේ කථා කලේ Basic html tags ටික විතරයි. මීට අමතරව,

  • Formatting
  • Forms  and Input
  • Frames
  • Images
  • Audio – Video
  • Links
  • Lists
  • Tables
  • Styles and Semantics
  • Meta Info
  • Programming

වැනි දෑ සදහා අති විශාල tags ප්‍රමාණයක් භාවිතයේ ඇත. අපි ඉදිරි පාඩම් වලදී ඒ tags භාවිතා කිරීමට සිදු වෙනවා. ඉදිරි පාඩම් තුළින් ඔබට එම tags යොදා ගන්නා ආකාරය ඇතුළු බොහෝ දෙ දැනගත හැකිය. අපේ වෙබ් අඩවියත් සමග රැදී සිටින්න. සුභ දවසක්!

අදහස් දක්වන්න

අදහස්

  • පට්ට ලිපියක්
  • සතුටු දායකයි
  • අපරාදේ
  • වැඩක් නෑ
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,