Monday, October 3, 2016

HTML - 02 පාඩම.


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

• Html color attribute

වර්ණයක් යෙදීමේ උපලක්ශනය තමයි මේ color කියන්නේ..

RGB වර්ණ සංකලනය තමයි අපි යොදා ගන්නෙ... ඔයා දකින්න ඇති වර්ණ වලට ඉස්සෙල්ලා පාඩම් වලදි මම ලියපු කෝඩ්..

# ff0000
characters හයක් තියෙනවා.. RGB වර්ණ  සංකලනය කියලා මම කිව්වනෙ.. Red Green Blue. පිලිවෙලින් මේ එක වර්ණයකට characters දෙකක් වෙන් වෙනවා..
O----> No color
F----> Full color

දැන් ඔයාට කියන්න පුලුවන්ද මම ඉහතින් දීලා තියෙන වර්ණය මොකද්ද කියලා.. රතු වලට අයත් characters දෙක ff . ඒ කියන්නෙ full color. අනිත් හතරම 0.  no color. ඒ කියන්නෙ මිශ්‍ර නොවුන පිරිසිදු රතු වර්ණය.. දැන් ඔයාට පුලුවන්ද කොල සහ නිල් වර්ණ ලියන්න.. ඒ characters හයට ඉස්සරහින් # දාන්නත් ඕනෙ.

කොල --> 00ff00
නිල් --> 0000ff

ඔයා o/l IT කරපු කෙනෙක් නම් මතක ඇති text book එකේ තිබුනා පිටු දෙකක්ම මේ වර්ණ කෝඩ් දීලා.. හෙක්සාඩෙසිමල් අගයන් (0-9 and A-F ) දාලා ඔයාට කැමති විදිහට වර්ණ හදා ගන්න පුලුවන්නෙ දැන්.
ඒ වගේම තව දෙයක්. ඔයාට මේකෙදි ඕන නම් වර්ණයේ නමත් පාවිච්චි කරන්න පුලුවන්..

<font color = "red">

පිටුවෙ සියලුම අකුරු වලට වර්ණයක් යොදන්නෙ මෙහෙමයි..

<html>
<body text = "#00ff00">
</body>
</hlml>

ඔයා මේ දේවල් වලට අලුත් ම කෙනෙක් නම් පුරුදු වෙන්නත් එක්ක colours කරලා බලන්න.. බොඩි ටැග් එකට colours දානවා නම් bgcolor කියලා තමයි දාන්නෙ හොදේ.. එතකොට ඔයා දීපු ඒ colour එක background colour එක විදිහට පෙනේවි..

ඒත් එක්කම තව දෙයක්.. වෙබ් පේජ් එකක් අපි පරිහරණය කරද්දි ඒකෙ background colour එක තද වර්ණයක් වුනොත් අපේ ඇස් වලට ගොඩක් අමාරුයි නේද.. ඒ නිසා background colour තෝර ගනිද්දි ලා වර්ණයන් තෝර ගන්න..

• fonts

ඔන්න තවත් වැදගත් කොටසකට අපි ආවා.. ඔයාට මතකද ඔයා microsoft word එකේ වැඩ කරද්දි bold , underline , Italic පාවිච්චි කලා.. අපි දැන් බලමු ඒ අකුරු හැඩ කිරීම් කෝඩ් වලින් කොහොමද කරන්නෙ කියලා..

මම කෙටියෙන් ඒ ටැග් ටික දෙන්නම්.. ඔයා කරලා බලන්න..

*bold - <b> </b>
*big - <big> </big>
*small - <small> </small>
*underline - <u> </u>
*code - <code> </code> ( මේකෙදි හැම අකුරකටම එකම ඉඩක් වෙන් කරනවා. )

ඊලගට අපි බලමු subscript, superscript. ඒකත් word එකෙදි කලා මතකයි නේද..

*subscript

<p> H <sub> 2 </sub> O </p>

*superscript

<p> 1 <sup> st </sup> </p>

• font size

අකුරු වල ප්‍රමාණය ලබා ගන්නා ආකාරය බලමු අපි ඊලගට.. font කියන ටැග් එකේ size කියන attribute එකේ අපිට අවශ්‍ය සයිස් එක සටහන් කරන්න පුලුවන්..

