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 content 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" " " around them.

HTML PAGE STRUCTURE Below is a visualization of an HTML page structure: This is a heading. This is a paragraph. This is another paragraph.

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 is the beginning tag and is the ending tag. Use the "Last In = First Out" principle or "LIFO". – statements

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. The declaration helps the browser to display a web page correctly. The HTML document itself begins with and ends with. The visible part of the HTML document is between and.

HTML BASIC Example My First Heading My first paragraph.

HTML HEADINGS HTML headings are defined with the to tags. defines the most important heading. defines the least important heading.

HTML HEADINGS This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

HTML PARAGRAPHS HTML paragraphs are defined with the tag: This is a paragraph.

HTML Text Formatting The HTML element defines bold text, without any extra importance. The HTML element defines strong text. The HTML element defines italic text.

HTML Text Formatting The HTML element defines emphasized text. The HTML element defines marked or highlighted text. The HTML element defines deleted (removed) of text.

HTML Text Formatting The HTML element defines inserted (added) text. The HTML element defines subscripted text. The HTML element defines superscripted text.

HTML Text Formatting This text is normal. This text is bold. This text is strong. This text is italic. This text is emphasized. This text is marked. My favorite color is blue red. My favorite color is red. This is subscripted text. This is superscripte text.

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 This is a heading This is a paragraph. This is a heading Centered Heading This is a paragraph.

HTML HORIZONTAL RULES The tag creates a horizontal line in an HTML page to separate content. In HTML, the tag has no end tag.

HTML HORIZONTAL RULES The hr tag defines a horizontal rule: This is a paragraph. This is a paragraph. This is a paragraph.

HTML ELEMENT The HTML element contains meta data. The HTML element may contain title for the browser window, style definitions, JavaScript code,…. The HTML element is placed between the tag and the tag:

HTML ELEMENT My First HTML The HTML head element contains meta data. Meta data is data about the HTML document.

HTML ELEMENT The 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 tag has no end tag. In XHTML the tag must be properly closed.

HTML LINKS HTML links are defined with the tag. The link address is specified in the href attribute. Attributes are used to provide additional information about HTML elements

HTML LINKS HASAN KALYONCU UNIVERSITY

HTML IMAGES HTML images are defined with the 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

Embedding Multimedia The tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the 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

Audio on the Web The HTML5 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 and tags will display in browsers that do not support the element. Multiple elements can link to different audio files. The browser will use the first recognized format.

Audio on the Web Your browser does not support the audio element.