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 . Pada file pendefinisi frame kita tidak lagi memerlukan tag , sehingga struktur dasar pendefinisi frame adalah sebagai berikut:
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.
Dalam tutorial ini saya akan menjelaskan cara membuat foto anda menjadi gambar kartun dengan menggunakan photoshop. Disini saya memakai Adobe Photoshop CS3, tapi saya rasa para pengunjung semua bisa memakai photoshop versi lainnya. Untuk membuat foto menjadi kartun dengan photoshop bisa dikerjakan dengan beragam teknik, salah satunya adalah tekniksaya berikut ini :D
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".
24. setelah itu warnai, dengan ukuran brush 45, dan buatlah hardness nya dengan nilai 0 (nol).
25. lalu warnai sebagian wajah dengan warna yang lebih gelap dari wajahmu.
26. kira kira setelah selesai, gambarnya seperti ini.
27. setelah itu selesai, klik kanan pada layer bayang, lalu pilih "create clipping mask".
28. dan gambarnya akan terlihat seperti ini.
29. lalu buatlah opacity-nya dari 100% menjadi 41%.
30. dan gambarnya terlihat seperti ini. eng ing ennggg... :D
31. untuk buat bayang di bagian baju, juga bisa di buat dengan cara yang sama seperti membuat bayang di wajah.
32. terima kasih , sudah mengunjungi blog ini , :)
Membuat Desain Website
Berbasis HTML Dengan Notepad++
Pengenalan
Tag Pada HTML
Dalam
HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan
yang kita inginkan. Tag pada HTML selalu diawali dengan dan
ditutup dengan
dimana
x adalah perintah dari apa yang kita inginkan.
·Daftar
Tag Pada HTML
ELEMEN
DASAR
Jenis
Dokumen
(terdapat pada
awal dan akhir dari file HTML)
Judul
(harus selalu
terdapat pada mukadimah)
Mukadimah
(Header)
(keterangan
umum, seperti judul dsb.)
Batang
Tubuh
(isi dari
halaman HTML)
FORMAT
TAMPILAN
Huruf
Tebal
(Bold)
Huruf
Miring
(Italic)
Garis
Bawah
(Underline -
jarang digunakan)
Rata
Tengah
(Center -
berlaku untuk teks maupun gambar)
Huruf
Kedip
(Blinking - tag
terlucu sampai kini)
Ukuran
Huruf
(Font Size -
boleh diisi dari 1 sampai 7)
Warna
Huruf
Pilih Jenis
Huruf
PEMISAH
Paragraf
(tag penutup
seringkali tak diperlukan)
Align
Text
Pndah
Baris
(pindah ke baris
berikut)
Garis
Datar
(Horizontal
Rule)
Penataan Letak
Garis
Tebal
Garis
(dalam satuan
pixel)
Lebar
Garis
(dalam satuan
pixel)
Lebar Garis
Persentasi
(dalam
persentasi terhadap lebar halaman)
LATAR BELAKANG
DAN WARNA
Latar Belakang
Gambar
(Tiled
Background)
Warna Latar
Belakang
(Background
Color - urutan: merah/hijau/biru)
Warna Huruf
Teks
TABEL
Rancangan
Tabel
Garis Batas
Tabel
Lebar
Tabel
(dalam satuan
pixel)
Lebar Tabel
Persentasi
(dalam satuan
persen terhadap lebar halaman)
Baris dalam
Tabel
Penataan Letak
Baris
VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam
Tabel
(harus ada dalam
setiap baris tabel)
Penataan Letak
Sel
VALIGN=TOP|BOTTOM|MIDDLE>
Kepala
Tabel
(Table Header -
seperti data dengan Bold dan Center)
Penataan Letak
Kepala Tabel
VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala
Tabel
A.Dasar dasar
HTML
1.Membuat judul
tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code
dibawah ini:
My First
HTML Project
BGCOLOR=“Green”
TEXT=“Red”>
WELCOME TO MY
WEBSITE
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:
Gambar
1. Judul Tab Halaman
2.Mengatur
paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
Tag P, Br dan
Hr
Ini adalah
paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
Ini adalah
paragraf kerdua, yang berisi garis horizontal
Ini adalah garis
horizontal.
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:
Gambar
2. Mengatur Paragraf
3.Mengatur
ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:
Tag Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:
Gambar
3. Ukuran Huruf
4.Mengatur format
texs, Buka notepad++, kemudian ketikan code dibawah ini:
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
Gambar
7 link halaman web lain
2.Membuat
hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy
saja code dibawah ini:
Judul tab
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:
Gambar
8. Link Antar Bagian Dalam Web
C.Membuat Website
Sederhana
1.Membuat halaman
login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah
ini:
login
web
Silahkan mengisi data yang
ada di bawah untuk masuk ke website saya :)
Pria
Wanita
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.
Hasilnya seperti
pada gambar 9 berikut:
Gambar
9. Halaman login
2.Membuat
halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah
ini:
Home
~Dasar-dasar Membuat Website Berbasis
HTML~
Nah, anda pasti sudah banyak melihat
tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1
kekurangan, tutorial HTML untuk tingkat pemula???
Nggak ada
kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana
website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk
pemula. Tapi sebelum itu,? ada yang perlu diketahui.
tag
<>
digunakan
untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag
container adalah tag yang berisi text yang akan ditampilkan
setelah
tag ditutup. Contoh: <td> text yang ditampilkan
</td>.
Tag
biasa, yahh…tag aja, contoh <BR> (break).
<br> kaga perlu ditutup oleh tag </br>, tapi jika
sintak yang digunakan tag container, contoh: <h1>, yah mesti
ditutup dengan </h1>.
Tag yang
digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya,
contohnya: <td> </td>
Kita juga
dapat mengetik attribut di dalam sebuah tag, contoh: <body
bgcolor=”red”> </body>. atau
<input type=”text”>.
LANGKAH
1
MEMBUKA
NOTEPAD.
LANGKAH
2
MENGETIKKAN
SINTAK/SYNTAX.
Berikut
ini adalah syntax dasar yang membentuk suatu HTML.
pertama,
ketikkan <html>
tekan
enter, kemudian ketik <head> Dalam container
head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa
mengetikan sintak <title> judul halaman web
</title>. Untuk sintak lain nanti saja. Sekarang
ketikkan sintak title tadi, jadi seperti ini: <head>
<title> judul halaman web </title>
</head>
Kemudian
ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman
web, tampilan web yang kita lihat itu berasal dari <body>. Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html> <head> <title> Judul Halaman Web
</title>
</head>
<body>
</body> ?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan
sembarang text ke dalam tag body, contohnya seperti ini : <body> Contoh text yang ditampilin di halaman web,
By: Rian Hidayat </body> terus, jika sudah,
ketikkan </html>, script lengkapnya seperti ini : <html> <head>
<title>
Judul Halaman Web </title>
</head> <body> Contoh text yang ditampilkan di halaman
web, By: Rian Hidayat
</body>
</html>
kalo
udah, sekarang save dengan nama dasarHTML.
kalo udah
disave, buka data yang tadi di save. ? Pada bagian ini,
kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape
diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad.
tau kenapa??? Karena ketika men-save, file tersebut di save dalem
bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika
mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As
Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis
nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan
anda juga dapat menganti background dan animasi yang sesuai dengan
anda.
Hasilnya
akan seperti pada gambar 10 berikut:
Gambar
10. Halaman awal
3.Membuat data
pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code
dibawah ini:
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan
anda juga dapat menganti background dan animasi yang sesuai dengan
anda.
Hasilnya akan
seperti pada gambar 11 berikut:
Gambar
11. Membuat data pribadi
4.Membuat album
galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah
ini:
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan
anda juga dapat menganti background dan animasi yang sesuai dengan
anda.
Hasilnya akan
seperti pada gambar 12 berikut:
Gambar
12. Galery
5.Membuat artikel
html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan
atau copy saja code dibawah ini:
Cara
membuat tulisan bergerak
Tutorial Membuat Tulisan Menjadi
Bergerak
Marquee tag digunakan untuk menggerakkan sama ada perkataan
ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk
menggunakan Marquee tag ini untuk menggerakkan tulisan anda.
Teks Bergerak Ke
Bawah...
Teks Bergerak Ke
Atas...
1.
Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda
boleh gunakan kode dibawah ini untuk melakukan tricks
tersebut.
<marquee
direction="
right">This text scrolls
right...</marquee>
Apa yang anda perlukan, gantikan teks yang bewarna
kuning kepada
arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right,
left.
2. Anda boleh mengubah
kelajuan teks dengan menggunakan kod di bawah ni.
<marquee
scrollamount="30">Teks ni
Macam Ferari..</marquee>
Ubah nomer yang bewarna
Oren untuk
mengubah kelajuan.
<marquee
scrolldelay="300">Teks ini seperti
Siput..</marquee>
3. Ubah nomer yang bewarna
hijau untuk
mengubah kelajuan.
Untuk membuatkan teks anda melantun seperti di
atas ini. Gunakan kode di bawah.
<marquee
behavior="alternate">Teks
ini Melantun</marquee>
4. Ok.
Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak
<marquee width="200">Teks ini
bergerak dalam kelebaran 200
width</marquee>
Anda boleh tentukan width mengikut kesukaan anda dengan
menukarkan nomer yang bewarna hijau.
5. Seterusnya saya akan menggabungkan
beberapa kode Marquee ini bersama.
Ini merupakan kode yang saya gunakan untuk membuat teks
bergerak seperti yang di atas.
<marquee behavior="alternate" width="400"
scrollamount="30">Teks
Paling Awesome</marquee>
Sekarang, anda boleh coba dalam blog anda, anda juga boleh
gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan
anda juga dapat menganti background dan animasi yang sesuai dengan
anda.
