Resume kuliah Pemrograman Web - Pertemuan 2

Resume 2
Mata kuliah : Pemrograman Web
Dosen : Kurniawan Jatmika, S.KOM

Konsep Desain Tampilan Web

*** Web Form ***

• Web Form adalah suatu bentuk web yang dapat berisi elemen form. Elemen form adalah elemen yang memungkinkan pengguna untuk memasukkan informasi dalam formulir.
• Suatu bentuk web didefinisikan dalam bahasa pemrograman formal seperti HTML, Perl, Java atau NET. Formulir web mengirimkan informasi dan disimpan dalam tabel database dan secara opsional dapat dikirim ke alamat e-mail yang di tuju.
• Web form mempunyai 3 atribut:

1. Font-family : Menentukan jenis font pada suatu elemen. Contoh penulisan :

   {font-family:Arial, “times roman”}

2. Font-size : Menentukan ukuran font dalam suatu elemen. Nilai yang dapat diberikan adalah xx-small,x-small, small, medium,large,x-large,xx-large,larger dan smaller atau dalam bentuk presentase. Contoh penulisan : {font-size : large}
3. Font-colour : Menentukan warna font dalam suatu elemen. Contoh penulisan : {font-colour : "Black"}

- Contoh Web form :

<form>
 
<table>
<tbody>
<tr>
<td>Customer *</td>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>Address</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Phone *</td>
<td>
<input type="text" /></td>
</tr>
<tr>
<td>Special notes</td>
<td><textarea name="fld_de9795647d"></textarea></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<input id="subbut" type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
 
</form>

Sumber : link 1, link 2

*** Master Page ***

• Master page adalah halaman master yang memungkinkan anda untuk membuat tampilan yang konsisten dan perilaku untuk semua halaman (atau kelompok halaman) dalam aplikasi web anda.
• sebuah master page menyediakan template untuk halaman lain, dengan tata letak bersama dan fungsionalitas. Master page mendefiniskan placeholder untuk konten, yang dapat diganti dengan halaman konten. Hasil output adalah kombinasi dari halaman master dan halaman konten
• contoh master page :

Sumber : link

*** Table ***

• Tabel didefinisikan dengan tag <table>
• Tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi ke dalam sel data (dengan tag <td>). td singkatan dari "data tabel", dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, formulir, tabel lain, dll.
• Contoh tabel :

Sumber : link

*** Hyperlink ***

• Hyperlink(atau link) adalah kata, kelompok kata, atau gambar yang dapat anada klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen ini.
• Bila anda memindahkan kursor ke suatu link di halaman web, tanda panah akan berubah menjadi tangan kecil.
• link yang ditentukan dalam HTML menggunakan yag <a>
• Tag <a> dapat digunakan dalam dua cara :
1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut huruf
2. Untuk membuat bookmark dalam dokumen, dengan menggunakan nama atribut
• Contoh Hyperlink :

Sumber : link 

*** Font ***

• Menentukan metode untuk mengatur font pada suatu elemen. Nilai-nilai pada properti font adalah font-style, font-variant, font-weight, font-size, line-height, font family, dan lain - lain.
• Macam-macam font :

1. Font-family : Menentukan jenis font pada suatu elemen. Contoh penulisan :

   {font-family:Arial, “times roman”}

2. Font-size : Menentukan ukuran font dalam suatu elemen. Nilai yang dapat diberikan adalah xx-small,x-small, small, medium,large,x-large,xx-large,larger dan smaller atau dalam bentuk presentase. Contoh penulisan : {font-size : large}
3. Font-colour : Menentukan warna font dalam suatu elemen. Contoh penulisan : {font-colour : "Black"}

Sumber : Link

*** Image ***

• Dalam HTML gambar didefinisikan dengan tag <img>.
• Tag <img> kosong, yang berarti bahwa itu hanya atribut, dan tidak memiliki tag penutup.
• sintaks untuk mendefinisikan gambar :

Sumber : Link

*** Lampiran ***