Nothing special..

Sekarang ini teknologi aplikasi web sudah sangat maju, dan terus berkembang. Berawal dari web 1.0 yang berupa web dengan metode “dokument sentrik” hingga web 3.0 yang bisa memiliki system refference kepada usernya. Pembuatan web dan aplikasi web harus memiliki desain yang bagus agar user tertarik dengan apa yang mereka lihat. Banyak design yang diperlukan untuk membangun web, diantaranya adalah design arsitektur sistem, desain interface, dan masi ada beberapa desain lainnya. Pada Kesempatan Kali ini saya mencoba mengutarakan bagaimana mendesain interface website.

Desain Interface adalah membuat tampilan dari website tersebut, biasanya menggunakan HTML (Hyper Text Markup Language) sebagai inti dari web tersebut. Dengan HTML kita sebenarnya sudah bisa menampilkan/membuat website statis. Codingan HTML juga terbilang mudah, apalagi bila kita membuatnya dengan tools-tools seperti Dreamweaver dan lainnya. Pembuatan tampilan website sederhana yang hanya menampilkan kalimat “baru belajar membuat web” dengan HTML seperti berikut pada notepad,

<html>

<body>

<p> baru belajar membuat web </p>

</body>

</html>

Kemudian disimpan dengan extension .html. Maka apabila kita membuka file tersebut, akan tampil di browser anda tulisan:

baru belajar membuat web

Untuk mempercantik website yang kita buat, kita bisa menggunakan CSS(Cascading Style Sheet). CSS berfungsi apabila kita menggunakan desain yang sama untuk beberapa bagian dalam website, sehingga kita tidak perlu mengetik ulang setiap desain tersebut. Terdapat dua sifat CSS, yaitu internal dan eksternal.

Untuk yang internal CSS dituliskan di dalam desain website tersebut, apabila kita membuat wesite lain menggunakan CSS yang sama maka code tersebut harus dimasukkan ke dalam website tersebut.

CONTOH :

<html>

<head>

<title>Contoh Bentuk internal</title>

</head>

<style>

body {background:#0000FF; color:#FFFF00; margin-left:0.5in}

h1 {font-size:18pt; color:#FF0000}

p {font-size:12pt; font-family:arial; text-indent:0.5in}

</style>

<body>

<h1 id=”cth1″>Judul ini berukuran 18 dengan warna merah</h1>

<p id=”cth2″>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>

<p id=”cth3″>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>

</body>

</html>

Sedangkan eksternal CSS ditulliskan pada file yang berbeda (di luar file .html) dengan extensi .css. Keuntungan dari pembuatan css eksternal adalah, kita bisa memakai file .css tersebut untuk diimplementasikan pada desain web lain.

Contoh :

body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}

Apabila kita ingin membuat web statis maka, desain dengan HTML dan CSS seperti di atas sebenarnya sudah cukup. Namun apabila kita ingin membuat web yang dinamis dimana web tersebut bisa mengalami perubahan, maka kita bisa menggunakan salah satunya adalah PHP (PHP Hypertext Preprocessor). PHP adalah bahasa pemrograman berbentuk script yang disisipkan dalam website. Penulisan php pada file diawali dengan <?php dan di akhiri  dengan ?>. Dengan adanya php ini, kita bisa membuat website yang terintegrasi dengan database.

Advertisements

Comments on: "Web Design & Programming" (4)

  1. wah, diupdate lagi blognya

    belajar html5+css3 tam 😉

  2. Pratama said:

    iya nih, mw masuk RPL..
    pengennya sih HTML5+CSS3+PhP5 kak..
    punya referensi..??

  3. Pratama said:

    hahha..
    tq bang..
    ckckck,
    master memank bangq satu ni..
    tp minta ajarin ga pernah mau..
    T_T
    mana sibuk lg skrg..
    urus yg bener slas nilai ya bang..
    wkwkwkwk..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: