logo

Crowdly

Browser

Add to Chrome

CSIT884 (IA25[1]) Web Development

Looking for CSIT884 (IA25[1]) Web Development test answers and solutions? Browse our comprehensive collection of verified answers for CSIT884 (IA25[1]) Web Development at moodle.uowplatform.edu.au.

Get instant access to accurate answers and detailed explanations for your course questions. Our community-driven platform helps students succeed!

Create 2 buttons on a web page: "Console Hi" and "Alert Hi".

When the user clicks on the button "Console Hi", display a message to the console: "Hi there! JavaScript is cool!"

When the user clicks on the button "Alert Hi", an alert window will appear and it displays the same message: "Hi there! JavaScript is cool!"

(If you are using Chrome, to view the Console, right click on the web page and select "Inspect", then click on the "Console" tab. If you are using Firefox, to view the Console, right click on the web page and select "Inspect Element", then click on the "Console" tab.)

View this question

Create a webpage using HTML only (no CSS, no JavaScript).

Your webpage must reproduce the structure shown in the reference layout provided (Your Full Name, tables, headings, lists, emojis, and links).

Follow the instructions below strictly.

Part 1 — Subject Information (3 marks)

At the top of the webpage:

  • Display a level-1 heading (<h1>) containing the text:

    “Your Full Name, Your Student Number”

  • Below it, add the heading “Part 1 — Subject Information” using <h2>.

  • Add a short paragraph stating:

    “Provide at least one subject row. Links must open in a new tab.”

Then create a bordered table with the following column headings:

  • Subject code and name

  • Lecture time

  • Lab time

  • Link

Fill one example subject row with any realistic sample data.

The link must open in a new tab using

target="_blank".

Part 2 — Academic Misconduct Types (4 marks)

Under a new <h2> heading titled “Part 2 — Academic Misconduct Types”, add a short paragraph stating:

“Two types from the UOW Academic Integrity page. Type is italic and blue, description is an unordered list, emoji is large.”

Then create a bordered table with three column headings:

  • Type

  • Description

  • Emoji

Add two rows, one for each academic misconduct type:

  • Cheating

  • Plagiarism

For each row:

  • Display the Type in italic and blue (e.g., <i><font color="blue">Cheating</font></i>).

  • Provide a description using an unordered list (<ul>) with at least two bullet points.

  • Display a large emoji (e.g., <font size="6">😮</font>).

Part 3 — Academic Consideration (3 marks)

Create a new <h2> heading titled “Part 3 — Academic Consideration”, followed by:

  • A short paragraph:

    “Provide three clear steps (ordered list) a UOW student must follow to apply.”

  • An ordered list (<ol>) containing three steps explaining how a student applies for Academic Consideration at UOW.

  • A short sentence describing acceptable supporting evidence, e.g.:

    “Examples include a medical certificate, official letters, police report or employer documentation.”

References Section (not marked, but required for structure)

At the bottom, include a heading “References”, followed by two clickable links to:

  • UOW — Academic Integrity (Students)

  • UOW — Academic Consideration

Each link must open in a new tab.

View this question

Part 3. External CSS

 Make a copy of the web page competition2.html that you developed in Part 2 above into a new file called competition3.html. We will use external CSS

for it.

 Create a CSS file called competition.css

, make sure that the file extension is correct.

 Use a text editor and open the file competition3.html. Copy all the CSS code inside the style tag of competition3.html into the CSS file competition.css. Save the CSS file competition.css

.

 Remove all the CSS code and the style tag in the file competition3.html. After that, in the head element, add a link tag:

<link rel="stylesheet" type="text/css" href="competition.css" />

 Save the file competition3.html

and use a web browser to open it. You will see that all the CSS styles will be displayed.

View this question

Part 2. Document CSS

 Make a copy of the web page competition.html that you developed last week into a new file called competition2.html. We will use document CSS for it. In the head element, add a style

tag.

Follow the steps below to modify the file

competition2.html

.

Step 1. Using font-size property

The

font-size

CSS property sets the size of the font.

Remove all the font tags from the text

World Gurning Competition and the smiley face, and put them into a single paragraph tag (p). Give this paragraph tag the id called competitionPara

. Use CSS id selector to select

the id

competitionPara and set font-size to 50px

.

 In the first table row tag (tr), give it an id called headerRow. Use the document CSS to select the id headerRow and set font-size to 40px

.

 In all the table data tags (td) on the ranking column, set the class to rankingNumber. Use the document CSS to select the class rankingNumber and set font-size to 60px

.

Step 2. Using color property

The

color

CSS property sets the foreground color value of an element's text.

