WELCOME TO RICHFIELD
HYBRID LEARNING
MODULE: WEB TECH 511
TOPIC 2: INTRODUCTION TO HTML
| 1
nobelm@richfield.ac.za
| 2
LEARNING OUTCOMES
• Define HTML
• Differentiate between XML and HTML
• Appreciate different coding approaches
| 3
HTML Introduction:
HTML stands for Hypertext Markup Language. Hypertext can be described as an advanced
version of a plain text with the ability to include hyperlinks, which, again, could be described
as advanced regular links. Markup refers to all the different characters or other symbols that
you insert within a plain text document to indicate how the content of the document should be
displayed.
Html is a fairly simple language so it’s very to learn. Everything can be created on a web
page by a specific HTML code. The first standard version of HTML was published in 1999.
| 4
What is HTML?
•
•
•
•
•
•
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
| 5
Why to Learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down some
of the key advantages of learning HTML:
| 6
Create Web site - You can create a website or customize an existing web template if you
know HTML well.
Become a web designer - If you want to start a carrier as a professional web designer,
HTML and CSS designing is a must skill.
Understand web - If you want to optimize your website, to boost its speed and performance,
it is good to know HTML to yield best results.
Learn other languages - Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.
| 7
Applications of HTML
Web pages development - HTML is used to create pages which are rendered over the web.
Almost every page of web is having html tags in it to render its details in browser.
Internet Navigation - HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.
Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop
or laptops owing to responsive design strategy.
Offline support- HTML pages once loaded can be made available offline on the machine
without any need of internet.
Game development- HTML5 has native support for rich experience and is now useful in
gaming development arena as well.
| 8
HTML versions
Since the early days of the web, there have been many versions of HTML.
Versions
Year
HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2014
| 9
| 10
Explaination of HTML Document:
The <!DOCTYPE html> indicates that this document is an HTML5 document.
The <html> element is the root element of an HTML page. All other elements come inside this element.
The <head> element contains all elements that did not display on a web page but these elements are
very important for SEO purposes.
The <title> element contains title information of the web page.
The <body> All the content that displays on the web page written inside this element.
| 11
The full form is extensible Markup Language
The full form is Hypertext Markup Language
The main purpose is to focus on the transport of data and
saving the data
Focusses on the appearance of data. Enhances the
appearance of text
XML is dynamic because it is used in the transport of data
HTML is static because its main function is in the display of
data
It is case sensitive. The upper and lower case needs to be
kept in mind while coding
It is not case sensitive. Upper and lower case are of not
much importance in HTML
| 12
Difference Between XML and HTML
XML
HTML
You can define tags as per your requirement but
closing tags are mandatory
It has its own pre-defined tags and it is not
necessary to have closing tags
XML can preserve white spaces
White spaces are not preserves in HTML
eXtensible Markup Language is content-driven
and not many formatting features are available
Hypertext Markup Language, on the other hand, is
presentation driven. How the text appears is of
utmost importance
Any error in the code shall not give the final
outcome
Small errors in the coding can be ignored and the
outcome can be achieved
The size of the document may be large
No lengthy documents. Only the syntax needs to
be added for best-formatted output
| 13
XML
Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. ... The
design goals of XML emphasize simplicity, generality, and usability across the Internet.
What is XML Used For?
XML is one of the most widely-used formats for sharing structured information today: between
programs, between people, between computers and people, both locally and across
networks.
| 14
A short example:
<part number="1976">
<name>Windscreen Wiper</name>
<description>The Windscreen wiper
automatically removes rain
from your windscreen, if it
should happen to splash there.
It has a rubber <ref part="1977">blade</ref>
which can be ordered separately
if you need to replace it.
</description>
</part>
| 15
Features of HTML:
•
•
•
•
•
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.
| 16
Why learn HTML?
•
•
•
•
It is a simple markup language. Its implementation is easy.
It is used to create a website.
Helps in developing fundamentals about web programming.
Boost professional career.
| 17
Advantages:
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
• HTML can only create static web pages. For dynamic web pages, other languages have to
be used.
• A large amount of code has to be written to create a simple web page.
• The security feature is not good.
| 18
HTML5
| 19
HTML5
(HTML Version 5) The latest generation of HTML. HTML5 provides a comprehensive
development platform for Web pages that eliminates the need to install third-party browser
plug-ins such as Java and Flash. HTML5 supports 2D graphics, document editing, drag and
drop, browser history management, audio and video playback, and local file storage. After 10
years of development, the W3C made HTML5 a formal standard in 2014.
| 20
HTML5 vocabulary
Like other languages, HTML5 relies on words, or in this case elements. This HTML version
came with a series of new tags or code elements that support the structure of a website.
Some of the main elements introduced with this version were:
• The article element, which is used to enclose pieces of content within a web page.
• The aside element, which designates pieces of content marginally related to the rest of the
page.
• The figure element, which designates self-contained and often visual content, such as
images or diagrams.
• The nav element, which encloses a page’s navigation.
• The header, footer, and section elements, which are self-explanatory.
| 21
World Wide Web Consortium
• The World Wide Web Consortium is the main international standards organization for the
World Wide Web. Founded in 1994 and currently led by Tim Berners-Lee, the consortium is
made up of member organizations that maintain full-time staff working together in the
development of standards for the World Wide Web
| 22
fees
https://www.w3.org/Consortium/fees?countryCode=ZA&quarter=10-01&year=2021#results
MEMBERSHIP BENEFITS
https://www.w3.org/Consortium/membership-benefits
JOIN W3C
https://www.w3.org/Consortium/join
| 23
THANK
YOU
| 24