IT61 05
Software Development Project
Introducing HTML 5
OVERVIEW HTML5 New Features
• The core language is simpler & cleaner.
▪ Replacing unnecessary long definitions with simple ones. Ex: DOCTYPE
• New Elements
▪ Semantic markups been improved, presentational markups replaced by CSS.
▪ New structuring elements over <div>: <header>, <footer>, <aside>, <section>, etc.
▪ New elements for web apps:
• Enhanced capability for web apps
▪ New form controllers/input types: date, time, number, range, etc.
▪ New customized attribute: data-XX
▪ In-built data validation
• Others: Canvas, Offline Data Storage, Multimedia etc.
IT1605 | Software Development Project Page | 2
HTML DOM
Document
Root Element
<html>
Element Element
<head> <body>
Element Element Attribute
<title> <h1> “Align”
Text
“Hello World”
IT1605 | Software Development Project Page | 3
HTML5 - Layout Using new semantic elements
Header
Side Section Main Section
Footer
IT1605 | Software Development Project Page | 4
HTML5 - FORMS ‘data’ attribute
‘data’ attribute New attribute
IT1605 | Software Development Project Page | 5
HTML – LINKING JavaScript, Style Sheet, Image, Link
IT1605 | Software Development Project Page | 6
HTML - CSS Inline, Internal & External Styling
IT1605 | Software Development Project Page | 7
HTML - JAVASCRIPT Internal & External Script
IT1605 | Software Development Project Page | 8
COMPETANCY Checklist
✓ Basics: Elements, Attributes.
✓ Links
✓ Linking external files: CSS, JavaScript, Images,
✓ Using Buttons for hyperlinks
✓ Components
✓ Lists
✓ Tables
✓ Forms
✓ Data Sending
✓ Attachment Sending
✓ Using Buttons for submitting and Resting.
IT1605 | Software Development Project Page | 9
IT61 05 | Software Development Project
© ALL RIGHTS RESERVED