Reference no: EM133912182
Web Technologies
Assignment
The objectives of this assignment are as follows:
To exercise your ability to create web pages using HTML and CSS.
To test your ability to present well-defined information using XML and DTD.
Note that this assignment will be developed further in Assessment 3 (Web-Based Assignment 2).
Outline
The introduction of Nintendo Switch 2 has taken the world by storm, with pre-order demands hitting 3.5 million units in the first four days. The board of directors of a 50-year old Newcastle toy store wishes to transform their business by investing in Nintendo Switch games.
With this in mind, the board has invited you, a promising student of the University of Newcastle with web development skills, to develop their website, FeverGamez. They would like you to construct a prototype of the web page to be launched. The prototype website should present Nintendo games from TWO genres. Each genre should also have THREE games for purchase. For example, if you choose adventure as a category, your should also think about THREE adventure games for purchase. Note that you can make up your own genre and games (they don't have to be real) - be creative! Get Assignment Help from trusted tutors.
Your website should still be be simple, friendly and attractive. This can be achieved by satisfying the requirements and completing the tasks in the following sections:
Section 2: General Requirements
Section 3: HTML Documents
Section 4: XML Documents
Section 5: CSS
General Requirements
Your website must maintain a proper directory. All files must be stored in a directory named fevergamez. For clarity, all images included in the website must also be stored in the fevergamez/images directory. You may include additional directories according to your discretion.
HTML Documents
For this prototype website, you are required to create three web pages: Homepage, About Us page and Contact page. These pages need to comply to specifications mentioned in the following sections.
All Web Pages
All the web pages that form your website should satisfy the following:
Coded according to the HTML Living Standard.
Contain the full HTML document structure, i.e., include <!DOCTYPE>, <html>, <head>, <meta>, <title> and <body>.
Contain a navigation bar that allows complete navigation capabilities across your website, such that:
Each webpage should contain hyperlinks to every other webpage.
The hyperlinks are implemented using relative URLs.
The footer of each page should contain a copyright statement including your name, student number, email address, and degree.
Homepage
The Homepage should be named index.html. This page should contain the following:
A welcome note section containing:
Proper and meaningful level 1 heading.
One to two meaningful paragraphs of welcome note.
One meaningful blockquote.
A feature product section containing:
Proper and meaningful level 1 and 2 headings.
An unordered list or an ordered list of THREE feature products (regardless of genre).
One short description paragraph for each product (brief without in-depth details).
One image for each featured product.
One hyperlink to an external website using an absolute URL in any of the sections above.
Correct utilization of EM, STRONG, and ABBR tags in any of the sections above.
About Us Page
The About Us page should be named about.html. This page should contain the following:
A history section containing:
Proper and meaningful level 1 heading.
One to two meaningful paragraphs of history.
A privacy policy section containing:
Proper and meaningful level 1 and 2 headings.
Paragraphs of discussion on privacy policy (brief without in-depth details). You may use a template such as that
A terms and conditions section containing:
Proper and meaningful level 1 and 2 headings.
Paragraphs of discussion on terms and conditions (brief without in-depth details). You may use a template such as that
Contact Page
The contact page should be named contact.html. This page allow visitors to send messages to the site owners. This will be done as a HTML form.
The following things need to be included on the form:
An appropriate level 2 heading
The name of the person sending a message
An email address for replies
The subject of the message
The message itself
Whether or not the message should be considered urgent (use two radio buttons for this).
Include buttons to submit and clear the form
All inputs are required, the form should not submit unless the entire form has been filled out.
XML Documents
For this prototype website, you are required to create a XML template and TWO XML data files. XML template is typical required as a placeholder since data that you are hosting on your website may change over time while maintaining a fixed structure. Meanwhile, the XML data files will hold actual data that is relevant when the website is available.
XML Template With DTD
The XML template should be named xmltemplate.xml. The document should be able to store as many games as required within a given genre. You may decide the tags that you wish to use to describe the games, but for each game, you should at least have element tags for the following items:
Name (only one)
Description (only one)
Pricing
Search tags (zero or more)
Reviews (zero or more). This tag should have an attribute that indicates the score of the review (from 0 to 5 stars).
The filename of a picture of the product (one or more, use a relative path)
URL of a webpage related to the product (one, use an absolute path)
You will also need to write a DTD for your XML template. Generally, it is your choice whether the DTD is internal or external, however, for this assignment, you should make the DTD internal because it is easier to validate your XML and DTD.
Your DTD will need to describe all the tags and attributes that you used in your XML. It will also be important to use optional modifiers (+, *, ?) to indicate how many instances of each tag are allowed (according to what is being specified). Not least, define at least two entities (<!ENTITY>) for use in the XML document.
Finally, note that the template will be a valid XML file. Although we are more concerned about the tags (the organization of the data) and not the actual data about any games, you may need to include some arbitrary data to allow your page to be validated. For example, if the default of an attribute is #REQUIRED, the attribute needs a value. Otherwise, it will not be validated.
XML Data Files
Once you have your XML template with DTD, you will need to create TWO separate XML data files. Each XML data file is created for each of the game genres you identified. They should be named xmldata1.xml and xmldata2.xml respectively. These XML data files should satisfy the following:
Each XML data file should contain data for THREE games.
Each XML data file should contain the internal DTD at the top of the document.
The XML data files MUST have the same tags and DTD as the XML template.
CSS
In general, in order to draw your target audience, make sure that your website considers factors such as navigability, content layout, element positioning on screen, text size, colour contrast, readability, consistency, and accessibility. All visual formatting of the Web site will be implemented using Cascading Style Sheets (CSS). You will be using external style file, document-level style sheet, and inline styles in this assignment.
Create at least one external style file named style.css. This external style file should achieve the following CSS requirements to all your web pages:
Left and right side margin of at least 1 cm for the main content (body) of all webpages.
A nice background for the webpages. The text must be readable with the background.
The text colours of a link before they are visited, after they are visited, and during a user action must be different from each other. The link must appear noticeably bigger when you move the cursor over them.
Include at least one id and one class selector.
Hooked to at least one <div>, used to provide some interesting styling (your choice of borders, background, floating alignment, etc.)
Hooked to at least one <span>, used to provide some formatting (e.g., a colour or font change) for a few words of text.
You must also include at least one document-level style sheet and at least one inline style to the Homepage (index.html). Note that document-level style sheet is used to apply styles that are unique to the particular page, whereas inline styles should only be used for one-off visual effects.