Scribd
Upload
6 views

Assignment_5

The document outlines two web programming assignments focused on using CSS to recreate previous web designs. Assignment 2A includes activities that require students to apply various CSS styles, including table formatting, text alignment, and hover effects. Additionally, students must design a web page with specific sections and submit their work by the deadline of January 20, 2025.

Uploaded by

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

Assignment_5

The document outlines two web programming assignments focused on using CSS to recreate previous web designs. Assignment 2A includes activities that require students to apply various CSS styles, including table formatting, text alignment, and hover effects. Additionally, students must design a web page with specific sections and submit their work by the deadline of January 20, 2025.

Uploaded by

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

BCSE203E- Web Programming

Assignment 2A

Topics – Types of CSS, Selectors, Properties


Activity 11:
For activity #11, you must re -create a new version of the Web site you created for Assignment
1A (activity #3), only this time you must use only CSS to achieve the same design
Use the tables as depicts in the following figure and apply CSS style for the same

• Using styles assign table height and width and some styles for border as of your
choice.
• Apply center text align for the table data
• Include some control the space between the border and the content in a table
• Highlight table rows content on mouse over with grey color
Note: Include any two properties of your choice(minimum) and use style as container

Activity 12:
For activity #12, you must re -create a new version of the Web site you created for Assignment
1C (activity #8), only this time you must use only CSS to achieve the same design
CSS constraints
• Use respective selector for designing layout temple as per your choice.
• Design customized banner image for home page
• Apply CSS for navigation page and hyperlinks can be styled with any CSS property
(e.g. color, font-family, background, etc.).
• Apply styles for signup and login pages.
• Apply box model and position properties which is applicable for your design
Note: Choose the layout design of your choice and use external CSS file
Note:
/***
Design a web page of your choice “myindex.html” and include the following information as
follows.
• Home Page - Short Descriptions about your theme.
• Navigation page- include all the activity listed in assignment 1A ,1B, and 1C
• Blog Page – Photos/ videos/ hyperlinks
• Contact us – Use your intuitive approach and add the form fields for a contact us page
in the footer.
*/**

<Header>
<Navigation >
<article > <aside>
<section>
<footer>

Evaluation Scheme:

Description Marks
Design and Creativity 5
Usage of CSS styles 4
Output 1
Total 10

Note:
1. Non-Valid documents like blank, repeated contents, other lab files are strictly
avoided.

****Deadline: 20.01.2025****
Report Submission

Sample
Aim:

HTML Tags and CSS styles need to be used:


Tags used Attributes

Procedure:
1. In notepad or any editor or IDE type the necessary code & save with the file
name mentioned with .html extension display your time table.

2. To view your web page, simply double click your html file.

<Paste your code> - As screenshot with timestamp (date and time)


<Paste cropped output>- output screenshot with timestamp
Result:
Thus, a web page design to replicate the above table and the output was verified.

Report Submission

Sample
Aim: Design a web page which depicts in the following figure
HTML Tags need to be used:
Tags used Attributes
<table> border, rowspan, colspan, align=center/left/right, cellpadding=,
cellspacing=
<tr>
<td> bg-color
<th>
<caption>
<font> color, face, size

Procedure:
3. In notepad or any editor or IDE type the necessary code & save with the file
name mentioned with .html extension display your time table.

4. To view your web page, simply double click your html file.

<Paste your code> - As screenshot with timestamp (date and time)


<Paste cropped output>- output screenshot with timestamp
Result:
Thus, a web page design to replicate the above table and the output was verified.

You might also like