Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.

10.3.වෙබ් පිටු නිර්මාණය සඳහා HTML භාවිතා කිරීම(Uses HTML to create web pages)

 
වෙබ් අඩවියක අන්තර්ගතය පිළිබද දෙවෙනි පාඩමේදී (10.2)  ඔබ ලබාගත් අවබෝධයෙන් පසු, HTML භාවිතා  කර  වෙබ් පිටු නිර්මාණය කිරීම පිළිබද මෙම  පාඩමේදී අවධානය යොමු කරමු.
 
අධි පාඨ සලකුණු කිරීමේ භාෂාව නැත්නම්  HTML(HyperText Markup Language) කියන්නේ වෙබ් පිටු නිර්මාණය කිරීම සඳහාත් Web Browser එක මගින් වෙනත් තොරතුරු පෙන්වීම සඳහාත් භාවිතා වන මුලික සලකුණු කිරීමේ භාෂාව(markup language ) වේ.මෙය ක්‍රමලේඛ භාෂාවක් නොවන අතර සලකුණු කිරීමෙ කේතයක් වේ.Standard General Markup Language – SGML වල උපකුලකයක් වන මෙය සලකුණු කිරීමෙ උසුලනයන්,ඇමුණුම් (markup tags) සමුහයකින් සමන්විත වේ.වෙබ් පිටු සැකසීමේදී මුලාශ්‍ර ගොනුවක් හෝ HTML සංස්කාරක මෘදුකාංගයක් භාවිත කළ හැකි අතර මුලාශ්‍ර ගොනුවක් යනු පෙළ සංස්කාරකයක් (Text editor) වේ .මේ විදියට වෙබ් පිටු නිර්මණය කිරීමේදී විවිධ  HTML කේතයන් යොදා ගන්නවා (උදා: <html>,<head>). සැමවිටම මේ tags, angle brackets (<, >) වලින් ආවෘත වෙන්න ඕන. මේ විදියට HTML ඇමුණුම් (tags) සුලභවම භවිතා වෙන්නෙ යුගල වශයෙනි.

උදාහරණයක් විදියට <h1> සහ </h1>.

නමුත් සමහර වෙලාවට යුගල වශයෙන් නැති ඇමුණුම් (tags) නුත් අපිට හමුවෙනවා.උදාහරණයක් විදියට <img> tag එක. මේ යුගලයක තියන පළමු කේතය start tag ලෙසත් දෙවන කේතය end tag ලෙසත් හඳුන්වනවා.තවද මේවා ආරම්භක ඇමිණුම (opening tags) සහ අවසාන ඇමිණුම(closing tags) ලෙසත් හඳුන්වනවා. සැමවිටම දෙවන කේතය පටන් ගන්නෙ “/” (forward slash)එකකින්. මේ Tags දෙක අතරෙ අපිට පුලුවන් text, comments සහ තවත් tags වගෙ දෙවල් ඇතුල් කරන්න. එක tag එකක් ඇතුළත තවත් tag එකක් ඇති විට පළමුව ඇතුළත ඇති tag එක අවසන්(close) කල යුතුය. ඉන් පසුව පිටත tag එක අවසන් කල යුතුය (උදා: <head><title>Hello World</title></head>).HTML වලදි ගොණු දිගු (extension) ලෙස .html හෝ .htm භාවිතා කල හැක.
 
වෙබ් පිටුවක් තැනීමට අවශ්‍ය  මුලිකාංග ලෙස අකුරු (Text), චිත්‍රන (Graphics), ශ්‍රව්‍ය  (Audio), දෘශ්‍ය  (Visuals) සහ චලන රූප (Moving pictures) ද දක්වන්න පුළුවන්. දැන් අපි බලමු HTML වලින් වෙබ් පිටුවක් නිර්මණය කරගන්නෙ කොහොමද කියලා.

HTML කේතනයට පසුබිම සැකසීම

Windows මෙහෙයුම් පද්ධති සඳහා:
 
 
පළමුව notepad ගොනුවක පහත දැක්වෙන කේතයන්  සටහන් කරගන්න.ඉන්පසු  එය” .html “ extention එක සහිතව ඔබ කැමති නමකින් save කරගන්න (උදා: page1.html).
 
Mac මෙහෙයුම් පද්ධති සඳහා:
 
 
පළමුව TextEdit ගොනුවක  පහත දැක්වෙන කේතයන්  සටහන් කරගන්න.ඉන්පසු මෙම පියවර අනුගමනය කරන්න.
  • Select ‘format’ -> ‘make plain text’
  • Select ‘File’ -> ‘save as’
  • Save the file as: ‘test.html’
  • Select ‘Use.html’
 
Linux මෙහෙයුම් පද්ධති සඳහා:
 
