Docsity
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Docsity AI
Docsity AI
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

HTML & CSS Tutorial: Exercises and Answers, Exams of Computer Science

University of Mississippi Medical CenterComputer Science

A series of exercises and answers related to html and css. It covers topics such as image manipulation, gradients, transformations, shadows, and responsive design. Useful for students learning web development and provides practical examples to reinforce their understanding of these concepts.

Typology: Exams

2024/2025

Available from 01/11/2025

Classrep02
Classrep02 🇺🇸

3

(2)

2.9K documents

1 / 9

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
HTML & CSS Tutorial 4-6 quick
answers 100% ACCURATE!!
1. Provide code to create a figure box containing the logo.png image file, no alt text,
and a caption with the text Tree and Book. - ANSWER<figure>
<img src="logo.png" alt="" />
<figcaption>Tree and Book</figcaption>
</figure>
2. What is the difference between a vector image and a bitmap image? - ANSWERA
vector image is expressed in terms of points joined by geometrical constructs
such as lines, and can be resized without any loss of resolution. SVG (Scaleable
Vector Graphics) images are an example of vector images.
A bitmap image is expressed by storing the colours of each individual pixel in
the image, and becomes jagged when it is increased in size (so that you can see
the individual dots). JPG, PNG, and GIF files are examples of bitmap images.
6. Create a linear gradient that moves at a 15 degree angle with the color orange
stopping at 10% of the background, yellow stopping at 50%, and green stopping
at 55%. - ANSWERlinear-gradient(15deg, orange 10%, yellow 50%, green 55%);
3. Provide the code to use the sidebar.png file as the background image for the page
body. Have the image placed in the top-left corner of the page and tiled only in the
horizontal direction. - ANSWERbody {
/* background-image: url('sidebar.png'); */
/* background-position: left top; <-- could be left out, since this is the
default setting for browsers */
/* background-repeat: repeat-x; */
/* or using the background shortcut: */
background: url('sidebar.png') left top repeat-x;
}
7. Create a radial gradient that extends to the farthest background corner, going
through the colors orange, yellow, and green. - ANSWERradial-gradient(farthest-
corner, orange, yellow, green);
4. Create a style rule for the header element that fills the header background with
tiled images of the back.png, but only over the element content. - ANSWERheader {
background-image: url('back.png');
background-repeat: repeat; /* default, so could be left out */
background-clip: content-box;
}
8. Create a repeating circular gradient of orange, yellow, and green bands centered
pf3
pf4
pf5
pf8
pf9

Partial preview of the text

Download HTML & CSS Tutorial: Exercises and Answers and more Exams Computer Science in PDF only on Docsity!

HTML & CSS Tutorial 4-6 quick

answers 100% ACCURATE!!

  1. Provide code to create a figure box containing the logo.png image file, no alt text, and a caption with the text Tree and Book. - ANSWER

    Tree and Book

  2. What is the difference between a vector image and a bitmap image? - ANSWERA vector image is expressed in terms of points joined by geometrical constructs such as lines, and can be resized without any loss of resolution. SVG (Scaleable Vector Graphics) images are an example of vector images. A bitmap image is expressed by storing the colours of each individual pixel in the image, and becomes jagged when it is increased in size (so that you can see the individual dots). JPG, PNG, and GIF files are examples of bitmap images.

  3. Create a linear gradient that moves at a 15 degree angle with the color orange stopping at 10% of the background, yellow stopping at 50%, and green stopping at 55%. - ANSWERlinear-gradient(15deg, orange 10%, yellow 50%, green 55%);

  4. Provide the code to use the sidebar.png file as the background image for the page body. Have the image placed in the top-left corner of the page and tiled only in the horizontal direction. - ANSWERbody { /* background-image: url('sidebar.png'); / / background-position: left top; <-- could be left out, since this is the default setting for browsers / / background-repeat: repeat-x; / / or using the background shortcut: */ background: url('sidebar.png') left top repeat-x; }

  5. Create a radial gradient that extends to the farthest background corner, going through the colors orange, yellow, and green. - ANSWERradial-gradient(farthest- corner, orange, yellow, green);

  6. Create a style rule for the header element that fills the header background with tiled images of the back.png, but only over the element content. - ANSWERheader { background-image: url('back.png'); background-repeat: repeat; /* default, so could be left out */ background-clip: content-box; }

  7. Create a repeating circular gradient of orange, yellow, and green bands centered

at the right edge of the element with the colors stopped at 10%, 20%, and 30% respectively. - ANSWERrepeating-radial-gradient(circle at right center, orange 10%, yellow 20%, green 30%);

  1. Provide a style rule to display the logo.png and side.png image files in the top-left corner of the page body's background. Do not tile the logo.png image, but tile the side.png image vertically. Design your style rule so that logo.png appears on top of the side.png. For the rest of the page body, set the background color to ivory. - ANSWERbody { background: url('logo.png') top left no-repeat, url('side.png') top left repeat-y, ivory; }
  2. Provide the transformation to shift a page object 5 pixels to the right and 10 pixels up. - ANSWERtransform: translate(5px, -10px);
  3. Provide a style rule to add a 5-pixel dotted brown border around the aside element. - ANSWERaside { 5px dotted brown; }
  4. Provide the transformation to reduce the horizontal and vertical size of an object by 50%. - ANSWERtransform: scale(0.5, 0.5);
  5. Provide a style rule to add a 3-pixel solid blue border around the header element with rounded corners of 15 pixels. - ANSWERheader { border: 3px solid blue; border-radius: 15px; }
  6. Provide the transformation to rotate an object 30° counter-clockwise around the x- axis. - ANSWERtransform: rotateX(-30deg);
  7. Provide a style rule to add elongated corners with a 5-pixel gray inset border around the aside element and with a horizontal radius of 10 pixels and vertical radius of 5 pixels. - ANSWERaside { border: 5px inset gray; border-radius: 10px/5px; }
  8. What is the difference between using the perspective property and using the perspective function? - ANSWERThe perspective function is only applied to one object, while the perspective property is applied to every object in its container.
  9. Provide a style rule to use the graphic image file border.png as a solid border for the article element. Set the size of the image slice to 30 pixels and stretch the sides to match the sides of the element. Assume a border width of 10 pixels. - ANSWERarticle {
  1. What is responsive design? - ANSWERResponsive design states that a website should display differently for different screen sizes, responding to changes in the browser width or device. A responsive website should respond to the different features of different devices.
  2. Provide code for a linear gradient that moves in the direction of the lower-left corner of the element through the colors: orange, yellow, and green. - ANSWERlinear-gradient(to left bottom, orange, yellow, green); /* or similar but not quite right: */ linear-gradient(225deg, orange, yellow, green);
  3. Provide the code to create a link element that loads the talk.css style sheet for aural browsers. - ANSWER
  4. How should you arrange the media queries in your style sheet if you want to support mobile, tablet, and desktop devices? - ANSWERThe media queries should be arranged using the mobile-first principle, so mobile media queries first, followed by tablet media queries, followed by desktop media queries. This arrangement allows for progressive enhancement, where features for wider displays are built on top of the features for smaller widths. Base styles that apply to all devices should be applied first.
  5. Create a style rule to set the opacity of all inline images to 75%. - ANSWERimg { opacity: 0.75; }
  6. Provide code to display the body header as a flexbox. Include the browser Extension for WebKit. - ANSWERbody > header { display: -webkit-flex; display: flex; }
  7. Provide a style to display flexbox items in a single line, oriented vertically starting from the bottom and moving up. - ANSWERflex-flow: column-reverse nowrap;
  8. Provide a style that sets the initial size of a flex item to 250 pixels. - ANSWERflex- basis: 250px;
  9. Provide a style that sets the growth rate of the flex item to 4. - ANSWERflex-grow: 4;
  10. What two things can happen when a flex item drops below its basis size? - ANSWERWhen a flex item drops below its basis size, the flex item may shrink (according to its defined shrink rate) or it may move to the next row/column (if the flexbox options allow the items to wrap).
  1. What property should be applied to reorder the placement of a flex item? - ANSWERThe order property should be applied to reorder the placement of a flex item.
  2. Create a link element that loads the myprint.css style sheet file but only for printed output. - ANSWER
  3. What style would you apply to allow the browser to wrap long strings of text to a new line whenever needed? - ANSWERword-wrap: break-word;
  4. How is the number of columns in a web table determined? - ANSWERThe number of columns in a web table is determined by the number of td and th cells within a row (including any colspan attributes). You add 1 for each normal cell and the colspan value for any column-spanning cell. The width of the overall table is determined by the maximum width of any of its rows.
  5. Revise the following img element to attach it to the mapsites image map:
  • ANSWER

  1. Provide code to create a table row with three header cells containing the text: Morning, Afternoon, and Evening. - ANSWER Morning Afternoon Evening

  2. A table data cell contains the text Monday and should stretch across two rows and three columns. Provide the HTML code for the cell. - ANSWERMonday

  3. What are the three primary parts of responsive design theory? - ANSWERThe three primary parts of responsive design are: i. Flexible layout - so the layout changes as the browser/screen width changes ii. Responsive images - so images resize as the browser/screen width changes iii. Media queries - so that style rules can be applied to specific devices

  4. What are the only CSS properties that can be applied to columns and column groups? - ANSWERThe only CSS properties that can be applied to columns and column groups are background, width, borders, and visibility.

  5. In the case of conflicting styles, which has the higher precedence: the style of the row group or the style of the column group? - ANSWERIn the case of conflicting styles, the row group style has precedence over the column group style.

  6. Two table cells have adjacent borders. One cell has a 5-pixel-wide double border and the other cell has a 6-pixel-wide solid border. If the table borders are collapsed,

flex: 1 1 0px; }

  1. Provide a style to center the flex items along the flexbox's main axis. - ANSWERjustify-content: center;
  2. Provide a style to center the flex items along the flexbox's cross axis - ANSWERalign-content: center;
  3. Create a style rule that sets the size of the page box to 8.5 inches by 11 inches with a 1 inch margin. - ANSWER@page { size: 8.5in 11in; margin: 1in; }
  4. Create a style rule for right-side pages with a top/bottom margin of 3 centimeters and a left/right margin of 5 centimeters. - ANSWER@page:right { margin: 3cm 5cm; }
  5. Create a page style named smallMargins with a margin of 2 centimeters for every side. - ANSWER@page smallMargins { margin: 2cm; }
  6. Apply the smallMargins page style to a section element with the id reviews. - ANSWERsection#reviews { page: smallMargins; }
  7. Create a style rule to insert a page break before every section element in the document. - ANSWERsection { page-break-before: always; }
  8. Create a style rule to stop page breaks from being placed within any header or footer. - ANSWERheader, footer { page-break-inside: avoid; }
  9. Create a style that limits the size of widows and ORPHANS for all article elements to 3 lines. - ANSWERarticle { widows: 3; orphans: 3; }
  10. Provide code to change the background color of the 2 columns belonging to the introCol class to yellow. - ANSWERcol.introCol { background-color: yellow; }
  1. Provide a style to set the height of every table row in the table header to 25 pixels.
  • ANSWERthead tr { /* or table thead tr */ height: 25px; }

  1. Provide code to create a table row with three data cells containing the text Tompkins, Ramirez, and Davis. - ANSWER Tompkins Ramirez Davis

  2. Provide a style rule to display all table elements with collapsed borders. - ANSWERtable { border-collapse: collapse; }

  3. Provide the style rule to display all table captions at the lower-left corner of the table. - ANSWERcaption { caption-side: bottom; text-align: left; }

  4. Provide code to create a column group in which the first two columns belong to the introCol class and the next three columns belong to the col1, col2, and col classes respectively. - ANSWER

  1. Provide the code to display an unordered list as a table, the list items as table rows, and hypertext links within each list as table cells. - ANSWERul { display: table; } ul li { display: table-row; } ul li a { display: table-cell; }
  2. Provide code to display the content of all div elements in a column layout with the minimum width of each column set to 200 pixels. Use browser extensions in your code. - ANSWERdiv { -moz-column-width: 200px; -webkit-column-width: 200px; column-width: 200px;