Radha Hasda Halfis - Jobsheet2

TUGAS
PEMROGRAMAN WEB
Jobsheet 2
DISUSUN OLEH :
NAMA : RADHA HASDA HALFIS

NIM : 210209501089
KELAS : PTIK F
PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

FAKULTAS TEKNIK
UNIVERSITAS NEGERI MAKASSAR
2022
Jobsheet 2
Table, Form, Frame, Hyperlink
A. Mata Kuliah
Pemrograman Web
B. Kompetensi
Table, Form, Frame, Hyperlink
C. Tujuan Praktikum
• Mahasiswa mampu menjelaskan perintah Tabel, form, frame, dan Hyperlink
• Mahasiswa mampu menganalisis perintah Tabel, form, frame, dan Hyperlink
• Membuat file extensi html sederhana menggunakan text editor dan menampilkan pada
browser.
D. Teori dan Praktikum
Konsep Dasar Tabel, form, frame, dan Hyperlink
1 Teori Tabel, form, frame, dan Hyperlink
Buatlah 3 Tabel berbeda dengan menggunakan atribut (3 atribut bebas, 2
menggunakan (Rowspan dan Colspan) dan (Cellspacing dan Cellspadding)
2
a. Analisis Perbaris Tiap Tag Dasar HTML
b. Print Hasil Tag Dasar HTML
Buatlah 3 Form yang berbeda dengan menggunakan inputan Textbox, Checkbox, dan
Dropdown
3
a. Analisis Perbaris Tiap Tag Dasar HTML
Buatlah frame sederhana didalamnya terdapat tabel dan form.
4. a. Analisis Perbaris Tiap Tag Dasar HTML
E. Daftar Pustaka (Daftar Pustaka bisa menggunakan buku dan alamat Situs) sesuaikan dengan
format IEE
1. Teori Tabel, form, frame, dan Hyperlink
• Tabel
Fungsi Utama tabel adalah menampilkan informasi secara terstruktur, ringkas dan
mudah dibaca dan mengatur tampilan homepage agar lebih menarik. Pada dasarnya
tabel memiliki 4 unsur : Baris, Kolom, Sel, dan Garis.
Ada beberapa tag yang harus diingat untuk membuat tabel di HTML :
1) tag <table> untuk membungkus kabelnya
2) tag <thead> untuk membungkus bagian kepala table
3) tag <tbody> untuk membungkus bagian body dari tabel
4) tag <tr> (tabel row) untuk membuat baris
5) tag <td> (table data) untuk membuat sel
6) tag <th> (table head) untuk membuat judul pada header
• Form
Form merupakan sintaks HTML yang berisi kumpulan kolom isian data, misal:
- form login yang berisi isian nama pengguna dan kata sandi.
- form pendaftaran yang berisi isian nama, jenis kelamin, tanggal lahir, alamat,
surel, dan lain-lain.
• Frame
Elemen dalam HTML digunakan untuk membangun web page yang
memungkinkan penampilan beberapa web page ditampilkan dalam satu window
browser. Window dalam browser dibagi menjadi beberapa windows yang disebut
frame.
Pada browser Internet Explorer versi 3.0 dan selanjutnya dikembangkan sebuah
model FRAME yang disebut sebagai IFRAME, memungkinkan pemrogram web
untuk membuat frame windows yang mengambang, frame ini berlaku mirip seperti
suatu text box, jika browser melakukan scroll maka frame ini juga turut terscroll.
• Hyperlink
Hyperlink atau pranala adalah acuan dalam dokumen hiperteks ke dokumen lain
atau sumber lain. Dengan kata lain, hyperlink merupakan suatu cara untuk
menghubungkan suatu bagian tertentu di dalam slide, file dokumen, program, atau
halaman web dengan bagian yang lainnya pada bidang tersebut.
Hyperlink atau link digunakan untuk menghubungkan beberapa objek, file,
halaman website, dan lainnya. Saat hyperlink di klik maka kita akan diarahkan ke
halaman lainnya sehingga dengan fitur hyperlink dapat memudahkan untuk
membuka antar file atau dokumen.
Hyperlink membantu pembaca untuk pindah dari satu halaman ke tampilan halaman
lainnya dalam satu perangkat komputer tanpa atau dengan koneksi internet.
2. Buatlah 3 Tabel berbeda dengan menggunakan atribut (3 atribut bebas, 2
menggunakan (Rowspan dan Colspan) dan (Cellspacing dan Cellspadding)
a) Analisis Perbaris Tiap Tag Dasar HTML
No Tag Fungsi
1 <!DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML
2 <html> Tag pembuka untuk membuat dokumen HTML
3 <head> kepala dari dokumen HTML
4 <title> tag untuk membuat judul dari sebuah halaman
5 <body> tag untuk menampilkan isi dokumen HTML
6 bgcolor Menentukan background table
7 <font > tag untuk mengubah ukuran, jenis dan warna pada tampilan
huruf
8 size untuk mengubah ukuran huruf
9 face untuk mengatur jenis huruf dari tulisan
10 color Untuk mengatur warna suatu sel dalam tabek
11 align Mengatur bentuk perataan horizontal
12 <table> tag yang berfungsi membuat data yang terdiri dari baris dan
kolom
13 border Menentukan ukuran border/garis tebal
14 Cellspacing dan cellspadding Mengatur spasi antar sel dan spasi dalam sel
15 <caption> Membuat judul tabel
16 <b> bold, tag yang berfungsi untuk membuat teks menjadi tebal
17 <tr> table row, untuk menjelaskan baris yang ada pada tabel
18 height Menentukan tinggi table
19 <th> tag untuk membuat sebuah sel header tabel
20 rowspan Menggabungkan beberapa baris
21 colspan Menggabungkan beberapa kolom
22 <td> tag untuk membuat sel dalam sebuah tabel
23 width Menentukan lebar table
24 valign Mengatur bentuk perataan vertikal
25 <hr> tag yang berguna untuk membuat suatu garis horizontal
b) Print Hasil Tag Dasar HTML
Tabel 1
Tabel 2
Tabel 3
3. Buatlah 3 Form yang berbeda dengan menggunakan inputan Textbox, Checkbox,

dan Dropdown
No Tag Fungsi
6 Bgcolor Menentukan background table
7 <font> tag untuk mengubah ukuran, jenis dan warna pada tampilan huruf
8 Size untuk mengubah ukuran huruf
9 Face untuk mengatur jenis huruf dari tulisan
10 Color Untuk mengatur warna suatu sel dalam tabek
11 h2/h3 Membuat judul atau heading
12 <form> Membuat formulir untuk mengumpulkan input pengguna
13 method Menentukan metode form yang digunakan
14 Action mendefinisikan tindakan apa yang akan dilakukan ketika form
dikirimkan
15 <table> Membuat tabel pada web
16 <tr> Membuat baris pada tabel
17 <td> Membuat kolom pada tabel
18 <input> Membuat tipe inputan pada form yang akan dibuat
19 Type Menentukan jenis penomoran
20 Name Nama
21 Size Ukuran
22 <br> Membuat garis baru
23 value untuk menetapkan nilai value pada element HTML
24 Width Menentukan lebar table
25 <select> Membuat input dengan pilihan yang berbentuk list drop down
26 <option> Mendefinisikan opsi yang bisa dipilih
Form Textbox
Form Checkbox
Form Dropdown
4. Buatlah frame sederhana didalamnya terdapat tabel dan form.
No Tag Fungsi
5 <frameset> Frameset akan mendefinisikan bagaimana membagi jendela browser
menjadi beberapa frame
6 Rows Atribut ini cara kerjanya sama dengan cols, yang berbeda hanya pada
posisi framenya saja yang akan terbentuk dari atas ke bawah atau
vertical
7 <frame> Frame biasa digunakan untuk membagi layar browser menjadi
beberapa bagian. Setiap bagiannya dapat menjalankan
halaman HTML. Prinsip kerja frame ini mirip seperti tabel, tapi tidak
sama persis. Pengelolaannya seperti baris dan kolom
8 name Membuat indikasi dan pembeda setiap frame sekaligus untuk
menentukan di frame mana file akan dimuat. Ini berkaitan juga nanti
dengan target dan link yang akan kita bahas pada bagian akhir tulisan
ini. Yang pasti nama frame harus berbeda, jangan ada yang sama
9 src Digunakan untuk menempatkan nama file yang akan dimuat atau
ditampilkan pada frame tersebut. Sumber filenya bisa dari mana saja
10 cols Menentukan berapa jumlah frame dalam bentuk kolom disertai
langsung dengan ukuran tiap frame/kolomnya
DAFTAR PUSTAKA
[1 R. Mulyawan, "Form (Formulir): Apa itu Form Document, HTML, Database dan Digital? Ini
] Penjelasan dan Perbedaannya!," Rifqi Mulyawan Digital, 2022. [Online]. Available:
https://rifqimulyawan.com/blog/pengertian-form/. [Accessed 12 09 2022].
[2 akramandi07, "Modul 2 HTML (TABLE, FORM, FRAME, HYPERLINK )," in Modul Praktikum
] Pemrograman WEB Teknik Komputer, 2020.
[3 Nimas, "Frame HTML – Fungsi Dan Tutorial Membuat Frame di HTML," pro.co.id, 17 05 2022.
] [Online]. Available: https://www.pro.co.id/fungsi-dan-tutorial-membuat-frame-di-html/.
[Accessed 12 09 2022].
[4 D. D. Puspitasari, "Macam-Macam Tag HTML Beserta Fungsinya," metodeku.com, 24 04 2020.

] [Online]. Available: https://metodeku.com/macam-macam-tag-html-beserta-
fungsinya/#:~:text=%20Berikut%20ini%20fungsi-
fungsi%20tag%20dalam%20HTML%20%3A,tag%20yang%20berfungsi%20untuk%20menampilkan
%20teks...%20More%20. [Accessed 12 09 2022].
[5 Z. Tekno, "Contoh Penggunaan dan fungsi tag font di HTML," zikritekno.blogspot.com, 1 12 2017.
] [Online]. Available: https://zikritekno.blogspot.com/2017/12/contoh-penggunaan-dan-fungsi-
tag-font.html. [Accessed 12 09 2022].
[6 Guntoro, "65 Tag HTML dilengkapi Fungsi dan Contoh Penggunaannya," badoystudio.com, 20 03
] 2020. [Online]. Available: https://badoystudio.com/tag-html/. [Accessed 12 09 2022].
[7 D. A. Hadi, "Belajar JQuery Part 8 : Menetapkan Nilai dan Value dengan JQuery,"
] malasngoding.com, 2022. [Online]. Available: https://www.malasngoding.com/menetapkan-
nilai-dan-value-dengan-
jquery/#:~:text=Cara%20penulisan%20dan%20penggunaannya%20masih%20sama%20dengan%
20penggunaan,value%20pada%20sebuah%20form%20saat%20tombol%20si%20klik.. [Accessed
12 09 2022].
[8 M. Hernawan, "Cara Membuat Form di HTML : Fungsi Tag form, input," itkoding.com, 03 03
] 2021. [Online]. Available: https://itkoding.com/membuat-form-di-
html/#:~:text=Contohnya%20pada%20kode%20HTML%20di%20atas%2C%20kita%20memerinta
hkan,Metode%20yang%20biasa%20digunakan%20adalah%20POST%20dan%20GET.. [Accessed
12 09 2022].
[9 D. Putriana, "PHP : Fungsi Action," 2022. [Online]. Available:

] https://putrianadian.blogspot.com/2017/02/php-fungsi-
action.html#:~:text=Action%20attribute%20pada%20HTML%20Form%20berfungsi%20untuk%20
mendefinisikan,ke%20mana%20data%20itu%20ketika%20tombol%20submit%20diklik..
[Accessed 12 09 2022].
[1 M. Erfan, "Belajar HTML (15): Membuat Frame," banghaji.com, 14 06 2018. [Online]. Available:
0] https://www.banghaji.com/belajar-html-15-membuat-frame/. [Accessed 12 09 2022].

Radha Hasda Halfis - Jobsheet2

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

Radha Hasda Halfis - Jobsheet2

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS

NAMA : RADHA HASDA HALFIS

PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

a) Analisis Perbaris Tiap Tag Dasar HTML

3. Buatlah 3 Form yang berbeda dengan menggunakan inputan Textbox, Checkbox,

a) Analisis Perbaris Tiap Tag Dasar HTML

b) Print Hasil Tag Dasar HTML

a) Analisis Perbaris Tiap Tag Dasar HTML

[4 D. D. Puspitasari, "Macam-Macam Tag HTML Beserta Fungsinya," metodeku.com, 24 04 2020.

[9 D. Putriana, "PHP : Fungsi Action," 2022. [Online]. Available:

Anda mungkin juga menyukai