HTML essential concepts

HTML Tags:

Codes placed in Angle Brackets < code > are called Tags, Tags are the instructions for browser which tells it what to do.

Examples: <html> <body> <head> <meta> <link> <a> <marquee> <h1> and so on

Types of Tags:

There are two types of tags:

Singular Tag / Unpaired Tag: The Tag which opens only but does not closes.

Examples: <br> <img><input><!doctype> <hr> <br><meta><link>

Paired Tag: The Tag which opens and also closes.

Examples: <html> …..</html> , <head>…..</head>….<body>…..</body> etc

HTML Element:

Everything from Opening Tag to closing tag is called HTML Element.

<tag> Content </tag.

Examples: <h1> This is heading 1 </h1>

Basic Structure of a HTML Program

HTML Program Structure

Basic Tags:

1. <!doctype>:
This tag Indicates version of HTML, means which versions we are using for designing website. <!doctype is singular tag.
I. HTML4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

· II. HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

III. XHTML1.0 Transitional

· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

· IV. XHTML 1. 0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· V. XHTML Mobile 1.0

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

· VI. HTML 5

<!doctype html>

2. <HTML> .......</HTML>
HTML is paired tags. <HTML> indicates start of HTML Program.
</HTML> indicates end of HTML Program.
3. <Head> ............</Head>
This tags indicates Head Section of the HTML Program, in head sections information about the website is specified and also it can be used to include external files such as CSS, JavaScript, Jquery etc. The head sections can contain <title> , <meta> <link> <script> tags.
The <title> tag is used to specify title of the website which is display in the title bar or the tab of browsers.
<meta> tags are used to provide the information and settings of the website.
<link> tags can be used to link external css files
<script> tags can used to write scripting language such as JavaScript, VBScript, or also can be used to include external scripting files in Website.
4. <body> .............</body>
body creates the main block of HTML Program, The markup tags for all the visible content of website such as Images, Videos, Texts, Links, different files etc are written inside the <body>
<body> tag can contains many tags such as <h1>..........<h6> headings, <br>, <p>, <hr>, <pre> , <img> , <ol>, <ul> , <table> , <a>, <marquee> , <form> , <div> , <span> etc.

Attributes

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"

Types of Attributes:

There are types of Attributes in HTML

1. Global Attributes: Attributes which can be used in many tags

Attribute	Description
accesskey	Specifies a shortcut key to activate/focus an element
class	Specifies one or more classnames for an element (refers to a class in a style sheet)
contenteditable	Specifies whether the content of an element is editable or not
contextmenu	Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
data	Used to store custom data private to the page or application
dir	Specifies the text direction for the content in an element
draggable	Specifies whether an element is draggable or not
dropzone	Specifies whether the dragged data is copied, moved, or linked, when dropped
hidden	Specifies that an element is not yet, or is no longer, relevant
id	Specifies a unique id for an element
lang	Specifies the language of the element's content
spellcheck	Specifies whether the element is to have its spelling and grammar checked or not
style	Specifies an inline CSS style for an element
tabindex	Specifies the tabbing order of an element
title	Specifies extra information about an element
translate	Specifies whether the content of an element should be translated or not

2. Element Attributes: The Individual attributes for individual tags

Examples: Direction is for marquee , text is for body

HTML Entities:

Output	Description	Entity Name	Entity Number
non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
€	euro	€	€
©	copyright	©	©

Mobile Apps Development

Native Apps
Web Apps
Hybrid Application

Native apps are built for a specific operating system. A native app developed for iOS won’t work on Android devices, and vis-versa.
Mobile web apps are developed to work interchangeably between different operating systems. They utilize a device’s web browser to deliver content. You can view a mobile web app on an Android phone, an iOS tablet, a PC, or anything in-between
Hybrid apps are a mixture of both native and mobile web apps. They wrap “web views” within native code to deliver their content. These apps are commonly developed within a third party tool like Titanium or PhoneGap, then cross-compiled to multiple operating systems.

Data Types:

Text Strings
URI (Uniform Resource Identifier)
Colors
Lengths
Content Types

Stand Alone Tags and Container Tags:

Stand Alone Tags:The tags which do not have child tags are said to be Stand Alone Tags
Container Tags:The tags which contains other elements. These tags are said to be Parent tags and tags and the tags which they contains are called Child tags.

HTML5 and Mobile Devices

HTML5 has helped to create better and richer mobile applications. For this, APIs are used in HTML5. These APIs support advanced Web application features for mobile browsers. HTML5 is not supported by older mobile devices. New age smartphones with Apple iOS and Google Android as operating systems support HTML5 compliant browsers. Even Microsoft Windows 7 for Mobile will have a newly developed browser to support HTML5 developed Web sites and applications. Due to the various mobile platforms available on mobile devices, development of mobile applications is difficult. HTML5 has tried to integrate all the features to deploy mobile applications that would be compatible in all the platforms. HTML5 provides features such as drag-and-drop functionality, video embedding in an application, and even offline capabilities. As HTML5 is compatible with most mobile operating systems, upto 30% of the cost for development for different operating systems is saved. Also, there is a reduced dependency in third-party components, thus reducing the licensing costs. All the required components will be readily available through the browser in HTML5.

Benefits of HTML5 for Mobile Development

The benefits of HTML5 for mobile developments are as follows:

HMTL5 has included APIs, hence additional plug-ins are not required for mobile browsers.
Mobile development is easier as knowledge of only HTML5, CSS, and JavaScript is majorly required. These are easier as compared to the other languages used for Mobile development. The development is also faster in HTML5.
There is a rising growth for mobile applications and due to its enhanced compatibility, HTML5 forms the foundation for developing these mobile applications.
HTML5 is compatible with most operating system platforms. The mobile applications developed on HTML5 can run on browsers of Android, iOS, Blackberry, Windows Phone, and other mobile operating systems.
The development cost for creating applications in HTML5 is low.
Applications based on location and maps will have greater support in HTML5. The plan is to support such applications on browsers, hence making them platform independent.
Third-party programs are not required in HTML5. Hence, media functions such as audio and video have better functionality and improved support in HTML5.