Rabu, 28 September 2016

Tutorial Membuat HTML Dasar

Pengetahuan HTML sebernarnya tidak hanya diperlukan kalau kita ingin terjun di dunia bisnis online. Untuk memperindah tampilan blog, sedikit banyak akan menuntut kemampuan kita dalam mengedit kode – kode HTML. Walaupun kita menggunakan blog engine seperti WordPress yang mempunyai plugin – plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar atau bagian lainnya, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya yang mengharuskan kita menguasai dasar – dasar kode atau script HTML.

Untuk belajar HTML anda tidak perlu membeli modul khusus cara membuat kode HTML, juga tidak perlu berguru pada penyedia jasa SEO atau jasa SEO terbaik sekalipun. Dengan membaca artikel berikut ini saja anda sudah bisa belajar HTML sesuai keperluan anda untuk mengedit website anda. Pengertian HTML secara awam seperti saya adalah serangkaian kode – kode bahasa pemrograman yang digunakan untuk membangun website yang akan membentuk halaman – halaman situs setelah dionlinekan ke internet.

Untuk mempermudah pengertian anda dalam belajar HTML, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat mengikutinya dengan praktek pula. Bagi anda yang masih pemula, langsung saja kita lihat pembahasan kode HTML berikut ini :

Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:

<html>

<head>

<title>Tulis Judul Anda di Sini</title>

<meta name=”description” content=”tulis deskripsi/penjelasan singkat situs anda di sini”>

<meta name=”keyword” content=”tulis kata kunci halaman anda di sini”>

</head>

<body>

Di sini adalah konten / isi halaman anda

</body>

</html>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML

Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik ” start ” pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode – kode HTML di bawah ini :

<html>

<head>

<title>Modul Belajar HTML</title>

<meta name=”description” content=”Modul belajar HTML untuk pemula”>

<meta name=”keyword” content=”modul html,belajar html”>

</head>

<body>

Modul HTML ini berisi latihan – latihan sederhana untuk beljar membuat sebuah halaman website agar dapat online di internet. Bagi anda yang masih pemula sebaiknya mengikutinya dengan memparaktekkan secara langsung agar lebih mudah dalam memahami setiap variasi kode – kode HTML.

</body>

</html>

Setelah selesai menuliskan kode – kode HTML di atas kemudian anda simpan. Caranya : klik ” file ” kemudian pilih ” save as ” tentukan lokasi penyimpanan, misalnya pada folder ” latihan ” di ” my document ” , pada ” file name ” tulis nama file misalnya ” latihan1.html ” pada save as type isikan ” all file ” kemudian klik ” save “.

Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :

Cari file ” latihan1.html ” yang anda simpan pada folder ” latihan ” di ” my document ” , setelah ketemu kemudian klik kanan, pilih ” open with ” lalu pilih browsernya misalnya ” internet explorer ” maka hasilnya akan tampak seperti gambar di bawah ini :

DENGAN LANGKAH – LANGKAH SEPERTI DI ATAS COBA ANDA PRAKTEKKAN LATIHAN – LATIHAN SELANJUTNYA

Latihan 2. Belajar membuat link atau tautan dengan kode HTML :

misalnya : kata yang terlihat dalam link ( ancor text ) adalah “cara membuat website”

sedangkan alamat/URL dari halaman yang dituju tersebut adalah http://edyutomo.com/internet-dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<a href=”http://edyutomo.com/internet-dan-komputer/cara-membuat-website”>cara membuat website</a>

hasilnya adalah cara membuat website

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :

<font color=”red”>kata yang diedit</font>, ini akan mengubah warna teks menjadi merah.

Lihat contoh berikut ini :

<font color=”red”>Modul HTML</font> ini berisi latihan – latihan…..

hasilnya akan tampak sebagai berikut :

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :

<p align=”left”><font face=”arial” size=”6″ color=”red”>kata yang diedit</font></p>

ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah.

Lalu bagaimana untuk membuat warna menjadi warna campuran, ah… itu gampang. Caranya anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML untuk mengedit warna.

Contoh : color=”#ed260b”

mudah – mudahan jelas ya.

Kode HTML lainnya :

<p>isi paragraf</p> , untuk membuat paragraf baru

<br>isi kalimat</br> , untuk membuat baris baru

<b>kata/kalimat</b> , untuk membuat teks tebal

<i>kata/kalimat</i> , untuk membuat kata miring

<u>kata/kalimat</u> , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :

http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

<p>di bawah ini adalah contoh gambar :</p>

<img src=”http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif”>

hasil dari penullisan kode HTML adalah sebagai berikut :

Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :

<a href=”http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak”><img src=”http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif”></a>

Hasilnya akan menjadi sebagai berikut :

Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju. Selamat anda sudah dapat membuat link pada gambar.


Sumber:Ada Disini

Tutorial Membuat blog

Memiliki sebuah blog adalah hal yang menyenangkan karena kita dapat berbagi apapun yang kita suka, dan kalau kita serius dalam merawat blog, kita juga bisa mendapatkan penghasilan yang layak dari blog kita.

Di web tutorial ini, nyekrip telah berbagi tentang cara membuat web dengan html 5 yang juga dapat kita gunakan sebagai langkah belajar dalam membuat dan mendesain halaman web atau blog dan salah satu favorit saya adalah menciptakan blog pada domain sendiri dan hosting melalui WordPress seperti yang sudah diterapkan pada blog nyekrip ini.

Banyak tutorial yang telah membahas tentang self-host blog WordPress dan tidak diragukan lagi itu adalah platform blogging yang lebih baik jika kita bandingkan dengan platform blogging gratis seperti Blogspot.com dan WordPress.com. Banyak pemula yang ingin memulai blogging tidak ingin menghabiskan modal untuk membuat blog dan itu sah-sah saja, bahkan banyak juga ditemukan blog terkenal yang menggunakan platform gratis ini.

Ada banyak platform blogging yang menawarkan untuk membuat Blog  secara gratis. Jika kita mencari blog yang gratis, disarankan untuk memulai blog dari WordPress.com atau Blogger.com.

Blogspot mengijinkan kita untuk membuat blog secara gratis dan tentunya memiliki keterbatasan, tapi seperti yang telah disebutkan di atas, untuk pemula itu merupakan ide yang baik sebagai langkah awal dalam membuat Blog.


Ikon Blogger

Tutorial ini ditujukan untuk yang ingin belajar membuat blog. Dalam posting ini kita akan membahas tentang bagaimana cara membuat blog di Blogspot lengkap gambar. Sebelum kita mulai tutorial cara membuat blog di Blogspot lengkap gambar, ada beberapa hal yang harus kita ketahui. Blogspot adalah platform blogging dari Google yang memberikan pelayanan untuk membuat sebuah blog, semua gambar blog kita akan disimpan oleh Picasa yang merupakan bagian dari Google.

Cara Membuat Blog di Blogspot atau Blogger Gratis

Untuk cara membuat blog di Blogspot gratis, silahkan menuju blogger.com dan login menggunakan akun Google. Jika belum memiliki akun Google (akun Gmail), silahkan menuju tutorial ” Cara Membuat Email Baru Lengkap Gambar “. Setelah anda mempunyai akun gmail atau akun google, silahkan kunjungi ” www.blogger.com ” dan kita akan melihat halaman login seperti gambar berikut.


Halaman Login

Setelah login kita akan menghadapi pilihan untuk menggunakan identitas, kita dapat memilih profil Google plus atau menggunakan profil Blogspot. Lebih di sarankan memilih profil Google plus.


Memilih Profil

Langsung tekan tombol ” Lanjutkan ke Blogger “.

Setelah itu kita akan melihat halaman membuat blog di blogspot seperti gambar berikut. Pada halaman ini kita akan melihat daftar blog yang telah dibuat, karena kita baru akan memulai dalam membuat blog maka kita belum melihat daftar blog tersebut, untuk memulai membuat blog silahkan klik tombol ” Blog Baru “.


Memulai Blog Baru

Memberi Nama dan Alamat Blog di Blogspot/blogger

Setelah kita klik tombol ” Blog Baru” kita akan melihat sebuah halaman baru untuk memulai dengan menambahkan nama dan memilih nama domain. Untuk tips trik dalam memilih nama domain silahkan anda kunjungi tutorial ” Tips Cara Memilih Nama Domain Blog atau Website “.

Untuk lebih jelasnya silahkan perhatikan gambar membuat blog di blogspot berikut:


Halaman Membuat Blog

Keterangan nomor pada gambar

Nomor 1 adalah tempat kita untuk memberi judul atau nama blogNomor 2 adalah tempat kita untuk memberi alamat blog kitaNomor 3 adalah tempat kita untuk memilih template blog kita, kita bisa merubah-nya nanti pada halaman template, jadi untuk sementara pilih saja yang standarNomor 4 merupakan keterangan alamat blog yang kita ketik tersedia atau tidak, pastikan alamat blog tersedia.Nomor 5 adalah tombol untuk mengakhiri , tekan tombol ini jika anda sudah merasa puas dengan nama dan alamat yang anda pilih.


Memulai Post

Mengenal Dashboard di Blogspot/blogger

Sekarang blog kita sudah dibuat tetapi belum selesai sepenuhnya. Ada beberapa pengaturan yang perlu kita lakukan pada blog yang baru dibuat, agar membuat blog di Blogspot kita semakin SEO, seperti merubah template dan menambah halaman. Sekarang kita berada di dashboard Blogspot di mana kita akan melihat backend blog dan bisa pergi ke pengaturan dan membuat perubahan untuk meningkatkan visibilitas blog. Berikut adalah screenshot dashboard beserta penjelasan:


dashboard blogspot

Keterangan nomor pada gambar

Nomor 1 merupakan tombol yang bisa kita gunakan jika ingin membuat blog baruNomor 2 merupakan tombol yang bisa kita gunakan jika ingin membuat post baruNomor 3 merupakan tombol yang bisa kita gunakan jika ingin melihat blog secara liveNomor 4 merupakan daftar shortcut menuju pengaturan, post, dan lain-lainNomor 5 merupakan area artikel dari blog yang kita ikuti atau followNomor 6 merupakan area identitas atau profil kita di google, dalam area ini kita bisa login dan logut.

