Header AD

Aplikasi Universal HTML Sederhana Bagian 4 : Membuat UI (User Interface) Sederhana

Membuat UI (User Interface) Sederhana.

UI (User Interface)?

merupakan bentuk tampilan grafis yang berhubungan langsung dengan pengguna (user). Antarmuka pengguna berfungsi untuk menghubungkan antara pengguna dengan sistem operasi, sehingga komputer tersebut bisa digunakan. (Sumber : Wikipedia)

Contohnya : dalam kehidupan nyata seperti : kartu kredit, kartu ATM , dan sebagainya, dan untuk dalam program aplikasi misalnya sistem operasi yang anda pakai misal windows mereka juga menggunakan UI (User Interaface) untuk menarik perhatian pengguna agar mau memakainya.

CSS (Cascading Style Sheets)

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. (Sumber : Wikipedia)

Contoh Code :
.contohheader {
      width: 100%;
      background-color: blue;

atau

#contohheader {
      width: 100%;
      background-color: blue;
}

kita dapat membuat file baru atau jika anda ingin menggunakan file yang telah dibuat pada tutorial bagian ke 2 dan ke 3 tentang

pertama kita masuk ke editor file home.html lalu pada bagian bawah <script src="/pages/home/home.js"></script> kita beri jarak menggunakan enter, lalu kita masukkan 
kode :

<style>
#header {
       width: 100%;
       background-color: #009d8a; (sesuaikan dengan warna yang anda inginkan)
       padding: 10px;
       text-align: center;
}
</style>

atau seperti gambar dibawah ini :


Kemudian setelah kita memasukkan CSS maka kita akan masukkan kode untuk menampilkan CSS yang telah kita buat, pada kotak merah kedua diatas, dan kode nya yaitu :

code :
<div id="header">
        Aplikasi Sederhana Ade Haryanto (bisa anda sesuaikan)
</div>

seperti dibawah ini :


Code lengkapnya seperti dibawah ini :


Untuk hasilnya bisa seperti dibawah ini, untuk yang belum tau cara RUN program yang telah dibuat anda dapat membaca tutorial bagian ke 3 disini : Aplikasi Universal HTML Sederhana Bagian 3 : Membuat Navigasi Sedehana


Kita bisa menambah konten sedikit menggunakan HTML dibagian kotak merah kedua seperti dibawah ini :


dan jika ditampilkan akan seperti dibawah ini, sangat sederhana bukan.


Kita akan membuat tambahan tampilan dengan membuat konten untuk meletakkan tempat tulisan, disini kita akan membuat sebuah UI (User Interface) QUIS sederhana (hanya tampilan depannya saja).

tambahkan kode :

#isikonten {
      width : 100%;
      background-color: #006458;
      padding-top : 20px;
      padding-bottom : 20px;
      text-align: center;
}

dan menambahkan kode pada bagian HTML dan letakkan pada dibawah </div> header (kode pada bagian kotak warna merah  ke dua dibawah ini), 


Jika kita run programnya maka akan seperti ini hasilnya.


Sebenarnya masih banyak lagi explorasi untuk UI (User Interface), namun kita hanya mempelajari bagian-bagian yang akan sering kita gunakan saja, misalnya seperti dibawah ini, silahkan anda mencoba membuat kode seperti kotak merah dibawah ini.


Ketika dijalankan maka akan seperti dibawah ini hasilnya, namun konten Quis 7 dan 8 tidak bisa dilihat (belum bisa discroll kebawah).


Untuk mengatasi hal tersebut kita menambah kan kode :

html {
      overflow-y: scroll;
}


Maka kita akan melihat hasilnya bisa discroll seperti dibawah ini,

Sebenarnya masih banyak lagi UI (User Interface) yang lain bentuk namun anda dapat mengkolaborasikan beberapa tutorial dari saya untuk anda jadikan sebagai acuan membuat User Interface yang menawan.

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama
Post ADS 1
Post ADS 2