Pengaturan Gambar Dalam Dasar HTML

BAB III

 GAMBAR

 3.1Pengantar Gambar 

Gambar (image) pada sebuah halaman web dapat memperindah tampilan dan bahkan memperjelas suatu informasi yang terkandung di dalam halaman tersebut. Dengan adanya gambar, pengakses internet dapat berlama-lama di depan layar membaca isi berita yang ditampilkan pada halaman web. Pada dasarnya, hampir semua format gambar dapat dimasukkan ke dalam halaman web, namun terkadang ada beberapa browser yang tidak bisa menampilkan gambar dengan format tertentu. Hal ini menyebabkan format gambar gif, jpeg (jpg), dan png yang paling banyak digunakan untuk halaman web dari sekian banyak format gambar. Bisa dikatakan bahwa ketiga format tadi adalah format standar gambar untuk halaman web. Masing-masing format gambar memiliki karakteristik yang berbeda-beda. Berikut adalah daftar karakteristik masing-masing format:

Karakteristik format gambar tersebut akan berpengaruh pada hasil tampilan pada halaman web, sehingga penggunaannya disesuaikan dengan kebutuhan. Misal, format gif akan lebih cocok digunakan untuk tombol navigasi sedang untuk gambar foto akan lebih cocok menggunakan format jpeg atau png. Penggunaan format gambar ini juga akan berpengaruh pada kecepatan loading halaman web saat dibuka.

3.2 Memasukkan Gambar

Elemen yang dibutuhkan untuk memasukkan gambar ke dalam halaman web adalah . Atribut-atribut yang akan sering digunakan pada elemen ini adalah:

 src, nama dan alamat sumber tempat gambar berada. 

 height, untuk menentukan tinggi gambar pada browser. 

 width, untuk mengatur lebar gambar pada browser

 align, untuk mengatur posisi gambar, di bagian kiri, tengah atau kanan halaman. Atribut ini juga            untuk mengatur posisi teks relatif pada gambar, di sisi top, midle atau bottom. 

 hspace, untuk mengatur lebar spasi horisontal.

 vspace, untuk mengatur lebar spasi vertikal 

 border, untuk mengatur ketebalan border gambar. 

 alt, sebagai informasi alternatif untuk gambar. 

Contoh Program:

Hasilnya :

Nilai bilangan untuk atribut height dan width menggunakan satuan pixel. Penambahan tanda persen (%) akan menyebabkan ukuran gambar yang dimasukkan adalah ukuran relatif terhadap ukuran browser.

3.3 Gambar sebagai Latar Belakang 

Gambar dapat ditampilkan sebagai latar belakang dokumen HTML. Gambar dapat dimasukkan ke dalam tag dengan atribut background.

Hasilnya :

3.4 Alignment Gambar 

Penulisan gambar di dalam dokumen HTML bersama dengan teks akan membuat suatu teks ditampilkan sejajar pada bagian bawah dari gambar. Gambar dapat diposisikan di sebelah kiri maupun kanan dari teks. Contoh Program:

Hasilnya :

3.5 Memanipulasi Ukuran Gambar 

Gambar memiliki ukuran dengan dimensi piksel (pixel), yaitu lebar x tinggi (width x height). Pada saat gambar ditampilkan di atas browser, maka gambar tersebut ditampilkan dalam ukuran sebenarnya. Kita dapat memanipulasi ukuran gambar yang ditampilkan di atas browser dengan memberikan atribut width dan height di dalam tag . Contoh program:

Hasilnya :

3.6 Alternate Text

 Atribut alt dapat digunakan di dalam tag img untuk memberikan alternate text dari suatu gambar. Alternate teks ini ditampilkan ketika browser tidak dapat meload gambar. Contoh Program:

Hasilnya:

Perhatikan, karena gambar mypenguin.jpg tidak ada, sehingga tidak dapat diload, maka muncul keterangan dari gambar tersebut. Bila gambar tersebut ada dan dapat diload, maka keterangan (alt) akan muncul pada saat mouse didekatkan pada gambar tersebut. Sebagai tambahan, untuk memberikan border pada gamar dapat Anda tambahkan atribut BORDER pada tag . Misalnya:

