0% found this document useful (0 votes)

19 views

Web Design-Lecture 4-HTML

The document discusses HTML tags such as <frame>, <iframe>, <img>, <audio>, <video>, <span>, <em>, <strong>, <b>, <i>, <small>, and <cite> that are used to structure and style text, embed images, videos and other media, and divide content in a webpage.

Uploaded by

James Lues

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

19 views

Web Design-Lecture 4-HTML

Uploaded by

James Lues

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 26

Web Design Faculty of Science

Computer Science Dept.

Second Stage
Lecture 3: HTML
Frame, Image, Video, Audio

Hoshang Qasim
E-mail: [email protected]
2021
Comment Tag

• The comment tag is used to insert comments in the source code. Comments are not displayed in
browsers.

• You can use comments to explain your code, which can help you when you edit the source code a
later date. This is especially useful if you have a lot of code.

<! -- Write commented text here -->

2 Note The commented code will not be visible to a webpage, and hence you can use
comment tag for documentation purpose, and debugging purpose:
Frames

3
Frames

• With frames, we can display more than one web page in the same browser
window

4
Frames

Example: Example: Vertical frameset with three other pages

<html>
<title>Frameset page</title>
<frameset cols="25%,50%,25%">
<frame src="green.html">
<frame src="red.html">
<frame src="yellow.html">
</frameset>
</html>

5
Save this page by name yellow.html
Frames

Example: Horizontal frameset with three other pages

<html>
<title>Frameset page</title>
<frameset rows="25%,50%,25%">
<frame src="green.html">
<frame src="red.html">
<frame src="yellow.html">
</frameset>
</html>

6
Frames

Example: Horizontal and vertical frameset with three other pages

<html>
<title>Frameset page</title>
<frameset rows="50%,50%">
<frame src="green.html">
<frameset cols="25%,75%">
<frame src="red.html">
<frame src="yellow.html">
</frameset>
</frameset>
</html>

7 Note Do not use HTML <frame> tag as it is not supported in HTML5,

instead you can use <iframe> achieve similar effects in HTML.
Iframes
• HTML Iframe is used to display a nested webpage (a webpage within a webpage).
• The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline
frame.

Iframe Syntax
• An HTML iframe is defined with the <iframe> tag:

8
Iframes

first.html home.html

<!DOCTYPE html>
<html>
<body bgcolor="silver">
<iframe src=“first.html" height="200"
width="300"></iframe>
<iframe src=“home.html" height="200"
width="500"></iframe></body>
</html>

9
Image, Audio, and
Video

10
Adding images using <img> Element

• Images are added to the site using the <img> element

<img src =“source of the image” alt=“image description”>
➢ The src attribute, indicating the source of the image
➢ The alt attribute, which provides a description of the image.

• In addition to carrying all the universal attributes, the <img> element can carry the
following attributes:
Src, alt, height, and width

Src attribute
11 • The src attribute tells the browser where to find the image
Adding images using <img> Element

height and width attribute

• specify the height and width of the image, and the values for these attributes are almost
always shown in pixels.

<img src="logo.gif" alt="Wrox Logo" height="120" width="180" >

• helps a page to load faster and more smoothly because the browser knows how much space to
allocate to the image, and it can correctly render the rest of the page while the
image is still loading .

12
Image

<html>
<img src=“folder/image.png">
</html>
13
Adding images using <img> Element

Using Image as a link

• To turn an image into a link simply place an image inside the <a> tag
• Images are often used to create graphical buttons or links to other pages.
<a href="http://www.wrox.com">
<img src="images/wrox_logo.gif" alt="Wrox logo" width="338" height ="79" >
</a>

14
keeping File Sizes Small

• Save the images in the formats that best compresses the image.(smaller file size) so:

- pages load faster

- can save on the charges to host your site.
• Use JPEGs for photo-realistic pictures with a lot of detail
• Use PNGs for images with flat color (rather than textured colors) and hard edges, such as
diagrams, text, or logos.
• Likewise png use GIF for not detailed photographs.

• For complex photographic images Use smaller versions of the images when the pages first
load and then add a link to the larger version.
adding YouTube Movies to Your web pages

• By using <iframe>, or inline frame, is a special element that enables you to embed another
web page within a web page using the familiar src attribute

• Write click on the YouTube video and select the copy embed code.

• Then past the code in the HTML file that you would like to contain YouTube video

<iframe width="700" height="394" src="

https://www.youtube.com/watch?v=Q33KBiDriJY "
</iframe>
Adding Media with the <audio> and <video> elements

• The <video> element is designed to insert videos to your webpage

• Similar to the <img> elemet its contain src, height, and width attributes

<video width="720" height="480" src="central.mp4">

• In addition to the global attributes, <video> supports the following attributes:

Poster, autoplay, mediagroup, loop, muted, controls.
Controlling Playback with the poster, autoplay, loop, and muted Attributes

Poster
• The poster attribute specifies an image to be shown while the video is downloading, or
until the user hits the play button.

• If this is not included, the first frame of the video will be used instead.

<video width="320" height="240" poster="lecture.jpg" controls>

autoplay

• indicates whether the video should automatically play when the page is loaded.

<video width="720" height="480" src=" video/central.mp4" autoplay>

Controlling Playback with the preload, autoplay, loop, and muted Attributes

loop

• as the name implies, indicates that the browser should start the video over when playback is
complete

<video width="720" height="480" src=" video/central.mp4" loop>

muted

• indicates whether the video player should play the associated audio track.

<video width="720" height="480" src=" video/central.mp4" muted>

Using the poster Attribute to Customize the initial Frame

poster attribute

• The poster attribute defines an image used as a placeholder until the video plays. If there is no
poster attribute defined, the first frame of the video is used as the poster

<video width="720" height="480" src=" video/central.mp4" poster="central.jpg">

controls Attribute

• The controls attribute indicates whether the browser should include playback controls.

<video width="720" height="480" src=" video/central.mp4" controls>

adding audio to Your web pages using the <audio> element

• the <audio> element works the same way as the <video> element
• an <audio> element and an src attribute are enough to get audio onto your pages.

• The <audio> element also supports the following attributes

crossorigin preload autoplay loop muted controls

22
FINE-TUNING YOUT TEXT
The <span> element

• Generic element with no semantic value that you can use to group inline elements
• The <span> tag provides no visual change by itself.

<p>My favorite color is <span style="color:blue">blue</span>and green</p>

The <em> element

• The content of an <em> element is intended to be a point of emphasis in your document,

and it usually displays in italicized text

<p>You <em>must</em> remember to close elements in HTML.</p>

24
The <strong> element

• Intended to show strong emphasis for its content. Stronger emphasis than the <em> element
• Most visual browsers display the strong emphasis in a bold font.
<p><em>Always</em> look at burning magnesium through protective colored glass as it <strong>
can cause blindness</strong>.
</p>

The <b> element

• Anything that appears in a <b> element displays in bold, like the word “bold” here:

The following word uses a <b>bold</b> typeface.

The <i> element

25
The content of an <i> element displays in italicized text, like the word “italic” here:
The following word uses an <i>italic</i> typeface.
Elements Description

<cite> indicate the source of the quoted text. by default the content renders in italicized text,
This chapter is taken from <cite>Beginning Web Development</cite>

<code> Represent the programming code in the webpages. Usually using monospaced font
<p><code><h1>This is a primary heading</h1></code></p>

<sup> Subscript text appears half a character below the normal line. Sometimes rendered in a smaller font.
Written on the 31<sup>st</sup> February.
Subscript text can be used for chemical formulas, like H2O.
<sub> The <sup> tag defines superscript text. appears half a character above the normal line helpful to
create footnotes. The EPR paradox<sub>2</sub> was devised by Einstein, Podolsky, and Rosen.
26