Subscribe Us

Header Ads

Materi Desain Grafis Interaktif : Anatomi Pada Halaman Web

Anatomi halaman web

1) Mengenal Elemen pada web.

   Untuk belajar me layout website, hal pertama yang harus dilakukan yaitu mengetahui elemen elemen web. Selanjutnya, merancang tata letak, dan lain lain. Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space  dapat digambarkan sebagai berikut :

    1. Containing Block. 
Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
    2. Logo. 
Identitas perusahaan, organisasi, pemilik situs.
    3. Navigation. 
Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
    4. Content. 
Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan. 
    5. Footer. 
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
    6. Whitespace. 
Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.
2) Elemen Form

1. Text Field (tag  <input type="text" />)

Elemen form yang digunakan untuk memasukan teks (huruf dan angka) dalam satu baris. Lebar karakter defaultnya adalah 20 karakter, nameun bisa kita ubah sesuai keinginan kita.

2. Radio Button (tag  <input type="radio" />) 

Elemen form yang digunakan untuk menentukan satu pilihan di antara beberapa pilihan yang disediakan.
Penulisan : <input type="radio">

3. Checkbox (tag  <input type="checkbox" />)

Elemen form yang digunakan untuk menentukan beberapa pilihan atau semua di antara semua pilihan pilihan yang disediakan.
Penulisan : <input type="checkbox">

4. Drop Down List (tag  <select> </select>) 

Elemen form yang digunakan untuk daftar / list dalam bentuk drop down. Ada 2 tag yang digunakan yaitu <select> untuk mendefinisilan drop down list dan <option> untuk mendefinisikan isinya.
Penulisan : <select ><option> isi </option></select>

5. Text Area (tag  <input type="text" />) 

Elemen form yang digunakan untuk memasukan teks (huruf dan angka) lebih dari satu baris.
Penulisan : <textarea>

6. Submit Button (tag  <input type="submit" />) 

Elemen form yang berupa tombol, digunakan untuk mengirim semua data isian dalam element form ke server (dalam hal ini file asp, php, jsp atau yang lainnya, yang dituliskan di dalam atribut action di dalam form di mana tombol ini ditempatkan) untuk diproses.
Penulisan : <input type="submit">

3) Elemen Pada Content

1. Title

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

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.

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.

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.

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.

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.

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

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

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.

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.

4) Elemen Pada Label
        Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

5) Elemen dinamis

atau bisa disebut elemen bergerak yang mebuat pengunjung tertarik

Posting Komentar

0 Komentar