Langsung ke konten utama

Belajar web membuat MENU TAB

selamat datang di arsipbertuah blog. tutorial ane kali ini ane akan membahas tentang cara untuk membuat menu tab pada web. menu Tab adalah sederetan menu yang ditandai dengan teks. terdiri dari tab File, Insert, Page Layout, dll. Ribbon adalah area yang digunakan untuk menampilkan tab dan menu dari tab yang aktif. Sedangkan Group adalah kelompok menu dalam tiap Ribbon yang memiliki kesamaan fungsi.untuk membuat tab ini bisa olah menggunakan css. tpi ada cara yang lebih mudah dan cepatnya yaitu mengunakan Bootsrap.

Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Membuat TAB menggunakan Bootsrap sangatlah mudah codenya bisa di ambil di website resminya www.getbootsrap.com  pada menu javascrip disana juga bnyak komponen-komponen yang sudah jadi yang telah menggunakan javascript sehingga web kita akan jadi lebih interaktiv.

Cara membuat menu tab menggunakan bootstrap yang pertama harus agan ketahui adalah cara instalansi bootsrap jika agan belum tau bisa baca di cara instalansi bootsrap online dan ofline.

lihatlah contoh code html menggunakan menu tab dibawah ini. silahkan di ambil dan digunakan untuk keperluan agan. 

 <!DOCTYPE html>

<html lang="en">

<head>

  <title>belajar membuat menu tab</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <div>



  <!-- Nav tabs -->

  <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">TAB 1</a></li>

    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">TAB 2</a></li>

    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">TAB 3</a></li>

    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">TAB 4</a></li>

  </ul>



  <!-- Tab panes -->

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">

    	<h1> Hallo ini adalah Isi tab satu</h1>

    </div>



    <div role="tabpanel" class="tab-pane" id="profile">

    <h1> dan ini adalah Isi tab dua</h1></div>



    <div role="tabpanel" class="tab-pane" id="messages">

   	<h1> welcome ini Isi tab tiga</h1></div>



    <div role="tabpanel" class="tab-pane" id="settings">

    <h1> terakhir ini contoh Isi tab empat</h1></div>

  </div>



</div>

</div>



</body>

</html>

sekian kodingnya gan. semoga dapat memberikan manfaat buat agan. terimakasih atas kunjungannya. silahkan bertanya pada kolom komentar dibawah ini.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Metode (SAW) Simple Additive Weighting dan contoh coding PHP

Pengertian SAW Simple Additive Weighting meupakan metode penjumlahan terbobot konsep dasar metode SAW adalah mencari penjumlahan terbobot dari rating kinerja pada setiap alternative pada semua kriteria (Kusumadewi, 2006) Menurut Fajar Nugraha (2011), metode SAW membutuhkan proses normalisasi matrik keputusan (X) ke suatu skala yang dapat diperbandingkan dengan semua rating alternatif yang ada. Metode SAW mengenal adanya 2(dua) atribut yaitu kriteria (benefit) dan kriteria biaya (cost) perbedaan mendasar dari kedua kriteria ini adalah dalam pemilihan kriteria ketika mengambil keputusan. Adapun langkah penyelesaian dalam menggunakannya adalah 1. Menentukan alternative, yaitu Ai 2. Menentukan kriteria yang akan dijadikan acuan dalam pengambilan keputusan, yaitu Cj 3. Memberikan nilai rating kecocokan setiap alternative pada setiap kriteria. 4. Menentukan bobot preferensi atau tingkat kepentingan (W) setiap kriteria W=[ W1 W2 W3 W4] 5. Membuat table rating kecocokan dari setiap ...
3 komentar
Baca selengkapnya

Belajar web : load page dengan Jquery Ajax

selamat datang di arsipbertuah pada posting satu ini saya akan membahas tentang cara membuat load halaman menggunakan jquery ajax. dengan tujuan untuk mempercepat proses loading karena semua element web tidak di load semua. Pengertian Jquery jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif pengertian Ajax AJAX(Asynchoronous Javascript and XML) adalah sebuah teknik pemograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar,sehingga halaman web tidak perlu di reload lagi hanya untuk menganti se...
Posting Komentar
Baca selengkapnya

Belajar php : membuat nomor ID otomatis untuk insert data

Penjelasan tentang membuat nomor id otomatis Hallo gan pada postingan saya kali ini .saya akan berbagi cara untuk membuat id otomatis pada pemograman PHP dan mySQL . id otomatis maksudnya adalah kita akan menciptakan sebuah nomor unik dengan proses penambahan kode tersebut tanpa kita inputkan alias akan dibuat dan diproses oleh php.hampir semua aplikasi menggunakan id otomatis untuk penambahan data baik itu program berbasis desktop maupun berbasis web.jadi jangan diragukan lagi ,agan sudah berada dalam kesempatan yang baik untuk belajar menjadi programmer yang handal. dalam pemograman PHP banyak sekali cara yang dapat dilakukan untuk generate nomor unik yang dapat digunakan sebagai primary key pada database. pada kasus tutorial kali ini saya praktekan menyimpan sebuah data ke database menggunakan PHP yang sesuai dengan posting ini membuat id otomatis.untuk itu saya asumsikan ,agan sudah bisa membuat tabel database dan mengkoneksikannya.pada kasus ini saya mengunakan database seperti in...
Posting Komentar
Baca selengkapnya