Pacetos

Links

HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.

<a href="url">teks link</a>

Tag <a> menggunakan atribut href untuk menentukan alamat tujuan link. teks linkadalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.

Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.

<a href="url"><img src="gambar.jpg" /></a>

Atribut Target

Atribut target kita gunakan untuk menentukan dimana alamat link harus dibuka.

_self - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)
_blank - Membuka alamat link di tab/jendela browser yang baru
_parent - Membuka alamat link di frame induk
_top - Membuka alamat link di jendela penuh
framename - Membuka alamat link di frame yang namanya sudah ditentukan

Umumnya kita akan sering menggunakan nilai _blank untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah _self, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.

Text Formating

[success title="HTML"]
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<b>mencetak tebal</b> <br />
<strong>teks penting</strong> <br />
mencetak <i>miring</i> teks <br />
memberi <em>penekanan</em> pada teks <br />
<mark>menandai teks</mark><br />
teks <small>lebih kecil</small> dari default <br />
<del>coretan</del> pada teks <br />
<ins>mengarisbawahi</ins> teks <br />
tulisan <sub>di bawah</sub> garis <br />
tulisan <sup>di atas</sup> garis
</body>
</html>
[/success]

Kita dapat menandai bagian-bagian tertentu dari sebuah teks HTML seperti cetak tebal, cetak miring dan lain-lain.

<b> - mencetak tebal teks
<strong> - menandai teks penting
<i> - mencetak miring teks
<em> - memberikan penekanan pada teks
<mark> - menandai teks dengan sorotan
<small> - membuat teks lebih kecil dari ukuran bawaan
<del> - memberi coretan pada teks
<ins> - mengarisbawahi teks
<sub> - membuat tulisan lebih bawah dari garis datar tulisan
<sup> - membuat tulisan lebih atas dari garis datar tulisan

Attribute HTML

[success title="HTML"]<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Contoh Elemen HTML</h1>
<img src="https://i.imgur.com/s2YreFg.jpg" title="gambar anjing" />
</body>
</html>[/success]

Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.

Pada pembahasan sebelumnya kita sudah melihat contoh elemen <img>. Elemen ini memiliki konten tambahan di dalam tagnya, yakni src.

<img src="image.jpg" />

src yang terdapat di dalam tag <img> adalah salahsatu contoh atribut HTML.

Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini: nama="nilai".

Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah id dan class. Contoh atribut khusus adalah src pada elemen <img> dan href pada elemen <a>.

Nama Atribut

Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.

Nilai Atribut

Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.

<h1 title=judul konten>Pendahuluan</h1>

Pada contoh di atas, atribut title bernilai 'judul' dan kata 'konten' akan dianggap sebagai sebuah atribut lain karena antara kata 'judul' dan 'konten' terpisah oleh koma. Bila kita hendak mengisi nilai atribut title di atas dengan 'judul konten', maka kita harus menulisnya dengan tanda kutip:

<h1 title="judul konten">Pendahuluan</h1>

Tanda Kutip atau Petik?

Nilai atribut dapat menggunakan baik tanda kutip " maupun tanda petik '. Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan tanda petik.

Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.

<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>

Element HTML

[success title="HTML"]
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Contoh Elemen HTML</h1>
<img src="https://i.imgur.com/s2YreFg.jpg" />
</body>
</html>
[/success]

Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya.

<namatag>Konten di dalam tag</namatag>

Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut < dan >, misalnya <h1> dan <p>.

Tag penutup ditulis seperti tag pembuka, dengan diawali karakter garis miring /sebelum nama tagnya, misalnya </h1> dan </p>.

Konten elemen adalah semua konten yang ada di antara tag pembuka dan tag penutup.

Tag mendefinisikan maksud konten yang ada di dalamnya. Ketika kita menuliskan sebuah konten menggunakan tag <h1>, misalnya <h1>Halo Coder!</h1> berarti kita mendefinisikan konten "Halo Coders!" sebagai sebuah heading besar. Ketika kita menulis konten di dalam tag <p> maka berarti kita mendefinisikan konten tersebut sebagai sebuah paragraf.

Tag sendiri tidak akan ditampilkan di browser. Tag hanya menjadi pengenal untuk browser dalam menentukan seperti apa sebuah konten ditampilkan. Misalnya, ketika kita menulis <strong>Kereeen!</strong>, maka konten di dalam tag tersebut akan ditampilkan sebagai tulisan yang dicetak tebal, seperti ini:

Kereen!

Meski demikian tidak semua elemen html ditulis dengan tag pembuka dan penutup. Ada juga elemen yang ditulis tanpa penutup, misalnya:

<br />
<img src="image.jpg" />

Elemen <br> dan <img> di atas tidak memiliki tag penutup, melainkan menutup dirinya sendiri dengan diakhiri karakter />.

Struktur HTML

Struktur minimum dari sebuah dokumen HTML dapat diamati di bawah ini.

[update title="HTML"]<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Ini Judul Konten</h1>
<p>Ini paragraf konten.</p>
</body>
</html>[/update]

Deklarasi <!DOCTYPE html> mendefinisikan dokumen sebagai sebuah halaman HTML5
Elemen <html> adalah induk elemen dari sebuah halaman HTML
Elemen <head> berisi informasi seputar dokumen
Elemen <title> menetapkan judul dari dokumen HTML
Elemen <body> adalah induk dari konten halaman yang akan ditampilkan
Elemen <h1> dan <p> adalah contoh konten yang tampil pada layar

Bila kita memanggil dokumen HTML tersebut di browser, maka konten dari elemen <title>akan tampil di bagian headbar/tab browser dan semua konten yang ada di dalam body akan ditampilkan di dalam jendela browser.

Pacetos

Label Terpopuler

Bermanfaat

Breaking News

Sekilas Info