Setelah kita mengenal fungsi dari dashboard blogspot/blogger, silahkan anda klik menu “ Ikhtisar ” untuk melihat daftar menu dalam memulai membuat post, halaman, sampai mengatur adsense pada blog kita.

Untuk melihat tampilan blog yang sudah dibuat, silahkan klik tombol no 3 pada nomor diatas, maka tampilan blog akan terlihat seperti gambar dibawah ini. Perhatikan bahwa template sudah sesuai dengan template yang telah dipilih sebelumnya.


Tampilan Blog Nyekrip

jika anda ingin membuat blog gratis di wordpress silahkan kunjungi tutorial ”Cara Membuat Blog di WordPress Gratis Lengkap“.

Cara Mengatasi Halaman yang Anda Minta Tidak Valid


Halaman Yang Anda Minta Tidak Valid

Bagi kawan yang mengalami error seperti pesan diatas, kemungkinan blogger telah menganggap anda sebagai spammer, cobalah lakukan langkah berikut ini:

Jika anda menggunakan modem, coba putus dan sambung-kan lagi konekssi internet-nya (tujuan agar ip berubah)Clear atau bersihkan cache, cookie dan history browser anda

Setelah itu coba buat blog lagi, semoga berhasil 🙂 .

Sekian tutorial cara membuat blog di blogspot lengkap gambar, segera praktek-kan karena membuat blog di blogspot itu mudah dan tutorial diatas sudah dibuat dengan sederhana namun padat. Jika ada pertanyaan, silahkan ajukan dalam komentar dibawah. Pada kesempatan berikutnya akan dibahas tentang bagaimana cara membuat post sampai merubah template agar lebih SEO.

Happy Nyekrip!


Sumber:Nyekrip.com

Cara Host Website buatan Web Page Maker

Pada kesempatan kali ini saya akan berbagi info tentang "Cara Host Website buatan Web Page Maker" karena banyak teman-teman saya yang membutuhkan ini.

Aplikasi yang diperlukan :
- Web Page Maker
- Filezilla atau sejenisnya

      Pertama anda harus mempunyai file website anda yang anda buat di Web Page Maker yang akan di host, bisa berekstensi .html, .htm, .php, dll. Cara mendapatkannya mudah ikuti langkah dibawah ini:
 -Buka Web Page Maker, lalu buka file anda
 -Setelah terbuka, pilih File di navbar lalu pilih Export to HTML

 - Lalu pilih folder tujuan untuk tempak Export file" web anda

 - Klik ok, dan lihat folder itu, apakah sudah ada isinya? jika sudah maka itulah file" web anda

      Langkah kedua, Daftar di salah satu web hosting, Web Hosting diperlukan untuk membuat website anda dapat dilihat oleh orang" diseluruh dunia, tapi anda juga butuh biaya untuk melakukannya, tapi ada juga yang gratis, salah satunya adalah idhostinger, disitu kita dapat layanan 2 GB file storage dan masih banyak lagi, berikut adalah cara mendaftar di idhostinger :
 -Pertama buka link ini Hostinger
 -Lalu pilih register tab
 -Setelah itu isi data-data yang sekiranya dibutuhkan
 -Setelah berhasil, check email anda utk mengaktifkan akun anda
 -Sekarang ada punya akun di hostinger

     Setelah anda membuat akun di Hostinger anda harus membuat akun host, caranya.....
 -Login di Hostinger
 -Pilih Control Panel tab
 -Lalu klick Create New Account  


-Kemudian pilih Subdomain, jika anda telah membeli domain, pilih Domain

-Isikan semua yang diperlukan lalu klik Create
-Tunggu beberapa detik, dan anda punya akun host !! ingat-ingat akun host itu, misal www.dgenefo.tk

     Langkah ketiga adalah mengupload file" website anda ke web host
-Pertama anda harus punya Filezilla atau sejenisnya
-Kedua, buka Filezilla lalu masukan Nama pengguna, Password dll, untuk mengetahuinya, login ke idhostinger lalu pilih kontrol panel, pilih domain anda, lalu cari FTP Access.

-Isikan semua itu di Filezilla lalu klick Connect/KoneksiCepat
-Klik public_html di tab yang kanan
-Pada tab kiri browse file website anda
-Setelah ketemu blok semua filenya klick kanan lalu pilih Upload
-Tunggu hingga upload selesai, jika website anda banyak mengandung gambar, maka proses uploadnya juga lama.
-Setelah selesai coba buka website yang anda daftarkan tadi, contoh dgenefo.tk sprti yg diatas
-Jika isinya website anda maka jadilah web anda !!
-Jika ada yang ingin deperbaharui export lagi lalu upload lagi, tidak perlu membuat akun host lagi, pakai yang lama

Demikian post dari saya, semoga bermanfaat !!

Jika belum mengerti, postkan di komentar :)


Sumber: dgenefo.blogspot.com