Aryan Prasad's Blog

HTML - Lists, Images, Interlinking, Audio, video.

Aryan Prasad's photo
Aryan Prasad
·

3 min read

Images are a common element of web design, and they serve a number of different purposes on websites.

  • Some of the main uses of images on websites include:

    1. Visual appeal

    2. Branding

    3. Illustration

    4. Navigation.

<img src="" alt="" height="" width=" " title="">

Audio

HTML provides a way to play audio on web pages through the <audio> element. The <audio> element is a self-closing tag, meaning it does not have a closing tag, and it is used to embed audio files in web pages.

  • Attributes

    ● src.

    ● controls.

    ● muted.

    ● autoplay.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Audio</title>
</head>
<body>
    <audio src="SONG.mp3" controls autoplay></audio>

    <audio controls autoplay>
        <source src="SONG.mp3">
    </audio>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video Page</title>
</head>
<body>
    <img src="https://images.pexels.com/photos/13766882/pexels-photo-13766882.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" height="500px" width="500px" title="Image">
    <video src="https://player.vimeo.com/external/463902394.sd.mp4?s=e51f3979e6629a9309d6299f46e94957bd5a647d&profile_id=164&oauth2_token_id=57447761" autoplay  height="500px" width="500px" muted ></video>
    <video autoplay>
        <source src="https://player.vimeo.com/external/427710919.sd.mp4?s=a6f4a02af947baa4185f77f80d1539401a298ccc&profile_id=164&oauth2_token_id=57447761" >
    </video>
</body>
</html>

List

Types of Lists in HTML

  1. Unordered List.

  2. Ordered List.

  3. Description List.

An unordered list in HTML is a list of items that are displayed in no specific order. Unordered lists are created using the <ul> element in HTML, and each item in the list is represented by an <li> element.

An ordered list in HTML is a list of items that are displayed in a specific numerical or alphabetical order. Ordered lists are created using the <ol> element in HTML, and each item in the list is represented by an <li> element.

There can be 4 kinds of markers for unordered lists:

● disc ● circle ● square ● None.

<ol>
    <li type="I">one</li>
    <li type="A">two</li>
    <li>three</li>
    <li type="I">four</li>
    <li>five</li>

</ol>

<ul>
    <li type="square">one</li>
    <li type="disc">two</li>
    <li type="none">three</li>
    <li>four</li>
    <li>five</li>
</ul>

A description list in HTML is a way to display a list of terms and their corresponding descriptions. It is similar to a dictionary, where each term is followed by its definition. Description lists are created using the <dl> element, with each term represented by an <dt> element and each description represented by an <dd> element.

The <a> element, also known as the anchor tag, is used in HTML to create a hyperlink. The <a> element allows you to specify the destination of the link using the attribute.

<dl>
    <dt>Iphone dsdsds</dt>
    <dd>kidney</dd>
    <dd>paisa</dd>
    <dt>agshashajhan</dt>
    <dd>hasb</dd>
    <dd>jasbkja</dd>
</dl>

Interlinking

The <a> element, also known as the anchor tag, is used in HTML to create a hyperlink. The <a> element allows you to specify the destination of the link using the href attribute.

<a href="https://pwskills.com/" target="NEWTAB"> PWSKILL </a>

EXAMPLE.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ol>
    <li type="I">one</li>
    <li type="A">two</li>
    <li>three</li>
    <li type="I">four</li>
    <li>five</li>

</ol>

<ul>
    <li type="square">one</li>
    <li type="disc">two</li>
    <li type="none">three</li>
    <li>four</li>
    <li>five</li>
</ul>

<dl>
    <dt>Iphone dsdsds</dt>
    <dd>kidney</dd>
    <dd>paisa</dd>
    <dt>agshashajhan</dt>
    <dd>hasb</dd>
    <dd>jasbkja</dd>
</dl>

</body>
</html>

HTML5