Anda di halaman 1dari 35

HTML

Hypertext Markup Language (HTML)


HTML merupkan standard bahasa yang digunakan

untuk menampilkan dokumen web pada web browser. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee ketika mereka bekerja di CERN pada tahun 1989.

Sesuai dengan namanya, bahasa ini menggunakan

tanda (markup) untuk menandai perintahperintahnya. Dokumen HTML mirip dengan dokumen biasa, namun dalam dokumen ini memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu.

Kemampuan HTML
Mengontrol tampilan dan konten/informasi dari web

page. Mempublikasikan document sehingga bisa di akses secara online. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

Jenis Elemen dari HTML


Structural :Tanda yang menentukan level atau

tingkatan dari sebuah tulisan. (Cth: <h1>Golf</h1>). Presentational : Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b>. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan.

Jenis Elemen dari HTML


Hypertext : Menunjukkan pranala ke bagian dari

dokumen tersebut atau pranala ke dokumen lain (cth: <a href=http://www.stikombali.ac.id/">STIKOM</a> Akan menampilkan STIKOM sebagai sebuah hyperlink ke URL tertentu). Element Widget : Objek-objek lain seperti tombol (<button>), list (<li>), garis horizontal (<hr>), dsb.

Browser dan Editor


Browser: Browser merupakan software yang

berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Editor: Program yang digunakan untuk membuat dokumen HTML, diantaranya: Microsoft FrontPage, Adobe Dreamweaver, Visual Studio, Notepad, dll.

Tag-tag HTML
Untuk menandai berbagai elemen dalam dokumen

HTML ditandai dengan menggunakanTag: Sebuah kurung sudut kiri atau tanda lebih kecil dari (<), Sebuah nama tag, dan Sebuah kurung sudut kanan atau tanda lebihbesar dari (>). Contoh: <title>

Bentuk tag biasanya berpasangan, misalnya <H1>

dengan </H1>, dan setiap akhir dari pasangan tag ditandai dengan garis miring (/). Secara umum bentuk struktur tag HTML dituliskan:

<namatag> ... </namatag>

Namun ada beberapa elemen yg tanpa pasangan,

diantaranya: Ganti baris line break <br> Garis datar horizontal rule <hr>

Struktur Dokumen HTML


Struktur dokumen HTML memiliki tiga buah tag uta
ma, yaitu: HTML, HEAD dan BODY
<html> <head> <title>judul dokumen</title> </head> <body> **BAGIAN BODY** </body> </html>

pertama.html
<html>
<head> <title>My First Page</title>

</head>
<body> Teks Pertama <b>Teks Bold</b> </body> </html>

Headings
Heading digunakan untuk menampilkan nama bab

atau bagian tertentu yang dianggap sebagai topik utama. Pada HTML terdapat enam level heading mulai dari tag <H1> sampai dengan <H6>. Posisi heading pada dokumen HTML dapat diatur dengan menggunakan atribut ALIGN, dengan nilai: Left, Right, atau Center.

Contoh Heading
<HTML> <HEAD> <TITLE>HEADING</TITLE> </HEAD> <BODY> <H1 ALIGN="LEFT"> HEADING RATA KIRI </H1><BR> <H2 ALIGN="RIGHT"> HEADING RATA KANAN </H2><BR> <H4 ALIGN="CENTER"> HEADING RATA TENGAH </H4> </BODY> </HTML>

Membuat Baris Baru


Line break <BR> adalah tag yang berfungsi untuk

membuat baris baru pada dokumen HTML tag. <BR> ini membuat baris baru tanpa memberi baris kosong.

Membuat Garis Horizontal


Horizontal Rule <HR> adalah tag tunggal yang

berfungsi untuk membuat garis horizontal. Tag <HR> akan memberikan garis horizontal sepanjang baris kosong.

Membuat Daftar/List
Untuk membuat daftar atau list, HTMLmenyediakan 3

macam list, yaitu :


a) b)

c)

unordered list ordered list definisi

Daftar/List: Unordered List


Unordered list biasanya ditandai dengan pemakaian

bullet untuk menandai sebuah item dari list. Gunakan tag <UL> (unordered list) sebagai tanda tag awal dan </UL> sebagai tanda tag penutup. Untuk item-item di dalam list harus diawali dengan tag <LI> dan tidak memerlukan tanda akhir tag.

Contoh Unordered List


<HTML> <HEAD> <TITLE> Unordered List </TITLE> </HEAD> <BODY> <UL> <LI>MS-Word <LI>MS-Excel <LI>MS-Access <LI>MS-PowerPoint </UL> </BODY>

Daftar/List: Ordered List


Ordered list adalah daftar yang tiap bagiannya disertai

dengan penomoran. Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>. Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu:
1 1,2,3. A A,B,C,. a a,b,c,. I I,II,III,. I i,ii,iii,.

Contoh Ordered List


<HTML> <HEAD> <TITLE>Ordered List</TITLE> </HEAD> <BODY> <OL TYPE=I START=3> <LI TYPE=1>MS-Word <LI TYPE=A>MS-Excel <LI TYPE=i>MS-PowerPoint <LI>MS-PhotoDraw </OL> </BODY> </HTML>

Daftar/List: Definition List


Definition list adalah daftar yang mempunyai

keterangan pada itemnya. Gunakan pasangan tag <DL> dan </DL>. Tag ini bekerja dibantu oleh tag lainnya, yaitu tag <DT> yang menandakan item yang dijelaskan dan tag <DD> menyatakan defenisi dari item.

Contoh DL
<HTML> <HEAD> <TITLE>Definition List</TITLE> </HEAD> <BODY> <dl> <dt>MS OFFICE</dt> <dd>contoh penjelasan</dd> <dt>MS OFFICE2</dt> <dd>contoh penjelasan2</dd> </dl> </BODY> </HTML>

Membuat Paragraf
Tag <P> umumnya untuk menandai suatuparagraf baru. Posisi <P>pada dokumen HTML dapat diatur dengan menggunakan

atribut ALIGN, dengan nilai: Left, Right, atau Center. Contoh

<p> ini adalah paragraph pertama dan merupakan contoh dari penggunaan </p>

Mengatur Huruf
Untuk mengatur huruf pada HTML anda dapat

menggunakan tag <FONT> dan tag penutup </FONT>. Untuk mengatur huruf pada HTML anda dapat menggunakan tag <FONT> dan tag penutup </FONT>. Tag ini mempunyai beberapa atribut untuk mengatur formatting style dari suatu teks, seperti:
Ukuran font
Jenis Font Warna Font

Ukuran Font
Size=n adalah atribut yang digunakan untuk

mengatur besarnya ukuran font. Nilai n berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7.

<HTML> <HEAD> <TITLE>Ukuran Font</TITLE> </HEAD> <BODY> <FONT SIZE=1> Font Size 1</FONT><BR> <FONT SIZE=2> Font Size 2</FONT><BR> <FONT SIZE=3> Font Size 3</FONT><BR> <FONT SIZE=4> Font Size 4</FONT><BR> <FONT SIZE=5> Font Size 5</FONT><BR> <FONT SIZE=6> Font Size 6</FONT><BR> <FONT SIZE=7> Font Size 7</FONT> </BODY> </HTML>

Jenis Font
Untuk mengatur jenis font Anda dapat menggunakan

atribut face dengan sintaksis face=string. Nilai string berupa string yang menunjukkan nama font dan biasa lebih dari satu. Contoh <font face=Times New Roman>STIKOM-BALI</font>

Warna Font
Untuk mengatur warna font Anda dapat

menggunakan atribut color dengan sintaksis color= #RRGGBB. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB). Anda juga dapat menggantikan #RRGGBB dengan konstanta warna yang ada pada browser .

Menghubungkan ke Halaman Web Lain


Gunakan tag <A> </A> yang diikuti dengan atribut

HREF. <A HREF=http://www.stikom-bali.ac.id> STIKOM </A>

Menampilkan Gambar
Gambar adalah salah satu elemen yang sangat penting

dalam menampilkan informasi. Gunakan tag <IMG> untuk menampilkan gambar pada halaman web.

<IMG SRC=gambar1.gif ALT=gambar1>

Gambar dapat digabungkan dengan tag <A> untuk

membuat link dari gambar tersebut. <A HREF=http://www.stikom-bali.ac.id><IMG SRC=logo.jpg ALT=gambar1>

Atribut ALT dipakai untuk menampilkan teks

pengganti gambar untuk browser yang tidak mendukung penggunaan gambar atau apabila client sengaja mematikan fasilitas tersebut. Atribut align untuk mengatur posisi gambar terhadap teks yang bersebelahan.

Table
Dengan tabel, kita dapat mengatur layout dengan

mudah dan tertata rapi. Beberapa tag yang digunakan dalam pembuatan tabel adalah sbb: <table>...</table> adalah tag tabel dasar. <tr>...</tr> digunakan untuk men-set baris (row) dalam tabel. <td>...</td> digunakan untuk mendefinisikan data pada setiap cell dari kiri ke kanan.

<table border="1">
<tr> <td>Table cell 1</td><td>Table cell 2</td> </tr>

</table>