multimedia and web technology prepared by: asst. prof. maryam eskandari

Multimedia and Web Technology

Prepared by:Asst. Prof. Maryam Eskandari

Multimedia

• What is Multimedia on the web?

– Multimedia on the web, is sound, music, videos, movies, records, animations and more.

– Web pages often contains multimedia elements of different types and formats.

Browser Support

• The first web browsers had support for text only, limited to a single font in a single color.

• Later came browsers with support for colors and fonts, and even support for pictures, sounds, animations, and videos !

• HTML5 multimedia provides an easier way for multimedia.

Multimedia Formats• Multimedia elements (like sounds or videos) are stored in media files.

• When a browser sees the file extension .htm or .html, it will treat the file as an HTML file.

• The .xml extension indicates an XML file, and the .css extension indicates a style sheet file.

• Pictures are recognized by extensions like .gif, .png and .jpg.

• Multimedia files have their own formats like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

Sound Formats

Supported Video and Sound formats by HTML5

• Video:• Only MP4, WebM, and Ogg video is supported

by the newest HTML5 standard.

• Sound:• Only MP3, WAV, and Ogg audio is supported

by the newest HTML5 standard.

The web elements• HTML: Hyper-Text Markup Language. Provides formatting of text and

graphics, as well as links between documents.

• CSS: Cascading Style Sheets. Provide more powerful and detailed control of style and formatting.

• JavaScript: a programming language for client-side scripting, to provide dynamically changing content.

• Java: a more powerful programming language for web applications on the client that can also run independently of the browser.

• Server-side scripting and programming (SHTML, ASP, PHP, CGI): These permit access to databases and other information located on the server.

The internet

• Internet is a network of computer networks.

• HTML is a markup language for describing web pages.

• HTML stands for Hyper Text Markup Language

• A markup language is a set of markup tags

• HTML documents are described by HTML tags

• Each HTML tag describes different document content

HTML

• HTML tags normally come in pairs like <tagname>content</tagname>

• The first tag in a pair is the start tag, the second tag is the end tag.

• The end tag is written like the start tag, but with a slash before the tag name.

• The start tag is often called the opening tag. The end tag is often called the closing tag.

Web Development Tools• Many tools exist for creating Web pages

e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill, Macromedia DreamWeaver, HotDog, …

we learn HTML using a basic text editor?YOU NEED A FOLDER (also called a DIRECTORY) YOU DO NOT NEED TO BE CONNECTED TO THE

INTERNET YOU NEED A WORD PROCESSOR (such as NotePad

or WordPad)

HTML

• In summary, you basically:

– create your web page in a text editor such as NotePad (typing in all the text and tags)

– save your web page as an HTML file using any appropriate name

– load the HTML file into the browser to see how your web page looks and works

– switch back to NotePad to make any corrections, changes, etc.

WEB BROWSWES

• The purpose of a web browser (Chrome, IE,…) is to read HTML documents and display them.

• The browser does not display the HTML tags, but uses them to determine how to display the document.

• To tell the browser that something is a tag, place "less than" "<" and "greater than" symbols ">" around them.

HTML PAGE STRUCTURE

• Below is a visualization of an HTML page structure:

• <html>• <body>• <h1>This is a heading.</h1>• <p>This is a paragraph.</p>• <p>This is another paragraph.</p>• </body>• </html>

HTML VERSIONS• HTML 1 (Berners-Lee, 1989): very basic, limited integration of

multimedia

• HTML 2.0 (IETF, 1994): tried to standardize these & other features

• HTML 3.2 (W3C, 1996): attempted to unify into a single standard

• HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML)

• XHTML 1.0 (Extensible HTML)(W3C, 2000): HTML 4.01 modified to conform to XML standards

• XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0

• HTML 5 (Web Hypertext Application Technology Working Group, W3C, 2006): New version of HTML4, XHTML 1.0, and DOM 2 (still a work in progress)

Html- CORRECT USE OF TAGS

• <HTML> is the beginning tag and </HTML> is the ending tag.

• Use the "Last In = First Out" principle or "LIFO".

– <tag1><tag2> statements </tag2></tag1>

– <tagA><tagC><tagB><tagD>statements</tagD></tagB></tagC></tagA>

Html-Structural Elements

• An HTML document has two main structural elements:

– HEAD contains setup information for the browser & the Web page• e.g., the title for the browser window, style definitions, JavaScript code, …

– BODY contains the actual content to be displayed in the Web page

HTML EDITORS

• Step 1: Open Notepad

• To open Notepad in Windows 7 or earlier:

• Click Start. Click All Programs. Click Accessories. Click Notepad.

HTML EDITORS

• Step 2: Write Some HTML Write or copy some HTML into Notepad.

• Step 3: Save the HTML Page• Select File -> Save as in the Notepad menu.• When saving an HTML file, use either the .htm

or the .html file extension. There is no difference, it is entirely up to you.

HTML EDITORS

• Step 4: View HTML Page in Your Browser

• Double-click your saved HTML file.

HTML BASIC

• HTML documents can start with a type declaration <!DOCTYPE html>.

• The <!DOCTYPE> declaration helps the browser to display a web page correctly.

• The HTML document itself begins with <html> and ends with </html>.

• The visible part of the HTML document is between <body> and </body>.

HTML BASIC• Example

• <!DOCTYPE html><html><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>

HTML HEADINGS

• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading.• <h6> defines the least important heading.

