ICT දැනුම: HTML - 01 පාඩම.

ඔන්න මම පටන් ගන්නෙ HTML වලින්. ඔයා මේ language එක ගැන හොදටම දන්න කෙනෙක් ( පොඩි පොඩි තැන් අපහසු.) ,ටිකක් දන්න කෙනෙක්, මුකුත්ම නොදන්න කෙනෙක් වෙන්න පුළුවන්. ඒත් මම දැන් කියලා දෙන්න යන්නෙ මේ හැමෝම 'නොදන්න අය' කියන තැන ඉදලා.. ඉතින් ඔන්න එහෙනම් අපි පටන් ගමු HTML ඉගෙන ගන්න..

ආ.. තවත් එකක්. ඔයා දැන් නවල් එකක් කියවනවා වගේ මේක කියවන්න නම් ලෑස්ති වෙන්න එපා.. ඒක සාර්ථක නැහැ. ඔයා මම කියලා දෙන ඒවා කම්පියුටර් එකේ නොට් පෑඩ් එකේ ටයිප් කරලා ඒක ( නමක්).html කියලා හරි (නමක්).htm කියලා හරි save කර ගෙන browser එකෙන් ඕපන් කරලා බලන්න හොදේ..

හරි අපි පටන් ගමු.
HTML කියන එකේ තේරුම දන්නවද ඔයා..?

HTML - Hyper Text Markup Language.

මේ HTML භාෂාව HTML Tag වල එකතුවකින් හැදිලා තියෙන නිසා මේක පරිඝනක භාෂාවක් කියලම නෙමෙයි 'Markup Language' එකක් විදිහට හදුන්වනවා.. මේ ටැග් කියන ඒවා වෙබ් පිටුව පවතින ආකාරය විස්තර කරනවා..

•HTML Tag

HTML Tag කියලා කියන්නෙ ඈන්ගල් බ්‍රැකට්ස් වලින් ආවරණය වුන විශේෂ වචන.. මේ බලන්න.. <html> ,<body>

ඒත් එක්කම කියන්න ඕනෙ මේ html tag වල case sensitive නැහැ.. ඒ කියන්නේ... කැපිටල් සිම්පල් භේදයක් නැහැ.. ඔයා ට මෙහෙම ඕන විදිහකට කෝඩින් කරන්න පුළුවන්.. <Body> <body> <BODY> .

මේ html ටැග් බොහෝමයක් ආරම්භ සහ අවසන් කියලා යුගල විදිහට තියෙනවා.. මේ බලන්නකො...
<html> </html>
<body> </body>

ඒ ඇයි කියලා මම කියන්නම්.

<body> - පිටුවේ body කොටසේ ආරම්භය.
</body> - පිටුවේ body කොටසෙහි අවසානය.

ඒ කියන්නෙ වෙබ් පිටුවෙ බොඩි කොටස තියෙන්නෙ මේ දෙක අතර මැද. තවත් ඉස්සරහට යනකොට ඔයා දකීවි.

තවත් ටැග් ජාතියක් තියෙනවා එහෙම ආරම්භ අවසාන කියලා දෙකක් නැහැ. තියෙන්නෙ එකම ටැග් එකයි.
මෙන්න උදාහරණ : <br> <hr>

මම පටන් ගන්නකොටම ඔයාලට කිව්වනෙ මම කියලා දෙන ඒවා note pad එකේ type කරලා browser එකෙන් බලන්න කියලා.. දන්නවද තවත් ඒ වගේ ක්‍රම දෙකක් තියෙනවා වෙබ් පේජ් එකක් හදන්න. මම ක්‍රම තුනම පැහැදිලි කරන්නම්කො..

i. Note pad භාවිතයෙන් සැකසීම.

මේකෙදි html tag පිළිබද පුලුල් දැනුමක් ඕනේ. ඒක ක්‍රියාත්මක කරන විදිහ මම පැහැදිලි කරානෙ මුලින්.

ii. Dream weaver , Frount page වගේ මෘදුකාංග භාවිතයෙන් සැකසීම.

මේවයෙදි නම් ටැග් ලියන්න ඕනෙ නැහැ.. අපිට තියෙන්නෙ අකුරු, පිංතූර, වගු ඇතුල් කරලා වෙබ් පේජ් එක හදන්නයි.

iii. විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතයෙන් සැකසීම.

Joomla,Drupal, Wordpress කියන විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතා කරලා පුලුවන්.

• html වල මූලික ටැග්

1. <html> </html>
2. <head> </head>
3. <title> </title>
4. <body> </body >

වෙබ් පිටුවෙ අන්තර්ගතය ටැග් වලින් විස්තර කරනවා.. එම ටැග් එක ක්‍රියාත්මක වන ආකාරය උප ලක්ෂණ (attribute ) වලින් විස්තර කරනවා. උප ලක්ෂනයකින් විස්තර කරන දේ උධෘත ඇතුලෙ තමයි දාන්නෙ.. අහ් තේරුනේ නැද්ද.. හි හී. ඒ කිව්වේ.... double quotation ඇතුලෙ..

