වෙබ් අඩවි නිර්මාණය-1
Tim Bernery-Lee විසින් 1989 දී ලොවට හදුන්වාදුන් www හෙවත් world wide web අද ඉතා දියුනු මට්ටමක පවතින බව ඔබ දන්නවා
මෙම බොදාමයක් වෙබ් අඩවි නිර්මාණයට අද ලෝකේ භාව්තයට ගැනෙන්නේ html ක්‍රම ලේකන භාෂාවයි
මෙම ලිපි යෙන් html ගැන ඔබ දැනුවත් කිරීමට මම සූදානම්
මොකක්ද මේ html ?
අපි අන්තර්ජාලයේ සැරි සරද්දි අපි පිවිසෙන බොහො වෙබ් අඩවි, ඔබට සරලව Word Processing මෘදුකාංගක් භාවිතා කොට තැනිය හැකි යයි සිතුනාද? මේ පහල උදාහරණය ගැන පොඩ්ඩක් විමසිලිමත් වෙන්නකෝ.
හරිම පහසුවෙන් කරන්න පුළුවන් දෙයක් නේද? ඒත් එසේ සාදාගත් ලිපි අන්තර්ජාලයට එක් කිරීමේදී ගැටලු පැන නැගෙනව. හරියට ඔබ MS Word වලින් සදාගත් ලිපියක් Notepad එකෙන් විවෘත්ත කරන්න ගියොත් වෙන දේ වගේ.
මේ වගේ තවත් ගැටළු කිහිපයක්ම නිසා අන්තර්ජාලයට සම්බන්ද කරනු ලබන ලිපි සදහා විශේෂ වූ පොදු සම්මත ක්‍රමයක් අවශ්‍ය වුනා, එවිට ඒවා web browsers මගින් ඉක්මනින්ම කියවාගත හැකි වෙනවා. (පොදු ක්‍රමයක් භාවිතා වන නිසා). W3C නැමැති සංවිධානය මේ සදහා මුල් වී ක්‍රියා කරනු ලබයි. මේ අවශ්‍යතා සදහා ඇති වුන පොදු සම්මත ලේඛණ භාෂාව තමයි HTML (Hyper Text Markup Language) ලෙස හඳුන් වන්නේ. තවත් වැදගත් දෙයක් තමයි මේ භාෂාව programming language එකක් නොව Markup language එකක් වීමය. මේ නිසා markup tags භාවිතා කොට මේ වෙබ් පිටු සකස් කරනු ලබයි.
එමගින් අපට අතිවන ගැටලු රාශියකට විසදුන් ලැබුනා
ඉතින් අපි දැන් බලමු මේ සදහා අපට අවශය මූලික දේවල් මොනවද කියල
HTML වලින් document එකක් නිර්මාණය කර ගැනීමේදී අපිට ප්‍රයෝජනයට ගන්න පුළුවන් මෘදුකාංග තිබුනත් මම මෙහිදී භාවිතා කරන්න හිතාගෙන ඉන්නේ Notepad එක පාවිච්චි කරල කරන ක්‍රමය. මොකද notepad එකේ code කිරීමේදී අතින් සෑම code එකක්ම ලියන්න සිදුවෙන නිසා tags පිළිබඳ ඔබේ දැනුම තවත් දියුනුවේවි එය කිසිදා Micromedia Dreamviewer වැනි මෘදුකාංග භාවිතයෙන් ලබා ගත හැකි නොවේ.
ඒක මතක තියාගෙන අපි ඉදිරියට යමු
- HTML tag එකක් හැදෙන්නේ Keyword එකක් <.....> මෙන්න මේ angle brackets වලින් වට උනාමයි. උ.දා - <html> .
- ඒ වගේම සාමාන්‍යෙයන් HTML tags තයෙන්නේ යුගල වශයෙන්. උ.දා - <html> සහ </html>
- <.......> මේ විදිහට තියෙන tag එකට අපි කියනව ආරම්භක tag එක (opening tag) කියල.
- </......> මේ විදිහට තියෙන tag එකට අපි කියනව අවසාන කිරීමේ tag එක (closing tag) කියල.
දැන් ඔයාලට හිතෙනව ඇති අපිට මොකටද මේ tags කියල?, අපි HTML වලින් යම් නිර්මාණයක් කිරීමේදී අපේ සෑම කොටසක්ම නිවැරදිව කියවන්නාගේ web browser එකට විස්තර කර දිය යුතුවේ. මෙන්න මේ භාරදූර කාර්යය තමයි tags වලින් අපි ඉෂ්ඨ කර ගන්නේ. (හැබැයි ඉතින් සෑම web browser එකක්ම බහුතරයක් tags එකම ආකාරයකට කියෙව්වත් සමහර tags එසේ නොවෙන්න පුළුවන්) මම හිතනව දැන් ඔයාලට tags ගැන පොඩි හෝ අවබෝධයක් ලැබුනා කියල.
HTML coding කරනකොට සාමාන්‍ය පිළිවෙල තමයි <opening tag> අන්තර්ගතය <closing tag> යන ආකාරයට ලිවීම. මේක වෙනස් වෙන අවස්තාත් නැතුවම නොවෙයි.
ඒත මේක තමයි සම්මත ක්‍රමය
අපි දැන් බලමු කෝඩ් ලියන හැටි
අපි මුලින්ම කරන්න ඕන මේ code එක ලියල තියෙන්නෙ HTML වලින් කියල browser එක දැනුවත් කිරීම එක කරන්නේ <html> කියන Tag එකෙන්. Tag එකක් open කලාම ඒක close කරන්නත් ඕන නේ ඒකට භාවිතා කරන්නේ </html> tag එක.
- අපි සාමාන්‍යෙයන් Tags ලියන්නේ simple letters වලින්. ඒක සම්මත ක්‍රමයක්. ඔබ capital letters භාවිතා කලා කියල වැරදි නැහැ.
- HTML වලින් අපි code කරන හැම දේම ලියන්න ඕන මම කලින් කියපු <html> සහ </html> tag දෙක අතරෙයි.
- අපි ප්‍රධාන වශයෙන් HTML වෙබ් පිටුවක් කොටස් දෙකකට බෙදා ගන්නව ඒ,
- Head කොටස සහ
- Body කොටස ලෙසයි
- Head එකට බොහෝ වෙලාවට අන්තර් ගත වෙන කොටස් වලින් අපිට පේන දෙයකට තියෙන්නේ title එක විතරයි. (පහත රූපයේ web page එකක Title එක කුමක් දැයි පෙන්වා තියෙනව) ඒකට භාවිතා කරන්නේ <title> හා </title> tag යුගලය. head කොටසේ භාවිතා වන අනෙකුත් tags ගැන අපි පසුවට දැන ගනිමු. (මම tabs තියල type කරල තියෙන්නේ code එක පැහැදිලි හා ලස්සන වෙන්න ඕන නිසයි මේ විදිහටම type කරන්න ඕන කියල නීතියක් නෑ)
 |
