පෙර ලිපියේ සඳහන් කල පරිදි වෙබ් පිටුවක් HTML Elements මගින් සෑදී අති අතර HTML tags මගින් එවා හදුනා ගැනේ.
Elements සහ tags යනු කුමක්ද?
මෙය සලකා බලන්න:
<p font size=23px> ‘HELLO GUYS’</p>මෙහිදී මෙම ‘<>’ වරහන් තුල ඇති සියලුම දේ අපට elements ලෙස සැලකිය හැක,තවද p කොටස tags ලෙසද සැලකිය හැක.
HTML වලදි අපට බොහො tags හමුවේ:
- <p>
- <table>
- <h1>
- <h2>
- <u>
- <i> etc…
තවද අපට elements වර්ග 2ක් ද දැකගැනීමට හැක:
- Container Elements: Tags which has both ON and OFF tags
Ex: <u>WELCOME</u>
- Empty Elements: Tags which has only the ON tag
EX: <hr>,<br>…
දැන් අප HTML attributes යනු කුමක්දැයි බලමු?
Start tag එක ඇතුලත element එක විස්තර කිරීමට ඇති අමතර කොටස attributes ලෙස හැදින්වේ.
EX: <body bgcolor=’red’>
ඉහත උදාහරණයේ ‘bgcolor’ යනු attribute එකකි එය body එකේ background color එක විස්තර කරයි.
දැන් අපි HTML වල භාවිතා වන නීති කිහිපයක් ගැන බලමු.
- HTML coding වලදී අපට ඉංග්‍රීසි හෝඩියේ simple හෝ capital අකුරු වර්ග 2ම භාවිතා කිරීමට හැකියාව ඇත.
- Attributes සඳහා භාවිතා වන values case sensitive විය හැක
- Tags අතර කොතරම් spaces තිබුනත් එහි කිසි ප්‍රශ්නයක් නැත.
- අපට එක් වර elements කිහිපයක් භාවිතා කිරීමට හැකියාව ඇත(bold, italic, underline එකම විට භාවිත කළ හැක.)
- Tags අතර spaces තිබිය නොහැක.(<H TML> වැරදී)
හරි දැන් අපි code කරන්න පටන්ගමු, code කිරීම සඳහා අපට ‘Notepad ‘, ‘Sublime Text ‘ ,වැනි Text editor එකක් අවශ්‍ය වනවා
ඔබ ‘Notepad ‘ භාවිතා කරනවානම් එය අරම්බකර ගන්න.
පලමුව ඔබ HTML වල ව්‍යුහය මතක තබාගන්න එය කොටස් 2කින් සමන්විතයි.
- Head
- Body
පෙර ලිපියෙදී ඒ පිලිබදව අපි කතා කරා ඔබට මතක අති.ඉතින් මේ ලිපියෙන් අපි HTML මූලික ව්‍යූහය පිලිබදව කතා කරමු.
<html>
<head>
<title>……..</title>
</head>
<body>
………………………………………………………………………..
………………………………………………………………………………….
</body>
</html>
- <HTML>:මෙම ‘element ‘ එකෙන් මෙම ‘code ‘ එක HTML code එකක් ලෙස හදුන්වා දෙයි. එය <HTML> ලෙස ආරම්බ කර </HTML> ලෙස අවසන් කෙරේ.
- <HEAD>:මෙම ‘ element ‘ එක හදුනාගැනීම සහ අතිරේක තොරතුරු ගබඩා කරනා ‘container element ‘ එකක් ලෙස හැදින්වේ.
- <TITLE>:මෙම ‘ element ‘ එක ඔබේ වෙබ් පිටුවේ Title එක යෙදීමට භාවිතා කරයි. මෙහිදී අප භාවිතා කරනා Title එක වෙබ් පිටුවේ tab එකෙහි පෙන්නුම් කරනු ලැබේ
- <BODY>:මෙම ‘ element ‘ එක අප වෙබ් පිටුවේ අන්ථර්ගතය ඇතුලත් කිරීමට යොදා ගැනේ.
හරි දැන් අපි code කිරීම පටන්ගෙන අපේ පලමු වෙනි වෙබ් පිටුව code කරගමු.
<html>
<head> <title>my first web page</title>
</head>
<body>
<p> Hello World!!!
</body>
</html>ඔබ ඉහත කේතය ඇතුලත් කිරීමෙන පසුව ඔබට කැමති නමක් දී එය save කිරීමට හැකී නමුත් එය save කිරීමේදී ‘.html’ යන දිගුව භාවිතා කිරීම අනිවාර්යවේ.
උදා: ‘First web.html’
ඉන් පසු ඔබ ගොස් එම save කල file එක තම web browser එක මගින් Open කරන්න. ඉන් පසු ඔබට පහත දැක්වෙන ලෙස Output එක දැක ගැනීමට හැකිවේ.
මෙහිදී ඔබට <p> යන ‘tag ‘ එකක් දැක ගැනීමට හැකියාව ඇත තවද එහි closing tag එකක් නැත ‘</p>’. මෙය අපි වෙබ් පිටුව තුලට paragraph එකක් ඇතුල් කිරීමට යොදා ගන්නා ටැග් එකයි මෙ පිලිබදව අපි ඊලඟ ලිපි වලදී කතා කරමු.
ඉතින් මේ වගෙ අලුත් ටැග් පිලිබදව ඉගෙනගන්නත් අලුත් HTML කේතයන් ඉගෙනගන්නත් අපිත් සමගම දිගටම රැදීසිටින්න.
තවත් අලුත් ලිපියකින් හමුවෙමු.
More Stories
HTML FORMS Part II|TechXlk HTML Tutorial 08
HTML FORMS Part I|TechXlk HTML Tutorial 07
HTML VIDEO සහ AUDIO TAGS|TechXlk HTML Tutorial 06