Sabtu, 26 Desember 2020

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web







Apa jadinya web tanpa ada link?

Kamu bisa bayangkan gak?

Pengunjung harus mengetik sendiri alamat URL dari web yang ingin dia buka.

Misalkan:

Ia ingin membuka halaman about, maka harus mengetik:
https://www.petanikode.com/about.html


Lalu ia ingin beralih ke halaman Contact, maka harus mengetik lagi:
https://www.petanikode.com/contact.html


Ribet! 😫

Karena itu, kita membutuhkan link.

Nah, pada tutorial ini..

..kita akan belajar cara membuat link di HTML.

Mari kita mulai!


Apa itu Link di HTML?

Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain.

Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.





Tidak hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll.

Nanti kita akan bahas ini lebih dalam..

Nah! sekarang, bagaimana cara membuat link di HTML?

Silahkan lanjutkan membaca:
Cara Membuat Link di HTML

Link pada HTML dapa dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link.

Bentuk sederhananya seperti ini:





Contoh: link.html
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>


Hasilnya:





Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Tentu saja ini bisa kita ubah-ubah sesusi selera.

Nanti kita akan bahas caranya ya..

Nah sekarang coba klik link tersbut!





Lha! Kok erorr?

Link yang kita buat ini akan membuka halaman about.html, tapi file ini belum kita buat atau belum ada. Karena itu, pasti error.

Untuk mengatasi ini, kita harus membuat file about.html dan disimpan dalam satu folder dengan file link.html.





Isi file about.html seperti ini:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>


Nah, sekarng mari kita coba lagi:





Yap!

Halaman link.html dan about.html berhasil terhubung.

Tapi tunggu dulu..

Mengapa alamat URL pada atribut href ditulis dengan nama file?
<a href="about.html">About us</a>


Bukannya harus alamat URL lengkap yang pakai http bla bla?

Ini karena link yang kita buat adalah internal link dan juga file about.html masih dalam satu folder dengan file link.html. Jadi boleh menuliskan langsung nama filenya, tanpa harus lengkap dengan http.

Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML.
Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:

Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;






External Link: adalah link yang menuju domain lain.





Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain.

Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain. Misalnya seperti: membuka halaman facebook, membuka chat whatsapp, membuka youtube, dan sebagainya.

Intinya:

Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu sendiri maka itu internal.

Biar lebih jelas, mari kita coba membuatnya di HTML:
1. Contoh Internal Link

Buatlah file baru bernama index.html kemudian isi dengan kode berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Selamat datang di websiteku. Coba klik menu di atas, maka kamu akan membuka halaman yang berbeda. Semua link di atas adalah internal link. </p> <hr> <div>Copyright &copy; 2020 by Petani Kode</div> </body> </html>


Kemudian buat lagi file baru bernama contact.html dengan isi sebagai berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: mail@contoh.com. </p> <hr> <div>Copyright &copy; 2020 by Petani Kode</div> </body> </html>


Terakhir, buat file about.html dengan isi sebagai berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright &copy; 2020 by Petani Kode</div> </body> </html>


Pastikan semua file ini disimpan dalam satu folder.





Setelah itu, coba buka index.html dengan browser.

Maka hasilnya:




2. Contoh Eksternal Link

Cara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaanya terletak pada alamt URL yang diberikan.

Sebagai contoh.. ini adalah eksternal link yang menuju halaman facebook:
<a href="https://www.facebook.com/petanikode">Facebook Patani Kode</a>


Hasilnya:

Facebook Patani Kode

Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/petanikode.

Contoh lain lagi:

Link CTA (call to action) untuk whatsapp.
<a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a>


Hasilnya:

Chat dengan Saya

Pada link tersebut, kita memberikan alamat URL whatsapp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut eksternal link, karena ia akan membuka halaman whatsapp.

Oh iya, di sana kita berikan parameter berupa nomer hp dan juga teks.

Nah, biar lengkap.. kita akan coba tambahkan eksternal link pada file contact.html.

Silahkan buka file contact.html kemudian ubah kodenya menjadi seperti ini:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: <a href="https://api.whatsapp.com/send?phone=6287111&text=Hi">+6287111</a> atau juga alamat email: mail@contoh.com. </p> <p> Jangan lupa follow juga fan page saya ya: <a href="https://www.facebook.com/petanikode">Petani Kode</a> </p> <hr> <div>Copyright &copy; 2020 by Petani Kode</div> </body> </html>


Hasilnya:

Tes buka link Facebook:





Tes buka link whatsapp:





Sudah paham tentang eksternal link?

Oke, sekarang lanjut belajar atribut:
Atribut-atribut untuk Link

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target, title, rel, style, dan lain-lain.
Menggunakan Atribut target

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:_blank akan membuka link pada jendela atau tab baru;
_self akan membuka link pada halaman itu sendiri (default target);
_top menuju bagian paling atas pada halaman;
_parent membuka link pada frame induk;
nama-frame akan membuka link pada <iframe> dengan nama tertentu;

Contoh:
<a href='https://www.facebook.com/petanikode' target='_blank'>Facebook</a>


Hasilnya:





Saat link tersebut diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai _blank.

Berikutnya, kita akan mencoba menampilkan link ke dalam sebuah frame.

Buatlah file baru bernama link-frame.html, kemudian isi kodenya seperti ini:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p> <a href="https://www.petanikode.com" target="myframe">Sebuah Link</a> </p> <p> <!-- Frame yang akan menjadi target link --> <iframe name="myframe" width="600" height="400"></iframe> </p> </body> </html>


Hasilnya:




Menggunakan Atribut title

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html" title="Menuju ke halaman about">About us</a> </p> </body> </html>


Hasilnya:





Live Demo:

Untuk lebih lengkapnya, silahkan buka: About us
Cara Mengubah Warna Link di HTML

Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).

Caranya:

Tambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" style="color:red">Home</a> | <a href="contact.html" style="color:green">Contact</a> | <a href="about.html" style="color:deeppink;">About</a> | <a href="download.html" style="color:white;background-color: orange;">Download</a> </p> <hr> <p> Selamat datang di websiteku. Coba klik menu di atas, maka kamu akan membuka halaman yang berbeda. Semua link di atas adalah internal link. </p> <hr> <div>Copyright &copy; 2020 by Petani Kode</div> </body> </html>


Hasilnya:




Fungsi Menarik Lainnya dari Link

Seperti yang saya bilang sebelumnya.. link tidak hanya digunakan untuk menghubungkan halaman web saja.

Ia juga bisa digunakan untuk beberapa fungsi tertentu seperti:
Membuat Link Buntu

Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja.

Cara membuatnya:

Tambahkan tanda pagar atau tanda pagar dan tanda seru pada atribut href.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p> <a href="#">Link Buntu</a> <a href="#!">Link Buntu 2</a> </p> </body> </html>


Hasilnya:





Perhatikan!

Pada contoh tersebut kita mengisi URL-nya dengan tanda pagar. Arti tanda pagar pada URL sebenarnya adalah anchor (jangkar).

Jangkar ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Jika hanya diisi pagar saja, maka ia tidak akan kemana-mana.
Membuat Link Anchor

Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.





Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contoh Link Anchor</h1> <p>Ini adalah contoh link anchor. Coba klik link ini: <a href="#penutup">Meluncur ke Penutup</a> maka kamu akan dibawa ke bagian penutup dari dokumen ini. </p> <h2>Apa itu Jangkar?</h2> <p> Anchor dalam bahasa indonesia artinya jangkar. Saya yakin kamu pasti pernah melihat jangkar. Fungsi jangkar untuk menahan kapal agar tidak hanyut. Tapi dalam HTML, fungsinya untuk membuat link yang bisa membawa kita meluncur ke tujuan jangkar itu. </p> <p> Jangkar atau anchor di HTML tidak hanya bisa digunakan pada satu dokumen saja. Ia juga bisa digunakan untuk membuka dokumen lain, lalu mengaitkan jangkarnya. </p> <p> Jangkar biasanya dibuat dengan tanda pagar (#) lalu diikuti dengan nama id dari elemen yang ingin dituju. Contohnya #penutup, maka link yang menggunakan anchor tersebut akan mencari elemen HTML yang memiliki id `penutup` dan membawa kita ke sana. Kira-kira begitulah cara kerjanya. </p> <h2 id="penutup">Akhir Kata..</h2> <p> Ini adalah penutup dari artikel ini, dan coba perhatikan headingnya. Di sana kita menggunakan id="penutup". Maka elemen ini akan menjadi tujuan dari anchor link. </p> <p> <a href="#top">Kembali ke Atas!</a> </p> </body> </html>


Hasilnya:





Kalau kita perhatikan, di sana kita menggunakan #top sebagai URL.
<a href="#top">Kembali ke Atas!</a>


Sedangkan elemen yang memiliki id="top", tidak ada di dalam HTML yang kita tulis.

Mengapa link anchor ini bisa menuju ke atas?

Ini karena browser sudah paham, jika ada link anchor yang menuju ke #top maka ia akan dibawa ke bagian teratas dari dokumen.




Membuat Link untuk Memanggil Fungsi Javascript

Link dapat juga digunakan untuk memanggil fungsi Javascript.

Pemanggilan fungsi Javascript biasanya dilakukan dengan atribut even seperti onclick, onmouseover, onmouseout, dan sebagainya.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p> <a href="#" onclick="alert('Hello World!')">Jalankan JS</a> <br> <a href="#!" onmouseover="alert('link sudah kamu sentuh!')">Coba Sentuh Link ini</a> </p> </body> </html>


Hasilnya:





Sebenarnya hampir semua elemen bisa menjalankan fungsi Javascript dengan atribut event.

Nah, khusus untuk link. Dia bisa juga menjalankan fungsi Javascript melalui atribut href atau URL.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p> <a href="javascript:alert('Hello World!')">Jalankan JS</a> </p> </body> </html>


Hasilnya akan sama seperti contoh sebelemnya.
Membuat Link dengan Gambar

Membuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat mudah, kita hanya pelu membungkus tag <img> dengan tag <a>.

Contoh:
<a href="#"><img src="https://www.petanikode.com/img/logo.svg" /></a>


Hasilnya:



Semua area gambar akan menjadi link dan jika kita klik, maka akan dibawa ke halaman yang akan dituju oleh link tersebut.
Membuat Link untuk Download File

Link kadang juga digunakan sebagai link untuk download file.

Cara membuatnya sangat mudah, kita hanya perlu memasukan alamat URL dari file yang akan didownload.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Silahkan Download File: <a href="contoh-file.zip">contoh-file.zip</a> </p> </body> </html>


Hasilnya:





Pada contoh di atas, kita menuliskan langsung nama filenya. Ini karena HTML link-download.html berada dalam satu folder dengan contoh-file.zip.





Lalu, bagaimana kalau filenya berada di tempat lain?

Gampang.. tinggal ganti saja URL-nya.

Contoh:
<a href="https://releases.ubuntu.com/20.04/ubuntu-20.04-desktop-amd64.iso">Download Ubuntu</a>

Membuat Link untuk Mengirim Email

Link kadang juga digunakan untuk mengirim email.

Cara membuatnya:

Ubah URL tujuan dari link dengan mailto, lalu diikuti dengan alamat email yang akan menerima email.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p> Info lebih lanjut: <a href="mailto:tes@contoh.com" title="kirim email ke Admin">Hubungi Saya</a> </p> </body> </html>


Hasilnya:





Jika kamu membukanya di Google Chrome, maka ia akan membuka Gmail. Tapi jika dibuka di Firefox, ia akan memilih aplikasi email yang tersedia di komputer.
Apa Selanjutnya?

Waah.. selain menghubungkan halaman, ternyata ada begitu banyak fungsi lain dari link.

Intinya:

Kamu hanya perlu mengingat cara membuat link dan jenis-jenisnya. Karena ini adalah basic yang akan terus terpakai dalam membuat web.

Oke, Selanjutnya.. silahkan pelajari tentang:Belajar HTML #06: Membuat List pada HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Belajar HTML #06: Text Formatting di HTML (Bold, Italic, Underline, dll)

   Belajar HTML #06: Text Formatting di HTML (Bold, Italic, Underline, dll)






Coba perhatikan kedua paragraf ini:





Kamu lebih tertarik baca yang mana?

..yang terformat, atau yang polos (plain text)?

Teks yang terformat akan lebih mudah dibaca, karena ada penegasan seperti teks tebal, miring, dan garis bawah.

Saat kita mencari kata atau kalimat penting.. mata kita akan lebih mudah menemukannya pada teks yang terformat dibandingkan plain text.

Karena itu, dalam membuat web.. ada baiknya menggunakan format teks.

Nah, di HTML terdapat tag-tag yang khusus digunakan untuk text formatting.

Apa saja itu?

Mari kita bahas..


Membuat Teks Tebal

Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti judul, subjudul, huruf penting, dll.

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan tag <strong>. Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Tebal di HTML</title> </head> <body> <h1>Text Tebal di HTML</h1> <p> <strong>Teks formatting itu penting!</strong> Karena dapat membuat tulisan terlihat lebih menarik sehingga akan membuat <b>pengunjung senang</b> membacanya. </p> </body> </html>


Hasilnya:




Membuat Teks Miring

Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Miring di HTML</title> </head> <body> <h1>Text Miring di HTML</h1> <p> Gungakan <i>teks miring</i> untuk memberikan penekanan pada teks, sehingga akan <em>menarik perthatian</em> pembaca. Biasanya digunakan pada <i>istilah asing</i> atau kata serapan dari <em>bahasa daerah</em>. </p> </body> </html>


Hasilnya:




Membuat Garis Bawah pada Teks

Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang mimiliki arti penting dibandingkan teks normal lainnya.

Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Garis Bawah di HTML</title> </head> <body> <h1>Garis Bawah di HTML</h1> <p> <u>Text formatting itu penting</u>, karena dapat membuat teks terlihat lebih menarik dibandingkan <del>text biasa</del> <ins>plain text</ins>. </p> </body> </html>


Hasilnya:





Pada contoh di atas, kita menggunakan tag <del> untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan (insert).
Membuat Teks Tercoret

Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks tersebut tidak dipakai atau dihapus.

Tag untuk membuat teks tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete).

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Tercoret di HTML</title> </head> <body> <h1>Text Tercoret di HTML</h1> <p> Coretlah teks yang tidak <s>dibutuhkan</s> terpakai, ini bisa memberitahu pembaca tentang perbaikan dari teks tersebut. Kadang juga teks <del>tercoret</del> <ins>yang dicoret</ins>, diperbaiki dengan menambahkan teks dengan garis bawah. </p> </body> </html>


Hasilnya:




Membuat Pangkat di HTML

Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML, yakni pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript).

Tag untuk membuat pangkat di HTML adalah tag <sup> dan <sub>.<sup> untuk membuat pangkat di atas
<sub> untuk membuat pangkat di bawah

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat Pangkat di HTML</title> </head> <body> <h1>Membuat Pangkat di HTML</h1> <p> Rumus luas persegi adalah S<sup>2</sup>, dimana <i>S</i> adalah sisi dari persegi. Lalu O<sub>2</sub> adalah rumus kimia dari oksigen. </p> </body> </html>


Hasilnya:




Membuat Marker untuk Teks

Marker bisanya digunakan untuk menandai teks yang penting atau kata kunci yang penting. Marker di HTML dapat kita buat dengan tag <mark>.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat marker teks di HTML</title> </head> <body> <h1>Membuat marker teks di HTML</h1> <p> Marker biasanya digunakan untuk menandai bagian teks yang penting. Kalau di dunia nyata, kita <mark>menggunakan stabilo</mark> untuk membuat marker. </p> </body> </html>


Hasilnya:





Warna default marker adalah kuning. Warna ini bisa kita ubah dengan style CSS.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat marker teks di HTML</title> </head> <body> <h1>Membuat marker teks di HTML</h1> <p> Marker biasanya digunakan untuk menandai bagian teks yang penting. Kalau di dunia nyata, kita <mark style="background-color: pink">menggunakan stabilo</mark> untuk membuat marker. </p> </body> </html>


Maka hasilnya, marker akan berwarna pink:




Teks Formatting untuk Komputer

Selain dari teks formatting di atas, ada juga teks formatting yang khusus untuk menandai teks yang berasal dari komputer. Berikut ini beberapa tag yang digunakan untuk memformat teks dari komputer:<code> untuk menandai bagian dari kode program;
<samp> untuk menandai output dari program komputer;
<kbd> untuk menandai tombol keyboard;
<var> untuk menandai sebuah variabel;
<pre> untuk preformatting teks.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Formatting untuk Teks dari komputer</title> </head> <body> <h1>Text Formatting untuk Teks dari komputer</h1> <p> Perintah javascript untuk menampilkan teks ke console adalah <code>console.log()</code>. Kita juga bisa menampilkan isi variabel dengan fungsi ini. Misalkan kita punya variabel <var>name</var>, maka kode programnya bisa ditulis seperti ini: <pre> var name = "Petani Kode"; console.log(name); </pre> Maka hasil outputnya: <samp>Petani Kode</samp> </p> <p> Untuk menjalankan ulang program, lakukan refresh dengan menekan tombol <kbd>F5</kbd> </p> </body> </html>


