Tutorial Web Page Maker (WPM)

1. Tentang Program WEB PAGE MAKER V.2

 WEB PAGE MAKER V.2 :

Web Page Maker adalah aplikasi untuk membuat WEB SITE dengan cara yang sangat mudah, dan menarik. Cocok sekali untuk pemula yang ingin cepat bisa. WPM hanya dapat membuat web yang statis.

Mengaktifkan WEB PAGE MAKER V.2 :

² Klik Menu Start

² Pilih All Program (pada classic start menu pilih Program)

² Pilih WEB PAGE MAKER V.2

² Klik WEB PAGE MAKER V.2

2. Mengidentifikasikan Fungsi Menu, Tool dan Icon

			Tool Bar				Lembar Kerja				Site Panel

Mengenal Tampilan Lembar Kerja WEB PAGE MAKER V.2

 3. Membuat Halaman Web

 3.1. Membuat Halaman Baru

Dapat dilakukan dengan cara :

² Klick File – New Site

3.2. Menambah Halaman Web

Dapat dilakukan dengan cara :

² Pada Site Contents Klick New Page

3.3. Menghapus Halaman Web

Dapat dilakukan dengan cara :

² Klick Halaman yang akan dihapus – Klick Delete pada Site Contents

3.4. Meng-Copy Halaman Web

Dapat dilakukan dengan cara :

² Klick Halaman yang akan dicopy – Klick Clone Page pada Site Contents

4. Mendesain Web

 4.1. Memasukkan Text pada Halaman Web

Dapat dilakukan dengan 2 (dua) cara :

1. Klick Insert – Text

2. Klick Text Pada Toolbar

        4.2. Memasukkan Gambar pada Halaman Web

Dapat dilakukan dengan cara :

1. Klick Insert – Image – Form file (file gambar yang berada pada data anda)

2. Klick Insert – Image – Form library (file gambar yang disediakan oleh web page maker)

        4.3. Memasukkan Audio pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Object – Audio

4.4. Memasukkan Video pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Object

1. Windows Media Video, dengan type file (*.avi; *.asf; *.asx; *.wmv; *.wmx)

2. Real Media Video, dengan type file (*.ra; *.rm; *.ram)

3. Quick Time, dengan type file (*.qt; *.mov; *.movie)

4.5. Memasukkan Animasi Flash pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Flash Movie

4.6. Memasukkan Text Berjalan (Marquee) pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Marquee

4.7. Memasukkan Animasi Java pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Ready-to-use Java Scripts

² Pilih salah satu

² Klick OK

4.8. Memasukkan Warna Background pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Page – Page Properties – Appearance

4.9. Memberikan Tombol pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Insert – Navigation Bar

² Pilih salah satu

² Klick OK

4.10. Memberikan Background Music pada Halaman Web

Dapat dilakukan dengan cara :

² Klick Page – Page Properties – Background

5. Membuat halaman Web Pribadi dengan Template

 5.1. Memilih Web Template

Dapat dilakukan dengan cara :

² Klick File

² New Site form Template

² Pilih Template, sebagai contoh penulis memilih Template Personal

² Personal002

² OK

² Pada Template personal002 hanya disediakan 3 halaman web

1. index

2. work

3. articles

² Namun pada Template personal002 kita juga dapat menambahkan halaman (baca point 3 pada halaman 2 diatas)

Untuk melihat hasilnya di Browser klick File – Preview in Browser (Short Cut F5)

5.2. Mengedit Halaman Web Template

1. Mengedit Text

Dapat dilakukan dengan cara :

² Klick Kanan (pada text yang akan dirubah) – Edit text

² OK

² Sebagai contoh penulis akan mencoba merubah text pada halaman index, seperti dibawah ini :

2. Mengganti Gambar

Dapat dilakukan dengan cara :

² Klick Kanan (pada gambar yang akan dirubah) – Change Image

² Open

6. Menyimpan Halaman Web

 6.1. Dapat Menyimpan File dalam bentuk Web Page Maker V.2 (.wss)

² Klick File – Save As

6.2. Menyimpan File dalam bentuk HTML (standar ektension pada website)

Dapat dilakukan dengan cara :

² Klick File – Export to HTML

² Klick Make New Folder (untuk membuat folder baru dengan nama Latihan Web)

² OK

7. Menampilkan Halaman Web yang telah di Export

  Setelah File Di Export dalam bentuk HTML, maka kita dapat melihat hasilnya dengan cara :

a. Buka Explorer (Klick Kanan pada menu Start – Pilih Explorer)

b. Klick dua kali pada Folder My Document

c. Klick dua kali pada Folder Latihan Web

d. Pada Folder Latihan Web Klick dua kali pada file Index (index.html)

 8. Mengedit Halaman Web yang telah di Simpan

 8.1. Mengedit Halaman dalam bentuk Web Page Maker V.2 (.wss)

a. Buka Explorer (Klick Kanan pada menu Start – Pilih Explorer)

b. Klick dua kali pada Folder My Document

c. Klick dua kali pada Folder Latihan Web

d. Klick dua kali pada File website saya

8.2. Mengedit Halaman dalam bentuk HTML (standar ektension pada website)

Untuk mengedit halaman dalam bentuk HTML, anda dapat menggunakan Software lain seperti Microsoft Frontpage, dikarenakan software Web Page Maker V.2 tidak mendukung ektension HTML.

https://rusnakosasih.wordpress.com/2007/09/23/web-page-maker-v-2/

HTML

Jika anda tertarik untuk belajar membuat website atau ingin menjadi web programmer, maka HTML adalah hal pertama yang harus anda pelajari. Karena, melalui HTML inilah nantinya tampilan web bisa tercipta. Selain itu, pengetahuan tentang HTML ini sangat diperlukan jika anda ingin mempelajari bahasa web lainnya seperti css, php, jquery, dll atau jika anda ingin melakukan pengeditan pada suatu template/tampilan web/blog.

Struktur dasar sebuah dokumen HTML

HTML itu sebenarnya sangat mudah yang penting anda serius dan dengan senang hati mempelajarinya, mengikuti langkah demi langkah secara bertahap, langsung praktek dan terus latihan, dan jangan lupa berdo'a. Insya Allah sehari dua hari sudah bisa menguasai dasar-dasarnya.

Mengenal HTML

• HTML adalah singkatan dari HyperText Markup Language
• HTML bukanlah sebuah bahasa pemrograman
• Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
• Tag markup memberitahukan web browser bagaimana harus menampilkan sebuah halaman
• File HTML memiliki ekstensi .htm atau .html
• Software-software yang bisa digunakan untuk membuat sebuah file HTML  isalnya Notepad, Notepad ++, Adobe Dreamweaver, dll.

Praktek Membuat Halaman Web Sederhana dengan HTML

1. Buka Notepad, caranya klik start > All Programs > Accessories > Notepad.
2. Copy code dibawah ini, kemudian paste di Notepad
<html>
<head> 
<title>Ini Judul Websiteku</title> 
</head> 
<body> 
Ini adalah isi halaman webku 
</body> 
</html>



Simpan dengan cara klik file > Save AS dan tentukan lokasi penyimpananya. Pada Filename ketikan web pertamaku.html dan pada Save As Type pilih All Files.
Setelah tersimpan double klik pada file web pertamaku.html sehingga otomatis web browser akan terbuka dan akan tampil seperti ini :

Mengenal Elemen HTML

Ketika anda membuka sebuah halaman web anda akan melihat beberapa bagian seperti judul, sebuah paragraf, banner-banner, link-link, menu2, dll. itulah elemen-elemen dari sebuah dokumen HTML.

Sebuah elemen terdiri dari tiga buah bagian penting :

1. Tag Pembuka, ditandai dengan kurung sudut <>, contoh <body>
2. Isi/Konten, bisa berupa teks biasa atau tag lain
3. Tag Penutup, ditandai dengan kurung sudut dengan garis miring </>. contoh </body>

Formatnya :

<nama tag>teks atau isi yang ditampilkan</nama tag>

Contoh :

<p>isi paragraf</p>

Sebuah elemen HTML bisa saja berisi satu atau lebih elemen-elemen lain misalnya seperti ini :

 

 <body><p>isi paragraf</p></body>

 http://www.transiskom.com/2013/06/belajar-html-untuk-pemula.html

 

 

Tutorial Blogger Lengkap

Part 1 : Cara Membuat Blog Blogspot Dari Awal

Era media sosial saat ini, sebagai manusia kita dituntut agar tak ketinggalan dengan kemajuan teknologi. Blog sebenarnya bukanlah barang baru. Saya mengenal blog sebelum Blogger diakui oleh google dan hingga sekarang masih ngeblog.
Mari kita belajar sama-sama. Pertama-tama kita buat email gmail dulu (syarat mutlak) saya pikir semuanya sudah tahu membuat gmail. Kalau masih ada yang belum tahu, cari saja di google, pasti banyak. Setelah punya gmail, selanjutnya kita ikuti langkah berikut ini. :

1. Dibrowser anda ketikan blogger.com. Setelah mengisikan email yang telah anda buat sebelumnya, langkah kedua dilakukan.

2. Dilangkah ini gampang saja, langsung klik 'Lanjutkan ke Blogger'

3. Akan tampil gambar seperti berikut. Anda langsung klik 'Blog Baru' saja.

4. Setelah mengisi 'Judul' dan 'Alamat' lalu pilih salah satu 'Template' yang disediakan. Di blog ini kita pilih tema sederhana. Setelah itu, klik 'Buat Blog!'.
Penjelasan : Judul adalah nama blog anda, seperti blog ini 'Cara Blog' sementara Alamat adalah URL, seperti blog ini alamatnya adalah blogoooblok.blogspot.com. 

5. Jadilah blognya, seperti ini tampilan awalnya, kosong bukan, tapi sekarang sudah ada, karena Anda sudah membaca tulisan ini.

 

Part 2 : Cara Mudah Mengganti Tampilan Blogspot

Banyak blogger yang tidak mau susah payah mendesain atau mengutak atik tampilan blognya. Apalagi template bawaan blogspot bagi sebagian orang tidak menarik sehingga cenderung mengambil template jadi yang telah dimodifikasi oleh webmaster lain.

Padahal template bawaan blogspot saat dimodifikasi juga bisa tampil menarik, seperti blog ini. hehe

Hanya saja, tidak semua juga paham bagaimana mengganti tampilan tersebut sesuai dengan keinginan. Maka dari itu dalam postingan ini, kita akan membahas bagaimana mengganti tampilan blogspot dengan template jadi milik orang lain.

Berikut ini langkah-langkah mengganti tampilan blogspot :

• Pertama-tama yang harus dilakukan adalah mendownload template yang akan digunakan. Di luar sana ada banyak pilihan, saya tidak menyarankan situs mana pun, silahkan cari melalui mesin pencari Google. Usahakan file sudah dalam bentuk XML.

• Setelah memilih template yang clean, fast loading dan SEO Friendly. Ada baiknya Anda mengenali dulu template yang akan digunakan, baca review templatenya kalau ada dan sebisa mungkin Test ke-SEO-an demo templatenya di Chkme serta test loadingnya di GTMetrix.
• Jika semua telah sesuai, selanjutnya login ke blogspot Anda. Pada contoh kali ini, bloGoooblok ~ mencobanya disalah satu blog tentang film dengan template magazine.
• Klik Template atau Tampilan pada Dashboard
• Klik menu Backup/Restore (Cadangkan/Pulihkan) di bagian kanan atas Dashboard Blog.

• Klik Choose File / Pilih File. Klik file ekstensi XML yang sudah didownload/diekstrak.

• Klik Upload (Unggah) dan tunggu hingga selesai.

Gimana, mudah bukan!

Kelihatannya sih mudah. Namun hampir semua template jadi membawa pengaturan bawaan yang selanjutnya harus diubah. Olehnya itu, harus dilakukan lagi beberapa tahap berikut ini :

• Jika di template baru Anda ada logo gambar silahkan menggantinya dengan logo versi Anda di menu Lay Out (Tata Letak) > Header. Kadang-kadang ada template yang logonya di dalam (kode HTML), cari file tersebut dan ganti dengan URL logo Anda.
• Ganti nama-nama menu dan link-nya dengan menu yang Anda inginkan. Caranya, klik Template > Edit HTML > cari menu tersebut (CTRL+F) dan Ganti/Ubah.
• Kadang-kadang ada template yang menu HOME-nya menggunakan link desainer template. Cek menu dan link home di dalam template. Jika linknya seperti ini, <a href='/'>HOME</a>, tidak usah diubah, sudah benar.
• Anda bisa mengganti warna huruf dan warna lainnya dengan mengganti kode warna yang ada.
• Cek link RSS Feed/Subscribe, apakah masih kosong atau menggunakan FeedBurner ID yang lain. Ganti dengan FeedBurner ID Anda.
• Cek juga link SEARCH (jika ada). Arahkan link searchnya ke blog Anda (jika ada nama blog lain, ganti dengan nama blog Anda). Misalnya, ada kode begini: <form id="searchform" action="http://blogoooblok.blogspot.com/search".../>, maka tulisan merah itu silahkan diganti dengan nama blog Anda.
• Cek link footer bagian "Copyright (c) Tahun NAMA BLOG. All right reserved", apakah sudah mengarah ke nama blog Anda atau ke nama blog lain. Jika yang muncul nama blog lain, misalnya nama template, ganti dengan nama blog Anda. Umumnya sih sudah mengarah ke nama blog Anda. Tapi ada juga yang menggunakan nama template. Harus diperhatikan ada beberapa penyedia template yang keberatan link footer ini diubah, jika demikian biarkan saja.

Disatu sisi, merubah tampilan blog dengan template jadi milik orang lain adalah langkah mudah, namun ada baiknya sebagai blogger harusnya menggunakan blog dengan tampilan hasil kerja tangan sendiri. Selain sesuai dengan keinginan, kita juga bisa lebih pintar.

 

Part 3 : Cara Mudah Membuat Sitemap di Blogger

Menghadirkan sitemap pada blog punya keuntungan tersendiri, karena akan memudahkan pengunjung mencari artikel lainnya dalam blog.

Namun karena blogspot tidak menyediakan layanan ini secara defuld, maka sebagai pemilik kita diberi kesempatan membuatnya. Dalam tulisan ini kita akan buat sitemap di blogger dengan mudah.
Selanjutnya mari kita buat.

Seperti biasa, pertama-tama login ke blogger Anda. Pilih 'Laman'. (Lihat Gambar).

 

 Lalu klik 'Laman Baru' pilih 'Laman Kosong'

Jika telah terbuka. Isikan 'Judul laman' sesuai dengan keinginan Anda. Sebagai contoh dalam blog ini kita gunakan kata 'Sitemap'. Setelah itu klik 'HTML'.

Masukkan script HTML berikut, copy paste saja.

<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://blogoooblok.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Tulisan berwarna merah pada script diatas Anda rubah menjadi alamat blog Anda. Jika sudah, silahkan publikasikan. Tapi jika tak merasa yakin, silahkan klik 'Pratinjau' dulu. Jika sudah oke, 'Publikasikan' deh...

Dengan menggunakan script diatas, maka tampilannya akan memanjang terus kebawah, seperti gambar ini.

Untuk menggunakan sitemap berbeda, kita juga bisa menggunakan skrip ini, (ganti kode yang berwarnah merah dengan blog Anda)

<div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://blogoooblok.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Tampilannya seperti ini:

Untuk yang kedua ini lebih dinamis dengan kolom, dan scroll. Ini memungkinkan bagi pemilik blog yang telah memiliki banyak postingan. Silahkan dipilih, mana yang cocok dengan kepribadian Anda. Gimana mudah kan...!

 

Part 4 : Cara Menampilkan Kolom Komentar Google+

Secara defuld blogspot menampilkan kolom komentar yang sudah terkoneksi dan tanpap indah. Namun beberapa blogger merasa tidak nyaman dengan kolom komentar pada blogspot.

Sebenarnya ada banyak pilihan bagi blogger untuk menggunakan kolom komentar, salah satu pilihan adalah menggunakan kolom komentar dari Google+. Bagi mereka yang selama ini lebih aktif bersosial media menggunakan Google+ sangat cocok menggunakan kolom komentar ini di blognya.

Namun bagi beberapa orang, memasang kolom komentar Google+ adalah perkara sulit, padahal pilihan ini sudah diinterkoneksikan dengan blogspot. Cara memasangnya pun cukup mudah.

Olehnya itu, pada postingan blogoooblok kali ini kita akan membahas cara memasan kolom komentar di blog. Secara umum penggunaan kolom komentar Google+ sangat membantu, utamanya bagi search enggine.

Baiklah berikut cara-caranya :

• Login ke dasbor blog Anda. 
•  Lalu pilih tab Google+ lalu centang Gunakan Google+ Komentar di blog Ini. (lihat gambar). 

• Setelah itu refres blog Anda dan buka satu postingan, kolom komentar Google+ akan tampil disana. 

Walau saya sendiri menyukai kolom komentar ini, namun ada satu kekurangan saat menggunakan kolom komentar Google+. Kita tidak akan pernah tahu siapa saja yang sudah berkomentar pada postingan kita, karena google tidak memberikan kita kewenangan untuk melakukan moderisasi.

 

Part 5 : Cara Memasukkan Video Kedalam Postingan Blog

Fenomena Youtube tak bisa dipungkiri sedang boomingnya saat ini. Karena peminatnya yang tinggi, banyak diantara blogger juga menyertakan video Youtube kedalam postingan. Seperti video dibawah ini. 

Menyertakan video kedalam postingan saat ini sudah menjadi kebutahan. Hal inilah yang disadari oleh blogspot sehingga memberikan kita kemudahan menyertakan video disetiap artikel yang terkait. 

Dulu, diawal-awal blogspot hadir, video dari Youtube harus dimasukkan secara manual kedalam postingan. Namun kini, cara memasukkan video Youtube jauh lebih mudah. 

Pada postingan ini kita akan membahas dua cara memasukkan video Youtube kedalam postingan. Soal fungsi dan keutamakan video Youtube dalam postingan, akan dibahas terpisah. 

Ada dua cara memasukkan video Youtube kedalam postingan :

Cara Pertama

• Jika Anda lihat video Google diatas, itu saya masukkan melalui cara sederhana. Yakni, login ke akun blogspot Anda, lalu pilih Entri Baru untuk membuat postingan. Jika Anda sudah menyiapkan artikel, pilih lokasi yang akan Anda bari video, setelah itu, klik gambar tage action pada menu pilihan dibagian atas. Lihat gambar. 

• Setelah mengklik, Akan muncul jendela baru. Disini ada banyak pilihan dalam menu, Anda bisa mengupload video buatan sendiri dari komputer Anda atau bisa lewat Youtube. Untuk Youtube pun ada dua pilihan, melalui kanal Anda di Youtube atau video milik orang lain di Youtube. Kita pilih yang kedua, menggunakan video orang lain di Youtube. 
• Karena kita akan menggunakan video orang lain di Youtube kedalam postingan kita, pertama-tama ke Youtube-lah mengambil URL video tersebut, setelah dicopy, paste tepat dikolom yang disediakan, lalu klik icon cari disampingnya. Secara otomatis, video itu akan muncul dibagian bawah. Anda sisa memilih dan klik Pilih. Video tersebut akan menyatu dengan postingan Anda. Contohnya video diatas. 

Cara Kedua

• Bukalah Youtube dan cari video mana yang ingin Anda tampilkan. Setelah dipilih, lihat bagian bawah Video. Pilih Share lalu pilih Embed. Copy script yang ada dibawahnya kedalam postingan Anda. Jika Anda ingin mengatur ukuran video, silahkan diatur lewat tombol dibawah script, ada tulisan Video size. 

• Selanjutnya ke postingan Anda yang akan diberi video. Untuk menampilkan link video yang tadi diambil dari Youtube, pilih mode HTML pada postingan, dan paste script tersebut dilokasi yang Anda inginkan. Soal ukurannya, perhatikan kata width="320" height="266" di script yang Anda copy, silahkan rubah sesuai kebutuhan dan size postingan Anda. 

• Jika telah selesai, kembalikan ke mode Compose dan publish tulisan Anda jika selesai. Kini video youtube telah turut serta dalam postingan Anda. 

Dari dua cara diatas, silahkan Anda pilih sesuai kebutuhan. Mau yang simpel, atau yang sedikit lebih rumit. Dua-duanya menampilkan hasil yang sama. Semoga penjabaran diatas memberi manfaat, tak ada salahnya pula berdiskusi.

http://www.blogooblok.com/2014/03/cara-memasukkan-video-kedalam-postingan.html