Melihat Acara Mandi Sungai Riam di Cemapaka

8 alat untuk membuat website bagi pemula



Dilihat dari judul di atas, jelas banget kalau saya belum bisa melupakan kegiatan di kelas Coding Mum. Meski pada awal kelas sempat bingung, ternyata setelah kelas berakhir justru mendatangkan kerinduan. Rindu sama teman-teman, rindu sama coding, dan rindu sama kamu hahahaha.
Agar rindu terasa tuntas, saya tuliskan saja sekalian. Demikian alasan bombastis saya, padahal maksud sebenarnya menulis 7 alat untuk membuat website bagi pemula adalah supaya tidak lupa.

Alasan lain adalah berbagi pengetahuan saya yang sedikit ini pada orang lain. Siapa tahu ada yang penasaran sama coding. Lantas membuka internet dan menemukan blog saya.

Ah, kok jadi panjang seperti ular naga ya. Sebaiknya saya mulai saja, mengulang kembali waktu pelajaran membuat website kemarin.

Seperti yang dikatakan oleh banyak orang, tak kenal maka tak sayang, maka sebelum membuat website, kenalilah dulu perangkat atau software yang diperlukan. Saya mencatat ada 8 perangkat yaitu, sublime text, html, css, bootstrap, internet, filezilla, domain, dan w3school.

Sublime text

Perangkat inilah yang pertama kali diinstal sebelum mulai membuat website.  Sublime text merupakan sebuah teks editor untuk coding. 



Penampilannya menyerupai notepad. Tapi latarnya berwarna hitam. Setelah digunakan baru akan diketahui perbedaan mendasar antara notepad dengan sublime text.

Perangkat yang dikembangkan oleh Jon Skinner ini mempunyai banyak plugin. Asli, jadi gampang menulis berbagai kode. Secara otomatis teks akan berpindah ke baris berikutnya tanpa perlu diperintah.

Untuk menggunakan sublime text, pengguna bisa mengunduhnya secara gratis dan membeli lisensi. Pasang lalu sublime text siap digunakan.

HTML

Kenapa ya, setiap kali menulis kata HTML, saya teringat sama pondasi rumah? Rasanya mentor berhasil menanamkan pengertian dasar HTML dengan baik.

HTML atau Hypertext Markup Language memang bahasa markah yang dipakai untuk membuat sebuah website. Inilah bagian paling dasar dari sebuah website. Tidak jauh berbeda dengan pondasi rumah.

html website
Bentuk HTML

Sang pemilik bisa dengan mudah menentukan seperti apa bentuk rumah yang diinginkan. Mau kotak, persegi panjang, segitiga, atau lurus memanjang. Ada berapa ruangan yang akan dibangun. Dimana letak kamar, ruang tamu, atau dapur. Semua digambarkan di sini.

Bentuk penulisan HTML berbentuk kode-kode. Ada 3 kode utama yang tidak boleh dilupakan, yaitu:
1.       <html></html>
2.       <head></head>
3.       <body></body>

Oh ya, saat menuliskan kode-kode di atas harus selalu disertai kode tutup berupa tanda / atau garis miring. Lupa menutup, halaman website yang dibuat bakal terlihat ajaib. Berantakan hahahaha. Di sublime text, kode yang ditulis akan tampil dalam warna merah muda cenderung ungu.

CSS

Cascading style sheets atau disingkat menjadi CSS merupakan perangkat untuk mengatur beberapa komponen dalam sebuah website. Antara CSS dan HTML sangat mendukung satu sama lain.

Ingat soal rumah tadikan? Nah si CSS ini fungsinya untuk mempercantik rumah. Rumahnya mau dicat warna apa, dikasih tiang depan model roma atau hanya besi juga bisa. Ubinnya pakai keramik atau tegel. Seperti itu deh.

kode css
Penulisan kode CSS yang berbeda dengan HTML


Tugas si CSS ini memang tampilan website yang dibuat. Saya jadi bisa menampilkan halaman yang sama dengan format yang berbeda.

Penulisan kode CSS berbeda dengan HTML. Tidak perlu ada kepala dan badan, tapi tetap harus ada kode untuk membuka dan menutup yaitu tanda { untuk membuka dan tanda } untuk menutup.

Bootstrap

Nah, kalau yang ini perangkat yang dirancang oleh Mark Otto dan Jacob Thornton. Berkat mereka membuat website menjadi semakin mudah.

Bootstrap berisi berbagai template yang dibuat dengan dasar HTML dan CSS. Tanpa bootstrap, tampilan website yang dibuat tidak akan terlihat responsif. 



