Скачать или смотреть ☀️ HTML Tutorial Beginner: Simple Weather Forecast Page

Source Code:
https://github.com/tinydroplets/learn...

📝 Line-by-Line Explanation of the Code 🚀
🔹 html - This starts the webpage structure. Everything inside it forms the webpage.

🔹 head - This section is for metadata and styling. Right now, it contains an empty style tag, meaning no additional CSS is applied.

🔹 body bgcolor="#e6f2ff" - The entire page background is set to a light blue color (#e6f2ff), giving it a soft and clean look. 🎨

📌 Header Section (Title Bar)
🔹 table bgcolor="white" width="100%" - A full-width table with a white background to display the app title.

🔹 tr - Defines a row inside the table.

🔹 td align="center" - This centers the content inside the row.

🔹 font face="Arial" size="6" - Sets the text to the Arial font with a large size (6).

🔹 b☀️ Weather Forecast App 🌧️**/b** - Bold text for the app title, with sun and rain emojis to make it visually appealing.

📌 Search Box for City Input
🔹 table bgcolor="white" width="100%" cellpadding="20px" - Another full-width white table with extra spacing (20px padding) to keep it clean.

🔹 form action="#" - A form for users to enter a city name (though it doesn’t submit anywhere since # is used).

🔹 input type="text" placeholder="Enter a city name..." size="30" - A text input field where users can type the name of a city. The placeholder text provides guidance.

🔹 button type="submit" - A clickable button labeled Search 🔍 to simulate fetching the weather for the entered city.

📌 Weather Display Section
🔹 table bgcolor="white" width="100%" cellpadding="20px" - Another white table, full-width, with padding for spacing to display the weather details.

🔹 tr bgcolor="#0066cc" - The first row has a dark blue background (#0066cc), making it stand out as a header.

🔹 th colspan="2" - A header cell spanning two columns, displaying the location name London, UK in large white text.

🔹 tr align="center" - Another row, center-aligned, for weather details.

🔹 td width="50%" - The first column takes up 50% of the row width and contains:

A big sun emoji ☀️ to represent the weather.
The temperature (22°C) in a large font.
The weather condition (Sunny) in a smaller, gray-colored font.
🔹 td - The second column shows extra weather details in gray text:

Humidity: 65%
Wind Speed: 12 km/h
Pressure: 1015 hPa
📌 Footer Section
🔹 table bgcolor="#006cc" width="100%" cellpadding="10px" - A full-width footer table with a dark blue background and extra padding.

🔹 td align="center" - Centers the text inside the footer.

🔹 font color="white" size="2" - Displays the footer text in small white font.

🔹 Weather App © 2025 | All Rights Unreserved :) - A playful copyright message with a smiley face to make it friendly! 😃