KURSUS ONLINE JASA WEBMASTERS

Ukuran: px

Mulai penontonan dengan halaman:

Download "KURSUS ONLINE JASA WEBMASTERS"

Handoko Hadi Kusumo
7 tahun lalu
Tontonan:

1 KURSUS ONLINE JASA WEBMASTERS HTML Tables, Frame, Image JASA WEBMASTERS Jl. Ringin Raya No 124A Condong Catur, Sleman, Yogyakarta

2 Tebel 6.1 Tabel Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag <table> dan penutup tag </table>. Tag <table> memiliki beberapa bagian penting, yaitu : <caption>...</caption> digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar tabel, bisa dibagian atas, atau di bagian bawah. <th>...</th> digunakan untuk membuat judul paling atas atau paling kiri tabel. Tabel header akan di cetak dalam bentuk tebal. <tr>...</tr> dipakai untuk membentuk baris pada suatu tabel. <td>...</td> digunakan sebagai tempat menulis data atau informasi dalam tabel.

Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel.

3 Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border= 1, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

4 FRAME 7.1 Penggunaan Frame Frame digunakan untuk membagi jendela browser menjadi beberapa bagian, dan masing masing bagian terdiri dari dokumen HTML tersendiri. Untuk membuat halaman web yang menggunakan frame kita perlu membuat beberapa file html, yaitu: Sebuah pendefinisi file. File tersebut kita butuhkan untuk menampilkan halaman web dengan bentuk frame Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan kita buat pada frame tersebut Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag <BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut: Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag <FRAMESET></FRAMESET>. Atribut-atribut yang dapat menyertai tag ini adalah: BORDER, untuk menentukan tebal garis pemisah antar frame ROWS, untuk menentukan berapa baris bagian yang akan dibentuk COLS, untuk menentukan berapa kolom yang akan dibentuk

5 Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai tag ini adalah: NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk menampilkan suatu halaman. SRC, menunjukkan file yang mengisi frame tersebut. SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO". Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah mempunyai file yang akan digunakan untuk mengisi frame tersebut. 7.2 Cara Membuat Frame Seperti yang telah di jelaskan diatas saatny kita mencoba membuat frame HTML. Pertama, kita perlu membuat file pengisi frame sebanyak 3 buah 1. Buatlah file html, simpan dengan nama judul.html 2. Selanjutnya, buatlah file simpan dengan nama menu.html

6 3. Dan yang ketiga buatlah file html, dan simpan dengan nama welcome.html 4. Yang terakhir adalah kita membuat file pendefinisi frame, simpan dengan nama index.html Dan hasilnya seperi berikut ini :

7 Images 8.1 Tag Image Sebuah website akan lebih baik dengan menambahkan gambar. Menambahkan gambar pada sebuah file HTML menggunakan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>. Didalam tag <img> terdapat atribut src. Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. Pada kesempatan kali ini, kita akan menambahkan file gambar kedalam file HTML. Pertama siapkan gambar yang akan kita gunakan ebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF. Pada contoh dibawah ini saya menggunakan sebuah gambar belajar.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai gambar.html

8 8.2 Atribut Alt pada tag <img> Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar. Contoh sebagai berikut <img alt="belajar" src="belajar.jpg"/> 8.3 Atribut width dan height dalam tag <img> Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height. Kita dapat menyesuaikan height dan width sesuai dengan keinginan. Sebagai contoh : <img alt="belajar" src="belajar.jpg " height="200" width="100" />

dokumen-dokumen yang mirip

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT. Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Layout 1. Tabel 2. Frame TABLE Digunakan untuk membuat tabel (kolom dan baris) Diperbolehkan membuat tabel di dalam tabel (nested