View
278
Download
3
Category
Preview:
DESCRIPTION
Citation preview
Web Authoring
Topic 2 –HyperText Markup Language
IT2031PANitec in Social Media & Web Development
Objectives
1. Explain what is HTML.
2. Use tools (Notepad) to create a simple webpage with HTML Tags.
Students should able to:
3. Explain structure of an HTML document
What is Markup Language?
In traditional publishing, the manuscript is annotated with layout instructions for the typesetter.
These hand-written annotations are called markup.
What is Markup Language?
A Markup language describes the layout or structure of a document using instructions embedded within it.
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.
Hyper Text Markup Language
You only need a simple text editor, notepad to create HTML documents.
The default file extension is .html
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.
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
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.
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.
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>
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>
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>
HTML Tags
HTML Template<html>
</html>
<head>
</head><Title> </Title>An Example
<body>
</body>This is a HTML lesson.
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.
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>
More Tags
Attributes are case insensitive. But some attributes values are case insensitive.
<IMG SRC=“filename.gif”>
<!--Your Comments Here-->
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.
Review Questions
2. What does a markup language do?
It places tags contained within brackets < > around plain-text content to passinformation concerning structure and formatting from one application to another.
Review Questions
3. HTML is comprised of how many code elements?
Less than 100 codes are defined in the HTML specifications.
Review Questions4. What are the three main parts of most web pages?
Most web pages are composed of three sections: a root, head, and body.
Review Questions5. 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.
Recommended