Dasar-Dasar HTML Lengkap Untuk Belajar Pemrograman Web-HTML merupakan kode dasar yang harus dipahami ketika ingin belajar pemrograman web, kode-kode dasar dalam html merupakan pengenalan awal sebelum nantinya belajar bahasa pemrograman web tingkat tinggi seperti PHP, dan lain sebagainya. Karenanya HTML menjadi materi penting dalam kurikulum pembelajaran mata pelajaran pemrograman web dasar di SMK.
Berbagai macam teknologi (seperti CSS, JavaScript, Flash, AJAX, JSON) dapat digunakan untuk mendefinisikan elemen dari sebuah halama web. Akan tetapi, pada level paling rendah, sebuah halaman web didefinisikan dengan menggunakan HTML (HyperText Markup Language). Tanpa HTML maka tidak akan ada halaman web
Kode Dasar HTML
Kode dasar HTML:
1 2 3 4 5 6 7 8 | <html><head><title>Judul</title><body><p>Halo ini kode HTML pertamaku</p></body></head></html> |
Perhatikan penulisan kode HTML diatas, yang diberi highlight merupakan tempat untuk menuliskan kode html lainnya, misalnya kode untuk membuat table dan lain sebagainya.
Tag, Elemen, dan Atribut HTML
Dari kode dasar HTML diatas, dapat dibagi menjadi tiga pokok bahasan utama yaitu pembahasan tentang Tag, Elemen dan Atribut.
Tag
Tag dalam HTML rata-rata ditulis berpasangan. Tapi tidak semua Tag selalu ditulis berpasangan. Tag HTML selalu diawali dengan Tag pembuka <> dan diakhiri dengan Tag penutup </>.
Tag dalam HTML rata-rata ditulis berpasangan. Tapi tidak semua Tag selalu ditulis berpasangan. Tag HTML selalu diawali dengan Tag pembuka <> dan diakhiri dengan Tag penutup </>.
Contoh tag dalam HTML:
1 2 3 4 5 6 7 8 | <html><head><title>Judul Laman</title><body> <p>Ini kode HTML pertamaku</p></body></head></title> |
Pada kode HTML diatas yang diberi highlight,
1 | <title>Judul Laman</title> |
merupakan contoh dari Tag. Diawali dengan tag
1 | <title>....elemen....kemudian ditutup dengan tag </title>. |
Dari kode HTML diatas, kita bisa kumpulkan masing-masing tag seperti dibawah ini:
1 2 3 4 5 | <html>...</html><head>...</head><title>...</title><body>...</body>... |
Elemen
Elemen merupakan isi tag. Biasanya berupa teks, tapi tidak selalu berupa teks bisa juga berupa sinyaks lainnya.
Elemen merupakan isi tag. Biasanya berupa teks, tapi tidak selalu berupa teks bisa juga berupa sinyaks lainnya.
Contoh Elemen:
1 | <p>Halo ini kode HTML pertamaku</p> |
Penjelasan singkatnya:
1 | <p>.....</p> |
Merupakan Tag paragrafh dalam HTML
Sedangkan teks “Halo ini kode HTML pertamaku” merupakan isi tag paragrafh
Ingat!
Jangan tertukar, antara Tag dan Elemen.
Jangan tertukar, antara Tag dan Elemen.
Pengetahuan mengenai jenis-jenis Elemen dalam HTML bisa dibaca materi dasar html
Atribut
Atribut merupakan informasi tambahan dari Tag. Sering juga disebut dengan isi Tag. Setiap atribut akan berpasangan dengan Value. Value merupakan isi dari atribut, ditulis setelah tanda sama dengan dengan memberi tanda kutip.
Atribut merupakan informasi tambahan dari Tag. Sering juga disebut dengan isi Tag. Setiap atribut akan berpasangan dengan Value. Value merupakan isi dari atribut, ditulis setelah tanda sama dengan dengan memberi tanda kutip.
Contoh dari atribut dalam HTML:
1 2 | <p align="center"><table border="1"> |
Penjelasan singkat dari contoh atribut diatas:
1 | <p align="center"> |
Perhatikan!
Atribut diatas adalah align, dan valuenya adalah center. Atribut diatas digunakan untuk mengatur posisi paragraf berada ditengah / center.
Atribut diatas adalah align, dan valuenya adalah center. Atribut diatas digunakan untuk mengatur posisi paragraf berada ditengah / center.
Pengetahuan lebih lengkap mengenai jenis-jenis atribut dalam HTML bisa dibaca pada materi; Jenis-jenis Atribut dalam HTML
Perlu diperhatikan juga, bahwa tidak semua Tag membutuhkan atribut. Contohnya tag
1 | <html>...</html> |
Tapi pada HTML akan sering ditemukan tag yang berisi atribut-atribut sesuai dengan fungsi yang dikehendaki oleh programmer yang akan membuat laman web.
Kode dasar membuat table di HTML-Untuk membuat tabel/table menggunakan kode HTML caranya sangat mudah. Silahkan diperhatikan terlebih dahulu kode dasar dalam pembuatan table menggunakan kode HTML dibawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html><head><title>Tabel</title></head><body><table border="1"> <tr> <td>Kolom 1 baris ke 1</td> <td>Kolom 1 baris ke 1</td> </tr></table></body></html> |
Contoh table 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html><head><title>Contoh Table 1</title></head><body><table border="1"> <tr> <td>Kolom 1 baris ke 1</td> <td>Kolom 1 baris ke 1</td> </tr> <tr> <td>Kolom 1 baris ke 2</td> <td>Kolom 1 baris ke 2</td> </tr></table></body></html> |
Kode contoh table 1 diatas, jika ditampilkan dengan browser seperti dibawah ini.
Atribut Pada Tabel
Atribut pada tabel HTML merupakan informasi tambahan dari Tag yang digunakan dalam pembuatan Tabel. Beberapa atribut yang sering digunakan dalam pembuatan Tabel antara lain:
1 2 3 4 5 6 7 8 | <table border="1">atribut ini digunakan untuk mengatur ketebalan garis tabel.<td height="90px">atribut ini digunakan untuk mengatur tinggi kolom<td width="400px">atribut ini digunakan untuk mengatur lebar kolom<td rowspan="2">atribut ini digunakan untuk menggabungkan beberapa baris<td colspan="2">atribut ini digunakan untuk menggabungkan beberapa kolom |
Selain atribut diatas, masih banyak lagi atribut-atribut lainnya yang sering digunakan dalam pembuatan table di HTML. Pengetahuan lebih lengkap bisa dilihat pada laman:Jenis-jenis Atribut Pada Table HTML
Contoh penggunaan atribut pada table
Berikut beberapa penggunaan atribut pada pembuatan Tabel menggunakan HTML.
Berikut beberapa penggunaan atribut pada pembuatan Tabel menggunakan HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html><head><title>Contoh Table 2</title></head><body><table border="1"> <tr> <td colspan="2" width="720px" height="90px">Header</td> </tr> <tr> <td width="200px" height="400px">Sidebar </td> <td>Content</td> </tr> <tr> <td colspan="2" height="90px">Footer</td> </tr></table></body></html> |
Pada kode yang di highlight, ada tiga atribut yang digunakan yaitu atribut:
1 2 3 | <colspan="2">atribut ini digunakan untuk menggabungkan dua kolom<width="720px">atribut ini digunakan untuk mengatur lebar tabel menjadi 720px<height="90px">atribut ini digunakan untuk mengatur tinggi baris menjadi 90px |
Sumber : https://modulkomputer.com/dasar-dasar-html-lengkap-untuk-belajar-pemrograman-web/
tag :
*pemrograman web
*pemrograman web (PHP, MySQL, CSS, dll)
*Web Server
loading...
loading...
Tidak ada komentar:
Posting Komentar