Day 2: More on HTML and Basic CSS

WEBZ - Web Development Course

Day 2: More on HTML and Basic CSS

More on HTML

HTML Lists

HTML provides two types of lists: ordered lists (<ol>) and unordered lists (<ul>).

Unordered List:


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered List:


<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

HTML Links

Links are created using the <a> tag. The href attribute specifies the URL of the page the link goes to.


<a href="https://www.example.com">Visit Example</a>

HTML Images

Images are inserted with the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image.


<img src="path/to/image.jpg" alt="Description of the image">

HTML Tables

Tables are created using the <table> tag along with <tr> for table rows, <th> for table headers, and <td> for table data cells.


<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Basic CSS

CSS Syntax

CSS (Cascading Style Sheets) is used to style HTML elements. CSS rules consist of a selector and a declaration block.


selector {
    property: value;
}

Example:


h1 {
    color: blue;
    text-align: center;
}

CSS Selectors

Selectors specify which HTML elements the CSS rule applies to. Common selectors include:

Element Selector: Targets all instances of an element.


p {
    color: red;
}

Class Selector: Targets elements with a specific class attribute. Class names are prefixed with a dot (.).
```
.my-class {
    font-size: 20px;
}
                    
```
ID Selector: Targets a single element with a specific ID attribute. IDs are prefixed with a hash (#).
```
#my-id {
    background-color: yellow;
}
                    
```

CSS Properties

CSS properties define the styles applied to elements.

Color: Sets the text color.
```
color: blue;
                    
```

Background-Color: Sets the background color.


background-color: lightgray;

Font-Size: Sets the size of the font.
```
font-size: 16px;
                    
```

Text-Align: Aligns the text inside an element.


text-align: center;

Summary

Today, we've covered:

HTML Lists: Learned how to create ordered lists (<ol>) and unordered lists (<ul>).
HTML Links: Learned how to create links using the <a> tag.
HTML Images: Learned how to insert images using the <img> tag.
HTML Tables: Learned how to create tables using the <table> tag and its associated elements (<tr>, <th>, and <td>).
Basic CSS: Covered CSS syntax, selectors (element, class, and ID), and basic properties (color, background-color, font-size, text-align).

Putting It All Together

Let's create a webpage combining what we've learned so far.

Steps to run this code

Download "Code editor" from playstore

create new project

Write or copy the html code from the box

save the file as index.html (make a new folder in your file for this project)

After that, Create a new file and write or copy the css code from the box and past in it

Click on three dots in right-top side and click on "Syntax {}" ,scroll down and select "html" from the list and click 'ok',now you can see the whole code are filled with different colours

save this file as style.css in same folder(the folder which have that html file)

finally you get it 🤩

Back to that html file and run it by clicking the play symbol

watch this tutorial video (if you don't understand what i said)

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 2: More on HTML and Basic CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Day 2: More on HTML and Basic CSS</h1>
    </header>

    <section>
        <h2>HTML Lists</h2>
        <h3>Unordered List:</h3>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>

        <h3>Ordered List:</h3>
        <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>
    </section>

    <section>
        <h2>HTML Links</h2>
        <a href="https://www.example.com">Visit Example</a>
    </section>

    <section>
        <h2>HTML Images</h2>
        <img src="path/to/image.jpg" alt="Description of the image">
    </section>

    <section>
        <h2>HTML Tables</h2>
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </table>
    </section>
</body>
</html>

CSS code

<style>
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}
header {
    background-color: #007bff;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
header h1 {
    margin: 0;
    font-size: 2em;
}
section {
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
    color: #007bff;
}
h3 {
    color: #0056b3;
}
ul, ol {
    margin: 10px 0;
    padding-left: 20px;
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 10px;
    text-align: left;
}
th {
    background-color: #007bff;
    color: #fff;
}
</style>

Practice Exercise

Try creating a simple webpage that includes the following:

An unordered list with at least three items.
A link to an external website.
An image with alternative text.
A table with at least two rows and two columns.
Use CSS to style your webpage with the following:
- Set the text color of all paragraphs to blue.
- Set the background color of the page to light gray.
- Center-align all headings.

Sample project: Let's try it

steps to do it

Create a new file for it on the app.
write or copy the code from the given box.
Save this file as "project2.html".
Run it by clicking the play symbol
Test and get the result
you can customize the code as your wish

project code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Clock with Day/Night Toggle</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: #2E2E2E;
            font-family: 'Raleway', sans-serif;
            transition: background 0.5s;
            position: relative;
        }
        .container {
            text-align: center;
            color: white;
        }
        .clock {
            font-size: 4em;
            margin: 20px 0;
            position: relative;
            width: 250px;
            height: 250px;
            border: 15px solid #3a3a3a;
            border-radius: 50%;
            background: #2e2e2e;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            pointer-events: none;
        }
        .hand.hour {
            height: 60px;
            width: 8px;
            background: yellow;
            border-radius: 6px 6px 0 0;
            transform: rotate(0deg);
        }
        .hand.minute {
            height: 90px;
            width: 6px;
            background: red;
            border-radius: 6px 6px 0 0;
            transform: rotate(0deg);
        }
        .hand.second {
            height: 110px;
            width: 4px;
            background: green;
            border-radius: 6px 6px 0 0;
            transform: rotate(0deg);
        }
        .digital-clock {
            font-size: 2em;
            margin-top: 20px;
            padding: 10px 20px;
            background: #3a3a3a;
            border-radius: 15px;
            display: inline-block;
        }
        .digital-clock span {
            color: yellow;
        }
        .toggle-switch {
            margin-top: 20px;
            width: 100px;
            height: 50px;
            background: #3a3a3a;
            border-radius: 25px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }
        .toggle-switch .toggle {
            width: 45px;
            height: 45px;
            background: yellow;
            border-radius: 50%;
            position: absolute;
            top: 2.5px;
            transition: all 0.3s;
        }
        .toggle-switch.day .toggle {
            left: 2.5px;
        }
        .toggle-switch.night .toggle {
            left: 52.5px;
            background: gray;
        }
        .toggle-switch .icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .toggle-switch .icon.day {
            left: 10px;
            color: yellow;
        }
        .toggle-switch .icon.night {
            right: 10px;
            color: gray;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="clock" id="analog-clock">
            <div class="hand hour" id="hour-hand"></div>
            <div class="hand minute" id="minute-hand"></div>
            <div class="hand second" id="second-hand"></div>
        </div>
        <div class="digital-clock" id="digital-clock">
            <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span> <span id="ampm">AM</span>
        </div>
        <div class="toggle-switch day" id="toggle-switch" onclick="toggleDayNight()">
            <div class="toggle"></div>
            <div class="icon day">☀️</div>
            <div class="icon night">🌙</div>
        </div>
    </div>
    <script>
        function updateTime() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            const isAm = hours < 12;
            
            const hourHand = document.getElementById('hour-hand');
            const minuteHand = document.getElementById('minute-hand');
            const secondHand = document.getElementById('second-hand');
            
            hourHand.style.transform = `rotate(${hours % 12 * 30 + minutes * 0.5}deg)`;
            minuteHand.style.transform = `rotate(${minutes * 6 + seconds * 0.1}deg)`;
            secondHand.style.transform = `rotate(${seconds * 6}deg)`;
            
            document.getElementById('hours').innerText = String(hours % 12 || 12).padStart(2, '0');
            document.getElementById('minutes').innerText = String(minutes).padStart(2, '0');
            document.getElementById('seconds').innerText = String(seconds).padStart(2, '0');
            document.getElementById('ampm').innerText = isAm ? 'AM' : 'PM';
        }
        
        function toggleDayNight() {
            const toggleSwitch = document.getElementById('toggle-switch');
            const isDay = toggleSwitch.classList.toggle('night');
            toggleSwitch.classList.toggle('day', !isDay);
            document.body.style.background = isDay ? '#2E2E2E' : '#87CEEB';
        }
        
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>

Project result

Clock with Day/Night Toggle

Module -1 | Day 2