8/13/2010
Introduction to HTML Programming
• IIntroduction
t d ti tto b
basic
i webb programming
i
• HTML code
• HTML using authoring software
Page ‐ 2
1
8/13/2010
Introduction to HTML Programming
Wh t iis HTML??
What
• An acronym for HyperText Markup Language,
HTML is the language used to tag various
parts of a Web document so browsing
software will know how to display that
document's links, text, graphics and attached
media.
Page ‐ 3
Introduction to HTML Programming
Whatat is
s HTML?
- a special kind of text document that is
used by Web browsers to present text
and graphics.
The text includes markup tags
e.g <p> to indicate the start of a
paragraph, and </p> to indicate the
end of a paragraph..
Page ‐ 4
2
8/13/2010
Introduction to HTML Programming
What is HTML?
• Hypertext is ordinary text that has been dressed up
with extra features, such as formatting, images,
multimedia, and links to other resources.
• Markup is the process of taking ordinary text and
adding extra symbols.
• E h off the
Each h symbols
b l usedd ffor markup
k iin HTML iis a
command that tells a browser how to display the
text.
Page ‐ 5
Introduction to HTML Programming
What is HTML?
HTML (Hypertext
(H t t Markup
M k Language)
L ) is
i the
th sett off
markup symbols or codes inserted in a file intended for
display on a World Wide Web browser page.
The markup tells the Web browser how to display a
Web page's words and images for the user. Each
individual markup code is referred to as an element (but
many people l also
l refer
f tto it as a ttag).
) Some
S elements
l t
come in pairs that indicate when some display effect is
to begin and when it is to end.
Page ‐ 6
3
8/13/2010
Allows nonlinear information system
http://www.layoutgalaxy.com/html-tutorial/nonlinear.php4
Page ‐ 7
Introduction to HTML Programming
What is an HTML File?
9 An HTML file is a text file containing small markup
tags
9 The markup tags tell the Web browser how to display
the page
9 An HTML file must have an htm or html file extension
(xxx.html, xxx.htm)
9 An HTML file can be created using a simple text
editor
Page ‐ 8
4
8/13/2010
Introduction to HTML Programming
There are three basic levels to the structure of an
HTML document.
• First is the document structure, which is divided
into major sections - such as the head, body and
script components.
Page ‐ 9
Introduction to HTML Programming
• Second are the divisions within each of the major
sections such as titles, meta data, divisions,
paragraphs, forms and headings.
• The third level exists primarily within each of the
major sections. It is the substructure of elements
and
d their
th i children,
hild suchh as lists
li t and
d list
li t items,
it forms
f
and form elements, and tables with table rows and
data cells.
Page ‐ 10
5
8/13/2010
Basic elements
HTML markup consists of several types of
entities, including: elements, attributes,
data types and character references.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Page ‐ 11
Basic elements
The Document Type Definition
all HTML documents should start with a Document Type Declaration
(informally, a "DOCTYPE"). The DTD contains machine readable
grammar specifying the permitted and prohibited content for a document
conforming to such a DTD.
Browsers only look at the doctype in order to decide the layout mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Page ‐ 12
6
8/13/2010
Basic elements
Elements are the basic structure for HTML markup. Elements have two
basic properties: attributes and content
1.Basic elements of HTML coding
• Angle bracket (< >) : signal the browser that a new tag is
being used
• Tag names – some tags indicate formating for a word,
sentence, or part of a web page e.g <p>….</p> for new
paragraph
• Attributes - allow to change default value for a particular
t I.e
tag I colour,
l font,
f t font
f t size
i e. g < font
f t face=“comic
f “ i sans””
> will display text in comic sans not in times the default
font for most web browser
Basic elements
Presentational : <b>boldface</b>
Structure : <h2>Golf</h2>
Hypertext :
<a href="http://en.wikipedia.org/">Wikipedia</a>,
7
8/13/2010
Learn basic HTML the right way and remember that the tags must come in a
certain order. The basic structure of a web page is as follows:
<HTML>
<HEAD>
HEAD Here you can put important document information such as frames,
H i d i f i h f
language, and special instructions.
<TITLE>Title of your page.</TITLE>
</HEAD>
<BODY> Put your story, pictures, links, and everything else here.
<H1>Heading of your paragraph.</H1>
<P>This
P This is where you enter the text of your document.
is where you enter the text of your document.</P>
/P
This is how to write a link:
<A HREF="http://www.nameofpage.com">Title or what you want to say.</A>
</BODY>
</HTML>
Page ‐ 15
Basic elements
<HTML>
<HEAD> <TITLE> Environmental Change Project </TITLE>
</HEAD>
<BODY>
<h1> Environmental Change Project </h1>
Welcome to the home page of the Environmental Change Project..
<p> So how will we do this. Well we do the following
<ul> <li><A HREF="burn.html">Burn</A> more forests.
<li> Destroy the <A> HREF
HREF="http://who
http://who.zoo.do/ozone.html
zoo do/ozone html">Ozone</A>
Ozone</A>
layer.
<li> Birth more <A
HREF="ftp:foo.do.do/environmentally_friendly.gif">cows</a> </ul>
</BODY>
</HTML>
Page ‐ 16
8
8/13/2010
Basic strructure
1. Basic tags type
• Container tags : these tags include opening and
closing tags e.g <b>…..</b>
• Empty tags : e.g <br>
Page ‐ 17
HTML, HEAD, TITLE, BODY
Elements : Structural
<html>
<head>
<title>This is the title of the
page</title>
</head>
<body>This is my first homepage.
homepage
<b>This text is bold</b>
</body>
</html>
Page ‐ 18
9
8/13/2010
HTML, HEAD, TITLE, BODY
<html> begins an HTML document
<head> begins a section of descrptive
information about the document
<title>begins the title of each web pages
This is the title of the page</title>
ends the title
</head> ends the head section
<body>This is my first homepage.
<b>This text is bold</b>
</body>
</html> ends the HTML document
Page ‐ 19
HEADING
<BODY>
<H1>Level 1 Heading</H1>
<H2>Level 2 Heading</H2>
<H3>Level 3 Heading</H3>
<H4>Level 4 Heading</H4>
<H5>Level 5 Heading</H5>
<H6>Level 6 Heading</H6>
</BODY>
Page ‐ 20
10
8/13/2010
PARAGRAPH : center, left, right, justify
<BODY>
<P align=center>
This is a centered paragraph.
</P>
</BODY>
Page ‐ 21
Center
<BODY>
<CENTER>
untuk set center
<P>
<FONT color=blue>
xxxxxx
</FONT>
</CENTER>
</BODY>
Page ‐ 22
11
8/13/2010
Background & Text Color
<BODY bgcolor=black
text=white>
<H1>Hi! I am Megat.</H1>
</BODY>
Teks putih
Backgroun
d hitam
Page ‐ 23
EXTENSION –html, htm
Down.htm
down.html
??
Apa .shtml
Apa .asp
Apa .php
Page ‐ 24
12
8/13/2010
Introduction to HTML Programming
What is HTML??
• Has gone through many changes and updates
• Variations :
• VRML ( Virtual Reality Markup Language).
• XHTML (Extensible HTML )
• XTML (Extensible Markup Language)
• XML
Page ‐ 25
tutorial
HTML Tutorial
•http://www.w3schools.com/html/default.asp
•HTML Tutorial (pdf-local)
A beginer Guide to HTML (pdf)
•http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Page ‐ 26
13
8/13/2010
HTML EDITOR
You can easily edit HTML files using a
WYSIWYG (what you see is what
you get) editor like FrontPage,
Dream Weaver, Claris Home Page, or
Adobe PageMill instead of writing
your markup tags in a plain text file.
Page ‐ 27
14
8/13/2010
15
