බහු මාධ්‍ය තාක්ෂණය යොදා ගනිමින් සරල වෙබ් අඩවි නිර්මාණය

4 වන කොටස

HTML (Hyper Text Markup Language)

HTML යනු අන්තර්ජාලයේ www (wold wide web) පිටු සැකසීම සඳහා භාවිතා කෙරෙන ප්‍රධාන භාෂාවයි.

Hyper Text යනු සමහර අතිරේක ලක්ෂණ වලින් සමන්විත වූ, එනම් Image, Multi Media (බහුමාධ්‍ය) වැනි අතිරේක අංග තවත් ලේඛනයක් සමග සම්බන්ධ කිරීම සඳහා යොදා ගන්නා සාමාන්‍ය භාෂාවකි.

Markup යනු ලේඛනයකට අතිරේක ලක්ෂණ යෙදීම සඳහා භාවිතා කෙරෙන ක්‍රියාවලියයි.

Language යනු ඒ සඳහාම වූ නිසියාකාර සන්නිවේදනයක් ගොඩනැගීම සඳහා අවශ්‍ය ව්‍යාකරණ (Syntax) සහ නීතිරීති (Rules) සමූහයයි.

HTML මූලික සංකල්ප (Basic Concepts)

HTML හී ඇති විධාන මගින් (Commands) ලේඛනයේ ආකෘතිය පිළිබඳව විමර්ශකය (Browser) වෙත සපයනු ලබයි.

HTML ලේඛනයක් යනු ප්‍රකාශ කිරීමට අපේක්ෂා කරන සරළ ඉමේජගත අක්ෂර භාවිතයෙන් ගොඩනගනු ලබන ගොනුවකි.

ඒ තුළ අන්තර්ගත උපදෙස්, එහි අවයව (Elements) යනුවෙන් හදුන්වයි. මෙමගින් පවසනු ලබන්නේ වෙබ් පිටුව කිනම් ආකාරයෙන් ඉදිරිපත් විය යුතුද යන කාරණයයි.

නිදසුනක් ලෙස :-

1. වෙබ් පිටුවක යම් වාක්‍ය ඛණ්ඩයක් තද කළු අකුරින් (Bold) පෙන්විය යුතුනම් එය, <b>This text should be Bold</b> ලෙස ලිවිය හැකිය. { This text should be Bold }
2. තවද, වෙබ් පිටුවක යම් වාක්‍ය ඛණ්ඩයක් යටින් ඉරක් (Underline) සහිතව පෙන්විය යුතුනම් එය, <u>Letters should be underline</u> ලෙස ලිවිය හැකිය. { Letters should be underline }

මෙහිදී <b> </b> යන සංඛේත සඳහා Tags යන යෙදුම භාවිතා වේ. එසේම මෙහි පළමු Tag එකේ නොමැති “ / ” සංඛේතය අවසානයේ යොදා ඇති බවද අවධානයට ගත යුතුය.

කෙසේ වෙතත් සමහර අවස්ථා වලදී කලින් සිතන ආකාරයෙන්ම එවැනි වාක්‍ය ඛාණ්ඩ වෙබ් පිටුව මත දර්ශනය නොවුනහොත් මෙයට හේතුව වන්නේ HTML සැළසුමෙහි වරදක් හෝ වෙබ් විමර්ෂකය (Web Browser) ස්වභාවය විය හැකිය.

එසේම html මගින් අවයව දෙකක් සම්බන්ධ කිරීමේ හැකියාවද තිබේ. මෙය Nesting යනුවෙන් හදුන්වන අතර මේ මගින් සුදු කෙරෙනුයේ අවයව දෙකක් එක් වාක්‍ය ඛාණ්ඩයකට අන්තර්ගත කිරීමයි.

නිදසුනක් ලෙස :-

            වෙබ් පිටුවක යම් වාක්‍ය ඛණ්ඩයක් තද කළු අකුරින් (Bold) සහ යටින් ඉරක් (Underline) සහිතව පෙන්විය යුතුනම් එය පහත පරිදි දැක්විය යුතුය.

<b> <u> This text should be bold and underlined </u> </b>

එවිට <b> <u> හා </b> </u> යන ඇමුණුම් (Tags) අතර ඇති This text should be bold and underlined යන ඡේදය “ Bold සහ Underline ” ආකාරයෙන් මෙසේ “ This text should be bold and underlined ” දර්ශනය වේ,

වෙබ් පිටුවක් නිර්මාණය කිරීම.

Desktop මත ඇති Icon ඒක මගින් හෝ “Start” මෙනුව තුළින් “All Program” click කිරීමෙන් ලැබෙන ලැයිස්තුවෙන් “Notepad” මෘදුකාංගය විවෘත (Open) කරන්න.

“Start  - All Program - Notepad”

එහි පහත දැක්වෙන html code ලියන්න.

මෙහි ඇති <h1> </h1> tags වල තේරුම වනුයේ “Heading” යන ආර්ථයයි. එය මාතෘකාවකදී යෙදේ.

<title> <t/itale> tags වල තේරුම වනුයේ html පිටුව Open වෙන Browser එකේ Tabe එකේ නම, නැතහොත් ඒ ඒ පිටුවල නම / තේරුම යන අදහසයි.  <title> Home <t/itale> දුන් විට එම පිටුවේ නම Home ලෙස දිස්වේ.

Tag වර්ග බොහොමයක් තිබෙන හෙයින්, ඒවා අපි ඉදිරියේදී ඉගෙන ගනිමු.

Code කළ පසු එය save කිරීම සඳහා ඔබේ පරිගණකයේ Desktop හී ෆෝල්ඩරයක් (Folder) සාදා ගන්න.

ඉන්පසු Notepad එකේ මෙනු තීරුවේ File මෙනුව යටතේ ඇති Save As... / Save විධානය ලබා දෙන්න.

එළඹෙන සංවාද කවුළුවෙහි Save වියයුතු ෆෝල්ඩරය (ඔබ පරිගනකයේ Desktop හී සාදාගත් ෆෝල්ඩරය) තෝරන්න.

ඉන් පසු පහතින් ඇති Full Name ස්ථානයේ ඇති “ *.txt ” යන පදය ඉවත් කර එතනට සුදුසු නමක් ලබා දී, ඔබ ලබාදෙන නම අවසානයේ නැවතීමේ තිත ( Welcome. ) යොදා html යනුවෙන් සඳහන් කරන්න. (Welcome.html) 

ඉන් පසුව ඊට පහලින් තිබෙන “Save as type:” යන තැනට All Files ලබා දී, Save විධානය ලබා දෙන්න.

ඉන් පසුව ඔබ Save කළ Notepad ගොණුව ඇති ෆෝල්ඩරයට යන්න (පරිගණකයේ Desktop තුළ ඔබ සාදාගත් ෆෝල්ඩරය Open අරන්න) - ඉන් පසුව ඔබ Save කළ Notepad ගොණුව මත දෙවරක් click කිරීමෙන් හෝ ඒ මත Right Click කර Open විධානය ලබා දෙන්න. ඉන් පසුව ඔබ සාදාගත් වෙබ් පිටුව විවෘත වේ.

5 වන් කොටසින් හමුවෙමු.

ඔබට ජය...!!!