ඔබේම වෙබ් අඩවියක් නිර්මාණය කරමු!

කිසිදු Vorkenntnisse නොමැතිව, ඔබගේ පළමු වෙබ් අඩවිය සැලසුම් කර, නිර්මාණය කර, ලෝකයටම පෙනෙන සේ අන්තර්ජාලයට එක් කරන ආකාරය පිළිබඳ සම්පූර්ණ මාර්ගෝපදේශය.

2025 වසර වන විට, වෙබ් අඩවියක් යනු විශාල සමාගම්වලට පමණක් සීමා වූ දෙයක් නොවේ. එය ඔබගේ කුසලතා ලෝකයට පෙන්වන ඩිජිටල් හැඳුනුම්පතක්, ඔබගේ අදහස් බෙදාහදා ගන්නා වේදිකාවක්, හෝ ඔබගේ කුඩා ව්‍යාපාරයේ මුහුණුවර විය හැකිය. "වෙබ් අඩවියක් සෑදීම" යනු ඉතා සංකීර්ණ, ක්‍රමලේඛන දැවැන්තයින්ට පමණක් කළ හැකි දෙයක් ලෙස බොහෝ දෙනෙක් සිතුවද, සත්‍යය නම්, මූලික තාක්ෂණයන් කිහිපයක් ඉගෙන ගැනීමෙන් ඕනෑම කෙනෙකුට සරල, අලංකාර වෙබ් අඩවියක් නිර්මාණය කළ හැකි බවයි.

මෙම මාර්ගෝපදේශයේ අරමුණ, එම ක්‍රියාවලිය ඔබට ඉතාම සරල, කළමනාකරණය කළ හැකි පියවර කිහිපයකට කඩා දීමයි. අපි එකට එක්ව, ඔබගේම සරල **පුද්ගලික කුසලතා එකතුවක් (Personal Portfolio)** ඇතුළත් වෙබ් අඩවියක් මුල සිටම ගොඩනගමු. මෙම පාඩම අවසානයේදී, ඔබට ඔබගේම වෙබ් ලිපිනයක් සහිත, ක්‍රියාත්මක වන වෙබ් අඩවියක් හිමි වනු ඇත.

අපගේ ගමනේ පියවර:

සැලසුම් කිරීම: අපගේ වෙබ් අඩවියේ අරමුණ සහ පෙනුම පිළිබඳ සැලැස්මක් සකස් කිරීම.
තාක්ෂණයන් හඳුනාගැනීම: වෙබ් අඩවියක මූලික ගොඩනැගුම් කොටස් වන HTML සහ CSS යනු කුමක්දැයි ඉගෙන ගැනීම.
වැඩබිම සකස් කිරීම: කේත ලිවීමට අවශ්‍ය මෘදුකාංග ස්ථාපනය කර, අපගේ ව්‍යාපෘති ෆෝල්ඩරය සකස් කිරීම.
සැකිල්ල සෑදීම (HTML): අපගේ වෙබ් අඩවියේ අන්තර්ගතය සහ ව්‍යුහය HTML භාවිතයෙන් නිර්මාණය කිරීම.
අලංකාර කිරීම (CSS): අපගේ වෙබ් අඩවියට වර්ණ සහ හැඩතල එක් කර, එය CSS භාවිතයෙන් අලංකාර කිරීම.
ලෝකයට විවෘත කිරීම: අපගේ වෙබ් අඩවිය නොමිලේ අන්තර්ජාලයට එක් කරන ආකාරය.

1 වන කොටස: සැලසුම් කිරීම - ගමන ආරම්භ කිරීමට පෙර (Planning) 🗺️

හොඳම නිර්මාණ ආරම්භ වන්නේ කේතයෙන් නොව, කඩදාසියක ඇඳි සරල සැලැස්මකිනි. අපි නිර්මාණය කිරීමට යන පුද්ගලික Portfolio වෙබ් අඩවියේ ප්‍රධාන කොටස් මොනවාදැයි මුලින්ම තීරණය කරමු.

අපගේ Portfolio වෙබ් අඩවියේ අන්තර්ගත විය යුතු දේ:

ශීර්ෂකය (Header): වෙබ් අඩවියේ ඉහළින්ම ඇති, අපගේ නම සහ ප්‍රධාන මෙනුව (Navigation) අඩංගු කොටස.
ප්‍රධාන හැඳින්වීම (Hero Section): පිවිසි සැනින් පෙනෙන, අපගේ නම, රැකියාව, සහ කෙටි හැඳින්වීමක් සහිත ආකර්ෂණීය කොටස.
මා පිළිබඳව (About Me): අපගේ අධ්‍යාපනය, පළපුරුද්ද, සහ රුචිකත්වයන් පිළිබඳව විස්තරාත්මක ඡේදයක්.
මගේ කුසලතා (My Skills): අප සතු කුසලතා (උදා: HTML, CSS, Graphic Design) ලැයිස්තුවක්.
මගේ ව්‍යාපෘති (My Projects): අප විසින් සිදු කරන ලද ව්‍යාපෘති කිහිපයක පින්තූර සහ කෙටි විස්තර.
සම්බන්ධ කරගන්න (Contact) සහ පාදකය (Footer): අපගේ සමාජ මාධ්‍ය (Social Media) ගිණුම් වලට සබැඳි (links) සහ අයිතිය පිළිබඳ සටහනක්.

මෙම සැලැස්ම සරල කඩදාසියක හෝ පොතක, කොටු ඇඳීමෙන් දළ සටහනක් (Wireframe) ලෙස සකස් කරගැනීම, ඉදිරි කේත ලිවීමේ ක්‍රියාවලිය ඉතාම පහසු කරයි.

2 වන කොටස: ගොඩනැගුම් කොටස් - HTML සහ CSS 🏛️

සෑම වෙබ් අඩවියක්ම පාහේ ගොඩනැගී ඇත්තේ මෙම මූලික තාක්ෂණයන් දෙක මතයි.

සරල උපමාව: වෙබ් අඩවියක් යනු මිනිස් සිරුරක් නම්...

HTML (HyperText Markup Language) යනු එහි **ඇටසැකිල්ලයි**. එය ශරීරයේ ව්‍යුහය (අත්, පා, හිස) සහ එහි ඇති අංග (ඇස්, නාසය, කට) මොනවාදැයි නිර්වචනය කරයි.
CSS (Cascading Style Sheets) යනු එහි **පෙනුමයි**. එය සමේ වර්ණය, ඇස්වල වර්ණය, උස, සහ ඇඳ සිටින ඇඳුම් වැනි දෘශ්‍යමය ලක්ෂණ තීරණය කරයි.

මෙම නිබන්ධනය සඳහා, අපි මෙම තාක්ෂණයන් දෙක පමණක් භාවිතා කර, අලංකාර, ක්‍රියාකාරී **ස්ථිතික (Static)** වෙබ් අඩවියක් නිර්මාණය කරමු. වෙබ් අඩවි වලට අන්තර්ක්‍රියාකාරීත්වය (interactivity) එක් කරන JavaScript (JS) - එනම් ශරීරයේ "මාංශ පේශී සහ ස්නායු" - අපි මීළඟ පාඩම් මාලාවකින් ඉගෙන ගනිමු.

3 වන කොටස: වැඩබිම සකස් කිරීම (Setting Up Your Environment) 🛠️

වෙබ් අඩවියක් නිර්මාණය කිරීමට අපට අවශ්‍ය වන්නේ ප්‍රධාන මෙවලම් දෙකකි: (1) කේත ලිවීමට Code Editor එකක්, (2) අපගේ නිර්මාණය බැලීමට Web Browser එකක්.

