Tinkerbell Pink Glitter Wings

Minggu, 25 September 2016

Tutorial BLOG

1.  Buat Email Gmail terlebih dahulu

Jika belum punya email silahkan belajar cara membuat email Gmail terlebih dahulu. Mengapa demikian? Ya, karena saat kita akan login, mau pun mulai daftar ke tempat bikin blognya, yakni Blogger.com, disyaratkan telah memiliki akun email gmail (bukan yang lain seperti yahoo, hotmail dan lainnya). Ini tidak saja untuk tujuan bikin blog, tapi bisa juga untuk keperluan lain, seperti daftar facebook, upload video di Youtube, dan lain sebagainya, jadi tak ada ruginya bila kita membuatnya, lagian kita bisa memanfaatkannya sebagai alat komunikasi.
Sekarang ini email bahkan bisa dibuat sebagai alat untuk mencari penghasilan dari internet dengan mengikuti beberapa program periklanan yang memang khusus untuk promosi lewat email tersebut, dan mengenai ini akan kita bahas tuntas pada segmen selanjutnya.

2.  Masuk ke www.blogger.com

(jika tidak bisa masuk dengan cara klik di atas, maka cukup ketik di google kata “blogger”)
Setelah membuka alamat website resminya di atas maka anda akan melihat gambar seperti di bawah (jadi saat masuk yang diketik adalah blogger.com, tapi setelah jadi bagian akhir alamatnya adalah blogspot.com) Silahkan isi datanya dengan alamat email dan kata sandi email yang telah kamu buat sebelumnya, lalu klik ‘Masuk’:
cara daftar blogspot
3.  Mulai bikin blog baru
Setelah login selanjutnya kamu akan diarahkan ke halaman seperti yang tertera di bawah, silahkan klik tombol di sebelah kiri yang bertuliskan “Blog Baru”
cara membuat blog baru
4.  Beri Nama dan Pilih Alamat
Selanjutnya akan muncul halaman kecil yang mana terdapat 4 langkah singkat pembuatan blog di dalamnya
http://www.caraspot.com/wp-content/uploads/2015/01/daftar-blog-gratis.png
Penjelasan:
  1. Judul – Di bagian cara membuat blog gratis di blogspot ini isi dengan judul blogmu, sebaiknya yang sesuai dengan temanya agar mudah terindeks Google. Tapi ini bisa diganti kapan saja setelah blognya jadi.
  2. Alamat – Pada kolom ini anda harus pilih alamat blog gratisan yang belum digunakan orang lain, mislanya bloggue.blogspot.com dan sebagainya.  Jika sudah dipesan orang maka akan terlihat tanda seru (!) berwarna kuning seperti yang terlihat pada gambar atau kalau belum ada yang gunakan sama sekali maka akan tampak tanda benar atau centang berwarna biru. Jika sudah begitu lanjutkan ke step berikutnya.
  3. Template – Tampilan beberapa gambar yang terlihat ini adalah bentuk tampilan blogmu nantinya. Tapi tidak perlu khawatir karena ini masih bisa dirubah dengan yang lebih menarik dan keren dengan cara mempercantik nya melalui file template yang didownload di situs penyedianya yang gratis. Atau kalau belum paham, silahkan baca Cara Mengganti Template Blog yang sudah kami terangkan secara jelas bagaimana langkahnya hingga memiliki tampilan seperti web profesional dan berbayar.
  4. Klik ‘Buat Blog’ – Ini untuk men-save nama dan tampilan yang sudah dipilih dan blog gratisan sederhana anda pun telah jadi dan siap diisi berbagai artikel maupun penawaran bisnis di dalamnya.

5.  Mengisi dan Menulis Artikel

Setelah mempunyai blog maka langkah selanjutnya yang harus kita tahu adalah bagaimana menulis artikel di dalamnya dan apa saja yang dilakukan agar bisa mulai aktif dan dikunjungi banyak orang. Berikut prosesnya :

a.  Masuk ke halaman penulisan

posting artikel di blogger
Note :
  • Silahkan anda klik tombol warna oranye (no 1) yang bergambar pensil tersebut untuk mulai posting article,
  • Atau klik icon tanda panah kecil untuk memilih beberapa pengaturan, misal ‘Pos‘ untuk melihat semua artikel yang sudah ditulis, ‘Laman‘ untuk menulis artikel menu seperti profil, kontak dan sebagainya, ‘Komentar‘ untuk melihat siapa saja yang telah memberi comment, dan ‘Statistik‘ untuk melihat jumlah pengunjungnya per hari, minggu atau bulan. Setelah masuk di bagian itu, anda juga masih bisa melihat tombol pos atuu membuat artikel baru di bagian kiri samping yang juga tulisannya oranye.

b.  Mulai posting

cara menulis artikel di blog
Keterangan (sesuai angka):
  1. Untuk keterangan nomor 1 di sisi dengan judul artikel yang akan kamu publikasikan, usahakan jangan terlalu singkat dan kalau perlu sesuai dengan tema yang kamu ingin bahas agar mudah terindeks.
  2. Kolom untuk mengetik tulisan blog anda.
  3. Untuk pengaturan dan gaya artikel, seperti mem-boldhuruf miring atau memperbesar kata dan lainnya.
  4. Label adalah sama dengan nama dari kategori artikelnya. Ini gunanya untuk mengelompokkan jenis tulisan dalam satu kategori, missal ‘WordPress’ yang isinya segala menyangkut soal tutorial wordpress tersebut.
  5. Tombol kuning dengan tulisan ‘Publikasikan’ adalah yang kita klik setelah selasai menulis  agar artikel tersebut bisa online dan dibaca semua orang.
sumber : https://juvaanjana.blogspot.co.id/2016/09/langkah-langkah-membuat-blog.html

Jumat, 23 September 2016

Tutorial HTML


TUTORIAL HTML


       1. Pengenalan HTML
         Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kamu akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kamu pasti pengen bisa bikin halaman web yang memiliki kemampuan untuk berinteraksi dengan pengunjung secara lebih intens. Waktu itulah kamu perlu mulai belajar PHP. Setelah belajar PHP maka kamu bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kamu.
Saya akan menjelaskannya secara singkat.
HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung dan kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kamu dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kamu dan mempermudah proses desain web kamu seperti CSS dan Javascript. Kamu juga mungkin akan perlu menambah ketrampilan kamu dalam membuat desain web dangan berbagai aplikasi pembuat web seperti Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Fireworks dan Adobe.
Tetapi untuk saat ini kita akan konsentrasi ke materi belajar HTML yang menjadi dasar semua pemrograman web.
Perlu saya sampaikan di sini bahwa meskipun kamu sudah  menguasai berbagai aplikasi yang mempermudah desain web, tetapi walau bagaimanapun pada akhirnya kamu tetap akan memerlukan kemampuan untuk melakukan pemrograman hands on alias manual untuk melakukan berbagai tuning dalam program kamu.
Oh ya, sebelum saya lupa, saya perlu sampaikan bahwa tutorial belajar HTML ini hanya salah satu dari puluhan tutorial lain tentang HTML yang ada di prothelon. Saran saya, silakan lihat dulu daftar tutorial HTML ini dan pelajari tutorial-tutorial tersebut secara berurutan untuk mendapatkan hasil yang maksimal.
Siap? OK, kita akan mulai belajar HTML.
Pengenalan HTML
Apa yang dimaksud dengan file HTML?
–    HTML merupakan kependekan dari Hyper Text markup Language
–    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
–    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman
–    File HTML harus memiliki ekstensi htm atau html
–    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
Pengen Nyoba Bikin?
Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad).
Ketikkan teks berikut:


?
1
2
3
4
5
6
7
8
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
</html>
Simpan dengan nama “halamanku.htm” (jangan lupa tambahkan tanda kutip ganda pada nama filenya. Kalau lupa maka nama filenya akan menggunakan ekstensi default .txt sehingga menjadi halamanku.htm.txt).
Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kamu bikin. Klik OK, dan browser akan menampilkan halaman yang tadi kamu buat.
Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh di atas
.
  • Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama adalah . Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda garis miring “/”, dan kamu bisa melihat pasangan tag di akhir script yaitu .
  • Tag memberitahu browser bahwa inilah awal dari dokumen HTML. Tag pasangannya yaitu menyatakan bahwa inilah akhir dari dokumen HTML.
  • Teks di antara dan adalah teks informasi header. Informasi header ini tidak ditampilkan pada jendela browser.
  • Teks di antara adalah judul dokumen kamu. Judul ini akan ditampilkan di caption browser (lihat di bagian paling atas kanan dari browser kamu).</font></li> <li data-blogger-escaped-style="margin: 1px 0px; padding: 0px; text-align: justify;" style="margin: 1px 0px; padding: 0px; text-align: justify;"><font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Teks di antara tag <body> adalah teks yang akan ditampilkan pada jendela browser kamu.</font></li> <li data-blogger-escaped-style="margin: 1px 0px; padding: 0px; text-align: justify;" style="margin: 1px 0px; padding: 0px; text-align: justify;"><font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Dan terakhir, teks di antara <b> dan </b> akan ditampilkan dalam huruf tebal.</font></li> </ul> <div data-blogger-escaped-style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;" style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;"> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Nah, dengan penjelasan ini kamu mustinya udah mulai manggut-manggut dan merasa, ko ternyata belajar HTML gampang gini yah :). Mudah-mudahan.</font></p> </div> <div data-blogger-escaped-style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;" style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;"> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Sekarang kita akan lihat mengenai ekstensionnya. Sebagaimana sudah disampaikan di awal, kita bisa membuat file HTML dengan 2 ekstension yaitu .htm dan .html. Nah ekstension .htm ditujukan untuk operating sistem jaman dulu yang hanya mensupport ekstensi 3 huruf. Sedangkan ekstensi .html akan lebih aman digunakan jika OS dan aplikasinya support karena lebih jelas menunjukkan bahwa ini adalah file HTML.</font></p> </div> <div data-blogger-escaped-style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;" style="font-size: 13px; line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;"> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Sebagai catatan, setiap kamu melakukan perubahan pada file HTML kamu, maka kamu harus me refresh browser untuk melihat perubahan tampilannya.</font></p> </div> <div data-blogger-escaped-style="line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;" style="line-height: 19px; margin-bottom: 6px; margin-left: 10px; margin-top: 12px; padding: 0px; text-align: justify;"> <div data-blogger-escaped-style="font-size: 13px;" style="font-size: 13px;"> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif">Ok, tutorial belajar HTML sesi perkenalan cukup, kita akan melanjutkan ke level berikutnya tentang langkah - langkah membuat HTML</font></p> </div> <div data-blogger-escaped-style="font-size: 13px;" style="font-size: 13px;"> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif"><br></font></p> </div> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif"><font data-blogger-escaped-style="font-size: 13px;" style="font-size: 13px;">     </font>  2. Langkah - Langkah Membuat HTML</font></p> <p> <font data-blogger-escaped-style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif"><br></font></p> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.<a name="more"></a></div> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> <br></div> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.</div> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> <br></div> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :</div> <div style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> <br></div> <blockquote class="tr_bq" style="color: rgb(34, 34, 34); font-family: Georgia, Utopia, "Palatino Linotype", Palatino, serif; font-size: 15.4px; line-height: 21.56px; background-color: rgb(255, 249, 238);"> <html><br><head><br><title>Belajar HTML


Hallo, selamat belajar HTML.
 


Catatan : Nomor yang muncul di setiap baris tidak perlu anda ketik, itu hanya tampilan untuk menunjukkan nomor baris kode yang ada. Jadi ketikkan seperti gambar berikut ini :

Selanjutnya silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan “latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.


Kemudian tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan cara memilih dan klik double.

Jika sudah benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan aplikasi browser yang ada di komputer anda seperti Internet Explorer atau Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti berikut.

Sampai disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan bagaimana cara melihat tampilan HTML yang anda buat melalui browser. Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode HTML yang diberikan maka anda tahu bagaimana mencobanya.

Pada tahap belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML, anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML yang lebih kompleks.