Tutorial HTML : Pemformatan HTML5

Tutorial HTML

Pemformatan HTML adalah metode pemformatan teks untuk tampilan yang lebih baik. HTML memungkinkan kita untuk memformat teks tanpa menggunakan CSS. HTML menyertakan banyak tag pemformatan. Tag ini digunakan untuk membuat teks tebal, garis bawah, dan miring. Ada hampir 14 opsi yang tersedia dalam HTML dan XHTML untuk memunculkan teks.

Tag HTML dibagi menjadi dua kategori:

Read More
  • Physical tag / Tag Fisik
  • Logical tag / Tag Logika

Physical tag: Tag ini digunakan untuk memberikan tampilan visual pada teks.
Logical tag: Tag ini digunakan untuk menambahkan nilai.

Di sini kita akan mengetahui 14 tag untuk memformat HTML. Daftar teks untuk memformat HTML ada di bawah.

Nama ElemenPenjelasan
<b>tag fisik yang digunakan untuk menebalkan teks di antara tag.
<strong>tag logis yang memberi tahu browser bahwa teks itu penting.
<i>tag fisik digunakan untuk membuat teks miring.
<em>tag logis yang digunakan untuk menampilkan konten dalam huruf miring.
<mark>Tag ini akan digunakan untuk menyorot teks
<u>Tag ini digunakan untuk menggarisbawahi teks yang telah ditulis di antaranya.
<tt>Gunakan tag ini, teks mungkin muncul dalam teletype. (Tidak mendukung HTML5)
<sup>menampilkan sedikit konten di atas garis biasa.
<sub>menampilkan sedikit konten di bawah garis biasa.
<del>tag digunakan untuk menampilkan konten yang dihapus/coret.
<strike>coretan pada baris teks. (Tidak mendukung HTML5)
<ins>Tag ini menunjukkan konten yang ditambahkan.
<big>Tag ini digunakan dengan satu unit konvensional untuk memperbesar ukuran font.
<small>Tag ini digunakan untuk memperkecil ukuran font sebanyak satu unit dari ukuran font dasar.

1. Bold Text

HTML < b > dan < strong > pemformatan elemen.
Elemen HTML < b > adalah tag fisik yang menampilkan teks dalam font tebal tanpa kepentingan logis apa pun. Jika Anda menulis sesuatu di dalam elemen < b> …………… </b >, itu akan ditampilkan dalam huruf tebal.

Contoh:


<p><b> Tulis dalam teks tebal paragraf pertama Anda. </b></p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p><b> Tulis dalam teks tebal paragraf pertama Anda. </b></p>
 </body>
 </html> 

Output:

tag <strong>
Tag HTML <strong> adalah tag logis yang menampilkan konten dalam font tebal dan menginformasikan browser tentang signifikansi logisnya. Tulis sesuatu seperti < strong >????????.</strong > Teks penting ditampilkan.

Contoh:


<p><strong>Ini adalah konten penting</strong>, dan ini adalah konten normal</p>

kode:

<!DOCTYPE>
 <html>
 <body>
 <p><strong>Ini adalah konten penting</strong>, dan ini adalah konten normal</p>
 </body>
 </html> 

Output:

2. Teks Italic

HTML <i> dan <em> elemen pemformatan.
Elemen HTML < I > adalah elemen fisik yang menampilkan konten terlampir dalam font miring tanpa tambahan arti penting. Jika Anda menulis sesuatu di elemen < i>……………. </i >, itu akan ditampilkan dalam huruf miring.

Contoh:


<p> <i>Tulis Paragraf Pertama Anda dalam teks miring.</i></p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p> <i>Tulis Paragraf Pertama Anda dalam teks miring.</i></p>
 </body>
 </html> 

Output:

tag<em>
Tag HTML <em > adalah fitur logis yang menunjukkan konten terlampir dalam font miring, dengan nilai tambah dalam semantik.

Contoh:


<p><em>Ini adalah konten penting</em>, yang ditampilkan dalam font miring.</p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p><em>Ini adalah konten penting</em>, yang ditampilkan dalam font miring.</p>
 </body>
 </html> 

Output:

3. Pemformatan HTML Mark/penanda

Jika Anda ingin menandai atau menyorot suatu file, isinya harus ditulis dalam < mark>……</mark>.

Contoh:

<h2> Saya ingin memberi <mark> Tanda</mark> di tampilan Anda</h2>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <h2> Saya ingin memberi <mark> Tanda</mark> di tampilan Anda</h2>
 </body>
 </html> 

Output:

4. Teks Garis bawah

Jika kita menulis sesuatu di dalam elemen < u>…… </u >, teks yang digarisbawahi akan ditampilkan.

Contoh:


<p> <u>Tulis Paragraf Pertama Anda dengan teks yang digarisbawahi.</u></p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p> <u>Tulis Paragraf Pertama Anda dengan teks yang digarisbawahi.</u></p>
 </body>
 </html> 

Output:

5. Teks Strike

Apa pun yang tertulis di dalam elemen < stroke>………………….. </stroke > akan ditampilkan dengan coretan. Garis tipis yang melintasi kalimat itu.

Contoh:


<p> <strike>Tulis Paragraf Pertama Anda dengan Teks Strike</strike>.</p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p> <strike>Tulis Paragraf Pertama Anda dengan Teks Strike</strike>.</p>
 </body>
 </html> 

Output:

6. Font Monospaced

Jika Anda ingin setiap huruf memiliki lebar yang sama, Anda harus menulis isinya di dalam elemen <tt>…………</tt>.

Contoh:


<p>Halo <tt>Tulis Paragraf Pertama Anda dengan font monospace.</tt></p>

Kode:

<!DOCTYPE>
 <html>
 <body>
 <p>Halo <tt>Tulis Paragraf Pertama Anda dengan font monospace.</tt></p>
 </body>
 </html> 

Output:

7. Superscript Text

Jika Anda menempatkan konten di elemen < sup>……………… </sup >, konten akan ditampilkan di superskrip; berarti tinggi karakter ditampilkan setengah di atas karakter lainnya.

Contoh:


Halo <sup>Tulis Paragraf Pertama Anda dalam superskrip.</sup>

Kode:

<!DOCTYPE>
<html>
<body>

Halo <sup>Tulis Paragraf Pertama Anda dalam superskrip.</sup>

</body>
</html>

Output:

8. Subscript Text

Jika Anda meletakkan konten di dalam item < sub>………….. </sub >, itu akan ditampilkan di subskrip; berarti tinggi karakter setengah di bawah karakter lain.

Contoh:


Halo <sub>Tulis Paragraf Pertama Anda di Subscript.</sub>

Kode:

<!DOCTYPE>
<html>
<body>

Halo <sub>Tulis Paragraf Pertama Anda di Subscript.</sub>

</body>
</html>

output:

9. Deleted Text

Apa pun di dalam <del>…… </del > ditampilkan sebagai teks yang dihapus.

Contoh:


Halo <del>Hapus paragraf pertama Anda.</del>

Kode:

<!DOCTYPE>
<html>
<body>

Halo <del>Hapus paragraf pertama Anda.</del>

</body>
</html>

Output:

10. Inserted Text

Apa pun yang disisipkan di dalam <ins>…… </ins > akan ditampilkan sebagai teks yang disisipkan.

Contoh:


<del>Hapus paragraf pertama Anda.</del><ins>Tulis paragraf lain.</ins>

Kode:

<!DOCTYPE>
<html>
<body>

<del>Hapus paragraf pertama Anda.</del><ins>Tulis paragraf lain.</ins>

</body>
</html>

Output:

11. Teks Lebih Besar/Larger

Jika kita ingin menambahkan ukuran font yang lebih besar dari teks lainnya, maka sisipkan isinya di < big>……………. </big>. Ini meningkatkan ukuran satu font lebih dari yang sebelumnya.

Contoh:


Halo <big>Tulis paragraf dengan font yang lebih besar.</big>

Kode:

<!DOCTYPE>
<html>
<body>

Halo <big>Tulis paragraf dengan font yang lebih besar.</big>

</body>
</html>

Output:

12. Teks Lebih Kecil/Smaller

Jika kami ingin membuat ukuran font Anda lebih kecil dari teks lainnya, masukkan konten dalam tag < small>……………. </small >. Ini mengurangi ukuran satu font ke yang sebelumnya.

Contoh:


Halo <small>Tulis paragraf dengan font yang lebih kecil.</small>

Kode:

<!DOCTYPE>
<html>
<body>

Halo <small>Tulis paragraf dengan font yang lebih kecil.</small>

</body>
</html>

Output:

Related posts

Leave a Reply

Your email address will not be published.