Small size - 1, 2
Normal size - 3
Large size - 4, 5, 6, 7

බලන්න උදාහරණයකුත්...

<P>
<font size = "4" > My blog </font>
</p>

• List in HTML

ඊලගට අපි යන්නෙ ඡේද වලට විශේෂ සලකුණු යොදන හැටි සහ ලැයිස්තුගත කරලා ලියන්න කෝඩින් කරන හැටි දැන ගන්න..

ලිස්ට් වර්ග දෙකක් තියෙනවා.. ordered list සහ unordered list . ඔයාට මතක තියා ගන්න ලේසි වෙන්න මම මෙහෙම කියන්නම්කො.. Ordered කියන එකේ පිලිවෙලක් තියෙනවා ලැයිස්තුගත කරන්න..

මේ බලන්න..
1, 2, 3......
i, ii, iii.....
A, B, C.....
a, b, c.....

unordered list වලදි තියෙන්නෙ

Disk •
Circle °
Square

ඒ දෙකට උදාහරණ කියලා දෙන්න කලින් මට ඔයාට වාක්‍ය ඛණ්ඩයක් අර්ථ දක්වන හැටි කියලා දෙන්න ඕනේ.. ඒ කියන්නෙ definition lists.

බලන්න මේ දිහා....

My tom
       A fun game

My tom කියන එක අර්ථ දක්වලා තියෙනවා fun game එකක් කියලා..

බලමු දැන් ඒක කෝඩින් කරන්න..

පරිස්සමෙන් තේරුම් අරන් කියවන්න.. පටලව ගන්න එපා.. තේරෙන්නැතුව ඉස්සරහට යන්නත් එපා...

Definition lists කියන එකට <dl> ටැග් එක භාවිතා කරනවා.. <dl> </dl>

My tom  කිව්ව එකනෙ topic එක.. ඒකනෙ අපි විස්තර කලේ.. ඒ නිසා ඒක definition topic එක.. ඒකෙ ටැග්ස් තමයි <dt> </dt>

ඊලගට a fun game කිව්වෙ අර topic එක  විස්තර කිරීම. දත්තය. ඒක තමයි definition data. ඒකෙ ටැග්ස් තමයි <dd> </dd>

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

Sigiriya
       Ancient city.
Srilanka
        small country.

දැන් අපි මේ විදිහට ලියවෙන්න හදපු කෝඩ් බලමු. ටැග් දිහා හොදට බලන්න. ඔයා මෙතනදි definition topic එක  මොකද්ද..  definition   data එක මොකද්ද කියලා තේරුම් අරන් සිටීම ගොඩක් වැදගත්.. කෝඩින් එක බලද්දි නොතේරුනොත් ආයෙත් උඩට ගිහින් බලලා එන්න..

අපි මේ ලියන්න යන්නෙ definition list එකක්. ඒ නිසා මොන ටැග් දෙක ඇතුලෙද මේවා ලියවෙන්න ඕනේ?? ම්ම්... ඔව් <dl> </dl> අතරෙ.

<dl>

<dt> Sigiriya </dt>
<dd> Ancient city. </dd>

<dt> Srilanka </dt>
<dd> small country. </dd>

</dl>

හරි නේද.. කරලා බලන්නකො... තේරුම් යාවි.

දැන් අපි ordered list පැත්තට හැරෙමු. Ordered list වල ටැග්ස් තමයි <ol> </ol>

අපි බලමු කෝඩ් එකක්.

<ol>

<li> srilanka </li>
<li> india </li>

</ol>

<li> </li> මේ ටැග් දෙක අතරෙ තමයි ලිස්ට් එකේ දේවල් ලියන්න.. පිලිවෙලක් ඇතුව ලියවෙන ඒවා කියලා මම කිව්වා නේද.. සදහනක් කලත් නොකලත් එකේ ඉදලා තමයි ලිස්ට් එක වැටෙන්නෙ.. බලන්නකො..

1. srilanka
2. india

