Welcome to the Web Dev 101 Course 📚

This Course is in Sinhala (සිංහල). If you are a non-native speaker, this tutorial isn't for you.

මේ course එක සම්පූර්ණයෙන්ම FREE, කවුරුහරි මේක ඔයාට විකුණුවා නම් අනිවාරෙන් සල්ලි ටික ආපහු ඉල්ලගන්න. මේ වගේ දේවල් වලට මං කිසි සේත් වගකියන්නෙ නෑ. මේ කෝස් එකේ කිසිම දෙයකට සල්ලි ඉල්ලන්නෙ නෑ. හැමදෙයක්ම 100% FREE. ඒ වගේම තමා කවුරුහරි විකුණනවා දැක්කොත් ඒ කෙනාව හැකිතාක් විවේචනය කරන්න කියලා මං ඔයාගෙන් ඉල්ලනවා.

Watch the Related Video 👇

Complete YouTube Playlist for this Course

Hello 👋

ආයුබෝවන් කියල පිලිගන්නවා මේ කෝස් එකට. මේ කෝස් එකේදි අපි මුල සිට අගට, HTML, CSS, JS වලින් websites හදන හැටි කියල දෙනවා. මේ course එකෙන් පස්සෙ ඔයාට කිසි ගැටලුවක් නැතිව websites හදන්න පුලුවන් Confident Web Developer කෙනෙක් වෙන්න පුලුවන් වෙයි.

මේ course එක තියරි වලට බර නොදී practically අත්‍යවශ්‍ය වන දේවල් වලටයි focus එක දෙන්නෙ. ඒක නිසා කම්මැළි හිතෙන්නෙ නැතිව ඔයාට ලේසියෙන්ම videos දෙක තුනක් බලලා website එකක් හදන්න පටන් ගන්න වුනත් පුලුවන් වේවි.

මේ course එක videos විදිහට තමා මූලිකව run වෙන්නෙ. හැබැයි ඒකත් එක්ක යාබදව මේ e-book එකත් යනවා. මේකෙ හැම video එකටම අදාල අමතර කරුණු වැඩිදුර අධ්‍යන කටයුතු කරන්න අවශ්‍ය resources වගේම ඒ පාඩමට අවශ්‍ය exercises & questions අන්තර්ගත වෙනවා. මේ සියල්ල හැම video එකටම අදාලව හරියට කරොත් තමා ඔයාට හරියටම මේ වැඩේ සාර්ථක කරගන්න පුලුවන් වෙන්නේ.

Malindu Bandara

Founder of sciber.dev

Hi, I'm Malindu Bandara, the creator of the WebDev101 course. I'm passionate about making education accessible to everyone, and I want to make this course the best course for you to learn web development. My course is free, and I'm confident that it will surpass even the paid courses on the island. I'm a designer, coder, and math enthusiast, and I'm the founder of Sciber. I have over 1 million views on YouTube and a fast-growing TikTok following, which proves that I have the skills and experience to teach you web development. I hope you get the best out of this course. I've put a lot of hard work into it, and I'm confident that you'll learn a lot.

එහෙනම් අපි ඊලඟ section එකට ගිහින් බලමු තව මොනවද මේ Introduction Chapter එකෙදි දැනගන්න ඕනෙ කියලා.

How to use this book 📚

මේ E-book එකේ navigate කරන්න විදි කීපයක් තියනවා.

වම් පැත්තේ තියන sidebar එකේ chapters ඔක්කොගෙම list එකක් තියනව. මේ chapters උඩ click කරල අදාල page එකට යන්න පුලුවන්.

Window එක ගොඩක් පොඩි නම් මේ sidebar එක පේන එකක් නෑ. එතකොට උඩ තියන menu icon එක click කරන්න (ඉරි කෑලි තුනක් තියෙන්නේ. එතකොට sidebar එක open & close කරන්න පුලුවන්).

Page එකෙ දෙපැත්තේ (mobile නම් යටම) තියෙන arrow buttons click කරල previous page එකටයි next page එකටයි යන්න පුලුවන්. මේ ක්‍රමේ තමා හොදම ඔයා step by step මෙ tutorial එක හරියට ඉගෙන ගන්නව නම්. ඔයා පස්සෙ දවසක මේ tutorial එකෙ තිබ්බ දෙයක් හොයන්න එනව වගේ නම් sidebar එක use කරන්න. Arrow buttons ඔබනවා වෙනුවට keyboard එකෙ left & right keys එබුවත් හරි.

උඩ තියන menu bar එකෙන් ඔයට e-book එකත් එක්ක interact කරන්න settings කීපයක් සපයල දීල තියනවා.

Icon Description Sidebar එක open & close කරන්න Theme එක වෙනස් කරන්න පොතේ ඕන දෙයක් search කරල හොයාගන්න E-book එක ප්‍රින්ට් කරන්න Menu bar එක උඩ tap කරොත් page එකේ මුලට scroll ව‌ෙයි.

Search 🔍

මේ E-book එකේ පට්ට සුපිරි search system එකක් තියන්වා. "" icon එක click කරලා හරි keyboard එකෙ s අකුර ඔබල හරි මේ search function එක ගන්න පුලුවන්. ඒ එන textbox එකට අවශ්‍ය search term එක type කරද්දි realtime (එවෙලෙම) results බලාගන්න පුලුවන්. එතනින් අවශ්‍ය result එක click කරලා අදාල page එකට යන්නත් පුලුවන්. Esc key එක ඔබලා ඔයාට search එකෙන් අයින් වෙන්නත් පුලුවන්.

Code blocks 👨‍💻

මේ E-book එකේ code-snippets බලාගන්න පුලුවන් වේවී. මේවා මොනවද කියල හරියටම තේරුන් ගන්න පුලුවන් වේවි ඉස්සරහට. සරලවම මේවා type කරලා තමා අපි website එකක් හදන්නෙ. ඉතින් මේව copy කරන්න පහසු වෙන්න තමා අපි ලස්සනට format කරලා දාල තියෙන්නේ.

Example එකක් විදිහට ඔය පහලින් තියෙන්නෙ code-snippet එකක්.

<h1>Hello World</h1>

මේ කෝඩ් එක copy කරගන්න "" icon එක ඔබන්න, එතකොට මුලු code එකම copy වෙනව. ඊට පස්සෙ අදාල තැනින් paste කරගන්න.

ඔය ටික තමා E-book එක use කරන්න දැනගෙන ඉන්න ඕනෙ. use කරද්දි ගොඩක් දේවල් තෙරෙයි ඔයාට. මේක එච්චර අමාරු දෙයක් නෙමේ. ඒත් හැමෝටම වැඩේ හරියටම මුල ඉදල ගොඩ දාගන්න ඕනෙ නිසා තමා මේ හැම දේම කියලා දෙන්නේ.

ඊලඟ section එකෙන් හම්බෙමු.

How to use Videos 📺

Course එකම run වෙන්නේ videos විදිහට ✅

මේ videos වල මං ගොඩක් පැහදිලිව හැම දේම කියලා දෙනවා. හැබැයි එක දෙයක් පැහැදිලිව තේරුන් ගන්න ඕනේ. අපි අද ඉදන් developers ලා. අපිට හැම දේම කවුරුවත් කියලා දෙන්නෙ නෑ සහ එහෙම කියලා දෙන්න අමාරුයි. ඉතින් ඒක නිසා සමහර දේවල් මං මග අරිනව හිතුමතාම. මේ මග අරින්නෙ අත්‍යවශ්‍ය දේවල් නෙමේ, ඔයාට කලාතුරකින් අවශ්‍ය වෙන දේවල්. උදාහරණයක් විදිහට මං HTML Table එකක් හදන හැටි කියල දෙන්නෙ නෑ. හේතුව, එහෙම දෙයක් ඕනෙ වෙන්නේ ගොඩාක් කලාතුරකින්. හැබැයි O/Level අච්චු පොතක් අරන් බැලුවොත් පෙනෙයි ඒකෙ ඕක ගැනත් කොටසක් තියනවා කියලා සහ ඒක ගැන විභාගෙට අහනවා.

ඒක නිසා හොදට තේරුන් ගන්න, දැනගෙන ඉන්න ඕනෙ දෙවල් සහ අවශ්‍ය වෙලාවට Google කරල හොයාගන්න ඕනෙ දෙවල් තියනවා. මං ඔයාට පල්වෙනි ජාතිය කියලා දෙනවා. ඔයා දෙවනි ජාතිය හොයාගන්න. මේ course එකේ සෑහෙන්න දුරක් යනකන් ඔයාට දෙවනි ජාතිය ඕනේ වෙන්නෙ නෑ. හැබැයි බය වෙන්නත් එපා. ඒ දෙවනි ජාතිය හොයාගන්න විදිහ පවා මං ලස්සනට කියලා දෙන්නම්.

How to get the best out of this course😎

Start here 📺

ඉතින් මෙහෙමයි, ඔයා මුලින්ම මෙතනට නම් ආවෙ (E-book එකට) ඔයා මේ link එකෙන් මගේ YouTube playlist එකට යන්න. එතනින් පටන් අරගන්න. ඊට පස්සෙ එක තැනකදි මං මේ E-book එකට එන්න කියනවා, ඔයා මෙච්චර වෙලා කියවපු දේවලුත් කියනවා. අන්න එතන ඉදන් මං කියන පිලිවෙලට වැඩේ කරන්න තමා තියෙන්නේ.

Best way to learn ✅

සරලවම, පාඩම් ටික පටන් ගත්තම, පාඩම බැලුවා, video description එකේ තියෙන link එකෙන් මේ E-book එකේ video එකට අදාල page එකට ආවා, වැඩිදුර කියවන්න තියන දේවල් කියෙව්වා, exercises තිබ්බොත් ඒවා try කරනවා. Exercises තියනවද කියන එක මං video එකේදිත් කියනවා. කෝම හරි ඔය වැඩ ටික කරාම තමා ඒ video එකට අදාල වැඩ කොටස අවසන් වෙන්නේ. ඔය විදිහට කරන් ගියොත් මේ course එකෙන් අනිවාරෙන් ඔයට හිතගන්න බැරි results ලබාගන්න පුලුවන් වෙනවා.

Useful to know 👀

තව දෙයක් ඔයා දකින්න ඇති. Wikipedia වල වගේ මේකෙත් මන් ලස්සනට ඔයාට දැනගන්න අවශ්‍ය වෙයි කියල හිතෙන දේවල් වලට links දාල තියෙනවා. උදාහරනෙකට ඔයාට මේ page එකේ පේනවා ඇති මං YouTube playlist එකට link කරලා තියනවා පාඩම අස්සේ. අන්න ඒ විදිහට දාල තියෙන ඒවා click කරලා ඔයාට ඒ කියන කතාවට අදාල page එකට යන්න පුලුවන්. නමුත් ඒවා click කරන්න ඕනෙම නෑ. පාඩම් ටික ලස්සනට structure කරලයි තියෙන්නේ. ඒක නිසා නිකන් කියවන් යන්න, මන් අනිවාරෙන් click කරන්න කියන link එකක් තිබුනොත් ඇර. ඔයාට කොටසක් අමතක වෙලා හරි වැඩි දුර තේරුන් ගන්න හරි වගේ ඕන උනොත් ඒ අදාල link එක click කරන්න.

මේ course එක work in progress එකක්. මේක මන් videos release කරන ගමන් තමා හදන්නෙ. ඔක්කොම එක සැරේ දාන්නෙ නෑ. ඒක නිසා දැන්ම බලන්න ගත්තොත් ඔයාට තියෙන ප්‍රශ්නත් ඉදිරියෙට එන videos වල ඇතුලත් කරල උත්තර දෙන්න පුලුවන්.

Join the Telegram Group 💬

අපේ Telegram Group join ව‌ෙලා ඔයාට තියෙන ප්‍රශ්න විසඳගන්න වගේම Web Development ගැන අමතර දැනුම බෙදාගන්නත් හැකියාව තියනවා. මෙතනින් join වෙන්න: Telegram Group

Thank you 🤗

ඉතින් මේ course එක සෑහෙන්න මහන්සි වෙලා තමා හදන්නේ. ඒ වෙනුවෙන් ඔයා පුන්චි හරි උදව්වක් කරයි කියලා හිතනවා. ඔයාට පුලුවන් කිසිම මුදලක් වැය වෙන්නෙ නැති වැඩක් කරන්න. ඒ තමයි YouTube Channel එකට subscribe කරලා බලන videos like කරල comment කරලා යාලුවන්ටත් බලන්න share කරන්න. එහෙම උනොත් මට දිගටම videos දන්න ලොකු motivation එකක් වේවි.

