Materi html ke 3

MATERI HTML KE 3

DAFTAR ITEM (BULLET AND NUMBERING)

• Untuk membuat daftar item tak berurut(SIMBOL) kita gunakan tag <UL> / UnorderedList sedang untuk membuat daftar itemberurut digunakan tag <OL>/ Ordered List.

• Adapun setiap item ditandai dengan tag <LI>/ List Item.

• <OL> dan <UL> biasanya sepasang </OL> dan</UL> Begitu juga dengan <LI> juga melikipasangan </LI>

<HTML>

<BODY>

NAMA BUAH-BUAHAN :

<ul>

<li>Rambutan</li>

<li>Mangga</li>

<li>Apel</li>

</ul>

</body>

</html>

CONTOH MENGGUNAKAN <UL>

CONTOH MENGGUNAKAN <OL>

Nama Mata Pelajaran

<ol>

<li>TIK</li>

<li>Mulok</li>

<li>Agama</li>

</ol>

Atribut TYPE dalam tag <UL>

• Rumusnya: <UL TYPE="jenis bullet">

• Dimana nama bullet ada tiga macam:

– disc untuk bulatan hitam,

– circle untuk lingkaran,

– square untuk kotam hitam

Atribut TYPE dalam tag <OL>

• Rumusnya: <OL TYPE="jenis angka">

• Dimana jenis Angkanya ada lima macam yaitu: 1, A, a, I, atau i tergantung selera kita

List Bertingkat

• Untuk membuat daftar item bertingkat tidakada penambahan tag atau atribut apa-apa. Yang dilakukan hanyalah menempatkan tag-tag daftar item tingkat bawah di dalam daftaritem tingkat di atasnya.

• Untuk jelasnya beginilah source kodenya:

<HTML><BODY>NAMA BUAH-BUAHAN :<ul><li>Rambutan</li><li>Mangga</li><li>Apel</li>

<ul type="circle"><li>Merah</li><li>Hijau</li></ul>

</ul></body></html>

MENYISIPKAN GAMBAR (IMAGE)

• Untuk menyisipkan gambar ke dalamsebuah halaman HTML, mula-mula kitaharus menyediakan terlebih dahulufile gambar yang dibutuhkan.

• File gambar ini biasanya berekstensiGIF, JPG atau BMP.

• Bila file gambar itu telah tersedia, dankita mengetahui nama dan letak(lokasi) file gambar itu, barulah kitabisa menyisipkannya ke dalamhalaman web

• Tag yang digunakan untukmemasukkan gambar adalah tag <IMGSRC="file_gambar">

Langkah-langkah memasukkan gambarke HTML :

• Cari Gambar di Komputer atau file foto yang kitamasukkan dari HP, Kamera digital atau melalu scannerdll

• Copykan gambar tersebut ke dalam folder (1 folderdengan file HTML)

• Rubah nama file gambar tersebut jika terlalu rumitatau panjang

• Masukkan Perintahnya yaitu <IMG SRC =“nama filegambar”>

• Contoh : <IMG SRC="email.gif"> atau <IMGSRC="email.jpg"> atau <IMG SRC="email.bmp">

• Mudah bukan…?

ATRIBUT-ATRIBUT GAMBAR

• Setelah kita mengetahui cara menyisipkangambar, sekarang kita akan mempelajariatribut apa saja yang bisa disertakan dalamtag <IMG SRC> untuk menghasilkan sejumlahefek tertentu.

• Atribut pertama yang bisa kita tambahkan kedalam tag gambar adalah BORDER.

• Sesuai dengan namanya, atribut ini digunakanuntuk memberi efek bingkai pada gambar

• Contoh : <IMG SRC="menu.jpg" BORDER="3">

• Atribut berikutnya adalah atribut ukuran gambaryaitu WIDTH (lebar) dan HEIGHT (tinggi).

• Tanpa menggunakan atribut ini, browser akanmenampilkan gambar sesuai dengan ukuran aslidari file gambar yang bersangkutan.

• Kita bisa mengatur ukuran tampilan gambardalam browser lebih kecil ataupun lebih besardari ukuran aslinya dengan menggunakan atributWIDTH dan HEIGHT tersebut.

• Contoh :

• <IMG SRC="menu.jpg" WIDTH=165 HEIGHT=47>

• Atribut selanjutnya yang bisa anda sisipkan adalahatribut ALT.

• Dengan atribut ini kita bisa menyiapkan teks penggantigambar bila suatu waktu gambar - karena satu dan lainhal - tidak bisa ditampilkan. Misalnya usermenggunakan browser versi lama (yang belum bisamenampilkan gambar). Dengan adanya atribut ALT ini,tampilan gambar dapat digantikan dengan teks yangkita masukkan di dalamnya

• Ini hanya bisa di lihat efeknya pada Internet Explorerpada mozilla tidak akan nampak efeknya

• Contoh : <IMG SRC="menu.jpg" ALT=“Ini Foto Saya">

MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND

• Pada pelajaran-pelajaran yang terdahulu, kita sudahmempelajari cara menggunakan warna sebagai latar belakanghalaman web.

• Sekarang kita akan mempelajari cara menggunakan gambarsebagai latar belakang.

• Untuk warna, kita menggunakan atribut BGCOLOR="warna",

• Sedangkan untuk gambar, kita menggunakan atributBACKGROUND="file_gambar". Kedua atribut ini disisipkandalam tag BODY.

• Sangat mudah, bukan? Misalnya kita ingin memanfaatkangambar menu.jpg tadi sebagai latarbelakang halaman webmaka cukup dengan menyisipkan atribut tersebut ke dalam tagBODY

Perlu diketahui bahwa penentuan warna padaHTML bisa dengan nama warna (dalam bahasaInggris) dan bisa pula dengan kode warna.Kode warna ditulis dalam format heksa.Berikut ini adalah 16 nama warna beserta kodenyadalam format heksa (harap diingat bahwa tulisan 0adalah angka nol, bukan huruf O).

black #000000 blue #0000FF olive #808000 white #FFFFFF fuchsia #FF00FF green #008000 red #FF0000 gray #808080 teal #008080 yellow #FFFF00 silver #C0C0C0 navy #000080 lime #00FF00 maroon #800000 purple #800080 aqua #00FFFF

Materi html ke 3

Documents

Transcript of Materi html ke 3