HTML HEADINGS• <!DOCTYPE html><html><body>

• <h1>This is heading 1 </h1>• <h2>This is heading 2 </h2>• <h3>This is heading 3 </h3>• <h4>This is heading 4 </h4>• <h5>This is heading 5 </h5>• <h6>This is heading 6 </h6>

• </body></html>

HTML PARAGRAPHS• HTML paragraphs are defined with the <p> tag:

• <!DOCTYPE html>• <html>• <body>

• <p>This is a paragraph.</p>• <p>This is a paragraph.</p>• <p>This is a paragraph.</p>

• </body>• </html>

HTML Text Formatting

• The HTML <b> element defines bold text, without any extra importance.

• The HTML <strong> element defines strong text.

• The HTML <i> element defines italic text.


• The HTML <em> element defines emphasized text.

• The HTML <mark> element defines marked or highlighted text.

• The HTML <del> element defines deleted (removed) of text.


• The HTML <ins> element defines inserted (added) text.

• The HTML <sub> element defines subscripted text.

• The HTML <sup> element defines superscripted text.

HTML Text Formatting• <!DOCTYPE html>• <html>• <body>• <p>This text is normal.</p>• <p><b>This text is bold.</b></p>• <p><strong>This text is strong.</strong></p>• <p><i>This text is italic.</i></p>• <p><em>This text is emphasized.</em></p>• <p><mark>This text is marked.</mark></p>• <p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p><p>This is <sub>subscripted</sub> text.</p><p>This is <sup>superscripte</sup> text.</p></body>

• </html>

HTML Styles

• Styling is about changing or adding the style.

• Every HTML element has a default style.

• Changing the default style of an HTML element, can be done with the style attribute.

HTML Styles

• The HTML style attribute has the following syntax:

• style="property:value“

• Style can be, color, font, size, alignment,…

HTML Styles

• <!DOCTYPE html><html><body style="background-color:lightgrey">

• <h1 style="color:blue">This is a heading</h1> • <p style="font-family:courier">This is a paragraph.</p>

<h1 style="font-size:300%">This is a heading</h1> <h1 style="text-align:center">Centered Heading</h1><p style="text-align:right"> This is a paragraph.</p> </body></html>

HTML HORIZONTAL RULES

• The <hr> tag creates a horizontal line in an HTML page to separate content.

• In HTML, the <hr> tag has no end tag.

HTML HORIZONTAL RULES• <!DOCTYPE html>• <html>• <body>

• <p>The hr tag defines a horizontal rule:</p>• <hr>• <p>This is a paragraph.</p>• <hr>• <p>This is a paragraph.</p>• <hr>• <p>This is a paragraph.</p>


HTML <head> ELEMENT

• The HTML <head> element contains meta data.

• The HTML <head> element may contain title for the browser window, style definitions, JavaScript code,….

• The HTML <head> element is placed between the <html> tag and the <body> tag:

HTML <head> ELEMENT• <!DOCTYPE html>• <html>

• <head>• <title>My First HTML</title>• <meta name="author" content=“Maryam Eskandari">

</head>

• <body>

• <p>The HTML head element contains meta data.</p>

• <p>Meta data is data about the HTML document.</p>


HTML <head> ELEMENT• The <meta> tag provides metadata about the HTML document.

Metadata will not be displayed on the page, but will be machine parsable.

• Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

• In HTML the <meta> tag has no end tag. In XHTML the <meta> tag must be properly closed.

•

HTML LINKS

• HTML links are defined with the <a> tag.

• The link address is specified in the href attribute.

• Attributes are used to provide additional information about HTML elements

HTML LINKS

• <!DOCTYPE html>• <html>• <body>• <a href="http://www.hku.edu.tr">HASAN

KALYONCU UNIVERSITY</a>• </body>• </html>

HTML IMAGES

• HTML images are defined with the <img> tag.

• The source file (src), alternative text (alt), and size (width and height) are provided as attributes.

• The alternative text is not normally visible to readers; however, it may be displayed by web browsers when images are switched off.

HTML IMAGES

• <!DOCTYPE html>• <html>• <body>• <img src="C:\Users\Public\Pictures\Sample

Pictures\Penguins.jpg" alt=“Image of Penguins" width="104" height="142">


Embedding Multimedia

• The <video> tag specifies video, such as a movie clip or other video streams.

• Currently, there are 3 supported video formats for the <video> element: – MP4, WebM, and Ogg:

Embedding Multimedia• Scr attribute specifies the URL of the video file.

• autoplay attribute specifies that the video will start playing as soon as it is ready.

• loop attribute specifies that the video will start over again, every time it is finished.

• control attribute specifies that video controls should be displayed (such as a play/pause button etc).

Embedding Multimedia

• <!DOCTYPE html>• <html>• <body>

• <video width="320" height="240" controls autoplay>• <source src="movie.mp4" type="video/mp4">• </video>


Audio on the Web• The HTML5 <audio> element specifies a standard way

to embed audio in a web page.

• The controls attribute adds audio controls, like play, pause, and volume.

• Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

• Multiple <source> elements can link to different audio files. The browser will use the first recognized format.

Audio on the Web• <!DOCTYPE html>• <html>• <body>

• <audio controls>• <source src="horse.ogg" type="audio/ogg">• <source src="horse.mp3" type="audio/mpeg">• Your browser does not support the audio element.• </audio>


multimedia and web technology prepared by: asst. prof. maryam eskandari

Documents