HTML5-I.pdf

CSC501 - Full Stack - I: Web UI and Responsive UI Framework Overview of HTML5 Introducing CSS3 Overview of JavaScript Bootstrap jQuery and AJAX  Overview of HTML5 History, Vision & Future of HTML5 Structure of a Web Page HTML5 Mark-up Browse...

CSC501 - Full Stack - I: Web UI and Responsive UI Framework Overview of HTML5 Introducing CSS3 Overview of JavaScript Bootstrap jQuery and AJAX  Overview of HTML5 History, Vision & Future of HTML5 Structure of a Web Page HTML5 Mark-up Browser Support Forms Audio and Video Canvas SVG Geo location What is HTML? HTML is the standard markup language for creating Web pages. Stands for Hyper Text Markup Language Describes the structure of a Web page Consists of a series of elements Elements tell the browser how to display the content Tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page A Simple HTML Document Page Title My First Heading My first paragraph. The Declaration The declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The declaration is not case sensitive. HTML Version HTML Structural Tags These tags enclose the entire Web page document. These tags enclose the Head part of the document These tags enclose the title of the document. This text appears in the title bar in the browser and on the bookmark list if someone bookmarks your web page. HTML Structural Tags The element defines the document body. It has a start tag and an end tag. HTML Structural Tags Header Tags -- Used for marking sections and subsections in a document. – Header 1 -- Giant-sized and bold – Header 2 -- Large and bold – Header 3 -- Normal-sized and bold – Header 4 -- Small and bold – Header 5 -- Very Small and bold – Header 6 -- Tiny and bold HTML Structural Tags Breaking Lines and Paragraphs text – Paragraph tag – Most browsers render (process) this with blank lines between each paragraph – Line break tag – Used when the webmaster wants a carriage return but doesn't want a blank line to follow Example: text a text a text b text b text c text d text c text d HTML Structural Tags HTMLAttributes – All HTML elements can have attributes – Attributes provide additional information about an element – Attributes are always specified in the start tag – Attributes usually come in name/value pairs like: name="value" HTML Structural Tags HTMLAttributes 1. The href Attribute – HTML links are defined with the tag. The link address is specified in the href attribute: – Example: This is a link 1. The src Attribute – HTML images are defined with the tag. – The filename of the image source is specified in the src attribute: – Example: HTML Structural Tags HTMLAttributes 3. The width and height Attributes HTML images also have width and height attributes, which specifies the width and height of the image: Example: 4. The style Attribute – The style attribute is used to specify the styling of an element, like color, font, size etc. – Example: This is a paragraph. HTML Forms The Element The HTML element defines a form that is used to collect user input: form elements Differences Between HTML4 & HTML5 HTML5 is a work in progress Simplified Syntax The New Element for 2D drawings New content-specific elements, like , , , New and Elements New and Elements New form controls, like calendar, date, time, email, url, search No More , , , and , Support for local storage HTML5 8-bit Unicode Transformation Format HTML5 Technology Functions Semantics: allows you to describe more precisely what your content is. Connectivity: allowing you to communicate with the server in new and innovative ways. Offline and Storage: allowing web pages to store the data at client side locally and operate offline more efficiently. Multimedia: allows to import audio and video. 2D/3D Graphics and Effects: allowing much more diverse range of presentation options. Performance and Integration: providing greater speed optimization HTML5 Semantic Elements HTML5 Semantic Elements Semantic elements = elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements: , , and - Clearly defines its content. Many web sites contain HTML code like: