Scribd
Upload
6 views

Week3 HTMLEmbeddedElements

HTML ELEMENTS

Uploaded by

pddetecio
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
6 views

Week3 HTMLEmbeddedElements

HTML ELEMENTS

Uploaded by

pddetecio
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/ 29

CS102

WEB DESIGN AND


PROGRAMMING
LESSON 3: HTML Embedded Elements
Intended Learning Outcomes
At the end of this lesson, you will be able to:
• Discussing and applying tags for embedding
multimedia elements in webpages
• Explaining folder structures and linking external
resources.

LESSON 3: HTML Embedded Elements


HTML External Resources
HTML Media
• Web pages often contain multimedia elements of different
types and formats.
• Multimedia elements (like audio formats or video formats) are
stored in media files with designated format and extension
like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

LESSON 3: HTML Embedded Elements


HTML External Resources
Folder Paths
• A media or external resources must be stored in the same
folder or a subfolder relative to the HTML file.
• File Paths:
o Relative Path – relative to the location of the current document
./media/video.mp4
o Absolute Path- starts from the root folder
G:/Other computers/My laptop/CCC/COURSE/file
https://www.example.com/media/video.mp4

LESSON 3: HTML Embedded Elements


Embedded Elements
HTML Embedeed Elements

Embedded elements in HTML are used to integrate various types of content or media directly into a web page.
HTML Image
<img>
• The <img> tag defines the image.
• The source file (src), alternative text (alt), and size (width and
height) are provided as attributes.

<img src = “url“ alt = “Alternative” style = “width:value; height:value”>

LESSON 3: HTML Embedded Elements


<img>
HTML Video
<video>
• The HTML <video> element is used to show a video on a web page.
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes. If height
and width are not set, the page might flicker while the video loads.
• The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
• The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.

LESSON 3: HTML Embedded Elements


<video>
HTML Audio
<audio>
• The HTML <audio> element is used to play an audio file on a web page.
• The controls attribute adds audio controls, like play, pause, and volume.
• The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized
format.
• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

LESSON 3: HTML Embedded Elements


<audio>
HTML List Elements

These elements help in organizing and presenting information clearly and are fundamental to creating structured
content in HTML.
The TYPE Attribute for UL
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible
options –

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
TYPE ATTRIBUTE UL
NESTED LIST
The TYPE Attribute for OL
The type attribute of the <ol> tag, defines the type of the list item marker:

Value 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
TYPE ATTRIBUTE OL
HTML Description List
<dl>
• The <dl> tag defines the description list, the <dt> tag defines
the term (name).

LESSON 3: HTML Embedded Elements


<dl>
HTML LINK
HTML Link
<a>
• The <a> / anchor tag defines the link.
• Anything between the opening <a> tag and the closing </a>
tag becomes part of the link.
• URL is used to link variety of resources.

<a href = "Document URL" > Link Text </a>

LESSON 3: HTML Embedded Elements


<a> with Absolute URL
HTML Link
<a>
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

LESSON 3: HTML Embedded Elements


<a> with Relative URL
<img> with <a>
<a> as EMAIL tag
The TARGET Attribute for a
This attribute is used to specify the location where linked document is opened.

Value Description
_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.


Question and Answer

You might also like