Refer to https://www.quackit.com/html/html_4/tags/html_input_tag.cfm for details 14 The Structure HTML Elements
HTML elements can have attributes.
Attributes provide additional information about elements.
Attributes are used to control the element's behaviour.
Attributes are always specified in the starting tag.
Attributes generally come in name / value pairs. This is centrally aligned
width="100">Note: Values should always be placed between single or double quotes.
needed by a particular element type for that element Required type to function correctly. E.g. tag – src and alt
used to modify the default functionality of an element Optional type. E.g. tag- border, height supported by a large number of element types. Standard / Global E.g. Class, Id, Hidden, Title
used to cause element types to specify scripts to be run Event under specific circumstances. E.g. onclick, onblur
DTD define the allowed syntax that can be used for various elements of HTML.
(X)HTML documents should begin with a DOCTYPE declaration.
A DOCTYPE is a required Including the DOCTYPE in a preamble needed for legacy document ensures that the reasons. browser makes a best-effort attempt at following the relevant specifications.
When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Conformance Checking DTD defines the actual elements, attributes and relationships that are valid in documents. Specifications conformance is a good practice and ensures appropriate rendering in different browsers.
The process of checking whether a document conforms to the rules of the DTD is called validation.
DOCTYPE allows validation software to identify the HTML DTD being followed and verify that the document is syntactically correct.
Online Validator: http://validator.w3.org.
21 What’s in the HEAD ? The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.
element is metadata that represents the title of the overall HTML document.
Title Element 22 What’s in the HEAD ? Meta : The element adds metadata to a document.
o Charset: This element simply specifies the document's character encoding. (utf-8 is a universal character set that includes pretty much any character from any human language.) o Many meta elements contain name and content attributes.
o Link to CSS and other references
23 What’s in the HEAD ? Explore other elements allowed in HEAD. o Base < base >
o Style < style >
o Comment
24 Browsers and HTML When a browser reads a marked-up document it builds a Parse tree to interpret the structure of the document.
These parse trees are called DOM (Document Object Model ) trees.
DOM trees helps browsers to determine how to render the page visually.
Many a times browsers fix arbitrary syntactical errors.
Hello This is a paragraph
This is another paragraph
25 Browsers and HTML DTD for HTML5
My title A heading Link text
26 Browsers and HTML There are three modes used by the layout engines in web browsers: quirks mode
almost standards mode
full standards mode.
How do browsers determine which mode to use For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode.
27 HTML5 HTML5 is the latest evolution of the standard that defines HTML.
The current standard, the HTML Living Standard is developed by WHATWG (Web Hypertext Application Technology Working Group), which is made up of the major browser vendors (Apple, Google, Mozilla , and Microsoft).
It is a new version of the language HTML, with new elements, attributes, behaviours, and technologies for building more diverse and powerful Web sites and applications.
Support for rich multimedia and other new features thereby reduce the need for external plugins and scripts. HTML5 It subsumes HTML4 and XHTML and is Backward compatible
Improve semantic definition for ease of readability by humans and computers
Make rendering of web content independent of the device being used (viewport tag and CSS media queries).
Support for interactive web applications that can interact with users, their local data, and servers more easily and effectively than was previously possible. How is HTML5 different from previous versions
• Multi-media support - Audio, Video controls (Earlier versions of HTML required Flash player support) • Improved Semantics for elements - , , , etc. • Geolocation Support – Easily through JS Geolocation API (Earlier was cumbersome and mostly not very accurate) • Graphics support – Canvas and SVG (Earlier versions of HTML required Flash player support, VML) • Multiple storage options – Browser cache, Application cache, SQL database (Only browser cache) • Socket support – Allows full duplex communication (Earlier done by streaming and pooling) • Web worker API – Brings threading to JavaScript • Persistent Error Handling – Standardized process to handle errors • Mobile Web made easier – View Port tag with support of media queries
30 HTML5 Page Layout Semantic Elements
• It is used to include introductory content or navigational aids that are specific to any single section of a page
• It is usually placed at the top of a page or section
• It can contain title, logo, search bar, menu bar etc.
• E.g. Cricbuzz website header Semantic Elements Element • Represents the dominant content inside the of a document
• Consists of content that is directly related to the central topic of a document
• A document must not have more than one element
• It doesn’t contribute to the document’s outline Semantic Elements Element • It defines a generic section of a document or application
• It is a thematic grouping of content, typically with a heading • E.g. Individual sections of a tabbed interface Various sections of an online news site; articles would be grouped into sections covering sports, economic news & world affairs Semantic Elements Element
• It represents a complete composition in a document, page or website
• It can be independently distributable or reusable
• It is a single piece of content that can stand on its own
• E.g. • A forum post • A magazine or newspaper article • A blog entry Semantic Elements Element
• It represents a group of navigation links
• Most commonly used for wrapping an unordered list of links
• Appropriate for pagination or breadcrumb links
• E.g. menus | table of contents | indexes Semantic Elements Element
• Represents self-contained content (with an optional caption using )
• It is usually an image, illustration, diagram or a code snippet that is referenced in the main flow of a document
• Figure, its caption and its contents are referenced as a single unit . Semantic Elements
• Represents a portion of a document whose content is only indirectly related to the documents main content
• Usually presented as sidebars or call-out boxes
• Don’t use element to tag parenthesized text, as this kind of text is considered part of the main flow Semantic Elements
• Represents a footer for the section of content that is its nearest ancestor
• The section could be entire document, or it could be a section, article, or aside element
• Often contain copyright information, related links, author info etc Forms – New Input Types Forms – New Validations Forms – New Elements
Source: https://robertnyman.com/2011/08/16/html5-forms-input-types-attributes-and-new- elements-demos-tips-and-tricks/ Multimedia
• Audio Element
• The audio element is used to embed audio in a web page
• To play an audio file in HTML, we use the tag Multimedia • Audio Element
Specifies location Specifies whether or not to of audio file display player controls
Syntax: Multimedia
• Video Element
• It specifies a video such as a movie clip or other video streams that is to be embedded in a web page Multimedia
• Video Element
Syntax Specifies the location Specifies whether or not to of a video file display player controls