Form HTML digunakan untuk mengumpulkan data dari pengguna. Form dapat berisi berbagai jenis input seperti teks, tombol radio, daftar turun dan tombol submit. Tag <form> digunakan untuk membuat form HTML. Elemen <input> penting untuk mengambil informasi dari pengguna dan dapat berupa teks, kotak centang, tombol radio dan lainnya. Tabel HTML digunakan untuk menampilkan data secara terstruktur dalam baris dan kolom.
Dokumen tersebut membahas tentang Microsoft Excel sebagai perangkat lunak pengolah angka yang populer, serta fitur-fitur dasarnya seperti penggunaan baris, kolom, format sel, dan rumus.
1. Bab ini membahas format tabel dan tampilan multimedia pada halaman web dengan menggunakan HTML. Terdapat tag-tag khusus untuk membuat tabel seperti <table>, <tr>, <td> dan atribut-atribut seperti colspan, rowspan. Ada juga tag untuk menambahkan gambar, audio dan video.
Tugas 2
HTML
I. Tujuan:
1. Mengetahui tentang HTML
2. Mengetahui konsep pembuatan halaman HTML
3. Menerapkan kode HTML untuk pembuatan website
II. Dasar Teori
HTML (Hypertext Markup Language)
1. PENGANTAR HTML
HTML merupakan singkatan dari Hypertext Markup Language, merupakan bahasa
pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan </namatag>.
File HTML dapat dibuat menggunakan aplikasi text editor apapun, seperti Notepad di
windows, simple text di Macintosh, gedit di Linux, dan beberapa text editor lain seperti
Notepad++, Sublime Text, Macromedia Dreamweaver, Aptana Studio, dan lain-lain.
Halaman HTML ini hanya dapat dijalankan melalui web browser, seperti Internet
Explorer, Google Chrome, Mozilla Firefox, Opera, Safari, dan lain-lain.
Kesalahan dalam menulis tag HTML tidak berakibat buruk pada system komputer,tetapi
browser hanya mengabaikan perintah tersebut dan menganggapnya sebagai text biasa.
Browser web dirancang memiliki kemampuan hanya untuk mengenali dan mengeksekusi
beberapa Tag HTML dari keseluruhan tag HTML standard dari W3C. Jika web browser
tidak mengenali tag HTML tertentu maka browser akan melewatinya saja seakan hanya
text biasa lainnya.
Form merupakan bagian penting dari dokumen web yang digunakan untuk mengumpulkan informasi dari pengguna. Dokumen ini menjelaskan berbagai elemen form HTML seperti text field, checkbox, radio button, dan dropdown serta cara penggunaannya untuk mengumpulkan berbagai jenis data dari pengguna seperti teks, pilihan ganda, dan file. Dokumen ini juga membahas tentang validasi form untuk memastikan pengguna mengisi semua field yang diperlukan.
Dokumen tersebut membahas tentang Microsoft Excel sebagai perangkat lunak pengolah angka yang populer, serta fitur-fitur dasarnya seperti penggunaan baris, kolom, format sel, dan rumus.
1. Bab ini membahas format tabel dan tampilan multimedia pada halaman web dengan menggunakan HTML. Terdapat tag-tag khusus untuk membuat tabel seperti <table>, <tr>, <td> dan atribut-atribut seperti colspan, rowspan. Ada juga tag untuk menambahkan gambar, audio dan video.
Tugas 2
HTML
I. Tujuan:
1. Mengetahui tentang HTML
2. Mengetahui konsep pembuatan halaman HTML
3. Menerapkan kode HTML untuk pembuatan website
II. Dasar Teori
HTML (Hypertext Markup Language)
1. PENGANTAR HTML
HTML merupakan singkatan dari Hypertext Markup Language, merupakan bahasa
pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan </namatag>.
File HTML dapat dibuat menggunakan aplikasi text editor apapun, seperti Notepad di
windows, simple text di Macintosh, gedit di Linux, dan beberapa text editor lain seperti
Notepad++, Sublime Text, Macromedia Dreamweaver, Aptana Studio, dan lain-lain.
Halaman HTML ini hanya dapat dijalankan melalui web browser, seperti Internet
Explorer, Google Chrome, Mozilla Firefox, Opera, Safari, dan lain-lain.
Kesalahan dalam menulis tag HTML tidak berakibat buruk pada system komputer,tetapi
browser hanya mengabaikan perintah tersebut dan menganggapnya sebagai text biasa.
Browser web dirancang memiliki kemampuan hanya untuk mengenali dan mengeksekusi
beberapa Tag HTML dari keseluruhan tag HTML standard dari W3C. Jika web browser
tidak mengenali tag HTML tertentu maka browser akan melewatinya saja seakan hanya
text biasa lainnya.
Form merupakan bagian penting dari dokumen web yang digunakan untuk mengumpulkan informasi dari pengguna. Dokumen ini menjelaskan berbagai elemen form HTML seperti text field, checkbox, radio button, dan dropdown serta cara penggunaannya untuk mengumpulkan berbagai jenis data dari pengguna seperti teks, pilihan ganda, dan file. Dokumen ini juga membahas tentang validasi form untuk memastikan pengguna mengisi semua field yang diperlukan.
Membuat Curriculum Vitae dengan HTML Meggunakan Software DreamweaverAngling_seto
Dokumen ini memberikan tutorial cara membuat curriculum vitae (CV) dengan format HTML menggunakan perangkat lunak Dreamweaver. Tutorial menjelaskan langkah-langkah dasar membuat tabel untuk CV, mengisi datadiri, dan menambah atau menyatukan sel pada tabel. Tujuannya adalah memberikan alternatif cara membuat CV selain menggunakan aplikasi Word dan format yang lebih interaktif.
Dokumen tersebut memberikan penjelasan tentang HTML (Hypertext Markup Language) yang mencakup konsep WWW, struktur dokumen HTML, dasar-dasar HTML, dan contoh kode HTML untuk pengaturan teks, gambar, tabel, dan lainnya.
Dokumen tersebut merangkum pengantar tentang Microsoft Excel 2007, mulai dari pengenalan komponen-komponen utama Excel seperti row heading, column heading, cell pointer, dan formula bar. Dokumen ini juga menjelaskan cara menggerakkan cell pointer, format worksheets, menambahkan border dan warna, merge cells, serta menambahkan header dan footer. Terakhir, dokumen ini memperkenalkan penggunaan rumus dan fungsi-fungsi dasar di Excel seperti penjumlahan, rata-rata, IF,
Dokumen tersebut memberikan penjelasan tentang HTML (Hypertext Markup Language) yang mencakup konsep World Wide Web, pengenalan HTML, browser dan editor, tag-tag dasar HTML, dan latihan-latihan membuat dokumen HTML sederhana.
Dokumen tersebut memberikan penjelasan tentang cara menggunakan fitur pengelola lembar kerja Microsoft Excel 2003, meliputi pengenalan jenis data Excel, cara membuat dan mengurutkan nomor secara otomatis, operasi copy paste potong salin, mengubah ukuran kolom dan baris, menyisipkan kolom dan baris, menggabungkan dan memecahkan sel, membuat bingkai data, serta memberikan warna dan corak pada sel.
Bahasa dan komputer saling terkait. Bahasa pemrograman adalah bahasa yang dimengerti komputer untuk melakukan tugas. Ada tiga tingkat bahasa pemrograman: rendah, menengah, dan tinggi.
Tabel, Tipe data, Record & Field Basis datajoshua gidion
Tabel adalah obyek utama untuk menyimpan data dalam basis data. Ia terdiri dari record dan field, dimana record adalah baris data dan field adalah kolom data. Untuk membuat tabel, pengguna dapat menggunakan Datasheet View untuk mengisi data secara langsung atau Design View untuk menentukan tipe data field. Tipe data penting untuk mendefinisikan jenis informasi pada setiap field.
1. Modul ini berisi penjelasan tentang penggunaan Microsoft Office seperti Word, Excel, PowerPoint, dan Access untuk keperluan perkantoran.
2. Terdapat tutorial penggunaan fitur-fitur dasar seperti membuat surat dengan mail merge, membuat tabel dan grafik di Word, serta penggunaan fungsi VLOOKUP dan HLOOKUP di Excel.
3. Modul ini diharapkan dapat memberikan pemahaman dasar penggunaan perangkat lunak perkantoran.
1. Dokumen menjelaskan penggunaan logika dan operasi perhitungan pada MS Excel serta fungsi-fungsi yang tersedia untuk melakukan analisis data, termasuk cara mengoperasikan perangkat lunak pengolah kata Microsoft Word 2007.
Dokumen tersebut memberikan pengantar singkat tentang HTML. Ia menjelaskan apa itu HTML, bagaimana HTML digunakan untuk membuat halaman web, dan berbagai tag HTML dasar seperti <p>, <h1>, <img> untuk memformat teks, judul dan gambar. Dokumen tersebut juga mendemonstrasikan penggunaan tabel, daftar terurut dan tidak terurut, serta video YouTube menggunakan tag HTML.
Dokumen tersebut menjelaskan berbagai tipe data dalam SQL beserta penjelasan singkat tentang masing-masing tipe data seperti integer, char, varchar, double, date, datetime, text, enum dan juga cara menggunakan aplikasi SQLyog untuk membuat database, tabel, mengisi data serta menghapus tabel dan database.
Membuat Curriculum Vitae dengan HTML Meggunakan Software DreamweaverAngling_seto
Dokumen ini memberikan tutorial cara membuat curriculum vitae (CV) dengan format HTML menggunakan perangkat lunak Dreamweaver. Tutorial menjelaskan langkah-langkah dasar membuat tabel untuk CV, mengisi datadiri, dan menambah atau menyatukan sel pada tabel. Tujuannya adalah memberikan alternatif cara membuat CV selain menggunakan aplikasi Word dan format yang lebih interaktif.
Dokumen tersebut memberikan penjelasan tentang HTML (Hypertext Markup Language) yang mencakup konsep WWW, struktur dokumen HTML, dasar-dasar HTML, dan contoh kode HTML untuk pengaturan teks, gambar, tabel, dan lainnya.
Dokumen tersebut merangkum pengantar tentang Microsoft Excel 2007, mulai dari pengenalan komponen-komponen utama Excel seperti row heading, column heading, cell pointer, dan formula bar. Dokumen ini juga menjelaskan cara menggerakkan cell pointer, format worksheets, menambahkan border dan warna, merge cells, serta menambahkan header dan footer. Terakhir, dokumen ini memperkenalkan penggunaan rumus dan fungsi-fungsi dasar di Excel seperti penjumlahan, rata-rata, IF,
Dokumen tersebut memberikan penjelasan tentang HTML (Hypertext Markup Language) yang mencakup konsep World Wide Web, pengenalan HTML, browser dan editor, tag-tag dasar HTML, dan latihan-latihan membuat dokumen HTML sederhana.
Dokumen tersebut memberikan penjelasan tentang cara menggunakan fitur pengelola lembar kerja Microsoft Excel 2003, meliputi pengenalan jenis data Excel, cara membuat dan mengurutkan nomor secara otomatis, operasi copy paste potong salin, mengubah ukuran kolom dan baris, menyisipkan kolom dan baris, menggabungkan dan memecahkan sel, membuat bingkai data, serta memberikan warna dan corak pada sel.
Bahasa dan komputer saling terkait. Bahasa pemrograman adalah bahasa yang dimengerti komputer untuk melakukan tugas. Ada tiga tingkat bahasa pemrograman: rendah, menengah, dan tinggi.
Tabel, Tipe data, Record & Field Basis datajoshua gidion
Tabel adalah obyek utama untuk menyimpan data dalam basis data. Ia terdiri dari record dan field, dimana record adalah baris data dan field adalah kolom data. Untuk membuat tabel, pengguna dapat menggunakan Datasheet View untuk mengisi data secara langsung atau Design View untuk menentukan tipe data field. Tipe data penting untuk mendefinisikan jenis informasi pada setiap field.
1. Modul ini berisi penjelasan tentang penggunaan Microsoft Office seperti Word, Excel, PowerPoint, dan Access untuk keperluan perkantoran.
2. Terdapat tutorial penggunaan fitur-fitur dasar seperti membuat surat dengan mail merge, membuat tabel dan grafik di Word, serta penggunaan fungsi VLOOKUP dan HLOOKUP di Excel.
3. Modul ini diharapkan dapat memberikan pemahaman dasar penggunaan perangkat lunak perkantoran.
1. Dokumen menjelaskan penggunaan logika dan operasi perhitungan pada MS Excel serta fungsi-fungsi yang tersedia untuk melakukan analisis data, termasuk cara mengoperasikan perangkat lunak pengolah kata Microsoft Word 2007.
Dokumen tersebut memberikan pengantar singkat tentang HTML. Ia menjelaskan apa itu HTML, bagaimana HTML digunakan untuk membuat halaman web, dan berbagai tag HTML dasar seperti <p>, <h1>, <img> untuk memformat teks, judul dan gambar. Dokumen tersebut juga mendemonstrasikan penggunaan tabel, daftar terurut dan tidak terurut, serta video YouTube menggunakan tag HTML.
Dokumen tersebut menjelaskan berbagai tipe data dalam SQL beserta penjelasan singkat tentang masing-masing tipe data seperti integer, char, varchar, double, date, datetime, text, enum dan juga cara menggunakan aplikasi SQLyog untuk membuat database, tabel, mengisi data serta menghapus tabel dan database.
2. Pengertian Form
Form adalah sebuah elemen pada HTML untuk mengelola data dari input yang dilakukan oleh
user. Baik itu pada saat user memasukkan data pada kolom, memilih sesuatu dalam combo
box, drop dalam menu, memilih radio button, serta user dalam menekan sebuah tombol. Saat
ini hampir semua web memiliki form ini, kegunaannya beda – beda. Ada yang di sebut dengan
login form, form registrasi dan macam-macam kegunaanya tergantung fungsi yang akan
dibuat. Sebagai contoh form itu kita bisa lihat pada web facebook.com.
3.
4. HTML Form digunakan untuk memberikan data ke
sebuah server. Sebuah HTML Form dapat memiliki input –
input element antara lain text field, checkbox, radio-button, submit
button dan lain-lain. Sebuah form juga dapat mengandung
select lists, textarea, fieldset, legend, dan element label. Tag
yang digunakan untuk membuat HTML Form adalah <form> .
HTML Form
5. KITA AKAN MEMBUAT HYPERLINK MENGGUNAKAN GAMBAR YANG
KITA BUAT MISALKAN SAYA AKAN MEMBUAT SEPERTI CODING DI
BAWAH INI
Tag yang digunakan untuk membuat HTML Form
adalah <form> .
T A G <FORM>
6. Hal yang terpenting dari element form adalah elemen <input> .
elemen <input> digunakan untuk mengambil informasi dari user.
Sebuah elemen input dapat dipakai dengan berbagai cara tergantung dari
tipe attributnya . Sebuah elemen input dapat berupa text field, checkbox,
password, radio button, submit button, dan lain - lain. Input type yang
secara umum digunakan antara lain
2 .1 .1 E L E ME N < I N P U T > H T M L FORMS
A. Text Field B. Password Field
D. Drop Down List /Combo box
C. Radio Button
E. Check box
F. Submit Button G. Text Area
8. Password field adalah kotak yang ketika anda menuliskan password disitu
maka huruf akan diganti dengan simbol lingkaran untuk melindungi tulisan
password yang diketik.
B. Password Field
syntax username dan password
9. Digunakan untuk memilih inputan hanya satu pilihan saja
Contoh: Jenis kelamin.
C. Radio button
Syntaxnya seperti di atas
10. hasil pada browser
Tata cara agar kedua radio tidak aktif semua maka dalam
pengodingan dalam kalian menuliskan dengan
menambahkan atribut name="nama variable".Kira – kira 2 radio
button ini nama grupnya apa misalnya kita kasih nama
jenis kelamin maka name=”jeniskelamin” pada button pria
dan wanita.
11. Contoh Syntax yang di tambah dengan atribut name
Sekrang salah satu saja yang aktif
radionya
12. D. Drop Down List /Combo box
Selanjutnya adalah drop down atau dalam html di sebut select. Sedikit berbeda dengan text input
sebelumnya. Jadi kita punya text select sebegai pembungkusnya <select></select> lalu didalamnya atau
pilihan – pilihannya kita memiliki text option kita bisa menulis sebanyak mungkin text option sesuai ada
berapa elemen yang mau kita isikan didalam drop downnya atau combo boxnya, biasanya di pilih
untuk kotak lahiran dan sebagainya. Kita akan coba buat combo box dengan nama
– nama kota di dalamnya syntaxnya sebagai berikut :
syntax drop down atau select
14. E. Check box
Perbedaan dengan radio button adalah dapat mencentang / memilih lebih dari satu pilihan .
Misalkan kita akan menambahkan hobby dengan tanda centang.
Hasilnya pada browser
16. G. Text Area
Text Area seperti text field namun bedanya adalah text area
dapat terdiri dari beberapa line/baris dan kolom
Syntax textarea
hasil dari browser
17. 2.2 HTML Tables
2.2.1 Pengertian Tabel
Tabel pada HTML di gunakan untuk menampilkan data yang tak bulat sama seperti
membuat tabel di microsoft word, atau exel, contohnya jika kalian membuat anggaran
biaya, kalender, score dalam pertandingan dan lain – lain. Jangan menggunakan table
nanti untuk membuat layout halaman. Jika nanti materi belajar mengenai CSS jangan
menggunakan tabel untuk sebuah halaman. Salah satu struktur tabel sederhana seperti
gambar dibawah ini :
18. Jika nanti memiliki tabel kotak kotak yg horizontal maka di sebut dengan baris. Sedangkan yang
vertikal maka di sebut dengan kolom. Dan jika per baris atau kolom itu disebut dengan
cell/data. Seperti keterangan tabel di bawah ini :
20. Judul dari tiap-taip tabel disebut dengan header, header juga bisa memiliki 2
sumbu atas dan kiri tergantung fungsi yang kalian ingin kan, header yang horizontal
dan header vertikal seperti tabel di bawah ini :
Jadi jika kita ingin mengimplementasikan kedalam HTML maka codingnya seperti ini
<table></table>. Strukturnya terbagi 2 yaitu simple dan compleks
21. Struktur simple
Pertama kita masukkan dulu take table dulu dan kedua baru baris dengan kode <table> <tr> …..</tr></table>.
Kepanjangan dari tr adalah table row. Lalu di dalam tr tersebut kita masukkan kolom dengan kode<td></td> atau singkatan
dari table data. Jadi susnannya table dulu baru tr setelah itu baru td atau tabel data seperti contoh di bawah ini :
contoh syntax
22. hasil dari syntax
Hasilnya maka ada tulisan baris 1, kolom 1 baris 1, kolom 2, dan di bawahnya baris 1, kolom 1,
baris 1, kolom 2. J
adi tabel sudah terbuat. Tapi ini belum memiliki bordernya atau garisnya.
Dikarenakan belum kita masukkan atributnya pada tablenya nanti akan di bahas.
23. Biasanya digunakan jika datanya sudah banyak dan strukturnya memang sudah kompleks
syntacxnya seperti ini :
Struktur Complex
24. Coding ini sama-sama dibungkus dengan take <table></table> lalu di dalamnya di bagi 2
ada<thead></thead> atau head headernya, dan take <tbody></tbody> lalu didalamnya sama
dengan <tr> untuk membuat baris bedanya, tadi kita menggunakan td sekarng dan ini th atau
table header, ini sama – sama menyimpan data tapi htmlnya sudah membacanya sebagai
header. Karena html itu untuk menampilkan struktur halaman atau conten jadi harus mudah
dibaca browse dan manusia, browsenya membacanya ada header ada body headnya
mempunyai 3 buah kolom 1 baris. Lalu bodnya punya 2 buah baris dan masing masing
barisnya 3 kolom. Bodynya setiap baris memiliki th. Maka hasilnya akan seperti ini:
25. Hasilnya membuat header dalam 2 sumbu, tidak mesti memiliki 2 sumbu. Hasilnya seperti ini :
Sekarang kita akan memulai menambahkan border pada tabel tersebut agar terlihat sebagai
tabel itu nanti akan kita pelajari atribut apa saja yang bisa digunakan dalam table. Ada 5 atribut
Border, Cellspacing, Cellpadding Colspan, Rowspan tiga buah tulisan miring berfungsi di CSS
26. Border digunakan untuk menambahkan garis di sekitar cell. Contohnya seperti ini <table
border=”1”>keterangan kalau saya isi 1 maka pixelnya di berikan ketebalan 1 px. Dalam
syntaxnya kita tidak perlu menuliskan 1 cukup 1 saja.
A.Border
hasil syntax
27. Cellspacinguntuk menambah jarak untuk cell. Setelah border kita akan menambahkan
cellspacingnya <table border=”1” cellpacing=””> kita akan buat 2 buah yang 1 kita kosong dan
yang satunya kita isi 5 <table border=”1” cellpacing=”5”>.
b. Cellspacing
28. c. Cellpadding
Berfungsi memberikan luas pada sebuah cell. Syntaxnya <table border=”1” cellpacing=”0”
cellpadding=”5”> maka hasilnya
Gambar 10.9 hasil cellpadding=”5
Pada gambar 10.9 luas dari tiap – tiap cellnya bertambah jadi memberikan ibaranya ruang
nafas
29. Table Merging
a. Colspan
Colspan di gunakan untuk 2 buah atau lebih cell yang horizontal atau colom contoh table :
Tabel tersebut memilik 3 buah baris dan masing masing barisnya memiliki 3 buah kolom kalau
ditulis syntax htmlnya seperti gambar di slide selanjutnya
31. Kita akan coba menggabungkan 2 buah kolom dibaris yang pertama yang hasilnya akan
seperti di bawah ini :
contoh penggabungkan 2 buah colom di baris
yang pertama
33. Rowspan digunakan untuk menggabungkan 2 buah atau lebih cell yang vertikal atau row/baris.
Ini sedikit lebih sulit dari pada menggabungkan colom. Sedangkan untuk menggabungkan
baris kita harus cermat sebelum masuk ke html kita lihat dulu pada tabel berikut :
b. Rowspan