Html5 ppt

1
Agenda
• HTML Introduction
• HTML Forms,
• HTML5 Introduction
• HTML Media
• HTML API's
• CSS
• JavaScript
Copyright 2016 Fujitsu India GDC

2
What is HTML?
H T M L
Hyper Text Markup Language
• A standard markup language for creating Web pages.
• Elements are represented by tags.

3
HTML Basics elements
• HTML tags are used to label the pieces of a page contents like :
heading, paragraph, table.
• A tag looks like:
<Name of tag> content goes here... </Name of tag>
(Opening tag) (Closing tag)
• Example:
<html> </html> (Tag for Document start)
<body> </body> (Tag for Body of page)
<p> </p> (Tag for paragraph)
<table></table> (Tag for creating a table)
<a> </a> (Tag for link)

4
HTML Basics elements (Cont.…)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• Declaration defines this
document to be HTML5.
• html element is the root
element of an HTML page.
• Head element contains meta
information about the
document.
• title element specifies a title for
the document.
• body element contains the
visible page content.
• h1 element defines a large
heading.
• P element defines a paragraph.

5
HTML Attributes
• All HTML elements can have attributes.
• Provide additional information about an element.
• Always specified in the start / opening tag.
• Attributes usually come in name=“value” manner.
like: height=“142”, src=“w3schools.jpg”.
Example :
<img src="w3schools.jpg" width="104" height="142">

6
HTML Attributes (Cont.…)
Attribute Description
alt
Specifies an alternative text for an image, when the
image cannot be displayed
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title
Specifies extra information about an element
(displayed as a tool tip)

7
HTML Formatting
• Some times we need to specify that the written text is important.
HTML Formatting provides this feature. Here is the list of elements
used for formatting:
<element> - Description - (Example)
• <b> - Bold text - (This text is bold)
• <strong> - Important text - (This text is strong)
• <i> - Italic text - (This text is italic)
• <em> - Emphasized text - (This text is emphasized)
• <mark> - Marked text - ( )
This text is marked.

8
HTML Formatting (Cont.…)
• <small> - Small text - (This is normal text but this text is small text.)
• <del> - Deleted text - (This is deleted text.)
• <ins> - Inserted text - (This text is inserted.)
• <sub> - Subscript text - (Normal text )
• <sup> - Superscript text - ( Normal Text)
Subscripted text
Superscripted text

9
HTML Images
• Images are being widely used in web pages now-a-days.
• All social, educational and E-commerce are using images.
• Syntax:
• src (source) = Defines the link/url for image being used.
• Alt (alternate text) = Defines alternate text for the image in case
image is not displayed.
• style (style attributes) = Defines style attributes. Like: width, border
etc.
<img src=“url of image” alt=“alternate text” style=“width: width; height: height;”>

10
HTML Table (Cont.…)
• HTML table is defined with the <table>…</table> tag.
<th> - Tag for table heading.
<tr> - Tag for table row.
<td> - Tag for table column.
• A table has following properties:
Border, padding, text-align, span, id.
• The <td> elements are the data containers of the table and data may
be text, images, lists, other tables, etc.

11
HTML Table (Cont.…)
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup>
Specifies a group of one or more
columns in a table for formatting
<col>
Specifies column properties for each
column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

12
HTML Iframes
• An iframe is used to display a web page within a web page.
• HTML iframe is defined with the <iframe> tag
• iframe can be used as the target frame for a link.
• Syntax:
• Iframes can be nested like other HTML elements.
<iframe src="URL"> </iframe>

13
HTML Graphics
• Shapes can be drawn in a HTML web page using graphics.
• The HTML <canvas> element is used to draw graphics.
• A canvas is a rectangular area on an HTML page.
• Syntax:
• By default, a canvas has no border and no content.
<canvas id="myCanvas" width="200" height="100"></canvas>

14
HTML Forms
• The HTML <form> element defines a form that is used to collect
user input. Form elements are: text fields, checkboxes, radio
buttons, submit buttons, and more.
• <input> element is the most important form element.
• The action attribute defines the action to be performed when the
form is submitted.
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Syntax:
<form>
form elements
</form>

