KATA PENGANTAR
Puji dan Syukur Kepada Tuhan Yang Maha Esa atas Kasih dan Rahmatnya saya bisa menyelesaikan tugas pemrograman web
I ini dengan baik meskipun disana sini
ada banyak kekurangan dan kelemahan saya dalam meyelesaikan tugas ini.
Pratikum III ini membahas tentang bagaimana cara memformat gambar, table
dan form dan menurut saya ini keren banget dan mudah dipelajari jika sering
diulangi dan dipahami apa maksudnya.
Saya juga tidak lupa berterimakasih kepada Dosen yang telah mengasuh
matakuliah pemrograman web I saat ini,dan juga kepada teman-teman yang telah
membantu kami untuk memahami sedikit dari pemrograman web I saat ini.
Bila ada kekurangan dan kelemahan saya dalam menyelesaikan tugas ini, saya
mengharapkan kritik dan saran dari teman-teman dan pembaca ,yaitu kritik yang
sifatnya membangun, untuk kesempurnaan tugas ini selanjutnya.
Medan 21 Oktober 2014
Penulis
1.
Tujuan Pembelajaran
a.
Bisa menuliskan struktur dokumen HTML dan tag HTML dengan benar kedalam
software pendukung untuk pembuatan sebuah halaman web.
b.
Bisa mendefinisikan fungsi berbagai tag HTML.
c.
Bisa menggunakan berbagai tag beserta atribut yang ada
dalam dokumen/kode-kode HTML.
2.
Cara Format Gambar,Table dan Form
Pada HTML Dalam Pembuatan Web
A.
Format Gambar Pada HTML
Perintah untuk menampilkan
format gambar atau menambah gambar di HTML atau
halaman web ditandai dengan
tag <img> dan atribut ”
src “ untuk lokasi dari gambar yang akan kita ambil.
Hal
yang perlu diperhatikan adalah ukuran dari gambar yang di
tampilkan. semakin besar ukuran
gambar, maka proses menampilkannya semakin lama.
Atribut dalam tag <img> adalah src (alamat gambar), align (posisi
gambar), width (lebar gambar), height (tinggi gambar), alt (keterangan gambar).
Contohnya:
<html>
<head>
<title>
laihan </title>
</head>
<body
bgcolor="pink">
<table border="1" width="100"
height="200" leftmargin="50px">
<tr>
<td><img
src="keren.jpg" width="200px"
height="200px"></td>
</tr>
</table>
<h3>
Belajar menyisipkan
gambar dengan html.
</h3>
1
</body>
</html>
B.
Format Table Pada HTML
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag
<table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi
ke dalam cell-cell. Baris dibuat dengan tag <tr>, dan cell-cell yang akan
membentuk kolom dibuat dengan tag <td>.
Contoh :
<html>
<head>
<title>pratikum_2</title>
</head>
<h2>Belajar
buat table</h2>
<body
bgcolor="pink">
<table border="1" width="400"
height="400" align="left">
<tr>
<td
align="center">hello</td>
<td align="center"
colspan="3">oke</td>
</tr>
<tr>
<td align="center"
rowspan="3">1</td>
<td align="center"
colspan="3">2</td>
</tr>
<tr>
<td
align="center">3</td>
</tr>
</table>
<i><b><marquee>Saya
sedang belajar buat table</marquee></b></i>
</body>
</html>
2
Hasilnya:
C.
Format Form HTML
Form adalah salah satu tag HTML yang dipakai
untuk penempatan inputan yang akan diisikan oleh user untuk dieksekusi
selanjutnya. HTML Form sering
digunakan untuk meminta inputan dari user yang kemudian diproses
oleh server side scripting seperti PHP, JSP, dan sebagainya. Form HTML
diapit oleh tag <form> </form> . Elemen-elemen
form dalam HTML misalnya berupa button, checkbox, option,
select, text, dan textarea.
Contoh :
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body bgcolor="pink">
<form action=" formulir.html"
method="get">
Nama: <input type="text"
name="nama" value="Supena Halawa" />
<br />
Password: <input type="password"
name="password" />
<br />
Jenis Kelamin :
<input type="radio"
name="jenis_kelamin" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jenis_kelamin"
value="perempuan" />
Perempuan
<br />
Hobi: <input type="checkbox"
name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked
/> Menulis
<input type="checkbox" name="hobi_jalan-jalan"
/> Jalan-jalan
<input
type="checkbox" name="hobi_Nonton" /> Nonton
3
<br />
Asal Kota:
<select
name="asal_kota" >
<option value="Kota Medan"> Medan</option>
<option>Nias</option>
<option value="Kota Semarang"
selected>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar"
rows="5" cols="20">
Silahkan katakan isi hati anda
</textarea>
<br />
<input type="submit" value="Mulai Proses" >
<input type="reset"
value="cancel" >
</form>
</body>
</html>
Hasil
KESIMPULAN
Dari pembahasan diatas dapat saya simpulkan bahwa pemrograman
web merupakan program yang dibuat untuk membuat
halaman –halaman yang didasari pada stuktur dasar HTML dan dikembangkan
dengan membuat format gambar,table dan form.
Dalam pembuatan tabel juga memiliki fungsi penting yaitu untuk bisa
menampilkan data dalam format baris dan kolom, sehinga tables dapat dimanfaatkan untuk sarana
utama dalam melakukan penataletakan guna penempatan secara tepat teks maupun
gambar . Adapun hasil dari struktur HTML yang kami buat yaitu:
<html>
<head>
<title>pratikum_2</title>
</head>
<body bgcolor="pink">
<H2>foto keren</H2>
<table border="1"
width="700" height="200" leftmargin="50px">
<tr>
<td><img
src="tes.jpg" width="200px" height="200px"></td>
<td><img
src="dsgc.jpg" width="200px"
height="200px"></td>
<td><img
src="IMG_20140930_072455.jpg" width="200px"
height="200px"></td>
<td><img
src="tes.jpg" width="200"
height="200px"></td>
<td><img
src="JYUKJ.jpg" width="200px" height="200px"></td>
</tr>
<tr>
<td><img
src="tes.jpg" width="200px"
height="200px"></td>
<td><img
src="ytfggyug.jpg" width="200px"
height="200px"></td>
<td><img
src="JYUKJ.jpg" width="200px"
height="200px"></td>
<td><img
src="tes.jpg" width="200px"
height="200px"></td>
<td><img
src="dsgc.jpg" width="200px"
height="200px"></td>
</tr>
</table>
<br>Tambah foto
<form>
5
<P>NO<input type="TEXT"><br>
<P>JUDUL<input type="TEXT"><br>
<P>FOTO<input type="file"><input
type="button" value="browser"><br>
<P> KET<TEXTAREA cols="40"
rows="10"><TEXTAREA><br>
<input type="submit"
value="simpan">
<input type= "button"
value="batal">
</form>
</body>
</html>
Hasilnya:
6
Tidak ada komentar:
Posting Komentar