Code Editor: අපි මේ සඳහා ලොව පුරා වෙබ් සංවර්ධකයින් අතර වඩාත්ම ජනප්‍රිය, නොමිලේ ලබා දෙන **Visual Studio Code (VS Code)** භාවිතා කරමු. එය code.visualstudio.com වෙතින් බාගත කර, සාමාන්‍ය මෘදුකාංගයක් මෙන් ස්ථාපනය කරගන්න.
Web Browser: ඔබ දැනටමත් භාවිතා කරන Google Chrome හෝ Mozilla Firefox ප්‍රමාණවත්ය.
ව්‍යාපෘති ෆෝල්ඩරය (Project Folder):
- ඔබගේ පරිගණකයේ Desktop එකේ හෝ වෙනත් පහසු ස්ථානයක `My-Portfolio` නමින් නව ෆෝල්ඩරයක් සාදන්න.
- VS Code විවෘත කර, `File -> Open Folder` තෝරා, ඔබ දැන් සෑදූ `My-Portfolio` ෆෝල්ඩරය විවෘත කරන්න.
- VS Code හි Explorer පැනලයේ, New File අයිකනය ක්ලික් කර, `index.html` නමින් නව ගොනුවක් සාදන්න.
- නැවතත් New File අයිකනය ක්ලික් කර, `style.css` නමින් තවත් ගොනුවක් සාදන්න.
- New Folder අයිකනය ක්ලික් කර, `images` නමින් ෆෝල්ඩරයක් සාදන්න. අපි වෙබ් අඩවියට යොදන සියලුම පින්තූර මෙහි තැන්පත් කරමු.

4 වන කොටස: ඇටසැකිල්ල සෑදීම - HTML (Building the Skeleton) ☠️

දැන් අපි `index.html` ගොනුව තුළ අපගේ වෙබ් අඩවියේ ව්‍යුහය නිර්මාණය කරමු. VS Code හි හිස් `index.html` ගොනුවක, `!` ටයිප් කර Enter යතුර එබූ විට, HTML හි මූලික සැකිල්ල (Boilerplate) ස්වයංක්‍රීයව යෙදේ.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

දැන් අපි, අපගේ සැලැස්මට අනුව, `` සහ `` tags අතර අපගේ වෙබ් අඩවියේ කොටස් එකින් එක එකතු කරමු. අපි අර්ථය පැහැදිලි කරන Semantic HTML5 tags (`

`, `

`) භාවිතා කරමු.

<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>නිමල් පෙරේරා | My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Header and Navigation -->
    <header>
        <nav>
            <a href="#home" class="logo">නිමල්</a>
            <ul>
                <li><a href="#about">මා පිළිබඳව</a></li>
                <li><a href="#skills">කුසලතා</a></li>
                <li><a href="#projects">ව්‍යාපෘති</a></li>
                <li><a href="#contact">සම්බන්ධ කරගන්න</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- Hero Section -->
        <section id="home" class="hero">
            <img src="images/profile-pic.jpg" alt="නිමල් පෙරේරාගේ පින්තූරය" class="profile-image">
            <h1>හෙලෝ, මම නිමල් පෙරේරා</h1>
            <p class="tagline">වෙබ් නිර්මාණ ශිල්පී සහ ග්‍රැෆික් නිර්මාණකරු</p>
        </section>

        <!-- About Me Section -->
        <section id="about">
            <h2>මා පිළිබඳව</h2>
            <p>මම තාක්ෂණයට ලැදි, නිර්මාණශීලී වෙබ් සංවර්ධකයෙක්මි. පිරිසිදු, භාවිතයට පහසු, සහ ආකර්ෂණීය වෙබ් අඩවි නිර්මාණය කිරීම මගේ අරමුණයි.</p>
        </section>

        <!-- Skills Section -->
        <section id="skills">
            <h2>මගේ කුසලතා</h2>
            <ul class="skills-list">
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
                <li>Adobe Photoshop</li>
                <li>Figma</li>
            </ul>
        </section>
        
        <!-- Projects Section -->
        <section id="projects">
            <h2>මගේ ව්‍යාපෘති</h2>
            <div class="projects-container">
                <div class="project-card">
                    <img src="images/project1.jpg" alt="Project 1">
                    <h3>ව්‍යාපෘතිය 1: Travel Website</h3>
                    <p>සංචාරක ඒජන්සියක් සඳහා නිර්මාණය කළ වෙබ් අඩවිය.</p>
                </div>
                <div class="project-card">
                    <img src="images/project2.jpg" alt="Project 2">
                    <h3>ව්‍යාපෘතිය 2: Restaurant Menu</h3>
                    <p>ආපන ශාලාවක් සඳහා නිර්මාණය කළ ඩිජිටල් මෙනුපත.</p>
                </div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer id="contact">
        <p>මාව සම්බන්ධ කරගන්න: email@example.com</p>
        <p>© 2025 නිමල් පෙරේරා. සියලුම හිමිකම් ඇවිරිණි.</p>
    </footer>

</body>
</html>

දැන් ඔබ මෙම ගොනුව වෙබ් බ්‍රව්සරයකින් විවෘත කළහොත්, ඔබට පෙනෙන්නේ කිසිදු අලංකාරයක් නැති, එක පෙළට දිස්වන අකුරු සහ පින්තූර ගොඩකි. එය හරියට ඇටසැකිල්ලක් වැනිය. දැන් අපි එයට පෙනුමක් ලබා දෙමු.

5 වන කොටස: අලංකාර කිරීම - CSS (Styling the Website) 🎨

දැන් අපි `style.css` ගොනුව විවෘත කර, අපගේ HTML ඇටසැකිල්ලට පණ පොවමු. CSS හිදී, අපි HTML elements තෝරා (select), ඒවායේ පෙනුම වෙනස් කරමු. `selector { property: value; }` යනු එහි මූලික ව්‍යුහයයි.

/* Basic Body Styling */
body {
    font-family: 'Iskoola Pota', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* Header and Navigation Styling */
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* Section Styling */
section {
    padding: 40px 0;
    width: 80%;
    margin: auto;
    text-align: center;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Hero Section */
.hero {
    background-color: #e9ecef;
    padding: 60px 0;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Makes the image round */
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.tagline {
    font-size: 1.2rem;
    color: #666;
}

/* Projects Section Styling */
.projects-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
}

.project-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 45%;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
}

.project-card img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Footer Styling */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

දැන් `index.html` ගොනුව refresh කර බලන්න. ඔබගේ වෙබ් අඩවියට අලංකාර පෙනුමක් ලැබී ඇති ආකාරය ඔබට දැකගත හැක!

6 වන කොටස: ලෝකයට විවෘත කිරීම (Going Live!) 🚀

අප නිර්මාණය කළ වෙබ් අඩවිය දැනට ඔබගේ පරිගණකයේ පමණක් පවතී. එය ලෝකයේ ඕනෑම කෙනෙකුට බැලිය හැකි සේ අන්තර්ජාලයට එක් කිරීමට, අපට **Web Hosting** සේවාවක් අවශ්‍ය වේ.

Domain Name සහ Web Hosting

Domain Name (වසම් නාමය): යනු ඔබගේ වෙබ් අඩවියේ ලිපිනයයි (උදා: `egotechworld.com`).
Web Hosting (වෙබ් සත්කාරකත්වය): යනු ඔබගේ වෙබ් අඩවියේ ගොනු (`index.html`, `style.css`) ගබඩා කර, ඒවා අන්තර්ජාලය හරහා ප්‍රවේශ වීමට සලස්වන සේවාවයි.

නොමිලේ අන්තර්ජාලයට එක් කිරීම: GitHub Pages

ආරම්භකයෙකු ලෙස, ඔබගේ ස්ථිතික (static) වෙබ් අඩවිය නොමිලේම අන්තර්ජාලයට එක් කිරීමට ඇති හොඳම සහ වඩාත්ම වෘත්තීය ක්‍රමය වන්නේ **GitHub Pages** භාවිතා කිරීමයි.

GitHub ගිණුමක් සාදන්න: github.com වෙත ගොස් නොමිලේ ගිණුමක් සාදන්න.
නව Repository එකක් සාදන්න: ඔබගේ GitHub ගිණුමේ, `New` බොත්තම ක්ලික් කර නව repository එකක් සාදන්න. මෙහිදී **Repository name** එක සඳහා, `your-username.github.io` යන ආකෘතිය භාවිතා කිරීම අනිවාර්ය වේ. (`your-username` වෙනුවට ඔබගේ නියම GitHub username එක යොදන්න).
ගොනු Upload කරන්න: ඔබ දැන් සෑදූ repository එකට, ඔබගේ පරිගණකයේ `My-Portfolio` ෆෝල්ඩරයේ ඇති `index.html`, `style.css` ගොනු සහ `images` ෆෝල්ඩරය upload කරන්න.
එපමණයි! මිනිත්තු කිහිපයකට පසු, `https://your-username.github.io` යන ලිපිනයට පිවිසීමෙන් ඔබට ඔබගේ වෙබ් අඩවිය ලොව ඕනෑම තැනක සිට නැරඹිය හැක.

සාරාංශය (Conclusion) ✨

සුබ පැතුම්! ඔබ මෙම මාර්ගෝපදේශය සම්පූර්ණ කළා යනු, ඔබ ඔබගේ පළමු වෙබ් අඩවිය සාර්ථකව නිර්මාණය කර, එය ලෝකයටම පෙනෙන සේ අන්තර්ජාලයට එක් කර අවසන් බවයි. මෙය වෙබ් සංවර්ධන ලෝකයේ ඔබ තබන පළමු, නමුත් ඉතාම වැදගත් පියවරයි.

මෙම ගමනේදී ඔබ ඉගෙන ගත්තා:

වෙබ් අඩවියක් සැලසුම් කර Wireframe එකක් සකස් කරන ආකාරය.
වෙබ් අඩවියක ව්‍යුහය HTML මගින්ද, පෙනුම CSS මගින්ද පාලනය කරන ආකාරය.
VS Code භාවිතා කර කේත ලිවීමට සහ ව්‍යාපෘතියක් සංවිධානය කරන ආකාරය.
HTML tags සහ CSS rules භාවිතා කර සැබෑ වෙබ් පිටුවක් නිර්මාණය කරන ආකාරය.
GitHub Pages වැනි නොමිලේ සේවාවක් භාවිතා කර ඔබගේ නිර්මාණය අන්තර්ජාලයට එක් කරන ආකාරය.

දැන් ඔබගේ ගමන ආරම්භ වී ඇත. තවදුරටත් JavaScript ඉගෙන ගනිමින්, CSS frameworks (Bootstrap වැනි) අත්හදා බලමින්, සහ තවත් සංකීර්ණ ව්‍යාපෘති නිර්මාණය කරමින් ඔබගේ කුසලතා වර්ධනය කරගන්න.

ඊළඟට කුමක්ද? ස්ථිතික වෙබ් අඩවි නිර්මාණයෙන් ඔබ්බට ගොස්, දත්ත සමුදායන් සමඟ ගනුදෙනු කරන, පරිශීලකයන්ට ලොග් විය හැකි, ගතික (Dynamic) වෙබ් යෙදුම් (Web Applications) නිර්මාණය කිරීමට ඔබ කැමතිද? අපගේ **Django** සහ **Laravel** පිළිබඳ නිබන්ධන මාලාව ඒ සඳහා ඔබට මඟ පෙන්වනු ඇත!