Nama : Hilal

NIM : 1670231033
UTS Pemrograman Web
P2K – T. Informatika

1. Sebut dan jelaskan prinsip-prinsip dari perancangan web yang baik

2. Buat sourcode HTML dari table berikut ini

3. Jelaskan apa yang anda ketahui dari CSS dan Java Script serta sebutkan keuntungan
menggunakan CSS

1. Prinsip-prinsip dari perancangan web yang baik

1. Tujuan
Desain web yang bagus selalu memenuhi kebutuhan pengguna. Apakah pengunjung web Anda mencari
informasi, hiburan, beberapa jenis interaksi, atau untuk bertransaksi dengan bisnis Anda? Setiap
halaman situs web Anda harus memiliki tujuan yang jelas, dan untuk memenuhi kebutuhan tersebut,
website harus dibuat seefektif mungkin.

2. Komunikasi
Orang-orang di web cenderung menginginkan informasi yang cepat, jadi penting untuk berkomunikasi
dengan jelas, dan membuat informasi Anda mudah dibaca dan dicerna. Beberapa taktik yang efektif
untuk dimasukkan dalam desain web Anda meliputi: mengorganisir informasi menggunakan tajuk utama
dan sub tajuk, menggunakan poin-poin sebagai ganti kalimat panjang yang mengambang.

3. Typefaces
Secara umum, font Sans Serif seperti Arial dan Verdana lebih mudah dibaca online (font Sans Serif
adalah font yang tidak memiliki buntut/ekor seperti font time news roman). Ukuran font yang ideal
untuk membaca online dengan mudah adalah 16px dan berpegang teguh pada maksimum 3 tipografi
dalam maksimal 3 ukuran poin untuk menjaga desain Anda tetap ramping.

4. Warna
Palet warna yang dipikirkan dengan baik dapat meningkatkan pengalaman pengguna. Warna
komplementer menciptakan keseimbangan dan harmoni. Menggunakan warna yang kontras untuk teks
dan latar belakang akan membuat huruf lebih mudah dibaca. Warna-warna cerah bersifat memantik
emosi dan harus digunakan dengan hemat (mis. Untuk tombol dan ajakan bertindak). Last but not least,
ruang putih (white space) sangat efektif untuk memberikan situs web Anda tampilan yang modern dan
rapi.

5. Gambar
Gambar dapat berbicara mewakili ribuan kata, dan memilih gambar yang tepat untuk situs web Anda
dapat membantu penentuan posisi merek dan menghubungkan dengan audiens target Anda. Jika Anda
tidak memiliki foto profesional berkualitas tinggi, pertimbangkan untuk membeli foto stok untuk
mengangkat tampilan situs web Anda. Juga pertimbangkan untuk menggunakan infografis, video dan
grafik karena ini bisa jauh lebih efektif dalam berkomunikasi daripada bahkan potongan teks yang paling
baik ditulis.

6. Navigasi
Navigasi adalah tentang betapa mudahnya bagi orang untuk mengambil tindakan dan bergerak di sekitar
situs web Anda. Beberapa taktik untuk navigasi yang efektif termasuk hierarki halaman logis,
menggunakan remah roti, merancang tombol yang dapat diklik, dan mengikuti 'aturan tiga klik' yang
berarti pengguna akan dapat menemukan informasi yang mereka cari dalam tiga klik.

7. Layout berbasis grid

Menempatkan konten secara acak di halaman web Anda dapat berakhir dengan penampilan
serampangan yang berantakan. Layout berbasis grid mengatur konten menjadi beberapa bagian, kolom
dan kotak yang berbaris dan terasa seimbang, yang mengarah pada desain situs web yang terlihat lebih
baik.

8. Desain pola "F"

Studi pelacakan mata telah mengidentifikasi bahwa orang memindai layar komputer dalam pola "F".
Sebagian besar yang dilihat orang ada di bagian atas dan kiri layar dan sisi kanan layar jarang terlihat.
Alih-alih mencoba memaksakan aliran visual pemirsa, situs web yang dirancang secara efektif akan
bekerja dengan perilaku alami pembaca dan menampilkan informasi dalam urutan kepentingan (kiri ke
kanan, dan atas ke bawah).

9. Muat waktu
Semua orang membenci situs web yang membutuhkan waktu lama untuk dimuat. Kiat untuk membuat
waktu pemuatan halaman lebih efektif termasuk mengoptimalkan ukuran gambar (ukuran dan skala),
menggabungkan kode ke dalam CSS terpusat atau file JavaScript (ini mengurangi permintaan HTTP) dan
memperkecil HTML, CSS, JavaScript (dikompresi untuk mempercepat waktu pemuatannya).

10: Ramah mobile

Sekarang sudah biasa untuk mengakses situs web dari beberapa perangkat dengan ukuran layar ganda,
jadi penting untuk mempertimbangkan apakah situs web Anda ramah mobile. Jika situs web Anda tidak
ramah seluler, Anda dapat membangunnya kembali di tata letak yang responsif (ini berarti situs web
Anda akan menyesuaikan dengan lebar layar yang berbeda) atau Anda dapat membangun situs seluler
khusus (situs web terpisah yang dioptimalkan khusus untuk pengguna seluler).
3. Pengertian CSS dan Java script dan keuntungan CSS
CSS adalah bahasa yang digunakan untuk mengatur tampilan (gaya) elemen-elemen HTML.
Dengan CSS, kita dapat memberikan warna background, border, mengatur posisi elemen,
ukuran font dan lain sebagainya.
Javascript adalah bahasa pemrograman (berjalan pada web browser) yang digunakan untuk
membuat halaman web yang lebih interaktif. Beberapa fungsi yang bisa anda tambahkan
menggunakan Javascript seperti misalnya menampilkan elemen tertentu hanya pada browser
tertentu saja, membuat fitur yang memungkinkan pengguna untuk dapat menyesuaikan ukuran
font pada blog, dan lain sebagainya

Keuntungan menggunakan CSS

Konsumsi Bandwidth Lebih Rendah : Salah satu keuntungan yang paling penting dari CSS adalah
konsumsi bandwith lebih rendah dibandingkan dengan style langsung di HTML.
Penempatan Posisi Lebih Fleksibel : Pengembang web memilih CSS karena menawarkan
fleksibilitas yang lebih besar dalam hal penempatan berbagai posisi elemen di halaman website .
Kompatibilitas dengan browser web yang berbeda : Sejak Cascading Style Sheet kompatibel
dengan sebagian besar browser web, yang disediakan situs tersebut telah dikembangkan
dengan menggunakan HTML atau XHTML.
Cetak halaman web ramah : Alasan lain di balik meluasnya penggunaan CSS untuk aplikasi web
berbasis HTML adalah bahwa mereka menghasilkan halaman web ramah cetak.
Kustomisasi dari halaman web : CSS menggila di kalangan pengembang website karena
menawarkan kustomisasi.
2. Sourcode HTML dari table

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel</title>
<style>

table,tr,td{

border:1pt black solid;

border-collapse: collapse;
}
td{
width: 200px;
}
table{
margin: auto;
text-align: center;
vertical-align: center;
}
</style>
</head>
<body>

<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">
<table style="display: inline-block; margin: 20px 5px; border:0;">
<tr>
<td colspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
 </table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="display: inline-block; margin: 20px 5px;border:0;">
<tr>
<td rowspan="2">7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
</table>
</td>
<td>10</td>
</tr>
<tr style="visibility:hidden;">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>