Pert.3. Pengertian Desain Dan Desain Web

Pengertian Desain
dan Desain Web
Fitri Pranita Nasution, M.Kom
NEXT
Dasar Tag HTML
 Catatan:
Jika Anda ingin menambahkan komentar pada dokumen HTML,maka

tulislah Tag <!...................>,misal:
<!perubahan terakhir 27/6/96>
NEXT
Dasar Tag HTML
Table
Salah satu cara yang paling kompak dan paling mudah

dibaca dalam menampilkan item informasi adalah
dengan tabel.
Manfaat Tabel:
 Tabel dapat digunakan untuk menampilkan teks, link,
grafik atau item lainnya yang dapat dikirimkan ke
tempat lain manapun melalui halaman web.
 Tabel dapat digunakan untuk menyajikan informasi, atau
bahkan dapat diperkuat dengan batas, warna, dan grafik
sedemikian rupa, sehingga tabel itu sendiri menjadi item
– item dekorasi.
NEXT
Elemen Pada Table
 Th = untuk membuat header table
 Tr = untuk membuat baris
 Td = untuk membuat kolom
 Rowspan
Menggabungkan (Merge) Baris
 Colspan
Menggabungkan (Merge) Kolom
NEXT
Dasar Tag HTML
Table
<table>
<tr>
<td>Columns Item</td>
</tr>
<tr>
</tr>
</table>
Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap
item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag
<tr></tr>.
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
<title>Latihan 17</title>
</head>
<body>
<table>
<tr>
<td>Earth</td>
<td>Air</td>
</tr>
<tr>
<td>Fire</td>
<td>Water</td>
</tr>
</table>
</body>
</html>
Tulis di Notepad, kemudian Simpan dengan attention.html

BACK NEXT
Dasar Tag HTML
Table
Table Properties:
 BORDER = akan memberikan garis pembatas pada tabel.
 CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas
luar.
 CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya.
 ALIGN = penjajaran rata kanan, kiri atau tengah.
 BGCOLOR = akan memberikan efek warna pada tabel.
 ROWSPAN = untuk menset jumlah baris ke bawah.
 COLSPAN = untuk menset jumlah kolom ke kanan.
 WIDTH = untuk menset batas lebar / panjang tabel.
 HEIGHT = untuk menset batas tinggi tabel.
BACK NEXT
Form
Form pada HTML memiliki unsur input(masukan) berbagai

macam seperti:
 Text fields
 Checkboxes
 Radio-buttons
 Buttons
 Textarea
 Combo Box
 DLL
BACK NEXT
Pembentukan Input
 Text Field = <input type="text">

Nama : <input type="text” name="firstname">
 Checkboxes = <input type="checkbox">
<input type="checkbox" name=" checkbox " value=" checkbox ">
 Radio Button= <input type="radio">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
 Button = <input type="submit" >
<input type="submit" value="Proses">
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>

BACK NEXT
Dasar Tag HTML
Table
(kolom bewarna)
<html>
<head>
</head>
<body>
<h3>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>

BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
Tulis di Notepad, kemudian Simpan dengan attention.html BACK NEXT

Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
<td align=center colspan=2>
NIM & NAMA LENGKAP
</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table></body></html>
Tulis di Notepad, kemudian Simpan dengan attention.html BACK NEXT

Dasar Tag HTML
 Soal (8)
Tuliskan Source Code dari tampilan berikut:
BACK NEXT
Dasar Tag HTML
 Soal (9)
BACK NEXT
Dasar Tag HTML
 Soal (10)
BACK NEXT
Pembuatan Table
<Table border=”1”>
<Th colspan=”5” align=”Center”> Header <Th>
<Tr>
<Td> Kolom 1 </Td>
<Td> Kolom 2 </Td>
<Td> Kolom 3 </Td>
<Td> Kolom 4 </Td>
<Td> Kolom 5 </Td>
</Tr>
BACK NEXT
Masukkan Gambar
<img src="a.jpg" style=“ width:100px;

height:100px”>
Posisi gambar
<img src="a.jpg" style="float:right;
width:100px; height:100px">
BACK NEXT
Dasar Tag HTML
Combo box :
<select>
<option value=“Senin"> Senin </option>
<option value=“Selasa"> Selasa </option>
<option value=“Rabu"> Rabu </option>
<option value=“Kamis"> Kamis </option>
<option value=“Jumat"> Jumat </option>
<option value=“Sabtu"> Sabtu </option>
<option value=“Minggu"> Minggu </option>
</select>
BACK NEXT

Pert.3. Pengertian Desain Dan Desain Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pert.3. Pengertian Desain Dan Desain Web

Judul Asli:

Diunggah oleh

Hak Cipta:

Format Tersedia

Pengertian Desain

dan Desain Web

Fitri Pranita Nasution, M.Kom

Jika Anda ingin menambahkan komentar pada dokumen HTML,maka

Salah satu cara yang paling kompak dan paling mudah

Tulis di Notepad, kemudian Simpan dengan attention.html

Form pada HTML memiliki unsur input(masukan) berbagai

 Text Field = <input type="text">

Tulis di Notepad, kemudian Simpan dengan attention.html

Tulis di Notepad, kemudian Simpan dengan attention.html

Tulis di Notepad, kemudian Simpan dengan attention.html BACK NEXT

Tulis di Notepad, kemudian Simpan dengan attention.html BACK NEXT

<img src="a.jpg" style=“ width:100px;

Anda mungkin juga menyukai