Front-End Web Development Practical Exam

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What HTML tag is used to create a paragraph element?

p

What is the purpose of the meta tag with the charset attribute?

To specify the character encoding for the HTML document.

What does the href attribute in an anchor tag (<a>) specify?

The URL or the destination link for the anchor.

What is the purpose of the alt attribute in an image tag (<img>)?

<p>To provide alternative text for the image.</p> Signup and view all the answers

What HTML element is used to create an unordered list?

<p>ul</p> Signup and view all the answers

What HTML attribute is used to specify the style of the list items in an unordered list?

<p>list-style-type</p> Signup and view all the answers

What HTML attribute is used to remove the underline from a link?

<p>text-decoration</p> Signup and view all the answers

What CSS property is used to align text to the center?

<p>text-align</p> Signup and view all the answers

What HTML element is useful for creating a horizontal rule to visually separate content in a document?

<p>hr</p> Signup and view all the answers

Which HTML tag is used to define a section in a document, often with a semantic meaning?

<p>section</p> Signup and view all the answers

What HTML element is used to create a header for the document, often with a background color?

<p>header</p> Signup and view all the answers

Which HTML element is specifically used to create the main content area of a page?

<p>main</p> Signup and view all the answers

What HTML tag is used to create a table element?

<p>table</p> Signup and view all the answers

What HTML tag is used to define a row within a table?

<p>tr</p> Signup and view all the answers

Which HTML tag is used to define a cell within a table row?

<p>td</p> Signup and view all the answers

What HTML tag is used to define a table header element?

<p>th</p> Signup and view all the answers

What HTML element is often used to define the footer of a web page, typically displayed at the bottom?

<p>footer</p> Signup and view all the answers

What CSS property is used to define the background color of a web page or element?

<p>background-color</p> Signup and view all the answers

What CSS property controls the font family used for text?

<p>font-family</p> Signup and view all the answers

What CSS property adjusts the line spacing between lines of text?

<p>line-height</p> Signup and view all the answers

What CSS property is used to set the margin around an element?

<p>margin</p> Signup and view all the answers

What CSS property is used to set the padding within an element, the space between the content and the border?

<p>padding</p> Signup and view all the answers

What CSS property is used to set the width of an element?

<p>width</p> Signup and view all the answers

What CSS property is used to set the alignment of text within an element?

<p>text-align</p> Signup and view all the answers

What CSS property sets the position of an element on the web page?

<p>position</p> Signup and view all the answers

Which CSS property is used to control the display style of an element?

<p>display</p> Signup and view all the answers

What is the purpose of the 'style' tag in HTML?

<p>To define CSS styles for elements within the document.</p> Signup and view all the answers

The href attribute in an <a> tag is used to specify the text displayed for the link.

<p>False (B)</p> Signup and view all the answers

HTML elements are case-sensitive.

<p>False (B)</p> Signup and view all the answers

The alt attribute in an img tag is used to display a caption below the image.

<p>False (B)</p> Signup and view all the answers

The body tag contains all the visible content of the web page.

<p>True (A)</p> Signup and view all the answers

Which of the following is NOT a valid HTML5 doctype declaration?

<!DOCTYPE html5> (D) Signup and view all the answers

Which CSS property is used to align text to the left?

<p>text-align: left; (B), text-align: left; (D)</p> Signup and view all the answers

Which CSS property is used to set the background color of an element?

<p>background-color (D)</p> Signup and view all the answers

Which HTML element is used to create a numbered list?

<p>ol (A)</p> Signup and view all the answers

Which of the following CSS properties is used to set the padding around an element?

<p>padding (A)</p> Signup and view all the answers

What is the difference between an ordered list and an unordered list?

<p>An ordered list displays list items in a numbered sequence, while an unordered list uses bullet points to present items without a specific ordering.</p> Signup and view all the answers

How can you create a link that opens in a new browser tab or window?

<p>Use the <code>target</code> attribute with the value <code>_blank</code> in the <code>&lt;a&gt;</code> tag.</p> Signup and view all the answers

What is a CSS selector, and how is it used in styling?

<p>A CSS selector is used to target specific elements in an HTML document. It's used within CSS rules to determine which elements will have the associated style applied to them.</p> Signup and view all the answers

What is the purpose of the viewport meta tag?

<p>It defines the initial scaling and dimensions of the webpage on different devices, ensuring optimal responsiveness.</p> Signup and view all the answers

What is the difference between a class and an id attribute in HTML?

<p>A class attribute can be applied to multiple elements, while an id attribute should be unique to a single element within a document.</p> Signup and view all the answers

