Tutorial Membuat HTML Links
Tutorial Membuat HTML Links
Membuat Link di HTML
Link atau hyperlink adalah sambungan dari satu sumber daya web untuk yang lain. Link memungkinkan pengguna untuk bergerak mulus dari satu halaman ke halaman lain, pada setiap server mana saja di dunia.
Link memiliki dua ujung, yang disebut jangkar. Link dimulai pada sumber jangkar dan poin ke tujuan jangkar, yang mungkin setiap sumber daya web, misalnya, gambar, audio atau klip video, file PDF, dokumen HTML atau elemen dalam dokumen itu sendiri, dan sebagainya.
HTML Link Sintaks
Link yang ditentukan dalam HTML menggunakan <a> tag.
Link atau hyperlink yang bisa menjadi sebuah kata, kelompok kata, atau gambar.
<a href="url">teks Link</a>
Apa-apa antara opening <a> tag dan closing </a> tag menjadi bagian dari link yang pengguna melihat dan klik pada browser. Berikut ini adalah beberapa contoh dari link:
<a href="https://www.google.com/">Google Search</a>
<a href="https://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>
Dengan href atribut menentukan target link. Nilainya dapat menjadi sebuah URL absolut atau relatif.
Mutlak URL adalah URL yang mencakup setiap bagian dari URL format, seperti protokol, nama host, dan jalan dari dokumen, misalnya,
https://www.google.com/, https://www.example.com/form.php, dll.
Sementara, relatif Url halaman-path relatif, misalnya, contact.html, images/smiley.png, dan seterusnya. URL relatif tidak termasuk http:// atau https:// awalan.
Menetapkan Target untuk Link
Dengan target atribut memberitahu browser mana untuk membuka dokumen terkait. Ada empat target yang ditetapkan, dan masing-masing target yang namanya dimulai dengan garis bawah(_) karakter:
_blank — Terbuka terkait dokumen di jendela baru atau tab.
_parent — Terbuka terkait dokumen di jendela induk.
_self — Terbuka terkait dokumen yang sama dalam jendela atau tab sebagai dokumen sumber. Ini adalah default, maka hal ini tidak perlu secara eksplisit menentukan nilai ini.
_top — Terbuka terkait dokumen di jendela browser.
Cobalah contoh berikut untuk memahami bagaimana link target pada dasarnya bekerja:
<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Jika halaman web anda ditempatkan di dalam iframe, anda dapat menggunakan target="_top" tautan untuk keluar dari iframe dan menunjukkan target halaman penuh di jendela browser.
Membuat Bookmark Jangkar
Anda juga dapat membuat penunjuk jangkar untuk memungkinkan pengguna untuk melompat ke bagian tertentu dari sebuah halaman web. Bookmark sangat membantu jika anda memiliki sangat panjang halaman web.
Membuat bookmark adalah proses dua langkah: pertama menambahkan id atribut pada elemen mana yang anda inginkan untuk melompat, kemudian menggunakan id nilai atribut didahului dengan tanda hash (#) sebagai nilai dari href atribut dari <a> tag, seperti yang ditunjukkan dalam contoh berikut:
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
Anda bahkan dapat melompat ke bagian dari halaman web lain dengan menentukan URL dari halaman tersebut bersama dengan anchor (yaitu #elementId) dalam href atribut, misalnya, <a href="mypage.html#topicA">Go to TopicA</a>.
Menciptakan Link Download
Anda juga dapat membuat file download di link di persis sama fashion seperti menempatkan teks link. Hanya titik tujuan URL untuk file yang anda inginkan akan tersedia untuk di-download.
Dalam contoh berikut kita buat link download ZIP, PDF dan JPG file.
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>
Ketika anda mengklik link yang menunjuk ke PDF atau file gambar, file tidak di-download ke hard drive anda secara langsung. Itu hanya akan membuka file tersebut di browser web anda. Lebih lanjut, anda dapat menyimpan atau men-download ke hard drive anda secara permanen.
HTML Text Formatting
Memformat Teks dengan HTML
HTML menyediakan beberapa kategori yang dapat anda gunakan untuk membuat beberapa teks pada halaman web anda untuk tampil berbeda dari teks biasa, misalnya, anda dapat menggunakan tag <b> untuk membuat teks tebal, tag <i> untuk membuat teks italic, tag <mark> untuk menyorot teks, tag <code> untuk menampilkan sebuah fragmen dari kode komputer, kategori <ins> dan <del> untuk menandai editorial insersi dan penghapusan, dan banyak lagi.
Contoh berikut menunjukkan yang paling umum digunakan format kategori dalam tindakan. Sekarang, mari kita mencoba untuk memahami bagaimana tag ini pada dasarnya bekerja:
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
Secara default, <strong> tag ini biasanya diberikan di browser <b>, sedangkan <em> tag ini diberikan sebagai <i>. Namun, ada perbedaan arti dari tag ini.
Perbedaan antara <strong> dan tag <b>
Investasi <strong> dan <b> tag membuat tertutup teks dalam huruf tebal huruf secara default, tetapi <strong> tag menunjukkan bahwa isinya sangat penting, sedangkan <b> tag ini hanya digunakan untuk menarik perhatian pembaca tanpa menyampaikan ada kepentingan khusus.
<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>
Perbedaan antara <em> dan <i> tag
Demikian pula, investasi <em> dan <i> tag membuat tertutup teks italic mengetik secara default, tetapi <em> tag menunjukkan bahwa isinya telah menekankan penekanan dibandingkan teks di sekelilingnya, sedangkan <i> tag yang digunakan untuk menandai teks yang berangkat dari teks normal untuk dibaca alasan, seperti istilah teknis, sebuah frasa idiomatik dari bahasa lain, pemikiran, dll.
<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>
Gunakan <em> dan <strong> kategori ketika isi dari halaman anda membutuhkan bahwa kata-kata tertentu atau frase harus memiliki penekanan kuat atau pentingnya. Juga, dalam HTML5 <b> dan <i> kategori telah didefinisikan ulang, sebelumnya mereka tidak memiliki makna semantik.
Format Kutipan
Anda dapat dengan mudah format kutipan blok dari sumber lain dengan HTML <blockquote> tag.
Blockquotes umumnya ditampilkan dengan indentasi kiri dan margin kanan, bersama dengan sedikit ruang ekstra ditambahkan di atas dan di bawah. Mari kita ambil sebuah contoh untuk melihat cara kerjanya:
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>
Untuk short inline kutipan, anda dapat menggunakan HTML <q> tag. Sebagian besar browser display inline quotes by sekitarnya teks dalam tanda kutip. Berikut ini sebuah contoh:
<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>
Menampilkan Singkatan
Singkatan adalah bentuk singkat dari kata, frase, atau nama.
Anda dapat menggunakan <abbr> tag untuk menunjukkan sebuah singkatan. Dengan title atribut ini digunakan di dalam tag ini untuk memberikan penuh perluasan singkatan, yang ditampilkan oleh browser sebagai tooltip ketika kursor mouse melayang di atas elemen. Mari kita coba contoh:
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>
Menandai Kontak Alamat
Halaman Web yang sering termasuk jalan atau alamat pos. HTML menyediakan tag khusus <address> untuk mewakili informasi kontak (fisik dan/atau digital) untuk seseorang, orang atau organisasi.
Tag ini idealnya digunakan untuk menampilkan informasi kontak yang terkait dengan dokumen itu sendiri, seperti penulis artikel. Sebagian besar browser menampilkan sebuah alamat blok di italic. Berikut ini sebuah contoh:
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>
Styling Elemen HTML
HTML ini cukup terbatas ketika datang untuk presentasi dari sebuah halaman web. Ini pada awalnya dirancang sebagai cara yang mudah untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada bulan desember 1996 oleh World Wide Web Consortium (W3C) untuk menyediakan cara yang lebih baik untuk gaya elemen HTML.
Dengan CSS, menjadi sangat mudah untuk menentukan hal-hal seperti, ukuran dan jenis huruf untuk font, warna untuk teks dan latar belakang, perataan teks dan gambar, jumlah ruang antara unsur-unsur, perbatasan dan menguraikan unsur-unsur, dan banyak lainnya styling properti.
Menambahkan Gaya untuk Elemen HTML
Gaya informasi dapat dilampirkan sebagai dokumen terpisah atau tertanam dalam dokumen HTML itu sendiri. Ini adalah tiga metode pelaksanaan styling informasi untuk dokumen HTML.
Inline styles — Menggunakan style atribut dalam HTML tag awal.
Embedded style — Menggunakan <style> elemen di bagian kepala dari dokumen.
Style sheet eksternal — Menggunakan <link> elemen, menunjuk ke sebuah file CSS eksternal.
Dalam tutorial ini kita akan mencakup semua jenis yang berbeda dari style sheet satu per satu.
Catatan : inline styles memiliki prioritas tertinggi, dan eksternal style sheet memiliki yang terendah. Itu berarti jika anda menentukan gaya untuk paragraf di kedua tertanam dan eksternal style sheet, yang bertentangan aturan gaya pada embedded style sheet akan menimpa eksternal style sheet.
Inline Styles
Inline styles digunakan untuk menerapkan gaya yang unik aturan untuk sebuah elemen, dengan menempatkan aturan CSS langsung ke dalam tag awal. Hal ini dapat melekat pada suatu elemen dengan menggunakan style atribut.
Atribut style meliputi serangkaian CSS properti dan nilai pasangan. Setiap property: value pasangan yang dipisahkan oleh tanda titik koma (;), seperti yang anda akan menulis ke aplikasi yang tertanam atau eksternal style sheet. Tetapi perlu semua dalam satu baris yaitu tidak ada garis istirahat setelah koma.
Contoh berikut menunjukkan bagaimana untuk mengatur color dan font-size teks:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>
Menggunakan gaya inline umumnya dianggap sebagai praktek yang buruk. Karena gaya-aturan yang tertanam langsung di dalam tag html, hal ini menyebabkan presentasi menjadi dicampur dengan isi dokumen, yang membuat memperbarui atau mempertahankan sebuah website yang sangat sulit.
Untuk belajar tentang berbagai properti CSS secara detail, silahkan periksa CSS tutorial bagian.
Hal ini menjadi mustahil untuk gaya pseudo-elemen dan pseudo-kelas dengan gaya inline. Anda harus, karena itu, hindari penggunaan style atribut-atribut di markup anda. Menggunakan external style sheet adalah cara yang lebih disukai untuk menambahkan informasi style untuk dokumen HTML.
Embedded Style Sheet
Tertanam atau internal style sheet hanya mempengaruhi dokumen mereka tertanam dalam.
Embedded style sheet yang ditetapkan dalam <head> bagian dari sebuah dokumen HTML menggunakan <style> tag. Anda dapat menentukan jumlah <style> elemen dalam <head> bagian.
Contoh berikut menunjukkan bagaimana gaya-aturan yang tertanam di dalam halaman web.
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
Eksternal Style Sheet
Eksternal style sheet adalah ideal ketika gaya yang diterapkan untuk banyak halaman.
Eksternal style sheet menahan semua gaya-aturan dalam dokumen terpisah yang dapat anda link dari setiap dokumen HTML di situs anda. Eksternal style sheet adalah yang paling fleksibel karena dengan external style sheet, anda dapat mengubah tampilan seluruh situs web dengan memperbarui hanya satu file.
Anda dapat melampirkan eksternal style sheet dalam dua cara — menghubungkan dan mengimpor:
Menghubungkan External Style Sheets
Sebuah style sheet eksternal dapat dihubungkan dengan dokumen HTML menggunakan <link> tag.
Kode <link> tag masuk ke dalam <head> bagian, seperti yang ditunjukkan di sini:
<head>
<link rel="stylesheet" href="css/style.css">
</head>
Mengimpor Style Sheet Eksternal
Dalam @import aturan ini adalah cara lain dari loading sebuah style sheet eksternal. Dalam @import pernyataan yang menginstruksikan browser untuk memuat sebuah style sheet eksternal dan menggunakan gaya.
Anda dapat menggunakannya dengan dua cara. Cara paling sederhana adalah dengan menggunakan itu dalam <style> elemen di <head> bagian. Perhatikan bahwa, lain aturan CSS mungkin masih termasuk dalam <style> elemen.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Demikian pula, anda dapat menggunakan @import aturan untuk mengimpor style sheet dalam satu lembar gaya.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
Catatan : Semua @import aturan harus terjadi pada awal lembar gaya. Gaya apapun aturan yang ditetapkan dalam lembar gaya sendiri menimpa bertentangan aturan dalam diimpor style sheet. Dalam @import aturan dapat menyebabkan masalah kinerja, anda umumnya harus menghindari mengimpor lembar gaya.
Posting Komentar untuk "Tutorial Membuat HTML Links"