Content

Objective

Multimedia files with various formats.
Forms, fields, validation, and user data.
Structure and content of web pages.

1 Multimedia

Stage → Commit → Push your changes throughout this exercise.

Create an index.html file with the following boilerplate code:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>Paragraph</p>
  </body>
</html>

Experiment with different HTML elements for video, audio, objects, and images using the W3Schools Media (opens in a new tab) documentation.
Create a page with multimedia elements as shown in Figure 1. You can download all the required media files from Pexels (opens in a new tab) or Pixabay (opens in a new tab), or use the ones posted in the repository.

Figure 1: Multimedia page

2 Forms

Stage → Commit → Push your changes throughout this exercise.

Create a file named contact-us.html.
Replicate the form design shown in Figure 2.
Validate all the fields, that is, do not allow any of the fields to be submitted unless they have a value and meet the requirements.

Figure 2: Forms page

3 College Journey Plus

Stage → Commit → Push your changes throughout this exercise.

Extend the College Journey web page that you created in the previous lab to include multimedia elements and forms:

Open the index.html file that you created in the previous lab. If you did not complete last week’s lab, you can use the base solution posted in the repository.
In the “Study Abroad” section, use the <video> tag to embed a video of your study-abroad experience. You can either use a video file stored on your computer or an online video from a hosting platform.
In the “Internship Experience” section, use the <audio> tag to embed a recording of yourself talking about your internship experience. You can either use an audio file stored on your computer or an online audio file.
In the “Campus Involvement” section, use the <object> tag to embed a simple diagram or flowchart to illustrate the different clubs and organizations that you are involved in on campus.
Save your page and open it in a web browser to check that the multimedia elements have been added correctly and are functioning as intended, as shown in Figure 3.1.

Figure 3.1: Rich College Journey

Create a club-application.html page and design it as shown in Figure 3.2. Use <fieldset> and <legend> tags to split your form into multiple groups of elements.

Figure 3.2: Club Application page

Make sure that all the form fields are validated.
Add navigation links that takes you from the homepage to the Club Application page and vice versa.

Refer to the MDN and W3Schools pages for HTML element/tag documentation.

Resources

1 Structure 3 Presentation