• Tidak ada hasil yang ditemukan

CARA MEMBUAT WEBSITE SEDERHANA

N/A
N/A
Protected

Academic year: 2021

Membagikan "CARA MEMBUAT WEBSITE SEDERHANA"

Copied!
16
0
0

Teks penuh

(1)

CARA MEMBUAT WEBSITE SEDERHANA

Gunawan Effendi

gunawan effendi@penulis.com :: http://penulis.com

Abstrak

Cara membuat website mungkin bisa dibilang bukan hal yang sulit bahkan cukup mudah untuk para webmaster (pembuat website). Namun bagaimana dengan teman-teman kita yang baru saja 'terjun' di dunia blogging ? apakah mereka juga menganggap Cara Membuat Website adalah hal yang mudah ? tentu tidak bukan, atas dasar itulah saya akan mencoba menjelaskan tahap demi tahap Bagaimana Cara Membuat Website dari Dasar atau Awal untuk para Pemula tentunya.

Kata Kunci: membuat website sederhana

Pendahuluan

Dengan mengetahui cara membuat web sederhana tentu akan sangat berguna bagi pemula yang ingin membuat website untuk pertama kali.

Pembahasan

Tenang saja, Cara Membuat Web yang akan saya berikan ini tidak akan banyak memakan waktu Anda, karena sesuai judul yang saya buat Cara Membuat Website ini akan saya berikan tahap-tahap membuat website secara sederhana.

(2)

Disini saya akan membagi Tutorial Membuat Website ini menjadi 2 Bagian.

1. Cara Membuat Website.

2. Cara Upload File ke Website Menggunakan FTP.

Kedua Cara diatas akan saya jelaskan dengan bahasa yang sesederhana mungkin. Jadi untuk Anda yang benar-benar buta akan Website mampu mengikuti Tutorial Membuat Website ini dengan Mudah.

1. Cara Membuat Website

Sebelum membuat website, hal yang harus Anda persiapkan adalah Hosting + Domain. Jika Anda bingung apa itu Hosting, maka kita bisa mengibaratkan Hosting itu ibarat Rumah untuk menyimpan barang-barang (file) dan Domain ibarat Nama Jalannya, agar pengunjung bisa berkunjung.

Untungnya hampir semua penyedia layanan website sekarang ini sudah menyediakan paket lengkap, yaitu mereka sudah menyiapkan Hosting dan Domain menjadi satu, jadi pesan Hosting dapat gratis Domain. Karena kita mencari yang gratis jadi kita tidak akan dapat Domain, melainkan hanya akan mendapat SubDomain (semacam blogspot.com atau wordpress.com).

Untuk Cara Membuat Website.

1. Kunjungi situs penyedia Layanan pembuatan Website, disini akan saya beri contoh menggunakan situs penyedia layanan yang cukup populer di Indonesia, yaitu IDHostinger. Langsung saja kunjungi http://www.idhostinger.com/

2. Setelah terbuka, selanjutnya klik Buat Akun. Letaknya ada di pojok kanan atas, dekat form login.

(3)

3. Di halaman ini Anda diwajibkan mengisi. Nama, E-mail dan Password Anda. Isikan sesuai tempatnya.

Jangan lupa centang, Saya setuju dengan Ketentuan Penggunaan Layanan.

4. Selanjtunya, kita buka Tab Baru dan masuk ke Email kita, untuk mengaktivasi Akun kita. Nanti ada dua Email dari yang dikirim oleh IDHostinger, Anda lihat saja yang pertama atau yang paling bawah.

(4)

Tingal Anda klik atau salin link tersebut ke Address Bar dan klik Enter.

5. Disini kita akan diberi pilihan Paket Hosting yang akan kita pakai nanti untuk Membuat Website. Karena kita hanya akan Membuat Web untuk Belajar saja, maka kita Order saja yang Paket Gratis.

6. Kalau diatas kita sudah memesan Hostingan makan setelah itu kita akan diberi hadiah SubDomain. Untuk SubDomainnya ada banyak pilihan, silahkan Anda pilih yang paling cocok atau sesuai dengan selera Anda. Lalu klik Buat.

(5)

7. SubDomain + Hosting Anda akan dibuat, jadi tunggu hingga muncul pemeberitahuan 'Akun telah dibuat 100%' di pojok kanan bawah.

Selanjutnya, silahkan Anda klik Lihat Hasil.

8. Dari sini kita sudah berhasil membuat akun untuk membuat Websitenya, namun kita belum memesan Hosting + SubDomain atau dengan kata lain suah berhasil Mendaftar/Membuat Website. Namun kita harus melanjutkan untuk mengisi website kita dengan Artikel atau File. Caranya dengan mengklik tombol Kelola.

(6)

9. Maka Anda akan dibawa ke Cpanel (Control Panel). Disinilah tempat Anda mengatur segala sesuatu yang berkaitan dengan website Anda. Mulai dari :

 Menambah Subdomain

 Parkir Domain

 Impor Website

 Impor Database

 Mengatur Halaman Error

Dan masih banyak lagi. Namun kita tidak akan membahas fitur-fitur yang ada di Cpanel ini (butuh watu berhari-hari). Tujuan kita masuk Cpanel adalah untuk mengambil Data mengenai : 'Nama pengguna'.

(7)

2. Cara Upload File ke Website Menggunakan FTP

Untuk mengupload suatu file kedalam Website atau lebih tepatnya kedalam Hosting (rumah) sebenarnya cukup mudah, yaitu cukup dengan mengklik File Manajer dan tinggal Anda pilih file yang akan Anda Upload.

Tapi yang jadi masalah bagaimana jika kita ingin mengupload file kedalam Hosting saat kita menggunakan HandPhone ? tentu kita tidak mungkin masuk File Manajer yang ada disediakan IDHostinger, karena ada beberapa Javascript yang harus dijalankan, dan itu tidak mungkin dijalankan di browser Handphone (operamini / ucbrowser).

Maka dari itu, disini kita akan meminta bantuan FTP. FTP Online ini fungsinya menjadi perantara, Antara file yang akan kita upload dengan Hosting yang sudah kita pesan tadi (tanpa melalui file manajer).

Disini saya akan memberikan screenshotnya dari tampilan PC, tapi sebenarnya sama persis tampilannya antara di PC dan Handphone.

Untuk Upload filenya mealalui FTP Online tentunya kita harus memilih 1 dari ribuan FTP Online yang ada di Internet, disini saya memutuskan untuk memilih Net4India karena sudah support https dan yang terpenting adalah sangat HandPhone Friendly (nyaman dan tidak terlalu berat jika dibuka melalui hp).

Sekarang, langkah-langkah Cara Upload File ke Website atau Hosting menggunakan FTP Online.

(8)

1. Buka https://ftp.net4india.com/

Tadi sebelumnya saya mengingatkan Anda untuk mencatat 'Nama pengguna' bukan ? gunanya untuk mengisi Login Panel di FTP ini. Ada tiga form yang harus Anda isi.

FTP server : Isikan Nama Domain Anda Username : Isikan Nama Pengguna Password : Isikan Password

Setelah semua terisi silahkan Anda klik Login.

* yang dimaksud password disini adalah password saat Anda mengisi SubDomain, jadi bukan password saat Anda membuat akun IDHostinger.

(9)

2. Setelah klik Login, maka Anda akan masuk kedalam direktori root

Centang filenya dan pilih Delete. Lalu pilih Submit, dan klik Back untuk kembali ke public_html.

Langkah selanjutnya tinggal kita upload file kita ? tapi file apa yang akan kita upload ? jangan kuatir disini saya akan memberikan script / kode html untuk membuat halaman depan website, kode ini bukan buatan saya melainkan buatan master problogiz, yang juga sudah valid HTML5. Langsung saja ini dia kodenya.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <!-- meta tags -->

<meta name="keywords" content=""> <meta name="description" content=""> <!-- stylesheets -->

(10)

/* ~~~~~~~~~ layout ~~~~~~~~~~ */

#container {width: 960px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;}

/* ~~~~~~~~~ header ~~~~~~~~~~ */

#main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;}

#main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;}

#main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;}

#main-navigation li.current a {background: #666;} #main-navigation li a:hover {background: #777; }

/* ~~~~~~~~~ article ~~~~~~~~~~ */ article {width: 100%;overflow: hidden;} section {float: left;width: 500px;}

/* ~~~~~~~~~ aside ~~~~~~~~~~ */ aside {float: right;width: 310px;}

/* ~~~~~~~~~ footer ~~~~~~~~~~ */

footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;}

/* ~~~~~~~~~ common ~~~~~~~~~~ */

body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;}

(11)

h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0 0;}

h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0; }

section p, section ul, section ol,

aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;} section ul {margin-left: 1em;}

section ol {margin-left: 1.4em;}

/* ~~~~~~~~~ generic ~~~~~~~~~~ */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,

dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;}

img {vertical-align: bottom;} img, fieldset {border: 0;} html {overflow-y: scroll;}

