Scribd
Upload
147 views

CSE3002-Internet and Web Programming Lab Cycle Sheet-1 (HTML &CSS) Name: Shokan V REGNO:18BCB0085 SLOT:L55+L56 Faculty:Dr - Senthilkumar N

This document contains a lab assignment for an HTML and CSS course. It provides 10 exercises for students to complete, including formatting text with HTML, creating lists, tables, forms, and stylesheets. It also involves adding images and video to webpages, using image mapping, and designing a consistent presentation style across pages using CSS.

Uploaded by

SHOKAN v
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
147 views

CSE3002-Internet and Web Programming Lab Cycle Sheet-1 (HTML &CSS) Name: Shokan V REGNO:18BCB0085 SLOT:L55+L56 Faculty:Dr - Senthilkumar N

This document contains a lab assignment for an HTML and CSS course. It provides 10 exercises for students to complete, including formatting text with HTML, creating lists, tables, forms, and stylesheets. It also involves adding images and video to webpages, using image mapping, and designing a consistent presentation style across pages using CSS.

Uploaded by

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

CSE3002-Internet and Web Programming

Lab Cycle Sheet-1 (HTML &CSS)


NAME: SHOKAN V
REGNO:18BCB0085
SLOT:L55+L56
FACULTY:Dr.SENTHILKUMAR N

1. HTMLEXERCISES
a) Print your name and Reg-No in green colour with different style of your choice
b) Print the numbers 1 -10, each number being a different colour.
c) Print a paragraph with 4 -5 sentences. Each sentence should be a different
font
d) Print a paragraph that is a description of a book; include the title of the book
as well as its author. Names and titles should be underlined, adjectives should
be italicized and bolded.
e) Print your name to the screen with every letter being a different heading size
f) Write a comment line on your code and make sure it is not displayed in the
page.
g) Display a ‘C’ code as it is in the page.
h) Set the background colour of the page as yellow
i) Apply marquee for your name.
2.Create a page aboutme.html that describes you. Include
information such as:
a) Your name in the top of the page in large text and your address in smaller
text
b) A description of you in <= 2 sentences. Emphasize important word(s) in
bold.
c) A list of classes you are taking right now with a simple description of each
with interesting subjects in marvellous colours.
d) Your 3 favourite movies, books, or TV shows, in order. Make at least one
link to an interesting site about that TV show/movie/book.
e) Two images that represent you when you're happy and sad
f) Something about one of your neighbours (people sitting next to you, make
it interesting as well
g) Describe your skill level in programming languages using definition lists.
3.HTML TEXT FORMATTING, LISTS EXERCISES
a) Prints 10 names with a line break between each name.
b) 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 Alphabetized 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) Print two addresses in the same format used on the front of
envelopes (senders address in top left corner, receivers address in
the centre)
f) Print ten acronyms and abbreviations of your choosing, each
separated by two lines. Specify the data that the abbreviations and
acronyms represent
4)HTML TABLES
5) Design the following Form
6)Create a stylesheet named “styleme.css” to improve the
appearance of your “About Me” page (QNo:2)
a) Change the colour of at least two elements
b) Change the font properties (family, size, weight, or style) of at
least two elements. Some standard fonts: Arial, Arial Black,
Verdana, Trebuchet MS, Georgia, Tahoma, Courier New, Times
New Roman
c) Change the background colour, text alignment and borders.
7)Write the CSS code necessary to recreate the following
appearance on-screen, exactly as shown.
• The menu items (Summary to Trailers and Videos) are white text on a black
background. There is 20px space between the words and the right and left
sides of their black boxes. There is 3px of blank space to the right of each.
• The score information should be 50% wide.
• The movie rating has a green background and white text. The number is in
30pt font. There is 20px space between the number and the edges of the
green background. There is 5px blank space around the green background.
• The background colour of the page is grey but the background colour of the
area containing everything is white. The white area is 80% wide and centred.
There is 20px of space between the edge of the white background and
everything inside it.
8)Design a presentation style for your Web pages using an
external CSS file. Use a presentation style with three boxes
as suggested in below Figure. Use <div> tags with different
classes to implement the boxes. Modify the Web pages to
use this presentation style and verify that it works. Change
the style so that links gets enhanced (bold, colour and/or
background) when the mouse pointer hovers above it.
9)Multimedia:
Copy some multimedia files to your Web folder, at least
one picture and one video.
i. Add an image using canvas in one of your pages.
ii. Add a video in one of your pages.
10) Write a program to demonstrate the concept of HTML
Image mapping element.
i. Add an image of the cricket playground
ii. Use image mapping to give the details about the various fielding positions(e.g.
Gully, slip etc., -write description about it and your favourite fielders at that
point.

You might also like