| Figure 3 |
- Body කොටසේ තමයි අපි වෙබ් පිටුවේ අන්තර්ගත වෙන්න අවශ්‍ය දේවල් code කරන්නේ.
 |
- මේ <p> tag යුගලයෙන් කියන්නේ එතන තියෙන්නේ paragraph එකක් කියලයි.
- දැන් අපි මේ code කර ගත්ත file එක save කරගන්න විදිහ බලමු. notepad එකේ file ----> Save ක්ලික් කරන්න එතකොට එන dialog box එක මෙන්න මේ වගෙයි.
 |
- ඒකේ save as type කියන property එක All files කියල වෙනස් කරන්න. දැන් file name කියන තැනට ඔයාල කැමති නමක් එකක් .html කියන extention එක දෙන්න හරියට මෙන්න මේ වගේ.
 |
| Figure 6 |
- දැන් ඔයාල save button එක click කරල file එක save කරගන්න.
- ඒ save කල file එක මෙන්න මේ වගේ දිස් වේවි ඔයාලට. (මම දුන්න නම My First Web Page)
 |
- දැන් ඒ file එක double click කරල open කරන්න කෝ. ඒතකොට මෙන්න මේ වගේ ඔයාලගේ web browser එකෙන් ඒක Open වේවි.
 |
ඔන්න මම දැන් මූලික කෝඩ් ගැන කියා දුන්න
තව පාඩම් ඉදිරියේදී බලාපොරෝත්තු වේන්න