ඒත් ඔයාට ලිස්ට් එක දාන්න ඕනෙ හයේ ඉදලා කියලා හිතන්න.  අන්න එතකොට නම් ඇට්‍රිබියුට් එකක සහය පතන්න වෙනවා.. srart කියන එකෙන් තමයි අපිට ඕනෙ කීයෙ ඉදලද කියලා සටහන් කරන්න ඕනෙ..

මේ බලන්න...

<ol type = 1 start = 6 >

<li> srilanka </li>
<li> india </li>

</ol>

එතකොට මෙන්න මේ විදිහයි..

6. srilanka
7. india

ඔයාට ප්‍රශ්නයක් ආව නේද ඇයි මම type කියලා ත් එකක් දාලා තියෙන්නෙ කියලා.. ඒ තමයි ලිස්ට් එක යන්නෙ මොන වර්ගෙන්ද කියලා.. 1,2,3.. ඒ විදිහට යන්න ඕන නම් 1 දාන්න.. a,b,c.. විදිහට නම් a.  A,B,C... ඕනෙ නම් A දැම්මම හරි. පටන් ගන්න ඕනෙ තැන කොතන  ඉදලද.. කීයේ ඉදලද කියලා start එකෙන් දෙන්න..

හරි එහෙනම් අපි බලමු unordered list.
ටැග්ස් තමයි <ul> </ul>

මේ ලිස්ට් එක දිහා බලන්න.. සිංහලෙන්ම ලිස්ට් එකක් ගමු අපි බලන්න..

මගේ විෂයන් වන්නේ..
• තොරතුරු තාක්ෂණය.
• ජීව විද්‍යාව.
• භෞතික විද්‍යාව.

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

බලන්න කෝඩින එක.

<html> <body>

<h3> මගේ විෂයන් වන්නේ.. </h3>
<ul type =disk >
<li> තොරතුරු තාක්ෂණය. </li>
<li> ජීව විද්‍යාව. </li>
<li>භෞතික විද්‍යාව. </li>
</ul>

</body> </html>

හරි නේද.. කරලා බලන්නකො..
ඔයා මේ ලිස්ට් වලට අලුත් නම් ටිකක් ප්‍රැක්ටිස් කරන්න එක එක ලිස්ට් අරන්. මම දෙන්නද ලිස්ට් ටිකක්. කෝඩින් කරලා බලන්න හරිද කියලා...

fruits are,
       •Mango.
       •Banana.
       •Apple.

Other Teledramas
   iv. T20.
    v. Neranjana.

1. Institue
           ° Education.
           °Commercial.
                           b. Foreign.
                           c. Local.

(අන්තිම එකට බය වෙන්න එපා. ලිස්ට් එකක් ඇතුලෙ ලිස්ට් එකක්. කරන්න. ඔයාට පුලුවන් ඒක.)

•Pre formatted text.

මේකෙදි කරන්නෙ ඡේදයක්, ඒ සකස් කරන විදිහටම වෙබ් පිටුව තුල පෙන්නනවා.. ඔයාට මතක ඇති මම කිව්වා නෝට් පෑඩ් එකේ අපි enter කලත් space 10 ක් තියලා ටයිප් කලත් පේජ් එකේ එහෙම පෙන්නනෙ නෑ කෝඩින් කරන්න ඕනෙ කියලා.. පෑඩ් එකේ අපි කරන විදිහටම වෙන්න එහෙම යොදා ගන්න පුලුවන් ටැග් එකක් අදුන්වලා දෙන්නයි යන්නෙ..
මේ  <pre> ටැග් එක.

පොඩි උදාහරණයකට යමු. හිතන්න ඔයාට ඕනෙ කියලා my name කියන වචන දෙක අතර space හයක් තියන්න ඕනෙ කියලා.. මෙන්න මෙහෙමයි කෝඩින්   එන්නෙ..

<p>
<pre> my      name </pre>
</p>

මේ ටැග් දෙක ඇතුලෙ කරන දේවල් එහෙමම පේජ් එකේ සටහන් වෙනවා..

• Address Tag

Address ලියන්නත් ටැග් එකක් තියෙනවා.. උදාහරණයකින්ම පෙන්නන්නම්කො...

