Advanced Concepts in HTML 1
Uploaded by
Pratibha BahugunaAdvanced Concepts in HTML 1
Uploaded by
Pratibha BahugunaUNIT II
ADVANCED CONCEPTS IN HTML
1
Traditional html vs xhtml
• An Introduction to HTML
• html: the document root element that contains everything else
• head: things that do not appear in the main body of the document, such as
the
• title: a title for the window frame
• body: the main content of the document containing
• h1: a section heading
• p: paragraphs which can contain
• b: some bold text
• ul: an unnumbered list containing
• li: list items
2
Problems with HTML
• The document is not well-formed (some of the elements are not closed). This makes it hard to
parse automatically, and also potentially ambiguates the document structure.
• The structure (semantics) of the document are encoded in tags used to dictate text formatting
(the tag <b> serves only to indicate emboldening of the text within that element).
• The document is entirely sequential with no mechanism for grouping related items.
• Browsers do not report syntax errors, or validate against the HTML spec (which does exist).
3
Introduction to XHTML
• XHTML-Extensible HyperText Markup Language
• XHTML is almost similar to HTML 4.0 this is very strict version of HTML. It is developed by
(W3C) World Wide Web Consortium to help web developer’s transition easy.
• Many times some codes of HTML will not work on all browsers so it is used.
• All XHTML elements must be closed explicitly and nested properly
• XHTML tags are case-sensitive (and must be lower-case)
• XHTML supports namespaces, which allow other data types to be included in a document
4
A simple HTML 4 page An XHTML Page
5
Example
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns=http://www.w3.org/1999/xhtml xml: lang=“en”>
• <head>
• <title>Title of document</title>
• </head>
• <body>
• <b>some contents here </b>
• <p>lovely professional university</p>
• <br/>, <hr/>, <img src=“image.jpg” alt= ”alternative image”/>
• </body>
• </html>
6
Question
The …………….. statement indicates the particular version of HTML
or XHTML being used in the document.
A) <meta> B) <!DOCTYPE>
C) <base> D) <link>
7
Question
. ………….. is the additional attribute required by XHTML at the
declaration of <!DOCTYPE> statement.
A) xmlns B) xml
C) xmln D) xhtml
8
Question
If a web page does not update correctly on reload, holding down the
………………… key while clicking the reload button, refers the page
correctly.
A) shift B) ctrl
C) Alt D) up arrow
9
HTML <thead>, <tfoot>,and <tbody>tags
• Syntax
<table> <tfoot> tbody>
<thead> ... </thead> <tr> <tr>
</table> <td>...</td> <td>...</td>
<td>...</td> <td>...</td>
</tr> </tr>
</tfoot> <tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tbody>
**Now we create a table and use the tbody, thead and tfoot tags.**
10
Question
Within <body> tag, ……………………. define structural content
blocks such as paragraph(p), div, lists(ul) or headings(h1-h6).
A) plain elements B) outline elements
C) block level elements D) inline elements
11
Question
The elements such as bold(b), italic(i), strong(strong),
emphasis(em) are the examples of …………….
A) plain elements B) outline elements
C) block level elements D) inline elements
12
HTML Multimedia
• The term media refers to various means of communicating and disseminating information,
such as text, images, graphics, audio, video, and animation. All these mediums of
communication are collectively termed as multimedia.
• In other words, the term multimedia encompasses all means of communication, from a
single magazine containing text and images to an advance application containing audio,
video, and graphics.
• A combination of video and audio files can also be used in websites to gain popularity in
terms of viewership or provide information and entertainment to the users.
• HTML helps you to add multimedia files on your website by providing various multimedia
tags. These tags include Audio, Video, Embed and Object.
13
All about multimedia in HTML
• Multimedia Tags
• Audio & Video
• Embedded Multimedia
• EMBED Tag
• OBJECT Tags
• FIGURE & FIGCAPTION Tags
14
Multimedia Tags
• HTML5 has introduced two new multimedia tags, Audio & Video, for displaying
the audio and video streams on a Web page.
• Attributes of AUDIO Tag
• The AUDIO tag of HTML5 supports only three audio file formats i.e. .oog,
.mp3, .wav
• Attributes (autoplay, controls, loop, preload , and src )
• Attributes of VIDEO Tag
• The VIDEO tag to display a video file on the Web page. The VIDEO tag supports
the .gov and .mp4 file formats.
• Attributes ( audio, autoplay, controls, height, loop, preload, poster, src,width)
• Syntax
• <VIDEO src="video.ogv" autoplay="true" loop="3" controls>
• </VIDEO> 15
HTML Audio and Video
• An audio file is used to store audio data on various data, such as a computer system,
mp3 players,,.ram and mobile phones.
• List of Commonly Used Audio File Formats
MIDI-- .mid, .midi
WMA .wma
RealAudio .rm, ram
WAV .wav
AAC .aac
MP3 .mp3
• HTML <audio> tag
<audio controls>
<source src="songs.ogg" type="audio/ogg">
<source src="songs.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> 16
Question
• Which of the following adds audio controls, like play, pause, and
volume?
A) Audio B) Controls
C) Source D) src
17
HTML Video
• A video file is a collection of images that is displayed in a sequence representing
scenes in motion.
MPEG-.mpg, .mpeg
MPEG-4 or MP4 .mp4
AVI-.avi
QuickTime-.mov
Flash-.swf, .flv
RealVideo--.rm, .ram
• HTML <video> tag
<video width="320" height="240" controls>
<source src="song.mp4" type="video/mp4">
<source src="song.ogg" type="video/ogg">
Your browser does not support the video tag. 18
Question
• Which of the following HTML video-Media type is not supported in
IE?
A) WebM B) MP4
C) Ogg D) None of the mentioned
19
Embedded Multimedia
• Multimedia comes in many different formats.
• It can be almost anything you can hear or see. For Examples: Pictures, music,
sound, videos, records, films, animations, and many more.
• History of Browser Supports
• Multimedia Formats
20
EMBED Tag
• To embed plug-ins in a Web page using the EMBED tag. This tag lets you embed
multimedia in a Web page and play it while opening the page.
• The EMBED tag is supported by Internet Explorer as well as Netscape Navigator.
• It is also supported across the Windows and Mac platforms.
• Example of EMBED Tag
• <EMBED src="Music.mp3" width=600 height=100></EMBED>
• Attributes of EMBED Tag(height, hspace, type, and width)
21
Question
• Which of the following type attributes of input element defines
control for entering a telephone number?
A) Mob B) tel
C) Mobile D) telephone
22
OBJECT Tags
• HTML uses the OBJECT tag to include objects, such as images, audios, videos,
Java applets, ActiveX controls, Portable Document Format (PDF), and Flash
objects, in a Web page.
• The OBJECT tag allows you to specify the code that can be used to display or
manipulate that data.
• An OBJECT tag can also be used inside the BODY tag. The text between the
starting and the ending tags of the OBJECT tag is the alternate text for browsers
that do not support this tag.
• Attributes of OBJECT Tag (data, form, height, name, type, usemap, widht)
<OBJECT data="movie.avi" type="video/quicktime" id="video" width="200"
height="100">
<PARAM name="BorderStyle" value="1" />
<PARAM name="autoplay value=true />
</OBJECT>
23
Question
• The element ………..simply groups items within an enclosed dd tag,
though it may associate them with a caption define by a dt tag
A) Object B) Figure
C) Embed D) none of the mentioned
24
FIGURE & FIGCAPTION Tags
• The FIGURE tag is newly introduced in HTML5 and is used to group
or annotate various diagrams, images, illustrations, and code snippets.
• Define various tags, such as IMG, CODE, and PRE, inside the
FIGURE tag.
• The FIGCAPTION tag is used inside the FIGURE tag to provide the
caption of the content.
• Example of FIGURE and FIGCAPTION Tags
<FIGURE>
<FIGCAPTION>Listing 1: Showing the alert box</FIGCAPTION>
<PRE><CODE>alert('Hello World!');</CODE></PRE>
</FIGURE> 25
Question
Which tag is used to defines multiple media resources for media
elements audio and video?
A) <video> B)<source>
C) <audio> D) <canvas>
26
Question
HTML5 features, include native audio and video support without
the need for.
A) Svg B) Flash
C) None of the above D) Canvas
27
Question
In handling media events which event is generated when the first
frame of the media has finished loading.
A) Loadstart B) error
C) Ended D) loadeddata
28
Embedding Media from another Web page Example Output
Program code?
29
How to add media to a webpage, program
code for this output?
30