(පිටුවෙහි අන්තර්ගතය මත රඳා පවතී.)
 
  • touch /path/to/file                        -හිස් පිටුවක් (empty file)සඳහා
  • somecommand > /path/to/file    -කෙතයන් මගින් ලබාදෙන output සහිත පිටුවක් සඳහා.
  • nano /path/to/file හෝ vi /path/to/file (හෝ වෙනත් පෙළ සංස්කාරක: emacs,gedit) -දැනට පවතින පිටුවක් සංස්කරණය කිරීම සඳහා හෝ අලුත් පිටුවක් නිර්මාණය කර කේත කිරීම සඳහා open කිරීම.

මුලික ඇමුණුම් (Basic Tags)

 
මෙලෙස නිර්මාණය කරගත් වෙබ් පිටුව web browser එකක්  මගින් open කරගත හැක.HTML වෙබ් පිටුවක තියන තවත් විශේෂ tags කිහිපයක් තමයි <head>,<title> සහ <body>. වෙබ් පිටුවක වැදගත් තොරතුරු header තුළ ඇතුලත් වන අතර title යනු header තුල ඇති වැදගත්ම කොටසයි. Title යනු browser හි title bar මත පෙන්නුම් කරන අංගයකි. වෙබ් පිටුවක අන්තර්ගතය(content) ඇතුලත් වන්නේ <body> tags තුලයි. පහත දැක්වෙන්නේ මෙම tags ඇතුලත් සරල උදාහරණයකි.
 

 මාතෘකා ඇමුණුම (Heading Tag)

වෙබ් පිටුවක මාතෘකව දැක්වීම සඳහා <h1>, </h1> tags භාවිත කරයි. මෙහිදී ප්‍රමාණ  හයකින්  මාතෘකාව  දක්වන්න පුලුවන්. එවා <h1>සිට <h6> දක්වා නම් කරයි.

htnam-head-tags

<html>
<head>
<title>IT ගුරුගෙදර
</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

 ආකෘති  ඇමුණුම් (Formatting Tags)

තවද ජේද දැක්වීම සඳහා <p>, </p> tags භාවිත කරයි.මෙහිදී අපිට පුලුවන් වෙබ් පිටු ගුණාත්මකව මෙන්ම අලංකාරත්මකව නිර්මාණය කරගන්න අකුරු වල වර්ගය(font face), ප්‍රමාණය (font size),වර්ණය(font color) වෙනස් කරගන්න. තවද තද අකුරු(bold), ඇල අකුරු(italic) සහ යටින් ඉරි ඇඳි ඇකුරු (underlined) ලබා ගැනීමේ හැකියාවද තිබේ. මේ සඳහා යොදා ගන්නා කෙතයන් පහත දක්වේ.

output

<font face=” verdana”> This is some text! </font> – අකුරු වර්ගය සඳහා
<font size=”3″> This is some text! </font> – අකුරු වල ප්‍රමාණය සඳහා
<font color=”red”>This is some text! </font> – අකුරු වල වර්ණය සඳහා
<b>This text is bold</b> – තද අකුරු සඳහා
<i> This text is italic </i> – ඇල අකුරු සඳහා
<u> This text is underlined </u> – යටින් ඉරි ඇඳි ඇකුරු සඳහා

චිත්‍රක (Graphics)

HTML වෙබ් පිටුවකට චිත්‍රක (Graphics) ඇතුලත් කිරීම සඳහා <img> tag එක භාවිතා කරනු ලැබේ.මෙයට අවසන් කිරීමේ tag එකක් නොමැති අතර <img> tag එක තුල src ගුණාංග (attributes) පමණක් අන්තර්ගත වේ. මෙහි src යනු source හි අක්නම(acronym) වේ.මෙහිදී src attribute එක ලෙස අපිට පෙන්වීමට අවශ්‍ය පින්තුරයේ URL(Uniform Resource Locator) එක දැක්විය යුතුය.

<img src=”url” alt=”some_text”>

පින්තුරයට විකල්ප පෙළක් දැමීමේදී alt ගුණාංගය යොදා ගනී.මෙහිදී URL එක මගින් දැක්වෙන්නේ පින්තුරය ගබඩා කර ඇති ස්ථානයි.උදාහරණයක් ලෙස පරිගණකයේ දෘඩ තැටියේ “E” නැමැති drive එකේ images නැමැති ගොනුවේ ඇතුලත් dog.jpg යන පින්තුරය ඇතුලත් කිරීමට නම් පහත ආකාරයට කේත කල යුතුය.

<img src = “E:/images/dog.jpg” alt=”dog”>

තවද මෙහිදී අපිට පින්තුරයේ දිග සහ පළල දක්වන්නත් පුළුවන්.ඒ සඳහා පහත ආකාරයට කේත කල යුතුය.

<img src = “E:/images/dog.jpg” alt=”dog” width=”42″ height=”42″>

