Definisi HTML

HTML (Hypertext Markup Language) merupakan bahasa markup yang digunakan untuk menentukan konten dan struktur halaman web.

Elemen dalam dokumen HTML ditunjukkan dengan menggunakan tag.

Penulisan tag HTML seperti di bawah ini:

<tag>text</tag>

Beberapa tag memiliki teks tambahan di dalamnya yang memberikan informasi tambahan tentang tag; disebut dengan atribut.

<tag atribut1="nilai1" atribut2="nilai2"> text </tag>

Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital.

Teks editor untuk membuat file HTML diantaranya:

Apa itu HTML?

HTML adalah HyperText Markup Language.
HTML adalah bahasa markup standard untuk membuat halaman Web.
HTML mendeskripsikan struktur halaman Web.
HTML terdiri dari serangkaian elemen.
Elemen HTML memberi tahu browser cara menampilkan konten.
Elemen HTML memberi label potongan konten seperti "ini adalah judul", "ini adalah paragraf", "ini adalah tautan", dll.

Dokumen Simple HTML

Contoh ke HTMLIntroduction.html

Contoh Dijelaskan:

Deklarasi <!DOCTYPE html> mendefinisikan bahwa dokumen ini adalah dokumen HTML5
Elemen <html> adalah elemen root dari halaman HTML
Elemen <head> berisi informasi meta tentang halaman HTML
Elemen <title> menentukan judul untuk halaman HTML (yang ditampilkan di bilah judul browser atau di tab halaman)
Elemen <body> mendefinisikan isi dokumen, dan merupakan wadah untuk semua konten yang terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll.
Elemen <h1> mendefinisikan heading besar
Elemen <p> mendefinisikan paragraf.

Apa itu Elemen HTML?

Elemen HTML didefinisikan oleh tag awal, beberapa konten, dan tag akhir:

<tagname>Konten ada di sini...</tagname>

Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:

<h1>Judul Pertama Saya</h1>
<p>Paragraf pertama saya.</p>

	Tag Awal	Konten Elemen	Tag terakhir
01	`<h1>`	Heading Pertama Saya	`</h1>`
02	`<p>`	Paragraf Pertama Saya	`</p>`
03	`<br>`	None	None

Catatan: Beberapa elemen HTML tidak memiliki konten (seperti elemen <br>). Elemen-elemen ini disebut elemen kosong. Elemen kosong tidak memiliki tag akhir!

Web Browser

