Scribd
Upload
126 views

2 - Getting Started With HTML5

The document discusses the differences between HTML, XHTML, and HTML5, noting that HTML was the first markup language for the web, XHTML aimed to fix issues with HTML and add XML capabilities, and HTML5 further evolved the language by incorporating CSS and JavaScript to add new features like video playback and drag-and-drop capabilities. It also provides examples of basic JavaScript code and how it can be used to request input and add comments.

Uploaded by

abdul hasib
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
126 views

2 - Getting Started With HTML5

The document discusses the differences between HTML, XHTML, and HTML5, noting that HTML was the first markup language for the web, XHTML aimed to fix issues with HTML and add XML capabilities, and HTML5 further evolved the language by incorporating CSS and JavaScript to add new features like video playback and drag-and-drop capabilities. It also provides examples of basic JavaScript code and how it can be used to request input and add comments.

Uploaded by

abdul hasib
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 17

Getting Started with HTML5

Prepared by: Ms. Aiza Syahida binti Zakaria


Understanding HTML, XHTML and HTML5

Activity
 Working in groups of 2
students.
 Differentiate between HTML,
XHTML and HTML5.

 References:
i. http://www.informit.com/articl
es/article.aspx?p=1432776&
seqNum=6
ii. https://webkit.org/blog/68/un
derstanding-html-xml-and-xh
tml/
HTML – Hypertext Markup Language
 HTML was the first Internet-based language developed
strictly for the web. Anything displayed in a browser is
organized via HTML—it is central to the web
development process and has evolved along with it.
 HTML is static structure, organization, and content -
think of those early websites that were simple text with
some basic formatting. The way it works is through
“tags,” which tell a browser how to display specific
pieces of text.
 At its most simple, an HTML tag tells a browser to make
the selected text bold, and the same goes for aligning
text, creating headlines, adding hyperlinks, and more.
HTML conts.
 Once that basic HTML markup document is created, all
other dynamic aspects of a site can be embedded into
that file.
 Example: A JavaScript program to add interactivity,
server-side scripts that connect the site to the database,
and CSS files that add stylistic elements. These files can
all be linked out of the HTML file, making it much like the
backbone of the site.
XHTML – Extensible of Markup Language
 HTML is essentially identical to HTML4 (the fourth
iteration of HTML), but with elements of XML that extend
HTML’s capabilities.
 XHTML came along before HTML5, right after HTML4,
solving for some cross-browser compatibility issues and
offering a “best of both worlds” scenario.
 It is a bit stricter than HTML, providing more precise
standards and specifications for how a site’s data is
broken down and transmitted. This does make it a bit
unforgiving, however, and it can be tougher to debug.
XHTML conts.
 XHTML is written in the same format as an XML
application, another descriptive markup language that
functions like a complement to HTML, specifically
handling how data is organized. (In markup, XML
describes elements of data, while HTML displays that
data.)
 Much of what XHTML was designed to do has been
covered with the launch of HTML5, however, making it
nearly obsolete.
HTML5 – The Latest and Greatest Version
of HTML
 HTML’s latest evolution, HTML5, is a versatile game -
changer.
 HTML5 adds a ton of new features to the HTML
repertoire, making it able to do so much more on its own.
 It is a hybrid of three types of code - HTML, CSS, and
JavaScript and by bundling these three components,
HTML5 lets developers work faster and more efficiently.
 The resulting site architecture is agile, mobile-friendly,
and compatible with more browsers.
HTML5 conts.
 So, how else is HTML5 different from HTML?
 First, it touts one major advantage over its predecessor:
cross-platform application development.
 It also solves problems that XHTML formerly addressed,
and boasts better compatibility across more browsers.
 HTML5 has incorporated many new APIs and features
like drawing, video playback, and drag-and-drop - effects
that developers could only implement before with the
help of third-party plug-ins.
HTML, XHTML and HTML5 – In Summary

 HTML came along first, XHTML was designed to fix


problems with HTML, and HTML5 solved problems
XHTML was designed to fix.
 HTML, XHTML and HTML5 all markup languages that
provide structure and organization to the content of
webpages and applications, but their relevance has
shifted as newer versions of HTML have evolved, rising
to the challenges of mobile demands, responsive design,
and developers who want to accomplish more with less.
JavaScript

 The JavaScript programming language, developed by


Netscape, Inc., is not part of the Java platform.
 JavaScript does not create applets or stand-alone
applications.
 In its most common form, JavaScript resides inside
HTML documents, and can provide levels of interactivity
to web pages that are not achievable with simple HTML
– which makes it very powerful!
Why JavaScript?
How is JavaScript different from Java?

 Key differences between Java and JavaScript:


 Java is an OOP programming language while Java Script is an
OOP scripting language.
 Java creates applications that run in a virtual machine or
browser while JavaScript code is run on a browser only.
 Java code needs to be compiled while JavaScript code are all in
text.
 They require different plug-ins.
Creating First JavaScript
 Other reference:
 https://www.w3schools.com/js/default.asp
JavaScript Example 1
Requesting Input
JavaScript Comment
JavaScript Placement

 We can place any number of scripts in an HTML


document. Scripts can be placed in the <body>, or in the
<head> section of an HTML page, or in both.
 It is a good idea to place scripts at the bottom of the
<body> element. This improved page load, because
HTML loading is not blocked by scripts loading.
 Scripts can also be placed in external files. External
scripts are practical when the same code is used in
many different web pages. JavaScript files have the file
extension.js.

You might also like