මං කියලා දෙන්නම්. බලන්නකො මේ උදාහරණය..

hr කියන්නෙ ටැග් එක. (ඉරක් අදින්න භාවිත කරන ටැග් එක. මම ඉස්සරහට වෙනම ඔයාලට කියලා දෙනවා ඒ ගැන.)
size , align කියන්නෙ attributes . ඒ අදින ඉර ගැන විස්තර කරනවා.. ඒකෙ සයිස් එක. ඒක වමෙන් පෙන්නන්න ඕනෙ කියන එක. දැන් ඒ ගැන පොඩි අදහසක් ඔයාලට එන්න ඇති.

හරි අපි දැන් බලමු මේ ටැග් වලින් කරන්න පුලුවන් දේවල්.

1. <html>

අපි කෝඩින් කරන්න පටන් ගන්නෙ මේකෙන්. අපේ මුලු කෝඩින් එකම තියෙන්නෙ <html> </html > මේ ටැග් දෙක අතරයි.

මේක චුට්ටක් බලන්නකො.

පේනවද.. මම මේ කරලා තියෙන්නෙ අපි හදන වෙබ් පේජ් එකේ title එක විදිහට This is my blog කියන එක දීලා තියෙනවා.. ඔයා බැලුවද මේක බ්‍රවුස එකෙන් ඕපන් කරලා.. Title bar එකේ පෙන්වනවා ඇති This is my blog කියලා. හරි නේද.. මේ title එක අනිවාර්‍යෙන් තියෙන්න ඕනෙ head ටැග් තුල තමයි හොදේ..

හරි බලන්නකො මේකත්..

අලුතෙන් එකතු වුන දේ දැක්කද. බොඩි ටැග් එක. උපලක්ෂනයක් දීලා තියෙනවා bgcolor කියලා.. මම කලිනුත් කිව්වා ටැග් එක විස්තර කිරීමක් මේ උපලක්ෂනයෙන් දෙන්නෙ කියලා. මේකෙන් කියවුනේ බොඩි වර්ණය රතු කියන එක. ඔයා කරලා බැලුවද.. මුලු පේජ් එකම රතු පාට වෙලා ඇති. වර්ණය දාපු විදිහ ගැන කලබල වෙන්න එපා.. මම ඉදිරියෙදි කියන්නම්. ඔයා මේ ටැග් සහ උපලක්ෂන ගැන විතරක් තේරුම් ගන්නකො දැනට.

•HTML Heading

බලන්නකො මේක හොදට.. ඊට පස්සෙ මම කියලා දෙන්නම්..

<h1 align = "left" > Heading 1 </h1>
<h2 align = "center" > Heading 2 </h2>
<h3 align = "right" > Heading 3 </h3>
<h4> Heading 4</h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

</body>
</html>

බ්‍රව්සර් එකෙන් ඔපන් කරලා බැලුවම ඔයාට පැහැදිලි වෙයි..
මේ h1, h2.. කියලා ටැග් හයක් තියෙනවා.. ඒවා තමයි මේ හෙඩින් වල සයිසස්. ලොකුම සයිස් එක h1 ත් අනිත් ඒවා ටික ටික පොඩි වෙන සයිස් කියලත් ඔයාට පෙනෙයි. බලන්න align කියන උපලක්ෂනයෙන් ඒවා තියෙන්න ඔනේ තැන කියලා තියෙනවා.. වම, දකුණ, මැද..

•Html comments

Html කමෙන්ට්ස් ( විවරණ) කියන්නෙ මොනවද කියලා අපි බලමු.

මේවා වෙබ් පේජ් එකේ පෙන්නන්නෙ නැහැ.. කෝඩින් කරන කෙනාට විතරයි පේන්නෙ.. මේ කෝඩින් ගැන මොකක් හරි විශේෂිත හැදින්වීමක්, මැසේජ් එකක්... මේකෙ කෝඩින් බලන වෙන කෙනෙකුට දෙන්න ඕනෙ උනා ම හරි නැත්නම් තමන්ටම තවත් ගොඩක් කාලෙකට පස්සෙ අයෙත් කෝඩින් බලදිදි තේරුම් ගන්න බැරි වෙයි කියලා හිතෙන දෙයක් කියන්න අපට පාවිච්චි කරන්න පුලුවන මේ කමෙන්ට්ස්.. මේක දාන්නෙ කොහොමද කියලා මම පෙන්වන්නම්. ඔයා කරලා බලන්න. එතකොට තේරෙවි..

බලන්න.. ICT දැනුම කියන එක කෝඩින් වල විතරමයි පෙන්නන්නෙ.. පේජ් එකේ පෙන්නන්නෙ What is my blog's name? කියන එක විතරයි. කමෙන්ට් එක දාන්න භාවිත කරපු symbols ඈත් කරලා පෙන්නන්නම්. < ! _ _ උදාහරණය _ _ >
මේ කමෙන්ට්ස් කොල පාටින් පෙනේවි ඔයාට.

