Scribd
Upload
1 views

Lab01

This document outlines the first lab exercise for a web programming course at Ton Duc Thang University, focusing on creating simple web pages using HTML elements and inline CSS. It includes tasks such as building a login form, an HTML table, and a registration form, with specific requirements for each component. Additionally, it assigns homework exercises that involve creating a basic website and enabling media playback using HTML.

Uploaded by

hoangminhthang309
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Lab01

This document outlines the first lab exercise for a web programming course at Ton Duc Thang University, focusing on creating simple web pages using HTML elements and inline CSS. It includes tasks such as building a login form, an HTML table, and a registration form, with specific requirements for each component. Additionally, it assigns homework exercises that involve creating a basic website and enabling media playback using HTML.

Uploaded by

hoangminhthang309
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like