jockerDT: Web Design

Tampilkan postingan dengan label Web Design. Tampilkan semua postingan

Merancang Website dengan Bootstrap - 1

Bootstrap merupakan framework HTML, CSS dan Javascript untuk merancang website yang responsive. Bootstrap bisa diunduh di link ini. Untuk merancang template ini, unduh bootstrap dari link diatas, lalu extrak pada folder yang kita tentukan.

Kemudian kita mulai ke kode HTML-nya :

Awal HTML index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ketiga tag meta diatas harus dijabarkan 
    terlebih dahulu    
    -->
    <title>JockerDT Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Punya kita -->
    <link href="css/style.css" rel="stylesheet">
 <!-- Tambahan untuk browser Internet Explorer -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 
    elements and media queries -->
    <!-- WARNING: Respond.js doesn't work 
    if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script
      src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
      </script>
      <script 
      src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
 
 <h1>Ba da tung pess !!!</h1>

 <!-- jQuery (Digunakan sebagai plugin javasript bootstrap)-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
 <!-- Script bootstrap -->
 <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Catatan :
Pastikan isi folder untuk template kita telah diatur sesuai script HTML ini.
Jquery digunakan sebagai plugin javascript bootstrap. Saya menggunakan jquery dari googleapis. Untuk yang ingin mencoba tutorial ini dengan tidak terhubung ke internet, jangan lupa mendownload jquery-nya dulu : jquery-1.11.2.js

Hasilnya :

Navbar

Navbar : navigasi website pada bagian atas(header). Tambahkan kode berikut setelah tag <body> :

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">JockerDT</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          Link Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

.navbar : navigasi web pada bagian atas web. .navbar-default : tampilan default navbar. .navbar-fixed-top : posisi navbar tetap diatas. .icon-bar : garis-garis(ikon menu) yang kelihatan pada tampilan layar kecil

Note : menu dropdown memerlukan script jQuery.

Hasil :

Hasil pada layar lebih kecil :

Jumbotron

Tambahkan setelah script navbar Kita Ba da tung pess !!! ke dalam div kelas jumbotron.
Codenya :

<div class="container">
 <div class="jumbotron">
  <h1>Ba da tung pess !!!</h1>
  <p>Isi dari jumbotron</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Tombol</a>
 </div>
</div><!-- /.container -->

Konten

Tambahkan setelah jumbotron Konten kita tampilkan dalam bentuk thumbnail.
Codenya :

<div class="row">
  <div class="container">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="..." alt="242x200">
        <div class="caption">
          <h3>Thumbnail 1</h3>
          <p>
            Ini adalah thumnail pertama. 
            Thumbnail bisa kita gunakan sebagai postingan terbaru pada index.html
          </p>
          <p>
            <a href="#" class="btn btn-primary" role="button">
              Tombol Lagi
            </a> 
            <a href="#" class="btn btn-default" role="button">
              Tom...
            </a>
          </p>
        </div>
      </div>
    </div><!-- /.thumbnail -->
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="..." alt="242x200">
        <div class="caption">
          <h3>Thumbnail 2</h3>
          <p>
            Ini adalah thumnail kedua. 
            Selain postingan terbaru, mungkin bisa menjadi navigasi ke label tertentu.
          </p>
          <p>
            <a href="#" class="btn btn-primary" role="button">
              Tombol Lagi
            </a> 
            <a href="#" class="btn btn-default" role="button">
              Tom...
            </a>
          </p>
        </div>
      </div>
    </div><!-- /.thumbnail -->
    <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail">
        <img src="..." alt="242x200">
        <div class="caption">
          <h3>Thumbnail 1</h3>
          <p>
            Ini adalah thumnail kedua. 
            Atau menuju halaman tertentu, misalnya 
            <strong>Tentang</strong> atau lainnya.
          </p>
          <p>
            <a href="#" class="btn btn-primary" role="button">
              Tombol Lagi
            </a> 
            <a href="#" class="btn btn-default" role="button">
              Tom...
            </a>
          </p>
        </div>
      </div>
    </div><!-- /.thumbnail -->
  </div><!-- /.container -->
</div><!-- /.row -->

Kostumisasi tampilan : style.css

