ICT 9/10 – HTML
Project 1 – Blogging with Headers and Images
Create a webpage blog about you and your day-to-day ∼ Morning of...
life for five consecutive school days, Monday to Friday. ∼ Period 1
Split each day into several chronological sections: ∼ Period 2
∼ Lunch
∼ Period 3
Step 1 - Blogging Content. Start by typing your unique ∼ Period 4
blog content into a Word document. For example, you ∼ After
might write the following in the “morning of” section. school...
“Today I woke up early. Not bad for a Monday! Before school, I
went to the pool and had a 1 km swim. Feels good to be active
in the morning! Afterwards, the drive to school was easy! :)
Made it with time to spare.”
You are NOT required to do all sections for all days but do most of them.
You can also choose to do a fictitious blog about yourself or someone
else. The content of your blog will drive the structure of your blog.
Step 2 - Using Images. Take
them using your cell phone,
digital camera, or download
images from the internet.
When it is time to use these
images in your webpage, they
must be stored in the same
folder as your HTML file. You
can use CSS to resize, display,
and position the images. You may want to crop or colorize in Photoshop.
HTML Project 1 – week long blog
Images can be used in a variety of ways:
• to display content – “a picture is worth a thousand
words”.
• decoration – i.e. use a background image, and to
• create structure – i.e. use images to show a web
page section.
One common trick is to use the same color for your
background as the background color of the image. This
effect creates a seamless transition from the image to
the page.
Step 3 – Structure. Organize your content into <h1>, <h2>, and <h3>
tags. Since <h1> can be used only once per webpage, it will be the title
of your entire blog. There will be five <h2> tags, one for each day of the
week. There will be about 5 × 7 = 35 <h3> tags, one for each period,
lunch or before/after school time. The html script for a particular day
should look something like the following:
Separate each day using a horizontal rule <hr> tag.
HTML Project 1 – week long blog
Step 4 – Styles. Apply CSS rules to the header tags, paragraph tags, and
image tags. Change the font, size and the color of your text. Link Google
fonts to your web page. Images can be displayed with borders, rounded
corners and they can be resized.
Use internal CSS rules. Recall that these rules are in the <head></head>
section of the HTML document nested between a pair of <style></style>
tags. Use two types of selectors:
1. Type selectors – These are used to apply a style to ALL tags of a
particular type. For example, the CSS script below will change the font
of all paragraphs to ariel:
p {
font-family: ariel;
}
2. Class selectors – These are used if you want a style to be applied to a
specific selection of HTML tags. In the <body> section, each selected
element must contain a class attribute. For example, the class selector
below changes the color of the horizontal rule:
/* CSS rule in head section */
[Link] {
color: darkgrey;
}
<!-- tag with attribute in body section -->
<hr class = ’shade’>
Any style you want to be applied to all tags use a type selector. To apply
a style to individual tags, use a class selector / class attribute pair.
HTML Project 1 – week long blog
Rubric
Item Score Points
1. Written Content /5
2. <p> style /2
3. <img> tags working /2
4. <img> style /2
5. <h1> tag /1
6. <h1> style /1
7. <h2> tags /2
8. <h2> style /2
9. <h3> tags /2
10. <h3> style /2
11. <hr> tags /1
12. <hr> style /1
Use of CSS type and
13. /2
class selectors.
CSS background color
14. /2
or image
15. Spacing and Indenting /1
16. Comments /1
17. File Name /1
Total: / 30
HTML Project 1 – week long blog