Ton Duc Thang University
Faculty of Information Technology
WEB PROGRAMMING AND APPLICATIONS
(503073)
LAB 1
by Mai Van Manh
The goal of this week's exercises is to create simple web pages using common html elements like
tables, lists, forms, etc. Inline-CSS code can also be used in these exercises in order to improve the look
and feel of the user interface.
1. ABOUT PAGE
The images should be responsive: their size will be increased automatically when we increase
browser size (and vice versa).
Web Programming and Applications - Week 01 – Page 1
Ton Duc Thang University
Faculty of Information Technology
2. LOGIN FORM
The form need to submit its information to https://web-503073-wiolshzi6q-uc.a.run.app/lab01/login
using HTTP POST method. The server expects to receive an x-www-form-urlencoded body
containing two keys: email and password.
Requirements:
1. Form elements should be placed inside a hidden table element.
2. Remove underlines from all hyperlinks (<a> elements).
3. Password is the required field.
4. If a valid email address is not entered, the form should not be submitted (HTML5 feature).
5. Try to fix all the error messages outputted by the server until you get this success message.
Web Programming and Applications - Week 01 – Page 2
Ton Duc Thang University
Faculty of Information Technology
3. HTML TABLE
Create an HTML table similar to the following table.
Requirements:
1. All text contents are center aligned in every cell, both vertically and horizontally.
2. The merged cells are filled with a background color.
Hints:
1. Use the <table> tag for the entire table. Inside it are <tr> tags with each tag representing a
table row. Each <tr> tag contains a list of <td> tags that represent table cells.
2. Use the rowspan attribute on the <td> tag to combine cells between different rows into one
large cell. Similarly, use the colspan attribute on the <td> tag to combine cells from different
columns into one large cell. These two properties can be used at the same time to create a
large cell in both directions.
Web Programming and Applications - Week 01 – Page 3
Ton Duc Thang University
Faculty of Information Technology
4. REGISTER FORM
Requirements:
1. All form control elements should be
left aligned.
2. For “Gender” field, only one option
can be selected at a time.
3. For “Favorite IDE” and “Message”
fields, their labels should be placed on
top of the section.
4. If Again button is clicked, all input
element values will be restored to
their default value.
The form must submit its information to https://web-503073-wiolshzi6q-uc.a.run.app/lab01/register
using HTML POST method. The server expects to receive an x-www-form-urlencoded body
containing the following keys: name, email, birthday, birthtime, gender, country, favorite_ide, toeic,
message.
- For gender field: its value must be either ‘male’ or ‘female’.
Web Programming and Applications - Week 01 – Page 4
Ton Duc Thang University
Faculty of Information Technology
- For toeic field: the maximum value is 990, minimum value is 5 and each step would increase
or decrease the value by a factor of 5.
- Try to fix all the error messages outputted by server until you get a result similar to this
screen:
Web Programming and Applications - Week 01 – Page 5
Ton Duc Thang University
Faculty of Information Technology
HOMEWORK
Exercise 5. Build a simple website utilizing HTML following the structure depicted in the provided
ex5.jpg image. The website should exclusively employ basic HTML tags, including headings, links,
tables, images, and paragraphs. For the image, you can utilize the following URL:
https://via.placeholder.com/600x300.
Exercise 6. Create a simple HTML website that enables users to play an MP3 song and an MP4 video.
You have the flexibility to choose any MP3 or MP4 file for this purpose.
Exercise 5 Exercise 6
Web Programming and Applications - Week 01 – Page 6
