DASAR HTML
3.1. HTML HEADINGS
Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalamsuatu dokumen HTML. Walaupun merupakan judul, heading berbeda dengan elemen
yang hanya muncul pada title bar dari suatu jendela browser, bukan dalam halaman web. HTML menyediakan enam tingkat heading. Untuk menyatakan suatu heading digunakan tag dimana x adalah nomor level heading dari 1 samapi 6. Pemakaian heading ini diawali dengan tag dan diakhiri dengan tag . Atribut yang menyertai tag adalah ALIGN, yang memungkinkan sebuah heading untuk ditampilkan rata kanan, kiri, maupun tengah.
Tabel 3.1 Atribut Heading
Nilai
Fungsi
left
Untuk meratakan heading ke kiri
center
Untuk meratakan heading di tengah
right
Untuk meratakan heading ke kanan
Contoh Penggunaan Heading Pengunaan Heading Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
GARIS PEMISAH HORIZONTAL. Untuk memberi garis pemisah antara satu baris dengan baris lainnya, gunakan tag
. Tag ini akan membuat garis horizontal sepanjang lebar jendela browser.
Tabel 3.2 Atribut Tag
1
Dasar HTML
Nama
Fungsi
align
Untuk perataan garis. Dapat diset dengan nilai left, right, dan center.
width
Untuk mengatur panjang garis horizontal yang dapat ditentukan dengan nilai pixel atau persen.
size
Untuk mengatur ketebalan garis horizontal mempunyai nilai dalam satuan pixel.
noshade
Menampilkan garis horizontal tanpa bayang-bayang 3D
color
Memberikan warna pada garis horizontal
Contoh Penggunaan Tag HR Pengunaan tag HR Heading 1
Heading 2
3.2. HTML PARAGRAPHS
Suatu paragrf dalam dokumen HTML ditandai dengan pasangan tag ...
. Tag menyatakan awal suatu paragraf sedangkan akhir paragraf ditandai dengan
, tetapi tag akhir boleh tidak dipergunakan. Suatu paragraf secara otomatis akan berakhir jika paragraf baru dimulai, pemakaian heading, label, from, blockquote, atau list. Atribut yang digunakan dalam paragraf adalah ALIGN.
Tabel 3.3 Nilai Atribut ALIGN
Nilai
Fungsi
left
Untuk meratakan teks ke margin kiri
right
Untuk meratakan teks ke margin kanan
center
Untuk meratakan teks ke margin tengah
Contoh Penggunaan Tag P
2
Dasar HTML
Pengunaan tag P Ada Pihak Ketiga Pancing Indonesia-Malaysia Perang
JakartaSebagai tetangga, hubungan Indonesia dan Malaysia memang sering naik turun, bahkan sering tegang. Namun, diharapkan Indonesia dan Malaysia tidak terpancing oleh pihak ketiga, yang mengambil keuntungan, atas konflik yang lebih dalam seperti open fire atau perang. Sebab, pihak ketiga secara terus menerus melakukan test case kepada Indonesia dan negara tetangga untuk terlibat konflik lebih jauh.
Ada pihak ketiga yang ingin RI-Malaysia dibenturkan. Indikasi ini sudah ada, mereka ingin mencari keuntungan secara ekonomi yang akan diambil. Pihak ketiga ini memang tak muncul dipermukaan, tapi kalau terjadi benturan, mereka pasti tertawa, kata pengamat intelijen, Wawan H Purwanto kepada wartawan di RM Suharti, Jl Hasyim Ashari, Sabang, Jakarta Pusat, Rabu (8/9/2010).
Dalam membuat halaman web, suatu teks dapat ditulis dalam baris baru. Hal ini tidak dapat dilakukan seperti mengetik dalam program editor biasa yang cukup dengan tekan tombol Enter. Tag
digunakan untuk membuat teks ditulis pada baris berikutnya. Tag ini merupakan single text, artinya hanya mempunyai tag awal tetapi tidak mempunyai tag akhir.
Contoh Penggunaan Tag BR Pengunaan tag HR Baris 1
Baris 2
Baris 3
Baris 4
3.3. HTML FORMATTING
HTML dapat mengatur browser untuk menampilkan teks dalam bentuk cetak tebal, miring, bergaris bawah atau kombinasi diantaranya. HTML menyediakan banyak elemen untuk memformat teks. Elemen-elemen tersebut dalam dua bagian yaitu Logical Formating untuk memformat teks menurut isi atau kandungan teks, dan Physical Formating untuk memformat teks secara karakteristik teks.
Tabel 3.4 Logical Formating
3
Dasar HTML
Elemen/Tag
Fungsi
...
Untuk menandai suatu Penekanan
....
Untuk menandai suatu Penekanan
....
Untuk menandai suatu Citation
....
Untuk menandai suatu Defenisi
....
Untuk menandai suatu Kode Program
....
Untuk menandai suatu Contoh
...
Untuk menandai suatu Keyboard
...
Untuk menandai suatu Variabel
...
Untuk menandai suatu Singkatan
....
Untuk menandai suatu Akronim
...
Untuk memberikan informasi pembuat situs web
Sebagai komentar dan tidak ditampilkan dalam browser
Tabel 3.5 Physical Formating
Elemen/Tag
Fungsi
...
Untuk menebalkan teks
...
Untuk membuat teks tampil miring
...
Untuk membuat teks bergaris bawah
....
Untuk membuat efek coretan pada teks
...
Berfungsi sama dengan tag
Untuk membuat teks tampil berkedip, hanya ditampilkan pada Netscape
....
Untuk menampilkan teks dalam font typewriter
....
Untuk memperbesar teks
....
Untuk memperkecil teks
....
Untuk membuat teks subscript
...
Untuk membuat teks superscript
....
Untuk menuliskan kutipan teks
Contoh Penggunaan HTML Formating Pengunaan HTML Formating menebalkan
memiringkan
menggaris bawah
memberi coretan
memberi coretan
font typewriter
memperbesar teks
mengecilkan teks
H2O
E=mc2
3.4. HTML FONTS
4
Dasar HTML
HTML menyediakan elemen FONT yang dapat digunakan untuk mengubah ukuran dan warna suatu teks. Pemakaina elemen ini diawali dengan tag dan diakhiri dengan tag . Dengan elemen ini teks yang ditampilkan dapat diatur fontnya.
Tabel 3.6 Atribut Font
Atribut
Keterangan
face
Untuk membuat bermacam-macam font pada halaman web
size
Untuk menentukan ukuran suatu teks, dengan nilai 1 sampai 7
color
Untuk memberi warna pada font
Contoh Penggunaan HTML Fonts Pengunaan HTML Fonts Font Comic San MS
Ukuran Teks
Warna Teks
3.5. HTML COLORS
Warna HTML didefenisikan menggunakan notasi heksadesimal (HEX) untuk kombinasi merah, hijau, dan biru (RGB). Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 (dalam HEX: 00). Nilai tertinggi adalah 255 (dalam HEX: FF). Nilai HEX ditetapkan sebagai 3 pasangan nomor dua-digit, dimulai dengan tanda #.
Tabel 3.7 Tabel Warna HEX dan RGB
Warna
Warna HEX
Warna RGB
Hitam
#000000
rgb(0,0,0)
Merah
#FF0000
rgb(255,0,0)
Hijau
#00FF00
rgb(0,255,0)
Biru
#0000FF
rgb(0,0,255)
Kuning
#FFFF00
rgb(255,255,0)
Biru Langit
#00FFFF
rgb(0,255,255)
Ungu
#FF00FF
rgb(255,0,255)
Abu-abu
#C0C0C0
rgb(192,192,192)
Putih
#FFFFFF
rgb(255,255,255)
3.6. HTML COLORNAMES
5
Dasar HTML
Untuk menampilkan warna pada HTML dapat dilakukan dengan memberikan nama warna. Tetapi sebaiknya Anda menggunakan warna HEX karena pencahayaan warna bisa berbeda di browser yang berbeda. Berikut adalah nama-nama warna yang telah ditentukan
Tabel 3.8 COLORNAMES
Nama Warna
Warna
black
Hitam
red
Merah
green
Hijau
blue
Biru
yellow
Kuning
aqua
Biru Langit
magenta
Ungu
silver
Abu-abu
white
Putih
3.7. HTML COLORVALUES
Untuk menampilkan warna di HTML lebih bagus menggunakan COLORVALUE yang merupakan bilangan HEX karena apabila menggunakan COLORNAMES, di setiap browser memiliki tingkat kecerahan yang berbeda.
Tabel 3.9 COLORVALUES
3.8. HTML LISTS
6
Dasar HTML
Warna
Warna HEX
Hitam
#000000
Merah
#FF0000
Hijau
#00FF00
Biru
#0000FF
Kuning
#FFFF00
Biru Langit
#00FFFF
Ungu
#FF00FF
Abu-abu
#C0C0C0
Putih
#FFFFFF
Informasi dapat disampaikan dengan mudah jika ditampilkan dengan menggunakan list. Banyak hal yang dapat disampaikan dengan list, misalnya list menu makanan, listr kerja seseorang, dan juga lainnya. HTML menyediakan beberapa jenis list, yaitu:
1. Ordered List 2. Unordered List 3. Menu List 4. Directory List 5. Definition List
ORDERED LIST . Ordered List adalah suatu list di mana item-item yang ada dalam daftar memiliki nomor secara urut. Oredered List dimulai dengan tag awal dan diakhiri dengan tag akhir
, dan di antara kedua tag tersebut terdapat tag - yang menyatakan list item.
Tabel 3.10 Atribut Ordered List
Atribut
Fungsi
compact
Untuk menyatakan bahwa item dalam list pendek, sehingga browser menampilkan dalam bentuk yang lebih padat
type = A
Membuat daftar berurut dengan huruf besar (A, B, C, ... )
type = a
Membuat daftar berurut dengan huruf kecil (a, b, c, ... )
type = I
Membuat daftar berurut dengan huruf romawi besar (I, II, III, .... )
type = i
Membuat daftar berurut dengan huruf romawi kecil (i, ii, iii, ... )
type = 1
Default nilai daftar berurut (1, 2, 3, ... )
start = n
Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal
Contoh Penggunaan Ordered List Pengunaan Ordered List - Fakultas MIPA
- Teknik Informatika
- Sistem Informasi
- Fakultas Sastra
- Sastra Inggris
- Sastra Indonesia
UNORDERED LIST. Unordered List adalah daftar di mana urutan item tidak diutamakan. Item-item tampil dalam sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan bulatan, kotak, atau
7
Dasar HTML
lingkaran. Penggunaan ordered list diawali dengan tag , dan di dalamnya ditandai dengan tag - .
Tabel 3.11 Atribut Unordered List
Atribut
Fungsi
type = circle
Membuat tanda lingkaran untuk item
type = square
Membuat tanda kotak untuk item
type = disc
Membuat tanda cakram untuk item
Contoh Penggunaan Unordered List Pengunaan Unordered List - Provinsi
- Nangro Aceh Darusalam
- Sumatera Utara
MENU LIST. Menu List adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal , di dalamnya menggunakan tag - . browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list.
Contoh Penggunaan Menu List Pengunaan Menu List
DIRECTORY LIST. Directory List, seperti Menu List, digunakan untuk daftar item yang kuran dari 24 karakter (seperti direktori UNIX atau DOS yang menggunakan parameter /w). Directory List menggunakan tag awal dan tag akhir . Penggunaan tag - juga diperlukan
8
Dasar HTML
Contoh Penggunaan Directory List Pengunaan Directory List Warna Pelangi:
- Merah
- Jingga
- Kuning
- Hijau
DEFINITION LIST. Definition List adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar sebelumnya. Defenition List digunakan untuk mendefenisikan atau menjelaskan istilah-istilah yang disebut juga Glossary List (daftar istilah). Definition List dinyatakan dengan tag awal dan tag akhir
. Dalam tag tersebut ada dua bagian yaitu:
1. Istilah yang akan didefenisikan, dinyatakan dengan tag tunggal - atau Defition term. 2. Definisi dari istilah tersebut dinyatakan dengan tag tunggal
- atau Definition Data.
Contoh Penggunaan Difinition List Pengunaan Difinition List - Kota Medan
- Kota Medan adalah ibu kota provinsi Sumatera Utara, Indonesia. Kota ini merupakan kota terbesar di Pulau Sumatera Kota Medan merupakan pintu gerbang wilayah Indonesia bagian barat dan juga sebagai pintu gerbang bagi para wisatawan untuk menuju objek wisata Brastagi di daerah dataran tinggi Karo, objek wisata Orangutan di Bukit Lawang, Danau Toba
- Kota Bogor
- Kota Bogor adalah sebuah kota di Provinsi Jawa Barat, Indonesia. Kota ini terletak 54 km sebelah selatan Jakarta, dan wilayahnya berada di tengah-tengah wilayah Kabupaten Bogor. Luasnya 21,56 km², dan jumlah penduduknya 834.000 jiwa (2003). Bogor dikenal dengan julukan kota hujan, karena memiliki curah hujan yang sangat tinggi. Kota Bogor terdiri atas 6 kecamatan, yang dibagi lagi atas sejumlah 68 kelurahan. Pada masa kolonial Belanda, Bogor dikenal dengan nama Buitenzorg (pengucapan: boit'n-zôrkh", bœit'-) yang berarti "tanpa kecemasan" atau "aman tenteram".
LATIHAN
Desain sebuah halaman website yang berisikan tulisan seperti di bawah ini:
9
Dasar HTML
APA ITU DOMAIN ?
Dewasa ini kita sangat gampang mencari informasi di internet, dengan mengetikkan sebuah alamat dari sebuah website kita tinggal mengaksesnya melalui browser yang telah terakses dengan internet dan akhirnya kita akan mendapatkan berbagai informasi yang kita inginkan melalui website tersebut. Selain itu, saat ini kita dapat dengan gampangnya juga mengirimkan informasi kepada siapa saja dengan menggunakan email. Email tersebut tentunya merupakan sebuah tulisan yang berbentuk alamat tertentu yang mengarah ke sebuah kotak pos yang ada di dunia maya. Kenapa sedemikian mudah seperti itu ?, hanya dengan sebuah alamat tertentu dan dipastikan tidak pernah ada satupun alamat website atau email yang sama didunia ini, semua kegiatan diatas dapat berjalan dengan lancar. Sebenarnya semua itu karena peran domain yang membentuk tulisan-tulisan seperti alamat sebuah website dan email.
SEMUA TENTANG DOMAIN
Internet merupakan sebuah jaringan dari berbagai jutaan komputer yang bertindak sebagai host yang tersebar di seluruh dunia ini dengan membentuk berbagai hirarki tertentu dan dapat saling berkomunikasi melalui sebuah standard protokol yang sering disebut TCP/IP (Transmission Control Protocol/Internet Protocol).
Transmission Control Protocol TCP melakukan transmisi data per segmen dengan memecah paket data sesuai dengan besaran yang ada dan dikirim satu persatu hingga selesai. Agar pengiriman data sampai dengan baik, maka pada setiap paket pengiriman, TCP akan menyertakan nomor seri. Komputer mitra yang menerima paket tersebut harus mengirim balik sebuah sinyal ACKnowledge dalam satu periode yang ditentukan. selesai
Internet Protocol Internet protocol (IP) menggunakan IP address sebagai identitas untuk mengirim data akan dibungkus dalam paket dengan label berupa IP address si pengirim dan IP address penerima. selesai.
Halaman tersebut telah menggunakan seluruh tag-tag utama yang berada di HTML HEAD
Pada halaman tersebut juga telah menggunakan seluruh tag-tag yang telah dijelaskan pada bab ini.
10
Dasar HTML