LabSheet8_The div dl, dd, and dt elements
|
Name |
LOY DONG XUAN |
|
Matric. No. |
AI2000236 |
|
Section |
6 |
|
Lab
Sheet 8 |
<dl>,
<dt>, <dd> tags |
<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightblue">
<h3> The div dl, dd, and dt
elements </h3>
<p>LAB-08.</p>
</div>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Figure 1.1 shows the output of the
code.
QUESTIONS
1.
Explain about
the HTML code above.
<div> tag
·
The <div> tag defines a division or a section in an
HTML document.
· The <div> tag is used as a container for HTML elements - which is
then styled with CSS or manipulated with JavaScript.
· The <div> tag is easily styled by using the class or id attribute.
· Therefore, only under the <div> tag, the background color is blue. After the end of the </div> tag, the background color went back to default which is white again.
Description Lists
·
The <dl> tag defines a description list.
·
The <dl> tag is used in conjunction with
·
<dt> (defines terms/names) and
·
<dd> (describes each term/name).
·
The line under the
<dd> tag will be spaced automatically
2. Write a HTML code to display the output as show as Figure Q2 on
the webpage.
The code is as below:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightblue">
<h3>
Q2-LAB-08 </h3>
<p>------------------------------------------</p>
</div>
<div style="background-color:yellow">
<dl>
<dt>Coffee</dt>
<dd>Black hot
drink</dd>
</dl>
<div style="background-color: lightgreen">
<dl>
<dt>Milk</dt>
<dd>White
cold drink</dd>
</dl>
</div>
</body>
</html>
Figure 1.2 shows
the output of the HTML code
Comments
Post a Comment