Belajar web membuat MENU TAB

-

Belajar web membuat MENU TAB

FyanOktober 14, 2019
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.
Terima kasih telah membaca  Silahkan baca artikel terkait dibawah ini.

Komentar

Posting Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

-
Gambar
Login, Session, dan Logout Login dan logout merupakan proses yang hampir tiap kali kita temui sewaktu browsing. Misalnya saja untuk cek e-mail atau masuk ke account di friendster, atau.. (saking banyaknya, saya sampai tidak bisa menyebutkan satu persatu). Sekarang saatnya kita mencoba membuat form login dan logout sendiri  secara sederhana . Menggunakan PHP & MySQL tentunya. Langkah-langkahnya: Jika anda mencoba dari komputer stand-alone, jalankan dulu webserver dan database server anda. Untuk gampangnya, gunakan saja  phptriad . 1. Database Setiap user yang login akan dicek username dan passwordnya dari tabel user yang terdapat pada database. Kita buat dulu databasenya: Perintah yang digunakan: create database coba; use coba; create table users ( id int auto_increment not null, username varchar(20) not null, password varchar(35) not null, primary key(id) ); jika sudah selesai, ketikkan perintah desc users; maka akan tampil seperti berikut ini:...
Baca selengkapnya
-
Gambar
Membuat Login dan Register Sederhana dengan PHP dan MySQL. fyan_bluffy Gudang Koding  - Kali ini Gudang Koding akan memberikan Tutorial tentang membuat Sebuah Form Login dan Register sederhana Menggunakan PHP dan MySQL, lagi lagi saya tekankan jika anda masih dalam tahap belajar dalam pemograman PHP silahkan Baca Tutorial saya sebelumnya, tentang dasar dasar pemograman PHP.  Spesifikasi Program dan Database :  Program dibuat menggunakan PHP Murni ( Native ) Database Program Menggunakan MySQL. Tabel yang digunakan hanya 1 ( satu ) CSS menggunakan Bootstrap Framework Implementasi Form dan Session pada PHP. File dari Tutorial bisa Anda Download. Buat sebuah Database dengan nama  simplelogin  lalu buat Table " user " dengan detail sebagai berikut :  - username : varchar : 50 : Primary Key  - password: varchar : 100 : -  - email: varchar : 50 : Unique  - nama: varchar : 35: -  Pastikan Urutannya Sama.  Lalu buat str...
Baca selengkapnya

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler

-
Gambar
Pernahkah anda bertanya-tanya bagaimana caranya membuat file setup / installer / installan aplikasi sendiri dalam berbentuk .exe ? kemungkinan anda akan menemukan hal ini ketika akan menginstall sebuah aplikasi dan anda diharuskan untuk mengklik  next-next  dan  next  agar aplikasi tersebut terinstall. Namun, ketika anda membuat sebuah aplikasi menggunakan Visual Studio (misalnya) semua isi file tersebut akan berantakan dan pada waktu inilah anda perlu sebuah aplikasi untuk merapihkan file-file yang berantakan tersebut menjadi satu  package installer  sehingga pengguna yang akan menginstall aplikasi anda pun tidak akan kebingungan. Adapun nama aplikasinya adalah Inno Setup Compiler. Inno Setup  adalah sebuah perangkat lunak instalasi bebas berbasis skrip yang ditulis menggunakan Embarcadero Delphi oleh Jordan Russel. Versi pertama perangkat lunak ini dirilis tahun 1997. Aplikasi ini memudahkan para programmer untuk menyatukan beberapa file p...
Baca selengkapnya