Dasar-Dasar HTML Lengkap ~ Multimedia Datuk

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:

<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 </>.

Contoh tag dalam HTML:

<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:

<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.

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.

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.

Contoh dari atribut dalam HTML:

<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.

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.

<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.

<html>
<head>
<title>Contoh Table 1</title>
</head>
<body>
 
<table border="1">   
   <tr>          
      <td>Kolom 1 baris ke 1</td>     
      <td>Kolom 2 baris ke 1</td>
   </tr>
   <tr>            
      <td>Kolom 1 baris ke 2</td>
      <td>Kolom 2 baris ke 2</td>
   </tr>
</table>
</body>
</html>

Kode contoh table 1 diatas, jika ditampilkan dengan browser seperti dibawah ini.
dasar dasar html

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:

<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.

<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:

<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

Thursday, November 12, 2020