HTML For Beginners - Part 4

HTML Headings, Lines, Comments සහ Elements

අද පාඩමෙන් අපි තවදුරටත් HTML වල පුංචි කරුණු ටිකක් ඉගෙනගන්න යන්නේ. මේ දේවල් මතක තියාගන්න වගේම භාවිතා කරන්නත් හරිම ලේසියි. ඒ නිසා අද පාඩමෙන් කරුණු ගොඩක් ගැන කතා කරන්න මම බලාපොරොත්තු වෙනවා.

•          HTML Headings

අපි මුලින්ම කතා කරමු HTML Headings ගැන. Headings කියන්නේ මාතෘකා කියල කවුරුත් දන්නවනේ. HTML files වලදී Headings පෙළගස්සන්න පුළුවන් ඒවායේ තියෙන වැදගත්කම අනුව. ඒ අනුව HTML Headings වර්ග හයක් තියෙනවා. ඒවත් Tags වලින්ම තමයි පෙන්වන්නේ. <h1>, <h2>, <h3>, <h4>, <h5> සහ <h6> කියන Tags ගැන තමයි අපි මේ යටතේ කතා කරන්නේ.  

පුරුදු විදියටම අපි HTML document එකක් හදාගෙන මේ Headings ගැන දැනගනිමු. දැන් HTML document එකක් තනියම හදාගෙන run කරලා බලන්න හැමෝටම පුළුවන් නේද? බලමු අපි කොහොමද Headings ටික Type කරගන්නේ සහ ලැබෙන Outputs ටික මොන වගේද කියල.

මේ වගේ Outputs ටිකක් තමයි අපිට ලැබෙන්නේ. Heading 1 වල ඉඳලා Heading 6 වෙනකල් යද්දී Text එකේ ප්‍රමාණය ක්‍රමයෙන් අඩු වෙමින් යනවා අපිට දකින්න පුළුවන්. ඒ වගේම Heading 6 එකේ ප්‍රමාණය Paragraph එකටත් වඩා කුඩා බව පෙනේවි. ඒක පැහැදිලිව අඳුනගන්න තමයි පහළින්ම Paragraph එකකුත් මම එකතු කලේ. හැබැයි Headings හැමතිස්සෙම Bold වෙලයි තියෙන්නේ.

            නමුත් Text එකක් Bold කරගන්න සහ ටිකක් ලොකු කරගන්න විතරක් Headings යොදාගන්න එක නම් අනුමත කරන්න බැහැ. ඒකට හේතුව තමයි වෙබ් පිටුවක ආකෘතිය (structure) සහ අන්තර්ගතය (content) ලැයිස්තුගත කරගන්න Search engines විසින් Headings යොදා ගනු ලැබීම.

    

•       Horizontal lines

ඊළගට අපි කතා කරන්න යන්නේ HTML document එකකට තිරස් රේඛා (Horizontal lines) එකතු කරගන්නේ කොහොමද කියන එක ගැනයි. තිරස් රේඛාවක් නිර්මාණය කරගන්න හරිම පහසුයි. <hr /> Tag එක යොදන්න විතරයි තියෙන්නේ අපිට. HTML5 වලදී <hr />, තේමාත්මක කැඩීමක් (Thematic break) විදියටයි සලකන්නේ.

            Headings ගැන පැහැදිලි කරන්න අපි හදාගත්ත Notepad එක Edit කරලා, Paragraph එක Headings වලින් වෙන් කරගන්න Horizontal line එකක් එකතු කරගන්න විදිය අපි බලමු.

            Paragraph එක Horizontal line එකකින් වෙන් වෙලා තියෙන විදිය මෙහිදී පැහැදිලිව දකින්න පුළුවන්.

• Comments

HTML documents run කරද්දී Browser එක Comments display කරන්නේ නැහැ. නමුත් Document එකට විවිධ විස්තර (Descriptions), මතක් කිරීම් (Reminders) සහ වෙනත් සටහන් එකතු කරන්න මේ Comments අපිට උදව් වෙනවා.

අපි උදාහරණයක් යොදාගෙන මේ ගැන විස්තර බලමු.

           අපි එකතු කරපු Comment එක display වෙලා නැහැ කියල දැන් පේනවා නේද? Comments එකතු කරද්දී මතක තියාගන්න ඕන දෙයක් තමයි Opening tag එකේ Exclamation point (!) එකක් තිබුනට closing tag එකේ ඒක යෙදෙන්නේ නැහැ කියන එක.

• HTML Elements

අපි දැනටමත් දන්නා විදියට HTML documents හැදිලා තියෙන්නේ HTML elements වලිනුයි. ආරම්භක (start) tag එකක් සහ අවසාන (end) tag එකකුත්, ඒ අතර තියෙන අන්තර්ගතයකුත් (content) මගිනුයි HTML elements ලියනු ලබන්නේ. ගොනු කරන ලද HTML elements (nested HTML elements) වලින් HTML documents සමන්විත වෙනවා.

පහත උදාහරණයේදී අපිට දැකගන්න පුළුවන් body element එක ඇතුලේ <p> tags, <br /> tag එක හා “This is a paragraph” කියන content එක අන්තර්ගත වෙලා තියෙන බව.

මෙහිදී අපි මතක තබාගතයුතු දෙයක් තමයි HTML වල තියෙන සමහර elements ගොඩක් පොඩියි, හරියට <br /> tag එක වගේ. අපි මේ ගැන අපේ තුන්වෙනි පාඩමේදීත් කතා කලා. <br /> tag එකට අපිට content එකක් ඇතුලත් කරන්න බැහැ. ඒ වගේම opening සහ closing tags ඇත්තෙත් නැහැ. ඒක වෙනමම තනි element එකක්.

අද පාඩමේදී අපි HTML headings, horizontal lines, comments සහ HTML elements ගැන තමයි කතා කලේ. මාතෘකා හතරක් උනාට පොඩි දේවල් වගයක්නේ තිබුනේ. ඒ නිසා මතක තියාගන්න අමාරුවක් වෙන්නේ නැහැ. හැමදාම වගේ කියන්න තියෙන්නේ නැවත නැවත කරලා මේ පාඩමත් තහවුරු කරගන්න කියලයි. එහෙනම්, තවත් මේ වගේ පාඩමකින් අපි හමුවෙමු...

-- ලක්ෂිකා ස්වර්ණමාලි --

Read More

Blender sinhala tutorial - introduction

මොකද්ද මේ 3D software කියන්නේ?

3D software කියන්නේ ඕනෙම දෙයක් virtually නිරූපණය කරන්න පුළුවන් software එකක්. ඉතින් මෙමගින් ඔයාලගේ හිතේ තියෙන ඕනෙම සිතුවිල්ලකට පන දෙන්න පුළුවන්.  ඉතින් blender  කියන්නෙත් ඒ වගේ software එකක්. හැබැයි මේකේ විශේෂත්වය වෙන්නේ මේක freeware එකක්.

අපි ඉස්සෙල්ලම බලමු  blender  වල interface එක කොහොමද කියලා. සුපුරුදු පරිදි උඩින්ම menu bar එකක් බලාගන්න පුළුවන්. ඊට පස්සේ දෙපැත්තෙන්  සහ පහළින් එක එක ආකාරයේ  option සහිත විවිද palette බලා ගන්න පුළුවන්. මම ඒවා වෙනම  post  එකකින් කියලා දෙන්නම්. අද ප්‍රධානම අංග ටික කියල දෙන්නම්. මේ මැදම තියෙන ප්‍රදේශයට තමයි කියන්නේ 3D viewpoint  එක කියල.ඔයාගේ වැඩ වලින් වැඩි හරියක්ම කරන්න වෙන්නේ මේක ඇතුලේ තමයි.

blender වල නම් අනිත්  3D software  වල වගේ view points ගොඩක් නැහැ. එක නිසා  blender interface එකට සරළ බවක් නම් ලැබිලා තියෙනවා.

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

ඉතින් වැඩක් කරන්න නම් අඩු ගානෙ  object  එකක් එහා මෙහා ගෙනියම හැටිවත් දැනගන්න ඕනනේ. ඒ ටික මම අද කියල දෙන්නම්. තව දෙයක් blender  පාවිච්චි කරද්දී ගොඩක් පහසුයි ඔයාට  mouse  එකක් තිබ්බනම්.

• zoom කිරීමට - mouse wheel එක උඩට පහලට scroll කරන්න 
• එක අක්ෂයක් වටා කරකැවීමට (orbit)-  middle mouse button එක හෝ scroll wheel එක Hold කරගෙන drag කරන්න.
• Pan කිරීමට -  shift button එක hold කරගෙන middle mouse button එක click කරලා drag කරන්න. 

ඒ වගේම  number pad එක භාවිතයෙනුත්  view එක කැමති දිශාවකට භ්රමණය කරන්න පුළුවන්. 

• Top view: 7
• Front view: 1
• Right view: 3

වස්තුවක්  select කර ගන්න අනිත් applications, left mouse click  භාවිතා කරද්දී  blender  වලනම් ඒ වැඩේ කරන්නේ  right click එක. මුලදී නම් ටිකක් නුපුරුදුයි වගේ දැනේවි. එත් පස්සේ හුරුවේවි.

object එකක්  select  උනාම එක තැඹිලි පාටින් දැක්වෙනවා. 3D view point  එකේ තියෙන සියලුම  object select  කරන්න "a"  hotkey එක භාවිතා කරන්න පුලුවන්. ඒ වගේම "a" අකුර නැවත  press  කිරීමෙන්  සියලුම  object deselect  කරන්න පුලුවන්.

ඉතින් තවත් ලිව්වොත් post එක දිග වැඩි වෙන නිසා object movement සහ transformation ඊළග post එකින් කතා කරන්නම්.   

 -Hasini Senanayaka-

Read More