Maksudnya, tampilan website akan mengikuti perangkat yang digunakan untuk membuka website. Jadi website yang dibuat akan terlihat mengikuti layar media yang digunakan. Kalau di laptop akan besar, sedangkan di telepon gengam akan memanjang. Jadi lebih mudah membacanya. Tampilan juga makin oke.

Jaringan Internet

Nah, ini penting banget. Tanpa dukungan internet, mustahil teman-teman mendesain sebuah website. Tidak mungkin kode-kode dituliskan menggunakan word, harus di sublime text ya.

Oleh karena itu pastikan jaringan bagus agar tidak menemui hambatan saat ngulik coding. Teman-teman bisa saja memanfatkan layanan wifi untuk mendukung kegiatan ini.

Kalau pun tidak ingin keluar rumah, tapi tidak ada wifi, jangan patah semangat, siapkan kuota dan berkaryalah. Jangan ada penghalang antara teman dan coding ya.

Domain

Menurut KBBI, domain berarti wilayah, daerah, atau ranah. Sementara Wikipedia menyebutkan bahwa domain merupakan sebuah nama yang unik, khas, lain dari yang lain, yang disematkan pada sebuah website.

Apalah artinya sebuah website tanpa nama, ia akan hilang begitu saja. Sayangkan, hasil kerja keras selama berhari-hari, menghabiskan berpuluh-puluh gelas kopi dan gorengan lenyap tak berbekas karena sebuah nama. Karena itu berilah nama pada website yang dibuat.

Proses pemberian nama harus dipikirkan baik-baik. Lalu jangan lupa di cek agar tidak ada nama yang sama. Ingat, harus selalu beda. Tetapi, pastikan namanya mudah diingat serta penulisannya tidak berbelit.

Nama inilah yang memudahkan mesin pencari menemukan website yang telah dibuat. Biar pun dia bersembunyi, mesin pencari akan menemukannya.

FileZilla client

Ups, sebelum bisa mejeng, website yang sudah dibuat perlu diunggah dulu. Disinilah FileZilla berperan teman-teman.

Jadi setelah mempunyai domain, barulah semua data diunggah melalui FileZilla Client. Sebelumnya isi dulu nama domain, user, dan password yang sudah diberikan.

filezilla untuk data
Tampilan filezilla untuk menggungah data

Jangan salah kamar ya, karena bentuk software ini menyerupai kamar-kamar gitu. Bagian untuk mengisi data tepat di sebelah kanan. Kalau sudah ok, proses transfer data akan berjalan hingga selesai. Begitu proses transfer dinyatakan berhasil, teman-teman sudah bisa membukanya melalui mesin pencari.

W3School

Namanya ada embel-embel sekolah ya, school. Bisa ditebak nggak apa ini? Ya, ini dia situs untuk belajar membuat desain website secara daring.

Situs web developer ini dilengkapi dengan tutorial. Langkah demi langkah yang dijelaskan bisa diikuti dengan mudah. Apalagi selain melihat, teman-teman bisa langsung mencoba di tempat yang telah disediakan.

w3schhol untuk website
W3School untuk belajar membuat website


Begitu lamannya terbuka, teman-teman akan melihat deretan program seperti HTML, CSS, JavaScript, PHP, SQL, dan JQuery. Sebaiknya dicoba dari bagian awal supaya tidak bingung. Jangan takut salah karena bisa diperbaiki. Nama W3School merupakan singkatan dari World Wide Web dan dibuat oleh Refsnes data.

Demikian informasi yang dapat saya sampaikan. Belum banyak sih tapi semoga bisa membantu teman-teman.

Komentar

  1. Hello to all, the contents existing at this web site are in fact remarkable for people experience, well, keep up the nice work fellows.

    BalasHapus
  2. jujur masih mumet mba :D. aku ga jago soal beginian. lah blogku aja dibikinin. selama ini aku cm nulis dan update blognya. kali ada masalah ama si blog temenku td yg ngurusin :D. salut sih ama orang2 yg jago ngutak ngatik coding begini :)

    BalasHapus
    Balasan
    1. saya juga mumet mbak, tapi seru banget belajar coding. masih panjang perjalanan buat bisa jadi website desain.

      Hapus
  3. Wah, programer kalo ini namanya. Hehe.. 👍👍

    BalasHapus
    Balasan
    1. oh iyakah? terima kasih sudah memberi tahu. kemarin cuma ngikutin satu per satu langkah yang diajarkan. seru juga ya.

      Hapus

Posting Komentar

Terima kasih sudah berkunjung ke blog saya. Mohon tidak membagikan tautan disini. Silahkan meninggalkan komentar yang baik dan sopan.