Karena kelas row margin-nya tidak nol, maka kita menormalkan agar lebar template sesuai layar. Berikut kodenya :

.row {
 margin: 0;
 padding: 0;
}

Hasil :

Dasar HTML, CSS dan Javascript : Membuat Push Menu -- Bag 3 : Javascript

DT Lover 00.58 Web Design

Pada bagian 3 ini kita akan membuat daftar menu kelihatan dengan kita mengklik ikon menu dan daftar menu kembali menghilang dengan kita mengklik ikon close
Berikut kode javascript-nya.

var main = function(){

$('.icon-menu').click(function(){
$('.menu').animate( {
left: "0px"
}, 200);

$('body').animate({
left: "285px"
}, 200);
});

$('.icon-close').click(function(){
$('.menu').animate( {
left: "-285px"
}, 200);

$('body').animate({
left: "0px"
}, 200);
});
};

$(document).ready(main);

Penjelasan :

Ada 2 proses yang kita buat dengan script ini. Script yang mengubah kode css pada kelas menu dan kelas tombol-menu.
Pertama :
Pada saat yang kelihatan hanya ikon menu dan link menu. Ini merupakan keadaan awal.
Saat ikon menu atau link menu kita klik, maka kelas menu akan kelihatan. Kelas menu terdiri dari ikon close dan daftar menu.
Kedua :
Pada saat daftar menu dan ikon close kelihatan, link menu dan ikon menu bergeser kekanan.
Pada saat ikon close kita klik maka ikon close dan daftar menu kembali menghilang, ikon menu dan link menu bergeser ke kiri kembali ke posisi awal.
Kelas tombol-menu terdiri dari ikon menu dan link menu pada awalnya kelihatan pada posisi paling kiri. Perhatikan kode di atas pada bagian

$('.icon-menu').click(function(){
$('.menu').animate( {
left: "0px"
}, 200);

$('body').animate({
left: "285px"
}, 200);

Kode ini membuat perubahan kode CSS pada kelas menu dan body pada saat terjadi klik pada kelas icon-menu yang terdiri dari ikon menu dan link menu.
Perubahannya pada kelas menu yaitu :
left: -285px menjadi left: 0px
Perubahannya pada body :
left: 0px menjadi left : 285px
Perubahan diatas terjadi dengan hasil kerja method animate. Angka 200 berarti perubahan ini terjadi selama 200 mili detik.
Kode berikutnnya yaitu

$('.icon-close').click(function(){
$('.menu').animate( {
left: "-285px"
}, 200);

$('body').animate({
left: "0px"
}, 200);
});

Kode ini bekerja seperti kode sebelumnya, tetapi perubahan pada atribut kelas menu dan body berbeda, yaitu:
left: 0px menjadi left: -285px
Perubahannya pada body :
left: 285px menjadi left : 0px
Method dari kode telah dibuat pada file kita yang tercantum pada file HTML yaitu jquery-1.11.1.min.js.

Hasilnya :

Keadaan awal
Setelah klik pada ikon menu atau link menu

Sekian postingan tutorial pembuatan Push Menu dari saya. Semoga bisa membantu :)
File lengkap yang sudah jadi: Push Menu
Bagian 1
Bagian 2

Dasar HTML, CSS dan Javascript : Membuat Push Menu -- Bag 2 : CSS

DT Lover 04.34 Web Design

Sekarang kita akan mengatur tampilan statis push menu kita dengan kode CSS. Sesuai bagian 1, kita akan menamai file CSS ini dengan nama style.css.
Tampilan yang kita harapkan dari kode HTML kita pada bagian satu dan kode CSS pada bagian ini adalah seperti berikut.

Kodenya :

/* Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}

/* Initial menu */
.menu {
background: #202024 url('file/black.png') repeat left top;
left: -285px; /* tampilkan daftar menu diluar layar */
height: 100%;
position: fixed;
width: 285px;
}

/* Basic styling */

.tombol-menu {
background-color: #009988;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}

.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}

.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}

.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}

.icon-menu img {
width: 3%;
height: 3%;
padding: -5px 10px 0 0;
}

.icon-menu i {
margin-right: 5px;
}

Penjelasan :

Coba lihat kode css di atas pada kelas menu. kelas menu kita atur posisi di luar layar dengan cara menambahkan kode left : -285. Jadi dengan kita buatnya kode CSS ini, maka yang tampak adalah link menu dan ikon menu. Untuk lebih jelas lihat pada gambar di atas.
Untuk bagian kedua ini, penjelasan di atas merupakan poin terpenting dari kode CSS ini.

Lanjutannya klik link Bagian 3

Dasar HTML, CSS dan Javascript : Membuat Push Menu -- Bag 1 : HTML

DT Lover 02.10 Web Design

Pada push menu ini, pada keadaan pertama, tampak seperti gambar di atas pada nomor 1, lalu saat ikon pada nomor 1 di klik, maka daftar menu pada nomor 2 muncul.
Pada nomor 2, jika ikon 'X' kita klik, maka menu kembali menjadi seperti nomor 1.

Untuk membuat push menu ini, kita mempelajari dasar HTML, CSS, dan Javascript. Berikut cara pembuatannya.

Alat :

teks editor : notepad, notepad++ dan lainnya.
Browser : Firefox, Chrome dan lain-lain.

Bahan :

File HTML, CSS, Javascript
Ikon close, menu, dan background menu dan jquery-1.11.1.min.js. Untuk perlengkapan ini bisa didownload di Perlengkapan push menu

NOTE :

DIharapkan pembaca sudah mengerti sedikit tentang kode HTML dan CSS.

Pada bagian satu ini kita membuat file HTML-nya dengan teks editor. Beri nama file index.html. Berikut kode HTML-nya.

<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet'>
</head>
<body>

<div class="menu">


<div class="icon-close">
<img src="file/close-ikon.png">
</div>


<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


<div class="tombol-menu">

<div class="icon-menu">
<i class="fa fa-bars"></i>
<img src="file/menu-icon.png">
Menu
</div>


<script src="jquery-1.11.1.min.js"></script>
<script src="my-script.js"></script>
</body>
</html>

Penjelasan :

Pada head kita sisipkan link file CSS kita yang bernama style.css.
Pada divisi kelas Menu icon, kita masukkan ikon close-ikon.png. Pada saat file lengkap, ikon akan muncul bersamaan dengan daftar menu setelah ikon menu kita klik.

Setalah icon-close maka kita buat daftar menu About, Blog, Help dan Contact.
Menu ikon pada kelas tombol menu diiringi teks bertuliskan Menu. Kelas ini nentinya merupakan menu default.

Setelah itu kita tambahkan script jquery. Beberapa method dari script ini nantinya kita gunakan ke file Javascript kita yang kita beri nama my-script.js.

Berikut hasil dari kode HTML ini.

Untuk Bagian kedua silahkan klik link Bagian 2.

Install XAMPP

DT Lover 19.46 Web Design

Berbagai situs yang kita akses memerlukan aplikasi server. XAMPP merupakan aplikasi server. Jika ingin mencoba menjalankan website, kita bisa mensimulasikannya di komputer kita secara offline, terutama jika website tersebut menggunakan database seperti MySQL, Xampp adalah pilihan yang tepat. Misalnya untuk percobaan instalasi wordpress.

Konten yang bisa kita nikmati dari XAMPP versi terbaru saat ini yaitu :
Apache
MySQL
PHP
phpMyAdmin
FileZilla FTP Server
Tomcat
Strawberri Perl Portable
Xampp Control Panel

Tutorial Merancang Template Website Sederhana Bag. 3

DT Lover 13.31 Web Design

Saatnya menyulap tampilan rancangan template kita nih. Unduh gambar yang kita gunakan di sini. Oh ya, gambar di simpan satu folder sama sama index html dan gaya.css ya.
Langsung aja ya!
Buka file Gaya.css yang kita buat di awal. Kalau belum dibuat, dibuat sekarang juga ga masalah.
Mengkode lagi !!
Oh ya, yang mau mampir ke bagian 2, klik link ini.
Kalo yang mau ke bagian 1, klik link ini.

body {
background: #E7E7E7 url('body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #564B47;
padding: 0px;
margin: 0px;
}

Simpan, lalu buka file index.html nya di browser anda. Lihat perubahan yang terjadi.

Tutorial Merancang Template Website Sederhana Bag. 2

DT Lover 22.41 Web Design

Oke sekarang kita lengkapi kode htmlnya ya! Mudah2an yang mencoba langsung pusing!
Pertama
Buka index.html yang kita buat di sesi sebelumnya. Edit menjadi seperti di bawah ini :
Kalau yang ingin ke bagian pertama klik link ini.

<html>
<head>
<title>JockerDT</title>
<meta name="author" content="Jocker" />
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>

Tutorial Merancang Template Website Sederhana

DT Lover 02.17 HTML, Web Design

Untuk membuat template website ini ada beberapa hal yang harus disiapkan.
Pertama
Tentukan folder tempat menyimpan rancangan, gambar yang kan digunakan.
Kedua
Untuk membuat HTML dan CSS, kita bisa gunakan teks editor seperti Notepad, Notepad++ yang lebih mudah digunakan, CoffeeCup dan lain-lain untuk pengguna Windows. Kalau seperti saya pengguna ubuntu bisa menggunakan Gedit, Bluefish dan lain-lain.

Oke. Langsung lanjut aja ya!
Pertama kita buat dulu rancangan HTML-nya. Ketikkan kode HTML seperti di bawah ini :

HTML Next Level | Span dan Div

DT Lover 10.57 HTML, Web Design

Jika p digunakan untuk membuat paragraf, h1 untuk header, tag span dan div tidak berarti apa-apa.
Tapi kedua tag ini juga memiliki kegunaan yang akan sangat membantu yaitu untuk mengelompokkan suatu tag. Lalu kelompok ini dapat dipanggil/digunakan di CSS. jadi singkat kata, tag div dan span digunakan di CSS.
Perbedaan antara kedua tag ini yaitu, span biasa digunakan untuk bagian kecil html.
Biasanya tag span digunakan didalam paragraf. Sedangkan tag div(division) biasa digunakan untuk bagian yang lebih.
Contoh penggunaanya :

<div id="divisi">
<p>This is <span class="paper">Next level</span></p>
</div>

Setelah anda coba, tentu yang tampilan adalah teks biasa.
Biar lebih jelas, ini contoh penggunaan div dan span pada HTML dan CSS.

Tutorial HTML Dasar Bag. 2

DT Lover 02.51 HTML, Web Design

Percobaan kita :

<!DOCTYPE html>

<html>
<head>
<title>Percobaan</title>
<style type="text/css">
table,tr,td {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>

<h1>Halaman Web</h1>

Tutorial HTML Dasar

DT Lover 09.11 Web Design

Untuk latihan ini, kita bisa gunakan notepad( untuk pengguna windows) atau gedit untuk pengguna (ubuntu).
Pertama ketikkan kode ini :

<html>
<head>
<title>Belajar HTML Dasar</title>
</head>
<body>
<h1>halo</h1>
<h2>halo></h2>
<h3>halo></h3>
<h4>halo></h4>
<h5>halo</h5>
<h6>halo></h6>
<p>untuk tutorial lebih, klik <a href="jockerdt.blogspot.com">link ini. Pada tag ini kita bisa menuliskan isi dari halaman web.</a>
</p>
</body>
</html>

Ebook HTML, CSS dan Javascript

DT Lover 01.33 HTML, Web Design

Untuk belajar mambuat website kita harus mendalami 3 dasar pembuatan website.
Yang pertama HTML yang mengatur isi dari halaman web yang kita buat, lalu yang kedua CSS, untuk mengatur tampilan halaman web yang kita buat seperti mengatur warna backround, warna text dan lain-lain. Yang ketiga adalah Javascript yang mengatur agar websaite lebih dinamis dan menarik.
Ini ebook untuk yang mau belajar mendesain website.
Silahkan disedot dan semoga membantu.
HTML and CSS Complete Reference
HTML dan CSS dari Akar Sampai Daun
Sams Teach Yourself

Membuat Menu Drop Down

DT Lover 19.30 HTML, Web Design

Menu drop down merupakan salah satu navigasi website yang digemari. Selain membuat pengunjung lebih mudah untuk menjelajah di suatu website, juga membuat tampilan website lebih menarik.
Berikut adalah contoh pembuatan menu drop down.

Kode HTML-nya :

<nav>
 <ul>

jockerDT