TECHNOLOGI INFORMATIKA: April 2016

Cara Membuat Frame HTML - Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.

Cara Membuat Frame HTML

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

Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya bentuk frame pada contoh berikut:

Frame A1 - Cara Membuat Frame HTML

Frame A2 - Cara Membuat Frame HTML

Frame B1 - Cara Membuat Frame HTML

Frame B2 - Cara Membuat Frame HTML

Cara Membuat Frame HTML

Untuk membuat frame seperti Frame A2, sebuah halaman kita bagi menjadi dua bagian terlebih dahulu secara horizontal seperti Frame A1, kemudian dibagi lagi hingga seperti Frame A2. Demikian pula untuk membuat Frame B2 harus melalui bentuk Frame B1. Urutan ini akan sangat memengaruhi bentuk frame yang akan kita bangun.

Tag untuk membuat frame diawali dengan menggunakan dan diakhiri dengan . Pada file pendefinisi frame kita tidak lagi memerlukan tag , sehingga struktur dasar pendefinisi frame adalah sebagai berikut:






--- bagian frame ---

Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag . 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

Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag . 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.

Cara Membuat Frame HTML

Sekarang, kita akan membuat halaman web yang memiliki frame dengan tiga bagian (seperti gambar FRAME A2). Pertama, kita perlu membuat file pengisi frame sebanyak 3 buah.

Buatlah file HTML berikut, simpan dengan nama logo.html
```
Cara Membuat WEB
```
Selanjutnya, buatlah file yang kedua, simpan dengan nama menu.html
```
Latihan
Mencoba latihan membuat Frame HTML
```

Buatlah file yang ketiga, simpan dengan nama welcome.html







Selamat Datang

Anda berada pada halaman latihan Membuat FRAME HTML

Yang terakhir adalah kita membuat file pendefinisi frame, simpan dengan nama index.html
```
 
```

Cara Membuat Frame HTML

Gambar di atas merupakan hasil dari kode-kode yang tertera di atas. Semoga artikel cara membuat frame HTML dapat bermanfaat.

1. Buka Photoshop (saya memakai Photoshop CS3)

2. Klik File > Open , untuk membuka foto yang ingin anda edit menjadi kartun.

3. Selanjutnya, klik CTRL+SHIFT+N untuk membuat layer baru. Buat Name dengan nama "awal" , lalu klik OK

4. ( MASIH AKTIF DI LAYER "awal" ) lalu pilih "pen tool" yang ada di sebelah kiri layar anda, atau tekan tombol 'P'

5. Lalu, gunakan pen tool itu untuk membuat garis-garis di bagian dari foto yang akan anda buat menjadi kartun, usahakan membuatnya harus rapi, jangan sampai mengenai tubuh dirimu itu.

6. Kemudian, Klik kanan > Stroke path.. > pilih Brush (disini saya memakai Ukuran Brush 5) > OK

7. setelah itu, Aktifkan layer di "background" , kemudian Klik CTRL+SHIFT+N , buat Name dengan nama "white", lalu OK

8. Kemudian, klik Edit > Fill

9. Ubah 'Use' menjadi 'White' lalu OK

10. Naaahhhh...!! Setelah di klik OK, seperti ini lah tampilan editan kita :v

Eeeiittssss......!!! masih panjang perjalanan kita nihh, kalau capek bobo' aja dulu sana :D

WAAAKAKAKAKAKAKAKAK...!!!

11. Kembali ke layers, matikan layer dengan nama "white", lalu aktifkan layer dengan nama "awal"

12. lalu buatlah garis-garis dengan menggunakan "pen tool" dibagian muka, badan, dan lain lain (kecuali rambut), sesuai yang kamu inginkan.
(kalau disini saya menggunakan brush dengan ukuran 3).

13. Setelah selesai, kira-kira seperti inilah .

14. naaahhh..., untuk membuat rambutnya, sebernarnya tidak jauh beda dengan membuat garis-garis pakai "pen tool", yang menjadi perbedaan adalah teknik pewarnaan rambut tersebut. yaitu caranya sama dengan menggunakan "pen tool" diseluruh bagian rambut. (aktifkan layer "awal"), kira kira bentuknya seperti yang dibawah ini.

15. Setelah itu, Klik Kanan > Fill Path.., Pilih Use dengan pilihan "black". lalu klik OK dan klik kanan > Delete path.. (lakukan juga untuk mata dan alis mata)

16. kamu aktifkan layer dengan nama "white" , dan kira kira hasilnya seperti ini.

17. lalu buat layer baru dengan nama "wajah", dan ubah "normal" menjadi "multiply"

18. lalu warnai bagian wajah dan kulit kulit yang terlihat lainnya, sesuai yang terlihat di fotomu.

19. setelah selesai, kira kira hasilnya seperti ini.

19. kemudia buat lagi layer baru dengan nama "baju", untuk mewarnai bajumu, dan ubah "normal" menjadi "multiply"(lakukan selalu pengubahan selama mewarnai)

20. lakukan juga cara yang sama untuk mewarnai yang lainnya, seperti bibir, dasi, dan lain lain sesuai yang ada di fotomu.

21. setelah selesai mewarnai, kira kira hasilnya seperti ini.

22. sekarang untuk memperbagus fotomu, kita akan membuat foto editan terlihat menarik.

23. aktifkan ke layer "wajah", buatlah layer baru dengan nama "bayang".