HTML atau HyperText Markup Language merupakan sebuah bahasa markah untuk membuat halaman web. 1
Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web.
Penanda atau markup ini, nanti akan kita sebut dengan Tag.
HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.
Pengertian HTML dan Sejarahnya
Hypertext Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web.
Sejarah HTML dimulai oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertamanya dirilis pada tahun 1991, dengan 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang juga baru.
Ketika bekerja dengan bahasa markup ini , Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag penutup </p>.
<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>
Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap sebagai standar web resmi. Spesifikasi HTML dikelola dan dikembangkan oleh World Wide Web Consortium (W3C). Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi didukung oleh beberapa versi terbaru browser.
Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten. Nah, setelah Anda tahu apa itu HTML, selanjutnya kami akan membahas cara kerjanya.
Bagaimana Cara Kerja HTML?
File HTML diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki dokumennya sendiri-sendiri.
Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga elements), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Berikut contoh kode dari susunan atau struktur HTML:
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).
Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
Tag gambar memiliki dua attribute, src untuk path gambar dan altuntuk deskripsi gambar.
Pengertian Tag HTML dan Fungsinya
Tag HTML memiliki dua tipe utama: block-level dan inline tags.
Elemen block-level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf.
Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level
Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.
Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman.
Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
Heading memiliki 6 level. Level tersebut bervariasi, mulai dari <h1></h1> sampai <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Tag Inline
Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em>akan ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link:
<a href="https://example.com/">Click me!</a>
Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya.
Berikut kelebihan HTML:
Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
Dijalankan secara alami di setiap web browser.
Mudah dipelajari.
Open-source dan sepenuhnya gratis.
Rapi dan konsisten.
Menjadi standar resmi web, dikelola oleh (W3C).
Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.
Kemudian, berikut adalah kekurangan HTML:
Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.
Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru.
Format Teks (font color,font size,h1-h6)
Elemen heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) merupakan elemen HTML yang digunakan untuk menciptakan heading / judul artikel pada halaman HTML. Elemen heading <h1> merupakan heading yang paling penting atau paling tinggi dan elemen heading <h6> merupakan heading yang paling kecil. Di dalam satu halaman HTML tidak boleh menggunakan elemen heading utama <h1> yang rangkap (lebih dari satu). Penggunaan elemen heading tidak boleh melompati elemen heading yang yang sesudahnya, melainkan berurutan misalnya <h1>, lalu <h2> dan seterusnya sampai <h6>.
Elemen heading adalah elemen penting karena mesin pencari seperti google, yahoo, bing, msn dan lainnya menggunakan elemen heading untuk melakukan index terhadap struktur dan konten suatu website. Elemen ini sama pentingnya seperti elemen title bagi mesin pencari dalam menelusuri halaman web.
Heading utama adalah elemen heading yang paling besar diikuti oleh elemen heading lainnya yang lebih kecil. Sebuah halaman web normalnya memiliki satu buah elemen heading sebagai elemen heading utama. Penulisan elemen heading utama dibuka dengan tag <h1> dan ditutup dengan tag </h1>.
Ukuran font dari heading terbesar <h1> setara dengan 24 px, sedangkan untuk ukuran font heading terkecil <h6> setara dengan 10px.
Elemen heading yang pertama <h1>, memiliki penampilan dengan font-size yang paling besar disusul dengan heading kedua <h2> dan seterusnya. Berikut ini tampilan fisik elemen heading dari terbesar hingga yang terkecil pada halaman HTML :
<!DOCTYPE html> <html> <head> <title>Latihan Menggunakan Elemen Tag HTML Heading</title> <style> p { color : navy; font-weight : bold; } </style> </head> <body> <p>Belajar Menggunakan Elemen Tag HTML Heading</p> <h1>Ini adalah heading 1</h1> <h2>Ini adalah heading 2</h2> <h3>Ini adalah heading 3</h3> <h4>Ini adalah heading 4</h4> <h5>Ini adalah heading 5</h5> <h6>Ini adalah heading 6</h6> </body> </html>
Perintah Oreder List (lo, li, ul)
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li>(list item).
List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?
Mudah saja .....
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:
a untuk alfabet a, b, c, dan seterusnya;
A untuk alfabet A, B, C, dan seterusnya;
i untuk angka romwari i, ii, iii, dan seterusnya;
I untuk angka romwari I, II, III, dan seterusnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
</body>
</html>
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.
Description List adalah list yang berisi deskripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
<dl> (description list) tag untuk memulai description list;
<dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
<dd> (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Tabel (tr, td, th, colspan, rowspan)
Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel.
Tag <td> digunakan untuk membuat kolom di dalam baris tabel di HTML sehingga akan membentuk sel (table data).
Fungsi atribut colspan HTML
Atribut colspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara horizontal. colspan, jika diistilah mudahkan adalah ‘berapa kolom ke samping yang akan digabungkan
Sebagai contoh, kita punya sebuah tabel dengan 2 baris. Baris pertama hanya memiliki 1 kolom, sedangkan baris kedua memiliki 3 kolom.
Kita tinggal menambakan atribut colspan=”3″ pada tag <td> di baris pertama. Seperti ini kode HTMLnya.
Pengertian dan Fungsi Rowspan
Jika dalam Excel menggunakan fitur "merge" untuk menggabungkan data dalam satu baris, maka membuat HTML membutuhkan fungsi Rowspan.
Rowspan merupakan salah satu atribut yang berkaitan erat dengan pembuatan tabel. Fungsinya adalah untuk menggabungkan beberapa data dalam baris. Sederhananya, menggabungkan baris ke bawah.
Mengutip salam satu buku digital yang berjudul Aplikasi Internet Menggunakan HTML, CSS, dan JavaScript yang disusun oleh Koesheryati, Taryana Suryana bahwa untuk menggunakan atribut rowspan maka menyisipkan tag <td rowspan=n>. Dengan keterangan, bahwa “n” merupakan jumlah baris yang akan digabungkan
Biasanya, tabel digunakan jika kita ingin menampilkan sebuah data dalam bentuk baris dan kolom. Dalam membuat tabel sederhana menggunakan HTML, terdapat empat elemen yang digunakan, seperti Table, TH,TR, dan TD.
Tag <table> merupakan elemen untuk membuat tabel kemudian di ikuti dengan tag <th> yaitu "Tabel Header", kemudian <tr> yaitu "Table Rows" yang berfungsi untuk membuat baris pada tabel kemudian tag <td> yaitu "Table Data" untuk membuat kolom pada tabel.
Hasil kolom dari tag <tr> dan <td> disebut dengan "Table Cell", yaitu sebagai tempat di mana kamu memasukkan data-data yang akan kamu tampilkan. Berikut adalah contoh pembuatan tabel menggunakan HTML dengan Rowspan.
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="4">7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
Berdasarkan sintak di atas, terdapat penggunaan Rowspan yang bisa kamu lihat pada kolom nomor 5 yang artinya menggabungkan sebanyak 4 baris ke bawah.
Penggunaan fungsi Rowspan pada HTML di atas berfungsi untuk menampilkan data dalam bentuk baris pada tabel. Tidak jauh berbeda dengan tabel Excel pada umumnya.
Umumnya, tabel pada dokumen HTML juga berguna untuk mengontrol sebuah tampilan informasi yang ada dalam halaman website. Kemudian, tabel tersebut juga bisa kamu gunakan untuk menampilkan record-record pada database.
Nah, kini kamu sudah tahu apa fungsi Rowspan pada tabel HTML, kan? Dengan begitu, kamu bisa mempraktikkan cara penggunaannya untuk menampilkan data dalam bentuk tabel saat coding.
Memasukkan gambar (1 folder dengan file HTML dan berbeda Folder)
Cara Memasukkan Gambar di HTML
Supaya gambar bisa tampil pada website, mari simak beberapa cara memasukkan gambar di HTML berikut ini.
Langkah 1: Memastikan Format Gambar Sudah Sesuai
Langkah pertama yaitu memilih format gambar yang tepat untuk website Anda. Pastikan gambar yang ingin Anda masukkan ke dokumen HTML memiliki format yang sesuai. Jika format gambar tidak kompatibel, kemungkinan besar gambar akan gagal ditampilkan.
Berikut format gambar yang dapat disematkan pada dokumen HTML.
Format Gambar
Ekstensi Gambar
APNG
.apng
GIF
.gif
ICO
.ico atau .cur
JPEG
.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG
.png
SVG
.svg
Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images
Untuk menyematkan gambar pada website, Anda perlu menggunakan tag <img> pada dokumen HTML. Sebab, cara memasukkan gambar di HTML berbeda dengan menempel gambar pada dokumen biasa. Apa sih perbedaannya?
HTML tidak bisa langsung menampilkan gambar begitu saja. Dengan kata lain, HTML harus mengambil gambar dari suatu tempat penyimpanan atau direktori (drive, website, dan lain-lain). Oleh karena itu, diperlukan atribut untuk memanggil gambar tersebut agar bisa tampil pada browser.
Atribut untuk menarik gambar dari server penyimpanan tersebut dinamakan Src. Isi dari atribut ini bisa berupa link menuju direktori ataupun nama file gambar.
Untuk menggunakan atribut Src, Anda cukup memasukkan tag berikut.
<img src="langit.png">
Sedangkan pada text editor, Anda bisa langsung menempelkan syntax ini. Mudah, bukan?
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh gambar pada HTML </p>
<img src="langit.png">
</body>
</html>
Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images
Atribut Alt berfungsi untuk memberikan teks alternatif pada gambar. Jadi, jika karena sebab tertentu gambar gagal ditampilkan, teks alternatif akan muncul sehingga pengunjung website tetap bisa mengidentifikasi gambar.
Selain itu, alt text pada gambar juga mampu meningkatkan ranking website. Sebab, alt text memudahkan mesin pencarian dalam memahami deskripsi dan konteks gambar. Dengan begitu, konten website pun akan lebih mudah diindeks dalam SERP.
Supaya gambar memiliki alt text, Anda perlu menambahkan atribut alt text di dalam tag <img>.
<img src="langit.png" alt="Gambar_Langit">
Untuk penggunaan atribut alt text dalam dokumen HTML bisa Anda temukan pada cara di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh gambar pada HTML </p>
<img src="langit.png" alt="Gambar_Langit">
</body>
</html>
Langkah 4: Mencantumkan Keterangan Gambar
Dari poin sebelumnya, Anda sudah mengerti penggunaan teks alternatif pada gambar. Namun, bagaimana jika Anda ingin mencantumkan keterangan yang bisa pengunjung lihat saat cursor mengarah ke gambar?
Jawabannya yaitu dengan menambahkan atribut title di dalam tag <img>. Setelah menggunakan atribut ini, maka gambar bisa memiliki tooltips atau pesan yang muncul saat cursor diarahkan ke objek. Selain itu, halaman website juga tetap luas karena keterangan gambar tidak memakan tempat.
Tooltips pada dokumen HTML bisa Anda dapatkan melalui syntax ini.
<img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi">
Penempatan syntax atribut title silakan melihat contoh berikut.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh gambar pada HTML </p>
<img src="langit.png" alt="Gambar_Langit" title="Ini adalah langit pagi">
</body>
</html>
Cara Mengatur Gambar di HTML
Sampai di sini, Anda sudah bisa memasukkan gambar di HTML. Namun, itu saja belum cukup. Penting untuk mengetahui cara mengatur gambar di HTML supaya gambar tampil lebih menawan dan tentunya sesuai dengan kebutuhan website.
Mengubah Dimensi Gambar
Untuk mengatur dimensi gambar, gunakan atribut width danheight. Atribut width danheight mengandung elemen width dan height. Elemen width berfungsi untuk memodifikasi lebar gambar, sedangkan elemen height untuk mengubah tinggi gambar.
Atribut style cukup sederhana, berikut syntax-nya.
<img src="langit.png" width="500"height="400">
Cara menggunakan atribut style juga mudah, cukup tempelkan kode ini pada text editor Anda.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh gambar pada HTML </p>
<img src="langit.png" width="500"height="400">
</body>
</html>
Komentar
Posting Komentar