Web Multimedia HTML5 PDF

 Multimedia Web Application | house Front-end HTML | structure CSS |decoration JavaScript |logic Back-end NO PHP here!!  Related Technologies HyperText Markup Language – the standard markup language for creating web pages...

 Multimedia Web Application | house Front-end HTML | structure CSS |decoration JavaScript |logic Back-end NO PHP here!!  Related Technologies HyperText Markup Language – the standard markup language for creating web pages and web applications. HTML specifies the document structure, text content, references to multimedia resources. Cascading Style Sheets - describes how to present the content JavaScript is the language of the web; a multi-paradigm, open, cross-platform scripting language that supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. JavaScript is used both as client-side and server-side programming language. JS manages u ser interaction, webpage dynamics Cornerstone of the World Wide Web The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. Types of nodes: Elements, Text Nodes - created in HTML or JavaScript and contains: Attributes, Parameters JavaScript functions Who does the web work, in essence? What is HTML5?  HTML 5 is the fifth major revision of the format used to build Web pages and applications  It was officially published on 28 October 2014, by W3C as a Web standard (or HTML Standard (whatwg.org)).  HTML5 contains powerful capabilities for Web-based applications: interaction, video support, graphics, more styling effects, and a full set of APIs.  HTML5 adapts to any device: desktop, mobile, tablet, or television device. HTML5 platform is developed under free licensing terms.  HTML5 term is used:  to refer to a set of technologies that form the future Open Web Platform, including: HTML5 specification, CSS, SVG, MathML, Geolocation, XMLHttpRequest, 2D Context, Web Fonts (WOFF) and others. The boundary of this set of technologies is informal and changes over time.  to refer to the HTML5 specification, which is, of course, also part of the Open Web Platform.  What is different in HTML5?  Greater simplicity: the new doctype definition, the "type" attribute of elements such as or are now optional, the syntax constraints that have been relaxed, the new structural elements that have been added, etc.  A minimal HTML5 document HTML4 minimal document  What is different in HTML5? (2)  Simpler character set definition: - best practice  No more complicated DOCTYPE definitions  The "TYPE" attribute is optional  More flexible syntax constraints  Some new elements added to the HTML5 set: , , , , , , ,  HTML Specifications - https://html.spec.whatwg.org/  Using special character in HTML -> codes: https://dev.w3.org/html5/html-author/charref  Image Tag Image – the first multimedia resource in HTML Alt – for accessibility Multimedia 2019 “Welcome to Multimedia course. A wish you all a most successful new academic year!” Note: The image tag doesn’t need a closing tag.  FIGURE & FIGCAPTION Tags The figcaption element can only exist within a figure element Figure 1 - Web image!!! Some Multimedia HTML5 Tags Image: IMG, FIG+FIGCAPTION, CANVAS Responsive Image: PICTURE, Vector graphics: SVG Audio: Video: Forms: FORM, INPUT, SELECT, OPTION Meter Progress  W3C Validators W3C Validator (https://validator.w3.org/ checks the markup validity of HTML documents. CSS Validator (https://jigsaw.w3.org/css-validator/)- checks Cascading Style Sheets (CSS) and (X)HTML documents that use CSS stylesheets. Link Checker (https://validator.w3.org/checklink) - looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site W3C cheatsheet provides quick access to useful information from a variety of specifications published by W3C in a very compact and mobile-friendly format.  Browser compatibility check & Debugging Can I Use (https://caniuse.com/) provides up-to-date tables for support of front- end Web technologies on desktop and mobile Web browsers. MDN Web Docs (https://developer.mozilla.org/en-US/ ) provides browser compatibility tables DEBUGGING  Dev. tools of your browser=> press F12 in Windows or cmd-alt-i in Mac  Use the console.log(string) JS function embed in HTML5 code.  Associating labels explicitly - The for attribute of the label must exactly match the id of the form control. Basic data validation input pattern based on JavaScript regexp Controls grouping needs to be carried out visually and in the code using the and elements. element – for grouping elements in list  Accept is used on upload inputs in order to specify the types of files or the only format that a user can upload to the server. - only upload jpg and png to our server  Multiple allows the user to enter multiple values. It can be attached to the tags and  Contenteditable attribute is used to make the HTML content editable on a web page. Employees: 1. Ion 2. Dan 3. Ana  Download attribute specifies that links will be downloaded when a user clicks on them. Download this  Translate attribute - tells if the content should be translated or not. It can be attached to all HTML tags because it’s a global attribute. Text  JavaScript validation is coded using JavaScript. This validation is completely customizable, but you need to create it all. Built-in form validation uses HTML5 form validation features. It has better performance than JavaScript, but it is not as customizable as JavaScript validation. Required minlength and maxlength – for textual data min and max: - numerical input types type- a number, an email address, password….. Pattern - Regular expressions When an element is invalid: The element matches the :invalid CSS pseudo-class, and sometimes other UI pseudo-classes (e.g., :out-of-range) depending on the error, which lets you apply a specific style to invalid elements. If the user tries to send the data, the browser will block the form and display an error message.  HTML - Summary of Required Issue for this course  HTML goals  HTML syntax rules: tag, attribut, special characters, block and inline HTML elements  HTML document structure: DOCTYPE, html, head, body  Using HTML elements, both multimedia and text-based, including controls for web forms HTML as a Tree  DOM Document Object Model (DOM) – a structured tree representation of a web page HTML of every web page is turned into a DOM representation by the browser DOM provides the way to programmatically access HTML structure in JavaScript The root DOM object => accessed by the document object All JavaScript objects generate the tree Each element within the page is referred to as a node. Includes references to childNodes / children Includes references to (parentNode) and next node (nextSibling) Includes methods to manage the child node: appendChild(nod), removeChild(nod)… Nodes have specific methods and properties function on the related HTML tag. What does the DOM look like? HTML DOM