Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna
teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah
<body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag
</html>. Sintaks:
<head>
...........
</head>
Latihan 1:
Menampilkan teks:
Tugas tambahan:
Gantilah teks tersebut dengan teks lainnya.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html
<html>
<head>
<title>Latihan1-2</title>
</head>
<body text="red">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver,
fuchsia, aqua.
Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html
<html>
<head>
<title>Latihan1-3</title>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal,
gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua" background="./images/background.jpg">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
catatan:
./images/ = nama direktori file gambar disimpan background.jpg = nama file gambar
---------------------------------------------------------------------------------------------------------------------------
:: 2-HTML FORMAT TEKS ::
Bisa menggunakan coretan tangan di kertas atau pun menggunakan tools desain khusus
Contoh: Adobe Illustrator, Adobe Photoshop, CorelDraw, PowerPoint, Mockflow, dll.
Secara visual wireframe hanya berupa garis dan kotak yang mengatur tata letak elemen-elemen pada
website
User Interface
Seorang UI designer biasanya akan mendiskusikan wireframe website kepada tim web development
atau klien untuk mendapat masukkan demi perbaikan desain. Setelah disepakati, kerangka dasar
tersebut akan diwujudkan menjadi desain visual yang lebih rapi.
Secara visual, wireframe memang hanya berbentuk garis dan kotak tanpa warna. Bahkan tulisan pada
wireframe berbentuk teks sederhana atau coretan kasar. Sebab, yang diutamakan adalah gambaran
rancangan halaman website saja.
Mengapa Wireframe?
Dengan adanya wireframe, web developer sangatlah terbantu pada pekerjaan mereka agar dalam
proses pengembangan dapat terstruktur dan terarah.
Bila tidak menggunakan wireframe terlebih dahulu mungkin saja dalam proses pengembangan sering
terjadi revisi/perbaikan yang sangat memperlambat pekerjaan.
Komponen Wireframe
*Layout Utama
Komponen utama wireframe adalah layout utama. Komponen ini biasanya berupa kotak-kotak yang
telah diatur sesuai dengan tata letak halaman website. Dalam komponen ini, terdapat beberapa
bagian, seperti header, menu navigasi, body, hingga letak sidebar.
Komponen Interface
Komponen interface adalah komponen yang terkait dengan media interaksi antara tampilan website
dengan pengunjung. Komponen ini digunakan sebagai penunjang informasi pada pengunjung yang
biasanya berupa button, link, judul, font size, logo, dan lain-lain.
*Komponen Navigasi
Salah satu komponen dalam wireframe website adalah navigasi. Komponen ini berguna untuk
mengarahkan pengunjung menjelajahi website Anda dengan mudah. Desain yang digunakan bisa
berupa menu, tanda panah, atau ikon lain sesuai keinginan.
Dengan komponen navigasi yang jelas, nantinya website akan mampu memberikan user experience
yang baik kepada pengunjungnya.
*Komponen Informasi
Sesuai namanya, komponen informasi merupakan konten utama yang ingin disampaikan pada
audiens. Contohnya, input, thumbnail, link, paragraf, dan lain-lain. Oleh karena itu, penting untuk
menempatkan komponen ini di bagian yang paling mudah dilihat pengunjung.
*Komponen Tambahan
Komponen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website. Sebagai
contoh jika merancang website untuk toko online. Komponen tambahan yang bisa Anda gunakan
seperti, fitur cek resi, form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara
langsung.
Kelebihan Wireframe
-Mudah digambar- Mudah dimengerti -Mudah dimodifikasi-Tidak perlu pengkodean