Module 1 Session 1

Day 1: Introduction to HTML & CSS

Day 1: Introduction to HTML & CSS

Web Development ennathu entha?

Web development ennathu websites create cheyunna oru process aanu. Ithu 3 main areas-il divide cheyyunnu:

  • Frontend Development: Users kandath design, layout, buttons okke aanu.
  • Backend Development: Server-side logicsum database managementum aanu.
  • Full-Stack Development: Frontendum backendum onnu combine cheythath aanu.

Smartphonil Web Development padikkan enthina?

Innu smartphones powerful aanu, codinginu computer venda. Right apps use cheythal, smartphoneil ninn website create, test, deploy cheyyam.

Ningalk Venda Tools

  1. Code Editors:
    • Acode: Lightweight code editor Androidinu vendi.
    • TrebEdit: Simple web-based code editor.
    • Dcoder: Mobile IDE with multiple language support.
  2. Version Control: GitHub Mobile for code management.
  3. Terminal Emulator: Termux for advanced coding tasks.
  4. Browser: Chrome/Firefox for testing.

HTML & CSS Enthina?

Website create cheyyan HTML (HyperText Markup Language) & CSS (Cascading Style Sheets) use cheyyunnu.

  • HTML → Web page content (text, images, buttons, forms) add cheyyan.
  • CSS → HTML elements design & style cheyyan (color, size, spacing, animations).

HTML Structure (HTML-inde Adisthaanam)

Oru HTML page 3 main sections undu:

Example: HTML-inde proper structure:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My First Web Page</title>
        </head>
        <body>
            <h1>Welcome to My Web Page</h1>
            <p>Ithu ente aadya HTML page aanu.</p>
        </body>
        </html>

Explanation (Ethil Enthaanu?)

  • <!DOCTYPE html> → HTML5 aanu ennu browser-ne parayan.
  • <html lang="en"> → HTML document start cheyyunna location.
  • <head> → Title, meta data, styles, fonts, etc.
  • <title> → Browser tab title.
  • <body> → Main user content (headings, paragraphs, images).
  • <h1> → Heading tag.
  • <p> → Paragraph content.

Example: HTML & CSS illatha Page

Oru basic HTML page nokkam:

        <!DOCTYPE html>
        <html>
        <head>
            <title>My First Page</title>
        </head>
        <body>
            <h1>Welcome to My Website</h1>
            <p>This is my first webpage.</p>
        </body>
        </html>

Preview

Welcome to My Styled Web Page!

Ithu ente aadya HTML + CSS Page aanu.

Click Here

Problem: Ithu design, color, alignment onnum illa. Page boring aanu.

CSS – Design & Styling

HTML website plain aanu. CSS use cheythal page attractive aakkkam.

Example: HTML + CSS Web Page

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My Styled Web Page</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    text-align: center;
                    padding: 20px;
                }
                h1 {
                    color: #333;
                    font-size: 30px;
                }
                p {
                    font-size: 18px;
                    color: #666;
                }
                .btn {
                    display: inline-block;
                    background: blue;
                    color: white;
                    padding: 10px 20px;
                    text-decoration: none;
                    border-radius: 5px;
                }
            </style>
        </head>
        <body>

            <h1>Welcome to My Styled Web Page!</h1>
            <p>Ithu ente aadya HTML + CSS Page aanu.</p>
            <a href="#" class="btn">Click Here</a>

        </body>
        </html>

Preview

Welcome to My Styled Web Page!

Ivide oru blue button und:

Click Here

Solution: Ithinu design, color, alignment ellam und. Page rasamund.

Explanation (CSS engane work cheyunu?)

  • <style> → HTML-ൽ *CSS* direct aayi add cheyyan use cheyyunnu.
  • Selectors → CSS rules apply cheyyan selectors aanu upayogikkunnath.
  • body → Page-inde background color, text alignment.
  • h1 → Headings-inde color & font size.
  • p → Paragraph text-inde size & color.
  • .btn → Button-inde design (background color, padding, border radius).

Setting Up Your Environment

  1. Acode allenkil TrebEdit Play Store-il ninn install cheyyuka.
  2. File manager upayogichu WebDev enna folder create cheyyuka.
  3. GitHub Mobile install cheyyuka, account create cheyyuka.
  4. Termux install cheyyuka (optional).

Ningalude Aadya HTML File

Ee steps follow cheyyuka:

    
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first webpage.</p>
</body>
</html>

HTML & CSS-ൽ Ningalude Aadya Testukal (Tasks)

  • ✅ Test 1: Code copy cheythu ningalude mobile code editor-il run cheyyuka.
  • ✅ Test 2: Button color red aakkan try cheyyuka. (Hint: .btn { background: red; })
  • ✅ Test 3: Web page-il oru image add cheyyuka. (Hint: <img src="your-image.jpg">)
  • ✅ Test 4: Puthiya oru section add cheyyuka (Example: *About Us section*).

Conclusion (Innu Ningal Padichath?)

  • HTML-inde *Basic Structure* (head, body, elements).
  • HTML & CSS *Integration* (unstyled vs styled web pages).
  • CSS *Basic Syntax* (selectors, properties, values).
  • First Hands-on *Coding Task* (color, button styling, image insertion).