එහෙනම් කෝම හරි වැඩේ ගොඩ දාගමු.

Exercises

Do your homework 📰

ගොඩක් දුරට හැම video එකේදිම මං ඔයාලට homework දෙනවා. ඒවා කලින් කීවා වගේ ඒ video එකේ description එකේ තියන link එකෙන් ඇවිල්ලා හම්බෙන dedicated page එකෙන් බලාගන්න පුලුවන් වෙයි. මේ exercise මහා ලොකූ දේවල් නෙමේ. මේවා හදල තියෙන්නෙ එදා ඉගෙන ගත්තු පාඩමෙ දැනගෙන ඉන්න ඕනේ දේවල් ටික තේරුන් කරවන්න. පාඩමේදී නොයෙක් දේවල් කියලා දෙයි. ඒත් අන්තිමට මතක තියාගන්න ඕනේ වෙන්නේ බොහොම සුලු ප්‍රමානයක්. අන්න ඒ මොනවද කියන එක හරියටම තේරුන් ගන්න තමා මේ exercise දෙන්නෙ. එතකොට ඔයාටම තේරුන් ගන්න පුලුවන් මොනවද ඇත්තටම වැදගත් කියලා.

Don't be stubborn 🙅‍♂️

හැබැයි ඔන්න කම්මැලි කමට අපෝ මට පාඩම තේරුනා මේවනම් ez, මේවනම් nothin කියලා හිතලා exercise නොකර ඉදියොත් නම් අනිවාරෙන් ලොකු ගැටලු ගොඩකට ඉදිරියේදී මුහුණ දෙන්න වෙනවා. ඉස්සෙල්ලාම ආකල්පය වෙනස් කරගන්න. ඔයා පොඩි කාලේ ඉස්කෝලෙ වැඩ කරපු විදිහට මේ වැඩේ කරන්න බෑ. මේක දිග ගමනක්. දිග ගමනක් එක දිගට යන්න නම් එක pace එකක් තියාගන්න ඕනෙ. සරලවම මේක මැරතොන් එකක්. ඉතින් ඒක නිසා ඒක යන්න විදිහක් තියනවා. ඒ විදිහ මං ඔයාට පැහදිලිව කියලා දෙනවා, ඔයා ඒක පිලිපදින්න. එතකොට හරි.

මේ page එක හැදුවෙත් exercise දුන්නට කරන්නෙ නෑ කියලා හොදටම දන්න නිසයි. මෙච්චර හැම දේම දීලත් ඔයාට ඒක කරලා වැඩේ ගොඩ දාගන්න හිතෙන්නෙ නැත්තන් පව තමා ඉතින්. 👎

ඒක නිසා අපි homework ටිකත් කරලා වැඩේ කෝම හරි ගොඩ දාගමු.

What are we doing?

Web Development ඉගෙන ගන්නවා කීවට ගොඩක් අය මේ මොකද්ද කරන්න යන්නෙ කියලවත් දන්නෙ නැති වෙන්න පුලුවන්. ඒ අයට තමා මේ පාඩම. 💡

ඔයා මේ article එක කියවන්නේ ඔයාගෙ phone එකෙන් හරි computer එකෙන් හරි Web Browser එකක් open කරගෙන ඒකෙන් යම් කිසි address එක්කට ගිහින් load වෙච්ච web page එකකින්.

Web Browser කියන්නෙ internet එක access කරන්න තියන උපකරනය. Internet එක හැදිල තියෙන්නෙ Websites වලින්. Websites වල තියෙනව Web pages. සමහර Websites, Web Apps කියලත් හදුන්වනවා. මේකට හේතුව phone එකෙ තියෙන apps වගෙ මේවත් Web එකෙ තියෙන apps. Mobile apps වෙනුවට Web Apps.

එතකොට ඔන්න ඔය Web pages, Websites, Web Apps වගේ දේවල් හදන එක තමා Web Development කියන්නෙ. Develop කියන්නෙ වර්ධනය කියන එක නේ. ඉතින් අපි programming වලදි දෙයක් හදනවට develop කියන වචනේ භාවිතා කරනවා.

ඉතින් මේ web development කියන්නෙ ගොඩක් ලොකු field එකක්. Jobs ගොඩක් තියෙන, ඉගෙන ගන්න ගොඩක් දේවල් තියෙන, ගොඩක් ලොකු ලොකු දේවල් කරන්න පුලුවන්, ගොඩක් ප්‍රයෝජන ගන්න පුලුවන් ෆීල්ඩ් එකක්.

අපි Web Dev ඉගෙන ගත්තොත් අපිට Websites, Web Apps වගේම Mobile Apps, Desktop Apps පවා හදන්න පුලුවන් වෙනවා. ඒවා කරන හැටි අපි අනාගතේදී කතා කරමු.

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

ඉතින් මේ කියන Websites හදන්න එහෙමත් නැත්තන් Web Development වලදි file එකක් ඇතුලෙ වචන ලියන්න ඕනෙ. මේකට කියන්නෙ programming කියලා. මේ ලියන්නෙ හිතට එන වචන නෙමේ. ඒවා ලියන්න නිශ්චිත ක්‍රමයක් තියනවා. ව්‍යාකරණ නීති තියනවා. ඒ විදිහට ඒවා ලීවොත් තමා හරියට website එකක් හැදෙන්නේ. ඒ කියන්නෙ මේ වැඩේට වෙනම භාශාවක් තියනවා. language එකක් තියනවා. මේවට අපි කියන්නෙ programming languages කියලා. ඉතින් programming languages වලින් program කරලා තමා අපි websites, apps, softwares හදන්නේ.

Websites හදද්දි අපි ප්‍රධාන වශයෙන් languages 3ක් use කරනවා. HTML, CSS, Javascript කියන්නේ ඒ 3. මෙතනින් එකයි programming languages ගනයට අයත් වෙන්නෙ. තව එකක් තවත් ගනයකට, අනික් එක තවත් ගනයකට. මේ ඔක්කොම මෙතන කියන්න ගියොත් ඔයාගෙ ඔලුව විකාර වෙයි. ඒක නිසා අපි HTML Introduction, CSS Introduction, Javascript Introduction කියන පාඩම් වලදි ඒ ගැන කතා කරමු.

ඒ වගේම තමා ගොඩක් අය මං මේ පාඩමේදී programming languages කියන වචන දෙක භාවිතා කරා කියලත් කෑ ගහයි. ඒක සුපුරුදු පරිදි internet එකෙ controversial topic එකක්. ඔයාට ටික දවසක් ගියාම තේරෙයි ඇයි මන් මෙහෙම කියන්නේ කියලා.

ඒක වැඩක් නෑ.

කෝම හරි ඔයා මෙච්චරයි දැනගන්න ඕනේ ✅

Websites හදන්න තමා අපි මේ ලෑස්ති වෙන්නේ. ඒක තමා මේ journey එකේ පලවෙනි පියවර. ඊට පස්සෙ අපිට Web Apps හදන්න පුලුවන්, ඊටත් පස්සෙ Mobile Apps, Desktop Apps හදන්නත් පුලුවන් වේවි. ඉතින් ඔන්න ඔය හැමදේම කරන්න අපි file එකක් ඇතුලේ codes ලියන්න ඕනෙ. මේ වැඩේට programming කියනවට වඩා coding කීවනම් ගොඩාක් උචිතයි. දන් ඔන්න ඔහොම ලියපු files කිපයක් එකට එකතු කරගෙන අපිට පුලුවන් සම්පුර්ණ website එකක් හදාගන්න. ඔය website එක දැනට අපේ computer එකේ තියෙන්නේ. ඕක internet එකට යවන එක වෙනම වැඩක්. ඒකට තමා servers ඕනේ. ඒව දැන්ම දැනගන්න අවශ්‍යතාවක් නෑ.

ඉතින් අපි ඊළඟ පාඩමෙන් බලමු කෝමද අපි මේ වැඩේ කරන්න ලෑස්ති වෙන්නෙ කියලා. ඒ කියන්නෙ අර file එකක් අතුලෙ code ලියන්නෙ කෝමද කියන එක.

දැනට මේ ටික දැනගත්තම හොදටම ඇති. අර උඩ කියපු දේවල් අමතක කරල අවසාන title එක යටතේ ටික ඔලුවට දාගන්න.

ඊලඟ lesson එකෙන් හම්බෙමු.

Installing a Code Editor

What is a Code Editor 🤔

ඔයා දන්නවා ඇති නේ අපිට ලියුමක් ලියන්න ඕනේ නම් අපි ගොඩක් දුරට Microsoft Word use කරනවා නේ. අන්න ඒ වගේ code ලියන්න තියන software වලට තමා Code Editors කියන්නේ. ලියුම් ලියද්දි නම් අපිට සමහර දේවල් bold කරන්න underline කරන්න වෙනවා, ඒක නිසා අපිට නිකන් Notepad app එකෙන් ලියුමක් ලියන්න අමාරුයි. හැබැයි coding වලදි නම් ඇත්තටම notepad එකෙන් උනත් code ලියන්න පුලුවන්. මේකට හේතුව coding වලදි අපි වචන ලියනවා විතරයි. කිසිම විදිහේ bold හෝ underline කිරීමක් කරන්නෙ නෑ. හැබැයි notepad එකෙන් code ලියන්න අමාරුයි. මේකට හේතුව code ලියද්දි code editor එකක් use කරොත් ඒකෙන් අපිට coding වලටම හදපු features ටිකක් ලැබෙනවා. අපේ code එකේ විශේෂ වචන පාට කරල පෙන්නනවා (syntax highlighting). අපේ code එක autocomplete කරනවා. අපේ code එකේ වැරදි හරි ගස්සනවා. මේ නිසා තමයි අපි අලුතෙන් software එකක් install කරගන්න යන්නෙ, code ලියන්නම කියලා. මේ series එකේ ඉස්සරහට යද්දි ඔයාට තේරෙයි මේ code editors කොච්චර powerful ද කියලා. කෝමහරි අද අපි බලමු කෝමද code editor එක install කරන්නේ කියලා.

Let's Install VSCode 👨‍💻

VSCode කියන්නේ ලෝකේ තියෙන ගොඩක්ම ජනප්‍රිය code editor එකක්. මේක තම industry එකේ වැඩිපුරම use කරන්නේ. ඉතින් අපිත් ඒක තමා use කරන්නෙ. ඇයි එක use කරන්නෙ කියලා මන් දැන් කියන්න යන්නෙ නෑ. ඔයාට අනගතේදී තේරුන් යයි මේක කොච්චර හොඳද කියන එක.

මේක install කරන්න මුලින්ම මේ link එකට යන්න, නැත්තන් Google කරලත් ගන්න පුලුවන්.

Download VSCode

මෙතනින් ඔයාගේ OS (Windows/MacOS/Linux) එක තෝරගෙන Stable Version එක Download කරගන්න.

Choose your OS

Installer එක Open කරන්න

Open VSCode Installer

License එක accept කරලා Next ඔබන්න

මේ ඔක්කොම check කරලා Next දෙන්න

Install දෙන්න

Installing VSCode

Finish දෙන්න

Click Finish

හරි දැන් install කරලා ඉවරයි. දැන් VSCode open වෙයි.

A journey through VSCode 🚗

ඔයා VSCode open කරාම මේ වගේ ප‌ෙනෙයි.

VSCode Welcome Page

Welcome Page එක close කරන්න.

Close the welcome page

දැන් Ctrl+N ඔබන්න. එතකොට අලුත් file එකක් හැදෙනවා. මේ file එකේ අපිට codes ලියන්න පුලුවන්.

Create new File

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

Select a language කියන එක click කරන්න.

Select a language

එතකොට එන එකේ html කියලා type කරලා Enter ඔබන්න.

Select HTML

ම‌ෙන්න මේ code එක copy කරලා paste කරන්න 👇

<html>
    <head>
        <title>Test Website</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
    </body>
</html>

Ctrl+S ඔබලා save කරන්න.

Desktop එකේ test.html වගේ save කරන්න දැනට.

Save File

දැන් Desktop එකේ තියෙන ඒ file එක double click කරලා open කරගන්න.

Open the file

දැන් ම‌ෙහෙම ආවොත් වැඩේ හරි.

Test Website - Hello World on Browser

එහෙම ආවේ නැත්තන් YouTube එකේ comment එකක් හරි Telegram Group එකේ දාන්න Screenshots එක්ක. වැඩේ ගොඩදාගමු කෝමහරි.

දැන් හරි ✅

දැන් අපි Code Editor එකක් install කරගත්තා. අපි ඉස්සරහට බලමු කොහොමද මේකෙන් හරියටම website හදන්නේ කියලා. Programming හැමදේම තිතට විස්තර කරල දෙන්නම්. අද නම් මොකුත් homework නෑ, ආයේ software එක install කරගන්න තමා වෙන්නේ homework විදිහට 😂. අද කරපු දේවල් ගොඩක්ම සරල දේවල්. Software එකක් install කරගන්න දන්නෙ නැති අය ඉන්න පුලුවන්. ඒ අයටත් එක්ක තමා අද පාඩම කරේ. ඉතින් මේ වගේ දේවල් මන් ආයේ කියලා දෙන්නෙ නෑ. මේ දේවල් developer කෙනෙක් හැටියට පුලුවන් වෙන්න ඕනේ. පොඩ්ඩක් computer එක එහෙම use කරලා මේ වගේ දේවල් පුරුදු වෙන්න. එතකොට මේ ගමන යන එක ගොඩක් ලේසී.

ඊලඟ පාඩමෙන් හම්බෙමු.

Web Development Basics

What is HTML? 📄

HTML = Hyper-Text Markup Language

What is CSS? 🎨

CSS = Cascading-Stylesheets

What is JS? 🏃‍♂️

JS = Javascript

හරි ඒනම් දැන් තේරුනා නේද? 😏

නෑ නෑ, එහෙම බෑ 🙃

ඔන්න අහගන්න.

Website එකක් ගොඩක් වෙලාවට කොටස් 3කට කඩන්න පුලුවන්.

Website එකේ ව්‍යුහය
Website එකේ පෙනුම
Website එකේ ක්‍රියාකාරීත්වය

ඔව්. ඔය 3 තමා website එක්ක තියෙන්නේ. ඔය තුන සපුරන්න තමා කලින් දවසෙ කියපු languages 3 තියෙන්නේ.

HTML = ව්‍යුහය (structure)
CSS = පෙනුම (appearance)
JS = ක්‍රියාකාරිත්වය (functionality)

ඒ තරම් සරලයි මේ කතාව.

මොනවද මේ ව්‍යුහය, පෙනුම, ක්‍රියාකරීත්වය කියන්නෙ? 🦴

මුලින්ම ඔයාව හිතේ මවාගන්න. ඇස් පියාගන්න ඕනේ නම් එහෙම. දැන් ඔයාගෙ මස් එහෙම අයින් කරලා ඇට සැකිල්ල මවාගන්න. ඔන්න ඕක නේද ඔයාගෙ ව්‍යුහය කියන්නේ. ඔව් ව්‍යුහය කියන්නෙ සැකිල්ලට. අන්න හරි, ඕක තමා HTML කියන්නේ.

දැන් ආපහු අර මස් අරව මෙව්ව දාලා ලස්සන කරල ගන්නකො සැකිල්ල. අන්න හරි. ඕක තමා CSS වලින් කරන්නේ.

ඔයාට කරන්න පුලුවන් දේවල් මොනවද? දුවන්න, කන්න බොන්න, ඉගෙන ගන්න, ලියන්න. මේවා තමා ඔයාගේ functionalities එහෙමත් නැත්තන් ඔයාට කරන්න පුලුවන් ක්‍රියාකාරකම්. අන්න ඒ වගේ තමා JS.

HTML වලින් website එකේ සැකිල්ල හදලා දෙනවා. website එකේ අන්තර්ගත වෙන්න ඕනේ දත්ත හා තොරතුරු මොනවද කියන එක තමා මේකෙන් කියන්නේ. ඔයාට මොකක් හරි වචනයක්, රූපයක් website එකේ පෙන්නන්න ඕනේ නම් අන්න ඒක HTML වලින් තමා ලියලා පෙන්නන්නේ.

උදාහරණයක් විදිහට, අපිට website එකේ පින්තූරයක් පෙන්නන්න ඕනේ නම් අපි ඒක කරන්නෙ මෙහෙම 👇

<img src="dog.jpg">

මේකේ img කියන්නෙ image එකක් දාන්න කියන එක. image එක කොහෙද තියෙන්නෙ කියන එක තමා src="dog.jpg" කියන එකෙන් කියන්නේ. පේනවනේ හරිම සරලයි. මේ අනික් සංකේත ටික දැනට අමතක කරල normal විදිහට කියවන්න උත්සහ කරන්න. එහෙම තමා programmers ලා codes කියවන්නෙත්.

මේ code එකෙ result එක ඔන්න තියනවා 👇

Dog

දැන් ඔය රූපේ මට ලොකු කරන්න, කළු සුදු කරන්න, වටේ outline එකක් දාන්න, රවුමක් කරන්න වගේ දේවල් කරනවා නම් ඒක කරන්නෙ CSS වලින්. මොකද මේ හැමදේම රූපේ පෙනුම සම්බන්ධ දේවල්.

ඔන්න මන් රූපේ පෙනුම වෙනස් කරල තියනවා එක එක දේවල් කරලා 👇

width:300px;

(Original පින්තූරෙ 128px)

filter:grayscale(100%);

border:solid 10px red;

border-radius:50%;

filter:blur(5px);

දැන් පේනවා නේ CSS කොච්චර සුපිරි ද කියලා.

දැන් ඔය රූපේ click කරාම බුරන සද්දයක් දාන්න, නැත්තන් ගෙදරටම බල්ලෙක් deliver වෙන්න වගේ හදන්න ඕනේ නම් ඒ වගේ දේවල් කරන්නෙ JS වලින්. මොකද ඒවා website එකේ ක්‍රියාකාරකම්.

මේ බල්ලව click කරලා බලන්නකෝ බුරයිද කියලා 👇

ඔන්න තියනවා බුරන්න use කරපු code එක 👇

const audio = new Audio("bark.mp3");

const image = document.querySelector(".bark");
image.addEventListener("click", () => {
  audio.play();
});

ආයෙත් කියනවා, මේ කෝඩ් එක අකුරෙන් අකුර තේරුන් ගන්න යන්න එපා, එහෙම කරන්න ඔයාට දැන්ම බෑ. මට කියන්න තියෙන්නේ **JUST FEEL IT **කියලා. අපි උඩින් පල්ලෙන් මේක තේරුන් ගත්තොත්, අපි bark.mp3 කියලා file එකක් code එකට ගෙනල්ලා ඒකට audio කියලා නම දෙනවා. ඊට පස්සෙ අපි document එකෙන් අර පින්තූරෙ හොයාගෙන ඒක උඩ click කරාම අර audio එක play කරන්න කියනවා. සරලයි. අනික් විකාර symbols අමතක කරලා දාන්න. මේ හැමදේම හොදට ගැඹුරට කියලා දෙන්නම් ඉස්සරහට.

ඉතින් දැන් ඔයාට තේරෙනවා ඇති මොකද්ද ව්‍යුහය, පෙනුම සහ ක්‍රියාකාරිත්වය කියන්නේ කියලා.

HTML + CSS + JS = Website 🎉

ඉතින් ඔය කියපු ජාති 3 එකතු උනාම තමා website එකක් හැදෙන්නේ. ඇත්තම කීවොත් ඉතිම් website එක්කට JS අත්‍යවශ්‍ය නෑ. මොකද සමහර websites තියෙනවා නිකන්ම විස්තර ටිකක් පෙන්නන්න විතරක්ම හදපු. ඒ වගේ එකක් තමා මේ තියෙන්නේ (මට හොඳ උදාහරණයක් හොයාගන්න බැරි උනා, ඒක නිසා මන් ටක්ගාල එකක් හදලා දැම්මා 😂). එක අතකින් බැලුවම මේක website එක්කට වඩා flyer එකක්, leaflet එකක් වගේ තමා.

කොහොම හරි දැන් නම් ඔයාට ලොකු අවබෝධයක් ඇති කොහොමද මේ websites හැදෙන්නේ කියලා. අපි ඊලඟ පාඩමෙන් HTML ඉගෙන ගන්න පටන්ගමු. දැනට මේ කියපු දේවල් හොඳට දෙතුන් වතාවක් කියවලා හරි තේරුන් ගන්න.

අදත් Homework නෑ. පොඩ්ඩක් computer එක use කරන්න, websites වලට ගියාම ඒවා දිහා වෙනස් කෝණයකින් බලන්න. Website එක හැදෙන්න ඇත්තේ කොහොමද කියලා තේරුන් ගන්න බලන්න. YouTube එකේ video එකක් බලනකොට ඔයාට දකින්න අත්විදින්න ලැබෙන දේවල් HTML, CSS, JS මොන ගණයටද අයත් වෙන්නේ කියලා කල්පනා කරලා බලන්න. ඔයාට මෙච්චර කල් නොපෙනුනු ලස්සන දේවල් පෙනෙයි.

ඊළඟ පාඩමෙන් හම්බෙමු.

HTML Basics

Watch the Related Video 👇 HTML Basics

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

මං කලින් කියලා තියනවා website එකක් හැදෙන්නෙ HTML, CSS, JS තුන එකතු වුනාම කියලා. ඉතින් HTML වලින් අපේ website එකේ structure එක තමා හදලා දෙන්නේ. දැන් අපි බලන්න යන්නේ කොහොමද මේ structure එක හදල දෙන්නේ කියන එක.

මුලින්ම ඔයා VSCode open කරගන්න ඕනෙ. ඒකට startmenu එකට ගිහින් VSCode කියලා search කරන්න.

Open VSCode

නැත්තන් desktop shortcut එකෙනුත් පුලුවන්.

කෝම හරි VSCode open කරගන්න.

මේ Welcome page එක close කරගන්න.

Close the welcome page

දැන් Ctrl+N ඔබලා අලුත් file එකක් ගන්න.

Create New File

දැන් මේ file එකේ language එක HTML කියලා තෝරන්න.

Choose HTML as language

දැන් මේ file එකේ Hello World කියලා type කරන්න.

Type Hello World

දැන් Ctrl+S ඔබලා save කරන්න. File එකේ නම විදිහට mywebsite.html කියලා දෙන්න. දැනට අපි මේක desktop එකේ save කරමු. එහෙම නැත්තන් ඔයාට ලෙසියෙන් හොයාගන්න පුලුවන් තැනක save කරගන්න.

Save File

දැන් ඒ save කරපු file එක හොයාගෙන, Right Click කරලා Open With එකට ගිහින් ඔයාගේ Web Browser එක තෝරන්න. මන් recommend කරනවා Google Chrome use කරන්න කියලා. එතකොට මං කරන දේවල්ම ඔයාටත් බලාගෙන කරන්න පුලුවන්. ටිකක් experience ආවම ඔයාට ඕනම දෙයක් ඕනම browser එක්කින් කරන්න පුලුවන් වෙයි. නමුත් දැනට හොඳම දේ මං කරන විදිහට කරන එක.

Open Saved file using google chrome browser

දැන් ඔයාට web browser එකෙන් පේනවා ඇති Hello World කියලා. හරි ඔන්න තියනවා ඔයාගෙ website එක.

Browser Output

ඔව්. ඔහොමත් පුලුවන් website එක හදන්න. හරියට ඔයා නිකන් MS Word open කරගෙන ලියාගෙන ලියාගෙන යනවා වගේ මේකෙත් ලියාගෙන ලියාගෙන යන්න පුලුවන්. ඒත් කිසිම දෙයක් ඔයාට ඕනෙ විදිහට පාට කරන්න හැඩ වැඩ දාන්න නම් වෙන්නෙ නෑ. මොකද මෙහෙම හැදුවොත් අපිට ඒ වගෙ දේවල් browser එකට කියන්න විදිහක් නෑ. අපිට browser එක එක්ක හරියට communicate කරන්න අවශ්‍ය නම් browser එක කතා කරන්න කැමති විදිහට අපිත් කතා කරන්න ඕනේ.

ඔයාට මතකද දන්නේ නෑ අපි මුලම දවසකදී ලීවා මෙන්න මේ වගේ code එකක්. ඕනේ නම් මෙතනින් බලන්න අපි කවද්ද ඒක ලීවෙ කියලා.

<html>
    <head>
        <title>Test Website</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
    </body>
</html>

එදා මන් කීවා මං මේක පස්සෙ දවසක විස්තර කරන්නම්, දැනට අපි මේක copy paste කරලා ඔක්කොම හරියට වැඩද බලමු කියලා. ඔන්න දැන් මන් මේක විස්තර කරන්නයි යන්නේ.

මේ code එක දිහා බැලුවම අපිට ඇත්තටම වචන ටික කියවලා idea එකක් ගන්න පුලුවන් මොනවද මේ කියන්නේ කියලා. පොඩ්ඩක් try එකක් දීල බලන්න. ඔන්න මන් කියන්නයි යන්නේ.

මේ code එකේ පැහැදිලිවම එක රටාවක් බලාගන්න පුලුවන්. ඒ තමයි අපිට පේනවා එකම වචනේ දෙපාරක් ලියල තියනවා තැන් දෙකකදී. ඒ වගේම තමා ඒ වචන දෙක එක කෙලින් align වෙලා තියනවා. මේ විදිහට එකම වචනෙ තියෙන හැම තැනකදිම අපිට පේනවා ඒවා align වෙලා තියනවා. පොඩි වෙනසකට තියෙන්නෙ ඒ වචනෙ ගාව තියන සංකේත පොඩ්ඩක් වෙනස් වෙලා තියනවා. මොකද්ද මන් මේ කියන්න හදන්නේ.

HTML වලදී අපි ලියන්නෙ browser එක කරන්න ඕනේ දේවල්. ඒ කියන්නෙ අපි browser එකට කියනවා "image" එකක් දාන්න, "heading" එකක් දාන්න කියලා. ඒවා browser එකට කියන්න HTML හදපු කට්ටිය අපිට හඳුන්වලා දුන්නා HTML tags. ඔන්න තියනවා HTML tag එකක්. අපි ඒක ආස්‍රයෙන් බලමු මොකද්ද HTML tag එකක් කියන්නෙ කියලා.

<h1>Hello World</h1>

මේකෙන් අපි web browser එකට කියනවා, Hello World කියලා "heading" එකක් දන්න කියලා.

අපිට මුලින්ම බලාගන්න හම්බෙන්නෙ <h1> කියලා. මොකද්ද මේකේ තේරුම? මේකට කියන්නේ අපි opening tag කියලා. මේකෙන් තමා අපි HTML tag එක open කරන්නේ. මෙකෙන් අපි කියනවා browser එකට ඔන්න අපි content වගයක් දෙන්නයි යන්නේ. මෙන්න මේක තමා ඒ content එකේ වර්ගේ. බලපොරොත්තුවෙන් ඉන්න කියල. දැන් browser එක බලාගෙන ඉදී content එක ලැබෙනකන්. ඔයා අහයි මොනවද මේ < > කියන්නේ කියලා. ඒවා HTML හදපු කට්ටිය සාකච්ඡා කරලා තීරණය කරපු දෙයක්. අපි මෙන්න මෙහෙම ලියමු HTML tag එකක් ලියද්දි කියලා. ඒක HTML syntax එහෙම නැත්තන් ව්‍යාකරණ වල තියන දෙයක්. ඒක ඔයාට ප්‍රශ්න කරන්න අයිතියක් නෑ, ප්‍රශ්න කරලා තේරුමකුත් නෑ. අපි content ලියන්න ලෑස්ති වෙද්දි අපි මුලින්ම opening tag එක ලියන්න ඕනේ. ඒ opening tag එක content එකේ කොටසක් නෙමේ කියලා හදුනගන්න ඒක වෙනස් විදිහකට ලියන්න ඕනේ. ඒක නිසා තමා අපි ඒක මේ විදිහට ලියන්නෙ. මොකද්ද එතකොට h1 කියන්නේ? h1 කියන්නේ "First Level Heading" කියන එක. හිතන්න අපි මොකක් හරි පාඩමක් ඉගෙන ගන්නවා කියලා, හරියට ඔයා මේ WebDev101 පාඩම ඉගෙන ගන්නව වගේ. එතකොට ඔයාට මේ articles වල පේනවා ඇති headings තියනවා, subheadings තියනවා කියලා. එතකොට ඔන්න ඔහොම හරි හමන් structure එක්කට දේවල් display කරන්න තමා අපිට විවිධ headings වර්ග තියෙන්නේ. headings වල තියෙන ලොකුම heading එක තමා h1 කියන්නේ. h1 ඉදල h6 වෙනකන් heading tags තියෙනවා. අපි ඉස්සරහට බලමුකෝ ඒවා මොන වගේද කියලා. දැනට මේ tag එකක් කියන්නෙ මොකද්ද කියලා තේරුන් ගන්න බලමු.

ඊළඟට අපිට හම්බෙන්නේ Hello World එක. මේක තමා අපේ tag එකේ content එක. මේක තම browser එක display කරන්නේ. මේක තමා අවසන් website එකේ බලගන්න ලැබෙන්නේ. මෙතනදි අපිට වචනයක්, දෙකක්, නැත්තන් මුලු ඡේදයක් ම වුනත් ලීවහකි. ඒ විතරක් නෙමේ ඔයා ඉස්සරහට දකී අපිට තව තව දේවල් දාන්න පුලුවන්. දැනට අපි text දාමු. අපි Hello World කියන text එක තෝරගත්තා අපේ tag එකේ content එක විදිහට. මෙතනට ඔයා කැමති එකක් type කරන්න. සාමන්‍යයෙන් programming වැඩ වලදි මුලින්ම ලියන program එකේදි ලියන දේ තමා Hello World කියන්නේ. ඒක මේ නිකන් මිනිස්සු හදාගත්තු පුරුද්දක් විතරයි. හරියට අපි සුබ වැඩක් කරද්දී කිරිබත් කන්නේ, අන්න ඒ වගෙ තමා. Programming සුබ වෙන්න නම් පලවෙනි වැඩේදී Hello World කියල ලියන්න ඕනෙ. 😂

Content එක ලීවායින් පස්සේ, අපි ලියන්නෙ closing tag එක. ඒක තමා ඔය </h1> කියලා තියෙන්නේ. අපි මුලින්ම browser එකට කීවා content වගයක් බලාපොරොත්තු වෙන්න, ඒකෙ වර්ගෙ "heading" කියන වර්ගෙ කියලා. ඊට පස්සෙ එයා සැරසුනාම, අපි content එක දුන්නා, Hello World කියලා. දැන් browser එක දන්නෙ නෑ අපි content දීලා ඉවරද කියලා. ඒක නිසා අපි එයාට කියනවා හරි දැන් content දීල ඉවරයි. දැන් අපි ඊලඟ වැඩේට යමු කියලා. ඔය අවසානය සනිටුහන් කරන්න තමා අපි closing tag එක use කරන්නේ. ඒකත් opening tag එක වගේම තමා, opening tag එකේ වර්ගෙම තියෙන්න ඕනෙ. ඒ කියන්නෙ මෙතනදි මේකත් h1 වෙන්නම ඕනේ, නැත්තන් ඉතින් ඇත්තට ගැලපීමකුත් නෑනේ. හැබැයි එක වෙනස් කමක්. මේකේ / සංකේතයක් තියනවා. ඒක තියෙන්නේ මේක වෙනත් opening tag එකකින් වෙන් කරල හදුනාගන්න. නැත්තන් browser එක හිතුවොත් අපි content එක අස්සේ තවත් tag එකක් දාන්න යනවා කියලා. මොකද ඇත්තටම එහෙම කරන එකම තමා අපි HTML ලියද්දි තනිකර කරන්නේ. එක tag එකක් ඇතුලේ තව tag එකක් දාන්න පුලුවන්. ඉතින් අපි browser එකට පැහැදිලිව කියන්න ඕනේ, මේක තවත් opening tag එකක් නෙමේ, මේ අපි අන්තිමට open කරපු tag එකේ closing tag එක කියලා. එතකොට browser එක හා හරි එහෙනම් කියල ඒක පිලි අරගෙන ඊලඟ tag එක display කරන්න ලෑස්ති වෙනවා.

ඉතින් ඔන්න ඔහොම තමා HTML tag එකක් හැදෙන්නේ. ඔහොම tags ගොඩකින් තමා HTML document එකක් හැදෙන්නේ. heading tag (h1) වගේ තව tags ගොඩක් තියනවා.

දැන් අපි ආපහු අර ලොකු code එක දිහා බලමු.

<html>
    <head>
        <title>Test Website</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
    </body>
</html>

දැන් ඔයාට හොදට තේරෙනවා ඇති මොකද්ද මේ වෙන්නෙ කියලා. මෙතන පැහදිලිවම HTML tags ගොඩක් තියෙන්නේ. ඒ වගේම මන් කලින් කීවා වගේ HTML tags ඇතුලේ තව HTML tags. හැම tag එකක්ම open වෙනවා වගේම close වෙලා තියෙනවා. හොඳ පැහැදිලි structure එකක් අපේ website එකට ලැබිලා තියනවා. දැන් අපි මේ එකින් එක කියවලා බලමු මොනවද මේ තියෙන්නේ කියලා.

පළවෙනියට බලාගන්න පුලුවන්, <html> කියලා. මේ තියෙන්නේ "root" tag එක. මේකෙන් තමා අපි browser එකට කියන්නෙ ඔන්න අපේ website එකේ අන්තර්ගතය මන් කියන්නයි යන්නේ කියලා. ඒ වගේම තමා මේ tag එකෙන් අපිට තව ප්‍රයෝජන ගොඩක් ගන්න පුලුවන් වෙනවා ඉස්සරහට. දැනට හිතාගන්න මෙහෙම. ඔයාම හිතලා බලන්නකො අපි මේ website හදද්දි සෑහෙන්න පිලිවෙල ගැන කතා කරනවා නේ. ඉතින් අපි හැමදේම හොද පිලිවෙලකට නිතියකට කරාම අපිටත් ලේසි browser එකටත් ලේසි. ඉතින් ඒ පිලිවෙලේ කොටසක් විදිහට දැනට මේක දකින්න. හරියට අපි browser එකට කියනවා, ඔන්න මං මගේ HTML Code එක පටන් ගන්නයි යන්නේ වගේ.

හරි, ඊලඟට අපිට බලාගන්න පුලුවන් <head> tag එක. මේක තියෙන්නේ browser එකට අපේ website එක ගැන විශේෂ තොරතුරු ටිකක් දෙන්න. මේ දේවල් අපේ website එකේ display වෙන්නේ නෑ. මේවා නිකන් අපේ website එකේ නම, description එක වගේ දේවල් අන්තර්ගත කරන්න තියෙන කොටස. මෙතනදි සම්පූර්නෙන් අපි browser එකට සහ, search engine (Google වගේ) වලට දෙන විස්තර කීපයක් තියෙන්නේ. මේවා අපේ end user ට එච්චර වැඩක් නෑ. (end user කියන්නේ අපේ website එක බලන්න එන අයට).

එකම එක දෙයක් නම් පේනවා, ඒ තමා website එකේ නම. ඒක තමා අපිට ඊලඟට පේන්න තියෙන්නේ. <title> tag එක. මේකෙන් අපිට website එකේ title එක, එහෙම නැත්තන් website ඒකේ නම මොකද්ද කියලා කියන්න පුලුවන්. Google වගෙ search engine එක්කින් ඔයාගෙ website එක search කරාම results වල ඔයාගෙ website එක පෙන්නද්දි පෙන්නනන නම තමා මේ.

html title in search results

ඒ වගේම තමා ඔයා browser එකෙන් website එකක් open කරාම, ඒ website එකට අදාල tab එකේ බලාගන්න හම්බෙන නමත් මේක තමා.

html title in tab title

ඉතින් <head> tag එක close කරාට පස්සෙ අපිට බලාගන්න පුලුවන් <body> tag එක. මේකෙ තමා අපේ website එකේ end user ට පේන දේවල් ටික දාන්නේ. ඇත්තටම website එක ජීවත් වෙන්නෙ මේ කොටසේ. මේ <body> tag එක ඇතුලේ අපි එක එක tags දාලා අපේ website එක හදනවා. මෙතනදි අපි සරලම විදිහට <h1> tag එකක් දැම්මා. ඔයාට පුලුවන් <h1>,<h2>,<h3> tags ටිකක් දාල, content එක විදිහට ඔයා කැමති text ටිකක් type කරන්න. ඉතින් අපි ඉස්සරහට තව ගොඩක් tags ඉගෙන ගන්නවා, ඒවා ඔක්කොම මේ body tag එකේ තමා දාන්නෙ.