නමුත් විශ්ව විසිරි වියමන තුල ඇති වෙබ් පිටුවකට චිත්‍රක (Graphics) ඇතුලත් කිරීම සඳහා පින්තුරය ගබඩා කරතිබිය යුත්තේ ගොනු සේවාදායකයකු (File server) තුලයි.URL එක , චිත්‍රකය(Graphics)  උත්පතනදී(Upload) එයට ලබාදේ.

ශ්‍රව්‍ය පසුරු (Audios)

HTML වෙබ් පිටුවකට ශ්‍රව්‍ය පසුරු (Audios) ඇතුලත් කිරීමේදී .mid, .mp3, .wav වැනි ගොනු දිගු භාවිත කළ හැකිය. මෙහිදී <a href> සහ <embed> වැනි උසුලනයන් යොදා ගනී.

උදාහරණ:

<a href = “myfile.mid”> My Song </a> මෙහිදී hyperlink එක click කර පසු ශ්‍රව්‍ය පසුරු (Audios) වැඩ කරයි.
<embed src = “myfile.mid” height=”50″ width=”100″ > </embed>
<embed> සමග src ගුණාංග යොදා ගනී. මෙහිදී ස්වයංක්‍රියව ශ්‍රව්‍ය පසුරු (Audios) වැඩ කරයි.

.wav සහ .au වැනි ගොනු දිගු විශාල නිසා දර්ශනය වීමට  කාලයක් ගතවේ.පින්තුරයකට සම්බන්ධ වී ඇති සංගීත ගොනුවක් නම් පහත ආකාරයට කේත කල යුතුය.

<a href = “myfile.mid”> <img src = “mypicture.jpg” Border = “0” alt = “describe picture and music”> </a>

උදහරණ:

මෙහි autostart – “true” වූ විට ස්වයංක්‍රියව සංගීතය ඇසේ.

දෘශ්‍ය පසුරු (Visuals)

දෘශ්‍ය පසුරු (Visuals) ඇතුලත් කිරීමේදී .mpeg, .wmv  වැනි ගොනු දිගු භාවිත කළ හැකිය අතර මෙහිදී ද <a href> සහ <embed> වැනි උසුලනයන් යොදා ගනී.
උදාහරණ:

<a href=”intro.mp4″>Play a video file</a> මෙහිදී hyperlink එක click කර පසු දෘශ්‍ය පසුරු (Visuals) වැඩ කරයි.
<embed src = “intro.mp4″ width=”200″ height=”200” >
<embed> සමග src ගුණාංග යොදා ගනී. මෙහිදී ස්වයංක්‍රියව දෘශ්‍ය පසුරු (Visuals) වැඩ කරයි.

මෙහිදී සඳහන් කල යුතු වැදගත් දෙයක් තමයි HTML 5 කියන HTML අනුවාදය (version ) ශ්‍රව්‍ය පසුරු (Audios) සහ දෘශ්‍ය පසුරු (Visuals) ඇතුලත් කිරීම පහසු කර තිබෙනවා . ඒ අනුව පහත දැක්වෙන කේතයන් භාවිත කල හැක.

ශ්‍රව්‍ය පසුරු (Audios) සඳහා:

 

දෘශ්‍ය පසුරු (Visuals) සඳහා:

 

HTML පිටුවකට චලන රූප ඇතුලත් කිරීමේදී .swf හෝ .gif ගොනු දිගු භාවිත වේ. <embed> උසුලනය src ගුණාංගය සමඟ .swf ගොනු දිගු භාවිත කරයි.

<embed src = “abc.swf”>

gif චිත්‍රක ආකාරය සජීවිකෘත gif (animated gif) කල හැක.එය <img> සමග භාවිත කරයි.මෙලෙස animated gif , HTML පිටුවකට යොදා ගැනීම සාමාන්‍ය gif යොදන ආකාරයට සමාන වේ.

<img src = “E:/images/child.gif” alt=”story” width=”42″ height=”42″>

මෙහිදී වම් සහ දකුණු එකෙල්ල (alignment) ද යෙදිය හැකිය.

ආදර්ශනය (demo)

sample web page

ඉහත දැක්වෙනුයේ පහත HTML  ප්‍රභව කේතයට  (source code) web browser ය තුල දිස්වන ආකාරයයි. මෙහි ආදර්ශනය (demo)

sample code

The following two tabs change content below.

Himali Jayawickrama

Student of Faculty of Information Technology, University of Moratuwa

Latest posts by Himali Jayawickrama (see all)

Comments
  1. hasiv
  2. nimesh priyadarshana
  3. sanjaya
  4. Dilshan Ravihara
  5. Kasun Tharnga
    • Himali Jayawickrama
      • Kasun Tharanga
  6. harsha
  7. malsha nethmi
  8. G.A.pasidu bhagya gurusinha
  9. nikethana
  10. Jude
  11. hirosha

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.