HTML (Table, Form, Frame, Hyperlink)

Slides:



Advertisements
Presentasi serupa
Image – Hyperlink – Form
Advertisements

Hyper Text Markup Language
HTML PEMROGRAMAN INTERNET. Form & Input HTML Form adalah area yang bisa ditempati oleh elemen form. Elemen form adalah elemen yg mengijinkan user memasukkan.
Materi 11 Membuat Form Hai. Saya akan menunjukkan bagaimana membuat web page yang bersifat interaktif dengan penggunaan tag. Dengan tag ini anda dapat.
Pemrograman web dasar TABEL.
3. Pendalaman HTML Penggunaan format table di HTML
Internet Programming FORM DAN UP LOAD FILE M. Agus Zainuddin PENS – ITS Surabaya.
HTML (Lanjut).
HTML (Table, Form, Frame, Hyperlink)
TABEL , FORM DAN FRAME.
Pemprograman BaSIS Web
FORM dan FRAME.
ADD-ON Dasar HTML.
Menggunakan Formulir A’ud Solehuddin::Jan2012. Materi Dasar Penggunaan Formulir Memasukkan Data dengan INPUT Tipe TEXT Tombol SUBMIT dan RESET Perbedaan.
Perancangan Web Pertemuan IV
Fakultas Teknologi Informasi Universitas Budi Luhur
Muhammad Yusuf Teknik Informatika – Universitas Trunojoyo /FB :
Pemrograman Basis Data Berbasis Web
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.
FORM.
S1 Teknik Informatika - Unijoyo 1 Pemrograman Basis Data Berbasis Web Pertemuan Ke-4 (HTML )
(HTML). Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu that web page.
Mengenal dan teknik pembuatan form
HTML Form dan Manipulasinya
MATERI PERKULIAHAN REKAYASA PERANGKAT LUNAK DISUSUN OLEH : KRISTIAWAN NUGROHO, M.KOM Fakultas Kesehatan.
Komputer aplikasi it-I (html)
FORM HTML Oleh : Fajar Y. Zebua.
Pertemuan Ke-3 (HTML Lanjut [1])
HTML LANJUT.
RONA SALWA IHDINA PTI UM
PERTEMUAN 2 HTML (Lanjutan).
Adi Rachmanto – KAIT-1 – UNIKOM – 2011
Perancangan & Pemrograman Web
Pembuatan Table Pada WEB
HTML HyperText Markup Language
Mengenal Java Script.
PENGANTAR HTML NEXT.
Komputer aplikasi it-I (html)
FORM.
HTML HYPERTEXT MARKUP LANGUAGE
Mengenal dan Teknik Pembuatan Frame
Komputer aplikasi it-I (html)
Adi Rachmanto – UNIKOM T A B E L Komputer aplikasi iT-1 Adi Rachmanto – UNIKOM
Mengenal dan Teknik Pembuatan Frame
( Materi web HTML ) Membuat tabel.
Table.
JavaScript.
PJ : Nuraini Purwandari
Pertemuan ke 5 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
Komputer aplikasi it-I (html)
List, Image, Link dan tabel
Pemrograman Basis Data Berbasis Web
HTML HyperText Markup Language
Hyperlink & Form Pertemuan 11
T A B E L.
Pemrograman Web HTML (4) Table Form Andy Haryoko, ST
Internet dan Web By : Lisda Juliana P..
MENGGUNAKAN FORM Jika menginginkan sebuah website interaktif ,maka digunakan FORM. Sebuah form menggunakan : tag dan ditutup dengan tag
Hyperlink and Form Session 10 & 11
HTML Muhammad Yusuf Teknik Informatika – Universitas Trunojoyo
Pertemuan ke 3 Ahmadi Sistem Informasi STMIK “BINA NUSANTARA JAYA”
PEMROGRAMAN WEB DEWI SULISTIYARINI, S.KOM
Pemrograman Basis Data Berbasis Web
Pemrograman Web HTML (5) Form CSS Andy Haryoko, ST
KOMPUTER APLIKASI IT I FORM.
FORM HTML.
Form.
Web Design HTML TIM MATRIKULASI TI-S1 UDINUS TAHUN 2018.
Table dengan tag html.
Internet dan Web By : Lisda Juliana P..
Transcript presentasi:

HTML (Table, Form, Frame, Hyperlink) PERTEMUAN 3 HTML (Table, Form, Frame, Hyperlink)

TABEL Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik

TABEL Atribut Fungsi Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel Height Menentukan tinggi tabel Bgcolor Menentukan background tabel Background Menentukan gambar yang digunakan untuk background tabel Color Untuk mengatur warna suatu sel dalam tabel Align Mengatur bentuk perataan horisontal Valign Mengatur bentuk perataan vertikal Rowspan Menggabungkan beberapa baris Colspan Menggabungkan beberapa kolom Cellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel

Membuat tabel sederhana: Tag yang diperlukan: Membuat baris: <tr> (table row) Membuat kolom: <td> (table data) <html> <head> <title> Belajar Membuat Tabel </title> </head> <body> <table border="1"> <tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table> </body> </html> Tampilan

Menambahkan judul tabel: Judul tabel: <caption> Judul baris/kolom: <th> (table header) <html> <head> <title> Belajar Membuat Tabel </title> </head> <body> <table border="1"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr> </table> </body> </html>

Membuat warna pada tabel: Atribut: bgcolor Tampilan: Contoh: <body bgcolor="purple"> <font size="3" face="arial" color="yellow"> <table border="2" bgcolor="white" align="center"> <caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow"> <th>No</th><th>NPM</th><th>Nama</th></tr> <tr bgcolor="cyan"><td align="center" width="20">1.</td> <td align="left" valign="middle“ width="80" height="40">06.100.001</td> width="180" height="40">Amin A. Angkasa</td></tr> <tr><td bgcolor="blue" width="20">2.</td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">06.100.002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>

Mengatur lebar dan tinggi suatu tabel: Atribut: width dan height ukuran % (max 100%) ukuran pixel <html> <head> <title> Belajar Membuat Tabel </title> </head> <body> <table border=1 bgcolor="green" width=300 height=100> <tr height=30> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr height=70> <td>Baris 2 Kolom 1</td> <td background="./images.jpg"> Baris 2 Kolom 2 <br><br> Background bagus</td> </table> </body> </html> Tampilan:

Perataan dalam tabel: horisontal: atribut align  utk <caption>, <tr>, <td> dan <th> vertikal: atribut valign  utk <tr>, <td> dan <th> Tampilan: <table border="1" align="center"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td align="center" width="20">1.</td> <td align="center" valign="middle" width="80" height="50">06.100.001</td> <td align="right" valign="top" width="180" height="50">Amin A. Angkasa</td></tr> <tr><td width="20">2.</td> <td align="left" valign="top" width="80" height="70">06.100.002</td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>

Penggabungan baris/kolom: Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp kolom menjadi 1: atribut rowspan Contoh Tampilan:

Script HTML: <table border="1" bgcolor="white" align="center"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40">06.100.001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> <tr><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40">06.100.002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>

Cellpading dan cellspacing: atribut cellpading: mengatur spasi antara border dengan tulisan atribut cellspasing: mengatur spasi antar 2 buah sel Contoh Tampilan:

Script HTML: <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40">06.100.001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> <tr><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40">06.100.002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>

FORM Fungsi: Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan: <form method=“post/get” action=“. . .”> . . . </form> Atribut: Atribut Fungsi Method Metode pengiriman data ke file tujuan (POST atau GET) Action Aksi yang akan dilakukan jika user menekan tombol Submit Name Memerikan nama tiap masukan Value Memberikan nilai suatu masukan Type Tipe form yang akan digunakan

metode POST dan GET memiliki kegunaan yang sama yaitu untuk mengirimkan value variabel ke halaman lain atau mengirimkan ke database. Perbedaan Method GET ketika mengirimkan data akan menambahkan pada URL, sedangkan kalo method POST dikirim ke server dengan diincludekan pada sebuah permintaan (body of request)

GET POST

Textbox Tag: <input> Atribut-atribut: Atribut Fungsi type=["text"|"password"] Menentukan jenis field masukan Text, submit, password name Menentukan nama untuk field sehingga dapat dirujuk nantinya value Memberi nilai suatu input size mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan maxlength menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan

Contoh: Tampilan: <body> <b>Login: <b> <br> <form method="post"> <table> <tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr> <tr> <td>Password:</td> <td><input type="password" name="password" size="20"></td></tr> </table> </form> </body> Tampilan:

Submit dan Reset Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form

Contoh: Tampilan: <body> <b>Data Pengunjung: <b> <br> <form method="post" action="data.html"> <table> <tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr> <tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr> </table> <input type="submit" value="Simpan" name="t1"> <input type="reset" value="Reset" name="t2"> </form> </body> Tampilan:

Checkbox Fungsi: Untuk memberi beberapa pilihan kepada user Contoh: <form method="post"> Bacaan yang Anda sukai: <br> <input type="checkbox" name="bacaan" value="novel"> Novel <br> <input type="checkbox" name="bacaan" value="koran"> Koran <br> <input type="checkbox" name="bacaan" value="majalah"> Majalah <br> <input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br> </form> Tampilan:

Radio button Fungsi: Untuk memberi (hanya) satu pilihan kepada user Contoh: <form method="post"> Apakah Anda setuju dengan kenaikan SPP: <br> <input type="radio" name="opsi" value="ya"> Ya <br> <input type="radio" name="opsi" value="tidak"> Tidak <br> <input type="radio" name="opsi" value="ragu"> Ragu-ragu <br> </form> Tampilan:

Daftar Drop Down Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja) Contoh: <form method="post"> Jurusan: <br> <select name="jurusan"> <option value="TInf"> Teknik Informatika <br> <option value="MI"> D3 Manajemen Informatika <br> <option value="TI"> Teknik Industri <br> </select> </form> Tampilan:

Text Area Fungsi: Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar Tag: <textarea> Atribut-atribut: Atribut Fungsi Rows Menetukan lebar kotak komentar Columns Menentukan tinggi kotak komentar Wrap=["off"|"virtual"|"physical"] Menentukan fitur word wrapping

Contoh: Tampilan: <html> <head> <title> Penggunaan Text Area </title> </head> <body> <b>Komentar: <b> <br> <form method="post"> <textarea rows="10" cols=“40" wrap="physical" name="komentar"> </textarea><br> </html> Tampilan:

FRAME Fungsi: Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser. Standar penulisan: <frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset> Atribut-atribut: Atribut Fungsi frameset cols Membuat frame vertikal dengan lebar kolom tertentu frameset rows Membuat frame horisontal dengan tinggi baris tertentu frame src Memasukkan dokumen HTML ke dalam frame scrolling=["yes"|"no"] Menentukan fitur scrolling noresize Membuat frame tidak dapat diubah ukurannya name Memberi nama untuk frame frameborder=["0"|"1“] Menentukan batas antara frame

Nama dan Target Frame Frame dapat diberi nama dan diatur targetnya dengan menggunakan tag base target. Contoh: Frame menu dapat digunakan sebagai link untuk mengakses halaman di frame content. Script HTML: <html> <head></head> <frameset rows=“15%,*"> <frame name=“judul" src=“judul.html"> <frameset cols="30%,*"> <frame name="menu" src="menu.html"> <name="content" src="content.html"> </frameset> </html> Potongan kode file menu.html: <html> <head> <base target="content"> </head> ... </html>

Frame Vertikal Tampilan: Contoh: <html> <head> <title> Membuat Frame Vertikal </title> </head> <frameset cols="25%,*"> <frame name="kiri" src="kiri.html" scrolling=“yes"> <frame name="kanan“ src="kanan.html"> </frameset> </html>

Frame Horisontal Contoh: Tampilan: <html> <head> <title> Membuat Frame Horisontal </title> </head> <frameset rows="40%,*"> <frame name="atas" src="atas.html“ scrolling="no"> <frame name="bawah“ src="bawah.html"> </frameset> </html> Tampilan:

Gabungan Frame Vertikal-Horisontal Contoh: <html> <head> <title> Membuat Frame Vertikal-Horisontal </title> </head> <frameset rows="20%,*"> <frame name="atas" src="atas.html“ scrolling="no"> <frameset cols="40%,*"> <frame name="kiri" src="kiri.html"> <frame name="kanan" src="kanan.html"> </frameset> </html> Tampilan:

Entitas Karakter HMTL Beberapa entitas (atau simbol) tidak dapat ditulis langsung di halaman web karena tidak ada di keyboard. Oleh karena itu diperlukan kombinasi entitas. Terdapat tiga bagian untuk setiap entitas, yaitu: Dimulai dengan sebuah ampersand [“&”] Diberi nama entitas, misalnya [“copy”] Diakhiri dengan semicolon [“;”]

Contoh: Tampilan: <html> <head><title>Entitas karakter</head> <body> Simbol "copyright" : "©" <br/> Simbol "alpha" : "α" <br/> </body> </html> Tampilan:

Spasi Tambahan dan Simbol “<“ “>” Spasi tambahan (“ “) dapat dibuat dengan kombinasi entitas   Contoh: <html> <head><title>Spasi Tambahan</title></head> <body> <p>Setelah ini ada lima spasi tambahan:"     ". Sekarang lanjut kalimat lagi.</p> </body> </html> Tampilan:

Kombinasi entitas untuk menampilkan simbol“<“ dan “>” di dalam halaman web: “<“  < [less than] “>”  > [greater than] Contoh: <html> <head><title>Simbol "<" dan ">"</title></head> <body><p>Karakter "Kurang dari" : "<" <br/> Karakter "Lebih dari" : ">"</p> </body> </html> Tampilan:

Meta Tag Digunakan untuk men-supply informasi kepada search engines yang tidak akan terlihat oleh pengunjung web kecuali jika mereka menampilkan kode dari halaman HTML yang diaksesnya. Penggunaan meta tag akan membuat search bot yang ada mengenali website tersebut sehingga dapat tampil di daftar search engine dan tentu saja mudah dicari oleh pengguna Internet

Meta tag keywords Fungsi: Format: Meletakkan kata kunci (keyword) dari website Format: <head> <meta name="keywords" content=“macam_macam keyword yang digunakan" /> </head>

Meta tag description Fungsi: Format: menunjukkan deskripsi singkat dari halaman web kepada search engine. Format: <head> <meta name="description" content=“deskripsi_yang_diinginkan" /> </head> Tag description dan keywords sangat mirip. Jika tidak ada kecocokan/relasi antara nilai dua tag ini mungkin saja situs anda tidak diproses oleh search engine, jadi anda harus cerdas menentukan keyword dan deskripsinya.

Meta tag revised Fungsi: Format: Untuk mencatat kapan update terakhir dilakukan terhadap situs web. Format: <head> <meta name="revised" content=“tanggal_update_terakhir" /> </head>

Refresh page dan redirect Fungsi: Digunakan untuk keperluan redirect. Dengan meta tag refresh, pengunjung akan di-redirect (atau di-refresh) ke halaman web yang telah ditentukan. Format: <head> <meta http-equiv="refresh" content=“jumlah selang detik untuk me-refresh halaman; url=…“ /> </head>

Embed Tag Fungsi: menyisipkan media (misalnya musik) ke dalam halaman web Standar penulisan: <embed src=“file_media” /> Atribut-atribut: Atribut Fungsi width Menentukan lebar dari player height Menentukan tinggi dari media player hidden=["yes"|"no"] Jika atribut ini bernilai true, maka media player tidak ditampilkan. autostart Menentukan apakah file musik dijalankan secara otomatis saat halaman web dimuat oleh web browser loop Mengatur apakah file musik dijalankan berulang atau hanya cukup satu kali volume Mengatur volume dari file musik, range nilainya 0 sampai 100

Contoh: Tampilan: <html> <head> <title> Penggunaan Embed (Musik) </title> </head> <body> <embed src="flourish.mid" width=”360” height=”160” hidden="false"/> </body> </html> Tampilan:

Summary Pemakaian Tabel dalam halaman web dapat membuat informasi tampil secara terstruktur, ringkas dan mudah dibaca serta membuat tampilan web menjadi lebih menarik. Form digunakan untuk menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.

Summary Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser adalah dengan menggunakan Frame. Meta Tag digunakan untuk men-supply informasi kepada search engines. Untuk menuliskan beberapa entitas karakter HMTL yang tidak terdapat di keyboard, diperlukan kombinasi entitas dengan format tertentu. Oleh karena web browser hanya akan mengenal dan memformat satu spasi antar kata meskipun di dalam kode HTML telah dibuat lebih dari satu spasi, maka kombinasi entitas “ ” digunakan untuk menampilkan spasi tambahan Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untuk menampilkannya di dalam web browser dapat dengan menggunakan kombinasi entitas “<” dan “>”. Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke dalam halaman web.

Summary Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser adalah dengan menggunakan Frame. Meta Tag digunakan untuk men-supply informasi kepada search engines. Untuk menuliskan beberapa entitas karakter HMTL yang tidak terdapat di keyboard, diperlukan kombinasi entitas dengan format tertentu. Oleh karena web browser hanya akan mengenal dan memformat satu spasi antar kata meskipun di dalam kode HTML telah dibuat lebih dari satu spasi, maka kombinasi entitas “ ” digunakan untuk menampilkan spasi tambahan Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untuk menampilkannya di dalam web browser dapat dengan menggunakan kombinasi entitas “<” dan “>”. Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke dalam halaman web.