You can use the style attribute within an HTML tag to apply inline CSS styling to a specific element.

<p>True (A)</p> Signup and view all the answers

Flashcards

HTML

HyperText Markup Language, used to structure web pages.

Web Page Structure

The arrangement of content (text, images, links) on a webpage.

Clickable Topics

Hyperlinks within a webpage that lead to different sections or pages.

Meta Information

Information about a webpage, not displayed directly but used by search engines.

Signup and view all the flashcards

Background Color

The color behind the webpage's content.

Signup and view all the flashcards

Font Family

The style of text used on a webpage.

Signup and view all the flashcards

Image

A visual element on a webpage.

Signup and view all the flashcards

Hyperlink

A clickable link that connects to another section or webpage.

Signup and view all the flashcards

Canteen Menu

List of food items and their prices available at a canteen.

Signup and view all the flashcards

Item

A particular food in a canteen menu.

Signup and view all the flashcards

Price

The cost of an item in a canteen menu.

Signup and view all the flashcards

Header

The top section of a webpage or document.

Signup and view all the flashcards

Table

A structured grid in a document to organize data, often columns and rows.

Signup and view all the flashcards

List-style-type

Method used to display items in a list, such as bullet points or numbers.

Signup and view all the flashcards

Font-family

The style of text on the website.

Signup and view all the flashcards

Background-color

The color behind the content on a webpage.

Signup and view all the flashcards

Line-height

The space between lines of text on a page.

Signup and view all the flashcards

Margin

Space around an element on a page.

Signup and view all the flashcards

padding

Space within an element.

Signup and view all the flashcards

text-align

used to specify the horizontal alignment of text in an element.

Signup and view all the flashcards

Study Notes

Practical Exam (Front-End Web Development)

  • Student Name: Shraddha Chaurasiya
  • Roll Number: 1723123
  • Task: Create a single-page HTML article including title, author, topic list, image, and alternative message link. Include meta information. Use basic HTML commands, specific background color.

HTML Article Structure

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html lang="en">: Defines the HTML document and sets the language to English.
  • <head>: Contains metadata about the document.
    • <meta charset="UTF-8">: Sets the character encoding.
    • <meta name="author" content="Shraddha Chaurasiya">: Defines the author.
    • <meta name="title" content="Significance of Mental Health">: Defines the title of the article.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Optimizes the viewport for different devices.
    • <title>Significance of Mental Health</title>: Sets the title displayed in the browser tab.
  • <style>: Contains CSS styling.
    • Defines body background color (#e6f7ff), font family (Arial, sans-serif), line height (1.6), and margin (20px).
    • Styles h1 text color (#2c3e50) and h2 text color (#34495e).
    • Styles ul with disc bullet points, topics a with normal color (#007acc) and a hover color (#005f99). All a tags use text-decoration: none;. Styles images (img), making them block elements with auto margins and centered text in <p> tags

Q2: Canteen Menu HTML

  • Task: Design an HTML document for a canteen menu.
  • Structure: Includes header (with background color #4CAF50 and white text), table for menu items.
  • Table Structure:
    • <table> with width:60%, margin: 20px auto, and border-collapse: collapse.
    • <th> (table header) for "Item" and "Price" with a background color.
    • <tr> (table row) for each item in the menu
    • <td> (table data) cells for item names and prices. td cells have white background.
      • .price class for right-aligned prices.
  • CSS:
    • Defines header background, color, text alignment, and padding.
    • Styles the table with borders, padding, and text alignment. th cell background color defined.
    • Defines footer with specific text-align, padding, background, and color.
  • Items (example): Lists various menu items (e.g., Cheese Sandwich, Chicken Wrap) and their prices (e.g., $3.50, 500).
  • Responsive Design: Includes width: 100% and bottom: 0 for the footer to display at the bottom of the page.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Practical Exam (SEC- Front End Web Development) - PDF

More Like This

HTML Basic Tags and Elements Quiz
5 questions

HTML Basic Tags and Elements Quiz

SpotlessIllumination avatar
SpotlessIllumination
HTML Basic Tags Cheatsheet
5 questions

HTML Basic Tags Cheatsheet

InterestingChrysocolla avatar
InterestingChrysocolla
HTML Basic Examples
5 questions

HTML Basic Examples

ReplaceableShark avatar
ReplaceableShark
Git and HTML Basics
37 questions

Git and HTML Basics

FearlessIndicolite1458 avatar
FearlessIndicolite1458
Use Quizgecko on...
Browser
Open
Browser
Browser