Tag HTML
Apa saja tag HTML?
Tag HTML sendiri diperkirakan sekitar 250+, iyap memang terlihat sedikit tapi tag-tag HTML tersebut memiliki banyak fungsi juga pastinya saya akan mencoba benjelaskan satu satu tentu tidak semua.
Heading
Heading sendiri dapat dimanfaatkan sebagai tanda judul atau untuk menunjukan tingkat keberartian dari teks yang akan di tulis.
Contohnya seperti teks tebal-tebal tersebut.
Heading sendiri ada 6 tingkat, di nomori dari 1 sampai 6, semakin kecil angka maka semakin besar juga hurufnya
Contoh:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraf
Paragraf dimulai dengan tag <p> dan diakhiri dengan </p>.
Contoh:
<p>
Contoh paragraf 1.Contoh paragraf 1.Contoh paragraf 1.
</p>
<p>
Contoh paragraf 2.Contoh paragraf 2.Contoh paragraf 2.
</p>
Hasil:
Contoh paragraf 1.Contoh paragraf 1.Contoh paragraf 1.
Contoh paragraf 2.Contoh paragraf 2.Contoh paragraf 2.
yap terlihat sama aja dan banyak writter code memanfaatkan sebagai tag penampung teks.
Line Break
Digunakan untuk mengENTER teks, tag yang digunakan adalah <br> dan tidak diakhiri seperti properti lainnya.
Contoh:
<p>
Contoh paragraf 1.<br>
Contoh paragraf 1.<br>
Contoh paragraf 1.<br>
</p>
<p>
Contoh paragraf 2.<br>
Contoh paragraf 2.<br>
Contoh paragraf 2.<br>
</p>
Hasil:
contoh paragraf 1.
Contoh paragraf 1.
Contoh paragraf 1.
Contoh paragraf 2.
Contoh paragraf 2.
Contoh paragraf 2.
Align
Digunakan untuk menentukan rata tulisan pada teks, di css ini disebut text-align: ;. Default dari Align ini adalah left.
Contoh:
<p align="left">
contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.
</p>
<p align="center">
contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.
</p>
<p align="right">
contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.
</p>
Hasil:
contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.contoh paragraf rata kiri.
contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.contoh paragraf rata tengah.
contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.contoh paragraf rata kanan.
Pemformatan Teks
Digunakan untuk menunjukan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut contonya seperti huruf tebal,miring,garis bawah,dan lain-lain.
Format Teks:
- Menebalkan huruf (bold)
- Memiringkan huruf (italic)
- Garis bawah (underline)
- Membesarkan huruf (big)
- Mengecilkan huruf (small)
- Superscrip (sup)
- Subscript (sub)
Contoh:
<b>Tulisan ini tebal (bold)</b> <br>
<strong>Tulisan ini tebal (strong)</strong> <br>
<i>Tulisan ini miring (italic)</i> <br>
<em>Tulisan ini miring (emphhasize)</em> <br>
<u>tulisan bergaris bawah (underline)</u> <br>
<big>tulisan ini besar</big> <br>
<small>tulisan ini kecil</small> <br>
Tulisan ini <sup>superscript</sup> <br>
tulisan ini <sub>subscript</sub>
Hasil:
Tulisan ini tebal (bold)
Tulisan ini tebal (strong)
Tulisan ini miring (italic)
Tulisan ini miring (emphhasize)
tulisan bergaris bawah (underline)
tulisan ini besar
tulisan ini kecil
Tulisan ini superscript
tulisan ini subscript
Teks Preformat:
Digunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.
Contoh:
<pre>
Contoh teks preformat
ㅤㅤㅤㅤㅤㅤㅤContoh
ㅤTeks
ㅤㅤㅤㅤPreformat
Contoh teks preformat
</pre>
Hasil:
Contoh teks preformat
Contoh
Teks
Preformat
Contoh teks preformat
Jadi saat kita spasi pun akan dihitung sebagai value.
Hyperlink
HTML memiliki properti yang jika kalian masukkan sebuah link maka teks tersebut akan berwarna biru dan bergaris bawah dan jika di klik maka akan menuju ke arah yang dituju.
HTML menggunakan tag <a> (anchor) untuk membuat teks menjadi link, dan tag ini masih bisa di style.
Contoh:
<a href="https://ttpit.blogspot.com/2022/04/apa-itu-html.html">link ke blog Apa itu HTML?</a>
Hasil:
link ke blog saya Apa itu HTML?
Membuat link untuk window baru
Dapat di tambahkan atribut: target="_blank" di akhir kutib 2 link.
Contoh:
Buka halaman saya <a href="https://ttpit.blogspot.com/2022/04/apa-itu-html.html" target="_blank">blog saya </a>di window baru
Buka halaman saya blog saya di window baru
Link menuju alamat email (mailto)
cuma menambahkan atribut mailto:nama-email@gmail.com didalam kutib dua.
Contoh:
Alamat menuju <a href="mailto:anakquoteser123@gmail.com">email saya</a>
Hasil:
Alamat menuju email saya
Image Hyperlink
Hyperlink dengan metode gambar.
Contoh:
<a href="https://ttpit.blogspot.com/2022/04/apa-itu-html.html"><img src="img/516657_VESJ5DyG.png" alt="img for mailto"></a>
Tips pelokasian
../untuk keluar dari folder, ./untuk keluar dari file entah .html atau .css, jika sudah di dalam folder tinggal ketik nama imagenya beserta typenya untuk keluar dari file, / itu artinya masuk ke folder atau file.
![]()
Style anchor & image di atas adalah:
<a
style="margin-left: 5px;display: flex;justify-content: center;"
href="https://ttpit.blogspot.com/2022/04/apa-itu-html.html"><img src="img/516657_VESJ5DyG.png" alt="img for mailto"
style="width: 150px;height: 150px;border-radius: 50%;"></a>
Next akan bahas list >>>
Materi List
