1. Nitec in Social Media & Web Development IT2031PA
Web Authoring
Topic 2 –
HyperText Markup Language
2. Objectives
Students should able to:
1. Explain what is HTML.
2. Use tools (Notepad) to create a
simple webpage with HTML Tags.
3. Explain structure of an HTML
document
3. What is Markup Language?
In traditional publishing, the manuscript
is annotated with layout instructions for
the typesetter.
These hand-written annotations are
called markup.
4. What is Markup Language?
A Markup language describes the layout
or structure of a document using
instructions embedded within it.
5. Hyper Text Markup Language
HTML is the backbone of the web, the
skeleton of your web page.
Like the bones in your body, it is the
structure and substance of the Internet,
although it is usually unseen except by
the web designer.
Without it, the web would not exist.
6. Hyper Text Markup Language
You only need a simple text editor,
notepad to create HTML documents.
The default file extension is .html
7. XML/XHTML
XML is used to create structured data.
XHTML is written in XML syntax
XHTML lets you check quickly that a
web page is correctly formed and does
not contain any coding errors.
8. HTML5
HTML5, the fifth edition of HTML, is
currently in draft form and is expected to
remain so for several years while the
final details are worked out.
HTML5 is distinguished in two main
categories: structure and media
9. HTML5
HTML 5 offers specific <header> and
<footer> tags, as well as ones for
content such as <article> and
<summary>.
HTML5 contains numerous other
structural elements for handling figures,
forms and navigation as well.
10. HTML5
HTML5 includes native support for
playing video and audio through the
<video> and <audio> tags
respectively, as well as static and
animated vector graphics via the
<canvas> tag.
11. DOCTYPES
There are three possible DOCTYPE
declarations:
- Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML
4.01//EN” http://www.w3.org/TR/html4/strict.dtd>
- Transitional
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd>
12. DOCTYPES
There are three possible DOCTYPE
declarations:
- Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01
Frameset//EN”
http://www.w3.org/TR/html4/frameset.dtd>
13. HTML Tags
Tag is the most basic markup element in
HTML
HTML uses tags to designate formats,
styles or logical and structural
information on web pages.
Tags are denoted in < >, such as <html>
15. HTML Template
<html>
<head>
<Title> An Example </Title>
</head>
<body>
This is a HTML lesson.
</body>
</html>
16. Tag Attribute
Tag can takes attributes that define
properties or special information about
the tag.
<H1 style="text-align:center">
Heading 1
</H1>
Attributes can only appear in the
opening tag of a tag pair.
17. More Tags
Paragraphs <p>
<p> This is my first paragraph
</p>
<p> This is my second paragraph
</p>
Line Break <br>
ITE College West<br>
1, Choa Chu Kang Grove<br>
18. More Tags
Attributes are case insensitive. But
some attributes values are case
insensitive.
<IMG SRC=“filename.gif”>
<!--Your Comments Here-->
19. Review Questions
1. What programs can open HTML files?
HTML is a plain-text language that can
be opened and edited in any
text editor
and viewed in any
web browser.
20. Review Questions
2. What does a markup language do?
It places tags contained within brackets
< > around plain-text content to pass
information concerning structure and
formatting from one application to
another.
21. Review Questions
3. HTML is comprised of how many
code elements?
Less than 100 codes are defined in the
HTML specifications.
22. Review Questions
4. What are the three main parts of most
web pages?
Most web pages are composed of three
sections: a root, head, and body.
23. Review Questions
5. What’s the difference between a
block and inline element?
A block element creates a stand-alone
element. An inline element can exist
within another element.
