Sebagai seorang pengguna internet, blogger atau bahkan web developer kita harus mengenal dan mengetahui elemen atau hal-hal yang ada pada sebuah website. Sebab, bagaimanapun, setiap kita terkoneksi internet dan menggunakannya kita tidak akan terlepas dari sebuah aplikasi bernama “Web”. Oleh karena itu, bahkan untuk anda yang masih sangat awam, artikel ini harus anda baca karena merupakan sebuah pengenalan penting yang sederhana dan lugas mengenai komponen dan elemen yang sering “tertempel” pada sebuah website maupun blog.
Sebuah website tersusun dari komponen dan elemen dengan fungsinya masing-masing, lalu terkumpul dan saling berkaitan. Mungkin tanpa anda sadari, saat membaca artikel ini juga sebenarnya anda sedang menggunakan fungsi dari elemen-elemen itu. Nah, untuk mengenalinya lebih jauh, berikut ini adalah daftar elemen website yang umumnya tertampil.
Daftar Isi Postingan
Komponen Dasar
1. Title
Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.
2. Nama Domain
3. Alamat URL
4. Link/tautan
Jika kita ibaratkan lagi bahwa sebuah halaman web adalah rumah, maka link atau tautan ini adalah pintu/gerbang/lorong yang menuju ke halaman lain baik itu yang masih satu web maupun halaman di web yang berbeda.
Contoh Link :
Ini adalah link untuk kehalaman utama(syakirurohman.net), silahkan klik
Pengarahan link diatur dalam kode html <a href=”alamat url halaman website tujuan”>Anchor teks/ Teks yang dilink</a>.
5. Header
Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs.
Contoh Header :
6. Konten/Isi
Elemen yang sering ada di sebuah Blog/Website
7. Sidebar
Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website. Sidebar diisi dengan widget-widget. Misalnya, di blog ini ada 2 sidebar yaitu sidebar kiri yang berisi widget kategori dan sidebar kanan yang berisi widget media sosial dan popular posts.
Keberadaan sidebar ini bersifat opsional sesuai keinginan dan desain blog/web masing-masing. Ada blog yang hanya satu kolom(tanpa sidebar), ada yang hanya satu di sebelah kanan ataupun kiri, dan ada juga yang dikedua sisi memiliki sidebar seperti blog ini.
8. Widget
Setelah membaca nomor 7, anda pasti sudah tahu sedikit gambaran tentang widget. Yaa, widget adalah sebuah daerah pada website yang isinya berupa informasi tertentu dan memiliki fungsi tertentu pula. Widget tidak harus terletak pada bagian sidebar. Widget juga bisa terletak pada bagian atas posting, footer bahkan header (walaupun sangat jarang).
Contoh widget :
9. Footer
Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan, link tambahan, sumber daya, sponsor dan kredit sebuah website. Namun, kadang-kadang footer juga bisa dijadikan sebagai tempat untuk menampilkan widget.
Contoh Footer :
10. Navbar
Navbar adalah kependekan dari Navigation bar. Navbar merupakan bagian website yang biasanya terletak di bagian paling atas dan bersifat melayang/fixed (Selalu terlihat walaupun di scroll). Navbar berfungsi untuk mempermudah navigasi sebuah situs. Biasanya berisi link-link penting yang mungkin dikunjungi dalam situs itu.
Contoh Navbar :
11. Menu
Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Secara fungsi hampir sama dengan navbar yaitu untuk mempermudah navigasi di web. Namun, teknisnya sedikit berbeda karena biasanya menu tidak melayang. Menu biasanya terletak di bawah atau di atas header.
Contoh Menu :
12. Breadcrumb
Breadcrumb merupakan sebuah elemen website berbentuk memanjang yang isinya adalah informasi tentang letak, posisi dan atau jalur halaman yang sedang dikunjungi dalam website itu. Breadcrumb biasanya hanya ada di halaman spesifik/single seperti halaman posting dan sejenisnya. Biasanya terletak di atas judul posting. Format breadcrumb biasanya adalah “Beranda > Kategori Posting > Nama/judul Posting”.
Contoh BreadCrumb :
13. Form
14. Sharing button bar (Bar tombol berbagi)
15. Popup
Popup adalah sebuah elemen pada website yang sifatnya hanya akan muncul/ada jika dikliknya sebuah tombol atau link tertentu pada website. Popup adalah sebuah jendela yang berisi informasi tertentu yang ingin disampaikan oleh pemilik situs. Ketika sebuah link popup klik, maka akan muncul jendela popup dan elemen lain di halaman website itu tidak akan berfungsi sebelum popup itu ditutup lagi. Ketika sebuah jendela popup muncul, biasanya elemen lain di halaman situs itu tertutupi warna hitam transparan.
Contoh Popup :
Itulah 15 elemen website yang biasanya ada pada sebuah website. Jika anda masih kurang jelas, anda bisa tanyakan di komentar. Atau, mungkin anda punya pendapat dan tambahan lain ? jangan sungkan untuk berbagi. Semoga bermanfaat 🙂
~Muhammad Syakirurohman~
farizalfa
banyak elemen website yg saya tinggalkan dalam ngeblog kelihatannya. hohoho
muhammad rahman
Tidak masalah, yang penting website kita tetap bisa membuat pengunjung nyaman 😀
Anonymous
bermanfaat.. 😉
Indra
Rahman,
Saya pakai kategori di header. Saya sudah bikin 6 posting mewakili 6 kategori dari 7 kategori. Saya lihat di header yang muncul hanya 5 kategori. Gimana agar 6 kategori muncul sekarang dan nanti 7 kategori muncul saat saya buat posting ke-7.
Terimakasih ya.
Syakir Rahman
coba saya lihat dulu webnya..
Indra
resepsarapan.com
Terimakasih sebelumnya.
Syakir Rahman
itukan pakai wordpress yaa.. mudah pak. login ke dashboard, terus tambahin menunya, di bagian linknya isi link yang mengarah ke category yang dituju
Iyod Asmarandana
ini dia yg saya cari,
thank’s info’y. . .
Syakir Rahman
Sip gan, sama-samaa.. semoga bermanfaat yah
sugeng kariono
ini gan, saya mau tanya apa yang kurang dengan website saya tolong gan cek ya soalnya masih newbie website saya http://www.bertebariklan.com dan http://www.bertebariklan.net
Syakir Rahman
Secara fungsi, keduanya sudah oke.. tapi kalau masalah tampilan, yang .net desainnya ketinggalan zaman.. kalo yang .com desainnya udah bagus.. secara garis besar sih duaduanya udah oke (y)
sugeng kariono
Trima kasih gan syakir sudah berbagi ilmu dengan saya, Selamat tahun baru untuk agan agan semua, semoga di tahun 2015 ini dimudahkan riskinya dan di mudahkan urusannya, semoga diberikan umur panjang.
Syakir Rahman
Amiin, terima kasih kembali 😀
Berbagi Seputar Dunia Blogger, SEO, dan AdSense.
Semua elemen di atas sangatah penting. Tapi yang paling terpenting adalah bagaimana mengaplikasikan semuanya tersebut hingga menjadi sebuah blog/website yang benar-benar disukai oleh Google. 🙂
Artikel yg bagus kawan. Keep posting!
Syakir Rahman
Terima kasih apresiasinya.. 😀
fajar
tulisanfadjar.com kunbalnya mas,, oh iya ngomong2 ane yang koment pertama di bulan masret,,, wkwkwkwk
Syakir Rahman
hahahha.. oke sip dah gan (y)
Agen SOC ( Suplemen Organik Cair )
Mantaaap gan,trims telah berbagi informasi
PGX zone
mantap om
Agus
Sangat bermanfaat. mksh gan
mufti
Assalamualaikum mau nanya ni bang syakir, gimana sih cara buat blog kita templatenya responsive terimakasih kalo jawabnya panjang kirim email saja ya makasih banget
Theimtiyaz14@gmail.com
Syakir Rahman
Coba mas baca tentang posting responsive design dulu disini : http://www.syakirurohman.net/2014/05/pengertian-mengenal-arti-desain-web-responsive.html .. Saya tidak bisa menjelaskan secara lengkap karena butuh banyak tenaga buat menulisnya.. dan juga saya tidak yakin bisa dimengerti dengan mudah oleh yang masih pemula..
aantamim.pun.bz
setidaknya elemen diatas ada 😀
lanjar
super sekali cara berbagi ilmunya
Herman
terima kasih infonya gan, dari kemarin pengen bikin ‘breadcrumb’ tapi gak tau namanya, akhirnya nemu juga disini.
Faizal
waduh…. banyak banget nih elemen yang harus ane tingkatin di blog ane
salam dari Tips Trik & Tutorial
lande
pak saya mau bertanya bagaimana cara pasang iklan diwebsite
Syakir Rahman
Website apa dulu nih ?
hermanto
selamat malan pak Master.
bolehkah belajar lebih bnyak dari Master seputar web dan blog ?
saya bener2 awam, masih mencari referensi untuk membangun sebuah wep atau blog.
alhamdulillah bnget saya menemukan artikel Master ini, bermanfaat bnget buat saya.
saya berharap Agan Master mau membimbing saya.
Untuk langkah pertama apa yang harus saya lakukan untuk membuat sebuah blog (kalo bisa yg gratis dulu buat belajar)..
sebelumnya saya ucapkan terima kasih …
Syakir Rahman
Waduuh, ga usah sebut master pak hehe.. kalau mau nanya nanya lewat facebook aja yah.. untuk langkah pertama, yaa bikin akun blogspot dulu aja di blogger.com 🙂 .. lalu pelajari terus
indra
terimakasih gan,,, blog ni bermanfaat bagi saya,,,
mmuhsin
hebat… semoga manfaat
Nova
bisa saya jadikan modal pengetahuan untuk posting perdana..trims
Lisna Juniani Situmorang
Ini yg saya butuhkan
trims
Yhudawa
Ulasannya komplit mas,lengkap fan jelas,sukses selalu mas
Syakir Rahman
Terima kasih, sukses selalu juga gan
agen jamsi
pop up boleh juga klo blog kita sudah trend
oh cho ah
Keren sob, ini yang saya cari
agus
Mas mau tanya ni ,sedikit melenceng tapi,saya bingung mengenai cara bikin artikel setelah mencarai kata kunci/keyword,oh y saya pakai cms blogger,nah setelah dapat keyword ,otomatis saya aplikasikan di artikel,mulai paragraf pertama,kedua dan paragraf selanjutnya,setelah itu publis.adakah setingan lain setelah menulis artikel agar bisa bersaing dalam pencariaan di google.apa iya setelah menulis artikel harus seting keywoard di heading1,2,dan 3
Syakir Rahman
Masalah penempatan keyword sebenernya ngga begitu penting. Yang penting itu relevansi keywordnya, keterhubungan antara bacaan satu dengan yang lainnya.
Hariyadi
Terimakasih bang ilmunya, bermanfaat sekali…. salam kenal dari saya adongbrekele.blogspot.co.id
cahyo
Terimakasih artikelnya,membantu sekali untuk saya sebagai pemula
./mr.read
main bang ke blog saya ..
masukin saran untuk saya biar lebih enak pembaca nanti ..
http://ctdhacking.blogspot.co.id
Pulung Riswanto
simple… tapi berkesan om
Tiara
Informasinya sangat bermanfaat.. Ijin copas pengertian2nya di atas ya kak, buat tugas kuliah..
Terima Kasih sebelumnya..
ietha
terimakasih gan ilmu ny,, sangat bermanfaat,,,
Manik
Mas, saya mau tanya. Kalau meletakkan anchor text pada footer website lain. Apakah berdampak baik atau buruk bagi website yang kita monetize?
syakirurahman
Well, tergantung websitenya siih, tapi kalau kebanyakan dan dari website yang kurang berkualitas bisa dianggap spam
jasa web
nice artikel gan 🙂
« nuansa.intan.pertiwi's blog
[…] https://www.devaradise.com/id/2013/12/mengetahui-fungsi-elemen-komponen-widget-pada-website.html […]
Tips&Trik Komputer
Ini dia yang saya cari mas.
Tutorialnya komplit, lengkap, jelas dan enak di baca untuk saya pahami. Masih perlu banyak-banyak belajar ngebangun blog.
Thanks ilmunya dan sukses selalu mas 🙂
Komukote
Terima kasih..
Artikel kerennya sangat bermanfaat…