Copyright 2009 Be Enterprising Soul

with mr-amateur.co.cc

Dasar-dasar Penulisan Kode HTML

Richest
Richie_rich@ymail.com
Lisensi Dokumen:
Copyright 2009 mr-amateur.co.cc
Seluruh dokumen di mr-amateur.co.cc dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk
tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan
pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan
ulang, kecuali mendapatkan ijin terlebih dahulu dari mr-amateur.co.cc.

DASAR -DASAR PENULISAN KODE HTML

Bagi anda yang pengin belajar tentang penulisan kode HTML berikut adalah sedikit
mengenai dasar - dasar cara penulisannya. Tulisan ini hanya memuat perintah kode HTML
yang sangat sederhana. Tulisan ini mkungkin sangat cocok bagi mereka yang baru mengenal
HTML.
Html singkatan dari Hypertext Markup Language, merupakan program penulisan informasi
sebuah homepage. Dalam Tulisan ini akan coba saya perkenalkan dasar dasar penulisan
Kode HTML. Sebagai latihan Anda bisa menulis kode kode HTML berikut ke Microsoft
frontpage, atau program lainnya untuk mengetahui hasil setiap perintah kode HTML. (Untuk
FrontPage setelah anda membuka halaman kosong sebagai latihan tulis kode HTML di
Bagian menu HTML kemudian untuk melihat hasilnya silahkan tekan tombol Preview
atau Normal yang ada disebelahnya. Saya menyarankan pakai FrontPage karena
kebanyakan program tersebut sudah terinstal di komputer.
Sebelumnya ada saran dikit: cara yang baik dengan mempelajari bagaimana orang lain telah
menuliskan kode-kode nya pada setiap halaman html adalah lakukan : klik menu View dan
klik Source. Cobalah lakukan langkah ini pada saat anda sedang membuka halaman html
dokumen orang lain yang anda buka, download atau copy dari internet. Dengan langkah ini
maka anda akan melihat sendiri di layar monitor komputer anda berbagai kode yang
dituliskan pada halaman html tersebut.
1. Menulis judul pada halaman homepage
Setiap dokumen HTML sebuah homepage perlu diberi judul. Berikut adalah tampilan
pada saat anda melakukan perintah penulisan judul atau title :
Ubahlah teks Sinungku document dengan judul artikel anda. Penulisan judul
biasanya dimulai dengan tanda tag . Judul tulisan sebaiknya dituliskan pada awal
dokumen anda.
2. Menambahkan sub-sub judul dan paragraphnya
Apabila anda telah biasa mempergunakan Microsoft Word, anda sudah biasa pula
dengan model-model kodifikasi sub judul (heading) dengan tingkatan
kepentingannya. Dalam bahasa HTML ada enam tingkat sub judul (heading). H1
adalah sub judul yang paling penting, H2 adalah sub judul yang agak kurang penting,
begitu seterusnya sampai H6, yang paling sedikit kepentingannya..
Berikut adalah bagaimana caranya menambahkan sub judul (heading) :

Copyright 2009 Be Enterprising Soul

with mr-amateur.co.cc

Judul Penting
dan berikut adalah penulisan sub judul selanjutnya :

Judul Kurang Penting

Setiap paragraph yang anda tulis sebaiknya dimulai dengan sebuah kode tag
. Kode tag
hanya dipergunakan bila perlu. Kecuali pada penulisan sub judul biasanya diakhiri
dengan kode tag.
Contoh :
Paragraph Pertama.
Paragraph kedua.
Untuk membuat lay-out tulisan kode yang dipakai :
Teks anda
: Rata kiri kanan
Teks anda
: Rata Kanan
Teks anda
: Rata Tengah
Teks anda
: Rata Kiri
3. Menambahkan emphasis / Huruf Miring
Anda dapat menambahkan emphasis yang terdiri dari sebuah kata atau beberapa kata
dengan menuliskan kode tag pada awal emphasisnya dan diakhiri dengan kode tag .
Atau kode : dan diakhiri Contoh
Sinung putriku pertama yang cantik. Atau :
Sinung putri pertama dari Wahyo.
4. Membuat Huruf Tebal / Bold
Contoh : Sinung putri pertama dari Wahyo.
5. Membuat Huruf Bergaris bawah
Contoh : Sinung putri pertama dari Wahyo.
6. Membuat Warna Huruf
Contoh : Sinung putriku pertamayang cantik.
0000ff adalah kode warna huruf, anda bisa menggantinya dengan kode yang lain.
7. Membuat Warna Background Huruf
Contoh : Sinung putriku pertamayang cantik.
8. Membuat ukuran / size Huruf
Contoh : Sinung putriku pertamayang cantik.
9. Mengubah Jenis Huruf
Contoh : Sinung putriku pertamayang cantik.
10. Menambahkan gambar (images)
Gambar (atau images) dapat ditambahkan kedalam halaman Web anda agar semakin
informatif dan menolong penyampaian pesan anda. Cara sederhana untuk
menambahkan sebuah gambar adalah dengan menggunakan kode tag. Misalkan anda
hendak menambahkan sebuah file gambar sinungku.jpeg dalam folder atau direktori

Copyright 2009 Be Enterprising Soul

with mr-amateur.co.cc

yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki lebar 200
pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut :
Lebar dan tinggi tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan
menolong cepatnya tampilan halaman web anda diakses oleh orang lain di internet.
Namun masih ada kekurangannya ! Orang lain yang tidak dapat melihat gambar anda,
akan memerlukan deskripsi gambarnya. Anda dapat menambahkan deskripsinya
dengan cara sebagai berikut :
alt="Putriku yang Pertama">
Atribut alt dipergunakan untuk menuliskan perintah deskripsi singkat yaitu Putriku
yang Pertama . Untuk gambar-gambar yang kompleks, anda akan membutuhkan
deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file
sinungku.html, anda dapat menambahkan atribut deskripsi yang panjang seperti
dalam contoh berikut :
alt="Putriku yang Pertama " longdesc="sinungku.html">
Anda dapat membuat gambar dengan beberapa cara, dapat dengan mempergunakan
kamera digital, scanner, atau membuat gambar dengan program pembuatan gambar
seperti Photoshop, Corel, Microsoft Photoeditor, LViewpro dll. Kebanyakan program
browser dapat membaca format gambar GIF dan JPEG, program browser yang terbaru
juga dapat membaca format PNG. Untuk mencegah lambatnya gambar anda diakses
di internet sebaiknya anda menerapkan ukuran file gambar yang tidak terlalu besar.
Secara umum, format JPEG adalah format terbaik untuk fotografi dan memperhalus
berbagai jenis gambar, sedangkan format GIF dan PNG baik untuk grafis seperti
bidang datar berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan
progressive rendering yaitu kemampuan mengirimkan gambar kasarnya terlebih
dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai gambar
tersebut tampil seluruhnya dengan baik.
11. Menambahkan link (tanda berhubungan) dengan halaman lain
Yang membuat Web demikian efektif adalah adanya kemampuan untuk membuat
hubungan (link) dari satu halaman dengan halaman lainnya dan halaman lain yang
berhubungan ini dapat dikerjakan cukup dengan satu kali klik saja.
Hubungan atau Link biasa ditulis dengan kode tag . Misalkan sebuah hubungan atau
link hendak dibuat pada file sinungku.html:
This a link to Sinungs page.
Teks antara kode tag dengan kode tag adalah keterangan tentang hubungan atau link
yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna teks dan garis
bawah dibuat berwarna biru.
Untuk membuat link ke tempat Web yang lain anda perlu menambahkan alamat
internet Web selengkapnya (biasanya disebu URL), contoh untuk link ke w3c anda
perlu menuliskan :
This is a link to W3C.
Anda dapat juga membuat gambar logo memiliki link ke halaman lain. Contoh
penulisan berikut memungkinkan gambar logo anda dapat berhubungan dengan home
page.

Copyright 2009 Be Enterprising Soul

with mr-amateur.co.cc

12. Tiga macam daftar

Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list). Pertama daftar
dengan kode bulat (bulleted list), biasa disebut unordered list. Penulisannya
mempergunakan kode tag
dan kode tag contoh :
o Sinung putriku pertama
o Wahyo adalah ayahnya
o Dyah adalah ibunya
Perhatian, anda selalu harus menuliskan kode tag
pada bagian akhir daftar anda, tetapi kode tag
bersifat tambahan atau bisa juga tidak dipergunakan. Jenis daftar kedua disebut daftar
bernomor atau disebut juga ordered list. Ini dituliskan dengan kode tag
dan kode tag Contoh :
Sinung putriku pertama
Lahir tanggal 18 Agustus
Hari lahir Jum`at jam 20.05 WIB
Seperti daftar pertama, anda selalu perlu mengakhiri daftar dengan kode tag
tetapi kode tag
pada bagian akhir adalah tambahan dan dapat dihilangkan.
Daftar ke tiga dan terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini
memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini ditulis
dengan kode tag
pada awal tulisan dan diakhiri dengan kode tag
Masing-masing terminologi dimulai dengan kode tag
dan setiap definisi dimulai dengan kode tag
Contoh :
the first term
its definition
the second term
its definition
the third term
its definition
Kode tag
dan
adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap daftar dapat disubkan
antara satu daftar dengan daftar lainnya.Contoh :
the first list item
the second list item
o first nested item

Copyright 2009 Be Enterprising Soul

with mr-amateur.co.cc

o second nested item

the third list item
Anda bahkan dapat membuat paragraph dan headingnya dan lain-lainl.pada daftar
yang lebih panjang.