Farhan Perdana
|
|
|
- Sukarno Atmadja
- 9 tahun lalu
- Tontonan:
Transkripsi
1 Galeri Foto Advanced dengan HTML Farhan Perdana Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com. Mungkin sekarang sudah banyak web server yang menyediakan Galeri Foto, atau yang lebih dikenal dengan Photo Gallery untuk web yang anda buat, baik dalam format php, asp, maupun Flash dan Java, misalnya atau bahkan mungkin terdapat pada CMS yang bisa diinstall melalui Fantastico. Nah Kali ini kita akan mencoba belajar membuatnya sendiri, bukan berupa Galeri dimana saat seseorang mengklik thumbnail dari sebuah gambar, halamannya tergantikan, ataupun jika seseorang mengklik thumbnail, akan muncul pop-up berisi gambar dalam skala besar, tetapi sebuah galeri, dimana user bebas mengklik thumbnail, bebas memilih thumbnail yang ditampilkan, dan tidak akan muncul pop-up sama sekali (kecuali anda hosting di tempat yang bayak pop-upnya), serta tanpa perlu ganti halaman. Nah, kita akan membuatnya tanpa menggunakan php, java, asp, Flash, ataupun dukun. Cukup dengan pengetahuan standar bahasa basisnya web, yaitu HTML, dan tampilan akhirnya, yaitu GUInya, terserah anda, se-kreatif-kreatifnya. Kemudian, sekarang alat-alat yang diperlukan adalah : - Program pengedit gambar (mis. Photoshop) untuk merubah besar kecilnya gambar - Microsoft Frontpage (kalau tidak ada bisa diganti notepad, tapi disarankan, agar lebih nyaman). - Pengetahuan dasar HTML - Kreatifitas (tambahan) untuk mempercantik dan memoles penampilan setelah jadi. 1
2 Pertama-tama, kita perlu membayangkan seperti apa bentuk dari Galeri ini sendiri. Yang akan kita buat adalah sebuah galleri yang memiliki thumbnail di samping kanan, list atau daftar dari album gambar pada bagian atas, dan ditengahnya adalah tempat foto ditampilkan dalam ukuran besar. Jadi cara kerjanya begini : Seseorang bisa memilih dari daftar album, kumpulan gambar manakah yang ingin dilihat. Jika sudah dipilih, misalkan Album 1, thumbnail akan berubah sesuai dengan gambar yang terdapat pada Album 1. Jika thumbnail itu di klik, maka pada bagian Gambar Besar, akan ditampilkan Versi Besar dari thumbnail yang di klik. Nah Sekarang, kita perlu membuat sebua table mengikuti pola diatas, yaitu 1 bua tabel memanjang pada bagian atas, dengan 2 buah tabel beda ukuran dibawahnya, satu besar, satu kecil. Jika menggunakan Frontpage, kira-kira seperti ini : Cara membuatnya adalah dengan membuat tabel 3x2 (3 kolom 2 baris), hilangkan bordernya dengan klik kanan pada tabel yang dibuat kemudian pilih table properties. Setelah itu semua kolom pada baris pertama kita gabungkan dengan perintah Merge Cells pada klik kanan setelah di blok terlebih dahulu. Berikutnya, 2 kolom sebelah kiri pada baris kedua kita satukan pula 2
3 dengan Merge Cells. Kode HTMLnya sendiri adalah : <html> <head> </head> <body> <table border="0" cellspacing="0" width="100%" id="autonumber1" style="border-collapse: collapse" cellpadding="0"> <td width="100%" colspan="2"> </td> <td width="66%"> </td> <td width="34%"> </td> </table> </body> </html> ( tidak usah diperhatikan. Itu hanyalah bahasa html untuk menunjukkan spasi bagi anda yang kurang memahami. Anggaplah sebagai tanda tempat kita memasukkan kode yang berikutnya) Nah. Sekarang yang kita perlukan adalah membuat Inline Frame pada Sel-sel dari tabel tersebut yang akan digunakan untuk menampilkan Gambar Besar dan Thumbnail (Sel-sel pada kolom 2) Pada frontpage, untuk menambahkannya, klik dahulu salah satu sel yang hendak kita beri Inline Frame, kemudian klik Insert, dan pilih Inline Frame. Ulangi langkah kedua untuk Sel Thumbnail disebelahnya. Sehingga kira-kira akan menjadi seperti berikut : Anda bisa mengatur tampilan dari kolom inline frame tersebut, apakah bordernya ditampilkan atau tidak, dengan mengklik kanan pada pinggiran inline frame tersebut, sehingga memunculkan tulisan inline frame properties. Untuk meniadakan border, lepas saja tanda centang pada show borders. Anda juga bisa menonaktifkan scroll bar dengan mengubah opsi if 3
4 needed pada bagian scrollbars: menjadi never. Bagian alternative text sendiri adalah text yang akan disampaikan untuk browser yang tidak support inline frame. Kata-kata yang terdapat pada kotak tersebut bisa anda hapus jika mau, atau mungkin menggantinya dengan tulisan2 lucu? Terserah anda. Yang perlu anda ingat dari properties ini adalah: - Nama Inline Frame - Besar Inline Frame, baik panjang dan lebarnya Hal ini diperlukan guna menyesuaikan besar gambar yang kita gunakan dengan besar inline frame. Sekarang, agar mudah diingat, mari kita ganti nama inline frame tersebut. Klik kanan saja. Yang besar kita beri nama gambar, dan yang kecil kita beri nama thumbnail (tanpa tanda kutip). Kemudian klik New page pada tiap inline frame sehingga masing masing menjadi halaman yang kosong, putih, atau apapun menurut pendapat anda. Yang anda perlukan sekarang adalah menulis sebuah kata yang menunjukkan bahwa itu adalah halaman default dari inline frame tersebut. Misalnya, pada bagian inline frame untuk Gambar Besar, anda tulis SILAHKAN PILIH THUMBNAIL agar user memilih salah satu thumbnail pada inline frame Thumbnail. Kemudian pada bagian inline frame untuk Thumbnail, anda tulis SILAHKAN PILIH LINK ALBUM agar user memilih salah satu thumbnail pada menu album bagian atas. Kira-kira seperti ini : Oke Yang perlu dilakukan sekarang adalah membuat link dari bagian link album untuk merubah tampilan pada inline frame thumbnail. Kode link untuk sebuah link yang merubah inline frame tidak sama dengan kode yang biasa digunakan untuk mengganti halaman. Kodenya adalah : <p align="center"> <a title="album1" target="thumbnail" style="text-decoration: none; 4
5 " href="album1.htm">album1</a> </p> Kode diatas sendiri kira-kira berarti : Hai browser! Jika kuklik Kata bertitel Album1 (<a title= Album1 dan >Album1</a>) tolong bukakan halaman Album1.htm (href= Album1.htm ) pada Inline Frame bernama Thumbnail (target= thumbnail ) Sedikit saya perjelas, kode diatas adalah kode yang berfungsi mengubah halaman default pada inline frame Thumbnail yang bertuliskan SILAHKAN PILIH LINK ALBUM menjadi halaman Album1.htm yang berisi thumbnail foto (halaman ini akan kita buat kemudian) Untuk saat ini, cukup kita gunakan 2 buah link saja, yaitu album satu dan 2. Jangan lupa untuk mengedit kode HTML dari link tersebut. Dengan kata lain, pada halaman yang kita buat nanti akan terdapat dua buah link pada bagian atas, dengan nama Album1 dan Album2. Kodenya sendiri yaitu :. Album1 : <p align="center"> <a title="album1" target="thumbnail" style="text-decoration: none; " href="album1.htm">album1</a> </p>. Album2 : <p align="center"> <a title="album2" target="thumbnail" style="text-decoration: none; " href="album2.htm">album2</a> </p> Sehingga nanti, akan tampak seperti : Tentu saja anda juga bisa mengedit ukuran dan font yang digunakan. 5
6 Setelah itu, save-as lah pada sebuah folder yang sama untuk memudahkan pengeditan. Jika ada konfirmasi untuk menyimpan halaman lagi setelah anda save-as, itu pastilah halaman yang ada dalam inline frame (default page-nya). Simpanlah pada folder yang sama dengan halaman album foto, dengan nama defaultnya. Hal ini hanyalah untuk mempermudah pembelajaran. Jika anda sudah mahir, anda bisa menamakannya apa saja. Sebagai perbandingan, jika anda ini adalah gambar dalam folder tempat saya men-save-as hasil kerja ini : (galeri yang berupa htm file tsb adalah Halaman album foto) Sekarang, bisa kita lihat, kode html pada Album Foto yang kita buat kira-kira sebagai berikut : <html> <head> </head> <body> <table border="0" cellspacing="0" width="95%" id="autonumber1" style="border-collapse: collapse" cellpadding="0"> <td width="100%" colspan="2"> <p align="center"> <a title="album1" target="thumbnail" style="text-decoration: none; font-weight:700" href="album1.htm">album1</a> <a title="album2" target="thumbnail" style="text-decoration: none; font-weight:700" href="album2.htm">album2</a></td> <td width="62%"> <iframe name="gambar" width="536" height="392" border="0" frameborder="0" src="silahkan_pilih_thumbnail.htm">maaf, browser anda tidak support.</iframe></td> <td width="38%"> <iframe name="thumbnail" width="300" height="389" border="0" frameborder="0" src="silahkan_pilih_link_album.htm">maaf, browser anda tidak support.</iframe></td> </table> </body> </html> 6
7 (tulisan maaf, Browser anda tidak support hanyalah pesan yang ditampilkan jika browser pengguna sedemikian tua sehingga tidak bisa membuka inline frame) Baik, sekarang kita siap mengedit gambar yang akan ditampilkan pada Album Foto kita. Karena ini hanya latihan, yang kita perlukan cukup 4 buah gambar, 2 untuk Album1, dan 2 lagi untuk Album2. Ingat, saat pertama tadi saya menganjurkan anda untuk melihat besar dari inline frame? Ya, sekaranglah kegunaannya. Baik Gambar Besar maupun Thumbnail tidak boleh lebih besar dari inline frame yang digunakan sebagai ruangnya. Sebagai contoh, pada skrip diatas, terlihat bahwa inline frame untuk Gambar Besar hanyalah sebesar 536x392 pixels (<iframe name="gambar" width="536" height="392") dengan kata lain, Gambar Besar saya tidak boleh lebih besar dari 536x392. Untuk amannya, kita bisa saja menggunakan 530x386 pixels. Begitupula dengan inline frame pada thumbnails (<iframe name="thumbnail" width="300" height="389) untuk amannya pakai saja 250x130 pixels misalnya. Dikarenakan dalam Album Foto ini sudah ditanamkan sifat-sifat jika user mengklik thumbnail, maka pada inline frame gambar besar akan muncul gambar yang sama dengan gambar yang di klik user pada inline frame dalam bentuk dan resolusi yang lebih besar, maka berlaku hokum gambar thumbnail yang di klik harus sama dengan gambar target. Untuk penjelasan lebih lanjutnya begini. Kita bermaksud menempatkan sebuah thumbnails (gambar yang lebih kecil) untuk di klik user sehingga membuka gambar yang lebih besar. Album itu sendiri (antara lain Album1 dan Album2) merupakan kumpulan dari link-link dalam bentuk thumbnails itu sendiri. Nah, yang perlu anda lakukan sekarang adalah Merubah resolusi GAMBAR BESAR anda agar tidak lebih dari besar Inline Frame Gambar. Setelah itu, buatlah thumbnailnya. Untuk memudahkan penamaan, gunakan saja 1.jpg untuk yang besar, kemudian 1kecil.jpg untuk thumbnailnya, dan seterusnya. Jika sudah, simpanlah semua gambar tersebut dalam folder yang sama dengan 3 halaman yang sudah saya sebutkan sebelumnya (galeri.htm, silahkan_pilih_link_album.htm, dan silahkan_pilih_thumbnail.htm). Tidak usah membuat folder baru! Sekarang, jika sudah, kita akan membuat link ke Gambar Besar dari thumbnails tadi. Karena gambar besar juga kita tempatkan pada sebuah inline frame, maka tentu saja kodenya berbeda dengan link biasa. Yang perlu kita lakukan hanyalah memodifikasi url sebelumnya : <p> <a title="gb1" target="gambar" style="text-decoration: none; font-weight:700" href="1.jpg"><img src="1kecil.jpg"></a> </p> Disana kita bisa melihat, target sekarang adalah gambar (target="gambar") dimana file yang dibuka pada inline frame gambar adalah 1.jpg (href="1.jpg">) melalui link yang berupa gambar yaitu 1kecil.jpg (<img src="1kecil.jpg"></a>). Mudah bukan? Sekarang yang perlu anda lakukan adalah membagi, gambar (yang sudah berupa link) 1kecil.jpg dan 2kecil.jpg pada bagian Album1.htm, dan gambar 3kecil.jpg serta gambar 4kecil.jpg pada Album2,htm 7
8 TUNGGU!!! Kenapa Album1.htm dan Album2.htm? Tentu saja karena url ini : <a title="album1" target="thumbnail" style="text-decoration: none; font-weight:700" href="album1.htm">album1</a> <a title="album2" target="thumbnail" style="text-decoration: none; font-weight:700" href="album2.htm">album2</a></td> Disana kita bisa lihat, itulah alamat yang ditunjuk oleh link paling atas untuk membuka album yang berisi thumbnails bukan? Tentu saja anda bisa menggantinya sesuka hati, tapi kali ini, kita seragamkan saja untuk pembelajaran. Dengan kata lain, pada Album1.htm dan pada Album2.htm terdapat link yang berupa thumbnails, dimana link ini berfungsi untuk menampilkan Gambar Besar pada inline frame gambar. Nah jika anda mengikuti petunjuk saya, seharusnya folder tempat anda menyimpan semua file latihan kita kali ini terlihat sebagai berikut : Nah Jika sudah.. Kira-kira, html pada gallery.htm dan Album1.htm adalah : 8
9 Gallery.htm : <html> <head> </head> <body> <table border="0" cellspacing="0" width="100%" id="autonumber1" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0"> <td width="100%" colspan="2"> <p align="center"> <a title="album1" target="thumbnail" style="text-decoration: none; font-weight:700" href="album1.htm">album1</a> <a title="album2" target="thumbnail" style="text-decoration: none; font-weight:700" href="album2.htm"> Album</a></td> <td width="66%"> <iframe name="gambar" width="536" height="392" scrolling="no" border="0" frameborder="0" src="silahkan_pilih_thumbnail.htm"> Browser anda tidak support.</iframe></td> <td width="34%"> <iframe name="thumbnail" width="300" height="389" scrolling="no" border="0" frameborder="0" src="silahkan_pilih_link_album.htm"> Browser anda tidak support.</iframe></td> </table> </body> </html> 9
10 Album1.htm : <html> <head> </head> <body> <p> <a title="album1" target="gambar" style="text-decoration: none; font-weight:700" href="1.jpg"> <img border="0" src="1kecil.jpg" width="250" height="130"></a></p> <p> <a title="album1" target="gambar" style="text-decoration: none; font-weight:700" href="2.jpg"> <img border="0" src="2kecil.jpg" width="250" height="130"></a></p> <p></p> </body> </html> Album2.htm : <html> <head> </head> <body> <p> <a title="album1" target="gambar" style="text-decoration: none; font-weight:700" href="3.jpg"> <img border="0" src="3kecil.jpg" width="250" height="130"></a></p> <p> <a title="album1" target="gambar" style="text-decoration: none; font-weight:700" href="4.jpg"> <img border="0" src="4kecil.jpg" width="250" height="130"></a></p> <p></p> </body> </html> Atau untuk cepatnya, silahkan saja kutak-katik file contoh.zip yang saya bisa anda download pada halaman yang sama dengan tempat anda mendownload tulisan ini pada Setelah anda mengerti secara jelas mengenai cara kerja skrip sederhana ini, tentunya anda akan dapat menggunakannya untuk situs yang anda buat. Istilah kasarnya, yang penting dasarnya, selanjutnya, terserah anda. 10
11 Biografi Penulis Farhan Perdana. Drop out kelas 2 sma dan melanjutkan di sekolah terbuka. Belajar komputer secara otodidak. Penulis dapat dihubungi melalui: [email protected] situs : 11
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA 1. HTML adalah kepanjangan dari. A. Hyper Text Multiple Language B. Hiper Text Multiple Language C. Hipo Text Multiple Language D. Hyper Text Multiple Land E.
Area kerja. Gambar 1. Tampilan awal MS FrontPage
Microsoft FrontPage I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images,
1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Website Fakultas Pendidikan Ekonomi dan Bisnis (FPEB) Universitas Pendidikan Indonesia (http://fpeb.upi.edu)
Website Fakultas Pendidikan Ekonomi dan Bisnis (FPEB) Universitas Pendidikan Indonesia (http://fpeb.upi.edu) Copyright 2012 KATA PENGANTAR Dalam memenuhi kebutuhan informasi profil, kegiatan dan informasi-informasi
MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Membuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : [email protected] Page 2 1. Pengenalan
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE Oleh: Asyti Febliza I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain,
Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)
Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Oleh : Tri Wahyu Nugroho [email protected] [email protected] http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk
Sofiyan Arif Kurniawan
Mengolah Data di Rapidshare Sofiyan Arif Kurniawan [email protected] http://sosofiyan.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
C. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
FLASH, FRAME, BEHAVIOR
FLASH, FRAME, BEHAVIOR 1. Flash Menyisipkan Flash Button a. Pilih menu : insert image interactive flash button b. Tentukan property : Style : pilih bentuk / jenis tombol flash Button text : tulis label
4.1 Pengenalan MS-Frontpage Eko Purwanto WEBMEDIA Training Center Medan
Membangun Web Bisnis Dengan Frontpage 2000 Eko Purwanto [email protected] WEBMEDIA Training Center Medan www.webmediacenter.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan,
DAFTAR ISI PANDUAN PENGGUNAAN WEB SEKOLAH
DAFTAR ISI PANDUAN PENGGUNAAN WEB SEKOLAH 1. Bagian - Bagian Website... 2 - Halaman (page), Artikel Berita (post), Widget... 2 2. Cara Masuk ke Website (Admin / Dashboard)... 3 3. Cara Mengisi Artikel
Bab IV. Mengisi Fitur Website Sekolah. A. Mengelola Agenda
Bab IV Mengisi Fitur Website Sekolah Content Management System hal yang wajib d ikuasai oleh seorang Administrator web agar website terlihat dinamis dikarenakan informasi yang ada selalu up to date. Pada
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for
Sofiyan Arif Kurniawan
Mengenal 4shared Sofiyan Arif Kurniawan [email protected] http://sosofiyan.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Bu k u Ma n u a l Web Si t e SK PD Pem er i n t a h K a b u pa t en Ma l a n g
Bu k u Ma n u a l Web Si t e SK PD 2016 Pem er i n t a h K a b u pa t en Ma l a n g Situs web Satuan Kerja Perangkat Daerah Pemerintah Kabupaten Malang didesain untuk bisa dirubah atau diupdate secara
KOMPUTER APLIKASI IT (Information Technology)
KOMPUTER APLIKASI IT (Information Technology) 2 SKS Semester 1 S1 Sistem Informasi Nizar Rabbi Radliya [email protected] Pertemuan 5 Universitas Komputer Indonesia 2014 Tabel pada HTML Tabel pada
Pemrograman Web DASAR HTML 2
Pemrograman Web DASAR HTML 2 Marquee Marquee adalah menu tekst barjalan yang berfungsi untuk memperindah tampila web, serta membuat pengunjung agar melihat taks tersebut. Teks ini seperti tesks biasa yang
PEMROGRAMAN WEB 1 (PART 2) Berbagai macam Tag HTML. Rio Andriyat Krisdiawan, M.Kom
PEMROGRAMAN WEB 1 Berbagai macam Tag HTML (PART 2) Rio Andriyat Krisdiawan, M.Kom Tag Subscript dan SuperScript Subscript biasanya digunakan untuk Menurunkan posisi karakter atau lebih rendah dari teks
Bondan Muliawan Mengenal ASP
Instalasi Personal Web Server dan Pengenalan ASP Bondan Muliawan [email protected] http://www.bondan.net Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Macromedia Dreamweaver. Tatik Retno Murniasih, S.Si., M.Pd.
Tatik Retno Murniasih, S.Si., M.Pd. Merupakan software web design yang berguna untuk merancang web dan layout halaman web. Dalam merancang web bisa dilakukan dengan cara mendesain dan memprogram. Untuk
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
I. KONSEP DASAR WEB Lisensi Dokumen:
I. KONSEP DASAR WEB Lisensi Dokumen: Copyright win.web.id Seluruh dokumen di win.web.id dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
FORMAT TEXT. Tag Attribut Value Keterangan. RGB(red,green,blue) Kode Warna. Memberikan warna terhadap background web mengatur posisi text rata kiri
FORMAT TEXT Tag Attribut Value Keterangan Body P (Paragraf) H (Heading) ol (Order List) ul (UnOrder List) Font marquee align RGB(red,green,blue) Kode Warna justify Memberikan warna terhadap background
Menginstal Web Server Apache, PHP, dan MySQL
Menginstal Web Server Apache, PHP, dan MySQL Sekarang ini, menginstal web server Apache, PHP, dan MySQL sangatlah mudah. Anda cukup mengisntal sebuah paket instalasi bernama XAMPP, maka seluruhnya akan
Farhan Perdana
Kalender GUI Tanpa Visual Basic Farhan Perdana [email protected] http://aniplasma.co.nr Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas
Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML
Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil
BAB 5 PROSES EDITING 5.1. EDITING AWAL
BAB 5 PROSES EDITING Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih
Bab 10 Pemakaian Frame
Bab 10 Pemakaian Frame Webmaster Pro Front Page XP Daftar Isi Bab 10 1 Pendahuluan...305 1.1 Sekilas tentang frame... 305 1.2 Latar belakang... 305 1.3 Membuat frame... 306 2 Membuat Frame...307 2.1 Membuat
MODUL PENGEMBANGAN WEBSITE UNIVERSITAS NEGERI YOGYAKARTA. (Web Fakultas, Program Pascasarjana, & Lembaga Versi Inggris)
MODUL PENGEMBANGAN WEBSITE UNIVERSITAS NEGERI YOGYAKARTA (Web Fakultas, Program Pascasarjana, & Lembaga Versi Inggris) 0 STRUKTUR WEBSITE 1 No Tipe Konten Letak Block Role 1. Header Logo - Webmaster UNY
Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8
Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8 Oleh Angga Radhitya Rachmat, S.Kom [email protected] 0882 6801 9510 0819 5724 1619 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat
Panduan Membuat Sales Letter
Panduan Membuat Sales Letter Panduan ini akan membantu anda membuat duplikat halaman web sales letter untuk bisnis hosting anda. Tujuan adanya halaman sales letter adalah sebagai brosur online anda. Sebenarnya
Panduan Instalasi Drupal 7 di Localhost
Panduan Instalasi Drupal 7 di Localhost T Farhan Alian [email protected] http://teukufarhan.com Lisensi Dokumen: Copyright 2003-2006 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan,
Ruang Kerja DREAMWEAVER MX 2004 :
1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER
Pengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
Ashadi Cahyadi
Membuat Html Report di Delphi Ashadi Cahyadi [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
Panduan membuat aplikasi sederhana pada Smartphone berbasis Windows Mobile 5
Panduan membuat aplikasi sederhana pada Smartphone berbasis Windows Mobile 5 Eko Riduwan [email protected] http://www.ekoriduwan.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan,
CorelDraw. Aris. Lisensi Dokumen: Suport Tukang Nggame blog Copyright IlmuKomputer.Com
CorelDraw Aris Suport Tukang Nggame blog http://nggametukang.blogspot.com Lisensi Dokumen: Copyright 2003-2007 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Buku Manual. Download, Aplikasi Aspak, dan Tanya Jawab.
Buku Manual Gambar diatas adalah halaman awal yang akan muncul pada saat pertama kali membuka situs aspak.buk.depkes.go.id. Lalu dibawah judul terdapat beberapa link yaitu : Beranda, Halaman Download,
Membuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency
Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :
PERTEMUAN 5 Membuat Tabel Tabel biasanya digunakan untuk menempatkan data secara spreadsheet, tapi untuk desain suatu web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.
Menambah Lokasi Jaringan FTP pada My Computer
Menambah Lokasi Jaringan FTP pada My Computer I Wayan Dharmana [email protected] http://www.dharmanacyber.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
Bab 12 Mengatur Link
Bab 12 Mengatur Link Webmaster Pro Front Page XP Daftar Isi Bab 12 1 Membangun link antar halaman...355 1.1 Membuat halaman baru... 355 1.2 Membuat link... 356 1.3 Memodifikasi link... 361 2 Membuat link
Dasar-dasar Dreamweaver
FAUZAN SRIRADITYO UTOMO 08148102 TUGAS TV INTERNET Dasar-dasar Dreamweaver I. Elemen Dreamweaver Anda harus nyaman mencari dan menggunakan alat-alat dan objek dalam Dreamweaver (ada banyak lagi, tetapi
MANUAL USER Website KLA
Website KLA http://kla.id/wp-admin Daftar Isi Daftar Isi... 2 Panduan Aplikasi CMS... 3 Login... 3 Halaman Utama / Dashboard Wp-admin... 4 Edit User / Ubah Password... 5 Menu Media... 6 Menu Post... 7
MEMBUAT WEB PERSONAL DENGAN DREAMWEAVER
MEMBUAT WEB PERSONAL DENGAN DREAMWEAVER Jalankan Dreamweaver 8 Pilih HTML Setelah dipilih HTML maka akan muncul tampilan pertama seperti berikut : Klik Page Properties untuk pengaturan awal Halaman Pilih
Triswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano [email protected] http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
TRAINING. Jul Gallery Foto, Banner & Document
TRAINING Jul-2013 Gallery Foto, Banner & Document Table of Contents 1 PREFACE... 3 2 GALLERY FOTO / BANNER... 3 1.1 Add Gallery/Images... 4 1.2 Manage Gallery... 4 1.3 Album... 5 3 DOWNLOADS... 5 3.1 Categories...
Membuat Bahan Ajar berbasis Web dengan Adobe Dreamweaver CS3. Bambang Adriyanto
Membuat Bahan Ajar berbasis Web dengan Adobe Dreamweaver CS Bambang Adriyanto MEMBUAT SITE dan HALAMAN BARU Membuat Site Sebelum membuat halaman-halaman web Anda harus membuat Site terlebih dahulu, untukmemudahkan
Juhaeri
Membuat CD Profil Perusahaan Juhaeri [email protected] http://juhaerisusanto.tk Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk
BAB VII Tabel. Susanto, S.Kom. Bab VII Tabel
BAB VII Tabel Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag yang menandai sebuah tabel, tag yang membentuk baris dan tag yang membentuk kolom. Masing-masing tag tersebut harus
PENGENALAN HTML - 3. Gambar 1. Layer Toolbar
PENGENALAN HTML - 3 A. Layer Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, kita dapat membuat halaman HTML yang tampilannya lebih fleksibel. Layer
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Mendesain Template Presentasi lewat MASTER SLIDE pada Microsoft PowerPoint 2010
Mendesain Template Presentasi lewat MASTER SLIDE pada Microsoft PowerPoint 2010 Ninin Sapto Hargiyanto [email protected] Lisensi Dokumen: Copyright 2008-20013 IlmuKomputer.Com Seluruh dokumen di
Tua Namora Nainggolan dan Team Kursus Komputer Trainee Jepang
Tutorial Microsoft Excel Tua Namora Nainggolan dan Team Kursus Komputer Trainee Jepang [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL A. MAKSUD DAN TUJUAN 1. MAKSUD a. Merapikan teks yang berupa daftar (list) dan table dengan tag HTML b. Membuat halaman web terhubung dengan halaman
Cara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
Membuat situs sederhana dengan Dreamweaver *)
Membuat situs sederhana dengan Dreamweaver *) Oleh: Sri Andayani Jurusan Pendidikan Matematika, FMIPA UNY Dreamweaver merupakan salah satu perangkat lunak bantu dalam kelompok Macromedia yang digunakan
Eko Purwanto WEBMEDIA Training Center Medan
Membangun Web Bisnis Dengan Frontpage 2000 Eko Purwanto [email protected] WEBMEDIA Training Center Medan www.webmediacenter.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan,
Febri Aryanto
Menampilkan Google Map di Dalam Website atau Blog Febri Aryanto [email protected] http://masfebjalanjalan.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi
Instalasi CMS Joomla di Web Hosting
Instalasi CMS Joomla di Web Hosting Fajar Kharisma Rusius Faridzi Febrian Ronal Naribun [email protected] License Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
Nofriza Nindiyasari
Tips Mengganti Templates Ala Joomla Nofriza Nindiyasari [email protected] http://www.constantio.info Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Langkah 1. Asep Tatang S.
Membuat Halaman Kamus Istilah Sederhana Menggunakan PHP dan MySql Asep Tatang S. [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara
Pemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada [email protected] S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur
BUKU PEDOMAN SITUS PERWALIAN Versi User : Sekretariat Jurusan
BUKU PEDOMAN SITUS PERWALIAN Versi User : Sekretariat Jurusan Universitas Komputer Indonesia Direktorat ICT & Multimedia DAFTAR ISI DAFTAR ISI... i PENDAHULUAN... 1 Latar Belakang... 1 SITUS PERWALIAN
Soal Remedial Prakarya-1
Soal Remedial Prakarya-1 Kerjakan soal ini, dengan memilih salah satu jawaban yang benar. Perhatikan petunjuk: a. Pilihan jawaban yang benar dengan cara memblok pada soal tersebut. b. Dan kirim soal dan
Muhammad Adri. Pendahuluan. Instalasi Xampp
Optimalisasi Blog untuk Pembelajaran Localhost Setup (Instalasi Xampp dan WordPress) Muhammad Adri [email protected] http://muhammadadri.wordpress.com Lisensi Dokumen: Copyright 2003-2008 IlmuKomputer.Com
MEMBUAT WEBSITE PERSONAL
MEMBUAT WEBSITE PERSONAL dengan Microsoft FrontPage UNTUK KALANGAN SENDIRI Dilarang menyalin sebagian atau seluruh bagian modul ini tanpa ijin dari penyusun Modul Workshop : Membuat Website Personal 1
Sekilas Mengenai HTML
Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak
PANDUAN SITU [ MANAJEMEN WEBSITE ] MANAJEMEN BERITA MANAJEMEN AGENDA MANAJEMEN GALERY MANAJEMEN HALAMAN COSTUMIZE MENU PENGATURAN PRODI / JURUSAN
MANAJEMEN BERITA MANAJEMEN AGENDA MANAJEMEN GALERY PANDUAN SITU [ MANAJEMEN WEBSITE ] MANAJEMEN HALAMAN COSTUMIZE MENU [ Website Fakultas, Prodi dan Jurusan] Penjelasan singkat disertai dengan gambar yang
PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).
PENGENALAN HTML - 2 G. Tabel HTML Setting untk membuat perintah tabel terdiri dari : Row : mementukan banyaknya baris yang dimiliki oleh tabel. Columns : menentukan banyaknya kolom yang dimiliki tabel.
PANDUAN PENGELOLAAN SITUS WEB BPKP
PANDUAN PENGELOLAAN SITUS WEB BPKP URL (UNIFIED RESOURCES LOCATOR) Untuk dapat melakukan pengelolaan halaman web di situs web BPKP, kita harus mengetikkan URL atau unified resources locator atau alamat
STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.
STMIK SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 PENDAHULUAN Dreamweaver adalah sebuah program website editor yang berfungsi untuk membuat dan
Cara Membuat Website Dengan Dreamweaver 8
Cara Membuat Website Dengan Dreamweaver 8 Hilmi Akbar [email protected] Abstrak Macromedia Dreamweaver 8 merupakan alat desain web komprehensif yang disukai oleh para profesional web, tapi cukup mudah
Septina Budi Kurniawati
Simple! Membuat Spreadsheet Secara Online di Google Docs Septina Budi Kurniawati [email protected] http://septinabeqa.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan,
Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya [email protected] Nama Mahasiswa NIM Kelas Kompetensi Dasar Menciptakan dokumen HTML dengan
MODUL PENGEMBANGAN WEBSITE Fakultas BAHASA DAN SENI UNIVERSITAS NEGERI YOGYAKARTA
MODUL PENGEMBANGAN WEBSITE Fakultas BAHASA DAN SENI UNIVERSITAS NEGERI YOGYAKARTA 0 STRUKTUR WEBSITE 1 No Tipe Konten Letak Block Role 1. Header - Webmaster UNY 2. Main Menu - Admin 3. Header Slideshow/Banner
Mohammad Jeprie
Integrasi email gratis yahoo.com dan Outlook 2007 Mohammad Jeprie [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk
ULANGAN UMUM SEKOLAH SMA ISLAM AL-IZHAR PONDOK LABU TAHUN PELAJARAN 2012/2013
1. Istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, yang dikirimkan ke pengguna akhir melalui internet untuk di publish adalah. A. Website D. Web Designer B. Web Design.
Muhidin
Instalasi WEB Server (WAMP Server, XAMPP & PHP Triad) di Windows Muhidin [email protected] http://muhidins.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi
REKAYASA WEB SESI - 2 Dosen : Tri Ari Cahyono, S.Kom, M.Kom
REKAYASA WEB SESI - 2 Dosen : Tri Ari Cahyono, S.Kom, M.Kom ------------------------------------------------------------------------------ INSTALASI AURACMS Download terlebih dahulu file script AuraCMS
HTML (Hypertext Markup Language)
1 HTML (Hypertext Markup Language) HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen (web page) dan aplikasi yang berjalan di halaman web. Dokumen HTML
Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web
HTML DASAR BAGIAN 1 Oleh: Heribertus Heri Istiyanto Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web Materi: 1. HTML Dasar 2. Desain Layout di Photoshop 3.
Flash Case on Masking Animation
2008 Flash Case on Masking Animation http://muhammadadri.net Tulisan ini merupakan salah satu modul praktik yang ditulis untuk digunakan dalam pengembangan bahan ajar Multimedia, dalam proses pengolahan
Cara Belajar Xampp Pada Mysql untuk Php
Cara Belajar Xampp Pada Mysql untuk Php Euis Sutinah [email protected] Abstrak MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL, Jika dalam bahasa Inggris adalah database management
SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT
SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT 1. HTML 1.1. Susunan Dasar HTML Judul disini Program disini 1.2. Contoh Halaman Pertama Teks dengan Heading 1 Teks
Kumpulan Tutorial Pengolahan Tabel Pada Microsoft Word 2010 OLEH RIZKIA NUR FAJRIYATI NIM: J1B114030
Kumpulan Tutorial Pengolahan Tabel Pada Microsoft Word 2010 OLEH RIZKIA NUR FAJRIYATI NIM: J1B114030 KATA PENGANTAR Eboo kini berisikan tentang kumpulan tutorial pengolahan tabel pada Microsoft Word 2010.
DIKTAT PELAJARAN TIK KELAS XII IPA DAN IPS TH/SEM: 2013/ SMA N 11 YOGYAKARTA JL.AM SANGAJI NO.50
1 DIKTAT PELAJARAN TIK KELAS XII IPA DAN IPS TH/SEM: 2013/2014-1 SMA N 11 YOGYAKARTA JL.AM SANGAJI NO.50 http://sma11jogja.sch.id/ 2 HALAMAN PENGESAHAN Mengetahui, Kepala sekolah Dra.Baniyah NIP: 19560409
SMP Kristen Tirtamarta hal 1
SMPK TIRTAMARTA BPK PENABUR JL. SEKOLAH KENCANA IV, PONDOK INDAH JAKARTA SELATAN Telp. 7656615 Ext. 21, 22, 23 Fax. 7654122 E-mail : [email protected] SOAL ULANGAN UMUM SEMESTER GENAP (PRA US) TA.
PELATIHAN PENGELOLAAN WEBSITE
PELATIHAN PENGELOLAAN WEBSITE LEMBAGA INFORMASI DAN PUBLIKASI FAKULTAS EKONOMI DAN BISNIS UMM 2 MEI 2015 PANDUAN PENGELOLAAN WEBSITE UNIT-UNIT DI LINGKUNGAN FEB UMM A. PENDAHULUAN Website di lingkungan
Materi 1. Selamat Datang Di Frontpage 2000
Materi 1 Selamat Datang Di Frontpage 2000 By Sugeng Wibowo [email protected] MEMBUAT WEB SEDERHANA DENGAN MICROSOFT FRONTPAGE 2000 1. Pendahuluan Sebelum kita membuka program Microsoft Frontpage
Komunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
Septina Budi Kurniawati
Easy Steps to Make a Presentation on Google Docs Septina Budi Kurniawati [email protected] http://septinabeqa.blogspot.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi
