Tag HTML untuk teks

TTPIT _{.blogspot.com}

• Apa itu HTML?
• Tentang ku?

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 ^superscript <br>
tulisan ini _subscript

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