Pengantar HTMLHTML (Hypertext Mark up Language) merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML atau HyperText Markup Language merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator).

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.Markup
Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.

Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

- Membuat halaman Web.

- Menampilkan berbagai informasi didalam sebuah browser internet.

- Membuat Link menuju halaman Web lain dengan kode tertentu (hypertext).

- Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

- Menentukan hubungan ke dokumne lain, HTML merupakan suatu bahasa computer yang termasuk dalam kategori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur gambar.

- Menentukan ukuran dan alur tulisan.

- Mengintegerasikan gambar dan tulisan.

- Membuat Pranala.

- Mengintegerasikan berkas suara dan rekaman gambar hidup.

- Membuat form interaktif.

- Kita dapat menampilkan suatu kelompok data dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

- Kita dapat menampilkan tulisan dalam bentuk cetakan tebal.

- Kita dapat menampilkan sekelompok kata dalam bentuk miring.

- Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

- Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Kegunaan HTML

Dengan menggunakan HTML anda dapat membuat antara lain :

a. Membuat link.

Konsep Hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :

- Link menuju bagian lain dari page.

- Link menuju page lain dalam satu web site.

- Link menuju resource atau web site yang berbeda.

b. Memodifikasi format teks.

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

·

- Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

- Kita dapat menampilkan teks dalam bentuk cetakan tebal.

- Kita dapat menampilkan sekelompok kata dalam bentuk miring.

- Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

- Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c. Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar datau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami membuat link.

d. Menyisipkan data

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informasi untuk mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk table

Penampilan informasi dalam bentuk table ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan table ini juga dapat dilakukan untuk manambah nilai estetika dari page yang akan kita rancang.

Contoh HTML

Ø Heading

Heading digunakan untuk penulisan huruf besar atau pemberian nama bab. Heading memiliki enam level mulai dari yang terbesar sampai yang terkecil yaitu tag

sampai tag

. Contoh Sebagai berikut :

 

Contoh Heading

 

Ini adalah heading 1

Ini adalah heading 2

Ini adalah heading 3

Ini adalah heading 4

Ini adalah heading 5

Ini adalah heading 6

 

 

Posisi heading dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag heading yang diinginkan.

Paragraf

Untuk membuat paragraph dalam web, HTML menyediakan Tag

sebagai tag pembuka dan tag

sebagai tag penutup. Paragraph dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag

yang diinginkan Berikut ini contoh pembuatan paragraph.

 

Penggunaan Paragraf

 

Paragraf ini mengandung spasi dan baris tetapi browser mengabaikannya.

 

Sedangkan yang ini memiliki           spasi panjang.

Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda.

 

 

Line Break

Untuk membuat satu baris baru di halaman web maka HTML menyediakan tag
. Berikut ini contoh pembuatan baris baru atau line break:

 

Penggunaan Line Break

 

 

Ini adalah baris pertama, dan
Ini Baris kedua
Kemudian ini baris ke Tiga

 

 

Horisontal Dan Komentar Tersembunyi

Tag

---

digunakan untuk membuat garis horisontal menggunakan sepanjang yang nilai lebar yang diberikan pada tag tersebut. Tag

---

dapat berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag

---

yang di inginkan. Tag

---

dapat ditentukan tinggi garisnya dengan atribut SIZE dan dapat dihilangkan bayangan garisnya dengan penggunaan atribut NOSHADE.

Berikut ini contoh membuat garis horizontal tanpa bayangan, tinggi = 2 dengan

lebar separuh atau 50% pada layar web browser.

 

Penggunaan Horisontal Line

 

---

Tag hr dengan properties

---

<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser –>

 

 

Pemformatan Teks Dan Preformat

Agar penulisan kode HTML web ditampilkan di web browser seperti dengan format penulisan apa adanya maka digunakan tag

 kemudian ditutup dengan tag 

. Berikut ini contoh penggunaan tag

.

 

Penggunaan Format Text

 

Teks ini tebal

 

Teks ini juga tebal

 

Teks ini hurufnya besar

 

Teks ini miring

 

Teks ini hurufnya kecil

 

Teks ini berisi _subscript

 

Teks ini berisi ^superscript

Tag pre cocok untuk menampilkan kode komputer di bawah ini:

 

for i = 1 to 10

print i

next i

 

 

 

List unordered, ordered list, Definition List, Daftar Menu

Unordered List digunakan untuk menandai setiap item dari daftar/list menggunakan bullet berupa tiga simbol yaitu : Disk (Cakram), Circle (Linkaran), Square (Kotak)

Penulisan unordered list diawali tag

serta diikuti
• dan ditutup dengan tag

.

Ordered List digunakan untuk menandai setiap item dari daftar/list menggunakan penomoran.

Ordered List diawali tag

serta diikuti tag
1. dan ditutup dengan tag
dan tag

.

Definition List untuk memberi keterangan pada setiap item dari daftar/list. Definition List diawali tag

serta diikuti tag

dan ditutup dengan tag

dan tag

.

Daftar menu digunakan untuk membuat daftar menu dengan menggunakan tag

dengan diikuti tag

 

 

Sebentuk list unordered:

 

 

• Kopi

 

 

• Teh

 

 

• Susu

 

 

 

Sebentuk list ordered:

 

 

• Kopi

 

 

• Teh

 

 

• Susu

 

 

Sebentuk Definition List :

 

Sistem

Kumpulan beberapa usnsur dan saling terkait

Informasi

Sekumpulan data yang mempunyai makna

Manajemen

Proses untuk mencapai tujuan

 

 

 

Untuk property dari list order dan unorder, silahkan anda kembangkan sendiri.

Membuat Link

Agar halaman web dapat mengakses ke halaman satu dengan yang lainnya atau mengakses website yang lain, HTML menyediakan pasangan tag di sertai atribut HREF dan diakhiri dan link juga bisa anda tambah dengan title untuk memberikan informasi tentang link yang dibuat, title ini akan muncul saat link disorot. Link bisa anda buat dengan 2 macam, yaitu link text dan link gambar. Berikut contoh penggunaan link :

 

Contoh Link dengan Text dan Gambar

 

Link Gambar

---

Kunjungi Web Gianto

Link Text

---

Atau Klik ini Untuk mengunjungi web gianto

Klik Gianto

 

 

Membuat table

Berikut adalah tag yang dipakai untuk membuat table pada halaman web yang nantinya akan kita buat, table ini biasanya dipakai untuk desain website yang akan kita buat.

 

 

Satu baris satu kolom dengan border normal:

 

100

 

Satu baris dan tiga kolom dengan border tebal:

 

100200300

 

Dua baris dan tiga kolom dengan border sangat tebal:

 

100200300

400500600

 

Tabel ini tidak memiliki border:

 

100200

300400

 

 

 

Tag DIV

Tag

 

 

Jika ingin mahir memprogram website maka yang diperlukan adalah ketekunan dan pantang menyerah untuk selalu explorasi.

 

Tulisan ini akan berada di kanan