O Level Exam : Practical Question
📝 HTML
🎨 CSS
⚡ Java Script
<!DOCTYPE html> <html> <head> <title>Website Components</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h1 { font-size: 24px; font-weight: bold; } .component { margin-bottom: 30px; } .component img { width: 300px; height: auto; border: 1px solid #ccc; display: block; margin-top: 10px; } .caption { font-style: italic; margin-top: 5px; } </style> </head> <body> <h1>Website Components</h1> <div class="component"> <h3>Header</h3> <p> The header is the top section of a website. It usually contains the logo, navigation menu, and sometimes a search bar. </p> <img src="https://via.placeholder.com/300x120?text=Header+Layout" alt="Header Layout"> <div class="caption">Example of a website header layout</div> </div> <div class="component"> <h3>Content Area</h3> <p> The content area displays the main information of the website such as text, images, videos, and articles. </p> <img src="https://via.placeholder.com/300x150?text=Content+Area" alt="Content Area Layout"> <div class="caption">Example of a content section layout</div> </div> <div class="component"> <h3>Footer</h3> <p> The footer is located at the bottom of the page. It usually contains copyright information, contact details, and important links. </p> <img src="https://via.placeholder.com/300x100?text=Footer+Layout" alt="Footer Layout"> <div class="caption">Example of a website footer layout</div> </div> </body> </html>
▶ Run Code
🖥 Output: