Scribd
Upload
2 views2 pages

HTML CSS Topic 1 Boilerplate

The document provides a guide on HTML boilerplate and basic page structure, explaining its components and purpose. It includes example HTML and CSS code to illustrate how to set up a simple web page. Additionally, it offers exercises and a mini project for practical application of the concepts learned.

Uploaded by

losikeeregae0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

HTML CSS Topic 1 Boilerplate

The document provides a guide on HTML boilerplate and basic page structure, explaining its components and purpose. It includes example HTML and CSS code to illustrate how to set up a simple web page. Additionally, it offers exercises and a mini project for practical application of the concepts learned.

Uploaded by

losikeeregae0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML & CSS Guide with Real-World Examples

Topic 1: HTML Boilerplate & Basic Page Structure

Explanation

The HTML boilerplate is the basic structure of any web page. It sets up the document type, language,

character encoding, and includes the main <head> and <body> sections. CSS is used to add styles like fonts,

colors, and spacing to make the page visually appealing.

HTML Code

HTML Code
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page with basic structure and styling.</p>
</body>
</html>
HTML & CSS Guide with Real-World Examples

CSS Code

CSS Code
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
background-color: #f9f9f9;
margin: 20px;
}

h1 {
color: #0066cc;
}

p {
line-height: 1.6;
}

Real-World Example

This structure is used in almost every web project. It's the foundation for creating full websites and web

applications.

Exercise

Create a new HTML file with the boilerplate structure. Add a title, heading, and a paragraph. Link it to a CSS

file and apply basic styles.

Mini Project

Build a personal homepage with your name, a welcome message, and a brief description of yourself. Style

the page using CSS to make it visually appealing.

You might also like