Course එකට ආපසු

HTML Deep Dive — ඇටසැකිල්ල

40 මිනිත්තු📖Lecture

HTML Deep Dive — ඇටසැකිල්ල

HTML (HyperText Markup Language) කියන්නේ හැම webpage එකකම skeleton එක. මේකෙන් define කරන්නේ:

  • මොනවද content එක (WHAT)
  • කොහොමද organize කරලා තියෙන්නේ (HOW)
  • Elements අතර relationships

HTML නැතුව webpage එකක් නෑ. CSS එක්ක ලස්සන කරනවා, JS එක්ක interactive කරනවා, ඒත් HTML තමයි foundation එක.

Document Structure එක

හැම HTML page එකක්ම follow කරන්නේ මේ structure එක:

HTML
<!DOCTYPE html>           <!-- 1. මම HTML5 file එකක් -->
<html lang="en">          <!-- 2. Root element එක -->
<head>                    <!-- 3. Metadata (invisible) -->
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>                    <!-- 4. Content (visible) -->
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

කඩලා බලමු:

Document Structure Explained

1. <!DOCTYPE html>

  • Browser එකට කියනවා: "මේක HTML5"
  • First line එකේ තියෙන්න ඕනේ
  • Actually HTML tag එකක් නෙමෙයි

2. <html lang="en">

  • හැම දෙයක්ම wrap කරන root element එක
  • lang="en" language specify කරනවා (accessibility ට help)

3. <head> — Metadata එක

  • Page එක ගැන information (Display වෙන්නේ නෑ)
  • <title>, <meta>, <link>, <script> contain කරනවා

4. <body> — Content එක

  • Page එකේ VISIBLE හැම දෙයක්ම
  • ඔයාගේ actual content හැම එකක්ම මෙතන

Structure Tags

Content organize කරන tags:

<div> — Generic Container

HTML
<div class="card">
    <h2>Title</h2>
    <p>Content මෙතනට</p>
</div>
  • වැඩිපුරම දකින tag එක — දේවල් group කරනවා
  • Inherent meaning නෑ — CSS එක්ක style කරනවා

<header> — Page/Section Header

HTML
<header>
    <img src="logo.png" alt="Company Logo">
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>
  • Page එකේ හෝ section එකේ top එක — logo, navigation contain කරනවා

වෙනත් Structure Tags

Tag
Purpose එක
<nav>
Navigation links
<main>
Primary content
<section>
Thematic grouping
<article>
Independent content
<footer>
Page/section footer

Text Tags

Headings: <h1> සිට <h6> දක්වා

HTML
<h1>ලොකුම Title එක</h1>     <!-- Largest, most important -->
<h2>Section Heading</h2>     <!-- Second level -->
<h3>Subsection</h3>          <!-- Third level -->
<h4>Minor heading</h4>       <!-- Fourth level -->

Heading Rules

  • Order එකට use කරන්න (h1 ඉඳන් h4 ට skip කරන්න එපා)
  • Page එකකට ONE <h1> විතරයි
  • SEO සහ accessibility ට important

වෙනත් Text Tags

HTML
<!-- Paragraph -->
<p>මේක paragraph එකක්.</p>
 
<!-- Inline container for styling -->
<p>මේකේ <span class="highlight">highlight</span> text තියෙනවා.</p>
 
<!-- Hyperlink -->
<a href="https://google.com">Google යන්න</a>
<a href="/about">About Page</a>
 
<!-- Emphasis -->
<p>මේක <strong>හරිම important</strong> information.</p>
<p>මේක <em>emphasize</em> කරලා.</p>

Interactive Tags

<button> — Clickable Button

HTML
<button>Click Me</button>
<button type="submit">Submit Form</button>
<button onclick="doSomething()">Do Something</button>

Button vs Link

  • Buttons දේවල් DO කරනවා (submit, toggle, calculate)
  • Links places වලට GO කරනවා (pages වලට navigate)

<input> — User Input

HTML
<input type="text" placeholder="නම ලියන්න">
<input type="email" placeholder="Email ලියන්න">
<input type="password" placeholder="Password ලියන්න">
<input type="checkbox"> Remember me
<input type="submit" value="Submit">

<form> — Form Container

HTML
<form action="/submit" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Login</button>
</form>

වෙනත් Input Elements

HTML
<!-- Multi-line text -->
<textarea rows="4" placeholder="Message ලියන්න..."></textarea>
 
<!-- Dropdown selection -->
<select name="country">
    <option value="">Country එකක් select කරන්න</option>
    <option value="lk">Sri Lanka</option>
    <option value="us">United States</option>
</select>

Media Tags

<img> — Image

HTML
<img src="photo.jpg" alt="ලස්සන sunset එකක්">
<img src="https://example.com/image.png" alt="External image">

alt හැමතිස්සෙම Include කරන්න!

  • alt accessibility ට description දෙනවා
  • Screen readers ට required
  • Image load වෙන්නේ නැත්තම් show වෙනවා

Video සහ Audio

HTML
<!-- Video player -->
<video src="movie.mp4" controls width="640">
    ඔයාගේ browser එක video support කරන්නේ නෑ.
</video>
 
<!-- Audio player -->
<audio src="song.mp3" controls>
    ඔයාගේ browser එක audio support කරන්නේ නෑ.
</audio>

Attributes තේරුම් ගනිමු

Attributes elements ගැන additional information දෙනවා:

HTML
<a href="https://google.com" target="_blank" class="nav-link" id="home-link">
   │           │                    │                │               │
   └─ tag      └─ යන තැන            └─ new tab       └─ CSS styling  └─ unique ID

Common Attributes

Attribute
Purpose එක
id
Unique identifier
class
Styling group
src
Source URL
href
Link destination
alt
Image description
type
Input type
placeholder
Input hint

id vs class

id
class
Unique — page එකකට එකයි
Reusable — ගොඩක් share කරන්න පුළුවන්
CSS එකේ #myId
CSS එකේ .myClass
Specific elements වලට
Groups/categories වලට

හැම එකම එකතු වෙලා

Complete page structure එකක්:

HTML
<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>මගේ Website එක</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <section id="hero">
            <h1>මගේ Website එකට Welcome!</h1>
            <p>Main heading සහ introduction.</p>
            <button>Get Started</button>
        </section>
        
        <section id="features">
            <h2>Features</h2>
            <div class="feature-card">
                <img src="icon1.png" alt="Feature 1">
                <h3>Fast</h3>
                <p>Lightning quick performance.</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My Company</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

Lesson Summary

HTML Document Structure

Text
<!DOCTYPE html>
<html>
  <head> (invisible metadata) </head>
  <body> (visible content) </body>
</html>

Tag Categories

Category
Tags
Structure
div, header, main, footer, section, article, nav
Text
h1-h6, p, span, a, strong, em
Interactive
button, input, form, select, textarea
Media
img, video, audio

Key Attributes

  • id = unique identifier
  • class = styling group
  • src = media වල source
  • href = link destination
  • alt = image description

📝 Quiz

1/3

<head> section එකේ යන්නේ මොනවද?

Next Up

Lesson 2.3: CSS Deep Dive
CSS එක්ක skeleton එක beautiful designs වලට transform කරන හැටි ඉගෙන ගමු!