• HTML Paragraph

Html ඡේද ගැන බලමු අපි.. මම කමෙන්ට්ස් ගැන දීපු කෝඩින් උදාහරනයේ ඔයා දැක්කද <p> කියලා ටැග් එකක්. අන්න ඒක තමයි ඡේද සදහා භාවිතා කරන්නෙ අපි.
දැන් ඔයාගෙ පොඩි අවබෝධයක් හැදිලා තියෙනවා කෝඩින් ගැන. මම මේ උදාහරනයෙන් පස්සෙ ඊළග එකට යන්නම්. ඔයා මේකත් තේරුම් අරන් කරලා බලන්න..

<html> <body>
<P> mmmmmmmmmmmmmmmmmmmmmmmmmmm</P>

<P> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</P>

<P> nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn </P>

<P>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </P>

</body> </html>

*මෙන්න පේජ් එකේදි ඔයාට පේන විදිහ..

mmmmmmmmmmmmmmmmmmmmmmmm
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ඡේද හතරක්.
ඇරපු ටැග් එක වහන්න මතක තියා ගන්න.. මුලින්ම ඇරියෙ html. ඊලගට body. ඊලගට p.
වහනකොටත් p වැහුවා. ඊලගට body. අන්තිමට html.

•HTML Break

ඔයා නෝට් පෑඩ් එකේ ටයිප් කරනකොට enter බට්න් එකෙන් මොකද්ද කරන්නෙ?? ඊලග පේලියට යන එක නේද..
ඒත් මේ html කෝඩින් කරනකොටත් ඔයා එහෙම එන්ටර් කරලා ඊලග පේලියට ගියා කියලා පේජ් එකේ එහෙම වැටෙන්නෙ නැහැ.. ඒකටත් ටැග් එකක් තියෙනවා.. ඒ තමයි <br> ටැග් එක.. මතකද මම මුල්ම පාඩමේදි උදාහරණයකට ඔයාට දුන්නා මේක තනි ටැග් එකක් කියලා..
මම පෙන්නන්නම් මේක යෙදෙන හැටි

<html> <body>
<p> My name is <br> Muditha <br> Prabhani. </p>
</body> </html>

දැන් බලන්න පේජ් එකේදි මේක පෙන්වන විදිහ..

My name is
Muditha
Prabhani.

බලන්න.. br ටැග් එක දාපු තැනින් break වෙලා ඊලග පේලියට ඇවිත්.

•Horizontal line

තිරස් රේඛා ඇදීම.. ඒකට භාවිතා වෙන්නෙ <hr> ටැග් එක.. ඒකත් තනි ටැග් එකක් කියලා මම කිව්වා ඔයාට මතක ඇති.
බලන්න මේ උදාහරණය...

<html> <body>
<p> I'll explain you about horizontal rule </p> <hr>
</body> </html>

පැරග්‍රාෆ් ටැග් ඇතුලෙ මම දීපු සෙන්ටෙන්ස් එක් යටින් තිරස් ඉරක් ඔයාට පේජ් එකේ පෙනේවි..

උපලක්ෂන තේරුම් කරන්න මම උදාහරණ වලට ගත්තෙත් hr ටැග් එක බව මතකද ඔයාට... මේ hr ටැග් එකට තියෙන උපලක්ශන පහක් මම කියලා දෙන්නම් ඔයාට..

i. Size

තිරස් රේඛාවෙ ඝනකම තීරණය කරන එක..

ii. Width

තිරස් රේඛාවෙ දිග තීරණය.. මේක pixel අගයකින් කියන්නත් පුලුවන්.. ප්‍රතිශතයක් විදිහට කියන්නත් පුලුවන්..

*pixel අගයකින්
<hr width = "550" >

*ප්‍රතිශතයක් ලෙස
<hr width = "60%" >

iii. Alignment

රේඛාව පිහිටන ස්ථානය තිරණය කිරීම..
<hr align = "left">
<hr align = "center">
<hr align = "right">

iv. Noshade

ඒ රේඛාව ඇතුලට සෙවනැල්ලක් (අළු පැහැ වර්ණයක්) එක් කිරීම
<hr size = 50 noshade>

v. Color

රේඛාවේ වර්ණය සකස් කිරීම

*උදාහරණ නිසා මම වෙන වෙනම දැම්මට මේ ඔක්කොම එකම ටැග් එකේ උපලක්ශන විදිහට එකට දාන්න පුළුවන් හොදේ..

හරි.. ඔන්න මම වර්ණ ගැන කියන්නම් ඊලඟ පාඩමේදි.. මේ කියලා දීපු ටික හොදට ප්‍රැක්ටිස් කරලා එන්නකො..

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

ICT දැනුම

Monday, October 3, 2016

HTML - 01 පාඩම.

6 comments: