Front-End Web Development Practical Exam
42 Questions
0 Views

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</p> Signup and view all the answers

HTML elements are case-sensitive.

<p>False</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</p> Signup and view all the answers

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

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

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

<!DOCTYPE html5> Signup and view all the answers

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

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

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

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

Which HTML element is used to create a numbered list?

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

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

<p>padding</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</p> Signup and view all the answers

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

Description

This practical exam evaluates your ability to create a single-page HTML article. You will need to include essential elements like title, author, and meta information, along with a specific background color using basic HTML commands.

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
HTML Basic: Understanding Basic HTML Tags
36 questions

HTML Basic: Understanding Basic HTML Tags

StraightforwardAmbiguity avatar
StraightforwardAmbiguity
Use Quizgecko on...
Browser
Open
Browser
Browser