Scribd
Upload
92 views29 pages

HTML & CSS Lab Exercises Guide

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
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
92 views29 pages

HTML & CSS Lab Exercises Guide

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
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

CSE3002-Internet and Web Programming

Lab Cycle Sheet-1 (HTML &CSS)


NAME: SHOKAN V
REGNO:18BCB0085
SLOT:L55+L56
FACULTY:[Link] 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.
[Link] a page [Link] 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.
[Link] 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 “[Link]” 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.

Common questions

Powered by AI

HTML provides the structure for a webpage, while CSS is used for styling and layout. By using <div> tags with different classes and external CSS files, a designer can create a structured presentation style. CSS can specify layout properties like width, background color, or spacing, to visually organize the page. For example, using a CSS stylesheet to define styles for header, main, and footer sections or to create interactive elements, like enhancing links on hover, improves both aesthetics and functionality .

CSS allows for the customization of web design by changing font properties such as family, size, weight, or style, and altering colors. This enhances user experience by making the content more visually appealing and easier to read. For example, using standard fonts like Arial or Verdana, along with eye-pleasing color combinations, can significantly improve readability and engagement on an 'About Me' page .

Emphasizing certain words in a description using HTML elements like <strong> or <em> changes the text's appearance via CSS properties like font-weight or italics. This draws attention to key aspects of the content, enhancing communication effectiveness by highlighting the most important details. For personal webpages, this technique ensures the core message stands out, boosting readability and engagement by directing the viewer's focus to significant text .

HTML elements <ul> (unordered list) and <ol> (ordered list) help to organize content into lists, improving readability and making information categorically accessible. Creatively using these elements, such as implementing visually distinct styles with CSS or integrating interactive features like mouse-over effects, can make lists engaging. For example, listing favorite movies or books in a visually appealing sequence with descriptive text enhances content interaction and background alignment .

Designing a web page menu with contrast, such as white text on a black background, using CSS properties like background color and padding, enhances navigation by making menu items easily distinguishable and clickable. Ensuring adequate spacing and consistent layout through CSS properties like width percentage for score information allows users to quickly locate and comprehend content. This organized layout not only aids navigation but also improves the overall user experience by structuring information clearly .

To keep specific text elements hidden from the user's view while still being included in the code, HTML comments can be used. Comments are written within <!-- and --> tags and are not displayed by the browser. While HTML will parse the content as part of the document's source code, it will not render the comment on the webpage .

HTML image mapping allows specific areas of an image to act as hyperlinks, creating an interactive experience. This feature is beneficial for providing detailed information about segmented parts of an image, like the field positions on a cricket playground. By defining clickable areas with <map> and <area> tags, users can interact directly with various sections of the image to view descriptions or navigate to related pages, thereby enhancing both the educational and navigational aspects of a webpage .

To ensure optimal performance and user engagement, multimedia files should be optimized for the web by compressing images and videos without significant loss of quality to reduce load times. Using proper formats such as JPEG for images and MP4 for videos can enhance compatibility. Integrating multimedia with controls for play, pause, and volume adjustment allows users to interact conveniently. Proper implementation with HTML5 elements like <canvas> for images and <video> for videos ensures smooth rendering and improved page interactivity .

Structured formatting in HTML, through elements like headings <h1> to <h6>, paragraphs <p>, and comments <!-- -->, contributes to semantic organization by defining content hierarchy and improving readability. Headings guide users through the document's structure, while paragraphs clearly delineate sections of text, enhancing flow and comprehension. Comments aid developers in documenting code intentions without impacting the page's final output, which helps in maintenance and collaboration .

Using external CSS files offers several benefits over inline or embedded styles. It allows for consistent styling across multiple web pages by maintaining all stylesheets in a single location. This practice simplifies maintenance by allowing changes to be made universally without having to update each HTML file individually. External CSS also improves page performance by reducing redundancy and loading CSS from cache after the first use, which decreases page load times .

You might also like