Day 2: More on HTML & Basic CSS

Day 2: More on HTML – Lists, Links, Images, Tables & Basic CSS

HTML Lists

Websitil contents list aki display cheyan Ordered List (OL) & Unordered List (UL) upayogikkanam.

Example 1: Unordered List


        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
        </ul>

HTML Links

Website-il ninn another page-il jump cheyan anchor tag (`<a>`) upayogikkuka.

Example 2: Simple Link


        <a href='https://www.google.com'>Go to Google</a>

HTML Images

Websitil images add cheyan `<img>` tag upayogikkuka.

Example 3: Display an Image


        <img src='https://via.placeholder.com/150' alt='Sample Image'>

HTML Tables

Data properly display cheyan websitil tables upayogikkuka.

Example 4: Simple Table


        <table border='1'>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Rahul</td>
                <td>25</td>
            </tr>
        </table>

Basic CSS: Selectors & Properties

Website-il style add cheyan CSS (Cascading Style Sheets) upayogikkuka. HTML content attractive aayittu kanikkan CSS aanu sahayikkunnath. Color, font styles, layout positioning, spacing ellam CSS-upayogikkunnu define cheyyunnath.

Examples

Example 1: Text Color

Text-inte color blue aakkan vendi thazhe koduthittulla code upayogikkam.

  
        <style> p { color: blue; } </style>
  
        <p>This is blue text</p>

Example 2: Button Styling

Oru button attractive aayittum user-friendly aayittum display cheyyan vendi CSS koduthittulla example thazhe kaanuka.

  
        <style> button { background: green; color: white; padding: 10px; } </style>
  
        <button>Click Me</button>

CSS Selectors

Selectors CSS-le essential part aanu. Ithu kodukkumbol HTML-le specific elements select cheyyuka.

1. Element Selector

Specific elements (p, h1, div etc.) stylize cheyyan vendi ithu upayogikkuka.

  
        p { color: red; }

2. Class Selector (`.` symbol)

Multiple elements same style venam enkil `class` kodukkuka.

  
        .my-text { color: green; font-size: 20px; }

3. ID Selector (`#` symbol)

Specific element uniquely stylize cheyyan `id` upayogikkuka.

  
        #special { color: blue; font-weight: bold; }

CSS Properties

CSS properties elements-ine different styles kodukkan sahayikkunnu. Below are some important properties:

1. Background Color

Element-inde background color define cheyyan.

  
        body { background-color: #f4f4f4; }

2. Text Alignment

Text-align koduthu content center, left, allengil right-align cheyyam.

  
        h1 { text-align: center; }

3. Padding & Margin

Padding content-um aduthulla edge-um idayil space kodukkunnu. Margin contentum purathulla elementum idayil space kodukkunnu.

  
        p { margin: 20px; padding: 10px; }

CSS sheriyaayi upayogichaal oru plain HTML page professional look-um feel-um kodukkam. Ningalude creativity apply cheythu ithu kooduthal attractive aakunnath aanu designinte success.

Today's Tasks (Practice)

✅ *Test 1:* List create cheyth run cheyyuka.
✅ *Test 2:* Image add cheyyuka.
✅ *Test 3:* Table border color change cheyyuka (Hint: `border-color: red;`)
✅ *Test 4:* Button-inte background color blue aakkuka.

Conclusion (What You Learned Today?)

✔ HTML Lists (Ordered & Unordered)

✔ Links, Images, Tables

✔ CSS Basics (Syntax, Selectors, Properties)

✔ Hands-on Tasks

Next Session

Day 3 – Forms, Inputs, Buttons & Advanced CSS Styling

Module 1 Session 2