INTRODUCTION TO INFORMATION TECHNOLOGIES (4478/8936) ASSIGNMENT 1 - Elements of HTML Design
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
INTRODUCTION TO INFORMATION TECHNOLOGIES (4478/8936)
ASSIGNMENT 1 - Elements of HTML Design.
Instructions Assignment 1 - Elements of HTML Design
This assignment is to be completed individually.
In this document you will find all the items that will be assessed. If you have any questions, contact your lecturer.
I. Overview
In this assignment, your task is to design and write a small website about a topic chosen from a list published in your Canvas site. You are to develop a basic website, providing information in a clear way and links to other pages. You will be using Hypertext Markup Language (HTML5) code.
You are to demonstrate your understanding of the correct use of:
• HTML tags and CSS styling,
• configure background and text colour on web pages,
• create stylesheets that configure common colour and text properties,
• apply inline styles,
• use embedded stylesheets,
• use external stylesheets,
• configure element and class selectors,
• utilize the “cascade” in CSS,
• validate both HTML and CSS pages.
In addition, you need to populate your webpage with tables, lists, animated / static images, and other elements as specified in the section Design Specifications.
Finally, you are to show your understanding of good web design principles, such as clear hierarchy, indentation, commenting, easy navigation, and clear presentation of information.
II. Design Specifications
Below you will find the design specifications (DS) for your website:
- DS1: Topic
Topics are listed in your Canvas site. If you would like to use your own topic, it needs to be approved by your lecturer via email. Failing to do so will attract no marks for the entire assignment.
- DS2: Pages
The website must include at least 5 pages and each page should be named as follows:
1. One page will be named “Main.html”. This is the mainpage of the website.
2. One page will be named “Contact.html”. This page will allow the viewer of the website to contact its owner. In this page include the names of all the people in the group and their student ID.
3. Remaining three pages are free for you to design depending upon the topic you chose.
- DS3: Images
The website must have at least three images. This may include using images for backgrounds, hyperlinks, icons, and embedded images in header and footer sections. Images need also include changes in attributes such as align, alt, border, and width.
- DS4: Hyperlinks
The website must include hyperlinks to external websites, and hyperlinks to an email address.
- DS5: Contact Form
Include a functional contact form.
- DS6: Lists
The specification design also requires the implementation of three different types of lists, based on what was shown during the lectures.
- DS7: Symbols
The implementation of symbols using the UTF 8 coding system, must be considered throughout the whole website.
- DS8: Writing elements
Writing elements to be implemented: line break, block quote, and phrase. Any additional element included but not listed here may also attract marks.
- DS9: Structural elements
Structural elements to be implemented: structural elements: the div element, the header element, the nav element, the main element, the footer element. The distribution of these elements must be based on the wireframe provided below.
- DS10: CSS styling
All three different types of CSS styling must be included throughout the website: inline, embedded, and external.
- DS11: CSS properties
The following CSS properties are to be implemented:
o Background colour
o Text colour
o Font family
o Font size
o Font style
o Font weight
o Line height
o Margins
o Text align
o Text decoration
o Text indent
o Text shadow
o Text width
- DS12: Colour values
All colour values implemented in CSS must be coded in hexadecimal.
- DS13: Selectors
The website design must include the class selector and the ID selector. These two selectors need to be included in an external CSS file.
- DS14: Layout
The webpages must follow the wireframes depicted in Figure 1.
Wireframe (a) is for your mainpage.
Wireframe (b) is for the rest of your pages but Contact and Reference.
For the last two, you are to design your own wireframe.
- DS15: Tables
At least three different types of tables need to be included in your website.
The following properties are to be included across the tables (not necessarily all of them in one table):
o Align.
o Bgcolor.
o Border.
o Cellpadding.
o Summary.
o Title.
o Width.
o Spanning rows and columns.
- DS16: Validation
HTML an CSS pages must be validated using the corresponding external tools: markup validation service (https://validator.w3.org/), and jigsaw CSS validation service (https://jigsaw.w3.org/css-validator/)
- DS17: Structure
Structure your website using a suitable map (see Figure 2 as an example). Remember implementing your map via a menu inserted within the section of your pages. You will also need to attach the drawing of your map using Visio or any other drawing tool.
Figure 1: Wireframes for DS14
- DS18: Overall Appearance
Markers will be looking for the overall appearance of your website, including good selection of colours, layouts, quality and distribution of images, and general formatting.
- DS19: Relevant Content
Markers will be looking for a relevant and meaningful content of the website. This content must be in line with the topics under consideration. Each content page (the three free-choice ones) must have at least 100 words each.
- DS20: References
References must be included in a separated file (either Word or pdf). Harvard and APA styles are acceptable.
Figure 2. Example of a Website Map.
III. Submission
Three submission attempts are allowed before the due date/time (if needed). Only the last attempt will be marked.
1. Zip (compress) the entire project folder and submit it via Canvas.
2. Please note that you must first upload your ZIP file and then click the Submit button. This is now part of the electronic submission via Canvas.
3. Your submission must include all your html pages, CSS files, pictures, screenshots with the validation results (CSS and HTML),a word document with the site map, wireframe, and the list of references.
2024-03-13