materi workshop bikin web 1

95

Transcript of materi workshop bikin web 1

Page 1: materi workshop bikin web 1
Page 2: materi workshop bikin web 1

Website adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi

dengan jaringan internet. Website merupakan komponent atau kumpulan komponen yang terdiri dari teks, gambar, suara animasi

sehingga lebih merupakan media informasi yang menarik untuk dikunjungi.

Page 3: materi workshop bikin web 1

• Website Statis adalah web yang mempunyai halaman tidak berubah. Artinya adalah untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan mengedit code yang menjadi struktur dari website tersebut.

• Website Dinamis merupakan website yang secara struktur diperuntukan untuk update sesering mungkin. Biasanya selain utama yang bisa diakses oleh user pada umumnya, juga disediakan halaman backend untuk mengedit kontent dari website. Contoh umum mengenai website dinamis adalah web berita atau web portal yang didalamnya terdapat fasilitas berita, polling dan sebagainya.

• Website Interaktif adalah web yang saat ini memang sedang booming. Salah satu contoh website interaktif adalah blog dan forum. Di website ini user bisa berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka. Biasanya website seperti memiliki moderator untuk mengatur supaya topik yang diperbincangkan tidak keluar jalur.

Page 4: materi workshop bikin web 1

1. Bahasa Pemrograman HTMLHyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.

Page 5: materi workshop bikin web 1

2. Bahasa Pemrograman PHPPHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini.PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web.PHP banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).

Page 6: materi workshop bikin web 1

3. Bahasa Pemrograman ASPASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis.ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft.ASP bekerja pada web server dan merupakan server side scripting.

Page 7: materi workshop bikin web 1

4. Bahasa Pemrograman XMLExtensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data.XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja.XML merupakan suatu metode dalam membuat penanda/markup pada sebuah dokumen.

Page 8: materi workshop bikin web 1

5. Bahasa Pemrograman WMLWML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (eXtensible Markup Langauge).WML ini adalah bahasa pemrograman yang digunakan dalam aplikasi wireless.WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel.

Page 9: materi workshop bikin web 1

6. Bahasa Pemrograman PERLPerl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC.PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.

Page 10: materi workshop bikin web 1

7. Bahasa Pemrograman CFMCfm dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio.Syntax coldfusion berbasis html.

Page 11: materi workshop bikin web 1

8. Bahasa Pemrograman JavascriptJavascript adalah bahasa scripting yang handal yang berjalan pada sisi client.JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.

Page 12: materi workshop bikin web 1

9. Bahasa Pemrograman CSSCascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL.Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

Page 13: materi workshop bikin web 1

Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang

memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau produknya di

web / situs Internet. Tempat dapat juga diartikan sebagai tempat penyimpanan data berupa

megabytes (mb) hingga terabytes (tb) yang memiliki koneksi ke internet sehingga data

tersebut dapat direquest atau diakses oleh user dari semua tempat secara simultan. Inilah yang

menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu oleh multi user.

Page 14: materi workshop bikin web 1

Seperti telah dijelaskan diatas, setiap orang ataupun perusahaan dapat menyewa tempat atau

memanfaatkan jasa web hosting ini, didukung dengan kemajuan teknologi informasi yang ada

saat ini maka pemanfaatan jasa web hosting merupakan sarana alternatif yang handal untuk:

Promosi, Menyebarkan Informasi, Berjualan, Layanan Publik sampai dengan sekedar tempat

untuk menumpahkan isi hati yang kelabu ke dalam buku harian berbasis web (blog: web log) akibat

ditinggal kekasih.

Page 15: materi workshop bikin web 1

Kecepatan menyebarkan informasi tentang Jasa, Produk, Layanan Publik dan lainnya merupakan salah satu tolok ukur keberhasilan

bisnis perorangan atau perusahaan,Contoh Pertama : di Indonesia dengan sekitar 100 juta pengguna

telepon genggam yang tentu saja dapat tersambung ke internet melalui gprs, tidak ada alasan lagi untuk tidak tersambung ke dunia

maya, bahkan di daerah terpencil sekalipun.Contoh kedua: Seorang mahasiswa kedokteran, dengan dana yang

terbatas, untuk mengantisipasi membeli buku kuliah kedokteran yang harganya bisa mencapai jutaan rupiah, dapat dengan mudah

memperoleh informasi ilmu pengetahuan dan teknologi melalui situs web, dan ini menjadi tanggung jawab penyelenggara pendidikan

untuk menyediakan layanan web site guna memajukan pendidikan. Bahkan seorang dosen sebaiknya memiliki web site.

Singkatnya, bila anda telah membuat prototip disain yang dapat dibaca oleh internet browser seperti html, maka sudah waktunya

anda menaruh disain itu di internet dengan mengupload disain anda ke perusahaan yang melayani penjualan hosting.

Page 16: materi workshop bikin web 1

Disaat anda ingin memasarkan produk atau jasa melewati batas kabupaten, propinsi, negara, samudra dan benua, disaat anda ingin orang lain memperoleh

informasi yang benar mengenai hal-hal kemanusiaan, disaat anda ingin menyebarluaskan pengetahuan demi

kesejahteraan sesama manusia, disaat anda ingin melakukan transaksi bisnis yang memudahkan pelangan

anda menjangkaunya dari sebuah vila tempat peristirahatan dengan privasi yang tinggi, disaat itulah

anda membutuhkan layanan web hosting.Situs web adalah sebuah channel above the line yang

termurah yang ada di pasar saat ini, kemampuan broadcast 24jam seminggu, tak terbatas pada aspek

demografis, geografis, menjadikannya positif dalam rasio cost to benefit. Bila anda ingin ditemukan, dikenal,

diapresiasi, mengiklankan diri/produk anda, berarti anda wajib memiliki situs web.

Page 17: materi workshop bikin web 1

Ratusan bahkan ribuan penyelenggara jasa web hosting, ada dapat memulainya dengan

mencari dari mesin pencari google atau yahoo, beberapa penyedia jasa layanan web

hosting di indonesia.Jangan ragu untuk bertanya, bandingkan

fitur kunci seperti kapasitas ruang dan kapasitas bandwidth, jangan tergiur oleh promosi penyelenggara jasa web hosting

yang bombastis.

Page 18: materi workshop bikin web 1

Salah satu teknologi yang digunakan adalah fail over hosting, teknologi ini memungkinkan layanan

anda tetap online 24 jam karena didukung oleh beberapa server komputer yang secara otomatis akan menggantikan tugas server komputer yang

mengalami kerusakan

Page 19: materi workshop bikin web 1

Setelah anda memiliki / menggunakan jasa layanan web hosting, selanjutnya bagaimana mengelolanya, hal ini

merupakan tantangan yang tidak murah, sebab informasi yang ada harus selalu

ditambah dan diperbaharui. Sebuah Tips sederhana yaitu, lakukan persiapan pada

posisi Off Line untuk menghemat. Selamat mencoba.

Page 20: materi workshop bikin web 1

Apa itu Domain Name (Nama Domain)

Domain Name adalah nama unik yang digunakan untuk mengidentifikasi server komputer di jaringan komputer yang 

tergabung dalam internet.

Page 21: materi workshop bikin web 1

Saatnya Praktek

Let’s Have Fun…..

Page 22: materi workshop bikin web 1

Langkah 1 Registrasi HostingBuka  www.freehostia.com  dari  browser,  kemudian  akan  ditampilkan  halaman seperti berikut : 

Page 23: materi workshop bikin web 1

Klik pada sign up now atau klik banner FREE seperti pada gambar berikut : 

Page 24: materi workshop bikin web 1

Pilih use my exiting domain, isi nama domain yang diinginkan, kemudian lengkapi isian biodata  pemilik,  isi  verification  code  yang  tertera  di  halaman  registrasi, selanjutnya click continue. 

Page 25: materi workshop bikin web 1

Jika berhasil maka akan ditampilkan halaman berikut : 

Selanjutnya klik login to  control  panel. Cek di email untuk mengetahui login dan password untuk masuk ke control panel. 

