Posted by: kkpitriska | February 17, 2013

Element Dasar HTML

Element Dasar HTML

Element Dasar HTML terdiri dari :

  • Block Level Element

Block level element yang sering di gunakan : Heading (H1 sampai H6)

Contoh:

<html>

<head>

<title>Heading Elements</title>

</head>

<body>

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading three</h3>

<h4>Heading four</h4>

<h5>Heading five</h5>

<h6>Heading six</h6>

</body>

</html>

3

  • Paragraf (P)

Contoh:

<html>

<head>

<title>Formating Paragraf</title>

</head>

<body>

<h3>Puisi Ceria</h3>

<p>mawar berwarna merah, bibir kamu juga merah , bibir kamu semerah mawar</p>

<h2>puisi sedih</h2>

<p>melati harum baunya, kalau nggak ganti percuma namanya</p>

</body>

</html>

  • List Item (LI)

List item di gunakan untuk mengelompokkan data baik berurutan

(ordered list) maupun yang tidak berurutan (unordered list).

Contoh:

Kita mau mengelompokkan data-data berikut :

Pisang, Melati, Jambu, Mawar, Anggrek, Apel, Anggur. Dapat kita kelompokkan ke dalam, dua kelompok:

Buah-buahan

  • Pisang
  • Jambu
  • Apel
  • Anggur

Bunga

  1. Melati
  2. Mawar
  3. Angrek

Ada tiga macam list yang bisa anda tambahkan ke document HTML:

Unordered List (Bullet) :

Contoh :

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ul>

<li>Sunday</li>

<li>Monday</li>

<li>Tuesday</li>

<li>Wednesday</li>

</ul>

</body>

</html>

4

Ordered List (Numbering)

 

Contoh:

 

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ol start=”1″ type=”I”>

<li>Sunday</li>

<ol type=”a”>

<li>Introduction to HTML</li>

<li>Creating List</li>

</ol>

<li>Monday</li>

<ol type=”A”>

<li>Creating table</li>

<li>Inserting Image</li>

</ol>

<li>Tuesday</li>

<ol type=”I”>

<li>Creating Link</li>

<li>Preparing Website</li>

</ol>

<li>Wednesday</li>

</ol>

</body>

</html>

5

Tag

Attribute

Value

Description

<OL>

TYPE

I

i

A

a

Upper Roman

Lower Roman

Upercase

Lowercase

<OL>

START

n

Begin Number

Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Contoh:

 

<html>

<head>

<title>Definition List</title>

</head>

<body>

<p><b>List of Internet Resource</b></p>

<dl>

<dt>HTML

<dd>HyperText Markup Langguage is not Language

Programming</dd>

</dt>

<dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP

Protocol</dd>

</dt>

<dt>Internet

<dd>A network of network</dd>

</dt>

<dt>TCP/IP

<dd>Internet protocol</dd>

</dt>

</dl>

</body>

</html>

6

Horizontal Rules(HR)

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.

 

Attribute

Description

Position

menetukan posisi dari HR, dengan value : canter |

right | left.

Width

Untuk menentukan panjang HR default 100%

Size

Untuk menentukan tebal dari HR dalam pixel

Noshad

Efek bayangan.

 

Pemformatan Page

  • Break

Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.

Contoh:

 

<html>

<head>

<title>Break Line</title>

</head>

<body>

<h3>Buliding Dynamic Web Aplication</h3>

<p>

If you’re building a dynamic web application, <br> start by setting up an application server and <br>connecting to a database.

</p>

</body>

</html>

7

  •  Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.

Contoh:

 

<html>

<head>

<title>Formating Font</title>

</head>

<font color=”#9966FF” size=”5″>

Setting Up Web Server

</font>

<p>

<font face=”Courier New, Courier, mono”>To run web applications, you need a web server. A web server is software that serves files in Response to requests from web browsers. A web server is sometimes called an HTTP server. Common web servers include IIS,Netscape Enterprise Server, iPlanet Web Server, and Apache HTTP Server.

</font>

</p>

<body>

</body>

</html>

8

Attribute

Description

color

Untuk menentukan warna font, anda bisa

menggunakan nama font atau hexadecimal

(#000000 – #ffffff)

size

Untuk menentukan ukuran dari font 1 – 7

face

Untuk menentukan jenis font biasanya dalam satu list

ada beberapa font dan akan di baca mulai dari yang

paling kiri.

  • Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.

 

Hexadecimal

Color

#FF0000

Red

#00FF00

Green

#0000FF

Blue

#000000

Black

#FFFFFF

White

 

  • Alignment

Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

 

Value

Description

Left

Rata Kiri

Right

Rata Kanan

Center

Rata Tengah

Justify

Rata Kanan Kiri

 

  • Format text

Physical Formatting

 

Tag

Description

<B> … </B>

Bold text

<I> … </I>

Italic text

<U> … </U>

Underline Text

<BIG> … </BIG>

Untuk ukuran yang lebih besar

dari normal

<SMALL> … </SMALL>

Untuk ukuran yang lebih kecil dari

normal

<STRIKE> … </STRIKE>

Untuk memberi garis di tengah

text

<SUP> … </SUP>

Superscript text

<SUB> … </SUB>

Subscript text

<CENTER> … </CENTER>

Center document

 

          Logical Formatting

 

Tag

Description

<EM> … </EM>

Text miring / <I>

<STRONG> … </STRONG>

Text tebal / <B>

<DEL> … </DEL>

Mencoret text / <STRIKE>

<INS> … </INS>

Underline text / <U>

  • Hyperlink

Link Address

Absolute Address – merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh:

 

http ://www.yahoo.com/index.html

 

Relatif Address – URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya).

 

AnchorAnchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.

 

<A HREF=”URL”> Hypertext </A>

 

<A

HREF=”protocol://host.domain:port/path/filename”>

Hypertext </A>

 

Link ke Document Lain

Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :

 

Link1.htm

 

<html>

<head>

<title>Using Link</title>

</head>

<body>

<center><font size=”5″ color=hotpink>Creating Link

</font></center>

<br>

<a href=”link2.htm”> Click here to view document2</a>

</body>

</html>

 

Link2.htm

 

<html>

<head>

<title>Document 2</title>

</head>

<center><font size=”5″ color=limegreen>Creating

Link </font></center>

<br>

<a href=”link1.htm”> back to document 1</a>

<body>

</body>

</html>

 

Tag

Atributte

Value

Description

<UL>

TYPE

SQUARE

DISC

CIRCLE

Bullet Kotak

Bullet Titik

Bullet Lingkaran


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: