Selasa, 19 Oktober 2010

Elemen Dasar HTML


Paragraf <p>…</p>
Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri
dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut
ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata
tengah, dan RIGHT untuk rata kanan:


<HTML>
<HEAD>
<TITLE>Contoh Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat
5
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari
</P>
<P ALIGN="center"> Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari
</P>
<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari
</P>
</BODY>
</HTML>

Lihat Hasilnya Di bawah ini..


Heading <h1>…</h1>
Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.
Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web.
HTML menyediakan enam tingkat heading.

<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level1</H1>
<H2>Heading level2</H2>
<H3>Heading level3</H3>
<H4>Heading level4</H4>
<H5>Heading level5</H5>
<H6>Heading level6</H6>
</BODY>
</HTML>

Lihat Hasilnya Di bawah ini..


Mengatur Letak Heading dan Paragraf <p>…</p>
Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris-align. Alignment heading:
kiri – left
tengah – center
kanan – right

<HTML>
<HEAD>
<TITLE>Contoh Heading dengan alignment</TITLE>
</HEAD>
<BODY>
<h1 align="center">Heading 1 di tengah</h1>
<P> Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah baris.</P>
<h1 align="right">Heading 1 di tengah</h1>
<P> Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah baris.</P>
<h1 align="left">Heading 1 di tengah</h1>
<P> Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah
baris.Heading di atas diposisikan di tengah baris.Heading di atas diposisikan di tengah baris.</P>
</BODY>
</HTML>

Lihat Hasilnya Di bawah ini..


List Item <li>
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun
yang tidak berurutan (unordered list).
Ada 2 macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List / tidak berurutan (Bullet) :

Contoh :

<html>
<head>
<title>Unordere List</title>
</head>
<body>
Contoh penggunaan Unordered List
<p>
<ul type="circle">
<li>Senin</li>
<li>selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jumat</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul></body>
</html>

Lihat Hasilnya Di bawah ini..


2. Ordered List / Berurutan (Numbering):

Contoh :

<html>
<head>
<title>Ordere List</title>
</head>
<body>
   Scedule Pelatihan HTML
   <p>
   <ol start="1" type="I">
   <li>Senin</li>
       <ol type="a">
      <li>Pengenalan HTML</li>
      <li>Membuat halaman web</li>
   </ol>
   <li>Selasa</li>
      <ol type="A">
      <li>Membuat Tabel</li>
      <li>menambahkan Gambar</li>
   </ol>
   <li>Rabu</li>
   <ol type="i">
      <li>Membuat Link</li>
   </ol>
   </ol>
</body>
</head>
</hml>

Lihat Hasilnya Di bawah ini..



Horizontal Rules <hr>
Horizontal Rule digunakan untuk menggambar garis horizontal dalam dokumen HTML.
Contoh:


















Tidak ada komentar:

Posting Komentar