<body>
    <h1>
        Hello World
    </h1>
    <h2>
        I am Malindu
    </h2>
    <h3>
        ඕනේ නම් සිංහලෙන් දාන්නත් පුලුවන්.
    </h3>
</body>

ඉතින් මේ විදිහට අපි අපේ HTML file එකේ codes ලියලා, ඒක save කරන්න ඕනේ. එහෙම save කරාට පස්සෙ ඔයා web browser එකේ ඔයා ඉස්සෙල්ල open කරපු site එක දිහා බැලුවට මුකුත් වෙනස් වෙලා කියලා පේන්නේ නැති වෙයි. ඒකට හේතුව එක සැරයක් website එක load කරාට පස්සේ ඒ load වෙච්ච version එකත් එක්ක තමා browser එක වැඩ කරන්නේ. අපිට අලුත්ම version එක ගන්න ඕනේ නම්, අපි page එක refresh කරානම් හරි. ඕක ඉතින් අපි ඕන තරම් කරන දෙයක් නේ. ඒක හින්ද මතක තියාගන්න. මොකක් හරි හේතුවකට ඔයාගේ website එක හරියට පේන්නෙ නැතිව ගියොත්, page එක refresh කරන්න. මේක ගොඩක් වෙලාවට කරන්න අමතක වෙන දෙයක්. පිස්සු හැදෙනවා, මොකද්ද අවුල කියලා හිතාගන්න බැරිව ඉද්දී. අවසානෙ බැලුවම අපේ අවුලක් නෑ, අපි page එක refresh කරලා නෑ.

reload the page h1,h2,h3 demo

ඔයාට පේනවා ඇති <h1>,<h2>,<h3> විදිහට දාද්දී browser එකෙන් ඒ ටික size අඩු වෙන විදිහට display කරලා. ඔව් නේ. ඒක නේ අපිට ඕනේ. මේ තියෙන්නේ page එකේ තියෙන headings 3ක්, පලවෙනි එක ප්‍රධාන heading එක, ඊලඟ එක අරකේ subheading එකක්, ඊලඟ එක මේකෙ subheading එකක්. සරලයි.

ඔය ටික තමා දැනට කතා කරන්න ඕනේ උනේ. අපි ඉස්සරහට තව දේවල් බලමු. දැනට headings ටිකක් දාන්න ඉගෙන ගන්න. ඔයා අද ලියපු code එක මකල ආයෙ ලියන්න. හැබැයි මේ සැරේ මතකෙන් ලියන්න. මොකද එතකොට ඔයාටම තෙරෙයි අමතක වෙද්දි ඇයි ඒව අමතක වුනේ සහ ඇයි ඒවා එහෙම දාන්නෙ කියලා. ඒ වගේම ඔයාටම තෙරෙයි කොච්චර තාර්කිකද මේ කතාව කියලා. ඒක තමා මේ programming ලෝකෙ තියෙන ලස්සනම දේ. හැමදේම තාර්කිකයි. හැමදේකටම හේතුවක් තියනවා. පිලිවෙලයි.

Homework 👨‍🏫

මේ ටික කරන්න කලින් browser එකයි VSCode එකයි close කරන්න. අපි fresh විදිහට කරමු, එතකොට හොදට හැමදේම ඔලුවට යනවා.

Desktop එකේ හරි ඔයා මේ වැඩ ටික තියාගන්න කැමති folder එක්කට යන්න. ඒකෙ අලුත් folder එකක් හදන්න, WebDev101 කියලා. මේකේ තමා අපි ඉස්සරහට මේ කෝස් එකේ හැම දෙයක්ම දාන්න යන්නේ. ඒක නිසා ඔයා කැමති පහසු තැනක මේක හදාගන්න. දැන් ඒකෙ අලුත් folder එකක් හදන්න, Lesson 1 - HTML Basics - Homework කියලා.
Startmenu එකෙන් search කරලා VSCode open කරන්න. (කැමති විදිහකට කෝම හරි open කරගන්නයි ඕනෙ)
දැන් අලුත් File එකක් හදාගන්න. මතක නැත්තන් ආයෙ පාඩම කියවලා හොයාගන්න.
ඒකෙ language එක තෝරගන්න HTML විදිහට. මේක අත්‍යවශ්‍ය නෑ. මේක කරාම අපිට type කරද්දි වචන පාට වෙන නිසා හරියට ලීවද කියල හොයාගත්තහැකි.
මුලින්ම Basic HTML Document එකේ structure එක දාගන්න. මතක නැත්තන් කමක් නෑ, උඩ තියනවානේ, එතනින් copy කරගන්න. මතකෙන් ගහන තරමට හොදයි.
දැන් ඒකේ website එකේ title එක වෙනස් කරන්න, මේ folder (Lesson 1 - HTML Basics - Homework) එකේ නමට.
Website එකේ මට බලාගන්න ඕනෙ, headings 6ක්, ජාති 6කින්. ඒවා ලොකුම heading එකේ ඉදලා පොඩිම heading එකට යනකන් තියෙන්න ඕනේ. ඒවගෙ content එක මෙන්න මේ විදිහට තියෙන්න ඕනේ 👇
- This is the biggest heading of all! It's so big, it's almost as big as my head!
- This heading is a little smaller than the h1 heading, but it's still pretty big. It's about the size of my ego.
- This heading is getting smaller, but it's still pretty noticeable. It's about the size of my pet hamster.
- This heading is getting smaller, but it's still readable. It's about the size of my phone screen.
- This heading is getting pretty small, but it's still there. It's about the size of my hand.
- This heading is the smallest of all, but it's still there. It's about the size of my pinky finger.
අවසන් output එක මෙන්න මේ වගේ තියෙන්න ඕනේ 👇
දැන් code එක අර අපි හදපු folder එකේ save කරන්න. homework.html වගේ නමක් දෙන්න.
දැන් ඒ folder එකට ගිහින් ඔයා save කරපු file එක web browser එකෙන් open කරලා බලන්න මගේ එක වගේ තියනවද කියලා. මගේ එකේ අකුරු ඔයාගෙ එකට වඩා ලොකු හරි පොඩි හරි වෙන්න පුලුවන්. ඒත් අවසානෙ මගේ වගේ ලොකු එකේ ඉදන් පොඩි වෙවී ගිහින් තියෙන්න ඕනේ.
වැඩේ හරි නම්, නැත්තන් වැරදි නම් ඒත් කමක් නෑ, අපේ Telegram Group එකට screenshot එකක් දාන්න. Screenshot ගහන්න දන්නේ නැත්තන්, Google කරලා හොයාගන්න.

අපි ඊළඟ පාඩමේදී HTML ලියද්දි ඔයාට ආපු ප්‍රශ්න විසඳනවා. මෙතනදි මං කතා කරන්න ප්‍රශ්න කීපයක් ලෑස්ති කරන් ඉන්නේ. උදාහරණයක් විදිහට කෙනෙක්ට ප්‍රශ්නයක් එන්න පුලුවන් මේකෙ මං code එක විස්තර කරද්දි මෙහෙම ලීව, හැබැයි සම්පූර්ණ code එක පෙන්නද්දි මෙහෙම ලීවා. ඒ දෙකේ වෙනස මොකද්ද, මොකද්ද හරි එක වගේ. ඔයාටත් ප්‍රශ්න ආවා නම් අනිවාරෙන් දාන්න comments section එකේ හරි Telegram Group එකේ හරි. ඊලඟ පාඩමේදී ඔයාගෙ ප්‍රශ්න වලට උත්තර හම්බෙයි. Homework කරලා ලෑස්ති වෙලා ඉන්න. මං දුන්න ඒවට අමතරව තව දේවල් කරන්න try එකක් දෙන්න, ගෙදර අයට එහෙම පෙන්නන්න.

අපි එහෙනම් ඊළඟ පාඩමෙන් හම්බෙමු.

Basic Website

Watch the Related Video 👇 Basic Website

අද අපි සරල website එකක් හදන්න තමා ලෑස්ති වෙන්නේ. මේ තියෙන්නේ ඒක.

මේකෙ බලාපොරොත්තුව HTML ලියන්න confidence එක හදන එක. HTML කියන්නෙ හරිම ලේසි දෙයක්, ඒකෙ ඇති දෙයක් නෑ ඇත්තටම. තව video එකකින් පස්සෙ මන් HTML උගන්වන්නෙත් නෑ. ඒ තරම් පොඩ්ඩයි ඇත්තටම කියලා දෙන්න තියෙන්නෙත්.

අද අපි හදන්නෙ ගොඩක් සරල website එකක්. මේකෙ title එකක්, පොඩි description එකක් වගේම image එකක් බලාගන්න පුලුවන්. ඒ වගේම වෙනත් website එක්කට යන්න දාපු link එකක් බලාගන්නත් පුලුවන්. ඉතින් මේ දේවල් කරද්දි දැනගන්න ඕනෙ තව අමතර කාරණා කීපයකුත් අපි කතා කරනවා. ඊලඟ video එකෙන් අපි HTML ඉවර කරලා css වලට යමු.

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

<html>
    <head>
        <title>Test Website</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
        <h2>
            I am Malindu
        </h2>
        <h3>
            ඕනේ නම් සිංහලෙන් දාන්නත් පුලුවන්.
        </h3>
    </body>

</html>

ඉතින් මේකෙදි මන් ඔයාලට කරන්න පොඩි වැඩකුත් දුන්නා. ඒක කරා නම් මේ වෙද්දි ඔයාලට හොඳට අද කියන දේවල් ඔලුවට යයි. මන් කලිනුත් කීව වගේ series එක ඉස්සරහට යද්දි මන් පොඩ්ඩ පොඩ්ඩ advanced විදිහට තමා උගන්වන්නේ. ඒක තෙරෙනවා හරියට කියන විදිහට වැඩේ කරන් ගියොත්, ගැටලුවක් වෙන්නෙ නෑ. ඒක නිසා එදා කියල දුන්නා වගේ හැමදේම ගොඩාක් විස්තර කරන්න යන්නෙ නෑ. මොකද එදා කියන්න තිබ්බ මූලික දේවල් සෑහෙන්න කිවා. ඉතින් යම් කොටසක් නොතේරෙනවා නම් අනිවාරෙන් ඒ video එක ආයෙත් බලන්න, නැත්තන් කිසි ප්‍රශ්නයක් නෑ පල්ලෙහා comment එකක් විදිහට හරි Telegram Group එකේ හරි දාන්න.

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

Create new file

දැන් මේක right-click කරලා Open With ගිහින් Visual Studio Code තෝරන්න.

Open file with VSCode

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

හරි, ඒ වගේම ආයෙත් file එක right-click කරලා Open With ගිහින් Google Chrome තෝරන්න.

Open file with Google Chrome

දැන් ඔයාට පුලුවන් ඕනෙ නම් මේ windows දෙක මේ විදිහට දෙපැත්තට ඇදල දාලා එක පැත්තක ලියන ගමන් අනික් පැත්තෙන් output එක බලාගන්න පුලුවන් විදිහට හදාගන්න.

Side by Side Windows

හරි දැන් එහෙනම් අපි codes ටික ලියන්න ගමු.

මුලින්ම අපි basic structure එක දාගෙන ඉමු.

<html>
    <head>

    </head>
    <body>

    </body>
</html>

Title එකක් එහෙම add කරලා h1 එකක් දාලා මේක හරියට වැඩ කරනවද බලමු.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <body>
        <h1>Welcome to my Website</h1>
    </body>
</html>

දැන් මේ file එක save කරලා chrome එකට ගිහින් refresh කරලා බලන්න, මේ වගේ output එකක් එන්න ඕනේ.

Chrome Output

ඉතින් මුලින්ම පටන් ගද්දි දැක්කා වගේ, අපි හදන website එකේ, title එකක්, description එකක්, image එකක් වගේම link එකක් බලාගන්න පුලුවන්. ඉතින් අපි ඉස්සෙල්ලම අපි දන්න දේවල් ටික දාමු. Title එකයි description එකයි. මන් මෙතනදි title කිවෙ heading එකක් කියන අදහසින්. HTML title එක ගැන නෙමේ කීවේ.

අපේ h1 එකට පහලින් මෙන්න මේ විදිහට ගහන්න.

<p>Hey guys, look at my website - I am officially a Web Developer now!</p>

ඉතින් මේ තියෙන්නෙ අලුත් html tag එකක්. <p> tag එක. මේකෙන් පුලුවන් අපිට paragraph එකක් add කරන්න website එකට. <h1> වගේම තමා, ඒක භාවිතා වෙන්නෙ headings වලට, <p> භාවිතා වෙන්නේ paragraph වලට. එදා tags වැඩ කරන හැටි කියල දුන්න නිසා මන් හිතනවා මීට වඩා දෙයක් කියන්න ඕනේ නෑ කියලා.

ඉතින් ඒක add කරාම මෙන්න මේ වගේ තමා final code එක පේන්න ඕනෙ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <body>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
    </body>
</html>

දැන් output එක මේ වගේ වෙන්න ඕනෙ. (page එක refresh කරන්න අමතක කරන්න එපා)

Chrome Output

ඊලඟට තියෙන්නෙ image එකක් add කරන එක. ඒත් ඒක කරන හැටි මන් ඔයාලට කියන්නෙ නෑ. ඒ වගේ දන්නෙ නැති දෙයක් දැනගන්නේ කෝමද කියලා පෙන්නන්නයි යන්නේ.

Chrome එකේ අලුත් tab එකක් open කරලා, එකේ search box එකේ ගහන්න, "how to add image in html" කියලා.

Search for how to add image in html

බලන්න හරිම සරලයි, අපිට ඕනේ කියල හිතුන දේ ඒ විදිහටම ලීවා. දැන් enter දුන්නම, ඔයාට එයි google search results කීපයක්. මේවාගේ තියෙනවා කොහොමද මේක කරන්නෙ කියන එක. අපි එක්කට ගිහින් බලමු.

how to add image in html search results

මේ උඩම තියන W3Schools link එකට ගිහින් බලමු.

Click on w3schools result

දැන් පේනවා ඇති මෙයාල පෙන්නල තියනවා කොහොමද image එකක් add කරන්නේ කියලා.

w3schools result

ඉතින් මේ example එක දිහා බලල අපි මේක පොඩ්ඩක් තේරුන් ගන්න බලමු.

w3schools example

ඉතින් අපිට මුලින්ම පේන දේ තමා මේකෙදි තියෙන්නෙ h1 වගේ img කියල tag එකක්. ඒ වගේම මෙකට closing tag එකකුත් නෑ. ඊට අමතරව මේකේ තව opening tag එක ඇතුලේ එක එක දේවල් ටිකක් තියනවා.

හරි, එකින් එක බලමු.

පලවෙනි නිරික්ෂණය තමා closing tag එකක් නැති වීම. එහෙම තමා, සමහර tags වලට closing tag එකක් නෑ. මේවට අපි කියන්නේ self closing tag කියලා. ඉතින් මේ img tag එක අන්න ඒ ජාතියේ එකක්. මේකට හේතුව තමා img tag එකට අවශ්‍ය දේවල් එයාගෙ attributes වලදි තමා අපි දෙන්නේ. මොනවද මේ attributes කියන්නේ. ඒවා තමා අර opening tag එකේ තියෙන අමතර දේවල් ටික. Attributes කියන එක නිකමට ඒ tag එකට අදාල settings වගේ කියල හිතාගන්නකෝ. img tag එක හරියට screen එකේ render කරන්න අවශ්‍ය settings කියලා හිතාගන්න. එක එක self closing tags වලට එක එක ජාතියෙ attributes තියෙනවා. සමහර self closing tags වලට attributes නැති වෙන්නත් පුලුවන්. ඒ වගේ එකක් මන් ඉස්සරහට පෙන්නන්නම්. ඉතින් ඔයා කරන්න ඕනේ දේ තමා මේ එදා කීව ජාතියෙ tag එකක් නොවුන එක ගැන බය නොවෙන එක. ඔයාට ඕනෙ නම් img tag එකත් normal tag එකක් විදිහට open කරලා close කරන්න පුලුවන්. නමුත් tags දෙක අතරේ අපි මොනවත් content දාන්නෙ නැති නිසා අපිට අමතර type කරන්න වෙන එක අඩු කරන්න තමා මේ වගේ self closing tags කියලා ජාතියක් වෙනම හදලා තියෙන්නේ.

හරි, ඊලඟට යමු මේ img tag එකේ තියෙන attributes වලට.

<img src="image.jpg" alt="image description">

ඉතින් මේ img tag එකේ අපිට බලාගන්න පුලුවන් attributes 2ක්. පලවෙනි එක තමා src කියන්නේ. මේකෙ තෙරුම source කියන එක. ඒ කියන්නේ අපි display කරන්න යන image එකේ location එක සරලවම. image එක තියෙන්නෙ කොහෙද කියන එක තමා අපි මේ කියන්නේ. අපි src="image.jpg" කියල ගැහුවම browser එක ඒ location/url එකෙන් image එක download කරලා අපේ website එකේ අදාල img tag එක තියෙන තැන display කරනවා.

ඊලඟට තියනවා alt කියන attribute එක. alt="image description" මේක ඇත්තටම image එක display කරන්න අත්‍යවශ්‍ය නෑ. මේක තියෙන්නෙ ඇත්තටම accessibility කියලා දේකට. ඊට අමතරව search engine optimization වලටත් මේක වැදගත් වෙනවා. සරලවම කීවොත් සමහර ඇස් පෙන්නෙ නැති අය එහෙම web browse කරද්දි screen readers කියලා software/tool ජාතියක් යොදාගන්නවා. මේවා සරලවම කරන්නේ screen එකේ තියෙන content අරයට ඇහෙන්න කියවන එක. එතකොට image එකක් එහෙම කියවන්න බෑ නේ. ඒක නිසා image එකේ තියෙන්නේ මොකද්ද කියලා අරයට දැනුම් දෙන්න ක්‍රමයක් විදිහට තමා මේ alt text එක භාවිතා වෙන්නේ. ඒ වගේම මේක දැම්මම search engines වලටත් ඒ image එක මොකද්ද කියලා තෙරුන් ගන්න පහසුයි. එතකොට ඔයාගේ website එකට ඒකෙන් හොඳ දෙයක් තමා වෙන්නේ. මීට අමතරව අපේ website එක බලන කෙනාගේ internet speed එක ගොඩක් අඩුයි නම් image එක වෙනුවට alt text එක display කරන අවස්තාත් තියනවා. සමහර වෙලාවට ඔයාම දැකලා ඇති website එක්කට යනකොට අතරමගදි connection අවුලක් ගියොත් images load වෙලා තිබ්බෙ නැත්තන් ඒවා වෙනුවට පොඩි image icon එකක් එක්ක text එකක් display වෙනවා. ඉතින් ඔන්න ඔය කාරණා වලට තමා මේ alt attribute එක යොදාගන්නේ.

ඉතින් ඔන්න ඔය දේවල් ටික එකතු කරගෙන අපිට පුලුවන් සාර්තකව image එකක් display කරන්න. ඒත් ඒකට අපිට image එකක් ඕනේ. ඉතින් images නම් ඕන තරම් තියෙන්නේ internet එකේ. ඔයත් google search එකක් දාලා ඔයා කැමතිම image එකක් තෝරගෙන ඒක right-click කරලා copy image address click කරලා image එකේ url එක copy කරගන්න. ඊට පස්සෙ අර img tag එකේ src attribute එකට දාන්න. Alt text එක විදිහට ඔයාගේ තෝරගත්ත image එකට ගැලපෙන description එකක් දාන්න. මන් දාන්නම් "a picture of a cat" කියලා.

search for cat on google

locate a nice cat pic

copy the image address

<img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat">

දැන් අවසාන code එක මෙන්න මේ විදිහට තමා තියෙන්න ඔනෙ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat">
    </body>
</html>

මේ code ලියද්දි ටිකක් දිගට එක පෙලක් යනවා නම් ඔයාට පුලුවන් vscode එකේ word wrap feature එක on කරන්න. එතකොට screen එකේ එක සැරේ පෙන්වන්න පුලුවන් ටික පෙන්නල ඉතුරු ටික අලුත් line එක්කින් දානවා. මේක original code එකට කිසි වෙනසක් කරන්නෙ නෑ. අපිට code එක පෙන්වන විදිහ විතරයි වෙනස් කරන්නේ. ඒක enable කරන්න ඔයාට පුලුවන් Ctrl+Shift+P ඔබලා command palette එක අරගෙන ඒකෙ word wrap කියල type කරලා අදාල එක ආවම enter ඔබන්න.

enable word wrapping on vscode

එහෙම කරාම මේ වගේ එක්කින්,

without word wrapping

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

with word wrapping

ඉතින් ඔයා තෝරගත්ත image එක මගෙ වගේ ගොඩක් ලොකු එකක් නම් මෙන්න මේ වගෙ ලොකූ වෙලා පෙන්නයි. ඒක හරි ගස්සන්නත් පුලුවන් අපිට.

very large image on an html page

අපි කලින් කතා කරපු src, alt වගේ තව attributes තියනවා. මේ වෙලාවේ අපි භාවිතා කරමු height කියන attribute එක. ඕනෙ නම් width කියන එක use කරන්නත් පුලුවන්. මේ attributes වලින් අපිට පුලුවන් වෙනවා අපේ image එකට අපි කැමති height එකක් width එකක් දෙන්න. එහෙම නොදුන්නොත් browser එක image එකේ original size එක තමා භාවිතා කරන්නේ. ඉතින් අපි අර alt එකට පස්සෙ height="500" විදිහට type කරගමු.

මේකෙන් අපි browser එකට කියනවා අපේ image එකේ height එක නැත්තන් උස 500px කරන්න කියලා. එතකොට browser එක අපේ screen එකේ pixels 500ක් උසට අර image එක display කරනවා. අපි width එක කියපු නැති නිසා browser එක හරිම smart විදිහට, අපේ height එකට ගැලපෙන්න image එක විකුර්ති නොවෙන විදිහට original image එකේ අනුපාතයට ගැලපෙන්න width එක adjust කරලා දෙනවා. ඒක නිසා අපි ඒක හිතලා කරන්න ඔනෙ නෑ. height හරි width හරි දෙකෙන් එකක් දුන්නනම ඇති.

දැන් අපේ image tag එක මෙන්න මේ වගේ තියෙන්න ඕනේ.

<img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">

සම්පූර්ණ code එක ඔන්න තියනවා.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">
    </body>
</html>

දැන් අපේ image එක ලස්සනට හරි ගානට display වෙලා තියෙන්න ඕනේ.

image displayed at correct scale

හරි දැන් අපේ website එකේ image එකක් display කරන්නත් දන්නවා. තව දෙයක්, මේ height attribute එක ගැනත් ඔයාට අමතක උනොත් ඔයාට පුලුවන් ඒකත් google කරලා හොයාගන්න. ගොඩක් දුරට ඔයාට එයි CSS වලින් මේක කරන හැටි මොකද ඇත්තටම මන් මුලම videos වල කීවා වගේ HTML තියෙන්නෙ අපේ website එකේ structure එක define කරන්න විතරයි. ඒකේ තියෙන දේවල් display වෙන්න ඕනේ කෝමද කියන එක කරන්න ඕනෙ CSS වලින්. නමුත් අපි දැනට CSS ඉගෙන ගන්නකන් තමා මේ විදිහට height එක හරි ගැස්සුවේ.

තව දෙයක් තියනවා. අපි මෙතනදි භාවිතා කරේ වෙනත් කෙනෙක්ගෙ website එක්ක තියන image එකක් නේ. අපිට ඕනෙ නම් අපේ computer එකේ තියෙන image එකක් උනත් මෙතනට දාන්න පුලුවන්. ඒකට ඒ image එකට අදාල path එක copy කරලා මෙතන paste කරන්න. ලේසිම වැඩේ තමා ඒ ඔයාට දාන්න ඕනෙ image එක මේ html file එක තියෙන තැනටම copy කරගන්න එක. ඊට පස්සෙ ඔයාට ඒක ලේසියෙන්ම දාගන්න පුලුවන්. මන් ක්‍රම දෙකම පෙනවන්නම්.

Computer එකෙ කොහෙ හරි තියෙන එකක් දාගන්න ඕනේ නම් මෙන්න මෙහෙම කරන්න.

ඉස්සෙල්ලම ඒ image එක තියෙන තැනට ගිහින් එක උඩ click කරන්න.

find an image on your computer

දැන් shift key එක ඔබාගෙන right-click කරන්න. එතනින් එන menu එකෙන් Copy as Path ඔබන්න.

copy as path

දැන් අර ඔයාගෙ HTML code එකේ img tag එකේ src attribute එකට ගිහින් paste කරන්න (Ctrl+V). මගෙ code එක තියෙන්නෙ මෙහෙම මොකද මගෙ image එක තියෙන්නෙ මගෙ D drive එකේ pictures කියලා folder එක්ක.

<img src="D:\pictures\cat.jpg" alt="a picture of a cat" height="500">

දැන් full code එක මෙහෙම තියෙන්න ඕනේ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="D:\pictures\cat.jpg" alt="a picture of a cat" height="500">
    </body>
</html>

ඔයාට පේනව ඇති දැන් හරියටම image එක වෙනස් වෙලා තියනවා මන් දාපු අලුත් image එකට.

new cat pic added to website using local path

දැන් බලමු කෝමද html file එක තියෙන තැනටම දාපු image එකක් මෙතනට දාගන්නෙ කියලා.

මුලින්ම අදාල image එක html file එක තියෙන තැනට copy කරගන්න.

html file and image side by side

දැන් img tag එකේ src attribute එකට මෙහෙම දාන්න.

<img src="cat.jpg" alt="a picture of a cat" height="500">

ඔව් නිකන්ම image file එකේ නම. මගේ image file එකේ නම cat.jpg, ඉතින් ඒක මේ විදිහට දාන්න ඕනේ. මෙහෙම දැම්මම browser එක දන්නව මේක තියෙන්නෙ අපි දැන් බලන් ඉන්න html file එක තියෙන folder එකේමයි කියලා.

දැන් full code එක මෙහෙම තියෙන්න ඕනේ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="cat.jpg" alt="a picture of a cat" height="500">
    </body>
</html>

new cat pic added to website using relative path

ඔන්න ඔහොම ඔයාට ඔයා ගාව තියෙන image එකක් උනත් දාගන්න පුලුවන්. වෙනත් website එක්ක තියෙන එකක් වෙන්නම ඕනෙ නෑ.

Programming වල තියන හොඳම දෙයක් තමා ඔයා මොකුත් මතක තියාගන්න ලොකු මහන්සියක් දරන්න ඕනේ නෑ. ඔයාට හැමදේම google කරලා හොයාගන්න පුලුවන්, හැමෝම කරන්නෙත් එහෙම තමයි. පුරුද්දත් එක්ක සමහර දේවල් නිකන්ම මතක හිටිනවා. ඒක හොඳ දෙයක්, නමුත් අමතක උනාට ගැටලුවක් නෑ. ඔයාට ඒක හොයාගන්න පුලුවන්. Computer එක්කින් නේ programming කරන්නේ, ඉතින් ඒක නිසා ඒකෙන් internet එකට ගිහින් අවශ්‍ය දේ හොයාගන්නත් පුලුවන්. Programmer කෙනෙක්ට වැදගත්ම දේ තමා logical thinking දියුණු කරගන්න එක. මොකද ඔයාට එතකොට මොකක් හරි ප්‍රශ්නයකට පිලිතුර හිතල ඒක code එකට පරිවර්තනය කරන හැටි ඕනෙ තැනකින් බලාගෙන කරන්න පුලුවන්. ඔක්කොම codes ටික දැනගන්න එක නෙමේ programmer කෙනෙක් වෙනවා කියන්නේ. මේක හරියටම නිකන් open book exam එකක් වගේ දෙයක්.

හරි ඊලඟට අපි යමු ඊලඟ element එකට.

දැන් තියෙන්නෙ අවසාන වැඩේ. අපේ website එකෙන් වෙනත් website එක්කට යන්න link එකක් දාන එක. මේක ගොඩක් වැදගත් දෙයක්. Internet එක හැදෙන්නෙ මෙහෙම. මොකද ගොඩක් වෙලාවට අපි කරන්නෙ එක website එක්කින් තවත් එක්කට යන එක. මේවට උදව් වෙන්නේ අපි ඊලඟට use කරන්න යන tag එක.

ඒ තමයී anchor tag එක. මේකෙන් පුලුවන් අපිට මොකක් හරි දෙයක් එබුවම වෙනත් website එක්කට හරි page එක්කට හරි නැත්තන් download එකක් හරි නැත්තන් මොකක් හරි image එකක් open වෙන විදිහට හදන්න. අපි YouTube video එක්කට යන විදිහට anchor tag එකක් දාන හැටි බලමු.

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>

ඉතින් මෙන්න මේක ඔයාගෙ img tag එකට පස්සෙ type කරගන්න. එතකොට full code එක මෙන්න මේ වගේ තමා තියෙන්න ඕනේ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">
        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>
    </body>
</html>

දැන් බලමු මොකද්ද මේ ලීවේ කියලා.

මුලින්ම තියනවා සුපුරුදු පරිදි අපේ opening tag එක. ඔව් මේ anchor tag එක normal tag එකක්. self closing නෙමේ. මොකද මේකේ අපිට click කරන්න ඕනේ මොකද්ද කියන එක දාන්න තැනක් තියනවා. ඒ වගේම anchor tag එක ලියද්දී අපි 'a' අකුර විතරයි ලියන්නේ. මේක කරලා තියෙන්නෙ type කරන එක පහසු කරන්න. ඉතින් මේ tag එකෙත් attributes තියනවා. මෙතනදි අපි භාවිතා කරලා තියෙන්නෙ href කියන attribute එක. ඒකෙ තේරුම hypertext reference කියන එක. මේකට තමා අපි යන්න ඕනෙ link එක දාන්නෙ. මේක website url එකක් වෙන්න පුලුවන්, අපේම website එකේ තවත් page එකක් වෙන්න පුලුවන්. නැත්තන් මොකක් හරි file එකක් download කරන්න දෙන්න නම් ඒ file එකේ url එක වෙන්න පුලුවන්. Image url එකක් උනොත් ඒ image එක load වෙනවා. ඉතින් මන් මෙතනට නිකන් YouTube video එක්ක link එකක් දැම්මා. ඔයාට කැමති දේකට link එකක් මෙතනට දාන්න පුලුවන්. ඕනේ නම් ඔයාගෙ facebook නැත්තන් instagram account එකට යන්න link එක දාන්න. කැමති දෙයක්.

හරි ඊලඟට තියනවා අපි අර කියපු link එකට යන්න නම් ඔබන්න ඕනෙ දේ. ("Here's a gift" කියන එක)

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>

මෙතනට ඔයාට කැමති දෙයක් දාන්න පුලුවන්. ඒ කියන්නෙ ඕනෙ නම් මන් දාල තියනවා වගෙ සාමන්‍ය text එකක් දාන්න පුලුවන්. නැත්තන් තවත් html element එකක් දාන්න පුලුවන්. ඒ කියන්නෙ ඔයාට ඕනෙ නම් පුලුවන් h1 tag එකක් උනත් මෙතනට දාන්න. එතකොට a tag එකේ content එක විදිහට අන්න ඒ h1 tag එක තමා display වෙන්නේ. ඒ කියන්නේ ඔයාට ඕනේ නම් මෙතනට image එකක් උනත් දාන්න පුලුවන්. මන් කලින් දවසකත් කීවා වගේ html ලියද්දි අපි මේ nesting behaviour එක use කරනවා. ඉතින් අපි html tag එක ඇතුලේ body tag එක දාල ඒක ඇතුලේ මේ අනික් tags දැම්මා වගේ අපිට පුලුවන් a tag එක ඇතුලෙත් තවත් tag එකක් දාන්න. ඔයාට ඕනේ නම් ඔයා කලින් දාපු image element එක cut කරල මෙතනට දාන්න. එතකොට ඒ image එක click කරාම අර දාපු link එකට යවන්න පුලුවන්. මන් ඒක පෙන්වන්නේ නෑ. ඔයා ඒක තනියම කරලා බලන්න. හරියට කරොත් අනිවාරෙන් ඔයාට අමුතුම සතුටක් එයි. මේක කොච්චර powerful ද ඒ වගේම ආස හිතෙන දෙයක්ද කියන එක එතකොට තේරෙයි.

ඉතින් ඊට පස්සෙ සුපුරුදු පරිදි අපේ closing tag එක තීයෙනවා. ඔන්න ආයෙත් මන් full code එක බලාගන්න දැම්ම මෙතනට.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">
        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>
    </body>
</html>

දැන් ඔයා browser එක refresh කරලා බැලුවම මේ වගේ බලාගන්න පුලුවන් වෙන්න ඕනේ.

website with heading, paragraph, image and a link

ඉතින් මේකෙ පොඩී අවුලක් තියනවා. අපේ link එක අලුත් පෙලකට ගිහින් නෑ. Image එක එහා පැත්තට වැටිලා. මේකට හේතුව img element එක inline කියලා element type එකක්. ඒ කියන්නෙ ඔය වෙලා තියන දේ තමා එකෙ default behaviour එක. h1, p වගේ ඒවා block type elements. ඒවාගෙදි අලුත් පෙලක තමා ඊලඟ දේ display වෙන්නේ. මේ ගැන අපි ඉස්සරහට තව කතා කරමු. දැනට මන් මේක හරි ගස්සන්න ලේසි විදිහක් පෙන්වන්නම්.

ඒකට අපිට පුලුවන් img tag එකට පස්සෙ මොකක් හරි හිස් block type element එකක් දාන්න. ඒ කියන්නේ ඔයා මොකුත් content එකක් නොදාපු h1 හරි p tag එකක් හරි දැම්මොත් මේක හරි යන්න ඕනේ. ඉතින් මේ වගේ දේකදි අපිට code එක කියවන කෙනාට පොඩ්ඩක් තේරෙනවා මදි නේ මොකද්ද මේ කරල තියෙන්නේ කියලා. මොකද මේ හිස් h1 tag එකක් දාලා තියෙන්නෙ කියලා හිතයි බලන කෙනා. ඒක නිසා ඔයාට පුලුවන් ඒ වගේ දේකටම හදපු දෙයක් use කරන්න. ඒ තමා <br> tag එක. මේක තියෙන්නේ line break එකක් දාන්න. මේක සාමන්‍ය‍යෙන් භාවිතා කරන්නෙ paragraph වෙන් කරන්න එහෙම තමා. නමුත් මෙතනදි යොදාගන්නත් පුලුවන්, බලන කෙනාටත් පැහැදිලි මොකද්ද මේ කරලා තියෙන්නෙ කියලා. හැබැයි හොඳට මතක තියාගන්න මේක නෙමේ මේ වැඩේ කරන්න තියන හරිම විදිහ. මන් කලිනුත් කීවා වගේ අපිට මෙතනදි ඕනේ ඇත්තටම browser එකට කියන්න කෝමද අපේ img එකයි ඊට පස්සෙ තියෙන දේවලුයි display කරන්න ඕනේ කියන එක නේ. ඒක CSS වලට භාර වැඩක්. HTML එක අස්සෙ styling ගාව ගන්න එක හොඳ දෙයක් නෙමේ. එතකොට අපිට code එක maintain කරන්න අපහසු වෙනවා. ඒක නිසා අපි මේ වගේ දේවල් professionally කරනවා අඩුයි. ඒක නිසා අපි දැනට විතරක් පොඩි trick එකක් විදිහට මේක use කරමු.

Line break එක දාන්න නිකන්ම <br> කියල img tag එකට පස්සෙ type කරන්න.

දැන් full code එක මේ වගේ තියෙන්න ඕනේ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">
        <br>
        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>
    </body>
</html>

දැන් browser එක refresh කරාම මේ වගේ හරියට link එක ඊලඟ පෙලට ගිහින් තියෙන්න ඕනේ.

image and link seperated into 2 lines

ඔයාට ඕනේ නම් පුලුවන් තව br එකක් දාල මේ img එකයි link එකයි අතරට හිස් පේලියකුත් දාගන්න. එතකොට ටිකක් බලද්දි පැහැදිලි. ඒ උනාට මේ වගෙ දේවල් අපි ඇත්ත website හදද්දී කරන්නෙ නෑ හරිද. ආයෙත් කියනවා මේ වගේ දේවල් වලට තමා CSS තියෙන්නේ.

<html>
    <head>
        <title>Basic Website</title>
    </head>
    <img>
        <h1>Welcome to my Website</h1>
        <p>Hey guys, look at my website - I am officially a Web Developer now!</p>
        <img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="a picture of a cat" height="500">
        <br>
        <br>
        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Here's a gift</a>
    </body>
</html>

extra empty line between image and link

ඉතින් ඔන්න ඔයාගෙ website එක complete. මේක අනිවාරෙන් ඔයාගෙ යාලුවන්ට පෙන්වන්න. ගෙදර අයට එහෙමත් පෙන්වන්න. මරු වැඩක් තමා අද කරේ. මන් හිතනව අද ඉගෙන ගත්ත දේවල් වලින් සෑහෙන්න දෙයක් ඔයාට කරන්න පුලුවන් වෙයි කියලා. මොකද දැන් ඔයා දන්නවා කෝමද දන්නෙ නැති දෙයක් ඉගෙන ගන්නේ කියන එක පවා. ඉතින් එතකොට ඔයාට සෑහෙන්න දෙයක් කරගන්න පුලුවන්. තව පොඩ්ඩක් එක එක දේවල් හොයලා කරලා බලන්න. ඒක තමා අද ඔයා කරන්න ඕනේ වැදගත්ම දේ. ආසාවෙන් දේවල් හොය හොය කරන එක.

මෙන්න පොඩි දෙයක් නොදන්න අයට: මේක ඔයාට යාලුවන්ට try කරන්න දෙන්න නම් එක්කො ඔයාගෙ computer එක දෙන්න වෙනවා මොකද මේක අපි internet එකට මුදා හැරලා නෑ තාම. මේ website එක තියෙන්නෙ ඔයාගෙ computer එකේ. ඔයාට පුලුවන් ඔයාගෙ html file එක යාලුවට යවන්න. WhatsApp වලින් හරි email එකක් විදිහට හරි කෝම හරි යවන්න. එයාට ඒක download කරලා, එයාගෙ browser එකෙන් open කරන්න කියන්න. එතකොට එයාට පුලුවන් ඔයාගෙ මේ website එක බලාගන්න.

ඉතින් අද අපි හදපු website එකේ working demo එකක් මන් internet එකට දාල තියෙනවා. ඔයාට පුලුවන් මෙන්න මේ link එක click කරලා ඒකට ගිහින් බලන්න. ඒ වගේම මන් දීල තියන gift එක open කරන්නත් අමතක කරන්න එපා.

අද අපි සෑහෙන්න දේවල් කතා කරා. නමුත් ඒ හැමදේම ලස්සනට එකිනෙකට ගැලපෙන විදිහට තමා කතා කරේ. හැමදේම practical ලෝකේ භාවිතා වෙන විදිහට තමා ඉගෙන ගත්තේ. ඒ විදිහට තමා programming ඉගෙන ගන්න ඕනේ. ඉතින් අද කතා කරපු දේවල් දරාගන්න පුලුවන් කියල හිතනවා. කලින් videos උත් බලලා දිගටම එකතු වෙලා හිටිය කෙනෙක් නම් අනිවාරෙන් තේරෙන්න ඕනෙ. ඒත් මොනවහරි අපැහැදිලි තැනක් තිබ්බොත් කිසි දේකට සැලෙන්න එපා. බය වෙන්න එපා අනිවාරෙන් comments වල හරි Telegram Group එකේ හරි දාන්න. අනිවාරෙන් ඔයාගෙ ගැටලුව විසඳලා දෙනවා. එක එක්කෙනාගෙ ධාරිතාව වෙනස්. ඉතින් ඒක නිසා ඔයාට මොකක් හරි සැකයක් තිබ්බොත් අනිවාරෙන් කියන්න ඒක විසඳලා දෙන්න කට්ටිය ඉන්නවා.

Homework 👨‍🏫

මෙන්න මේක තමා ඔයාට අද කරන්න තියෙන්නෙ. එදා homework කරන හැටි කියලා දුන්න නිසා මන් කරන්න ඕනේ දේ විතරක් කියන්නම්.

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

ඔයා හදන්න ඕනේ image gallery එකක්. ඔයා කැමති මාතෘකාවක් යටතේ images 9ක් විතර තෝරගෙන ඒව 3x3 grid එකක් වගේ display වෙන්න ඕනේ. මේක කරන්න හරිම ලේසි. කිසිම CSS කෑල්ලක් use කරන්න එපා මොකද මන් තාම එවා කියල දීලත් නෑ, ඔයා ඒවා use කරා කියන්නෙ බොහෝදුරට ඔයා මේක google search කරලා ආපු solution එකක් copy කරා කියන එක. ඉතින් එහෙම කරන්න එපා. මේ වැඩේට ඕන හැමදේම ඔයා දැනට දන්නවා. පොඩ්ඩක් හිතලා බලල කරන්න හරිම සරල වැඩක් මේක.

ඒ කරලා ඒ image හැම එකක්ම click කරාම ඒ අදාල image එක load වෙන්නත් ඕනේ.

Page එකට heading එක්කුත් දාන්න Image Gallery වගේ.

Final output එකේ screenshots පල්ලෙහා තියනවා. ඒ වගේම working demo එකකුත් තියනවා මෙන්න මෙතන. හැබැයි මේකෙ source code එක බලන්න එපා. තනියෙම කරන්න බලන්න. Try එකක් දීල බලන්නකෝ. තෙරුනේ නැත්තන් අනිවාරෙන් අහන්න, step by step වැඩේ සාර්ථක කරගන්න.

Images distort උනාට කමක් නෑ - ලස්සනට images grid එක්කට ගන්න නම් fixed height & width use කරන්න වෙනවා. එතකොට image එක පොඩ්ඩක් ඇදිලා ගිහින් වගේ වෙයි. ඒකට කමක් නෑ. මේ වෙලාවේ මට ඕනෙ logic එක හරියට implement කරාද බලන්න. ඔයාට හරියටම කරන්න ඕනෙ නම්, images ටිකක් download කරන් එකම අනුපාතයකට එන විදිහට crop කරල ගන්න. එතකොට height එක විතරක් set කරල ඔයාට පුලුවන් වැඩේ කරන්න.

Page එක load උනාම පේන්න ඕනෙ එක.

image gallery working demo

Image එකක් උඩ click කරාම ඒක open වෙන්න ඕනෙ.

image opened when clicked on it

ඉතින් ඔක්කොම හරියට කරා නම් සුපුරුදු පරිදි අපිට screenshots එවන්න Telegram Group එකට. ආයෙත් කියනවා, කරගන්න බැරි උනත් එවන්න, ගැටලු තියනවා නම් කියන්න. අපි විසඳල හරියට මේ වැඩේ සාර්ථක කරගමු.

Homework එක හරියට කරොත් ගෙදර අයට පෙන්නන්න, යාලුවන්ට පෙන්වන්න. අපි එහෙනම් ඊළඟ පාඩමෙන් හම්බෙමු.

More HTML

අද අපි තව HTML ටිකක් බලමු. ඊළඟ පාඩමෙන් අපිට CSS පටන් ගන්න පුලුවන්. අද අපි ටිකක් වේගෙන් යනවා. මොකද ගොඩක් දේවල් එක වගේ දෙවල් තියෙන්නෙ. අද ලොකුවට අලුත් දේවල් නෑ. එත් HTML ලියද්දි දැනගෙන ඉන්න ඕනෙ දේවල් කීපයක් තමා අද කතා කරන්නේ.

අද අපි සරල website එක්ක ආකෘතියක් හදාගන්න තමා ලෑස්ති වෙන්නේ. මේ තියෙන්නෙ අද අපි හදන්න බලාපොරොත්තු වෙන website එක. මේක ඇත්තටම අපිට අද උගන්වන කිසි දෙයක් නැතිව දැනට දන්න දේවල් වලින් හදාගන්න පුලුවන්. ඒත් ඇත්තටම මේ වගේ දෙයක් හදද්දී හදන්න ඕනේ කොහොමද කියන දේ, ඒ දේවල් ඇයි එහෙම කරන්නෙ වගේ දේවල් තමා අද කතා කරන්නේ. ඒක නිසා ඇත්ත websites ලියද්දී ගොඩක් වැදගත් වෙන දේවල් තමා අද කතා කරන්නේ.

අද අපිට ඕනෙ වෙන images, codes එහෙම මන් දාලා තියෙනවා පල්ලහින්. ඔයාට මන් කරන එකත් එක්ක follow කරන් යන්න ඕනෙ නම් මෙතනින් ඒ දේවල් ටික ගන්න පුලුවන්. Images ඕනේ නම් මෙතනින් download කරගන්න, නැත්තන් ඔයාට ඕනේ නම් කෙලින්ම link එක copy කරලා use කරන්නත් පුලුවන්. Images download කරන්න නම් අදාල image එක උඩ right click කරලා "Save image as" වලින් save කරගන්න පුලුවන්.

ඒ වගේම full project file එක මෙතනින් download කරගන්න පුලුවන් zip එකක් විදිහට. ඒක ඔයාට extract කරගෙන ඕනේ නම් ඔයාගෙ code එකයි මගේ එකයි සසඳන්න පුලුවන්.

HTML Template

<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./gallery.html">Gallery</a></li>
        <li><a href="./about.html">About</a></li>
        <li><a href="./contact.html">Contact</a></li>
      </ul>
    </nav>
    <br />
    <br />
    
    <br>
    <br>
    <footer>
        <ul>
            <li><a href="https://instagram.com/thisismalindu">Instagram</a></li>
            <li><a href="https://facebook.com/thisismalindu">Facebook</a></li>
            <li><a href="https://youtube.com/@thisismalindu">YouTube</a></li>
            <li><a href="https://tiktok.com/@thisismalindu">TikTok</a></li>
        </ul>

        <p> &copy; Copyright 2023 Malindu Bandara. All Rights Reserved. </p>
    </footer>
  </body>
</html>

imagegallery.html

<html>
    <head>
        <title>Image Gallery</title>
    </head>
    <body>
        <h1>Image Gallery</h1>
        <a href="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg"><img src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="cat picture" height="250" width="250"></a>
        <a href="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_640.jpg"><img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_640.jpg" alt="cat picture" height="250" width="250"></a>
        <a href="https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTk2NzY3MjA5ODc0MjY5ODI2/top-10-cutest-cat-photos-of-all-time.jpg"><img src="https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTk2NzY3MjA5ODc0MjY5ODI2/top-10-cutest-cat-photos-of-all-time.jpg" alt="cat picture" height="250" width="250"></a><br>
        <a href="https://i.natgeofe.com/k/ad9b542e-c4a0-4d0b-9147-da17121b4c98/MOmeow1_square.png"><img src="https://i.natgeofe.com/k/ad9b542e-c4a0-4d0b-9147-da17121b4c98/MOmeow1_square.png" alt="cat picture" height="250" width="250"></a>
        <a href="https://headsupfortails.com/cdn/shop/articles/Cat_s_Mind_x630.jpg?v=1624444348"><img src="https://headsupfortails.com/cdn/shop/articles/Cat_s_Mind_x630.jpg?v=1624444348" alt="cat picture" height="250" width="250"></a>
        <a href="https://th-thumbnailer.cdn-si-edu.com/oVabaIyItVRvlSwByJk6a6_IFxs=/800x800/filters:focal(1850x1738:1851x1739)/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer_public/31/97/31979e81-313f-4d98-987c-fcce125a4d08/gettyimages-696166057.jpg"><img src="https://th-thumbnailer.cdn-si-edu.com/oVabaIyItVRvlSwByJk6a6_IFxs=/800x800/filters:focal(1850x1738:1851x1739)/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer_public/31/97/31979e81-313f-4d98-987c-fcce125a4d08/gettyimages-696166057.jpg" alt="cat picture" height="250" width="250"></a><br>
        <a href="https://catamazing.com/cdn/shop/files/catshark.jpg?v=1649869148"><img src="https://catamazing.com/cdn/shop/files/catshark.jpg?v=1649869148" alt="cat picture" height="250" width="250"></a>
        <a href="https://images.theconversation.com/files/443350/original/file-20220131-15-1ndq1m6.jpg?ixlib=rb-1.1.0&rect=0%2C0%2C3354%2C2464&q=45&auto=format&w=926&fit=clip"><img src="https://images.theconversation.com/files/443350/original/file-20220131-15-1ndq1m6.jpg?ixlib=rb-1.1.0&rect=0%2C0%2C3354%2C2464&q=45&auto=format&w=926&fit=clip" alt="cat picture" height="250" width="250"></a>
        <a href="https://hips.hearstapps.com/hmg-prod/images/black-cat-names-64ad9a37e2690.jpg?crop=0.667xw:1.00xh;0.171xw,0&resize=1200:*"><img src="https://hips.hearstapps.com/hmg-prod/images/black-cat-names-64ad9a37e2690.jpg?crop=0.667xw:1.00xh;0.171xw,0&resize=1200:*" alt="cat picture" height="250" width="250"></a>

    </body>
</html>

Web Dev 101 - Complete Course Documentation and Exercises

Malindu Bandara

Founder of sciber.dev