0% found this document useful (0 votes)
27 views17 pages

HTML Links, Images, Videos and Audios

HTML Links, Images, Videos and Audios etc

Uploaded by

sudaisjarar
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
0% found this document useful (0 votes)
27 views17 pages

HTML Links, Images, Videos and Audios

HTML Links, Images, Videos and Audios etc

Uploaded by

sudaisjarar
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/ 17

LINK, IMAGE, VIDEO AND

AUDIO etc.
By Zeeshan Hussain (Software Engineer)

zeeshan hussain (software engineer)


HTML LINKS
• HTML links or hyperlinks connect one resource on the web to
another.
• The resource may be an image, a web page, a program, a video clip,
an audio clip, an element within a web page, or anything that can be
hosted on the internet.
• We use the HTML <a> tag to create hyperlinks.
• Example:

zeeshan hussain (software engineer)


HTML IMAGES or <img> TAG
• HTML <img> tag is used to display image on the web page.
• HTML <img> tag is an empty tag that contains attributes only, closing
tags are not used in HTML image element.

zeeshan hussain (software engineer)


IMAGE SIZE - WIDTH AND HEIGHT
• You can use the WIDTH and HEIGHT attributes to specify the width
and height of your image.
• They are given as integers without a unit, and represent the image's
width and height in pixels.
• Example:

zeeshan hussain (software engineer)


HTML VIDEO
• The HTML <video> element is used to show a video on a web page.
• Example:

zeeshan hussain (software engineer)


ATTRIBUTES OF VIDEO TAG
• Let us look at the attributes supported by the HTML <video> tag.
• Controls: The controls attribute allows the user to control the video.
These controls might include things like a play button, a pause button, and
volume control.
• Autoplay: The Autoplay attribute automatically plays the video.
• Height and Width: attributes in <video> tag specify the size of the video in px.
• Loop: attribute specifies that the video will automatically play once it ends.
• Muted: The muted attribute sets the volume of the video to 0.
• Poster: attribute specifies a link to an image to be shown when the video has
not been played. It is more like a thumbnail to the video.

zeeshan hussain (software engineer)


HTML AUDIO
• Audios can be added to webpages using the <audio> tag.
• The “audio” tag is an inline element that is used to embed sound files
into a web page.
• Example:

zeeshan hussain (software engineer)


ATTRIBUTES OF AUDIO TAG
• Let us look at the attributes supported by the HTML <audio> tag.
• Controls: The controls attribute allows the user to control the
audio. These controls might include things like a play button, a
pause button, and volume control.
• Autoplay: The Autoplay attribute automatically plays the audio.
• Loop: attribute specifies that the video will automatically play
once it ends.
• Muted: The muted attribute sets the volume of the video to 0.

zeeshan hussain (software engineer)


HTML FAVICON
• A favicon is a small image displayed next to the page title in the
browser tab.
• To add a favicon to your website, either save your favicon image to
the root directory and save your favicon image in this folder.
• A common name for a favicon image is "favicon.ico".
• Example:

zeeshan hussain (software engineer)


HTML LAYOUT
• Page layout is the part of graphic design that deals with the
arrangement of visual elements on a page.
• Page layout is used to make the web pages look better.
• Example:

zeeshan hussain (software engineer)


WEBSITE HEADER
• The part of the front end which is used at the top of the page.
• <header> tag is used to add a header section on web pages.
• Example:

zeeshan hussain (software engineer)


WEBSITE NAVIGATION BAR
• The navigation bar is the same as the menu list.
• It is used to display the content information using hyperlinks.
• Example:

zeeshan hussain (software engineer)


WEBSITE INDEX OR SIDEBAR
• It holds additional information or advertisements and is not always
necessary to be added to the page.
• Example:

zeeshan hussain (software engineer)


WEBSITE CONTENT SECTION
• The content section is the central part where content is displayed.
• <main> tag is used to add the main content of the webpages.
• Example:

zeeshan hussain (software engineer)


WEBSITE FOOTER
• The footer section contains the contact information and other query
related to web pages.
• The footer section is always put on the bottom of the web pages.
• The <footer> tag sets the footer on web pages.
• Example:

zeeshan hussain (software engineer)


IF ANY QUESTION, YOU CAN
ASK!

zeeshan hussain (software engineer)


THANK YOU!

zeeshan hussain (software engineer)

You might also like