Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
159 views

Introduction To HTML Programming

This document provides an introduction to HTML programming. It discusses HTML tags and markup language. It defines HTML as a special kind of text document used by web browsers to present text and graphics. The document covers basic HTML elements and tags, including paragraphs, headings, links, lists, and the overall structure of an HTML page with the head, body, and title elements. It also discusses the HTML document type definition.

Uploaded by

Mayang Sari
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
159 views

Introduction To HTML Programming

This document provides an introduction to HTML programming. It discusses HTML tags and markup language. It defines HTML as a special kind of text document used by web browsers to present text and graphics. The document covers basic HTML elements and tags, including paragraphs, headings, links, lists, and the overall structure of an HTML page with the head, body, and title elements. It also discusses the HTML document type definition.

Uploaded by

Mayang Sari
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like