Page 26: materi workshop bikin web 1

Klik login V.2 untuk masuk ke control panel, terlihat seperti gambar berikut : 

Page 27: materi workshop bikin web 1

Untuk  memulai  upload file  masuk ke  panel  File  Manager,  akan  terlihat  halaman file manager seperti berikut :

Page 28: materi workshop bikin web 1

Klik  pada  folder  yang  tersedia  dalam  contoh  adalah workshopbikinweb.tk, selanjutnya ditampilkan halaman upload file seperti gambar berikut : 

Page 29: materi workshop bikin web 1

Klik  open,  jika  menambahkan  file  lain  klik  kembali  choose  file,  jika  semua  file telah terpilih klik tombol upload file, proses upload sepe rti gambar berikut : 

Klik choose file untuk memulai upload

Page 30: materi workshop bikin web 1

Langkah 2 Registrasi domain1. Mendaftar Domain Gratis Dot TKOke, hal yang pertama yang harus lakukan tentunya adalah mengakses http://dot.tk. Lalu klik “Web Domain” pada navigasi menu untuk masuk pada pilihan nama domain. Halaman depan bisa langsung kita akses jika kita hanya ingin memilih layanan redirect, alias meneruskan domain.tk kita ke halaman yang sudah ada.

Page 31: materi workshop bikin web 1

Setelah masuk, kita pilih nama domain yang kita inginkan. Bisa berupa nama kita sendiri, niche untuk blog bisnis, atau sekedar lucu-lucuan seperti “anak.tk”, “guru.tk”, atau “gantengdari.tk” misalnya. Semua terserah kita, asalkan nama domain tersebut belum dipakai oleh orang lain. Setelah itu klik next.

Page 32: materi workshop bikin web 1

Setelah memilih domain, dot.tk akan menanyakan apakah kita akan memilih layanan berbayar atau layanan gratisnya. Jika kita memilih layanan gratis (tentu saja) ada syaratnya. Dot.tk mensyaratkan bahwa minimal hits, atau minimal kunjungan ke domain kita adalah 25 hits per 90 hari. Jadi pastikan junlah hits domain lebih dari 25 hits agar domain tidak dianggap “nganggur” dan akhirnya dihapus.

Page 33: materi workshop bikin web 1

2. Mengarahkan Server DNSJika sudah memilih “Free domain” untuk layanan gratisnya pakai pilihan “use DNS for this domain” agar kita dapat mengarahkan web/blog kita pada domain.tk pilihan kita. Ini adalah layanan gratis terbaru dari dot.tk. Jadi kita dapat mengarahkan nameserver kita selayaknya domain berbayar.

Page 34: materi workshop bikin web 1

Sesudah itu, masukan nameserver seperti yang sudah disediakan oleh hosting kita. Jika kita menggunakan hosting  seperti freehostia.com, maka nameservernya biasanya adalah dns1.freehostia.com/dns2. freehostia.com. Kalaupun sudah berbeda, ikuti saja petunjuk yang sudah mereka sediakan. Hal yang sama juga kita lakukan sesuai dengan DNS nameserver tempat hosting yang kita gunakan.Kalau kita belum tahu atau masih bingung, lanjutkan saja proses ini dengan mengosongkan nameserver atau isi dengan nameserver apa saja. Nantinya bisa kita ubah setelah kita mengetahui nameserver yang disediakan oleh hosting kita. Hanya, pastikan untuk mengubah setting DNS sebelum rentang waktu 48 jam. Cara merubah nameserver akan saya jelaskan di bawah.Pada tahap ini, kita akan diminta memasukkan email. Masukkan email yang valid dan biasa kita pakai. Karena pada tahap ini, kita juga sekaligus melakukan pendaftaran account dot.tk

Page 35: materi workshop bikin web 1

Langkah berikutnya adalah kita memasukan data untuk registrasi seperti nama account beserta passwordnya. Dengan melakukan pendaftaran, kita bisa melakukan perubahan setting domain nantinya. Atau sekedar menambahkan domain baru lainnya.