header, nav, section, article, figure, aside, footer {display: block;} </style> <!-- javascript --> <script src="js/jquery-1.3.2.min.js"></script> <!--conditional--> <!--[if IE]> <script src="js/html5.js"></script> <![endif]--> </head> <body class="home">

(12)

<div id="container"> <header id="page-header"> <h1>Judul Blog</h1> <nav id="main-navigation"> <ul>

<li class="current"><a href="#">Home</a></li> <li style="color: red;"><a href="#">About</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <article id="page-content"> <section> <hgroup> <h2>Pemahaman HTML5</h2> <h2>Demo HTML5 Template</h2> </hgroup>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<h2>HTML 5 Item</h2> <ul>

<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>

(13)

<ol>

<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol>

</section> <aside>

<h2>Artikel Terkait</h2>

<p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit.</p>

</aside> </article> </div> <footer> Footer </footer> </body> </html>

Pertama Anda copy dahulu seluruh script diatas, selanjutnya paste kan kedalam aplikasi moby explorer (ini yang biasa saya pakai kalau mengedit text di hp) atau Anda bisa juga menggunakan editor yang gratis lainya, edit yang perlu diedit setelah selesai di edit save dengan nama index.html (tulis persis dengan apa yang saya tulis, jangan diganti Index.html atau ind3x.html)

(14)

3. Setelah Anda save sekarang saatnya Anda upload, caranya mudah saja, klik Upload.

Dan selanjutnya pilih Choose File (ada 2 tulisan choose file, anda pilih yang atas karena itu nanti file yang diupload tidak akan dikompres / meminimalisir file rusak). Dilanjut dengan mengklik tombol Submit.

Jika muncul tulisan : Checking files: File index.html is OK

Transferring files to the FTP server:

File index.html has been transferred to the FTP server using FTP mode FTP_ASCII Berarti file sukses diupload, itu artinya kita sudah berhasil mengubah halaman depan Website yang kita buat. Kalau tidak percaya cek saja Website Anda.

Ini screenshot halaman depan Website saya yang index.html-nya menggunakan kode diatas.

(15)

Penutup

Bisa disimpulkan dalam Membuat Website, singkatnya hanya diperlukan [ Hosting - Domain / SubDomain - index.html / index.php ] hanya dengan ketiga unsur ini, bisa dikatakan kita sudah berhasil membuat suatu website.

Semoga saja, Cara Membuat Website yang saya tuliskan ini dapat bermanfaat untuk Anda yang ingin belajar membuat website. Akhir kata saya ucapkan terimakasih sudah berkunjung dan bersedia membaca artikel Cara Membuat Website Sederhana.

Referensi

http://berguruseo.blogspot.com http://riyant17.blogspot.com http://trikmudahseo.blogspot.com/ http://blog.neotelemetri.com/ http://membangunwebsite.com/

(16)

FOTO

Biografi

Nama saya Gunawan Effendi saat ini kuliah di RAHARJA jurusan Sistem Informasi dan berkonsentrasi Sistem Informasi Manajemen. Saya bekerja di PT Angkasa Pura II (Persero). Hobi saya adalah olahraga terutama

airsoft gun dan hiking. Kalian bisa menguhubungi saya di

Referensi

Dokumen terkait

Hasil penelitian menunjukkan bahwa ada pengaruh model problem based learning disertai media key relation chart terhadap kemampuan berpikir kritis dan kerjasama

[r]

Mata pelajaran bahasa Indonesia merupakan dasar dari segala mata pelajaran di sekolah. Hal ini dikarenakan di dalam pelajaran bahasa siswa diarahkan untuk

Rs, sebagai informan kedua dalam penelitian ini, juga menceritakan hal yang sama, proses komunikasi terapeutik yang dilakukannya diawali dengan tahap persiapan, yaitu

Sedangkan variabel dependen yaitu keputusan pembelian (Y). Metode penelitian yang digunakan adalah metode deskriptif kausal dengan jumlah sampel 75 orang. Bentuk

5 Penyulu han Masyara kat Perilaku Hidup.. araan drainase ) 2 Belum adanya Master plan dan DED drainase di Kabupaten Morowali Utara drainase di lingkungan permukima n belum

PERHITUNGAN JUMLAH BAKTERI COLIFORM PADA MINUMAN RINGAN TANPA IZIN YANG BEREDAR DI PASARAN Mulia Susanti, M.Pd, Apt Syafiq Naqsyabandi, M.Si Irna Setya Ningsih PERBEDAAN NILAI

Tidak ada perbedaan kecenderungan burnout ditinjau dari usia dewasa dijelaskan oleh Anoraga (2005) menyatakan bahwa dalam meniti karier, perempuan dan laki