Put the word

World into a span tag and give it an id called word1. Use CSS id selector to select the id word1 and set color to orange

.

 Put the word Gurning into another span tag and give it an id called word2. Use CSS id selector to select the id word2 and set color to pink

.

 Put the word Competition into a 3rd span tag and give it an id called word3. Use CSS id selector to select the id word3 and set color to blue

.

 Use the document CSS to select the id headerRow and set color to navy

.

 Use the document CSS to select the class rankingNumber and set color to maroon

.

 In all the unordered list tags (ul), set the class to memberList. Use the document CSS to select the class memberList and set color to green

.

 In all the list item tags (li) that contain the team leader, set the class to leader. Use the document CSS to select the class leader and set color to purple

.

Step 3. Using background-color property

The

background-color

CSS property sets the background color of an element.

Use the document CSS to select the id

competitionPara and set background-color to #ff000010

.

 Use the document CSS to select the id headerRow and set background-color to #00000010

.

 In the table row tags (tr) that correspond to the odd ranking numbers, set the class to oddRow. In the table row tags (tr) that correspond to the even ranking numbers, set the class to evenRow

.

 Use the document CSS to select the class oddRow and set background-color to #cc007711

.

 Use the document CSS to select the class evenRow and set background-color to #55ff7720

.

Step 4. Using padding property

The

padding CSS property sets the padding area on all four sides of an element. This property is a shorthand for the following CSS properties: padding-bottom, padding-left, padding-right, padding-top

.

Use the document CSS to select the id

competitionPara and set padding to 30px

.

 In the table tag, give it an id called teamTable. Use the document CSS to select all the table header tags (th) which are descendants of the id teamTable and set padding to 20px

.

 Use the document CSS to select all the table data tags (td) which are descendants of the id teamTable and set padding to 20px

.

 Use the document CSS to select all the list item tags (li) which are children of the class memberList and set padding to 10px

.

Step 5. Using text-align and vertical-align properties

The

text-align

CSS property sets the horizontal alignment of a block element or table-cell box.

The

vertical-align

CSS property sets the vertical alignment of an inline, inline-block or table-cell box.

Use the document CSS to select the id

competitionPara and set text-align to center

.

 Last week we used the attributes align and valign for the table header tag (th) and table data tag (td). This week we will use CSS, so we now remove all the attributes align and valign

from

the table header tags (th) and the table data tags (td).

 In all the table header tags (th) and table data tags (td) of the 1st column, set the class to rankColumn. Use document CSS to select the class rankColumn and set text-align to right and vertical-align

to

top

.

 In all the table header tags (th) and table data tags (td) of the 2nd column, set the class to teamColumn. Use document CSS to select the class teamColumn and set text-align to center and vertical-align

to

top

.

 In all the table header tags (th) and table data tags (td) of the 3rd column, set the class to memberColumn. Use document CSS to select the class memberColumn and set text-align to left

and

vertical-align to top

.

Step 6. Using border-style, border-color and border-width properties

The

border-style CSS property sets the line style for all four sides of an element's border. This property is a shorthand for the following properties: border-bottom-style, border-left-style, border-right-style, border-top-style

.

The values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

The

border-color CSS property sets the color of an element's border. This property is a shorthand for the following properties: border-bottom-color, border-left-color, border-right-color, border-top-color

.

The

border-width CSS property sets the width of an element's border. This property is a shorthand for the following properties: border-bottom-width, border-left-width, border-right-width, border-top-width

.

Use the document CSS to select the id

competitionPara and set border-style to dotted, border-color to red, border-width to 5px

.

 Use the document CSS to select all the table header tags (th) which are descendants of the id teamTable and set border-style to dashed, border-color to black, border-widthto 5px

.

 Use the document CSS to select all the table data tags (td) which are descendants of the id teamTable and set border-style to solid, border-color to gray, border-widthto 1px

.

Step 7. Using border-collapse and border-spacing properties

The

border-collapse

CSS property sets whether cells inside a table have shared or separate borders. The values are: collapse, separate.

The

border-spacing CSS property sets the distance between the borders of adjacent table cells. This property applies only when border-collapse

is separate.

In the table tag (table), remove the attribute

border

.

Use document CSS to select the id

teamTable and set border-style to dotted, border-collapse to separate, border-spacing to 10px

. Observe what it looks like for the table border and table cell borders.

Now, in the above document CSS id selector

teamTable, set border-style to none, border-collapse to collapse

. Observe what it looks like for the table border and table cell borders this time. Notice the difference?!

View this question

Last week, we developed a web page to display a fictional "World Gurning Competition".

In this week's exercise, you will follow the steps to add CSS styling to this web page. We will practice all 3 different ways to add styling to the web page:

  • inline (using a style attribute in HTML elements),

  • document (using style element in the HTML head section), and

  • external (using external CSS files).

When you complete this exercise, the webpage will look like the following:

pix

Part 1. Inline CSS

 Make a copy of the web page competition.html that you developed last week into a new file called competition1.html. We will use inline CSS for it. Follow the steps below to modify the file competition1.html

.

Step 1. Using font-size property

The

font-size

CSS property sets the size of the font.

Last week we used the HTML

font tag to set the font size and color for the text World Gurning Competition

and the smiley face. Now we will use CSS instead.

 Remove all the font tags from the text World Gurning Competition and the smiley face, and put all of them into a single paragraph tag (p). In this paragraph tag, use inline CSS to set font-size

to

50px

.

 In the first table row tag (tr), use inline CSS to set font-size

to 40px.

 In all the table data tags (td) on the ranking column, use inline CSS to set font-size to 60px

.

Step 2. Using color property

The

color

CSS property sets the foreground color value of an element's text.

Put the word

World into a span tag; and in this span tag, use inline CSS to set color to orange. Put the word Gurning into another span tag, and use inline CSS to set color to pink

.

Put the word

Competition into a 3rd span tag and use inline CSS to set color to blue

.

 In the first table row tag (tr), use inline CSS to set color to navy

.

 In all the table data tags (td) on the ranking column, use inline CSS to set color to maroon

.

 In all the unordered list tags (ul), use inline CSS to set color to green

.

 In all the list item tags (li) that contain the team leader, use inline CSS to set color to purple

.

Step 3. Using background-color property

The

background-color

CSS property sets the background color of an element.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set background-color to #ff000010

.

 In the first table row tag (tr), use inline CSS to set background-color to #00000010

.

 In the table row tags (tr) that correspond to the odd ranking numbers, use inline CSS to set background-color to #cc007711

.

 In the table row tags (tr) that correspond to the even ranking numbers, use inline CSS to set background-color to #55ff7720

.

Step 4. Using padding property

The

padding CSS property sets the padding area on all four sides of an element. This property is a shorthand for the following properties: padding-bottom, padding-left, padding-right, padding-top

.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set padding to 30px

.

 In all the table header tag (th), use inline CSS to set padding to 20px

.

 In all the table data tag (td), use inline CSS to set padding to 20px

.

 In all the list item tags (li), use inline CSS to set padding to 10px

.

Step 5. Using text-align and vertical-align properties

The

text-align

CSS property sets the horizontal alignment of a block element or table-cell box.

The

vertical-align

CSS property sets the vertical alignment of an inline, inline-block or table-cell box.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set text-align to center

.

 Last week we used the attributes align and valign for the table header tag (th) and table data tag (td). This week we will use CSS, so we now remove all the attributes align and valign

from

the th and td tags.

 In all the table header tags (th) and table data tags (td) of the 1st column, use inline CSS to set text-align to right and vertical-align to top

.

 In all the table header tags (th) and table data tags (td) of the 2nd column, use inline CSS to set text-align to center and vertical-align to top

.

 In all the table header tags (th) and table data tags (td) of the 3rd column, use inline CSS to set text-align to left and vertical-align to top

.

Step 6. Using border-style, border-color and border-width properties

The

border-style CSS property sets the line style for all four sides of an element's border. This property is a shorthand for the following properties: border-bottom-style, border-left-style, border-right-style, border-top-style

.

The values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

The

border-color CSS property sets the color of an element's border. This property is a shorthand for the following properties: border-bottom-color, border-left-color, border-right-color, border-top-color

.

The

border-width CSS property sets the width of an element's border. This property is a shorthand for the following properties: border-bottom-width, border-left-width, border-right-width, border-top-width

.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set border-style to dotted, border-color to red, border-width to 5px

.

In all the table header tags (th), use inline CSS to set

border-style to dashed, border-color to black, border-width to 5px

.

In all the table data tags (td), use inline CSS to set

border-style to solid, border-color to gray, border-width to 1px

.

Step 7. Using border-collapse and border-spacing properties

The

border-collapse

CSS property sets whether cells inside a table have shared or separate borders. The values are: collapse, separate.

The

border-spacing CSS property sets the distance between the borders of adjacent table cells. This property applies only when border-collapse

is separate.

In the table tag (table), remove the attribute

border

.

In the table tag, use inline CSS to set

border-style to dotted, border-collapse to separate, border-spacing to 10px

. Observe what it looks like for the table border and table cell borders.

Now, in the above table tag, use inline CSS to set

border-style to none, border-collapse to collapse

. Observe what it looks like for the table border and table cell borders this time. Notice the difference?!

View this question

Last week, we developed a web page to display a fictional "World Gurning Competition".

In this week's exercise, you will follow the steps to add CSS styling to this web page. We will practice all 3 different ways to add styling to the web page:

  • inline (using a style attribute in HTML elements),

  • document (using style element in the HTML head section), and

  • external (using external CSS files).

When you complete this exercise, the webpage will look like the following:

pix

Part 1. Inline CSS

 Make a copy of the web page competition.html that you developed last week into a new file called competition1.html. We will use inline CSS for it. Follow the steps below to modify the file competition1.html

.

Step 1. Using font-size property

The

font-size

CSS property sets the size of the font.

Last week we used the HTML

font tag to set the font size and color for the text World Gurning Competition

and the smiley face. Now we will use CSS instead.

 Remove all the font tags from the text World Gurning Competition and the smiley face, and put all of them into a single paragraph tag (p). In this paragraph tag, use inline CSS to set font-size

to

50px

.

 In the first table row tag (tr), use inline CSS to set font-size

to 40px.

 In all the table data tags (td) on the ranking column, use inline CSS to set font-size to 60px

.

Step 2. Using color property

The

color

CSS property sets the foreground color value of an element's text.

Put the word

World into a span tag; and in this span tag, use inline CSS to set color to orange. Put the word Gurning into another span tag, and use inline CSS to set color to pink

.

Put the word

Competition into a 3rd span tag and use inline CSS to set color to blue

.

 In the first table row tag (tr), use inline CSS to set color to navy

.

 In all the table data tags (td) on the ranking column, use inline CSS to set color to maroon

.

 In all the unordered list tags (ul), use inline CSS to set color to green

.

 In all the list item tags (li) that contain the team leader, use inline CSS to set color to purple

.

Step 3. Using background-color property

The

background-color

CSS property sets the background color of an element.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set background-color to #ff000010

.

 In the first table row tag (tr), use inline CSS to set background-color to #00000010

.

 In the table row tags (tr) that correspond to the odd ranking numbers, use inline CSS to set background-color to #cc007711

.

 In the table row tags (tr) that correspond to the even ranking numbers, use inline CSS to set background-color to #55ff7720

.

Step 4. Using padding property

The

padding CSS property sets the padding area on all four sides of an element. This property is a shorthand for the following properties: padding-bottom, padding-left, padding-right, padding-top

.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set padding to 30px

.

 In all the table header tag (th), use inline CSS to set padding to 20px

.

 In all the table data tag (td), use inline CSS to set padding to 20px

.

 In all the list item tags (li), use inline CSS to set padding to 10px

.

Step 5. Using text-align and vertical-align properties

The

text-align

CSS property sets the horizontal alignment of a block element or table-cell box.

The

vertical-align

CSS property sets the vertical alignment of an inline, inline-block or table-cell box.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set text-align to center

.

 Last week we used the attributes align and valign for the table header tag (th) and table data tag (td). This week we will use CSS, so we now remove all the attributes align and valign

from

the th and td tags.

 In all the table header tags (th) and table data tags (td) of the 1st column, use inline CSS to set text-align to right and vertical-align to top

.

 In all the table header tags (th) and table data tags (td) of the 2nd column, use inline CSS to set text-align to center and vertical-align to top

.

 In all the table header tags (th) and table data tags (td) of the 3rd column, use inline CSS to set text-align to left and vertical-align to top

.

Step 6. Using border-style, border-color and border-width properties

The

border-style CSS property sets the line style for all four sides of an element's border. This property is a shorthand for the following properties: border-bottom-style, border-left-style, border-right-style, border-top-style

.

The values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

The

border-color CSS property sets the color of an element's border. This property is a shorthand for the following properties: border-bottom-color, border-left-color, border-right-color, border-top-color

.

The

border-width CSS property sets the width of an element's border. This property is a shorthand for the following properties: border-bottom-width, border-left-width, border-right-width, border-top-width

.

In the paragraph tag (p) that contains the text

World Gurning Competition, use inline CSS to set border-style to dotted, border-color to red, border-width to 5px

.

In all the table header tags (th), use inline CSS to set

border-style to dashed, border-color to black, border-width to 5px

.

In all the table data tags (td), use inline CSS to set

border-style to solid, border-color to gray, border-width to 1px

.

Step 7. Using border-collapse and border-spacing properties

The

border-collapse

CSS property sets whether cells inside a table have shared or separate borders. The values are: collapse, separate.

