1. HTML Tutorial :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

=>>kerangka susunan HTML dimulai dari <html> lalu ada </html> untuk menutup.

<body> merupakan bagian dari bagannya dan diakhiri dengan </body>

<h1> untuk <h6> tag digunakan untuk menentukan heading HTML.
<h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan judul yang paling tidak penting. kemudian akan diakhiri dengan untag <h1> sampai <h6>

<p> mendefinisikan sebuah paragraf.
Browser secara otomatis menambahkan beberapa ruang (margin) sebelum dan setelah setiap <p> elemen. Margin dapat dimodifikasi dengan CSS (dengan sifat margin).

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

My First Heading

My first paragraph.

2. HTML Introduction :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Contoh Dijelaskan

Deklarasi DOCTYPE mendefinisikan tipe dokumen
Teks di antara <html> dan </ html> menjelaskan halaman web
Teks di antara <body> dan </ body> adalah isi halaman yang terlihat
Teks di antara <h1> dan </ h1> ditampilkan sebagai judul
Teks di antara <p> dan </ p> ditampilkan sebagai sebuah paragraf

	The <! DOCTYPE html> deklarasi adalah DOCTYPE HTML5.

Apa itu HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.

HTML singkatan H yper T ext M arkup L anguage
HTML adalah bahasa markup
Sebuah bahasa markup adalah seperangkat tag markup
Tag menggambarkan isi dokumen
Dokumen HTML berisi Tag HTML dan teks biasa
Dokumen HTML juga disebut halaman web

HTML Tag

Tag markup HTML biasanya disebut tag HTML.

Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut seperti <html>
Tag HTML umumnya selalu berpasangan seperti <p> dan </ p>
Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
Mulai dan tag akhir juga disebut tag pembuka dan tag penutup

HTML Elements

Dalam HTML, elemen yang paling ditulis dengan tag awal (misalnya <p>) dan tag akhir (misalnya </ p>), dengan isi di antara:

<P> Ini adalah paragraf. </ P>

Web Browser

Tujuan dari web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web.
Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menentukan bagaimana isi dari halaman HTML yang akan disajikan / ditampilkan kepada pengguna:

Struktur HTML Halaman

Di bawah ini adalah visualisasi dari sebuah struktur halaman HTML:

<html>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Versi HTML

Sejak hari-hari awal web, ada banyak versi HTML:

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2012

The <! DOCTYPE> Deklarasi

The <! DOCTYPE> deklarasi membantu browser untuk menampilkan halaman web dengan benar.
Ada berbagai dokumen di web, dan browser hanya dapat menampilkan halaman HTML 100% benar jika ia tahu versi HTML dan tipe yang digunakan.

Deklarasi Umum

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untuk daftar lengkap tipe dokumen deklarasi, pergi ke kami Reference DOCTYPE .

3. HTML Editor :

Tulis HTML Menggunakan Notepad atau TextEdit

HTML dapat diedit dengan menggunakan editor HTML profesional seperti:

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Geany (Linux)
Bluefish Editor (Linux)

Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac).

Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.

Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.

Langkah 1: Buka Notepad

Untuk membuka Notepad di Windows 7 atau sebelumnya:

Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.

Untuk membuka Notepad di Windows 8 atau yang lebih baru:

Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad.

Langkah 2: Tulis Beberapa HTML

Menulis atau menyalin beberapa HTML ke dalam Notepad.

Langkah 2: Tulis Beberapa HTML

Menulis atau menyalin beberapa HTML ke dalam Notepad.

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Langkah 3: Simpan Halaman HTML

Simpan file di komputer Anda.
Pilih File -> Save as dalam menu Notepad.
Saat menyimpan file HTML, menggunakan baik htm atau ekstensi file html. Tidak ada perbedaan, itu sepenuhnya terserah Anda.

Langkah 4: Lihat HTML Halaman di Browser Anda

Klik dua kali file HTML yang disimpan, dan hasilnya akan terlihat seperti ini:

Lihat dalam Browser

4. HTML Basic :

Jangan khawatir jika contoh menggunakan tag Anda belum belajar.

Anda akan belajar tentang mereka dalam bab-bab berikutnya.

HTML Pos

Judul HTML didefinisikan dengan <h1> untuk <h6> tag.

Contoh

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Paragraf

Paragraf HTML didefinisikan dengan tag <p>.

Contoh

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is a paragraph.
This is a paragraph.
This is a paragraph.

Links HTML

Link HTML didefinisikan dengan tag <a>.

Contoh

=>> gunanya untuk memberikan link.

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is a link

Catatan: Alamat link ditentukan dalam atribut href.

(Anda akan belajar tentang atribut dalam bab selanjutnya dari tutorial ini).

HTML Images

Gambar HTML didefinisikan dengan tag <img>.

Contoh

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Catatan: Nama file dan ukuran gambar disediakan sebagai atribut.

5. HTML Elements

Dokumen HTML didefinisikan oleh elemen HTML.

HTML Elements

Sebuah elemen HTML adalah segalanya dari tag awal sampai tag akhir:

Start tag *	Element content	End tag *
<p>	This is a paragraph	</p>
<a href="default.htm">	This is a link	</a>
<br>

* Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.

HTML Elemen Sintaks

Sebuah elemen HTML dimulai dengan start tag / tag pembuka
Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup
Isi elemen adalah segalanya antara awal dan tag akhir
Beberapa elemen HTML memiliki konten kosong
Elemen kosong ditutup pada tag awal
Kebanyakan elemen HTML dapat memiliki atribut

Tip: Anda akan belajar tentang atribut dalam bab berikutnya dari tutorial ini.

Bersarang HTML Elements

Kebanyakan elemen HTML dapat bersarang (dapat berisi elemen HTML lainnya).
Dokumen HTML terdiri dari elemen HTML bersarang.

HTML Dokumen Contoh

<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

Contoh di atas mengandung 3 elemen HTML.

HTML Contoh Dijelaskan

The <p> elemen:

<p>This is my first paragraph.</p>

The <p> mendefinisikan sebuah paragraf dalam dokumen HTML.
Unsur memiliki tag awal <p> dan tag akhir </ p>.
Isi elemen adalah: Ini adalah paragraf pertama saya.
<Body> elemen:

<body>
<p>This is my first paragraph.</p>
</body>

<Body> mendefinisikan tubuh dokumen HTML.
Unsur memiliki tag awal <body> dan tag akhir </ body>.
Isi elemen adalah elemen HTML lain (elemen ap).
<Html> Elemen:

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<Html> mendefinisikan seluruh dokumen HTML.
Unsur memiliki tag awal <html> dan tag akhir </ html>.
Isi elemen adalah elemen HTML lain (elemen body).

Jangan Lupakan Tag Akhir

Beberapa elemen HTML mungkin muncul dengan benar bahkan jika Anda lupa tag akhir:

<p>This is a paragraph
<p>This is a paragraph

Contoh di atas bekerja di hampir semua browser, karena tag penutup dianggap opsional.
Jangan bergantung pada ini. Banyak elemen HTML akan menghasilkan hasil yang tidak diharapkan dan / atau kesalahan jika Anda lupa tag akhir.

Kosong HTML Elements

Elemen HTML tanpa konten disebut elemen kosong.
<br> merupakan elemen kosong tanpa tag penutup (Jaringan tag mendefinisikan satu baris).
Tip: Dalam XHTML, semua elemen harus ditutup. Menambahkan garis miring di dalam tag awal, seperti <br />, adalah cara yang tepat untuk menutup elemen kosong di XHTML (dan XML).

HTML Tip: Gunakan huruf kecil Tag

Tag HTML tidak case sensitif: <P> berarti sama dengan <p>. Banyak situs web menggunakan tag HTML huruf besar.
W3Schools menggunakan tag huruf kecil karena World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan menuntut tag huruf kecil dalam XHTML.

6. HTML Attributes

Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML

Elemen HTML dapat memiliki atribut
Atribut memberikan informasi tambahan tentang elemen
Atribut selalu ditentukan dalam tag awal
Atribut datang dalam pasangan nama / nilai seperti: name = "value"

Atribut Contoh

Link HTML didefinisikan dengan tag <a>. Alamat link ditentukan dalam atribut href:

Contoh

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is a link

7. HTML Headings

Headings penting dalam dokumen HTML.

HTML Headings

Heading didefinisikan dengan <h1> untuk <h6> tag.
<H1> mendefinisikan heading yang paling penting. <H6> mendefinisikan judul yang paling tidak penting.

Contoh

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Catatan: Browser secara otomatis menambahkan beberapa ruang kosong (margin) sebelum dan sesudah setiap pos.

Headings Apakah Penting

Gunakan judul HTML untuk judul saja. Jangan gunakan judul untuk membuat teks BESAR atau tebal.
Mesin pencari menggunakan judul Anda ke indeks struktur dan isi dari halaman web Anda.
Karena pengguna dapat skim halaman Anda dengan judul, sangat penting untuk menggunakan judul untuk menunjukkan struktur dokumen.
Headings H1 harus digunakan sebagai judul utama, diikuti oleh H2 judul, maka judul H3 kurang penting, dan sebagainya.