Catatan: besarnya ukuran gambar yang ditampilkan di dalam dokumen HTML, mempengaruhi kecepatan browser untuk me-load dokumen HTML tersebut. Semakin besar ukuran gambar yang ditampilkan, semakin lama browser meload dokumen HTML.

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat

Elemen dan Atribut Dasar HTML

  

 

BAB II  

ELEMEN DASAR HTML 

 

2.1 Heading 

Sebuah dokumen biasanya memiliki judul atau disebut heading. Tag heading dituliskan 

dengan <hn> atau <Hn>. Huruf n dapat digantikan dengan bilangan antara 1 sampai 6 yang

menunjukkan urutan besarnya teks dari paling besar <h1> hingga paling kecil <h6>. 

Untuk latihan, buatlah dokumen html yang isinya seperti gambar berikut ini: 

Pada tag <h1> ditambahkan informasi lain yaitu attribute align="center", yang akan meletakkan

kalimat di tengah-tengah halaman. Attribute adalah informasi tambahan yang dipakai untuk mengubah

nilai-nilai default dari tag yang bersangkutan. Dapat kita lihat bahwa nilai default tag judul adalah rata

kiri. Nilai attribute align yang bisa kita berikan adalah center, left, dan right yang artinya rata tengah,

rata kiri, dan rata kanan.  Tag <hr> artina membuat garis horisontal. 

Setelah berkas disimpan, hasil tampilannya di browser web sebagai berikut: 

2.2 Paragraph 

Text yang ditampilkan pada halaman dapat berupa paragraph (paragraf). Tag yang 

digunakan untuk menuliskan paragraph adalah <P> </P>. Misalnya dalam dokumen HTML

Anda akan diisi dengan satu paragraf yang memberikan gambaran mengenai isi homepage

Anda. Perhatikan tampilan paragraf dalam browser di bawah ini: 

Hasilnya :

2.2.1 Atribut Align

Atribut align berfungsi agar kita dapat membuat teks menjadi rata kanan, rata kiri, rata

tengah, dan rata kiri-kanan. Berikut penggunan atribut align pada tag paragraph <P>.

<P  ALIGN=right>      

-> Rata kanan 

<P  ALIGN=left> 

 

-> Rata kiri 

<P  ALIGN=center>  

-> Rata tengah 

<P  ALIGN=justify>  

-> Rata kiri kanan 

Atribut align bisa juga dikenakan pada tag Heading <hn> seperti contoh berikut.

<Hn  ALIGN=right>

<Hn  ALIGN=left>

<Hn  ALIGN=center>

<Hn  ALIGN=justify>

2.2.2 Bold, Italic, Underline

Anda juga dapat memformat teks menjadi tebal (bold), miring (italic), garis bawah

(underline). Sintaksnya sebagai berikut: 

<b>  teks Anda </b>     

-> BOLD 

<i>  teks Anda  </i>  

-> ITALIC 

<u> teks Anda </u>  

-> UNDERLINE 

Bila Anda ingin menggabungkan ketiga perintah di atas, maka struktur sintaksnya 

sebagai berikut: 

<b><i><u> teks Anda </u></i></b> 

Hasilnya:

2.3 Style dan Format Teks 

Berikut ini adalah daftar tag yang sering digunakan untuk pengaturan gaya dan format 

penulisan sebuah teks.

 <em> </em> 

Digunakan untuk menjadikan teks sebagai emphasizing, yaitu terlihat agak miring,

hampir mirip dengan tag <i> </i>.

 <strong> </strong>, <b> </b>

Untuk membuat teks menjadi tebal atau bold.

 <kbd> </kbd>

Digunakan untuk menampilkan teks sebagai sebuah monospaced font, namun pada

beberapa browser ditampilkan dalam bentuk bold atau tebal. 

 <address> </address>

Digunakan untuk memisah teks ke baris berikutnya.

 

Untuk membuat teks menjadi superscript (posisi teks sedikit di atas normal).

 

Untuk membuat teks menjadi subscript (posisi teks sedikit di bawah normal).

 <del> </del>

Digunakan untuk menampilkan teks dalam bentuk teks deleted, yaitu teks dengan garis

coret di badannya (tengah teks).

 <ins> </ins>

Digunakan untuk menampilkan teks berupa teks insert, ditandai dengan garis bawah,

mirip dengan fungsi elemen <u> </u>.

 <br/>

Digunakan untuk berpindah ke baris baru.

 <hr/>

Digunakan untuk membuat sebuah garis horisontal.

Contoh penggunaan elemen-elemen di atas adalah sebagai berikut: 

Hasilnya :

2.4 Karakter Khusus 

Sejauh ini tidak ada kesulitan dalam membuat halaman dokumen HTML, bukan? Kita 

tahu bagaimana menampilkan huruf tebal dengan tag <b></b>, tapi bagaimana jika kita ingin

menampilkan karakter < atau > dalam dokumen HTML? Dalam HTML disediakan konstantakonstanta

khusus yang mewakili karakter semacam < dan >.Perhatikan daftar di bawah ini:

1.&lt  mewakili karakter <, kata kuncinya less than 

2. &gt  mewakili karakter >, kata kuncinya greater than  

3. &amp  mewakili karakter &, kata kuncinya ampersand

4. &quote  mewakili karakter ", kata kuncinya quotation

5. &reg mewakili karakter ®, kata kuncinya registered trademark 

6. &copy  mewakili karakter ©, kata kuncinya copyright

Anda dapat juga menampilkan karakter khusus yang lain sesuai dengan tabel standar

internasional untuk karaktar, ISO 8859-1. Format penulisannya sebagai berikut. 

 

     &#??? 

 

Kode ??? diganti bilangan desimal yang mewakili karakter yang akan dicetak. Sebagai 

contoh kita akan mencetak karakter © dapat kita pakai &#169 dan karakter £ dapat kita

tampilkan dengan &#163. Coba ganti bilangan dengan bilangan yang lain antara 32 sampai

255, dan lihat hasilnya.

 

2.5 Font 

Tag <FONT></FONT> digunakan untuk format huruf atau font (fonta). Dengan tag ini 

kita dapat mengatur besar kecilnya huruf, warna huruf, dan jenis huruf yang akan dicetak. 

Hasilnya:

Dari perbandingan dokumen sumber dan hasilnya dapat kita simpulkan bahwa tag font 

mempunyai atribut antara lain size, face, dan color. Jenis huruf dapat kita tentukan dengan

atribut face.

Penulisan ukuran huruf juga dapat dilakukan dengan dua cara, yaitu  dengan mencantumkan

ukuran huruf relatif terhadap ukuran standar (perhatikan tanda + yang bisa juga digantikan

dengan -) atau dengan menyebutkan ukuran mutlaknya. 

2.6 Menggunakan Warna 

Pemilihan warna pada sebuah halaman web menjadi penting. Website yang mempunyai 

warna yang enak dipandang akan membuat pengunjung ingin selalu datang,  biasanya

pemilihan warna disesuaikan dengan citra pemilik website atau audience yang dituju.

2.6.1 Font Color

Pemilihan warna pada sebuah halaman web menjadi penting. Website yang mempunyai

warna yang enak dipandang akan membuat pengunjung ingin selalu datang.  Biasanya

pemilihan warna disesuaikan dengan citra pemilik website atau audience yang dituju. 

 

Contoh kode-kode warna: 

Contoh isi file HTML:

Hasilnya :

2.6.2 Background

BACKGROUND atau background adalah tag untuk membuat warna latar belakang

sebuah teks.

Contoh Program: 

Hasilnya: 

2.7 Daftar Item 

Untuk memberikan penjelasan terstruktur dan pokok-pokok pikiran sering digunakan 

daftar singkat, misal seperti menu makanan dan daftar isi sebuah buku. Ada beberapa jenis

daftar, antara lain sebagai berikut. 

1. Ordered list (OL) 

: Daftar terurut 

2. Unordered list (UL) 

: Daftar tak terurut 

3. Definition LIST(DL)  : Daftar istilah 

 

2.7.1 Ordered List

Element yang diguanakan untuk mendefinisikan list item adalah <ol>, dengan nilai

atribut type yang dapat digunakan sebagai berikut.

 “A” untuk huruf besar atau kapital

 “a” untuk huruf kecil

 “I” untuk huruf besar romawi

 “i” untuk huruf kecil romawi

 “1” untuk bilangan yang merupakan simbol default.

Selain itu, pembuatan daftar item dengan jenis ini dapat ditentukan juga bilangan atau

abjad awal yang akan digunakan dengan menambahkan sebuah atribut start dengan nilai

berupa angka yang menunjukkan awal urutan simbol yang digunakan.

Contoh daftar item dengan ordered list dapat dilihat pada kode berikut: 

Hasilnya: 

2.7.2 Unordered List

Unordered list adalah daftar item yang tersusun tanpa urutan bilangan maupun abjad.

Penanda item yang digunakan adalah sebuah simbol yang dapat berupa lingkaran, kotak atau

bulatan hitam. Daftar item ini biasanya diistilahkan dengan buletted list. Untuk mendefinisikan

jenis list ini digunakan tag elemen <ul></ul>.

Contoh sebuah list item dapat dilihat pada kode berikut: 

Hasilnya: 

 

2.7.3 Definition List

Berbeda dengan daftar item sebelumnya, definition list adalah daftar item yang tidak

memiliki simbol untuk tiap item aggotanya. List ini biasanya digunakan untuk membuat daftar

penjelasan atau daftar definisi, bisa juga untuk membuat site map dan sebagainya.

Ada tiga elemen pokok untuk membangun sebuah definition list:

 <dl> </dl> elemen untuk mendeklarasikan definition list.

 <dt> </dt> elemen untuk mendefinisikan istilah.

 <dd> </dd> elemen untuk mendefinisikan penjelasan istilah yang dimaksud.

Contoh pembuatan definition list adalah sebagai berikut: 

Hasilnya:

2.7.4 Contoh Penggunaan Daftar Item

Berikut contoh penggunaan daftar item: 

Hasilnya :

2.8 Daftar Istilah 

Yang tidak boleh terlupa dari suatu dokumen adalah adanya daftar istilah (Definition 

Term), karena dengan daftar ini akan menjelaskan pada para pembaca kata-kata kunci yang

kita gunakan dalam dokumen yang kita buat.

Daftar istilah dimulai dengan tag <DL> dan diakhiri dengan </DL>. Setiap kata yang

akan kita berikan definisi diawali dengan tag <DT>, sedangkan definisinya sendiri dimulai

dengan tag <DD>.

 Contoh program :

Hasilnya:

2.9 Blockquote 

Dalam menulis suatu karya ilmiah kita sering mengutip dari daftar fujukan atau kata-

kata seseorang. Untuk membedakan dengan hasil karya kita atau kata-kata kita biasanya

kutipan seperti ini ditulis agak menjorok ke dalam dan diberi jarak baris kosong di antara

tulisan kita dan kutipan tersebut. Format dokument HTML menyediakan fasilitas untuk ini.  

Contoh Program: 

Hasilnya:

2.10 Preformated Text 

Preformated teks kita pakai jika kita ingin mencetak kalimat seperti mesin ketik. Browser 

tidak akan memformat semua yang ada di dalam tag preformated. Jadi di sini semua karakter

dianggap penting termasuk spasi dengan jumlah banyak. Ini berlawanan dengan perlakuan

browser dalam kondisi biasa, yang tidak akan mempedulikan jumlah whitespace (spasi, tab)

dan tetap akan dicetak sebagai satu karakter spasi saja.

