SDP_-_Module_4.ppt

Web Application Development with HTML5
• HTML5 is the latest version of HTML
• New smartphones and tablet devices support HTML5
• End tags are no longer required for all elements
• You can write in upper- or lowercase, and attributes don’t need to have
quotations around them all the time.
• HTML5 also adds a streamlined doctype (or DTD— the first line of
your HTML document. It tells the browser that this document is an
HTML5 one),
• Sectioning elements, many new form features
• Support for drag and drop
• Features useful for creating web applications.

Building HTML5 Document
Begin writing your HTML, which is defined by tags that are written inside
of less-than (<) and greater-than (>) signs.
1. Open your text editor and type the following:
<!doctype html>
<html>
<head>
<title>This is my first HTML5 page</title>
</head>
<body>
<h1>My First HTML Document</h1>
<p>This is my first HTML5 document.
</body>
</html>
2. Save your file as mypage.html.
3. Then open this page in web browser.

The New HTML5 Tags
a) Layout Tags
Most of these new tags are called “sectioning” elements and they provide
semantics for the layout and sections of an HTML document.
<article>—An independent portion of the document or site.
<aside>—Content that is tangential to the main part of the page or site.
<figcaption>—Caption for a figure.
<figure>—A figure or quotation pulled out of the flow of text.
<footer>—The footer of a document or section.
<header>—The header of a document or section.
<hgroup>—A group of headings.
<nav>—A navigation section.
<section>—A generic section that cannot be defined by any one of the
above types.
Use these tags to define specific areas of your HTML documents. They
provide you with ways to attach CSS styles and give some semantic
meaning to the parts of your pages.

b) Semantic Elements/Tags
Semantic elements tell the browser or user agent (a technical term for a
tool that can parse web pages) about the contents of the tag have a
specific meaning beyond the meaning of the text itself.
A semantic tag such as <article> tells the browser that the contents are
part of a standalone article.
New semantic tags in HTML5:
<details>—Control for adding more information.
<figcaption>—Caption for a figure.
<figure>—A figure or quotation pulled out of the flow of text.
<mark>—Content that has been highlighted or marked.
<meter>—A scalar gauge.
<output>—Results from a script or form.
<progress>—Progress indicator.
<summary>—Summary for a details element.
<time>—Date or time.
<wbr>—Optional line break.

c) New Multimedia Tags
HTML5 multimedia tags are:
<audio>—Embedded sound files.
<canvas>—Embedded dynamic graphics.
<embed>—To add other technologies that don’t have a specific HTML5
element.
<source>—The source files for embedded sound and video.
<track>—Supplementary media tracks for embedded sound and video.
<video>—Embedded video files.

d) New Form Features
• HTML5 forms have more functionalities than HTML 4.
• With HTML5 use form <command> tags to define a single action for
multiple form elements.
• You can provide pre-defined data in a <datalist> tag.
• With the <keygen> tag you can generate public-private key pairs to
keep your forms secure.
The <input> tag now has 13 new types for collecting specific data:
<input type=color> , <input type=date>, <input type=datetime>
<input type=datetime-local>, <input type=email>
<input type=month>, <input type=number>
<input type=range>, <input type=search>
<input type=time>, <input type=tel>
<input type=url>, <input type=week>

e) The New HTML5 Attributes
• An attribute is written in HTML after the tag name, separated by a
space, inside the greater-than and less-than signs.
• If the attribute can have a value, that value is attached to the attribute
by an equal sign.
• If spaces exist in the value, then you should surround the whole value
with quotation marks. For example:
<elementname attributename=value>
or
<element name=”value value”>
• Boolean attributes are also available in HTML5 that don’t require a value.
Instead, if they are present, the attribute is applied, and if they are absent the
attribute is not applied.
<elementname attribute>

e) The New HTML5 Attributes
The new HTML5 event attributes include:
onabort—Fires when an action is aborted.
onbeforeonload, onbeforeonunload, and onunload—Fires just before
an element loads or unloads and as an element unloads.
oncontextmenu—Fires when the context menu is triggered.
ondrag, ondragend, ondragenter, ondragleave, ondragstart, and
ondrop—These fire when various drag-and-drop actions occur.
onerrror and onmessage—These fire when errors or messages are
triggered.
onscroll—This fires when the user scrolls the browser scroll bar.
onresize—Fires when an element is resized.

Styling Mobile Pages with CSS3
• Cascading Style Sheets (CSS) is used to define how your HTML
documents will look.
• You can style HTML for print, for web pages, and even for specific
mobile devices.
• The same HTML content can also be displayed completely differently
in each of those places.
• CSS is widely supported by most browsers and mobile devices.

Creating a CSS Style Sheet
CSS is made up of one or more selectors with style properties
attached.
To change the text color of a paragraph you would write:
p {
color: red;
}
The selector is p and the style property (enclosed in the curly braces)
is color: red;
To add a second selector, simply separate it with a comma:
p, .redText {
color: red;
}

Creating a CSS Style Sheet
After you have a style, you attach it to a web page in one of three ways:
1) Inline in the tags themselves
2) Embedded in the head of your HTML
3) In a separate document as an external style sheet
a) Inline
• Styles that are placed inline inside a tag don’t need a selector because
the selector is defined by the tag it’s in.
• You add a style attribute to the tag, and put the styles in the attribute
value (separate multiple styles by a semicolon.
To color the text of a single paragraph in your HTML red you would write:
<p style=”color: red;”>

b) Embedded Style Sheets
• Embedded style sheets sit in the <head> tag of your document.
• You use the <style> tag and write your styles as mentioned previously
with a selector and styles enclosed in curly braces.
<!DOCTYPE html>
<html>
<head>
<title>Example of Embedded Styles</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>The text in this paragraph would be red.</p>
<p>And this paragraph as well.</p>
</body>
</html>

c) External Style Sheet
The best way to add your styles to a document is with an external style sheet.
1. Open a new document.
2. Write your styles as in the embedded style sheet, but without the <style> tag
surrounding them.
3. Save that file as a style sheet with a .css extension, example styles.css
html, body {
font: 1em/1.25 Arial, Helvetica, sans-serif;
}
p {
color: red;
}
Attach it to your web page. To do this, add a <link> tag to the head of
your document that points to the style sheet. For example:
<link href=”styles.css” rel=”stylesheet”>

Changing the Fonts with CSS
One of the first things that most web designers want to adjust is the fonts
used on a web page, specifically the fonts used for headlines.
• You can use several font style properties to style the font and text of
headlines and other text on your pages, including:
font-family—The face of the font
font-size—The size of the font
font-weight—Make the font bold or not
font-style—Make the font italic or not
font-variant—Set small caps
font—A shortcut style to set any or all of the preceding styles in one line
While all the preceding properties are good, the one that you should
focus on is the font property.
The syntax for using the font property is:
font: font-style font-variant font-weight font-size/line-height font-
family;

Using CSS for Layout
• The two basic ways to use CSS for layout are floating and absolute
positioning.
• Floating relies on the CSS property float to place elements with
defined width next to one another.
• Absolute positioning takes elements and places them in precise
positions on the page.
• Every element in your document has a square shape, even if you can’t
see it.
• To see, put a border around your elements with the border style
property, like this:
border: 1px solid black;

• A major part of CSS layout surrounds the boxes that are created by
the elements.
• It’s called the CSS box model.
• Every box on a web page has a content area, padding, a border,
and a margin.

To change the box model with CSS, you can use these style properties:
margin
padding
border
height
width
After you have defined the box model on your web page elements, you
can use CSS floats to position your elements where you want them on
the page.

JavaScript and HTML5 Applications
• Web design consists of three parts: content, style, and behavior.
• HTML (the content) and CSS (the style). JavaScript is the behavior.
• JavaScript is a programming language that you can use to affect the
user interface and create dynamic websites.
• You can use it to affect the Document Object Model (DOM) to control
the elements on the page, including
• color, size, position, visibility of the elements themselves
• to open new browser windows.

a) Adding a Simple Script to a Page
The first program almost every programmer learns is how to write “Hello
World” on the screen.
1. Create your web page:
<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript</title>
</head>
<body>
</body>
</html>
2. Add a script tag to the <head> of the page:
<script>
</script>

3. Add the JavaScript function inside the script tags to write “Hello World”
in an alert window:
function hello() {
alert(“Hello World”);
}
4. Add a link to the body of your document to call the script:
<a href=”#” onclick=”hello();”>Click Me</a>
5. Include a <noscript> tag below the link with alternative text:
<noscript>
<p>Hello World
<p>This text is not written with JavaScript.
</noscript>

The full HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript</title>
<script>
function hello() {
alert(“Hello World”);
}
</script>
</head>
<body>
<a href=”#” onclick=”hello();”>Click Me</a>
<noscript>
<p>Hello World
<p>This text is not written with JavaScript.
</noscript>
</body>
</html>

PhoneGap – Introduction, use, and advantages
• It is a framework or a tool to help you create mobile applications, and
also works to convert HTML5 applications into native mobile apps.
• PhoneGap is a framework that makes the developers develop their
apps using standard web APIs for all major mobile operating systems.
• Compatible on all platforms
• Ease of development
• Tapping into device’s hardware
• Strong and robust backend
• Open source
• Flexibility
• Can create apps for all major mobile operating systems like Apple
iOS, Android, BlackBerry, Windows etc.
• It automatically converts data contents to various App files.

SDP_-_Module_4.ppt

Recommended

Recommended

More Related Content

Similar to SDP_-_Module_4.ppt

Similar to SDP_-_Module_4.ppt (20)

Recently uploaded

Recently uploaded (20)

SDP_-_Module_4.ppt