HTML-Grade 6
Code: 1 - Body Attributes
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body bgcolor="lightblue" text="darkblue" link="red" alink="green" vlink="purple">
<h1>Welcome to My Web Page!</h1>
<p>This is my first web page using HTML.</p>
<p>I am learning how to change the background and text colors using body
attributes.</p>
<h2>My Favorite Hobbies</h2>
<ul>
<li>Reading</li>
<li>Drawing</li>
<li>Playing Football</li>
</ul>
<p>Click here to visit <a href="[Link]
</body>
</html>
Explanation:
Attribute Description Example
bgcolor Changes the background color bgcolor="lightblue"
text Sets the color of the text text="darkblue"
link Color of unvisited links link="red"
alink Color when link is active (clicked) alink="green"
vlink Color of visited links vlink="purple"
Code 2: Background Image
<!DOCTYPE html>
<html>
<head>
<title>My Web Page with Background</title>
</head>
<body background="[Link]
b723cf961d3e"
text="darkblue" link="red" alink="green" vlink="purple">
<h1> Welcome to My Web Page </h1>
<p>This is my first web page with a <b>background image</b>.</p>
<hr> <!-- Empty tag used for a horizontal line -->
<h2>About Me</h2>
<p>I love learning HTML and creating colorful pages!<br> <!-- Empty tag used for
line break -->
I also enjoy drawing, reading, and coding. </p>
<p>Click here to visit <a href="[Link]
<hr>
<p><i>Created by: Grade 6 Students</i></p>
</body>
</html>
Explanation:
Empty Tag Purpose
<br> Adds a line break
<hr> Adds a horizontal line
Body Attribute Use
background Adds a background image
text Sets color of text
link, alink, vlink Control link colors
Code 3: Font Attributes
<!DOCTYPE html>
<html>
<head>
<title>My Web Page with Font Tags</title>
</head>
<body bgcolor="lightyellow" text="darkblue">
<h1><font color="darkred" face="Comic Sans MS" size="6"> Welcome to My
Web Page </font></h1>
<p><font color="green" face="Arial" size="4">
This is my first web page using <b>font attributes</b>!<br>
I can change the <b>color</b>, <b>style</b>, and <b>size</b> of my text easily.
</font></p>
<hr>
<p><font color="darkmagenta" face="Georgia" size="4">
Visit <a href="[Link] to explore more!
</font></p>
<hr>
<p><i><font color="gray" face="Comic Sans MS">Created by: Grade 6 Student
✨</font></i></p>
</body>
</html>
Explanation:
Attribute Example Use
color <font color="blue"> Changes the text color
face <font face="Comic Sans MS"> Changes the font style
size <font size="5"> Changes the font size
Code 4: Inline Styling
<!DOCTYPE html>
<html>
<head>
<title>My First Styled Page</title>
</head>
<body background="[Link]
35a269479413" text="darkblue">
<h1 style="color: darkred; text-align: center;"> Welcome to My Web Page
</h1>
<p style="font-size: 18px; color: navy; background-color: lightyellow; padding:
10px;">
This is my first web page with <b>inline styling</b>!<br>
Inline styling helps us change the color, font, and background directly inside the
tag.
</p>
<hr> <!-- Empty tag for a horizontal line -->
<p style="color: purple;">Click here to visit <a
href="[Link]
<hr>
<p><i>Created by: Grade 6 Student ✨</i></p>
</body>
</html>
Explanation:
Feature Example Purpose
Inline style style="color: red;" Adds design directly to the tag
Background image body background="..." Adds a picture to the page
Empty tags <hr>, <br> Add lines or breaks
Padding padding: 10px; Adds space inside text boxes
Code 5: CSS Sample
<!DOCTYPE html>
<html>
<head>
<title>My First CSS Page</title>
<!-- Internal CSS starts here -->
<style>
/* Styles for the whole web page */
body {
background-color: lightyellow; /* sets background color */
font-family: Arial; /* changes the font style */
color: darkblue; /* changes the color of normal text */
}
/* Styles for the main heading */
h1 {
color: darkred; /* heading text color */
text-align: center; /* moves heading to the center */
}
/* Styles for paragraphs */
p{
background-color: lightblue; /* background color for paragraph box */
padding: 10px; /* adds space inside the paragraph box */
border-radius: 10px; /* rounds the corners of the box */
font-size: 18px; /* increases the text size */
}
/* Styles for subheadings */
h2 {
color: green; /* sets subheading color */
}
/* Styles for the list box */
ul {
background-color: #f0f8ff; /* sets a light background for list */
width: 250px; /* sets the width of the list area */
padding: 10px; /* adds space inside the box */
border-radius: 8px; /* gives the box rounded corners */
}
/* Styles for list items */
li {
color: purple; /* sets the color of each list item */
}
</style>
<!-- Internal CSS ends here -->
</head>
<body>
<!-- Main content of the web page -->
<h1> Welcome to My CSS Page </h1>
<p>This is my first web page using <b>CSS</b>!<br>
CSS helps make our web pages look colorful and beautiful. </p>
<h2>My Favorite Hobbies</h2>
<ul>
<li>Drawing</li>
<li>Reading</li>
<li>Playing Football</li>
</ul>
<p><i>Created by: Grade 6/7 Student ✨</i></p>
</body>
</html>
Explanation:
Part Meaning Example Explanation
Cascading Style Used to design and
CSS —
Sheets decorate HTML pages
It points to the HTML
Tells which tag to
Selector body, h1, p element you want to
style
style
Part Meaning Example Explanation
It defines the style
What you want to color, font-size,
Property background-color
feature you are
change
changing
How you want to It tells the browser what
Value red, 20px, center
change it value to apply
Combination of
p { color: blue; }
A single style
Rule selector, property, and
instruction
value
Internal CSS written inside <style> ... </style>
Used in the same
CSS <style> tag HTML file
External CSS in another file <link rel="stylesheet" Keeps code clean and
CSS (linked with <link>) href="[Link]"> reusable
Inline CSS written directly <p style="color:red;">
Quick styling for one
CSS inside an HTML tag element only
Common CSS Properties:
Property What It Does Example
color Changes text color color: red;
background-color Changes background color background-color: yellow;
font-size Changes the size of the text font-size: 20px;
font-family Changes the font style font-family: Arial;
text-align Aligns text (left, right, center) text-align: center;
padding Adds space inside a box padding: 10px;
margin Adds space outside a box margin: 20px;
border Adds a border around elements border: 2px solid blue;
border-radius Rounds the corners of a box border-radius: 10px;
width Sets the width of an element width: 200px;
