pada tanggal
perjalanan. travelling
- Dapatkan link
- X
- Aplikasi Lainnya
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.
 |
| 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.
 |
| 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.
 |
| 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.
 |
| 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.
Hello to all, the contents existing at this web site are in fact remarkable for people experience, well, keep up the nice work fellows.
BalasHapusjujur 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 :)
BalasHapussaya juga mumet mbak, tapi seru banget belajar coding. masih panjang perjalanan buat bisa jadi website desain.
HapusWah, programer kalo ini namanya. Hehe.. 👍👍
BalasHapusoh iyakah? terima kasih sudah memberi tahu. kemarin cuma ngikutin satu per satu langkah yang diajarkan. seru juga ya.
Hapus