7:22 AM
Unknown
IMAGE HTML
•Fungsi gambardalam suatu web page merupakan daya penarik bagi pengunjung website.
•Dengan penambahan gambar maka akan mengakibatkan semakin bertambah besarnya penggunaan bytedari dokumen dari HTML, yang secara otomatis akan berakibat terhadap kinerja atau memperlambat waktu tampil dari halaman web tersebut.
LANJUTAN...
•Fungsi pengolahan gambar terdiri dari:
–Image alignment / perataan teks pada gambar
–Image adjustment / ukuran gambar
–Image alternate / teks gambar
–Image link / link gambar
•File gambar yang umum digunakan ada 3 jenis format imageyaitu :
–GIF (Graphical Interchange Format) (.GIF)
–JPEG(Joint Photographic Expert Image) (.JPG)
–PNG(Portable Network Graphics)(.PNG)
•Tag <img />
•Sintaks Penulisanya :<img src="url" />
ATRIBUT TAG <img />
•srcfungsinya url dari file image/direktori gambar
•alignfungsinya untuk letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
•widthfungsinya untuk lebar gambar dalam satuan pixel
•heightfungsinya untu tinggi gambar dalam satuan pixel
•altfungsinya untuk menampilkan teks pengganti jika gambar tidak tampil di browser
•borderfungsinya untuk memberi bingkai
<html>
<head>
<title>Contoh Penggunaan Img</title>
</head>
<body>
<p>
<p>Logo Amikom <img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom" /> menggunakan align="bottom".</p>
</body>
</html>
<html>
<head>
<title>Imgsebagaisuatulink</title>
</head>
<body>
<p>
<b>Untukmengunjungiwebsite amikomklikgambardisamping</b><a href="image.html"><imgsrc="tombol.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a>
</p>
</body>
</html>
•Tag awal <form> Tag Penutup </form>
•Sintaks Penulisannya :<form>.Input elemen.</form>
•Radio,elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
•Checkbox,elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
•List,elemen pilihan dalam bentuk daftar.
•Button,elemen berupa tombol untuk melakukan suatu proses.
•Submit,elemen tombol yang digunakan untuk memanggil url.
•Reset,elemen tombol yang digunakan untuk mengembalikan kondisi awal.
•Image,digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
•Textarea,elemen yang dapat menampung kumpulan teks ketikan dari user.
•File,elemen button yang dapat memanggil file atau gambar dari storage.
•Password,elemen berupa teks yang khusus digunakan untuk mengisi password.
<html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<form>
Nama<input type="text" name="nama" /> <br>
Password <input type="password" name="pwd" /> <br>
<input type="radio" name="sex" value="male" checked /> Pria
<input type="radio" name="sex" value="female" /> Wanita<br>
<input type="checkbox" name="jurusan" value="ti" />TeknikInformatika<br>
<input type="checkbox" name="jurusan" value="si" />
SistemInformasi<br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
<html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<form>
PilihJenisKendaraan
<select name="motor">
<option value="yamaha">Yamaha</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
</select>
</form>
</body>
</html>
<html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<textareaname="alamat" cols="55" rows="5"></textarea></select>
</form>
</body>
</html>
•Elemenfieldsetmerupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
•Elemenlegenddigunakan untuk memberikan judul pada sebuahfieldset.
•Sintak Penulisannya :<fieldset><legend>Judul</legend></fieldset>
Tabel HTML
Tabel dalam HTML ini seperti halnya tabel dalam ms word/ms excel
tag <table>...</table>
Elemen - Elemen Tabel
<table> . . . </table> = Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption> = Pembentuk judul tabel.
<tr> . . . </tr> = Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th> = Pembentuk sel header tabel.
<td> . . . </td> = Pembentuk sel data dalam tabel.
Serta ada beberapa artibut di dalam elemen-elemen tabel tersebut
cth
<table width="500" border="1" bordercolor="#FF0000">
<caption>CONTOH</caption>
<tr>
<th width="200">Baris 1 Kolom 1</th>
<th width="180">Baris 1 Kolom 2</th>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Colspan, Rowspan
Didalam ms word kita bisa menyebutnya "Merge Cells"
cth
<table width="500" border="1" >
<caption> Colspan, Rowspan </caption>
<tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr>
<tr>
<td rowspan="2">Baris 2 dan Baris 3 Di Gabung</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
•Fungsi gambardalam suatu web page merupakan daya penarik bagi pengunjung website.
•Dengan penambahan gambar maka akan mengakibatkan semakin bertambah besarnya penggunaan bytedari dokumen dari HTML, yang secara otomatis akan berakibat terhadap kinerja atau memperlambat waktu tampil dari halaman web tersebut.
LANJUTAN...
•Fungsi pengolahan gambar terdiri dari:
–Image alignment / perataan teks pada gambar
–Image adjustment / ukuran gambar
–Image alternate / teks gambar
–Image link / link gambar
•File gambar yang umum digunakan ada 3 jenis format imageyaitu :
–GIF (Graphical Interchange Format) (.GIF)
–JPEG(Joint Photographic Expert Image) (.JPG)
–PNG(Portable Network Graphics)(.PNG)
•Tag <img />
•Sintaks Penulisanya :<img src="url" />
ATRIBUT TAG <img />
•srcfungsinya url dari file image/direktori gambar
•alignfungsinya untuk letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
•widthfungsinya untuk lebar gambar dalam satuan pixel
•heightfungsinya untu tinggi gambar dalam satuan pixel
•altfungsinya untuk menampilkan teks pengganti jika gambar tidak tampil di browser
•borderfungsinya untuk memberi bingkai
CONTOH PENGGUNAAN TAG IMG
<!DOCTYPE html><html>
<head>
<title>Contoh Penggunaan Img</title>
</head>
<body>
<p>
<p>Logo Amikom <img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom" /> menggunakan align="bottom".</p>
</body>
</html>
IMAGE SEBAGAI LINK
<!DOCTYPE html><html>
<head>
<title>Imgsebagaisuatulink</title>
</head>
<body>
<p>
<b>Untukmengunjungiwebsite amikomklikgambardisamping</b><a href="image.html"><imgsrc="tombol.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a>
</p>
</body>
</html>
FORM & INPUT HTML
•Formmerupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web.•Tag awal <form> Tag Penutup </form>
•Sintaks Penulisannya :<form>.Input elemen.</form>
JENIS MASUKAN DALAM FORM
•Text,digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.•Radio,elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
•Checkbox,elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
•List,elemen pilihan dalam bentuk daftar.
•Button,elemen berupa tombol untuk melakukan suatu proses.
•Submit,elemen tombol yang digunakan untuk memanggil url.
•Reset,elemen tombol yang digunakan untuk mengembalikan kondisi awal.
•Image,digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
•Textarea,elemen yang dapat menampung kumpulan teks ketikan dari user.
•File,elemen button yang dapat memanggil file atau gambar dari storage.
•Password,elemen berupa teks yang khusus digunakan untuk mengisi password.
CONTOH TAG <INPUT>
<!DOCTYPE html><html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<form>
Nama<input type="text" name="nama" /> <br>
Password <input type="password" name="pwd" /> <br>
<input type="radio" name="sex" value="male" checked /> Pria
<input type="radio" name="sex" value="female" /> Wanita<br>
<input type="checkbox" name="jurusan" value="ti" />TeknikInformatika<br>
<input type="checkbox" name="jurusan" value="si" />
SistemInformasi<br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
CONTOH TAG <SELECT>
<!DOCTYPE html><html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<form>
PilihJenisKendaraan
<select name="motor">
<option value="yamaha">Yamaha</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
</select>
</form>
</body>
</html>
CONTOH TAG <TEXTAREA>
<!DOCTYPE html><html>
<head>
<title>ContohTag Input Form</title>
</head>
<body>
<textareaname="alamat" cols="55" rows="5"></textarea></select>
</form>
</body>
</html>
ELEMEN LABEL, FIELDSET, & LEGEND
•Elemenlabelmemberikan fasilitas untuk menambahkan teks pada elemen masukan form.•Elemenfieldsetmerupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
•Elemenlegenddigunakan untuk memberikan judul pada sebuahfieldset.
•Sintak Penulisannya :<fieldset><legend>Judul</legend></fieldset>
Tabel HTML
Tabel dalam HTML ini seperti halnya tabel dalam ms word/ms excel
tag <table>...</table>
Elemen - Elemen Tabel
<table> . . . </table> = Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption> = Pembentuk judul tabel.
<tr> . . . </tr> = Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th> = Pembentuk sel header tabel.
<td> . . . </td> = Pembentuk sel data dalam tabel.
Serta ada beberapa artibut di dalam elemen-elemen tabel tersebut
cth
<table width="500" border="1" bordercolor="#FF0000">
<caption>CONTOH</caption>
<tr>
<th width="200">Baris 1 Kolom 1</th>
<th width="180">Baris 1 Kolom 2</th>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Colspan, Rowspan
Didalam ms word kita bisa menyebutnya "Merge Cells"
cth
<table width="500" border="1" >
<caption> Colspan, Rowspan </caption>
<tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr>
<tr>
<td rowspan="2">Baris 2 dan Baris 3 Di Gabung</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
Posted in: web4
