Materi html ke 3
Download as PPTX, PDF1 like289 views
Dokumen ini menjelaskan cara membuat daftar item dengan HTML menggunakan tag <ul> untuk daftar tak berurut dan <ol> untuk daftar berurut, dengan contoh sederhana. Selain itu, dokumen ini memberikan panduan tentang menyisipkan gambar ke dalam HTML menggunakan tag <img> dan atribut-atribut yang berkaitan, serta cara menggunakan gambar sebagai latar belakang halaman web. Terdapat juga penjelasan mengenai atribut warna dalam format heksa.
Materi html ke 3
- 1. MATERI HTML KE 3
- 2. DAFTAR ITEM (BULLET AND NUMBERING) • Untuk membuat daftar item tak berurut (SIMBOL) kita gunakan tag <UL> / Unordered List sedang untuk membuat daftar item berurut 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 meliki pasangan </LI>
- 3. CONTOH MENGGUNAKAN <UL> <HTML> <BODY> NAMA BUAH-BUAHAN : <ul> <li>Rambutan</li> <li>Mangga</li> <li>Apel</li> </ul> </body> </html>
- 4. CONTOH MENGGUNAKAN <OL> Nama Mata Pelajaran <ol> <li>TIK</li> <li>Mulok</li> <li>Agama</li> </ol>
- 5. 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
- 6. 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
- 7. List Bertingkat • Untuk membuat daftar item bertingkat tidak ada penambahan tag atau atribut apa-apa. Yang dilakukan hanyalah menempatkan tag-tag daftar item tingkat bawah di dalam daftar item tingkat di atasnya. • Untuk jelasnya beginilah source kodenya:
- 8. <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>
- 9. MENYISIPKAN GAMBAR (IMAGE) • Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita harus menyediakan terlebih dahulu file gambar yang dibutuhkan. • File gambar ini biasanya berekstensi GIF, JPG atau BMP. • Bila file gambar itu telah tersedia, dan kita mengetahui nama dan letak (lokasi) file gambar itu, barulah kita bisa menyisipkannya ke dalam halaman web • Tag yang digunakan untuk memasukkan gambar adalah tag <IMG SRC="file_gambar">
- 10. Langkah-langkah memasukkan gambar ke HTML : • Cari Gambar di Komputer atau file foto yang kita masukkan dari HP, Kamera digital atau melalu scanner dll • Copykan gambar tersebut ke dalam folder (1 folder dengan file HTML) • Rubah nama file gambar tersebut jika terlalu rumit atau panjang • Masukkan Perintahnya yaitu <IMG SRC =“nama file gambar”> • Contoh : <IMG SRC="email.gif"> atau <IMG SRC="email.jpg"> atau <IMG SRC="email.bmp"> • Mudah bukan…?
- 11. ATRIBUT-ATRIBUT GAMBAR • Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa disertakan dalam tag <IMG SRC> untuk menghasilkan sejumlah efek tertentu. • Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. • Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar • Contoh : <IMG SRC="menu.jpg" BORDER="3">
- 12. • Atribut berikutnya adalah atribut ukuran gambar yaitu WIDTH (lebar) dan HEIGHT (tinggi). • Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari file gambar yang bersangkutan. • Kita bisa mengatur ukuran tampilan gambar dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut. • Contoh : • <IMG SRC="menu.jpg" WIDTH=165 HEIGHT=47>
- 13. • Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT. • Dengan atribut ini kita bisa menyiapkan teks pengganti gambar bila suatu waktu gambar - karena satu dan lain hal - tidak bisa ditampilkan. Misalnya user menggunakan browser versi lama (yang belum bisa menampilkan gambar). Dengan adanya atribut ALT ini, tampilan gambar dapat digantikan dengan teks yang kita masukkan di dalamnya • Ini hanya bisa di lihat efeknya pada Internet Explorer pada mozilla tidak akan nampak efeknya • Contoh : <IMG SRC="menu.jpg" ALT=“Ini Foto Saya">
- 14. MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND • Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara menggunakan warna sebagai latar belakang halaman web. • Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang. • Untuk warna, kita menggunakan atribut BGCOLOR="warna", • Sedangkan untuk gambar, kita menggunakan atribut BACKGROUND="file_gambar". Kedua atribut ini disisipkan dalam tag BODY. • Sangat mudah, bukan? Misalnya kita ingin memanfaatkan gambar menu.jpg tadi sebagai latarbelakang halaman web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY
- 15. Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah 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