————————————————————————————————————
HEADING (PENJUDULAN)
Pertama, saya akan membahas mengenai heading. Heading berasal dari kata header, dan kata dasarnya yaitu head atau kepala. Jadi pengaturan heading adalah pengaturan pada kepala atau judul sebuah segmen dalam HTML, dimana segmen yang dimaksud dapat berupa paragraf maupun sebuah teks artikel yang utuh (seperti halnya judul pada sebuah cerpen). Header adalah istilah dengan banyak definisi dalam bidang pemrograman komputer, jaringan, email, pengolah kata, dan juga HTML. Header pada pemrograman HTML merujuk pada bagian atas sebuah dokumen HTML. Namun penggunaan header ini masih dapat di eksplorasi menjadi bentuk lain.
Untuk menuliskan judul suatu paragraf, digunakanlah sebuah tag yang biasa disebut heading. Untuk menyatakan suatu heading, digunakan tag <hx> diakhiri dengan tag </hx>, dimana x adalah nomer level heading (maksud dari level disini adalah besarnya ukuran heading) yang dipresentasikan dengan bilangan numerik dari 1 sampai 6. Pemakaian tag <hx> berkisar pada bilangan numerik dimana <h1> adalah
heading terbesar dan <h6> adalah heading terkecil. Sebagai contoh, silahkan praktekan penggunaan heading seperti berikut (saya merekomendasikan untuk menggunakan notepad saja) .
 |
| Penggunaan Heading |
Seperti pada materi web design sebelumnya (Mengenal HTML), saya telah menyampaikan bahwa isi informasi dari sebuah dokumen HTML disimpan pada body section, maka pada praktek kali ini pun tag tersebut ditempatkan pada body section (setelah tag <body> dan sebelum tag </body>). Setelah tag tersebut ditempatkan pada tempatnya, save dengan nama apapun sesuai kehendak anda, berikut screenshot hasilnya
 |
| Hasil Heading |
————————————————————————————————————
ALIGNMENT (PERATAAN)
Align biasanya merupakan atribut pada sebuah tag, dan digunakan untuk meratakan suatu objek dari HTML, objek tersebut dapat berupa teks, paragraf, tabel, gambar, dan objek lainnya. Nilai umum pada tag align ini antara lain left, right, center, dan justify. Cara penggunaannya yaitu align=left|right|center|justify. Setiap nilai dari atribut align memiliki arti sebagai berikut :
- left = teks rata pada margin kiri
- right = teks rata pada margin kanan
- center = teks rata tengah
- justify = teks rata pada margin kiri dan kanan
 |
| Penggunaan Alignment |
Berikut adalah screenshot hasil dari tag tersebut
 |
| Hasil Alignment |
————————————————————————————————————
FONT (HURUF)
Pengaturan font adalah konfigurasi pada font yang akan digunakan pada sebuah teks. Pengaturan tersebut meliputi pengaturan jenis font yang akan digunakan (font face), ukuran dari font (font size), dan warna dari font (font color) yang akan digunakan pada sebuah teks maupun paragraf. Pengaturan font pada dokumen HTML menggunakan tag <font> dan diakhiri dengan tag </font>.
FONT FACE
Yaitu pengaturan jenis font. Dalam memilih jenis font, web designer harus mempertimbangkan apakah font yang digunakan pada halaman web yang dibuat nantinya akan terbaca pada komputer pengguna yang lain (pengakses web), karena font-font yang ada pada setiap komputer bisa jadi berbeda dan mungkin pengguna suatu komputer belum menginstalkan font yang ada pada dokumen HTML yang dibuat. Jadi, dalam membuat sebuah dokumen HTML janganlah memilih font yang terkesan 'aneh' karena hal itu tentu akan sia-sia jika tampilan font tersebut tidak tampil pada pengakses web yang kita buat. Jika ingin menggunakan font yang terkesan sedikit 'aneh', anda dapat menggunakan grafik.
Cara mengatur jenis font yang akan digunakan cukup menambahkan atribut face pada tag <font>. Berikut contoh penggunaannya
 |
| Penggunaan Font Face |
Dari konfigurasi di atas, berikut adalah hasilnya
 |
| Hasil Font Face |
FONT SIZE
Pengaturan font size yaitu pengaturan yang ditujukan pada ukuran dari font yang digunakan. Cara penginputan tagnya yaitu menggunakan atribut size pada tag <font>. Ukuran font yang digunakan berkisar antara 1 sampai 7. Sebelum mempraktekan cara mengatur font size pada HTML, ada baiknya seorang web designer mengetahui keterangan berikut :
- font size 1 ---> yaitu ukuran font terkecil
- font size 3 ---> yaitu ukuran font standar / default pada HTML
- font size 7 ---> yaitu ukuran font terbesar
 |
| Penggunaan Font Size |
Dan berikut adalah screenshot dari hasil penginputan di atas
 |
| Hasil Font Size |
FONT COLOR
Yaitu pengaturan kepada warna dari sebuah teks ataupun paragraf. Cara untuk melakukan pengaturan warna font adalah dengan menambahkan atribut color pada tag <font>. Nilai dari atribut color dapat langsung berupa nama warna (color name) maupun dalam nilai RGB / HEX (color code).
Berikut adalah contoh penggunaan atribut font color
 |
| Penggunaan Font Color |
Pada tag di atas dapat diketahui bahwa "#ff0000" adalah kode warna dari warna merah. Dari penginputan tag tersebut, berikut adalah hasilnya
 |
| Hasil Font Color |
Sebagai informasi tambahan, pada pengaturan jenis font di atas kita melihat adanya penggunaan tag <br />. Maksud dari tag tersebut adalah untuk membuat line break yang fungsinya sama seperti tombol Enter pada saat sedang menggunakan pengolah kata seperti Microsoft Word maupun text editor seperti notepad, yaitu memulai pada baris baru saat sedang mengetik.
Dari gambar di atas juga dapat diketahui bahwa penggunaan nilai atribut color menggunakan nama warna maupun kode hasilnya sama, hanya saja jika menggunakan kode maka cakupan warna akan jauh lebih banyak sehingga dapat di eksplorasi lebih baik lagi. Untuk melihat informasi mengenai kode warna, klik disini.
————————————————————————————————————
Sebagai informasi tambahan, kali ini akan dijelaskan mengenai cara membuat background dari HTML. Penggunaan background pada HTML dapat dilakukan dengan menambahkan atribut bgcolor atau dapat juga menggunakan atribut background pada tag <body>. Jika ingin menggunakan background warna, gunakan atribut bgcolor, tetapi jika ingin memakai background berupa gambar, gunakan atribut background. Berikut contoh tag penggunaan background warna
Dan hasilnya adalah sebagai berikut
 |
| Background Warna |
Kemudian ini adalah contoh penggunaan background dengan memakai gambar, dalam hal ini saya menggunakan gambar dengan nama Sunset.jpg
Berikut adalah hasilnya
 |
| Penggunaan Background Gambar |
Note :
Jika menggunakan background berupa gambar, maka cara paling mudah adalah dengan menyimpan file gambar yang akan dijadikan background pada direktori / folder yang sama dimana file HTML berada. Contoh tag di atas merupakan penggunaan gambar yang satu folder dengan file HTML. Jika letak gambar yang akan dijadikan background tidak satu folder dengan file HTML, maka pengisian nilai dari atribut background harus mendapatkan penambahan khusus, terlebih jika letak file gambar merupakan struktur direktori bertingkat. Penambahan tersebut akan di bahas pada materi berikutnya mengenai Penggunaan Image.
Tidak ada komentar:
Posting Komentar