Pengenalan Dasar Kode HTML

Pengenalan Dasar Kode HTML

Setelah kita mempelajari pembuatan website melalui mode desain, ada satu pembahasan lagi yang mungkin cukup penting untuk Anda ketahui, yaitu penjelasan mengenai Kode Tag HTML.

Nantinya untuk menempatkan Kode-kode HTML ini, halaman pada program FrontPage yang harus Anda gunakan ialah mode 'code' atau mode 'split'.

Sebagai bahan latihan silakan buka kembali file 'index.htm' lalu, ubah mode tampilannya kedalam mode 'code' lalu lihat hasil tampilannya.

 "Tampilan Mode code, yang sudah berisi kode-kode HTML"
Setelah Anda melihat tampilan diatas, tentunya sekarang Anda menjadi tahu bahwa desain website yang sebelumnya Anda buat, ternyata memiliki kode-kode tersendiri sebagai pembentuknya.

Pengertian HTML

HyperText Markup Language (HTML) adalah suatu standar bahasa program yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.

HTML biasanya berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang di perintahkan/diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.

 Penggunaan Kode Tag HTML

Ok, jika kita sudah ada sedikit gambaran mengenai apa itu HTML, ada baiknya kita langsung praktek saja, agar lebih mudah dimengerti dan juga Anda bisa secepatnya menggunakan kode tag HTML ini.
Kode HTML Untuk Membuat Hyperlink
Tulisan Link

Kode script yang diatas, adalah kode script html yang digunakan untuk membuat sebuah hyperlink.

Sebagai contoh, silakan Anda buka halaman baru pada frontpage Anda, selanjutnya ubah modenya menjadi mode 'code', ikuti langkah berikut :
•    Tuliskan kode hyperlink nya setelah tag ''
•    Coba buat link yang mengarah ke www.AsianBrain.com
•    Penulisan kode hyperlinknya adalah sebagai berikut :
Asian Brain IMC


•    Untuk melihat hasilnya silakan ubah ke mode 'Split'.



Kode HTML Untuk Membuat Garis Baru



Kode script diatas, adalah kode script html yang digunakan untuk membuat sebuah garis baru ( sebesar satu spasi ), untuk lebih jelasnya kita langsung praktekkan saja.
•    Kita akan membuat 4 buah hyperlink yang berjajar kebawah ( dengan dipisahkan oleh tag

•    Tuliskan kode script berikut :

Asian Brain IMC


Asian Brain Domains


Asian Brain Hosting



Asian Brain Followup
•    Ok, kita lihat hasilnya :



Ok, sekarang jelas kan fungsi dari tag
, silakan Anda  aplikasikan tag ini untuk memisahkan baris atau paragraph pada website Anda.

Kode HTML Untuk Menampilkan Gambar / Image


Kode script yang berwarna merah diatas, adalah kode script html yang digunakan untuk menampilkan gambar atau image, baiklah untuk lebih jelasnya kita langsung praktekkan saja.
•    Sebagai contoh kami sudah mempersiapkan sebuah gambar bunga matahari dengan nama file 'gambar.jpg'.
•    Sekarang kita tuliskan kode html untuk menampilkan gambar pada mode 'code', yaitu :
•    Ok, sekarang kita lihat hasilnya :


Nah, jika file gambarnya kita simpan dalam folder terpisah, misalkan folder 'images' maka penulisan script untuk menampilkan gambarnya harus kita sisipkan 'path' atau nama folder dimana lokasi file gambarnya berada, scriptnya menjadi :



Misalnya, file gambar berada di folder images, penulisan scriptnya menjadi :



Menambahkan Meta Tag melalui kode HTML

Jika pada penjelasan sebelumnya, kami berikan contoh cara menambahkan meta tag melalui mode desain, saat ini kami akan memberikan cara yang lebih mudah untuk menambahkan title, meta description, dan meta keyword pada website Anda, yaitu melalui kode HTML, caranya :
•    Anda buka file website Anda, lalu pilih mode 'code' pada halaman kerja frontpage.
•    Selanjutnya tuliskan meta tag dan title website Anda diantara tag ..
•    Berikut tag html untuk meta tag dan title :





 Itulah beberapa contoh penggunaan kode Tag HTML, yang kita tulis pada mode 'code', berikut ini kami sertakan juga beberapa kode tag HTML yang bisa Anda  gunakan beserta penjelasan kegunaannya :
1.   
Membuat Text yang berada diantara kedua Tag menjadi Tebal (bold)
o    Contoh :
Peringatan! Pemerintah.
Hasilnya: Peringatan Pemerintah.
o    Contoh2 :
Peringatan!Pemerintah
Hasilnya: Peringatan Pemerintah.

2.   
Menentukan warna atau gambar latar belakang dokumen.

bgcolor = Warna latar belakang
background = Gambar latar belakang
o    Contoh:

o    Contoh2:


3.   
Membuat Teks atau Grafis yang diapit Tag Center berada ditengah-tengah browser (Align Center)
o    Contoh:
Selamat Datang
o    Contoh2:


4.   
Menutup Kode Tag Center.
5.   
Merubah Jenis Huruf, Ukuran Huruf dan Warna Huruf.
o    Contoh:
Selamat Datang di Anak Irian's Home Page!
Hasilnya:
Selamat Datang di Anak Irian's Home Page

6.   
Penutup untuk Tag Huruf.
7.   

Menentukan Ukuran Header/Topic dari pada Dokumen
o    Contoh:

Ini H1

Hasilnya:
Ini H1
o    Contoh:

Ini H2

Hasilnya:
Ini H2
o    Contoh:

Ini H3

Hasilnya:
Ini H3
o    Contoh:

Ini H4

Hasilnya:
Ini H4
8.   
9.   

---

Membuat Garis Horizontal pada dokumen HTML Ibnu.
o    Contoh:
Judul website

---

Hasilnya:
Judul Website
________________________________________

Itulah beberapa Tag HTML yang bisa Ibnu gunakan, semoga bermanfaat.