Oleh, Reiza Oktaviana
Membuat Layout Halaman
Layout web kalau dialih bahasakan adalah tata letak web, yaitu kerangka tampilan dari suatu halaman web yang diatur sedemikian rupa untuk tujuan tertentu, utamanya agar memudahkan pengunjung mengakses isi dari halaman-halaman web tersebut.
Cara membuat layout ini bermacam-macam. Bahkan saat ini sudah sangat bervariasi dan sangat indah, dibantu dengan beberapa tool atau skrip yang bisa didownload gratis. Tetapi pada tutorial kita ini akan dibahas pola dasarnya dalam bahasa HTML.
Bagaimana cara membuat layout? Sebelum membuat layout kita perlu tentukan dulu desain atau rancangannya. Harus jelas tata letak dan posisi serta kegunaan dari masing-masing tata letak itu.
Membuat Header
Tag <header> digunakan untuk bagian halaman web yang merupakan header. Tag ini bisa muncul lebih dari 1 kali, tergantung kebutuhan. Bagian atas web dimana kita meletakkan logo dan judul situs adalah tempat terbaik untuk tag <header>. Namun di bagian atas artikel dinama terdapat judul dan sub judul artikel juga bisa di ‘bungkus‘ dengan tag <header>.
Contoh penggunaan tag <header>:
Membuat Nav
Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.
Contoh penggunaan tag <nav>:
Membuat Jumbotron
Apa itu Jumbotron? Jumbotron adalah satu element yang dibuat untuk tujuan membuat semacam pengumuman,konten khusus atau informasi tentang halaman website.
Sekarang, hampir tiap website menggunakan Jumbotron pada halaman depan mereka. Biasanya Jumbotron ini berwarna grey atau lebih gelap dari warna template website tersebut.
Bagaimana Menggunakan Jumbotron pada Bootstrap?
Kita bisa memanggil class ini menggunakan element <code<<div>, lebih jelasnya mari kita praktekkan.
Buat satu file HTML, lalu pastekan kode berikut.
[html]
Bootstrap Tutorial | codelatte.org
Belajar menggunakan Jumbotronpada Bootstrap.
[/html]
Maka hasilnya akan menjadi seperti ini,
Membuat Sidebar
Sidebar merupakan salah satu bentuk navigasi yang sering digunakan pada suatu halaman website. Penggunaan sidebar seringkali dikaitkan dengan penggunaan panel hamburger sebagai media responsif / dinamisnya suatu navigasi. Kita juga bisa menggunakan sidebar sebagai pengganti panel header yang sudah cukup sering digunakan sebagai komponen navigasi. Adapun posisi dari sidebar berada di bagian kiri maupun kanan halaman website, dengan ukurannya yang tidak lebih besar dari konten website itu tersendiri.
Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag <aside> adalah sidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag <aside> juga bisa digunakan di dalam artikel untuk menandai bagian tambahan.
Contoh penggunaan tag <aside>:
Membuat Konten
Sebelum membuat struktur konten website, kita terlebih dahulu harus memahami perbedaan antara Post dan Page.
POST
Post adalah konten website berupa artikel atau tulisan yang diterbitkan secara rutin. Semua post yang terbit akan ditayangkan sesuai dengan urutan terbaru, sehingga post yang baru akan berada di atas post yang lama. Post akan cocok digunakan apabila Anda akan merilis berita dan informasi tentang update bisnis Anda. Post juga cocok digunakan jika Anda memiliki artikel yang terbit secara rutin.
Cara membuat post baru adalah dengan pergi ke dashboard admin dengan menambahkan /wp-admin pada akhir domain website Anda (contoh: website-anda.wordpress.com/wp-admin)
Kemudian pada sidebar menu di samping kiri, arahkan kursor Anda ke bagian Posts, klik Add New. Setelah itu akan muncul tampilan seperti gambar di bawah ini:
Anda bisa langsung menulis judul dan artikel pada kolom yang tersedia dengan berbagai fitur yang bisa dipadupadankan agar artikel terlihat menarik.
Klik tombol Add Media untuk menambahkan media seperti foto dan video di dalam artikel.
Klik tombol Add Poll untuk menambahkan polling pada artikel.
Klik tombol Add Contact Form agar pengunjung dapat meninggalkan informasi serta komentar di akhir artikel.
Klik tombol Add Location untuk menambahkan lokasi.
Tombol-tombol yang terletak di atas kotak konten merupakan toolbar standar untuk blog yang hampir sama dengan fungsi pada toolbar Microsoft Word. Sehingga Anda bisa mempelajarinya secara otodidak.
Setelah selesai menulis, klik tombol Publish untuk menerbitkan artikel yang telah Anda buat. Anda juga bisa mengatur kapan waktu yang Anda inginkan untuk menerbitkan artikel tersebut. Caranya adalah dengan klik Edit di samping kalimat Publish Immediately.
Pada kolom sebelah kanan, Anda bisa menemukan Categories and Tags. Tujuan keduanya adalah untuk mempermudah pengunjung ketika menjelajahi website Anda. Manfaatkan kedua fitur ini untuk mengelompokkan post agar tidak berantakan.
Category digunakan untuk mengelompokkan sebuah post ke dalam kategori tertentu. Ketika membuat post, Anda wajib untuk memasukkannya ke dalam sebuah kategori. Untuk menambah kategori baru, klik Add New Category.
Tags digunakan untuk menandai sebuah post. Tidak wajib untuk menambahkan Tags dalam sebuah Post, tapi sebaiknya Anda gunakan agar calon customer mudah untuk membaca artikel dalam website Anda. Anda juga bisa memasukkan sebuah post ke dalam banyak Tags dengan berbagai kata kunci yang mendetail. Tetapi sebaiknya, jangan menggunakan terlalu banyak Tags karena akan membingungkan.
PAGE
Page adalah halaman statis (tetap) dalam website. Perbedaan Page dengan Post adalah, Page tidak memiliki tanggal, dan tidak diurutkan berdasarkan tanggal. Salah satu contoh sederhana penggunaan page ialah halaman kontak, atau halaman lain yang berada pada menu navigasi website.
Cara membuat page baru adalah dengan mengarahkan kursor ke arah Page, kemudian klik Add New.
Pada dasarnya, membuat Page hampir sama dengan membuat Post. Hanya perbedaannya ada pada kolom Page Attributes pada sisi kanan tampilan.
Jika Anda bermaksud agar halaman yang Anda buat berada dalam sub halaman yang lain, masukkan ke dalam parent. Apabila Anda telah membuat banyak Page, akan terdapat banyak menu dalam dropdown parent. Bahasan tentang cara mengelola struktur website dan menu akan dijelaskan pada chapter selanjutnya.
Membuat Footer
Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagian footer halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.
Contoh penggunaan tag <footer>: