21 Website authoring (3)
Resources |
Revision Questions |
Information Communication Technology ICT
Login to see all questions
Click on a question to view the answer
1.
Consider the following HTML code:
<div class="highlight">
<p>This is an important piece of text.</p>
</div>
Explain how the CSS rule .highlight { background-color: yellow; font-weight: bold; } would affect the appearance of the text within the
tag. Describe the effect of each CSS property.
The CSS rule .highlight { background-color: yellow; font-weight: bold; } would apply the following styles to the text within the
with the class "highlight":
- background-color: yellow; This property would set the background color of the text's container (the
) to yellow.
- font-weight: bold; This property would make the text within the container bold.
In summary: The text "This is an important piece of text." would be displayed with a yellow background and in bold font.
You are given the following HTML snippet:
<div class="product">
<h2>Product Name</h2>
<p>Product Description goes here.</p>
<span class="price">£19.99</span>
</div>
Write CSS code to style the price element within the product div to appear in a larger, green font. Use a CSS selector that targets the price element specifically within the product div.
Here's the CSS code to style the price element:
.product .price {
font-size: 20px;
color: green;
}
Explanation:
- .product .price: This CSS selector targets the price element that is a direct descendant of an element with the class product. This ensures that the styling is applied only to the price within the product container.
- font-size: 20px; This sets the font size of the price to 20 pixels, making it larger.
- color: green; This sets the text color of the price to green.
2.
A website designer wants to ensure that a bookmark always takes the user to the top of a specific section of a long webpage, regardless of where the user is on the page. Describe how they could achieve this using HTML and explain the advantages of this approach compared to simply using an id attribute on the section itself.
To ensure a bookmark always takes the user to the top of a specific section, the designer can use the href attribute of the
Example:
<h2 id="important-section">Important Section</h2>
<a href="#important-section">Back to Top</a>
Advantages of this approach:
- Reliability: This method works reliably regardless of the user's current scroll position. The link will always scroll the user to the top of the specified section.
- Accessibility: It improves accessibility for users who may have difficulty scrolling.
- Maintainability: It's a straightforward and easy-to-understand solution that is simple to maintain.
- Flexibility: It allows for a clear "back to top" navigation, especially useful on long pages.
Simply using an id on the section itself would only allow the user to navigate to that section from elsewhere on the page. It wouldn't provide a consistent "back to top" functionality.
3.
A web designer is creating a content layer for an online shop. The content layer needs to display product information, including the product name, description, price, and an image. Create a simple HTML table structure to display this information for one product. Ensure the table includes appropriate headers.
Here's an HTML table structure to display product information:
| Product Name |
| Description |
| Price |
| Image |
Explanation:
- The
tag defines the table.- The
tag defines a table row.- The
tag defines a table data cell.- The
tag defines a table header cell (used for the column titles).- The style attribute is used to add basic styling (border and padding) for clarity. In a real-world scenario, CSS would be used for styling.
| |