Scribd
Upload
9 views5 pages

ASSESSMENT

The document contains an assessment divided into two sections, focusing on CSS and HTML concepts. Section 1 includes multiple-choice questions on CSS properties, HTML elements, and color representation. Section 2 provides instructions for creating a blog layout, a profile card using the CSS Box Model, and an HTML page with icons and a navigation bar, emphasizing the use of semantic HTML and proper styling.

Uploaded by

vijay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views5 pages

ASSESSMENT

The document contains an assessment divided into two sections, focusing on CSS and HTML concepts. Section 1 includes multiple-choice questions on CSS properties, HTML elements, and color representation. Section 2 provides instructions for creating a blog layout, a profile card using the CSS Box Model, and an HTML page with icons and a navigation bar, emphasizing the use of semantic HTML and proper styling.

Uploaded by

vijay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

ASSESSMENT

SECTION- 1
1.What property in CSS is used to define the space around an element’s content?

(a) padding

(b) margin

(c) border

(d) All of the above.

2.What does the <meta charset="UTF-8"> tag do?

(a) Defines the page title

(b) Specifies character encoding for the document

(c) Sets the viewport for mobile responsiveness

(d) Defines metadata for the website.

3.What does the hexadecimal color #000000 represent?


(a) White
(b) Black
(c) Red
(d) Transparent

4. Which attribute is used in HTML5 to make an input field required?


(a) requirement
(b) mandate
(c) validate
(d) required
5. What is the specificity order in CSS from lowest to highest?
(a) Inline styles < IDs < Classes < Elements
(b)Elements < Classes < IDs < Inline styles
(c)Classes < Elements < IDs < Inline styles
(d)IDs < Inline styles < Classes < Elements

6.Which of the following is a semantic HTML5 element?


(a) <div>
(b)<span>
(c)<section>
(d)<b>

7.Which HTML element is used to create a dropdown list?

(a) <input>

(b) <option>

(c) <select>

(d) <value>

8.How do you set an image as a background in CSS?


(a) background: url('image.jpg');
(b) background-image: url('image.jpg');
(c) background-url: image.jpg;
(d) image-background: url('image.jpg');

9.Determine which color the <p> element will render and, based on CSS

<style>

p { color: blue; } /* Rule 1 */

.text { color: red; } /* Rule 2 */

#main .text p { color: green; } /* Rule 3 */

</style>
<div id="main">

<div class="text">

<p>Hello World</p>

</div>

</div>

(a)green

(b)red

(c)blue

(d)none of the above

10. Which of the following is the correct way to include an icon using the Font Awesome
library?

(a) <icon name="fa fa-home"></icon>


(b) <img src="fa-home.png" alt="Home">
(c) <i class="fa fa-home"></i>
(d) <span icon="fa fa-home"></span>
SECTION - 2
A.The page should contain the following sections:

1. A header that includes the blog's title and a navigation menu with links to "Home",
"About", and "Contact".

2. A main section that contains:

o A featured article with a heading, a short paragraph, and the author's name.

o A section listing two additional blog posts, each with a heading, short description,
and a “Read more” link.

3. A footer with copyright information.

Instructions:

Write the full HTML code using only semantic HTML elements wherever appropriate. Avoid
using generic <div> and <span> unless absolutely necessary. Proper indentation and readability
will be considered in marking. Style them with a proper border and use colors to enhance it.

B. Create a profile card using the CSS Box Model. The card should have the following
properties:

(Container (div)-Width,Padding,Border,Background color,Margin


Profile Image-Width,Height,Display,Margin
Name-Font-size,Text-align,Margin
Description-Font-size,Color,Text-align,Margin
Button-Width,Padding,Background,Text color with no Border
Icons- that link to your Instagram and WhatsApp pages. Icons should be horizontally
aligned and styled)
C. Create an HTML page that uses Font Awesome or the Google Material Icons library to add
at least three different icons (such as social media icons, contact icons, or navigation icons). -
>Style each icon using CSS so that it appears in blue color, has a font size of 20px, and is
horizontally aligned and evenly spaced.

->The icons should be responsive, adapting gracefully to smaller screen sizes, and must be
placed within a semantically structured layout using HTML5 elements.

-> In addition to the icons, your page should include a navigation bar that contains a site title or
logo and icon-based navigation links (like Home, Contact, and Profile), properly aligned using
Flexbox.

-> Include a footer with clickable social media icons that link to real or placeholder URLs and
are laid out in a horizontal line with hover effects (such as a color change).

You might also like