15
Form Input Attributes
• The value attribute specifies
the initial value for an input field:
• The read-only attribute specifies that
the input field is read only
(cannot be changed):
• The maxlength attribute specifies
the maximum allowed length for the
input field:
<form action="">
First name:<br>
<input type="text" name="firstname"
value="John">
</form>
<form action="">
First name:<br>
value="John" readonly>
</form>
<form action="">
First name:<br>
maxlength="10">
</form>

16
HTML5 Introduction
• HTML5 is the next major revision of the HTML standard superseding
HTML 4.01.
• HTML5 is a standard for structuring and presenting content on the
World Wide Web.
• New Semantic Elements : These are : <header>, <footer> & <section>.
• Canvas : Allows two-dimensional drawing using JavaScript.
• Audio & Video : You can embed audio or video on your web pages.
• Geolocation : Allows visitor to share his physical location with web
application.
• Drag and drop : Drag and drop the items from one location to
another location on a the same webpage.

17
HTML5 New Elements
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document

18
HTML5 Semantic Elements
• A semantic element clearly describes its meaning to both the browser
and the developer.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
• Examples of non-semantic elements: <div> and <span>, Tells nothing about its content.
Semantic Description
<section> A thematic grouping of content, typically with a heading
<article> An article should make sense on its own. E.g.. Forum post,
Blog post ,Newspaper article
<header> The specifies a header for a document or section
<footer> Should contain information about its containing element.
<nav> Defines a set of navigation links.
<aside> Defines some content aside from the content it is placed in
(like a sidebar).

19
HTML MEDIA
• Sound, Music, Videos, Movies, and Animations on the web is
Multimedia.
• Multimedia elements (like audio or video) are stored in media files.
• The file extension tells the type of a file.
• Popular file formats are: MP4, JPEG, FLV etc.

20
MEDIA FORMATS
MPEG
.mpg
.mpeg
MPEG. Developed by the Moving Pictures Expert Group. Not supported in HTML5.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft.
WMV .wmv
WMV (Windows Media Video). Developed by Microsoft. Plays well on Windows
computers, but not in web browsers.
Flash
.swf
.flv
Flash. Developed by Macromedia. Often requires an extra component (plug-in) to
play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM .webm
WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google.
Supported by HTML5.
MPEG-4
or MP4
.mp4
MP4. Developed by the Moving Pictures Expert Group. Supported by all HTML5
browsers. Recommended by YouTube.
Format File Description

21
Video
• Before HTML5, a video could only be played in a browser with a
plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed a
video in a web page.
• Syntax : Here is the syntax…
• Browser support:
Browser Chrome Internet Explorer Mozilla Firefox Safari Opera Mini
Supported
version
4.0 9.0 3.5 4.0 10.5
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

22
Audio
• The HTML5 <audio> element specifies a standard way to embed
audio in a web page.
• Browser support is same as video.
• Syntax: Here is the syntax…
• Audio media types:
File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>

23
YouTube Videos
• In previous method of playing video you might have to convert videos to different
formats to make them play in all browsers.
• Converting videos to different formats can be difficult and time-consuming.
• The easiest way to play videos in HTML, is to use YouTube.
• YouTube will display an id (like XGSy3_Czz8k), when you save
(or play) a video.
• Syntax:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

24
HTML API’s
• Drag and drop is a very common but very important feature. HTML 5
provides you the feature.
• Browser supported:
• To use this feature one must have basic knowledge of JavaScript
and CSS
Browser Chrome Internet Explorer Mozilla Firefox Safari Opera Mini
Supported
version
4.0 9.0 3.5 6.0 12.0

25
HTML Drag & Drop
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document . getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true” ondragstart="drag(event)" width="336”
height="69">
</body>
</html>

26
JavaScript
• JavaScript makes HTML pages more dynamic and interactive.
• JavaScript can change HTML content, Attributes and Style of a web
page.
• <script></script> tag is used to place JavaScript code.
• Syntax:
<script>
function MyFunction1 {
…statements…
}
…statements…
}
…statements…
}
</script>

27
CSS
C S S
Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• Syntax:
• CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
<h1 style="color : blue;">This is a Blue Heading</h1>

28 Copyright 2016 Fujitsu India GDC
Any Question…

Html5 ppt

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html5 ppt

Similar to Html5 ppt (20)

Recently uploaded

Recently uploaded (20)

Html5 ppt