<Address>
A.B.C. Wirarathne. <br>
No. 34 <br>
George street <br>
Badulla.
</Address>

• HTML  Image

වෙබ් පේජ් සදහා images එකතු කිරීමයි මේ කියලා දෙන්න යන්නෙ..

ඉස්සෙල්ලම කියන්න දෙයක් තියෙනවා.. ඔයාගෙ වෙබ් පේජ් එකේ නම  max.html කියලා හිතමු. ඔයා ඒ වෙබ් පේජ් එකට එකතු කරන්න ඉන්න image එකත් තියෙන්න ඕනෙ ඒ පේජ් එක save කරලා තියෙන folder එකේමයි. ඒ folder එක ඇතුලෙම image කියලා තව folder එකක් හදලා ඒකේ තියෙන්නත් පුලුවන්. එතන ඉදලා හරියට පාත් එක ලියන එක තමයි වැදගත්ම..

අපි හිතමු max.html කියන පේජ් එක සේව් කරලා තියෙන ෆෝල්ඩර් එකේම image කියලා folder එකක flower1.jpg  කියලා image එකක් තියෙනවා කියලා. අපිට දැන් ඒ image එක වෙබ් පේජ් එකට දාන්න ඕනේ.. මේ බලන්න කෝඩින්..

<html > <body>
<img src = "image/flower1.jpg">
</body> </html>

ටැග් එක img . attribute එක src . හොදට බලන්න close ටැග් එකක් නැහැ හොදේ.. පාත් එක දීලා තියෙන විදිහ බලන්න.. image folder එක ඇතුලෙ තියෙන flower1.jpg .

flower1.jpg කියලා විතරක් දෙන්න නම් max.html කියන වෙබ් පේජ් එක අපි save කරලා තියෙන තැනට සමාන්තරවම  flower1.jpg කියම image එක save වෙලා තියෙන්න ඕනෙ.
img ටැග් එකට යෙදෙන attributes ගැන මම කියලා දෙන්නම් ඊලගට...

<img src = "image/flower1.jpg" alt = "rose flower" align = "top" width = 200  border = 2 hspace = 30 vspace= 10 >

හරි අපි එකින් එක බලමු. src කියලා දුන්නනෙ.

ඊලගට alt. ඔයා දැකලා තියෙනවද වෙබ් පේජ් එකක image එකක් උඩට cursor එක ගෙනියනකොට ඒ image එකේ නමක් පෙන්නනවා.. අන්න ඒ විදිහට නමක් දෙන්න අපිට alt එකෙන් පුලුවන්.

ඊලගට align. ඒක නම් කලින් පාඩමකදි මම කියලා දුන්නා.. image එක පිහිටන්න ඕනෙ කොතනින්ද කියලයි කියවෙන්නෙ.. මේකෙ මම දුන්නෙ. top එකෙන්.

width & hight කියලා දෙකක් තියෙනවා.. image එකේ උසයි පළලයි. ඔයා හොදට මතක තියා ගන්න උසයි පලලයි දෙකම දෙන්න යන්න එපා. එකක් දෙන්න. ඒ ඇයි දන්නවද.. අපි උස දුන්නොත් ඒ උසට හරි යන්න image එකේ පලල හැදෙනව.. පලල දුන්නොතුත් එහෙමයි. ඒත් දෙකම දුන්නොත් අපි කියම විදිහට උස පලල හැදිලා image එක විකෘති වෙනවා..

ඊලගට border එක. Image එකට මම 2 ක border එකක් දීලා තියෙනව.

hspace. ඒ කියන්නෙ horizontal space. තිරස් දුර. අපේ image එකේ ඉදලා පේජ් එකේ කෙලවරට තියෙන්න ඕනෙ තිරස් දුර.

Vertical space. සිරස් උස.

හොදයි ඔයා images ඔයාගෙ වෙබ් පේජ් එකට දාලා බලන්නකො මේ වගේ..

වෙබ් පේජ් එකේ පසුබිමට image දාන්න ඕනෙ නම් මේ විදිහයි...

<html>
<body background = image/sea.jpg>
</body>
</html>

අපි ඊලග පාඩමේදි බලමු link ගැන...

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

No comments:

Post a Comment