Garis HTML

<Hr> tag menciptakan garis horizontal di halaman HTML.
Unsur jam dapat digunakan untuk konten terpisah:

Contoh

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

The hr tag defines a horizontal rule:

This is a paragraph.

HTML Tag Reference

Referensi tag W3Schools 'berisi informasi tambahan tentang tag dan atribut mereka.
Anda akan belajar lebih banyak tentang tag HTML dan atribut dalam bab-bab selanjutnya dari tutorial ini.

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<hr>	Defines a horizontal line
<!-->	Defines a comment

8. HTML Text Formatting

HTML Text Formatting

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This text is bold
This text is strong
This text is italic
This text is emphasized
This is computer output
This is_subscript and ^superscript

HTML Formatting Tags

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.
Tag HTML ini disebut format tag (lihat bagian bawah halaman ini untuk referensi yang lengkap).

	Sering <strong> membuat sebagai <b>, dan <em> menjadikan sebagai <i>. Namun, ada perbedaan dalam arti tag ini: <B> atau <i> mendefinisikan teks tebal atau miring saja. <Strong> atau <em> berarti bahwa Anda ingin teks yang akan diberikan dengan cara yang pengguna memahami sebagai "penting". Hari ini, semua browser utama membuat kuat sebagai berani dan em sebagai miring. Namun, jika browser suatu hari ingin membuat teks yang disorot dengan fitur yang kuat, mungkin kursif misalnya, bukan tebal!

Sering <strong> membuat sebagai <b>, dan <em> menjadikan sebagai <i>. Namun, ada perbedaan dalam arti tag ini: <B> atau <i> mendefinisikan teks tebal atau miring saja. <Strong> atau <em> berarti bahwa Anda ingin teks yang akan diberikan dengan cara yang pengguna memahami sebagai "penting". Hari ini, semua browser utama membuat kuat sebagai berani dan em sebagai miring. Namun, jika browser suatu hari ingin membuat teks yang disorot dengan fitur yang kuat, mungkin kursif misalnya, bukan tebal!

Cobalah Sendiri - Contoh

Format teks
Bagaimana memformat teks dalam dokumen HTML.

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This text is bold
This text is strong
This text is italic
This text is emphasized
This is computer output
This is_subscript and ^superscript

Teks terformat
Bagaimana mengontrol jeda baris dan ruang dengan <pre> tag.

<!DOCTYPE html>
<html>
<body>

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is
preformatted text.
It preserves      both spaces
and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10
     print i
next i

"Output Computer" tag
Betapa berbedanya "output komputer" tag akan ditampilkan.

<!DOCTYPE html>
<html>
<body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Computer code
Keyboard input
Sample text
Computer variable

Note: These tags are often used to display computer/programming code.

Alamat
Cara untuk menentukan informasi kontak untuk penulis / pemilik dokumen HTML.

<!DOCTYPE html>
<html>
<body>

<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

Singkatan dan akronim
Bagaimana menangani singkatan dan akronim.

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

Arah teks
Bagaimana mengubah arah teks.

<!DOCTYPE html>
<html>
<body>

<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Here is some Hebrew text
Kutipan
Bagaimana menangani kutipan panjang dan pendek.

<!DOCTYPE html>
<html>
<body>

<h2>The blockquote Element</h2>
<p>The blockquote element specifies a section that is quoted from another source.</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<p><b>Note:</b> Browsers usually indent blockquote elements.</p>

<h2>The q Element</h2>
<p>The q element defines a short quotation.</p>

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the q element.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

The blockquote Element

The blockquote element specifies a section that is quoted from another source.
Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Note: Browsers usually indent blockquote elements.

The q Element

The q element defines a short quotation.
WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.
Note: Browsers insert quotation marks around the q element.

Dihapus dan dimasukkan teks
Cara menandai dihapus dan dimasukkan teks.

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

My favorite color is
~~blue~~red!
Notice that browsers will strikethrough deleted text and underline inserted text.

Ditandai / teks Disorot
Bagaimana untuk menandai / menyorot teks

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Do not forget to buy milk today.

HTML Memformat Teks Tags

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text

HTML "Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Kutipan, Kutipan, dan Tag Definition

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<q>	Defines an inline (short) quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term

9. HTML Comments

Tag komentar <! - Dan -> digunakan untuk menyisipkan komentar dalam HTML.

HTML Comment Tags

Anda dapat menambahkan komentar ke sumber HTML Anda dengan menggunakan sintaks berikut:

	Catatan: Ada tanda seru pada tag pembuka, tapi tidak di tag penutup (!).

Komentar tidak ditampilkan oleh browser, tetapi mereka dapat membantu mendokumentasikan HTML Anda.
Dengan komentar Anda dapat menempatkan pemberitahuan dan pengingat dalam HTML Anda:

Contoh

<!DOCTYPE html>
<html>
<body>


<p>This is a paragraph.</p>


</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

This is a paragraph.

Komentar juga bagus untuk debugging HTML, karena Anda dapat komentari baris kode HTML, satu per satu, untuk mencari kesalahan:

Contoh

Bersyarat Komentar
Anda mungkin tersandung pada komentar bersyarat dalam HTML:

Komentar bersyarat mendefinisikan tag HTML yang harus dijalankan oleh IE saja. Kami tidak akan menggunakan komentar bersyarat dalam tutorial ini.

Program Software Tags
HTML tag komentar juga dapat dihasilkan oleh berbagai program perangkat lunak HTML.
Misalnya <-! Webbot bot -> tags dibungkus dalam komentar HTML oleh FrontPage dan Expression Web.
Sebagai aturan, biarkan tag ini tinggal, untuk membantu mendukung perangkat lunak yang menciptakan mereka.

10. HTML Links

Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.

Cobalah Sendiri - Contoh

HTML links

Cara membuat link dalam sebuah dokumen HTML.
(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)

saya sudah mencoba link di atas dan berikut hasilnya :

<!DOCTYPE html>
<html>
<body>

<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>

<p>
<a href="http://www.w3.org/">W3C</a> This is a link to a website on the World Wide Web.
</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

HTML Tutorial This is a link to a page on this website.
W3C This is a link to a website on the World Wide Web.

HTML Hyperlink (Link)

HTML <a> tag mendefinisikan hyperlink.
Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain.
Bila Anda memindahkan kursor di atas link dalam halaman Web, panah akan berubah menjadi tangan kecil.
Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.
Secara default, link akan muncul sebagai berikut di semua browser:

Link yang belum dikunjungi adalah digarisbawahi dan biru
Sebuah link yang dikunjungi adalah digarisbawahi dan ungu
Link aktif adalah digarisbawahi dan merah

HTML Link Syntax

Kode HTML untuk link sederhana. Ini terlihat seperti ini:

Href atribut menentukan tujuan link.

Contoh

<a href="http://www.w3schools.com/">Visit W3Schools</a>

yang akan menampilkan seperti ini: Kunjungi W3Schools
Mengklik hyperlink ini akan mengirim pengguna ke situs W3Schools '.

Tip: The "Link teks" tidak harus berupa teks. Hal ini dapat gambar atau elemen lain HTML.

Link HTML - Target Atribut

Target atribut menentukan di mana untuk membuka dokumen terkait.
Contoh di bawah ini akan membuka dokumen terkait dalam jendela browser baru atau tab baru:

Contoh

<!DOCTYPE html>
<html>
<body>

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Visit W3Schools.com!
If you set the target attribute to "_blank", the link will open in a new browser window/tab.

Link HTML - The id Atribut

The id atribut dapat digunakan untuk membuat bookmark dalam dokumen HTML.
Tip: Penanda tidak ditampilkan dengan cara khusus. Mereka terlihat pembaca.

Contoh

Jangkar dengan id dalam sebuah dokumen HTML :

<a id="tips">Useful Tips Section</a>

Buat link ke "Bagian Tips Berguna" di dalam dokumen yang sama:

<a href="#tips">Visit the Useful Tips Section</a>

Atau, membuat link ke "Bagian Tips Berguna" dari halaman lain:

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

Catatan Dasar - Tips Berguna

Catatan: Selalu menambahkan garis miring untuk subfolder referensi.

Jika Anda link seperti ini: href = "http://www.w3schools.com/html", Anda akan menghasilkan dua permintaan ke server, server pertama akan menambahkan garis miring ke alamat, dan kemudian membuat permintaan baru seperti ini :

href = "http://www.w3schools.com/html/".

Contoh Lebih

An image as a link

Cara menggunakan gambar sebagai link.

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

<p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the image. To remove the border around the image, add style="border:0;" to the img element.</p>

<p>Image-link: Still a link, but with no borders:
<a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

Create a link of an image:

Note: For IE 9 and earlier versions, the image-link above will show a border around the image. To remove the border around the image, add style="border:0;" to the img element.
Image-link: Still a link, but with no borders:

Link to a location on the same page
Cara untuk link ke bookmark.

<!DOCTYPE html>
<html>
<body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

hasil dari script diatas jika di emplementasikan adalah sebagai berikut :

See also Chapter 4.