The

border-spacing CSS property sets the distance between the borders of adjacent table cells. This property applies only when border-collapse

is separate.

In the table tag (table), remove the attribute

border

.

In the table tag, use inline CSS to set

border-style to dotted, border-collapse to separate, border-spacing to 10px

. Observe what it looks like for the table border and table cell borders.

Now, in the above table tag, use inline CSS to set

border-style to none, border-collapse to collapse

. Observe what it looks like for the table border and table cell borders this time. Notice the difference?!

View this question

Lab 1 – HTML Assignment

University of Wollongong – India Campus (GIT City)

Campus Tech Day 2025

Objective

Create a complete webpage using only HTML (no CSS or JavaScript) to reproduce the Campus Tech Day 2025 page layout shown in the given sample (PDF/screenshot).

Task Summary

  1. Create a new HTML file

    • Save as uow-india.html

    • Add <title>UOW India Campus — GIT City | Campus Tech Day 2025</title>

  2. Add a Header Section

    • Use a <table> for layout.

    • Include a logo image and event info (date, campus, title).

    • Insert a horizontal line <hr />.

  3. Create a Navigation Menu

    • Use internal links: About | Schedule | Speakers | Rubric | Register.

  4. About Section

    • Include <h2>About the Event</h2>

    • Use <blockquote>, <mark>, <sub>, <sup>, and HTML entities like &lt;, &gt;, &amp;, &deg;.

    • Add a code block using <pre><code>...</code></pre>.

  5. Schedule Section

    • Create a <table> with <caption>Event Schedule</caption>.

    • Use rowspan and colspan.

    • Show different sessions, rooms, and breaks.

  6. Speakers Section

    • Table with Name, Bio, and Photo columns.

    • Add two speakers: Prof. Kiran Trivedi and Mr. Nimay Kalyani.

    • Include <ul> and <ol> lists inside.

    • Add a Glossary using <dl>, <dt>, <dd>.

  7. Marking Rubric Section

    • Create a rubric table (as shown) with headings and marks totaling 100.

  8. Register Section

    • Add one relative link (contact.html) and one external link (UOW website).

    • Mention index.html as the default page.

  9. Footer Section

    • Include copyright (&copy; 2025) and a “Back to top” link.

  10. HTML Good Practices

    • Tags in lowercase, attributes in quotes, proper nesting, and self-closing empty elements (<img />, <hr />, <br />).

Submission

Submit your single HTML file (uow-india.html or index.html) along with any images used.

THE PAGE SHOULD BE DISPLAYED LIKE FOLLOWING

University of Wollongong — India Campus (GIT City)

Campus Tech Day 2025  |  Wed, 12 Nov 2025  |  GIT City, India

About  |  Schedule  |  Speakers  |  Marking Rubric  |  Register

About the Event

Welcome to Campus Tech Day 2025 at the University of Wollongong — India Campus, located in GIT City. This mockup serves as a photo-style reference for your HTML-only assignment (no CSS or JavaScript).

"Good design is as little design as possible."

— Dieter Rams

Fun fact: Water boils at approximately 100°C at sea level. Use of character entities like < > & " ' is required wherever appropriate.

// Code sample (remember to escape < > & if needed)
int sum = 0;
for (int i = 0; i < 3; i++) {
    sum = sum + i;
}

Schedule

TimeSessionRoom
08:30-09:00Registration & Welcome
09:00-10:00Keynote: The Future of TinyMLA101
Demo: HTML5 Elements in PracticeA102
10:00-10:30Coffee Break
10:30-11:30Workshop: Tables, Lists & LinksB201
11:30-12:30Panel: Careers in Web DevelopmentB202

Jump to: Speakers | Marking Rubric | Register

Speakers

NameBioPhoto
Prof. Kiran Trivedi

Expert in Edge AI and Web Technologies. Focus on HTML pedagogy, TinyML, and accessibility-first design.

  • Talk: "From HTML to Hardware"
  • Interests: AI, TinyML, Accessibility
Mr. Nimay Kalyani

Engineer and instructor specializing in Human-Computer Interaction and prototyping.

  1. Topic 1: Usability Heuristics
  2. Topic 2: Semantic HTML

Glossary

HTMLHyperText Markup LanguageAlt TextAccessible description for imagesIDUnique identifier for in-page linking

Marking Rubric (HTML-Only Assignment)

Recreate this page as closely as possible using only HTML tags and attributes demonstrated in class. No CSS/JS. Ensure proper nesting and valid use of elements.

CriteriaDetailsMarks
Document structure & semanticsProper use of <header>, <nav>, <section>, <footer>, headings20
Tables (caption, headers, alignment, rowspan/colspan)Schedule + Speakers tables match layout and attributes20
Lists (ul/ol/dl)Correct list nesting and semantics10
Links (internal anchors, relative, external)Working in-page and inter-page links10
Images with alt text (one as a link)Placeholder images + proper alt10
Text formatting & character entitiesUse of <mark>, <ins>, <del>, <sub>/<sup>, & entities (< > & " ' °)10
Preformatted/code & blockquoteCorrect escaping inside <pre>/<code>10
Accessibility & correctnessHeading order, image alts, link clarity5
XHTML disciplineLowercase tags, quoted attribute values, proper nesting, self-closing where needed5

Submission tip: If saved as index.html, it becomes the default page when placed in a folder on a server.

Register

Please visit our Contact page or email [email protected] to register.

Also visit: UOW Website

Use of index page: If this file is saved as index.html, it will be the default page of its folder.

© 2025 University of Wollongong — India Campus (GIT City)  |  Back to top

View this question

Lab 1 – HTML Assignment

University of Wollongong – India Campus (GIT City)

Campus Tech Day 2025

Objective

Create a complete webpage using only HTML (no CSS or JavaScript) to reproduce the Campus Tech Day 2025 page layout shown in the given sample (PDF/screenshot).

Task Summary

  1. Create a new HTML file

    • Save as uow-india.html

    • Add <title>UOW India Campus — GIT City | Campus Tech Day 2025</title>

  2. Add a Header Section

    • Use a <table> for layout.

    • Include a logo image and event info (date, campus, title).

    • Insert a horizontal line <hr />.

  3. Create a Navigation Menu

    • Use internal links: About | Schedule | Speakers | Rubric | Register.

  4. About Section

    • Include <h2>About the Event</h2>

    • Use <blockquote>, <mark>, <sub>, <sup>, and HTML entities like &lt;, &gt;, &amp;, &deg;.

    • Add a code block using <pre><code>...</code></pre>.

  5. Schedule Section

    • Create a <table> with <caption>Event Schedule</caption>.

    • Use rowspan and colspan.

    • Show different sessions, rooms, and breaks.

  6. Speakers Section

    • Table with Name, Bio, and Photo columns.

    • Add two speakers: Prof. Kiran Trivedi and Mr. Nimay Kalyani.

    • Include <ul> and <ol> lists inside.

    • Add a Glossary using <dl>, <dt>, <dd>.

  7. Marking Rubric Section

    • Create a rubric table (as shown) with headings and marks totaling 100.

  8. Register Section

    • Add one relative link (contact.html) and one external link (UOW website).

    • Mention index.html as the default page.

  9. Footer Section

    • Include copyright (&copy; 2025) and a “Back to top” link.

  10. HTML Good Practices

    • Tags in lowercase, attributes in quotes, proper nesting, and self-closing empty elements (<img />, <hr />, <br />).

Submission

Submit your single HTML file (uow-india.html or index.html) along with any images used.

THE PAGE SHOULD BE DISPLAYED LIKE FOLLOWING

University of Wollongong — India Campus (GIT City)

Campus Tech Day 2025  |  Wed, 12 Nov 2025  |  GIT City, India

About  |  Schedule  |  Speakers  |  Marking Rubric  |  Register

About the Event

Welcome to Campus Tech Day 2025 at the University of Wollongong — India Campus, located in GIT City. This mockup serves as a photo-style reference for your HTML-only assignment (no CSS or JavaScript).

"Good design is as little design as possible."

— Dieter Rams

Fun fact: Water boils at approximately 100°C at sea level. Use of character entities like < > & " ' is required wherever appropriate.

// Code sample (remember to escape < > & if needed)
int sum = 0;
for (int i = 0; i < 3; i++) {
    sum = sum + i;
}

Schedule

TimeSessionRoom
08:30-09:00Registration & Welcome
09:00-10:00Keynote: The Future of TinyMLA101
Demo: HTML5 Elements in PracticeA102
10:00-10:30Coffee Break
10:30-11:30Workshop: Tables, Lists & LinksB201
11:30-12:30Panel: Careers in Web DevelopmentB202

Jump to: Speakers | Marking Rubric | Register

Speakers

NameBioPhoto
Prof. Kiran Trivedi

Expert in Edge AI and Web Technologies. Focus on HTML pedagogy, TinyML, and accessibility-first design.

  • Talk: "From HTML to Hardware"
  • Interests: AI, TinyML, Accessibility
Mr. Nimay Kalyani

Engineer and instructor specializing in Human-Computer Interaction and prototyping.

  1. Topic 1: Usability Heuristics
  2. Topic 2: Semantic HTML

Glossary

HTMLHyperText Markup LanguageAlt TextAccessible description for imagesIDUnique identifier for in-page linking

Marking Rubric (HTML-Only Assignment)

Recreate this page as closely as possible using only HTML tags and attributes demonstrated in class. No CSS/JS. Ensure proper nesting and valid use of elements.

CriteriaDetailsMarks
Document structure & semanticsProper use of <header>, <nav>, <section>, <footer>, headings20
Tables (caption, headers, alignment, rowspan/colspan)Schedule + Speakers tables match layout and attributes20
Lists (ul/ol/dl)Correct list nesting and semantics10
Links (internal anchors, relative, external)Working in-page and inter-page links10
Images with alt text (one as a link)Placeholder images + proper alt10
Text formatting & character entitiesUse of <mark>, <ins>, <del>, <sub>/<sup>, & entities (< > & " ' °)10
Preformatted/code & blockquoteCorrect escaping inside <pre>/<code>10
Accessibility & correctnessHeading order, image alts, link clarity5
XHTML disciplineLowercase tags, quoted attribute values, proper nesting, self-closing where needed5

Submission tip: If saved as index.html, it becomes the default page when placed in a folder on a server.

Register

Please visit our Contact page or email [email protected] to register.

Also visit: UOW Website

Use of index page: If this file is saved as index.html, it will be the default page of its folder.

© 2025 University of Wollongong — India Campus (GIT City)  |  Back to top

View this question
In this exercise, you will follow the steps below to develop a web page. The web page is to display a fictional "World Gurning Competition". When you complete this exercise, the webpage will look like the following:

pix1

Step 1. Create a web page to display Hello World

 Use a text editor to create a HTML file. You should save the file as competition.html. Please make sure that the file extension is html

.

 In the head element, use the title tag to set the title as Programming Exercise

.

 In the body element, use the h1 tag to create a heading with your name and student number, and also display a Hello World

text.

When you complete this step, open the web page you created using a web browser. Your web page should look like the following:

pix1

Step 2. Add a table

 Use the table tag to create a table. In the table tag, specify the attribute border

so that the table has a visible border. The table should have 3 rows as follows:

pix

Step 3. Add unordered lists

 Use the ul tag to create unordered lists that contain the team members. It should look like the following:

pix

Step 4. Add images

 Use the img tag to add images. In the img tag, specify the attribute width

to make the width of images become 300 pixels. You can use any image files for this task (you can either use your imagination to

design flag images, or you can use pictures of your pets). When you complete this step, it should look like the following:

pix

Step 5. Add links

Create 2 links to two fictional web pages.

 The 1st link address is http://didd.gov and the 2nd link address is http://binn.gov Set the attribute target

to appropriate value so that the link should open up the linked web page in a new tab/window.

When you complete this step, it should look like the following:

pix

Step 6. Set text bold and italic.

Make changes to the web page as shown in the picture below.

 The texts Thing 1 and Thing 2

become bold.

 The texts team leader

become italic.

pix

Step 7. Make text colorful

 Change the text Hello World to World Gurning Competition

.

 Use the font tag to make text colorful. In the font tag, specify appropriate values for the attributes size and color

. When you complete this step, it should look like the following:

pix

Step 8. Add a smiley face using character entities.

 Use a character entity to add a smiley face. To find the code for a smiley face, do a Google search on HTML character entity smiley face

.

When you complete this step, it should look like the following:

pix

Step 9. Styling the table.

Use appropriate attributes to make the 1st column of the table aligned to the right, the 2nd column the center, and the 3rd column to the left.

Make all the vertical alignment to the top.

Change the table border to become invisible.

 When you complete this step, it should look like the following:

pix

Step 10. Add more teams.

Use your imagination to add some more teams to the competition!

View this question

Lab 1 – HTML Assignment

University of Wollongong – India Campus (GIT City)

Campus Tech Day 2025

Objective

Create a complete webpage using only HTML (no CSS or JavaScript) to reproduce the Campus Tech Day 2025 page layout shown in the given sample (PDF/screenshot).

Task Summary

  1. Create a new HTML file

    • Save as uow-india.html

    • Add <title>UOW India Campus — GIT City | Campus Tech Day 2025</title>

  2. Add a Header Section

    • Use a <table> for layout.

    • Include a logo image and event info (date, campus, title).

    • Insert a horizontal line <hr />.

  3. Create a Navigation Menu

    • Use internal links: About | Schedule | Speakers | Rubric | Register.

  4. About Section

    • Include <h2>About the Event</h2>

    • Use <blockquote>, <mark>, <sub>, <sup>, and HTML entities like &lt;, &gt;, &amp;, &deg;.

    • Add a code block using <pre><code>...</code></pre>.

  5. Schedule Section

    • Create a <table> with <caption>Event Schedule</caption>.

    • Use rowspan and colspan.

    • Show different sessions, rooms, and breaks.

  6. Speakers Section

    • Table with Name, Bio, and Photo columns.

    • Add two speakers: Prof. Kiran Trivedi and Mr. Nimay Kalyani.

    • Include <ul> and <ol> lists inside.

    • Add a Glossary using <dl>, <dt>, <dd>.

  7. Marking Rubric Section

    • Create a rubric table (as shown) with headings and marks totaling 100.

  8. Register Section

    • Add one relative link (contact.html) and one external link (UOW website).

    • Mention index.html as the default page.

  9. Footer Section

    • Include copyright (&copy; 2025) and a “Back to top” link.

  10. HTML Good Practices

    • Tags in lowercase, attributes in quotes, proper nesting, and self-closing empty elements (<img />, <hr />, <br />).

Submission

Submit your single HTML file (uow-india.html or index.html) along with any images used.

THE PAGE SHOULD BE DISPLAYED LIKE FOLLOWING

University of Wollongong — India Campus (GIT City)

Campus Tech Day 2025  |  Wed, 12 Nov 2025  |  GIT City, India

About  |  Schedule  |  Speakers  |  Marking Rubric  |  Register

About the Event

Welcome to Campus Tech Day 2025 at the University of Wollongong — India Campus, located in GIT City. This mockup serves as a photo-style reference for your HTML-only assignment (no CSS or JavaScript).

"Good design is as little design as possible."

— Dieter Rams

Fun fact: Water boils at approximately 100°C at sea level. Use of character entities like < > & " ' is required wherever appropriate.

// Code sample (remember to escape < > & if needed)
int sum = 0;
for (int i = 0; i < 3; i++) {
    sum = sum + i;
}

Schedule

TimeSessionRoom
08:30-09:00Registration & Welcome
09:00-10:00Keynote: The Future of TinyMLA101
Demo: HTML5 Elements in PracticeA102
10:00-10:30Coffee Break
10:30-11:30Workshop: Tables, Lists & LinksB201
11:30-12:30Panel: Careers in Web DevelopmentB202

Jump to: Speakers | Marking Rubric | Register

Speakers

NameBioPhoto
Prof. Kiran Trivedi

Expert in Edge AI and Web Technologies. Focus on HTML pedagogy, TinyML, and accessibility-first design.

  • Talk: "From HTML to Hardware"
  • Interests: AI, TinyML, Accessibility
Mr. Nimay Kalyani

Engineer and instructor specializing in Human-Computer Interaction and prototyping.

  1. Topic 1: Usability Heuristics
  2. Topic 2: Semantic HTML

Glossary

HTMLHyperText Markup LanguageAlt TextAccessible description for imagesIDUnique identifier for in-page linking

Marking Rubric (HTML-Only Assignment)

Recreate this page as closely as possible using only HTML tags and attributes demonstrated in class. No CSS/JS. Ensure proper nesting and valid use of elements.

CriteriaDetailsMarks
Document structure & semanticsProper use of <header>, <nav>, <section>, <footer>, headings20
Tables (caption, headers, alignment, rowspan/colspan)Schedule + Speakers tables match layout and attributes20
Lists (ul/ol/dl)Correct list nesting and semantics10
Links (internal anchors, relative, external)Working in-page and inter-page links10
Images with alt text (one as a link)Placeholder images + proper alt10
Text formatting & character entitiesUse of <mark>, <ins>, <del>, <sub>/<sup>, & entities (< > & " ' °)10
Preformatted/code & blockquoteCorrect escaping inside <pre>/<code>10
Accessibility & correctnessHeading order, image alts, link clarity5
XHTML disciplineLowercase tags, quoted attribute values, proper nesting, self-closing where needed5

Submission tip: If saved as index.html, it becomes the default page when placed in a folder on a server.

Register

Please visit our Contact page or email [email protected] to register.

Also visit: UOW Website

Use of index page: If this file is saved as index.html, it will be the default page of its folder.

© 2025 University of Wollongong — India Campus (GIT City)  |  Back to top

View this question

Want instant access to all verified answers on moodle.uowplatform.edu.au?

Get Unlimited Answers To Exam Questions - Install Crowdly Extension Now!

Browser

Add to Chrome

TelegramInstagramTikTokQuestion Bank
Terms of UseContact Us