Chapter-3 Advanced HTML5 & CSS (Links and Tables) — Online MCQ Test
INFORMATION TECHNOLOGY · Grade 8 · CBSE(NCERT)
Practice Chapter-3 Advanced HTML5 & CSS (Links and Tables) with a free chapter-wise online MCQ test.
This chapter covers: anchor tag - href - internal linking - external linking - table tag - table row - table data - colspan - rowspan - CSS layout - navigation bar.
AI-generated questions from basic to board-exam level, with instant results and explanations.
Chapter-3 Advanced HTML5 & CSS (Links and Tables) — Important Questions & Answers
Which HTML tag is used to create a hyperlink?
- A. <link>
- B. <a>
- C. <href>
- D. <anchor>
Answer: B. <a>
The <a> tag (anchor tag) is used to create hyperlinks in HTML5. The href attribute specifies the URL destination.
The <a> tag (anchor tag) is used to create hyperlinks in HTML5. The href attribute specifies the URL destination.
What does the 'href' attribute stand for?
- A. Hypertext Reference
- B. High Energy Reference
- C. Hyperlink Error Function
- D. HTML Element Reference
Answer: A. Hypertext Reference
href stands for 'Hypertext Reference' and is used to specify the URL of the page the link goes to.
href stands for 'Hypertext Reference' and is used to specify the URL of the page the link goes to.
Which of the following is an example of external linking?
- A. <a href='page2.html'>Click here</a>
- B. <a href='https://www.google.com'>Google</a>
- C. <a href='#section1'>Go to section</a>
- D. <a href='image.jpg'>Image</a>
Answer: B. <a href='https://www.google.com'>Google</a>
External linking connects to URLs outside your website. Option B links to Google (external), while others link within the same website or to local files.
External linking connects to URLs outside your website. Option B links to Google (external), while others link within the same website or to local files.
What is the correct syntax for creating an internal link to a section with id='intro'?
- A. <a href='intro'>Go to intro</a>
- B. <a href='#intro'>Go to intro</a>
- C. <a id='#intro'>Go to intro</a>
- D. <a name='intro'>Go to intro</a>
Answer: B. <a href='#intro'>Go to intro</a>
Internal links use the # symbol followed by the id of the target element. The correct syntax is href='#intro'.
Internal links use the # symbol followed by the id of the target element. The correct syntax is href='#intro'.
Identify the correct HTML code for a table with one row and two columns containing 'Name' and 'Age'.
- A. <table><tr><td>Name</td><td>Age</td></tr></table>
- B. <table><td>Name</td><td>Age</td></table>
- C. <tr><td>Name</td><td>Age</td></tr>
- D. <table><row><data>Name</data><data>Age</data></row></table>
Answer: A. <table><tr><td>Name</td><td>Age</td></tr></table>
A proper table requires <table>, <tr> (row), and <td> (data) tags in correct nesting order.
A proper table requires <table>, <tr> (row), and <td> (data) tags in correct nesting order.
What is the difference between internal and external linking?
- A. Internal links use images while external links use text
- B. Internal links point within the same website; external links point to other websites
- C. Internal links require ID attributes; external links don't
- D. Internal links are faster than external links
Answer: B. Internal links point within the same website; external links point to other websites
Internal linking navigates within the same website/document, while external linking connects to URLs outside your website.
Internal linking navigates within the same website/document, while external linking connects to URLs outside your website.
Compare two linking scenarios: (1) <a href='contact.html'> and (2) <a href='https://example.com'>. Which is internal linking?
- A. Both are internal linking
- B. Both are external linking
- C. Scenario 1 is internal; Scenario 2 is external
- D. Scenario 2 is internal; Scenario 1 is external
Answer: C. Scenario 1 is internal; Scenario 2 is external
Scenario 1 links to a local file within the website (internal), while Scenario 2 links to an external website URL.
Scenario 1 links to a local file within the website (internal), while Scenario 2 links to an external website URL.
Design a scenario: You want to create a navigation bar with links to Home, About, Services, and Contact. Which CSS display property would be most efficient?
- A. display: block (with floats)
- B. display: flex
- C. display: inline-block
- D. All of the above could work, but flex is most modern and efficient
Answer: D. All of the above could work, but flex is most modern and efficient
While all options can create a navigation bar, 'display: flex' is considered the most modern, efficient, and flexible approach in contemporary web design.
While all options can create a navigation bar, 'display: flex' is considered the most modern, efficient, and flexible approach in contemporary web design.
A developer creates a table where one cell needs to span 2 rows and 3 columns. After applying both attributes, other cells in that row appear misaligned. What is the likely cause?
- A. CSS styling is missing
- B. The colspan and rowspan attributes have conflicting values
- C. The table structure doesn't account for the spanned cell reducing available columns
- D. The browser doesn't support colspan and rowspan together
Answer: C. The table structure doesn't account for the spanned cell reducing available columns
When a cell spans multiple columns, the developer must account for fewer cells in that row. If rowspan=2 and colspan=3 are applied, remaining cells in that row must be adjusted accordingly, or misalignment occurs.
When a cell spans multiple columns, the developer must account for fewer cells in that row. If rowspan=2 and colspan=3 are applied, remaining cells in that row must be adjusted accordingly, or misalignment occurs.
Given a navigation bar created with flexbox, if you set flex-direction: column on the <nav> element, what visual change occurs compared to the default flex-direction: row?
- A. Navigation items arrange vertically instead of horizontally
- B. Navigation items become invisible
- C. Navigation items double in size
- D. Navigation items align to the right side
Answer: A. Navigation items arrange vertically instead of horizontally
flex-direction controls the axis along which flex items are arranged. 'column' stacks items vertically, while 'row' (default) arranges them horizontally.
flex-direction controls the axis along which flex items are arranged. 'column' stacks items vertically, while 'row' (default) arranges them horizontally.