Anda di halaman 1dari 15

HYPERTEXT MARKUP LANGUAGE

HYPERTEXT MARKUP LANGUAGE

Materi Komputer Lanjutan


What is HTML?
What is HTML? 
HTML (Hyper Text Markup Language) adalah
HTML (Hyper Text Markup Language) adalah
bahasa yang digunakan untuk menulis
halaman web yang terdiri
web yang terdiri atas kode
kode‐kode
kode
(tags) yang di ikutkan pada naskah atau
dokumen. 
dokumen
(HTML (Hyper Text Markup Language) is the language 
used to write Web pages which consists of codes (tags) 
p g f ( g)
embedded in the text of a document). 
What are Tags?
What are Tags? 
• Tags
Tags adalah
adalah kode dalam dokumen HTML yang dibaca
HTML yang dibaca
oleh browser lalu menterjemahkannya untuk
memberikan tampilan pada pengguna.
• Tags tidak nampak pada saat dokumen HTML dibaca
oleh program browser tapi yang nampak hanya
akibatnya.
• Tags diawali dengan simbol pembuka "<" dan diakhiri
d
dengan simbol
b l ">"; dan
" " d biasanya
b b
berpasangan satu
tag memulai aksi dan satunya lagi mengakhiri aksi.
HTML Code
HTML Code 
Browser Display I want to <B>
Browser Display I want to <B> emphasize </B> 
</B>
this! 
I want to emphasize this! 
I want to emphasize this!

* Do not worry about memorizing all the tags 
Do not worry about memorizing all the tags
described in these lessons. Any tags that are 
required are listed in the accompanying HTML 
Reference Guide which can be printed for 
reference purposes. 
Explanation of Document Structure
Explanation of Document Structure 
• Each HTML document has a minimum number of tags. Here is the very 
least HTML code that can be called a "page"
least HTML code that can be called a "page": 
<HTML> 
<HEAD> 
<TITLE>This is my page Title!</TITLE>
<TITLE>This is my page Title!</TITLE> 
</HEAD> 
<BODY> 
This is my message to the world! 
</BODY> 
</HTML> 
</HTML>

• NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or 
<TiTlE>. 
<HTML>...</HTML> 
<HTML>...</HTML>
• Encloses
Encloses the entire HTML document.These
the entire HTML document These
tags let the browser know to start reading and 
displaying the information presented within
displaying the information presented within.
• Membungkus seluruh dokumen HTML. Tag 
tersebut memberitahukan kepada browser 
browser
untuk mulai membaca dan menampilkan
informasi yang ada
yang ada didalam.
didalam
<HEAD>...</HEAD> 
<HEAD>...</HEAD>
• The
The <HEAD> element contains all information 
<HEAD> element contains all information
about the document in general. It contains 
HTML elements that describe the document'ss 
HTML elements that describe the document
usage and relationship with other documents. 
<TITLE>...</TITLE> 
<TITLE>...</TITLE>
• The
The <TITLE> is contained in the <HEAD> of the 
<TITLE> is contained in the <HEAD> of the
document. It is displayed at the top of the 
browser window and on the bookmark list so
browser window and on the bookmark list, so 
it is important to choose something 
descriptive unique and relatively short
descriptive, unique, and relatively short.
<BODY>...</BODY> 
<BODY>...</BODY>
• The
The <BODY> element contains all the 
<BODY> element contains all the
information which is part of the document. 
There are a number of different attributes for
There are a number of different attributes for 
the <BODY> tag (attributes are the elements 
included within brackets that change the
included within brackets that change the 
behavior or appearance of a tag). They are: 
• "BACKGROUND="
BACKGROUND=  Specifies the image tile that 
Specifies the image tile that
is to appear in the document's background. 
EXAMPLE: 
EXAMPLE:
9 <BODY BACKGROUND
<BODY BACKGROUND= "picturename
picturename.gifgif">> 
</BODY> "BGCOLOR=" Sets the background color 
of the page. 
p g
9 In order to do this a six digit hexadecimal number 
denoting a red‐green‐blue
denoting a red green blue color value is included. 
color value is included.
9 Thus "000000" is black and "FFFFFF" is white and 
every other colour in between is described using 
every other colour in between is described using
these 6 characters in different combination. 
In addition to the hexadecimal system, there 
are sixteen color names that (other than
are sixteen color names that (other than 
black) that can be included in the tags. They 
are: Aqua, Red, Green, Blue, Violet, Fuchsia,
are: Aqua, Red, Green, Blue, Violet, Fuchsia, 
Gray, Lime, Maroon, Navy, Olive, Purple, Silver, 
Teal, White, and Yellow.
Teal, White, and Yellow. 
EXAMPLE: 
EXAMPLE:
<BODY BGCOLOR=
<BODY BGCOLOR="#FFFFFF">
#FFFFFF >
This page has a white background.
</BODY> 
</BODY>
OR EXAMPLE: 
<BODY BGCOLOR="WHITE">
BODY BGCOLOR "WHITE"
This page has a white background.
</BODY> "LINK=" Sets the hexadecimal color 
/BODY "LINK " S h h d i l l
code for links that have not yet been visited. 
EXAMPLE: 
<BODY LINK="#0C6249">
This page has blue links
</BODY> VLINK= Sets the hexadecimal color 
code for links the user has already visited
code for links the user has already visited. 

EXAMPLE:
EXAMPLE: 
<BODY VLINK="#800080">
This page has purple links after being visited
</BODY> "ALINK=" Sets color of links that are 
active (ie., the color they turn when the link is 
clicked on). 
li k d )
EXAMPLE:
EXAMPLE: 
<BODY ALINK="#FFB50C">
This page has yellow active links
</BODY> "TEXT=" Sets the hexadecimal color code for the 
default text color. 

EXAMPLE: 
<BODY TEXT="#00006A">
This page has blue text
This page has blue text
</BODY> The <BODY> tags for this document are as follows: 

<BODY BACKGROUND="spiral_ruled.gif" BGCOLOR="#FFFFFF" 
TEXT="#00006A" LINK="#005A5A" VLINK="800080" 
ALINK="#FFB50C"> 
Try it out!
Try typing this:

<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>

<BODY BGCOLOR="#800080" TEXT="#FFFFFF">

Type a message here.


here

</BODY>

</HTML>
/HTML