Page 36: materi workshop bikin web 1

3. Merubah Setting DNSJika pada proses awal kita tidak menentukan nameserver dari DNS kita, maka sekaranglah saatnya. Pertama-tama, login account, kemudian pilih “Modify a Domain” pada pilihan setting “My Domains“. Setelah itu, klik tombol “Modify” lalu masukkan nameserver yang disediakan oleh hostingan.Pada bagian ini, dot.tk akan mengingatkan kembali bahwa domain dengan jumlah kunjungan kurang dari 25 hits dalam waktu 90 akan expire/dihapus.

Page 37: materi workshop bikin web 1

Kurang lebih sama dengan cara di atas, kita tinggal memasukkan Nameserver dari hosting pilihan kita pada kolom yang sudah disediakan. Jika kolomnya tidak terlihat, pastikan untuk memilih “Use custom DNS service” pada drop down menu yang tersedia.

Page 38: materi workshop bikin web 1

Cara install script webSetelah anda login cpanel (seperti diterangkan langkah sebelumnya)

• Di halaman cpanel anda klik menu File Manager (lihat gambar dibawah)

Page 39: materi workshop bikin web 1

Jika muncul window seperti dibawah ini klik folder nama web anda

Page 40: materi workshop bikin web 1

Upload file masterwebv.1.zip yang kami sediakan. Untuk memulai upload, klik menu pilih berkas lalu cari tempat file anda yg akan di Upload(lihat gambar dibawah) lalu klik open

lalu klik open

Page 41: materi workshop bikin web 1

Lalu beri tanda centang pada opsi unpack archive after upload

Apabila muncul pesan seperti gambar di bawah ini, klik ok

Page 42: materi workshop bikin web 1

Lalu klik tombol upload file

Maka akan tampil seperti berikut

Tunggu sampai proses upload selesai lalu klik OK

Page 43: materi workshop bikin web 1

Jika berhasil proses upload file maka akan tampak seperti gambar di bawah ini

Setelah itu lakukan Chmod atau rubah Permission file agar file dapat berstatus variabel nantinya di website. (jika anda bingung tidak apa2, ikuti saja langkahnya dibawah ini)

Page 44: materi workshop bikin web 1

Cara merubah permission:Kali ini adalah merubah permission folder content, images dan downloads menjadi 777. Klik dulu ketiga folder tersebut hingga muncul tanda centang

kemudian klik menu Change permission pilih 777 (lihat gambar dibawah) lalu klik change

Maka hasilnya akan seperti ini (perhatikan angkanya)

Lakukan hal yang sama pada file berikut :config.php dan log.txt didalam folder cmsimple. content.htm didalam folder content

Page 45: materi workshop bikin web 1

setelah membuka folder, dan ingin kembali, klik menu UpLevel 

Kini website sudah bisa diakses melalui domain anda.

Page 46: materi workshop bikin web 1

Kalau semua langkah sudah dilakukan, kini anda buka website melalui browser anda. Lihat gambar dibawah (Contoh: www.bisnisku.com)

Setelah halaman website terbuka maka anda akan melihat website anda yang akan di konfigurasi dan diisi konten webnya

Page 47: materi workshop bikin web 1

Cara pengoperasian website Setiap ingin mengedit website anda harus login dulu. Langkah pertama adalah buka website anda dan login terlebih dulu. Link login tersedia di kolom sebelah kiri. (lihat gambar disamping)Masukkan password: test (password ini sangat disarankan langsung diganti.

Untuk langkah awal silahkan anda tambah/kurangi menu-menu sebelah kiri (Home, Halaman2, dst...) sesuai keinginan anda

Page 48: materi workshop bikin web 1

Menyusun MenuMenambah Halaman Baru

Misalnya anda ingin menambah menu baru bernama Halaman 4 dibawah Halaman 3. (lihat gambar dibawah)

Page 49: materi workshop bikin web 1

1. Klik Halaman 3 , kemudian di akhir halaman tersebut ketik Halaman 4 (lihat gambar dibawah) 2. Block kalimat 'Halaman 4' tersebut kemudian pilih Heading 1 di bagian format hingga font berubah menebal. Kemudian Save dengan menekan tab yang bergambar disket diatasnya

 3. Halaman 4 sudah jadi seperti gambar berikut:

Page 50: materi workshop bikin web 1

Menambah sub halaman

Misalnya ingin membuat submenu untuk Halaman 2 (lihat gambar dibawah)hal ini berfungsi misalnya •Furniture (menu utama)

Meja (submenu) Kursi (submenu)

Page 51: materi workshop bikin web 1

1. Masuk ke halaman yang ingin ditambah sub halaman (misalnya Halaman 2 pada gambar)2. Ketik nama sub halaman yang diinginkan (misalnya "Submenu halaman 2") di akhir halaman 3. Block kalimat 'Sub Halaman 2' tersebut kemudian pilih Heading 2 di format hingga font berubah menebal. Kemudian Save dengan menekan tab yang bergambar disket diatasnya

Page 52: materi workshop bikin web 1

4. Sub halaman akan jadi seperti tampilan berikut

Kesimpulannya kalau mau buat submenu dijadikan Heading 2. • Furniture

Meja ==> Heading 2 Kursi ==> Heading 2

Page 53: materi workshop bikin web 1

Mengganti Menu Halaman

Misalnya anda ingin mengganti menu Halaman 2 menjadi Tentang Kami

1. Klik Halaman 2 2. Gantilah kalimat pertama yang tertera paling atas. Lihat gambar dibawah ini:

Page 54: materi workshop bikin web 1

3. Ganti misalnya dengan Tentang Kami kemudian save, maka menu Halaman 2 sebelah kiri akan berubah menjadi Tentang Kami.

PENTING !!Jangan mengganti menu News, News4 dan News5, (lihat gambar dibawah)

Page 55: materi workshop bikin web 1

Karena menu2 tersebut ada kode utk menampilkan kolom samping. Lihat gambar dibawah:

Dalam mengedit hindari edit bagian judul dan kode dibawahnya. Lihat gambar dibawah:

Page 56: materi workshop bikin web 1

Menghapus Halaman

1. Klik menu yang ingin dihilangkan. (misalnya Halaman 3) Lihat gambar dibawah

2. Klik tab Source hingga muncul tampilan halaman dalam format HTML (lihat gambar dibawah)

Page 57: materi workshop bikin web 1

3. Hapus seluruh kode HTML tersebut (kosongkan halaman) kemudian klik tombol Save (lihat gambar dibawah)

4. Save. Link halaman tidak akan terlihat lagi di kolom menu.

Page 58: materi workshop bikin web 1

Mengisi kolom samping

Di kolom ini anda bisa menampilkan apa saja, misalnya link Yahoo Messenger (petunjuknya di bagian lain), logo bank, dll dalam satu kolom. Segala sesuatu yang anda ketik atau tampilkan di menu News maka hasilnya akan muncul di kolom kiri.

menu News = akan menampilkan di kolom kirimenu News4 = akan menampilkan di kolom kanan (atas)menu News5 = akan menampilkan di kolom kanan (bawah)Singkatnya bisa dilihat pada gambar disamping

Page 59: materi workshop bikin web 1

Berikut ini adalah contoh seandainya anda ingin menampilkan logo bank di kolom kiri1. Kunjungi (atau klik) http://images.google.co.id lalu masukkan kata kunci "logo bca"

2. Akan muncul berbagai macam logo BCA, klik-kanan logo pilihan, lalu pilih "Save image as..." dan simpan logo tsb di hardisk komputer anda

3. Login ke web anda, lalu masukkan logo BCA tersebut di menu News, maka otomatis akan muncul di kolom kiri. Jika ingin lebih bagus bisa dituliskan diatasnya dengan judul "Rekening Pembayaran". Lihat gambar dibawah...

Page 60: materi workshop bikin web 1

Membuat animasi teks berjalan (Marquee)

MENGISI HALAMAN

Misalnya anda ingin membuat Marquee seperti dibawah iniSELAMAT DATANG DI WEBSITE KAMI

Dengan tampilan di halaman web seperti tampilan dibawah ini:

Page 61: materi workshop bikin web 1

• Login ke website anda• Buka halaman yang ingin ditampilkan marquee• Klik tombol HTML (lihat gambar dibawah)

Page 62: materi workshop bikin web 1

<marquee bgcolor="#E2E2E2" behavior= "scroll" direction= "left" scrollamount= "5"><font size="+1"> Selamat Datang di Website kami </font></marquee>

• Pada tampilan html, copy-paste kode dibawah ini     Yang bercetak merah (Selamat Datang di website kami) diganti dengan kalimat anda       sendiri

(INGAT! HARUS DI PASTE SETELAH KODE JUDUL </h1> Lihat gambar dibawah

• Kemudian klik tombol Save • Marquee anda sudah terlihat

Page 63: materi workshop bikin web 1

Memperkecil ukuran gambar/foto

Foto dari kamera digital biasanya akan berukuran sangat besar. dan jika langsung di upload ke website:

• Nantinya gambar akan lambat di akses oleh pengunjung di website• memboroskan kapasitas hosting • Bisa membuat desain web "hancur" karena dengan ukuran foto yang terlalu    lebar biasanya akan merusak tampilan template 

Untuk memperkecil ukuran photo, langkahnya sangat mudah dan tidak perlu software khusus, hanya memerlukan program Paint yang biasanya sudah ada di komputer anda. Caranya sebagai berikut:sebelum di upload (masih di hardisk komputer anda) 

Page 64: materi workshop bikin web 1

1. Klik-kanan file photo yang akan di edit, dan pilih Edit:

2. Maka biasanya gambar akan terbuka dengan program Paint seperti tampilan berikut:

Page 65: materi workshop bikin web 1

3. Anda dapat melihat bahwa photo tersebut berukuran besar dan kurang bagus jika di upload ke website. Untuk memperkecil ukurannya, klik menu Image kemudian Strecth/Skew... maka akan muncul window seperti gambar berikut:

Page 66: materi workshop bikin web 1

4. Pada bagian Strecth, isilah kolom Horizontal dan Vertical dengan persentase pengecilan. Misalnya anda ingin memperkecil menjadi 40% saja. Maka isi Horizontal 40, dan Vertical 40, setelah itu klik OK. Lihat hasilnya dibawah ini dan bandingkan sebelum dan sesudahnya: 

Sebelum diperkecil Sesudah diperkecil

Gambar sudah mengecil. Jika anda Save (Ctrl+S), akan terlihat juga ukuran file. Pada photo yang saya contohkan diatas, sebelumnya berukuran 81,8 Kb. Namun setelah proses pengecilan gambar tersebut menjadi jauh "lebih ringan" menjadi 26,3 Kb saja. Gambar akan lebih cepat muncul di website dengan ukuran lebih kecil. Memperkecil gambar dengan Paint sebenarnya bisa dengan cara drag dengan moose, tapi cara tsb bisa membuat kualitas gambar menjadi tidak bagus. 

Page 67: materi workshop bikin web 1

Memasukkan Gambar

1. Klik halaman yang ingin dimasukkan gambar. Misalnya ingin memasukkan ke Halaman 2, maka klik menu Halaman2 (lihat gambar dibawah) Kalau anda ingin menampilkan di kolom pinggir, klik menu News (kolom kiri), News4 atau News5 (kolom kanan) 

Page 68: materi workshop bikin web 1

2. Klik tombol images seperti terlihat di gambar dibawah ini

3. di tampilan berikutnya klik tombol Browse server (lihat gambar dibawah) 

Page 69: materi workshop bikin web 1

4. Upload gambar dari hardisk anda ke website dengan klik tombol Browse. (lihat gambar dibawah) 

5. Di window yang muncul, pilih gambar yang mau dimasukkan dari hardisk anda 6. Kalau gambar sudah anda pilih, klik tombol Upload seperti pada gambar dibawah

Page 70: materi workshop bikin web 1

7. Kalau upload sudah berhasil akan muncul file gambarnya. Seperti terlihat pada contoh gambar dibawah ini. gambar yg baru saya upload adalah bernama BCA.jpg

8. Klik file gambar tsb maka akan tampil seperti dibawah ini, kemudian klik OK (lihat gambar dibawah) 

Page 71: materi workshop bikin web 1

9. Maka gambar akan tampil seperti dibawah ini

10. Gambar diatas adalah di posisi kiri, bagaimana jika ingin merubah di posisi kanan? Yaitu klik-kanan gambar lalu pilih Image properties (lihat gambar dibawah)

Page 72: materi workshop bikin web 1

11. Ditampilan selanjutnya klik Alignment lalu pilih Right (lihat gambar dibawah)

12. Maka gambar akan pindah ke sebelah kanan (lihat gambar dibawah)

Page 73: materi workshop bikin web 1

Membuat Link Download pada Gambar/Text

Dimaksudkan ketika visitor mengklik gambar/text, visitor bisa mendownload sebuah file, misalnya ebook atau software:

1. Upload terlebih dulu file dengan mengklik menu "DOWNLOADS" (lihat gambar dibawah)

2. Klik "Browse" kemudian pilih file yang akan dimasukkan. Setelah itu klik "Upload"

Page 74: materi workshop bikin web 1

3. Jika sudah berhasil di upload, file akan tertera (lihat gambar dibawah)

Page 75: materi workshop bikin web 1

4. Klik menu yang ingin ditampilkan link download. Lihat gambar dibawah (misalnya halaman 2)

Page 76: materi workshop bikin web 1

5. Blok kalimat yang akan dibuat link, lalu klik tombol Hyperlink seperti ditunjuk pada gambar dibawah

6. Di tampilan selanjutnya klik tombol "Browse Server" (lihat gambar dibawah)

Page 77: materi workshop bikin web 1

7. Di tampilan selanjutnya pilih "Download links" di "Switch to" kemudian klik file untuk target download (lihat gambar dibawah)

Klik "Ok“    lalu    Save.

Page 78: materi workshop bikin web 1

Membuat Link (ke website lain) Pada Gambar/Text

Dimaksudkan agar ketika visitor meng-klik gambar atau teks, akan masuk ke website lain.Jika ingin membuat link pada gambar, maka gambarnya harus anda upload dulu.

1. Klik gambar hingga muncul titik putih disekelilingnya seperti gambar berikut (atau blok pada text):

Page 79: materi workshop bikin web 1

2. Klik tombol hyperlink seperti gambar dibawah ini

3. Masukkan URLnya contoh dibawah ini jika ingin link ke yahoo.com

Page 80: materi workshop bikin web 1

4. Kalau ingin web target tampil di browser berbeda (ketika web target terbuka tidak mengganti tampilan web anda) maka klik Target seperti gambar dibawah ini, kemudian pilih New Window (_blank)

Page 81: materi workshop bikin web 1

Membuat Link Yahoo Messsenger

Maksudnya agar ketika anda sedang online yahoo messenger, maka otomatis di website akan tertera anda sedang online, dan pengunjung bisa chatting dengan anda melalui yahoo messenger. Lihat gambar dibawah

Page 82: materi workshop bikin web 1

1. Jika ingin menampilkan di kolom kiri masuk ke halaman News (lihat gambar dibawah)

 

2. Klik tab Resource pada menu. Maka tampilan halaman akan berubah dalam format kode HTML. (lihat gambar yg ditunjuk panah merah dibawah ini)

Page 83: materi workshop bikin web 1

3. Jika ada isian teks hapus saja seluruhnya KECUALI di bagian paling awal dengan kode <h1>News </h1> <p>#cmsimple hide# </p> (lihat gambar dibawah)

Page 84: materi workshop bikin web 1

<center><a href="ymsgr:sendIM?kode_ym_anda"><img src="http://opi.yahoo.com/online?u=kode_ym_anda&m=g&t=1" border="0" width="64" height="16"></a></center>

<center><a href="ymsgr:sendIM?kode_ym_anda"><img src="http://opi.yahoo.com/online?u=kode_ym_anda&m=g&t=14" border="0"></a></center>

4. Copy-paste kode dibawah ini jika anda ingin menampilkan icon YM seperti ini 

(yang bercetak merah kode_ym_anda diganti dengan id YM anda sendiri)

5. Sedangkan untuk menampilkan icon YM seperti ini masukkan kode HTML dibawah ini:

Page 85: materi workshop bikin web 1

6. Setelah itu save, maka akan terlihat seperti gambar dibawah ini:

Page 86: materi workshop bikin web 1

Menambah Link (ke halaman lain) Pada Gambar/Text

Dimaksudkan agar ketika visitor meng-klik gambar atau teks, akan masuk ke halaman lain.Jika ingin membuat link pada gambar, maka gambarnya harus anda upload dulu. 

1. Klik gambar hingga muncul titik putih disekelilingnya seperti gambar berikut (atau blok pada text):

Page 87: materi workshop bikin web 1

2. Kemudian klik tombol Internal link seperti ditunjuk pada gambar dibawah 

3. Lalu pilih (klik) halaman mana sebagai target link. Lihat gambar dibawah

4. Kemudian save. Link bisa dicoba setelah anda logout 

Page 88: materi workshop bikin web 1

Menampilkan video di website

Langkah menampilkan video di website

•Kunjungi Youtube.com•Misalkan anda ingin menampilkan video Mbah Surip, maka lakukan pencarian dengan mengisi kolom pencarian di bagian atas web, lalu klik Search. Lihat gambar dibawah ini:

Page 89: materi workshop bikin web 1

•Di halaman berikutnya pilih video yang mau anda tampilkan•Video akan tampil dan lihat copy kode embed yang berada disisi kanan (lihat gambar dibawah)

•Copy kode tsb, pastikan seluruh kode ter-copy (klik-kanan, lalu pilih copy)•Buka website anda, login seperti mau edit, lalu masuk ke halaman web yang ingin ditampilkan video

Page 90: materi workshop bikin web 1

•klik menu Source dulu lalu paste kode Embed video (lihat gambar dibawah)

•kemudian Save •Video bisa anda lihat setelah logout  Jika anda ingin menampilkan video anda sendiri, anda harus register dulu ke Youtube, lalu upload video anda ke Youtube, setelah itu copy-paste kode embednya ke website anda seperti cara diatas.

Page 91: materi workshop bikin web 1

Membuat variasi teks (font)

Untuk membuat variasi teks (font) sangat mudah, seperti program Word

Lihat gambar dibawah ini 

Page 92: materi workshop bikin web 1

Jika anda faham dan ingin memasukkan script atau kode html bisa ditampilkan dalam tampilan HTML dengan mengklik tombol Source seperti pada gambar dibawah ini

Silahkan berkreasi dengan field tsb 

Harap diperhatikan!: Untuk mengisi konten website jangan copy-paste dari Word atau website lain. Karena bisa membuat website error di kemudian hari. Jika ingin copy paste, prosesnya adalah: •Copy-paste ke program Notepad•Dari Notepad copy-paste ke website

Page 93: materi workshop bikin web 1

Membuat Tabel

1. Klik tombol tabel. Lihat gambar dibawah

 2. Tentukan jumlah baris dan kolom. Contoh dibawah ini adalah 2 baris dan 4 kolom. Di anjurkan Width 100%. Lihat gambar dibawah 

Page 94: materi workshop bikin web 1

3. Jika 2 baris dan 4 kolom jadinya seperti gambar di bawah ini

 4. Jika ingin menambah kolom caranya: Klik-kanan salah satu sel kemudian pilih "Column" lalu Insert Colum Before/After 

Page 95: materi workshop bikin web 1

5. Jika ingin mewarnai salah satu sel, caranya: Klik-kanan salah satu sel lalu pilih "Cell" pilih "Cell Properties"Lihat gambar dibawah

 6. Di tampilan selanjutnya pilih di warna tabel sepert ditunjuk pada gambar dibawah ini

 7. Kalau sudah menentukan warnanya, klik OK lalu Save