HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).
Contoh Kode HTML Untuk Membuat Tabel dan Layout Web
Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa)
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.
Contoh Kode HTML Untuk Membuat Tabel dan Layout Web - Kode HTML untuk membuat tabel berikut merupakan materi latihan pada saat pelajaran pemrograman dasar web. Contoh kode html untuk membua tabel dan tata letak web Di bawah ini dapat dibuat bahan ajar, atau bahan untuk latihan mandiri di rumah oleh siswa. Materi html ini merupakan sub materi pada modul komputer pemrograman web dasar untuk kelas 10 SMK / MAK.
Dalam contoh kode html untuk membuat tabel kali ini, kita akan mengingat kembali struktur kode html untuk membuat kolom dan baris. Juga akan kita praktikan kembali menggunakan atribut tabel seperti lebar, tinggi, colspan, dan rowspan.
Kode Dasar HTML Untuk Membuat Tabel
Sebelum kita membuat tabel dengan kelengkapan atribut-atributnya. Terlebih dahulu kita ingat-ingat kembali kode html dasar untuk membuat tabel.
Menulis kode HTML di Notepad
Untuk latihan kali ini editor teks untuk menulis kode HTML kita menggunakan aplikasi bawaan Windows, yaitu Notepad.
Bagi yang belum tahu cara masuk ke Notepad, langkahnya:
Untuk latihan kali ini editor teks untuk menulis kode HTML kita menggunakan aplikasi bawaan Windows, yaitu Notepad.
Bagi yang belum tahu cara masuk ke Notepad, langkahnya:
- Klik Mulai
- Klik semua program
- Klik Accessories
- Klik Notepad
Tampilan Jendela kerja Notepad seperti di bawah ini;
Selain Notepad, ada banyak editor teks lainnya yang biasa digunakan untuk latihan menulis kode HTML dan kode pemrograman lain, membahas Notepad ++, Sublema, atau bahkan aplikasi besutan Windows lainnya yaitu Wordpad.
Jika sudah membuka jendela kerja Notepad tersebut, lanjut kita mulai kode-kode HTML Dibawah ini.
1. Penggunaan Tag Pembuka dan Tabel Penutup
1. Penggunaan Tag Pembuka dan Tabel Penutup
1
2
3
4
5
6
7
8
9
10
| <html><head><title>table</title><body> <table border="1"> .......disini tag untuk baris dan kolom.... </table></body></head></html> |
Bagian kode HTML yang diberi highlight baris ke 5 dan ke 7, merupakan tag pembuka dan pentup untuk membuat tabel di html.Pada baris ke 5, tag pembuka dilengkapi dengan atribut border = ”1 ″ , atribut tersebut fungsinya untuk menampilkan garis tabel. Nilai atau isi dari atribut tersebut dapat 1,2,3 dan seterusnya.
2.Tag pembuka dan penutup baris TR
1
2
3
4
5
6
7
8
9
10
11
12
| <html><head><title>table</title><body> <table border="1"> <tr> .........disini tag untuk kolom.... </tr> </table></body></head></html> |
Tag yang diberi highlight pada baris ke 6 dan ke 8 merupakan tag pembuka dan penutup untuk menampilkan baris pada tabel.
3. Tag pembuka dan penutup kolom TD
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html><head><title>table</title><body> <table border="1"> <tr> <td>Kolom 1</td> <td>Kolom 2</td> </tr> </table></body></head></html> |
Kode yang diberi highlight pada baris ke 7 dan 8 merupakan tag untuk menampilkan kolom pada tabel.
4. Contoh tabel 2 baris 3 kolom
Dibawah ini merupakan kode dasar HTML untuk menampilkan tabel 2 baris 3 kolom.
Dibawah ini merupakan kode dasar HTML untuk menampilkan tabel 2 baris 3 kolom.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html><head><title>table</title><body> <table border="1"> <!--baris pertama terdiri dari 3 kolom--> <tr> <td>Kolom ke 1 baris ke 1</td> <td>Kolom ke 2 baris ke 1</td> <td>Kolom ke 3 baris ke 1</td> </tr> <!--baris kedua terdiri dari 3 kolom--> <tr> <td>Kolom ke 1 baris ke 2</td> <td>Kolom ke 2 baris ke 2</td> <td>Kolom ke 3 baris ke 2</td> </tr> </table></body></head></html> |
5. Menyimpan file HTML dan Menampilkannya di Browser
Bagi yang belum tahu cara menyimpan file HTML di notepad, langkahnya:
Bagi yang belum tahu cara menyimpan file HTML di notepad, langkahnya:
- Klik Save As, ata CTRL + S
- Pada Nama file, tulis nama file dengan akhiran extensi html
- Pada Save as type, pilih All Files
- Menyimpan
Untuk menampilkan kode html yang sudah ditulis dan disimpan tadi, langkahnya:
- Buka peramban yang ada pada komputer, misalnya Mozilla Firefox
- Klik File, pilih Open File
- Pilih File HTML
- Pilih Buka
Kode dasar HTML untuk membuat tabel di atas, jika disetujui pada browser Mozilla Firefox, maka buat seperti screenshoot tampilan tabel di bawah ini.
Cara Membuat Tabel HTML yang Bagus
Setelah mengetahui kode dasar html untuk membuat tabel, selanjutnya kita coba membuat berbagai contoh tabel, sehingga menghasilkan contoh tabel yang bagus yang dibuat menggunakan kode-kode html.
Untuk menghasilkan tabel yang bagus, kita bisa memodifikasinya dengan kode CSS, tetapi untuk latihan kali ini kita hanya akan membahas kode HTML saja. Jadi, untuk membuat tabel yang bagus menggunakan kode HTML , kita tambahkan atribut untuk lebar dan tinggi, serta atribut untuk memberi warna pada header tabel.
Contoh tabel HTML menggunakan atribut Widh
Atribut WIDTH digunakan untuk lebar kolom, dengan nilai 1px, 2px, 3px, dan seterusnya bergantung pada lebar kolom yang diinginkan.
Untuk menghasilkan tabel yang bagus, kita bisa memodifikasinya dengan kode CSS, tetapi untuk latihan kali ini kita hanya akan membahas kode HTML saja. Jadi, untuk membuat tabel yang bagus menggunakan kode HTML , kita tambahkan atribut untuk lebar dan tinggi, serta atribut untuk memberi warna pada header tabel.
Contoh tabel HTML menggunakan atribut Widh
Atribut WIDTH digunakan untuk lebar kolom, dengan nilai 1px, 2px, 3px, dan seterusnya bergantung pada lebar kolom yang diinginkan.
Contoh tabel dengan atribut width:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html><head><title>table</title><body> <table border="1"> <!--baris pertama terdiri dari 3 kolom--> <tr> <td width="50px">No</td> <td width="150px">Nama Lengkap</td> <td width="100px">Kelas</td> <td width="200px">Alamat</td> </tr> <!--baris kedua terdiri dari 3 kolom--> <tr> <td>1</td> <td>Indah Safitri</td> <td>X Multimedia</td> <td>Kp. Malang Nengah</td> </tr> </table></body></head></html> |
Yang diberi highlight, baris 8,9,10,11 tag kolom yang diberi atribut width. Jika disetujui dalam peramban maka pilihlah seperti ini;
Buat Alignt Text pada Tabel
Agar tampilan teks pada tabel terlihat rapi, maka gunakan tag align. Tag align memiliki nilai / isi yaitu kiri, tengah, kanan.
Contoh tampilan tabel html dengan penambahan atribut align:
Agar tampilan teks pada tabel terlihat rapi, maka gunakan tag align. Tag align memiliki nilai / isi yaitu kiri, tengah, kanan.
Contoh tampilan tabel html dengan penambahan atribut align:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html><head><title>table</title><body> <table border="1"> <!--baris pertama terdiri dari 3 kolom--> <tr align="center"> <td width="50px">No</td> <td width="150px">Nama Lengkap</td> <td width="100px">Kelas</td> <td width="200px">Alamat</td> </tr> <!--baris kedua terdiri dari 3 kolom--> <tr> <td align="center">1</td> <td>Indah Safitri</td> <td>X Multimedia</td> <td>Kp. Malang Nengah</td> </tr> </table></body></head></html> |
Pada baris ke 7 yang diberi tag highlght
0 Komentar