Tujuan browser web (Chrome, Edge, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya dengan benar.

Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menentukan cara menampilkan dokumen:

Struktur Halaman HTML

Di bawah ini adalah visualisasi struktur halaman HTML:

Catatan: Konten di dalam bagian <body> (area putih di atas) akan ditampilkan di browser. Konten di dalam elemen <title> akan ditampilkan di bilah judul browser atau di tab halaman.

Sejarah HTML

Sejak awal World Wide Web, ada banyak versi HTML:

	Tahun	Versi
01	1989	Tim Berners-Lee invented www
02	1991	Tim Berners-Lee invented HTML
03	1993	Dave Raggett drafted HTML+
04	1995	HTML Working Group defined HTML 2.0
05	1997	W3C Recommendation: HTML 3.2
06	1999	W3C Recommendation: HTML 4.01
07	2000	W3C Recommendation: XHTML 1.0
08	2008	WHATWG HTML5 First Public Draft
09	2012	WHATWG HTML5 Living Standard
10	2014	W3C Recommendation: HTML5
11	2016	W3C Candidate Recommendation: HTML 5.1
12	2017	W3C Recommendation: HTML5.1 2nd Edition
13	2017	W3C Recommendation: HTML5.2

Tutorial ini mengikuti standar HTML5 terbaru.

HTML Basic

Dokumen HTML

Dokumen HTML harus dimulai dengan deklarasi tipe dokumen <!DOCTYPE html>
Dokumen HTML harus mempunyai tag html. Dimulai dengan tag pembuka <html> dan diakhiri dengan tag penutup </html>
Dokumen HTML harus mempunyai tag head. Dimulai dengan tag pembuka <head> dan diakhiri dengan tag penutup </head>
Dokumen HTML harus mempunyai tag body. Dimulai dengan tag pembuka <body> dan di akhiri dengan tag penutup </body>

Element HTML harus terletak di dalam tag body

Contoh Dokumen HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
    </head>
    <body>
    <!--Masukan Element HTML di dalam tag body -->
    <h1>Hello World</h1>
    <p>Halo Dunia</p>
    </body>
</html>

Hasil

Emmet Abbreviation

Untuk beberapa IDE seperti Visual Studio Code, sudah tersedia emmet yang berguna untuk mempermudah pembuatan dokumen HTML diatas. Yaitu dengan mengetik tanda ! lalu tekan Enter.

Editor HTML

Anda hanya perlu editor teks sederhana untuk mempelajari HTML.

Belajar HTML Menggunakan Notepad atau TextEdit

Halaman web dapat dibuat dan dimodifikasi dengan menggunakan editor HTML profesional.

Namun, untuk mempelajari HTML kami merekomendasikan editor teks sederhana seperti Notepad (PC) atau TextEdit (Mac).

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

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit.

langkah 1: Buka Notepad (PC)

Windows 8 atau lebih baru:

Buka Layar Mulai (simbol jendela di kiri bawah layar Anda). Ketik Notepad.

Windows 7 atau sebelumnya:

Buka Mulai > Program > Aksesori > Notepad Langkah 1: Buka TextEdit (Mac)

Buka Finder > Aplikasi > TextEdit

Ubah juga beberapa preferensi agar aplikasi dapat menyimpan file dengan benar. Di Preferensi> Format> pilih "Teks Biasa"

Kemudian di bawah "Buka dan Simpan", centang kotak yang bertuliskan "Tampilkan file HTML sebagai kode HTML alih-alih teks yang diformat".

Kemudian buka dokumen baru untuk menempatkan kode.

Langkah 2: Tulis Beberapa HTML

Tulis atau salin kode HTML berikut ke Notepad:

Contoh ke HTMLEditors.html

code_html

Langkah 3: Simpan Halaman HTML

Simpan file di komputer Anda. Pilih File > Simpan sebagai di menu Notepad.

Beri nama file "index.html" dan atur pengkodean ke UTF-8 (yang merupakan pengkodean pilihan untuk file HTML).

save_html

Tip: Anda dapat menggunakan .htm atau .html sebagai ekstensi file. Tidak ada perbedaan, itu terserah Anda.

Langkah 4: Lihat Halaman HTML di Browser Anda

Buka file HTML yang disimpan di browser favorit Anda

seperti dibawah ini :

Uploading_html

klik dua kali pada file tersebut, atau klik kanan - dan pilih "Buka dengan".

Hasilnya akan terlihat seperti ini:

browser_html

Elemen HTML

Apa itu Elemen dalam HTML ?

Elemen HTML bisa dikatakan segalanya mulai dari tag awal hingga tag akhir. Elemen HTML didefinisikan oleh tag awal. Jika elemen berisi konten lain, itu diakhiri dengan tag penutup, di mana nama elemen didahului oleh garis miring seperti yang ditunjukkan di bawah ini dengan beberapa tag.

Contoh Elemen HTML

<p>Elemen HTML</p>
<div>Ini adalah Elemen HTML</div>

Keterangan :

Jadi di sini ada dua elemen HTML yaitu, elemen <p>...</p> dan elemen <div>...</div>. Ada beberapa elemen yang tidak memerlukan tag penutup seperti <img>, <br>, <hr>, <input>, dll.

Nesting Elemen HTML

Elemen HTML dapat memiliki struktur yang bersarang, artinya suatu elemen dapat dibuat dalam elemen lain.

Contoh :

<div>
    <h3><a href="#">Bellshade</a></h3>
</div>

Dari contoh diatas, elemen <div></div> menampung elemen <h3></h3>, dan elemen <h3></h3> menampung elemen hyperlink (<a></a>). Sehingga, akan ditampilkan sebuah hyperlink dalam bentuk heading yang dibungkus dalam sebuah elemen <div></div>.

HTML Attribute

Apa Itu HtML Attribute ?

HTML Attribute adalah suatu atribut untuk melengkapi informasi dari suatu elemen HTML

Semua elemen HTML dapat memiliki Attribute.
Attribute HtML memberikan informasi tambahan terhadap elemen HTML.
Attribute selalu berada diawal tag, seperti:
```
<a href="google.com">Google</a>
```
Attribute selalu berbapasangan dengan value/nilai, seperti: href="google.com"
Value/Nilai dari attribute harus selalu dibungkus menggunakan double quote/petik dua (").

Contoh Penerapan Attribute Pada HTML

`href` Attribute

href berfungsi untuk menentukan URL halaman yang ingin dituju.

<html>
  <a href="Github.com">Github Website</a>
</html>

`src` Attribute

src berfungsi untuk menentukan lokasi gambar file yang ingin ditampilkan.

<html>
  <img src="attribute.png" />
</html>

Ada dua cara untuk mendefinisikan URL di attribute src

Absolute URL - Memasukan gambar dari hosting eksternal/tidak dalam local, seperti:
```
<img src="https://avatars.githubusercontent.com/u/76999048?s=200&v=4" >
```
Relative URL
```
<img src="/src/images/avatar.png" >
```

`width` & `height` Attribute

width dan height berfungsi untuk menentukan lebar dan tinggi gambar dalam satuan piksel (px).

<img src="/src/images/avatar.png" width="32" height="32" />

`alt` Attribute

alt berfungsi untuk menggantikan gambar dengan tulisan, jika gambar tidak bisa ditampilkan dengan alasan tertentu.

<img src="/src/images/avatar.png" alt="avatar" />

`style` Attribute

style berfungsi untuk menambahkan gaya/style pada elemen seperti color, font, size, dan lainnya.

<h1 style="color: green">Hello World</h1>

`lang` Attribute

lang berfungsi untuk mendeklarasikan bahasa yang digunakan dalam website, untuk membantu mesin pencari / browser.

<!DOCTYPE html>
<html lang="en">
  <body>
    Hello World
  </body>
</html>

`title` Attribute

title berfungsi sebagai penambah informasi dalam suatu elemen, yang jika dihover akan memunculkan tooltip

<span title="Komunitas untuk mengelola dan menulis kode">Bellshade</span>

`class` Attribute

class berfungsi untuk menunjuk nama class dalam style sheet, dapat digunakan untuk mengakses dan memanipulasi elemen di Javascript.

<div class="kota">
  <p>Jakarta terletak di pulau Jawa, Indonesia.</p>
</div>

`id` Attribute

id berfungsi untuk menentukan id unik untuk elemen HTML, dapat digunakan untuk menunjuk deklarasi style tertentu dalam style sheet dan juga digunakan untuk mengakses dan memanipulasi elemen dengan id tertentu di Javascript.

<html>
  <h1 id="judulSaya">Judul Saya</h1>
</html>

`method` Attribute

method berfungsi untuk menentukan cara mengirim data formulir (data formulir dikirim ke halaman yang ditentukan dalam atribut action).

Form-data dapat dikirim sebagai variabel URL (dengan method="get") atau sebagai transaksi posting HTTP (dengan method="post").

Catatan tentang GET:

Menambahkan data formulir ke dalam URL dalam pasangan nama/nilai
Panjang URL dibatasi (sekitar 3000 karakter)
Jangan pernah menggunakan GET untuk mengirim data sensitif! (akan terlihat di URL)
Berguna untuk pengiriman formulir di mana pengguna ingin menandai hasilnya
GET lebih baik untuk data yang tidak aman, seperti string kueri di Google

<form action="/action_page.php" method="get">
  Nama Depan: <input type="text" name="namaDepan" /><br />
  Nama Belakang: <input type="text" name="namaBelakang" /><br />
  <input type="submit" value="Submit" />
</form>

Catatan tentang POST:

Menambahkan formulir-data di dalam isi permintaan HTTP (data tidak ditampilkan dalam URL)
Tidak memiliki batasan ukuran
Pengiriman formulir dengan POST tidak dapat di-bookmark

<form action="/action_page.php" method="post">
  Nama: <input type="text" name="nama" /><br />
  Password: <input type="text" name="password" /><br />
  <input type="submit" value="Submit" />
</form>

HTML Headings

Apa Itu HTML Headings ?

HTML Headings adalah judul/sub-judul yang ingin ditampilkan dalam halaman website HTML

HTML Headings didefinisikan dengan <h1> hingga <h6>, contohnya:

Dalam Bentuk Tulisan

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Dalam Bentuk Code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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.

Penulisan judul yang bagus adalah judul yang mengikuti levelnya.

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

HTML Paragraphs
Apa Itu HTML Paragraphs
HTML Paragraphs adalah suatu kalimat pada barisan baru yang biasanya berupa blok teks.
Tag HTML <p> yang mendefinisikan sebuah paragraf.
Sebuah paragraf akan selalu dimulai pada baris baru, dan browser secara otomatis menambahkan margin sebelum dan sesudah paragraf.
Contoh Penerapan <p>
<p>Ini Paragraf Pertama.</p>
<p>Ini Paragraf Kedua.</p>
Membuat HTML Paragraphs
Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.
Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.
Contoh Penerapan <p> dengan Code HTML
Fungsi utama tag <p> adalah untuk membuat paragraph.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi sebuah kalimat.
        Saya sedang belajar HTML. Saat ini Sedang,
        Belajar membuat paragraf di html.</p>
    </body>
</html>
Contoh Penerapan <br> dengan Code HTML
Fungsi utama tag <br> adalah untuk membuat baris baru.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML #3</title>
    </head>
    <body>
        <p>Aku selalu riang gembira berangkat sekolah <br />
            bersama nasi yang dibuatkan oleh ibuku <br />
            iniliah hidup bersusah <br />
            ya begitulah</p>
    </body>
</html>
Contoh Penerapan <hr> untuk membuat garis dengan Code HTML
Fungsi utama tag <hr> digunakan untuk membuat garis lurus secara horizontal (horizontal rule).
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi sebuah kalimat.
        Saya sedang belajar HTML. Saat ini Sedang,
        Belajar membuat paragraf di html.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>
Contoh Penerapan <pre> dengan Code HTML
Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tutorial Paragraf di HTML</title>
  </head>
  <body>
    <h1>Hujan Bulan Juni</h1>
    <p>oleh Sapardi Djoko Damono</p>
    <pre>
      tak ada yang lebih tabah
      dari hujan bulan Juni
      dirahasiakannya rintik rindunya
      kepada pohon berbunga itu

      tak ada yang lebih bijak
      dari hujan bulan Juni
      dihapusnya jejak-jejak kakinya
      yang ragu-ragu di jalan itu

      tak ada yang lebih arif
      dari hujan bulan Juni
      dibiarkannya yang tak terucapkan
      diserap akar pohon bunga itu
    </pre>
  </body>
</html>
Contoh Penerapan <div> dengan Code HTML
Tag <div> berfungsi untuk membuat layout web.
<footer>
    <div>&copy; 2021 Belajar HTML by bellshade</div>
</footer>                                                                                                                                                   
HTML Style
Apa Itu HTML Style ?
HTML Style adalah atribut yang digunakan untuk memberikan style/gaya pada suatu elemen, seperti color, font, size, dan sebagainya.
Atribut Style memiliki sintaks seperti berikut:
<tag style="property:value;">
Contoh Penerapan Style
Background Color
Background color berfungsi untuk mendefinisikan warna latar belakang pada suatu elemen HTML.
<body style="background-color:white;">
    <h1>Hello World</h1>
</body>
Hasilnya :
Text Color
Color berfungsi untuk mendefinisikan warna teks pada suatu elemen HTML.
<h1 style="color:red;">Ini heading berwarna merah.</h1>
<p style="color:yellow;">Ini paragraf berwarna kuning.</p>
Hasilnya :
Text Size
Text size berfungsi untuk mendefinisikan ukuran teks pada suatu elemen HTML.
<h1 style="font-size:300%;">This is a heading.</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Hasilnya :
Font Family
Font family berfungsi untuk mendefinisikan font yang akan digunakan pada elemen HTML.
<h1 style="font-family:arial;">Ini heading dengan jenis font arial.</h1>
<p style="font-family:serif;">Ini paragraf dengan jenis font serif.</p>
Hasilnya :
Text Align
Text align berfungsi untuk menentukan posisi elemen secara horizontal.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Hasilnya :
  
HTML Quotation
Apa Itu HTML Quotation ?
HTML Quotation berisi elemen-elemen ditujukan untuk menyajikan kutipan pada halaman HTML.
Elemen-elemen tersebut adalah,
<blockquote> - Mendefinisikan teks kutipan yang panjang.
<q> - Mendefinisikan teks kutipan yang pendek.
<abbr> - Mendefinisikan teks singkatan.
<address> - Mendefinisikan informasi kontak.
<cite> - Mendefinisikan judul karya.
<bdo> - Membalikan arah teks.
Contoh Penerapan Elemen Quotation Pada HTML
<p>Arti Quotes:</p>
<blockquote>
Elemen <blockquote>Kutipan adalah pengulangan satu ekspresi sebagai bagian dari yang lain, terutama ketika ekspresi yang dikutip itu terkenal atau secara tersurat dihubungkan dengan kutipan ke sumber yang asli, dan ditandai oleh tanda kutip.
</blockquote>
Elemen <q>
<p>Random Quote: <q>Karena hidup adalah pilihan.</q></p>
Elemen <abbr>
<p>Channel <abbr title="Web Programming UNPAS">WPU</abbr> Pertama Kali merilis video pada 29 Januari 2015</p>
Elemen <address>
<address>
Written by ABC<br>
Visit us at:<br>
Example.com<br>
12345, Bandung<br>
Indonesia
</address>
Elemen <cite>
<p><cite>Avengers: Endgame</cite> directed by Anthony Russo; Joe Russo. Release in 2019.</p>
Elemen <bdo>
<bdo dir="rtl">Elemen ini akan tertulis dari kanan ke kiri</bdo>  

HTML Comments
Apa Itu HTML Comments ?
HTML Comments berfungsi untuk membantu mendokumentasikan sumber kode/source code HTML anda.
Anda dapat menambahkan Comments ke file HTML, dengan sintaks berikut;
<!-- Ini adalah cara penulisan comment di HTML -->
Contoh Penerapan Comment Pada HTML
Comment Biasa
<!-- Ini adalah Comment -->

<p>Ini adalah paragraf.</p>
Menyembunyikan Content
<h1>Header 1.</h1>

<!-- <p>Paragraf Pertama</p> -->

<p>Paragraf Kedua</p>
Menyembunyikan Bagian Dalam Konten
<p>Aku menyukai warna <!-- hitam, --> merah dan kuning</p>    

HTML Color
Apa Itu HTML Color
HTML Color adalah warna yang telah didefinisikan dengan nama atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA.
Beberapa warna yang dapat di definisikan dengan nama warna:
Tomato, Orange, DodgerBlue, MediumSeaGreen, Violet, Light Gray, dan 136+ Warna Lainnya.
Contoh Penerapan Color Pada HTML
Background Color
Mendefinisikan warna latar pada elemen HTML.
<h1 style="background-color:LightGray;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
Mendefinisikan warna teks.
<h1 style="color:Violet;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
Mendefinisikan warna dari border elemen.
<h1 style="border:5px solid Tomato;">Hello World</h1>
<h1 style="border:5px solid DodgerBlue;">Hello World</h1>
<h1 style="border:5px solid Violet;">Hello World</h1>
Color Value
Warna dapat ditentukan dengan nilai RGB, RGBA, HSL, HSLA, dan HEX.
Background Solid
<h1 style="background-color:rgb(255, 99, 71);">...</h1> 
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
Background Yang Memiliki Transparansi
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

HTML CSS
Apa Itu HTML CSS?
CSS (Cascading Style Sheets) berfungsi sebagai pengformat tata letak juga tampilan bagi sebuah website.
CSS bisa digunakan dengan 3 cara,
Inline CSS - Menggunakan atribut <style> di dalam elemen HTML.
Internal CSS - Menggunakan elemen <style> di bagian <head>.
Eksternal CSS - Menggunakan elemen <link> untuk menautkan file HTML dengan file CSS.
Contoh Penerapan CSS
Inline CSS
<h1 style="color:blue;">Heading Berwarna Biru.</h1>

<p style="color:red;">Paragraf Berwarna Merah.</p>
Internal CSS
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {background-color: black;}
      h1   {color: blue;}
      p    {color: red;}
    </style>
  </head>
  <body>

    <h1>Ini adalah Heading.</h1>
    <p>Ini adalah Paragraf.</p>

  </body>
</html>
Eksternal CSS
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <h1>Ini adalah Heading.</h1>
    <p>Ini adalah Paragraf.</p>

  </body>
</html>
Dalam file CSS:
body {
  background-color: black;
}
h1 {
  color: blue;
}
p {
  color: red;
}                                                                                                                                                          
HTML HYPERLINK
Apa itu HTML hyperlink?
HTML hyperlink adalah sebuah tag HTML yang berfungsi untuk navigasi antar halaman, ataupun navigasi ke link eksternal.
Hyperlink di-representasikan dengan tag <a>.
Tag <a> memiliki beberapa atribut, yaitu:
href
href adalah atribut dari elemen <a> yang paling penting, karena berfungsi untuk meletakan link atau halaman tujuan.
contoh kode
<a href="https://github.com/">Link menuju situs Github</a>
<a href="dashboard.html">Link menuju halaman dashboard</a>
<a href="#about">Link menuju section atau elemen HTML yang diberi id about</a>
target
Atribut target berfungsi untuk menjelaskan ke mana link akan dibuka. Untuk lebih jelasnya, berikut adalah beberapa nilai yang dapat digunakan sebagai nilai atribut target:
_self
Ini adalah nilai default untuk target, berfungsi untuk membuka link di halaman/tab yang sama.
<a href="https://github.com/" target="_self">Link menuju Github</a>
Jika tidak memberikan atribut target, berarti sama saja dengan memberi nilai _self.
<a href="https://github.com/">Link menuju Github</a>
_blank
Berfungsi untuk membuka link di tab baru.
<a href="https://github.com/" target="_blank">Link menuju Github</a>
_parent
Berfungsi untuk membuka link hanya di parent dari sebuah frame.
<a href="https://github.com/" target="_parent">Link menuju Github</a>
_top
Berfungsi untuk membuka link secara penuh di window browser, walaupun terdapat frame yang bersarang.
<a href="https://github.com/" target="_top">Link menuju Github</a>
Kesimpulan
Jika kita ingin membuat navigasi antar halaman atau membuka link situs eksternal, maka kita dapat menggunakan tag <a> dengan atribut href yang di-isi halaman atau situs yang kita inginkan. Lalu ada atribut target, kebanyakan orang mengisinya dengan nilai _blank agar membuka link tersebut di tab baru.    

HTML Images
Apa itu HTML Images?
HTML memiliki sebuah elemen <img> yang sangat berguna dalam melakukan membangun sebuah website. Tanpa gambar website akan terasa sangat membosankan, maka dari itu kalian perlu mempelajari tentang HTML Images.
Nah cara penulisan tag <img> sendiri tidak memerlukan tag penutup, atau lebih jelasnya adalah seperti ini:
<img src="" alt="">
Atribut di dalam tag <img>
Terdapat setidaknya dua atribut yang biasa digunakan.
src - Digunakan untuk mengarahkan path dari suatu gambar.
alt - Digunakan untuk membuat teks alternatif jika gambar gagal ditayangkan.
Bagaimana cara menampilkan gambar?
Untuk menampilkan gambar, kita perlu mengarahkan tag <img> kepada file yang kita inginkan melalui atribut src="url" atau bisa juga src="imagepath"
Sebagai contoh saja misalkan ingin menampilkan gambar kucing.png yang berada satu folder dengan file HTML.
<img src="kucing.png" alt="kucing">
Jika file gambar terdapat pada direktori tertentu, kita dapat menuliskan terlebih dahulu direktorinya.
<img src="images/kucing.png" alt="kucing">
Jika file gambar ada di suatu link di internet.
<img src="https://www.contoh.com/images/kucing.png" alt="kucing">
Namun sebagai catatan jika ingin mengutip gambar dari suatu link di internet, pastikan tidak melanggar hak cipta dari kepemilikan gambar tersebut.
Referensi
Untuk referensi lengkapnya, kalian bisa mengunjungi website berikut.

Selasa, 28 Januari 2025

Belajar HTML Dan CSS

Definisi HTML

Apa itu HTML?

Dokumen Simple HTML

Apa itu Elemen HTML?

Web Browser

Struktur Halaman HTML

Sejarah HTML

HTML Basic

Dokumen HTML

Hasil

Emmet Abbreviation

Editor HTML

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit.

Elemen HTML

Apa itu Elemen dalam HTML ?

Contoh Elemen HTML

Nesting Elemen HTML

HTML Attribute

Apa Itu HtML Attribute ?

Contoh Penerapan Attribute Pada HTML

href Attribute

src Attribute

width & height Attribute

alt Attribute

style Attribute

lang Attribute

title Attribute

class Attribute

id Attribute

method Attribute

HTML Headings

Apa Itu HTML Headings ?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Urutan Penulisan Heading

HTML Paragraphs

Apa Itu HTML Paragraphs

Contoh Penerapan <p>

Membuat HTML Paragraphs

Contoh Penerapan <p> dengan Code HTML

Contoh Penerapan <br> dengan Code HTML

Contoh Penerapan <hr> untuk membuat garis dengan Code HTML

Contoh Penerapan <pre> dengan Code HTML

Contoh Penerapan <div> dengan Code HTML

HTML Style

Apa Itu HTML Style ?

Contoh Penerapan Style

Background Color

Text Color

Text Size

Font Family

Text Align

HTML Quotation

Apa Itu HTML Quotation ?

Contoh Penerapan Elemen Quotation Pada HTML

Elemen <blockquote>

Elemen <q>

Elemen <abbr>

Elemen <address>

Elemen <cite>

Elemen <bdo>

HTML Comments

Apa Itu HTML Comments ?

Contoh Penerapan Comment Pada HTML

Comment Biasa

Menyembunyikan Content

Menyembunyikan Bagian Dalam Konten

HTML Color

Apa Itu HTML Color

Contoh Penerapan Color Pada HTML

Background Color

Text Color

Border Color

Color Value

`href` Attribute

`src` Attribute

`width` & `height` Attribute

`alt` Attribute

`style` Attribute

`lang` Attribute

`title` Attribute

`class` Attribute

`id` Attribute

`method` Attribute

Contoh Penerapan `<p>`

Contoh Penerapan `<p>` dengan Code HTML

Contoh Penerapan `<br>` dengan Code HTML

Contoh Penerapan `<hr>` untuk membuat garis dengan Code HTML

Contoh Penerapan `<pre>` dengan Code HTML

Contoh Penerapan `<div>` dengan Code HTML

Elemen `<blockquote>`

Elemen `<q>`

Elemen `<abbr>`

Elemen `<address>`

Elemen `<cite>`

Elemen `<bdo>`

`href`

`target`

`_self`

`_blank`

`_parent`

`_top`

Atribut di dalam tag `<img>`