Contoh program: 

Hasilnya:

2.11 Address 

Tag <ADDRESS> digunakan untuk memberi informasi mengenai penulis kita dapat 

menggunakan tag address. Kalimat yang dipakai dalam tag address tidak ditentukan dengan 

pasti, tapi yang perlu diperhatikan adalah kita harus menulis informasi ini sesuai dengan aturan

ilmiah tempat kita menulis. Misalnya jika kita menulis paper/jurnal berbeda dengan jika

menulis buku/laporan. Dari contoh yang diberikan dapat Anda lihat bahwa kita masih bisa

memakai tag-tag HTML yang lain dalam tag address ini.

Contoh Program: 

Hasilnya:

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat.

Pengenalan HTML

 PENGENALAN HTML 

Dasar Pemograman

 

1.1 Apa itu HTML? 

HyperText Markup Language (HTML) adalah bahasa (pemrograman web) berupa tag 

(tanda atau label) yang digunakan untuk membuat sebuah halaman web dan menampilkan

berbagai informasi di dalam browser web. Kata markup dapat diartikan sebagai tag (tanda atau

label) dalam dokumen teks yang menunjukkan hubungan dengan teks lain.

HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia

penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup

Language). HTML menjadi standar yang digunakan secara luas untuk menampilkan halaman

web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode atau tag yang menginstruksikan browser untuk menghasilkan

tampilan sesuai dengan yang diinginkan. Sebuah file HTML dapat dibuka dengan

menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer atau

browser web Chome/Chromium. HTML juga dapat dikenali oleh aplikasi pembuka email

ataupun dari PDA dan program lain yang memiliki kemampuan browser.

 

1.2 Aturan Dokumen HTML 

Sebuah halaman HTML pada prinsipnya terdiri dari empat konsep dasar, yaitu:

1) Elements

Seluruh halaman yang ditampilkan pada sebuah browser pada dasarnya dibangun dari

banyak elements (elemen) atau bagian-bagian kecil. Perhatikan contoh gambar halaman web

di bawah ini. 

Dari gambar tersebut, halaman yang ditampilkan berupa susunan dari teks dan gambar,

seperti dokumen pada umumnya. Namun untuk dapat menghasilkan tampilan halaman web,

dibutuhkan bagian-bagian atau elemen yang bekerja manampilkan isi sesuai keinginan.

Sebagai contoh, untuk dapat menampilkan teks dengan ukuran yang besar dibutuhkan sebuah

elemen <h1> teks </h1>. 

2) Penulisan Tags

HTML disusun dari tag-tag atau barisan tags. Tags dan elements dalam HTML sangat

berkaitan dan tak bisa dipisahkan, karena tags adalah penyusun dan penanda sebuah elemen

HTML.

Untuk sebuah elemen, diperlukan dua buah tags, yaitu tags untuk awalan atau pembuka

yang ditulis dengan simbol < dan tags penutup elemen yang ditulis dengan simbol >. Sedang

untuk akhir sebuah blok elemen diakhiri dengan tanda / di depan kode elemen tersebut.

3) Atribut dan Nilai

Atribut adalah hal penting lainnya dalam HTML. Atribut ini digunakan untuk

mendefinisikan karakteristik suatu elemen. Contoh penggunaan atribut adalah untuk

menentukan tinggi sebuah gambar, ukuran dan jenis huruf yang digunakan, warna untuk latar

belakang halaman dan masih banyak lagi. Sedangkan nilai adalah isi dari atribut itu sendiri.

Penulisan nilai atribut dalam HTML dapat berupa apa saja, bisa berupa sebuah bilangan,

kata atau kombinasi keduanya berupa alamat situs atau sebuah path, tergantung jenis atribut

yang akan digunakan atau yang dikenali oleh elemen itu sendiri. Untuk penulisan sebuah nilai

atribut dalam HTML ditulis di dalam tanda “ “.

Berikut ini contoh baris atribut untuk membuat teks memiliki ukuran 11. 

<font size="11">...</font> 

Penulisan bilangan untuk atribut yang berhubungan dengan tinggi dan lebar suatu

elemen memiliki pengertian satuan dalam pixel. Bila bilangan tersebut diikuti dengan tanda

persen (%) maka dimensi yang dihasilkan memiliki ukuran relatif terhadap ukuran layar

monitor. 

4) Pengelompokan

Pengelompokan atau nesting berarti bahwa penulisan tags sebuah elemen dengan elemen

lainnya tidak boleh tercerai berai, dengan kata lain harus tersusun urut sesuai dengan posisi

elemen tersebut.

Misalkan sebuah halaman web terdiri elemen A, B dan C. Element C adalah isi elemen

B, dan elemen B adalah bagian dari A, maka penulisan tags untuk elements tersebut adalah

sebagai berikut: 

<A> <B> <C> </C> </B> </A> 

Atau 

<A>

  <B>

    <C>

    </C>

  </B>

</A> 

Penulisan tags yang tidak beraturan susunannya akan menyebabkan ketidakberaturan 

hasil halaman web yang ditampilkan. 

1.3 Struktur HTML 

Struktur pembentuk sebuah halaman HTML sederhana terdiri dari beberapa bagian 

berikut:

    Bagian informasi, yang berisi versi HTML dan jenis dokumen yang digunakan

    Bagian head, berisi elemen-elemen untuk head.

    Bagian body, inti dari isi halaman yang akan ditampilkan.

    Bagian komentar, bagian yang tidak akan ditampilkan pada browser.

Berikut contoh struktur dokumen HTML: 

 

 

1.4 Header Dokumen 

 Baris judul atau title dimasukkan dalam header dokumen html. Berikut ini contoh tag 

HTML untuk menampilkan judul "JUDUL HOMEPAGE ANDA" pada sebuah halaman web.

Untuk latihan, ikuti beberapa langkah berikut:  

    Buatlah dokumen berupa file teks yang isinya seperti tampilan di atas, misal dengan

nama file utama.html dan disimpan pada folder atau directori komputer Anda.  

    Setelah itu buka dokumen utama.html dengan browser favorit Anda. 

    Cara melihat hasilnya, pada program borwser web klik  File -> Open File. Kalau sudah

dibuka sebelumnya, coba tekan tombol Ctrl+Shift+R atau klik tombol reload. Fungsi

dari kombinasi tombol ini adalah membersihkan memory dari dokumen lama dan

memuat dokumen yang baru. 

   

    Seharusnya Anda melihat adanya perubahan pada baris header browser Anda seperti

gambar berikut ini. 

Teks yang dituliskan di antara tag <title> dan </title> akan ditampilkan di baris header 

browser. Text ini juga akan ditampilkan di bookmark jika halaman homepage kita  dimasukkan

ke bookmark oleh pengunjung.

Di sini yang dipakai sebagai contoh adalah komputer milik penulis dengan nama folder

D:/peTIK/Pemrograman Web Dasar/. Sesuaikan dengan nama folder di komputer Anda.

Perhatikan cara penulisan URL-nya. Jika kita tidak menyebutkan nama filenya maka

defaultnya adalah file dengan nama index.html atau index.htm. 

1.5 Body atau Isi Dokumen 

Teks atau gambar yang dimunculkan pada halaman web adalah yang terletak dalam atau 

di antara tag <body> ... </body>.

 

Berikut ini output yang dihasilkan pada browser web: 

1.6 Komentar 

Komentar (comments) adalah bagian yang bersifat opsional atau pilihan, sehingga 

keberadaannya boleh ditulis, boleh tidak ditulis. Komentar digunakan untuk menjelaskan atau

menandai suatu bagian halaman web yang diperuntukkan si pembuat web. Oleh karena itu

komentar tidak akan ditampilkan dalam halaman web.

Penulisan komentar ditandai dengan tags <!-- dan diakhiri dengan tag -->. Contoh dari

penulisan komentar adalah sebagai berikut: 

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat.