Scribd
Upload
40 views4 pages

Kisi-Kisi Informatika XII

The document discusses various HTML elements for embedding media and creating interactive elements on web pages, including lists, images, videos, links, and buttons. It provides code examples for unordered and ordered lists, images embedded from other servers, iframes for embedding videos from YouTube, links using the href attribute, and embedding videos, images and other pages using the embed element. It also shows how to create a basic button element and trigger a popup alert with an onclick event handler.

Uploaded by

liv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views4 pages

Kisi-Kisi Informatika XII

The document discusses various HTML elements for embedding media and creating interactive elements on web pages, including lists, images, videos, links, and buttons. It provides code examples for unordered and ordered lists, images embedded from other servers, iframes for embedding videos from YouTube, links using the href attribute, and embedding videos, images and other pages using the embed element. It also shows how to create a basic button element and trigger a popup alert with an onclick event handler.

Uploaded by

liv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Kisi-Kisi PAS Informatika KElas XII

1. list

• Unordered list
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
• Ordered list
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
• Attribute type of ordered list
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
• Other list (Description List-Description Tag-Define Description)
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

2. img

<!DOCTYPE html>

<html>

<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"


style="width:104px;height:142px;">

</body>

</html>

3. video

<!DOCTYPE html>

<html>

<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="https://www.youtube.com/embed/RD7_ecpmU9A" name="iframe_a"


height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the
iframe.</p>

</body>

</html>

4. href

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>

</html>

5. embed

• Embed Video

<!DOCTYPE html>

<html>

<body>

<embed type="video/webm" src="movie.mp4" width="400" height="300">

</body>

</html>

• Embed Images
<!DOCTYPE html>
<html>
<body>

<h1>The embed element</h1>

<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

</body>
</html>
• Embed Page
<!DOCTYPE html>
<html>
<body>

<h1>The embed element</h1>

<embed type="text/html" src="snippet.html" width="500" height="200">

</body>
</html>

6. button

<!DOCTYPE html>

<html>

<body>

<h1>The button Element</h1>

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

</body>

</html>

You might also like