Mengenal Elemen & Komponen yang Ada Pada Blog/Website

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.

Komponen Dasar

1. Title

Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.

Title Website / judul situs

2. Nama Domain

Nama domain adalah nama alias dari sebuah website. Sebenarnya, nama asli dari setiap website itu berupa IP address yang berupa nomor acak yang unik. Nama domain disewa dari pencatat/registrar domain per tahun. Domain digunakan agar manusia mudah untuk mengingat nama sebuah website. Kadangkala nama domain juga mewakili nama sendiri, nama brand, produk maupun perusahaan.
Contoh nama domain adalah www.syakirurohman.net yang merupakan nama domain blog ini.

3. Alamat URL

URL singkatan dari Uniform Resource Locator. Jika sebuah halaman web kita diibaratkan dengan rumah, maka URL ini adalah alamat lengkap rumah kita. Letaknya ada di addressbar browser. Setiap Halaman web memiliki url yang unik dan berbeda. Format URL bermacam-macam. Namun, semuanya selalu diawali dengan nama domain website atau blog tersebut.
Alamat Url website

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 :

Header sebuah blog

6. Konten/Isi

Konten atau isi sebuah situs berupa informasi dan artikel yang biasanya terletak dibagian tengah. Artikel yang sedang anda baca ini juga adalah bagian dari konten. Konten adalah bagian terpenting dari sebuah blog maupun website. Konten di halaman utama sebuah blog biasanya adalah daftar posting seperti pada gambar.
Konten sebuah situs

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 :

contoh widget website

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 :

footer website

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 :

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 :

Menu Website

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 :

Contoh Breadcrumb

13. Form

Form dalam bahasa indonesia disebut formulir. Yaa, sebagaimana formulir kertas, form pada website juga berfungsi untuk penginputan data dari pengakses website baik itu yang bersifat wajib maupun opsional. Form pada website memiliki berbagai cara input seperti Textfield, Password, ComboBox, Textarea, Radio, Checkbox, Button dan lain-lain.
Contoh form yang digunakan pada blog ini adalah form pencarian (pojok kanan atas) dan form kontak (di halaman kontak).
Contoh form kontak pada website

14. Sharing button bar (Bar tombol berbagi)

Sharing button bar adalah tempat dimana berbagai jenis tombol berbagi ke media sosial berada. Tombol berbagi ini berfungsi untuk membagikan posting ataupun isi pada halaman yang dikunjungi ke media sosial pengunjung. Tombol yang paling sering ada adalah tombol like facebook, tweet Twitter, dan +1 Google+.
Contoh Sharing button bar :
Sharing button 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 :

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~

52 Comments

  1. banyak elemen website yg saya tinggalkan dalam ngeblog kelihatannya. hohoho

  2. bermanfaat.. 😉

  3. 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.

  4. itukan pakai wordpress yaa.. mudah pak. login ke dashboard, terus tambahin menunya, di bagian linknya isi link yang mengarah ke category yang dituju

  5. ini dia yg saya cari,
    thank’s info’y. . .

  6. 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

  7. 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.

  8. 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!

  9. tulisanfadjar.com kunbalnya mas,, oh iya ngomong2 ane yang koment pertama di bulan masret,,, wkwkwkwk

  10. Mantaaap gan,trims telah berbagi informasi

  11. mantap om

  12. Sangat bermanfaat. mksh gan

  13. 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

  14. setidaknya elemen diatas ada 😀

  15. super sekali cara berbagi ilmunya

  16. terima kasih infonya gan, dari kemarin pengen bikin ‘breadcrumb’ tapi gak tau namanya, akhirnya nemu juga disini.

  17. waduh…. banyak banget nih elemen yang harus ane tingkatin di blog ane

    salam dari Tips Trik & Tutorial

  18. pak saya mau bertanya bagaimana cara pasang iklan diwebsite

  19. 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 …

  20. terimakasih gan,,, blog ni bermanfaat bagi saya,,,

  21. hebat… semoga manfaat

  22. bisa saya jadikan modal pengetahuan untuk posting perdana..trims

  23. Lisna Juniani Situmorang

    Ini yg saya butuhkan
    trims

  24. Ulasannya komplit mas,lengkap fan jelas,sukses selalu mas

  25. pop up boleh juga klo blog kita sudah trend

  26. Keren sob, ini yang saya cari

  27. 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

  28. Terimakasih bang ilmunya, bermanfaat sekali…. salam kenal dari saya adongbrekele.blogspot.co.id

  29. Terimakasih artikelnya,membantu sekali untuk saya sebagai pemula

  30. main bang ke blog saya ..

    masukin saran untuk saya biar lebih enak pembaca nanti ..

    http://ctdhacking.blogspot.co.id

  31. simple… tapi berkesan om

  32. Informasinya sangat bermanfaat.. Ijin copas pengertian2nya di atas ya kak, buat tugas kuliah..
    Terima Kasih sebelumnya..

  33. terimakasih gan ilmu ny,, sangat bermanfaat,,,

  34. Mas, saya mau tanya. Kalau meletakkan anchor text pada footer website lain. Apakah berdampak baik atau buruk bagi website yang kita monetize?

  35. nice artikel gan 🙂

  36. 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 🙂

  37. Terima kasih..
    Artikel kerennya sangat bermanfaat…

Tinggalkan Balasan