School of Computer Science Engineering & Information Systems (SCORE)
Common Challenging Lab Experiments
Semester : Winter 2024-25
Course : BITE304P – Web Technologies Lab
Assessment : Using HTML and CSS
Faculty Incharge : Dr. BALASUBRAMANI M
1. Formatting Text using HTML
a. Print the squares of the numbers 1 - 20. Each number should be on a separate
line, next to it the number 2 superscripted, an equal sign and the result.
b. Prints 10 names with a line break between each name. The list should be
alphabetized, and to do this place a subscripted number next to each name
based on where it will go in the alphabetized list. (Example: Alan1). Print
first, the unalphabetized list with a subscript number next to each name, then
the alphabetized list. Both lists should have an <h1> level heading.
c. Print two lists with any information you want. One list should be an ordered
list, the other list should be an unordered list
d. Print a list which starts with 7 with the type i
e. Prints an h1 level heading followed by a horizontal line whose width is 100%.
Below the horizontal line print a paragraph relating to the text in the heading.
f. Print a definition list with 5 items
g. Print two addresses in the same format used on the front of envelopes (senders
address in top left corner, receivers address in the center)
Print ten acronyms and abbreviations of your choosing, each separated by two
lines. Specify the data that the abbreviations and acronyms represent
2. i. Display five different images. Skip two lines between each image. Each image
should have a title.
ii. Display an image that has a border of size 2, a width of 200, and a height of
200.
iii. Display the image towards the right corner of the webpage
3. Use below design to create the table, and add images, colors, and different style of
fonts.
4. This exercise involves image maps. Your task is to take the picture of “India Map” and
create the four clickable areas are in so they link to the following pictures or other
html files:
State 1: link to state1popular.html [use a polygon area]
State 2: link to state2popular.jpg [use a rectangular area]
State 3: link to state3popular.html [use a circular area]
Srilanka: link to srilankamap.jpg [use a polygon]
5. Develop static web pages (using Only HTML) of an online student information
system. The pages should resemble our VTOP. The website should consist of the
following pages.
Home page
Registration and user Login (Practice all form controls)
User Profile Page
Course Page
Grade history
Write an html program to generate a webpage that can give the overall information
about thatwebsite.
6. Design the web page using progress bar, add the background music to the web page.
7. Design a Math Quiz Page using HTML and CSS.
The page will present the visitors with instructions for taking a 10-
question math quiz along with the quiz questions itself.
Answers to each question are provided at the bottom of the web page. The
visitors can jump back and forth between questions and answers by
clicking on individual questions and answers.
Specifically, every question is individually linked to its corresponding
answer at the bottom of the page and every answer is linked back to its
corresponding question.
Improve the web page navigation by adding an extra link at the top and
bottom of the document, which when clicked jumps the user from the top
to the bottom of the web page and vice versa.
Expand the text that provides the user with instructions, explaining the
number of questions that must be answered in order to pass the quiz.
Decorate the web page by experimenting with the rules located in its
internal stylesheet, assigning different font colors, font types, and sizes.
8. Design the web page below using HTML and CSS
9. Design a web page like below to publish the online news using HTML and CSS.
10. Design your own resume for job placement using HTML and CSS.