HTML For Beginners - Part 3

HTML වල Paragraphs සහ Text Formatting හඳුනාගනිමු

              HTML පාඩම් මාලාවේ අපි දැනට කතා කලේ ප්‍රධාන Tags වර්ග තුනක් ගැන සහ ඒවා යොදාගෙන සරළ HTML File එකක් හදාගන්න විදියයි. අද අපි කතා කරන්න හදන්නේ පරිච්ඡේද (Paragraphs) සහ පාඨ (Texts) නිර්මාණය කරගන්න විදිය ගැනයි.  

            පරිච්ඡේදයක් නිර්මාණය කරගන්න එක හරිම ලේසියි. ඒකට කරන්න තියෙන්නේ ආරම්භක සහ අවසාන <p> Tags දෙකක් ඇතුලත් කරන එක විතරයි. මේ <p> Tags දෙක ඇතුලේ අපිට ඕන කරන පරිච්ඡේදය Type කරගන්න පුළුවන්.

අපි උදාහරණයක් බලමු. මම අපි කලින් හදාගත්ත first.html file එකම Edit කරන්නයි හදන්නේ.

 දැන් අපි මේක කලින් කරපු විදියටම Save කරලා Open කරගෙන බලමු Output එක කොහොමද පේන්නේ කියල.

            මේ විදියට තමයි අපිට Output එක පේන්නේ. Browser එක විසින් ඉබේම (Automatically) පරිච්ඡේදයකට කලින් සහ පසුව හිස් රේඛාවක් (Line) එකතු කරනු ලබන  බවත් අපිට මේකෙදි දැකගන්න පුළුවන්.

ඊළඟට අපි බලමු මේ පරිච්ඡේදයක් ඇතුලේ රේඛා කැඩීමක් (Line Break) හදාගන්නේ කොහොමද කියල අලුත් පරිච්ඡේදයක් ආරම්භ නොකර. මේ සඳහා අපි භාවිතා කරන්නේ <br /> Tag එක. <br /> element එක Empty HTML element විදියටයි සැලකෙන්නේ. ඒකට End tag එකක් ඇත්තේ නැහැ.

අපි දැන් බලමු Line Break එකක් එකතු කලාම අපිට මොන වගේ Output එකක්ද ලැබෙන්නේ කියල. මම පහසුව සලකලා අපි හදාගෙන ආව HTML file එකම Edit කරගෙන යන්නම්. ඕන නම් වෙන වෙනම HTML files හදලත් අපිට run කරලා බලන්න පුළුවන්.

Web browser එක Open කරලා බැලුවම තනි Line break එකක් අපේ පරිච්ඡේදයට එකතු වෙලා තියෙන විදිය අපිට බලාගන්න පුළුවන්.

 දැන් Line break එකෙන් වෙන දේ පැහැදිලියි නේද?

Text formatting කියන්නේ HTML වල තවත් කුඩා කරුණු කීපයක් නිසා ඒ ගැනත් මේ පාඩමේදීම කතා කරමු. HTML වල Text styles වලට අනන්‍ය වුනු Elements ලැයිස්තුවක් තියෙනවා.

මේ Formatting elements නිර්මාණය වෙලා තියෙන්නේ විශේෂිත Text types කිහිපයක් වෙනුවෙනුයි. අපි ඒ මොනවද කියල බලමු. ඒ ගැන නිකම්ම කියවගෙන යනවට වඩා, කලින් වගේ HTML file එකක් හදල, run කරලා එන Output ටික බලල මේක තේරුම් ගන්න ලේසි වෙයි කියල හිතුනා.

එහෙනම් අපි බලමු ඒ ගැන.

 මේකේ Output ටිකත් බලලම අපි වැඩි විස්තර කතා කරමු.

  මේ තමයි අපිට ලැබෙන Output ටික. පරිච්ඡේද වෙන් කරලා තියෙන්නේ Output ටික පැහැදිලිව අඳුනගන්න පුළුවන් වෙන්නයි.

මේ Output වලට අනුව අපිට පෙනෙන දෙයක් තමයි Browser එක  <b> සහ <strong> Tags දෙකත්, <i> සහ <em> Tags දෙකත් පෙන්නන්නේ එකම විදියට බව. කොහොම උනත් මේ Tags වල තේරුම් එකිනෙකට වෙනස්. <b> සහ <i> වලින් කියන්නේ Texts ටික Bold සහ Italic බවයි. ඒ වගේම <strong> සහ <em> Tags වලින් කියන්නේ අදාල Texts “වැදගත්” බවයි.

අද පාඩමෙන් අපි ගොඩක් දේවල් කතා කළා. ඒ හැම දෙයක්ම අයෙමත් කරලා බලන්න මතකයෙන්. එතකොට ඒවා අමතක වෙන්න තියෙන ඉඩකඩ අඩුයි. තවත් අලුත් පාඩමකින් අපි ආයෙමත් හමුවෙමු..

-- ලක්ෂිකා ස්වර්ණමාලි --

Read More