Hasilnya:




Menggabungkan Format

Apakah format teks dapat digabungkan?

Misalkan kiga ingin membuat teks tebal dan garis bawah, apakah bisa?

Tentu saja bisa.

Caranya:

Ya tinggal dipakai saja tag-tagnya, misal mau menggabungkan bold dengan underline.. maka kita tinggal pakai tag <b> dan <u>.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Penggabungan Format Teks di HTML</title> </head> <body> <h1>Penggabungan Format Teks di HTML</h1> <p> Penggabungan format teks bisa dilakukan dengan menuliskan tag-tag yang akan dipakai. Misalkan <b><u>tebal dan garis bawah</u></b>, maka kita tinggal pakai tag <b>b</b> dan tag <b>u</b>. </p> </body> </html>


Hasilnya:





Dalam menggabungkan format, kamu perlu memperhatikan tag mana yang ditulis duluan dan yang terakhir.

Jangan sampai salah menutup..

Yang dibuka duluan, harus ditutup terakhir.

Ingatlah konsep “ibu memasak ubi”:
Apa Selanjutnya?

Teks formatting akan sering kita pakai dalam membuat konten di web, pastikan kamu mengingat tag-tag yang digunakan untuk teks formatting.

Selanjutnya silahkan pelajari tentang:Belajar HTML #07: Membuat Link pada HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Belajar HTML #05: Cara Membuat Komentar di HTML

Belajar HTML #05: Cara Membuat Komentar di HTML







Sampai ditahap ini.. apakah kamu sudah ingat semua tag HTML yang dipelajari?

Sudah lupa?

Tidak apa-apa, itu adalah sifat dari manusia. Otak kita memang tidak seperti komputer yang bisa mengingat dengan cepat dan permanen.

Karena itu, kita membutuhkan catatan agar bisa mengingat.

Coba perhatikan ini:





Yang saya lingkari merah itu adalah komentar atau catatan yang akan mengingatkan saya tentang pekerjaan yang harus dilakukan di bagian tersebut.

Karena tulisan saya sangat panjang, jadi komentar ini sangatlah berguna.

Nah, di HTML juga kita akan menemukan hal yang demikian. Nantinya, dokumen HTML kita akan semakin banyak dan panjang.

Agar bisa mengingat strukturnya, sebaiknya ditambahkan komentar.

Bagaimana cara membuatnya?

Mari kita pelajari..


Apa itu Komentar dalam HTML?

Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan ditampilkan di dalam web.

Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode HTML dan kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.
Cara Membuat Komentar di HTML

Komentar dapat kita buat dengan tag <!-- -->.





Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar Membuat Komentar di HTML</title> </head> <body> <!-- ini adalah komentar --> <p>Hello World!</p> <!-- ini juga komentar dan ditulis dalam dua baris --> </body> </html>


Hasilnya:





Komentar tidak akan ditampilkan oleh browser, tapi kita bisa melihatnya dengan cara view source.

Klik kanan pada browser, lalu pilih view page source.




Jalan Pintas untuk Membuat Komentar

Jika kamu menggunakan teks editor Visual Studio Code, kamu bisa membuat komentar dengan menekan Ctrl+/.





Cara ini lebih cepat dibandingkan dengan harus menulis secara manual tag komentarnya.
Atribut untuk Komentar

Komentar tidak bisa ditambahkan atribut. Jika kamu mencoba menambahkannya, itu akan sia-sia. Soalnya komenter merupakan elemen yang tidak akan diproses oleh browser.
Fungsi Komentar

Komentar memang tidak akan ditampilkan di web, namun bukan berarti ia tidak memiliki fungsi.

Berikut ini beberapa fungsi komenter:
1. Komentar untuk Menjelaskan Arti Tag

Saat belajar HTML, kamu mungkin akan kesulitan mengingat fungsi dan arti dari tag HTML. Karena itu, kamu harus membuat catatan untuk mengingatnya.

Ini bisa kamu lakukan dengan mencatat di buku, maupun media lain. Tapi, alangkah baiknya memanfaatkan komentar untuk mencatat.

Contoh:
<!DOCTYPE html> <!-- ini tag untuk menentukan type dokumen --> <html lang="en"> <head> <title>Belajar Membuat Komentar di HTML</title> <!-- tag title berfungsi untuk membuat judul web dan akan ditampilkan pada title bar di browser --> </head> <body> <p>Ini tag paragraf yang aktif</p> <!-- tag <p> adalah tag untuk membuat paragraf --> </body> </html>


Jika kita lupa, kita bisa membuka kembali kode tersebut. Tapi ingat, jangan buat komentar seperti pada web yang akan kamu upload ke server atau produksi.
2. Komentar untuk Menyimpan Todo List

Komentar kadang sering digunakan juga untuk menyimpan todo list, ini akan membantu kita menginta apa yang harus dikerjakan pada bagian HTML tertentu.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar Membuat Komentar di HTML</title> <!-- TODO: Tambahkan tag meta di sini --> </head> <body> <h1>Komentar di HTML</h1> <!-- TODO: Buat konten web di ini --> </body> </html>


Jika kita sudah mengerjakan apa yang dituliskan di todo list tersebut, kita bisa hapus komentarnya.
3. Komentar untuk Menonaktifkan Kode HTML

Komentar kadang seding digunakan untuk menon-aktifkan kode HTML.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Belajar Membuat Komentar di HTML</title> </head> <body> <p>Ini tag paragraf yang aktif</p> <!-- <p>ini tag paragraf yang tidak aktif karena berada di dalam komentar </p> --> <p>ini paragraf yang lainnya</p> </body> </html>


Hasilnya:




Apa Selanjutnya?

Itulah cara membuat komentar di HTML, intinya kamu hanya perlu mengingat tag untuk membuatnya.

Selanjutnya silahkan pelajar tentang:Belajar HTML #06: Text Formatting di HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Belajar HTML #04: Cara Membuat Heading di HTML

Belajar HTML #04: Cara Membuat Heading di HTML







Bayangkan jika artikel yang sedang kamu baca ini tidak memiliki judul.

Pasti tidak akan menarik!

Tidak ada judul dan juga sub judul.

Kamu bisa saja akan bingung membacanya.

Karena itu..

Kita membutuhkan judul, atau dalam HTML dikenal dengan Heading.

Apa itu heading?

dan bagaimana cara membuatnya?

Ayo kita bahas!


Apa itu Heading?

Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel.

Jika kamu sering menulis artikel, pasti ini tidak asing buatmu.





Lalu, bagaimana caranya membuat judul di HTML?

Mari kita bahas:
Cara Membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya.

Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Ini Judul Level 1</h1> <h2>Ini Judul Level 2</h2> <h3>Ini Judul Level 3</h3> <h4>Ini Judul Level 4</h4> <h5>Ini Judul Level 5</h5> <h6>Ini Judul Level 6</h6> </body> </html>


Hasilnya:





Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>, dan <h6> dipakai pada sub judul atau sub heading.

Mari kita coba membuat sebuah artikel yang dilengkapi dengan heading. Buatlah file HTML baru kemudian isi dengan kode berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Belajar Heading di HTML</h1> <p> Heading di HTML ada enam, yakni H1, H2, H3, H4, H5, dan H6. Heading berfungsi untuk membuat judul untuk artikel dan juga sub judul pada bagian artikel. </p> <h2>Membuat Sub Judul</h2> <p> Sub judul atau sub heading dimulai dengan tag H2. Lalu diikuti dengan tag selanjutnya hingga sampai H6. Sementara itu, tag H1 hanya digunakan untuk judul artikel saja. </p> </body> </html>


Hasilnya:





Berdasarkan pengalaman saya—dalam menulis artikel—tag <h5> dan <h6> jarang sekali dipakai, karena judul yang dibuat hanya sampai pada level 2, 3, dan 4.

Urutan Penulisan Heading

Apakah boleh menulis judul yang tidak urut?

Maksudnya.. seperti menggunakan <h6> untuk judul awal, lalu berikutnya <h4> untuk sub judul.

