Scribd
Upload
3 views

AssignmentOne March2024 WD Practical HTML&CSS

Uploaded by

earnesteamoh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

AssignmentOne March2024 WD Practical HTML&CSS

Uploaded by

earnesteamoh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

21st MARCH, 2024

MZUZU UNIVERSITY
DEPARTMENT OF ICT
BICT2304 – WEB DESIGN

INDIVIDUAL ASSIGNMENT 1: BICT, ICTEDU, BICTU


INSTRUCTIONS
1. Attempt ALL
2. You will be required to read other content not mentioned in class
3. Do not use WYSIWYG editors (e.g. Dreamweaver)
4. Work with a latest version of Mozilla Firefox or any latest browser

Part 1: Webpage 1
Create a simple personal web page, personal.html, that contains at least the following
items:
1. Your name at the top of the page as an <h2> heading.
2. Six paragraphs about your academic background. Be sure to include the word
Mzuni at least twice in your paragraphs.
3. A list of hobbies or interest displayed as an HTML unordered list.
4. Link at least two of your hobbies or interests to websites related to those
interests.
5. Save your file under the name personal.html.
Here is how roughly the page will look like for student: Patrick Young:
21st MARCH, 2024

6. Now add a CSS file called personal.css and reference it in your .html file.
7. Make the following changes and additions:
a. Add a photograph of yourself and float it to the left side of the webpage
using CSS. Add box information (margin, padding, and/or border) to
make it look nice on the webpage. You must set a border-style or the
border won’t show up
b. Change the font used throughout the document to sans-serif. To do this
you can set the font for the body element, which will be inherited by all
elements contained within the body (which is everything displayed on the
webpage). Alternatively, you can create a style rule with the special
universal selector which is represented by the asterisk. The universal
selector matches any element, however it’s not very efficient and will slow
rendering of your page down a bit. For example, the following rule will
turn everything on the webpage to red:

*{
color: red;
}

c. Center the heading with your name in it.


d. Setup your links to use the “:hover” pseudo-class (use a:hover so that
only the links are effected).
e. Add <span> tags and setup your style sheet so that every time the word
“Mzuni” appears, it is in green and is in bold.
8. Make sure your web page is responsive.
Here is a sample screenshot:

Some reference
https://www.w3schools.com/html/html5_semantic_elements.asp

You might also like