SlideShare ist ein Scribd-Unternehmen logo
1 von 95
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.
•   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.
1. Bahasa Pemrograman HTML
  HyperText 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.
2. Bahasa Pemrograman PHP
  PHP 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).
3. Bahasa Pemrograman ASP
 ASP 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.
4. Bahasa Pemrograman XML
  Extensible 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.
5. Bahasa Pemrograman WML
 WML 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.
6. Bahasa Pemrograman PERL
 Perl 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.
7. Bahasa Pemrograman CFM
 Cfm dibuat menggunakan tag ColdFusion dengan
 software Adobe ColdFusion / BlueDragon /
 Coldfusion Studio.
 Syntax coldfusion berbasis html.
8. Bahasa Pemrograman Javascript
 Javascript 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.
9. Bahasa Pemrograman CSS
  Cascading 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).
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.
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.
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.
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.
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.
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
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.
Apa itu Domain Name
      (Nama Domain)
 Domain Name adalah nama unik yang 
digunakan untuk mengidentifikasi server 
  komputer di jaringan komputer yang 
      tergabung dalam internet.
Saatnya Praktek

 Let’s Have Fun…..
Langkah 1 Registrasi Hosting
Buka  www.freehostia.com  dari  browser,  kemudian  akan  ditampilkan  halaman 
seperti berikut : 
Klik pada sign up now atau klik banner FREE seperti pada 
gambar berikut : 
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. 
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. 
Klik login V.2 untuk masuk ke control panel, terlihat 
seperti gambar berikut : 
Untuk  memulai  upload file  masuk ke  panel  File  Manager,  
akan  terlihat  halaman file manager seperti berikut :
Klik  pada  folder  yang  tersedia  dalam  contoh  adalah workshopbikinweb.tk,
selanjutnya ditampilkan halaman upload file seperti gambar berikut : 
Klik choose file untuk memulai upload
 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 : 
Langkah 2 Registrasi domain
1. Mendaftar Domain Gratis Dot TK
Oke, 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.
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.
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.
2. Mengarahkan Server DNS
Jika 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.
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
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.
3. Merubah Setting DNS
Jika 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.
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.
Cara install script web
  Setelah anda login cpanel (seperti diterangkan langkah sebelumnya)


• Di halaman cpanel anda klik menu File 
  Manager (lihat gambar dibawah)
Jika muncul window seperti dibawah 
    ini klik folder nama web anda
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
Lalu beri tanda centang pada opsi unpack archive after upload




Apabila muncul pesan seperti gambar di bawah ini, klik ok
Lalu klik tombol upload file




    Maka akan tampil seperti berikut




Tunggu sampai proses upload selesai lalu klik OK
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)
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
setelah membuka folder, dan ingin kembali, klik menu UpLevel 




Kini website sudah bisa diakses melalui domain anda.
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
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
Menyusun Menu
Menambah Halaman Baru

Misalnya anda ingin menambah menu baru bernama Halaman 4 dibawah
Halaman 3. (lihat gambar dibawah)
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:
Menambah sub halaman

Misalnya ingin membuat submenu untuk Halaman 2 (lihat gambar dibawah)
hal ini berfungsi misalnya
•Furniture (menu utama)
      •Meja (submenu)
      •Kursi (submenu)
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
4. Sub halaman akan jadi seperti tampilan berikut




  Kesimpulannya kalau mau buat submenu dijadikan Heading 2.
  • Furniture
      •Meja ==> Heading 2
      •Kursi ==> Heading 2
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:
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)
Karena menu2 tersebut ada kode utk menampilkan kolom samping. Lihat gambar dibawah:




Dalam mengedit hindari edit bagian judul dan kode dibawahnya. Lihat gambar dibawah:
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)
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.
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 kiri
                         menu News4 = akan menampilkan di kolom kanan
                         (atas)
                         menu News5 = akan menampilkan di kolom kanan
                         (bawah)
                         Singkatnya bisa dilihat pada gambar disamping
Berikut ini adalah contoh seandainya anda ingin menampilkan logo bank di kolom kiri
1. 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...
MENGISI HALAMAN
Membuat animasi teks berjalan (Marquee)

            Misalnya anda ingin membuat Marquee seperti dibawah ini
                      SELAMAT DATANG DI WEBSITE KAMI
           Dengan tampilan di halaman web seperti tampilan dibawah ini:
• Login ke website anda
• Buka halaman yang ingin ditampilkan marquee
• Klik tombol HTML (lihat gambar dibawah)
• Pada tampilan html, copy-paste kode dibawah ini 
    Yang bercetak merah (Selamat Datang di website kami) diganti dengan kalimat anda   
    sendiri

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

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




  • Kemudian klik tombol Save 
  • Marquee anda sudah terlihat
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) 
1. Klik-kanan file photo yang akan di edit, dan pilih Edit:




2. Maka biasanya gambar akan terbuka dengan program Paint seperti tampilan berikut:
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:
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. 
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) 
2. Klik tombol images seperti terlihat di gambar dibawah ini




3. di tampilan berikutnya klik tombol Browse server (lihat gambar dibawah) 
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
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) 
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)
11. Ditampilan selanjutnya klik Alignment lalu pilih Right (lihat gambar dibawah)




 12. Maka gambar akan pindah ke sebelah kanan (lihat gambar dibawah)
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"
3. Jika sudah berhasil di upload, file akan tertera (lihat gambar dibawah)
4. Klik menu yang ingin ditampilkan link download. Lihat gambar dibawah (misalnya halaman 2)
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)
7. Di tampilan selanjutnya pilih "Download links" di "Switch to" kemudian klik file untuk target 
download (lihat gambar dibawah)




 Klik "Ok“    lalu    Save.
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):
2. Klik tombol hyperlink seperti gambar dibawah ini




3. Masukkan URLnya contoh dibawah ini jika ingin link ke yahoo.com
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)
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
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)
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)
4. Copy-paste kode dibawah ini jika anda ingin menampilkan icon YM seperti ini 




        <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>


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




      <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>


        (yang bercetak merah kode_ym_anda diganti dengan id YM anda sendiri)
6. Setelah itu save, maka akan terlihat seperti gambar dibawah ini:
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):
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 
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:
•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
•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.
Membuat variasi teks (font)
Untuk membuat variasi teks (font) sangat mudah, seperti program Word


Lihat gambar dibawah ini 
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
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 
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 
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 

Weitere ähnliche Inhalte

Ähnlich wie materi workshop bikin web 1

Mengelola isihalamanweb5 (ind)
Mengelola isihalamanweb5 (ind)Mengelola isihalamanweb5 (ind)
Mengelola isihalamanweb5 (ind)
Sayugo
 
716 What Is Rekweb
716 What Is Rekweb716 What Is Rekweb
716 What Is Rekweb
Dedi Irawan
 
Html makalah destika
Html makalah destikaHtml makalah destika
Html makalah destika
aditamayahya
 
Mengelola isi halaman web 5
Mengelola isi halaman web 5Mengelola isi halaman web 5
Mengelola isi halaman web 5
Eko Supriyadi
 
01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web 01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web
Amiroh S.Kom
 
MUHAMMAD ALTHAF FAISHAL.docx
MUHAMMAD ALTHAF FAISHAL.docxMUHAMMAD ALTHAF FAISHAL.docx
MUHAMMAD ALTHAF FAISHAL.docx
SiapaIni3
 
Razaan Ardy Khadaffi tugas pak idham.docx
Razaan Ardy Khadaffi tugas pak idham.docxRazaan Ardy Khadaffi tugas pak idham.docx
Razaan Ardy Khadaffi tugas pak idham.docx
SiapaIni3
 
Tugas pbw lia ririn pdf
Tugas pbw lia ririn pdfTugas pbw lia ririn pdf
Tugas pbw lia ririn pdf
liaririn
 

Ähnlich wie materi workshop bikin web 1 (20)

pengenalan kepada laman web
pengenalan kepada laman webpengenalan kepada laman web
pengenalan kepada laman web
 
Mengelola isihalamanweb5 (ind)
Mengelola isihalamanweb5 (ind)Mengelola isihalamanweb5 (ind)
Mengelola isihalamanweb5 (ind)
 
02. Website _ E-Commerce.pdf
02. Website _ E-Commerce.pdf02. Website _ E-Commerce.pdf
02. Website _ E-Commerce.pdf
 
Proposal Aplikasi WEB Rental Mobil
Proposal Aplikasi WEB Rental MobilProposal Aplikasi WEB Rental Mobil
Proposal Aplikasi WEB Rental Mobil
 
716 What Is Rekweb
716 What Is Rekweb716 What Is Rekweb
716 What Is Rekweb
 
Html makalah destika
Html makalah destikaHtml makalah destika
Html makalah destika
 
Mengelola isi halaman web 5
Mengelola isi halaman web 5Mengelola isi halaman web 5
Mengelola isi halaman web 5
 
01 how web works
01 how web works01 how web works
01 how web works
 
01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web 01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web
 
Jurnal jadi j oe
Jurnal jadi j oeJurnal jadi j oe
Jurnal jadi j oe
 
Jurnal Jusepto
Jurnal JuseptoJurnal Jusepto
Jurnal Jusepto
 
Buku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascriptBuku pemrograman web html-css-javascript
Buku pemrograman web html-css-javascript
 
Laporan
LaporanLaporan
Laporan
 
MUHAMMAD ALTHAF FAISHAL.docx
MUHAMMAD ALTHAF FAISHAL.docxMUHAMMAD ALTHAF FAISHAL.docx
MUHAMMAD ALTHAF FAISHAL.docx
 
Tugas 1 rekayasa web 1412511519 - andhika desta permana
Tugas 1 rekayasa web   1412511519 - andhika desta permanaTugas 1 rekayasa web   1412511519 - andhika desta permana
Tugas 1 rekayasa web 1412511519 - andhika desta permana
 
materi 1 WEB.pptx
materi 1 WEB.pptxmateri 1 WEB.pptx
materi 1 WEB.pptx
 
Pemrograman Web 1 - Pengenalan Web Dasar
Pemrograman Web 1 - Pengenalan Web DasarPemrograman Web 1 - Pengenalan Web Dasar
Pemrograman Web 1 - Pengenalan Web Dasar
 
Razaan Ardy Khadaffi tugas pak idham.docx
Razaan Ardy Khadaffi tugas pak idham.docxRazaan Ardy Khadaffi tugas pak idham.docx
Razaan Ardy Khadaffi tugas pak idham.docx
 
Web 1.0 4.0
Web 1.0 4.0Web 1.0 4.0
Web 1.0 4.0
 
Tugas pbw lia ririn pdf
Tugas pbw lia ririn pdfTugas pbw lia ririn pdf
Tugas pbw lia ririn pdf
 

materi workshop bikin web 1