Ini boleh-boleh saja, tapi kurang bagus untuk SEO. 1

Penulisan judul yang bagus adalah judul yang mengikuti levelnya.





Judul <h1> pada level pertama, <h2> pada level ke-2, dan seterusnya.
Atribut untuk Heading

Masih ingat tentang atribut?

Ya, dia adalah _______

Sudah lupa ya?

Coba buka lagi pembahasan tentang: Apa itu Tag, Elemen, dan Atribut di HTML?

Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut globel.

Contohnya seperti:id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan Javascript;
class untuk memberikan nama class yang akan dipakai oleh CSS;
style untuk memberikan kode css secara langsung;
title untuk menambahkan informasi tambahan;
dll.

Daftar atribut global, bisa kamu lihat di MDN: HTML Global Attributes.
Perbedaan Heading dengan Title dan Header

Meskipun sama-sama digunakan untuk urusan judul, tapi tiga elemen ini berbeda.Heading adalah judul untuk artikel dan bagian artikel yang dibuat dengan tag <h1> sampai <h6>
Title adalah judul dari web yang dibuat dengan tag <title>
Header adalah bagian kepala (kop) pada web yang dibaut dengan tag <header>

Coba perhatikan gambar berikut:





Sudah jelas kan bedanya?

Tag <title> untuk judul yang ditampilkan di web beowser. Tag <header> sama seperti kop surat. Lalu heading <h1> sampai <h6> menjadi judul untuk artikel.
Bonus: Heading Style

Sebenarnya ini termasuk dalam pembahasa materi tentang CSS. Karena itu, saya menjadikannya bonus yang boleh kamu baca dan juga boleh tidak.

Jadi..

Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik.

Berikut ini beberapa style yang sering digunakan pada heading:
Heading dengan Garis Bawah

Heading dengan garis bawa bisa kita buat dengan memanfaatkan tag <hr> dan juga CSS.

Contoh menggunakan tag <hr>:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1>Tutorial Membuat Heading di HTML</h1> <hr /> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>


Hasilnya:





Contoh menggunakan CSS:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-decoration: underline;">Tutorial Membuat Heading di HTML</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> </body> </html>


Hasilnya:




Text Case untuk Heading

Heading kadang ditulis dengan berbagai style case. Ada yang menggunakan huruf besar semua, ada juga yang menggunakan huruf besar di awal kata saja.

Contoh:
INI HEADING DENGAN HURUF BESAR SEMUA Ini Heading Dengan Huruf Beasr Di Depan Saja


Nah, untuk membuat style case heading ini, Kita bisa menggunakan CSS dengan atribut text-transform.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="text-transform: uppercase;">Heading dengan huruf Besar semua</h1> <p> Heading adalah judul sebuah artikel dan bagian dari artikel. Ada Enam level heading pada HTML, yakni dimulai dari H1, H2, H3, sampai H6. </p> <h1 style="text-transform: capitalize;">Heading dengan huruf Besar di awal kata</h1> <p> Properti text-transform berfungsi untuk menentukan style case dari teks. Properti ini bisa diberikan nilai capitalize, uppercase, lowercase, initial, none, inherit. </p> </body> </html>


Hasilnya:




Warna untuk Heading

Sama seperti elemen yang lainnya, heading juga dapat kita berikan warna dengan bantuan CSS. Warna bisa kita berikan pada teks dan latar belakang atau background.

Contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Heading di HTML</title> </head> <body> <h1 style="color: red;">Heading dengan warna Merah</h1> <p> Atribut color adalah atribut CSS yang berfungsi untuk memberikan warna pada teks. Pada contoh ini, teks pada heading akan berwarna merah, karena kita memberikan warna red untuk color. </p> <h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2> <p> Atribut background-color adalah atribut untuk memberikan warna latar (background) pada elemen tertentu. Pada contoh ini, kita memberikan warna latar kuning untuk heading. </p> </body> </html>


Hasilnya:





Nah untuk style lainnya, silahkan berkreasi sendiri.
Apa Selanjutnya?

Kita sudah belajar tentang cara membuat heading di HTML. Hal yang perlu kamu ingat adalah tag-tag untuk membuat heading, yakni dimulai dari <h1> sampai <h6>.

Berikutnya, silahkan pelajari tentang:Belajar HTML #05: Membuat Link pada HTML


Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML