Scribd
Upload
2 views7 pages

Lab 02

The document outlines Lab 2 for a Web Programming and Applications course at Ton Duc Thang University, focusing on enhancing CSS skills by styling provided HTML files. Key exercises include customizing buttons, styling tables, creating responsive designs, and implementing CSS Grid layouts. Students are required to write CSS in a separate file and apply it without modifying the HTML structure directly.

Uploaded by

hoangminhthang309
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views7 pages

Lab 02

The document outlines Lab 2 for a Web Programming and Applications course at Ton Duc Thang University, focusing on enhancing CSS skills by styling provided HTML files. Key exercises include customizing buttons, styling tables, creating responsive designs, and implementing CSS Grid layouts. Students are required to write CSS in a separate file and apply it without modifying the HTML structure directly.

Uploaded by

hoangminhthang309
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Ton Duc Thang University

Faculty of Information Technology

WEB PROGRAMMING AND APPLICATIONS

(503073)

Lab 2

by Mai Van Manh

Objective:

This week, you will enhance your understanding of CSS by styling a set of provided HTML

files. The given HTML files contain only structural markup and lack any styling. Your task

is to create and apply CSS rules to improve the visual appearance of these pages, aligning

them with the provided illustrative examples.

Key Requirements:

- CSS Styling: Write CSS code to style the pages according to the reference images.

- Non-Intrusive HTML Editing: You are not permitted to modify the HTML code

directly, except for updating class attribute values as necessary.

- Separate Stylesheet: Place your CSS code in a standalone file (e.g., style.css) and

link it to the HTML files using the <link> tag in the <head> section.

Before beginning the exercises, ensure you have reviewed the tutorial videos

corresponding to this lab for guidance on best practices and techniques.

Exercise 1: Customizing a Button

Create a .black-button class to style a button as shown in the images. The button should

have a black background, white text, and slightly rounded corners. On hover, its

background color should transition smoothly to gray (#808080) over 0.5 seconds and

revert when the mouse leaves. Use the :hover pseudo-class and the transition property to

implement the effect.

Default state of the button Button state on hover

Web Programming and Applications - Lab 02 – Page 1


Ton Duc Thang University
Faculty of Information Technology

Exercise 2: Styling a Table

You are provided with an HTML file containing a bare table that lists Apple products. Your

task is to write CSS to style and decorate the table.

The table should span the full width of the container, with borders collapsed for a clean

layout. Apply padding and center-align the text in each cell, and make sure the header

row has a distinct background color with bold text. Use alternating row colors to improve

readability and apply a hover effect that highlights rows when the mouse is over them.

Table before styling

Table after applying CSS styling

Web Programming and Applications - Lab 02 – Page 2


Ton Duc Thang University
Faculty of Information Technology

Exercise 3: Registration Form

Figure 1. HTML Form without CSS

Figure 2. HTML Form with CSS

Exercise 4: Responsive Website

Figure 1. Plain HTML page

Web Programming and Applications - Lab 02 – Page 3


Ton Duc Thang University
Faculty of Information Technology

Figure 2. HTML page with CSS applied when running on PC

Figure 3. HTML page with CSS applied when running on tablet devices

Web Programming and Applications - Lab 02 – Page 4


Ton Duc Thang University
Faculty of Information Technology

Figure 4. HTML with CSS applied when running on mobile devices

Exercise 5: Chat Conversation

Figure 1. HTML only

Figure 2. HTML with CSS applied

Web Programming and Applications - Lab 02 – Page 5


Ton Duc Thang University
Faculty of Information Technology

Exercise 6: Simple ListView (using flexbox)

Exercise 7: Full-Height Grid Layout

In this exercise, you are tasked with creating a full-width, full-height container that uses

CSS Grid to display a grid with 3 rows and 4 columns. Each grid cell should contain

centered text. The container should take up the entire viewport, and each cell should have

a background color with centered text. Add appropriate spacing between the cells using

grid gaps.

Before using CSS Grid After using CSS Grid

Web Programming and Applications - Lab 02 – Page 6


Ton Duc Thang University
Faculty of Information Technology

Exercise 8: Student Schedule Table

Figure 1. Plain HTML Table

Figure 2.. HTML Table with CSS applied

Web Programming and Applications - Lab 02 – Page 7

You might also like