Keranjang Coding : product


?>

Mengenal Macam Macam Format Text Pada Html


  • 20-05-2020
  • 470
  • html



Belajar HTML - Mengenal Macam-Macam Format Text Pada Html

Assalamualaikum Warahmatullahi Wabarokatu ..

Kembali lagi pada materi Tutorial HTML. pada kesempatan kali ini, kita akan belajar mengenal macam-macam format text yang sering digunakan dalam penulisan pada bahasa pemograman HTML. Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul, ataupun isi dari konten/halaman dari website itu sendiri. Berikut beberapa penjelasan dan contoh dari penggunaan Format Text Pada HTML.

Belajar Penggunaan Format Text HTML.

  1. format text bold (tebal). untuk membuat teks menjadi tebal pada tampilan halaman web menggunakan tag <b> berikut syntax HTML untuk membuat format text menjadi tebal : 

  2. <b> Ini Adalah Penggunaan Text Tebal </b>
  3. format italic (miring). untuk membuat teks menjadi miring pada tampilan halaman web menggunakan tag <i> berikut syntax HTML untuk membuat format text menjadi miring :
  4.  
  5. <i> Ini Adalah Penggunaan Text Miring</i> 
  6. format undrline (garis bawah). untuk membuat teks menjadi garis bawah pada tampilan halaman web menggunakan tag <u> berikut syntax HTML untuk membuat format text menjadi garis bawah:
  7. <u> Ini Adalah Penggunaan Text Garis Bawah</u>

Beriku ini macam macam format text yang sering digunakan dalam penulisan html :

Tag Fungsinya
<b> format text bold/tebal
<i> format text italic/miring
<u> format text underline/garis bawah
<small> format text kecil
<strong> format text yang hampir sama dengan format bold
<sub> format subscripted teks
<sup> format superscripted teks
<ins> format text garis bawah
<del> format text dengan garis di tengah
<mark> format text yang berwarna

Berikut ini ada macam-macam gaya penulisan format text element pada Html :

 - Belajar Emphasis, Strong, Bold, Dan Italic Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Emphasis, Strong, Bold, dan Italic Element</title>
</head>
<body>
  <p> 
    <strong>Kabar gembira</strong>, Saat ini matadeveloper ada promo 
    <i>Aplikasi</i> murah <b>dengan garansi</b>. 
    Tunggu apa lagi segera dapatkan di matadeveloper.com, 
    <em>Ayo Buruan?</em>
  </p>
</body>
</html>

- Underline dan Strikethrough Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Underline dan Strikethrough Element</title>
</head>
<body>
  <p> 
    <s>CSS</s> <ins>HTML</ins> merupakan singkatan dari 
    <u>Hypertext Markup Language</u>. 
    Singkatan ini terdiri dari 3 komponen kata, 
    yakni Hypertext, Markup dan <del>League</del> Language.
  </p>
</body>
</html>

- Superscript dan Subscript Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Superscript dan Subscript Element</title>
</head>
<body>
  <p> 
    Akhir-akhir ini kadar CO<sub>2</sub> di udara semakin parah. 
    Sebanyak 20.000<sup>2</sup> ton CO2 dikeluarkan dari jalanan 
    setiap tahunnya.
  </p>
</body>
</html>

- Preformatted Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Preformatted Element</title>
</head>
<body>
  <pre> 
  Tulisan ini akan tampil dengan ‘apa     adanya’.
          Seluruh spasi,     tab, dan karakter enter akan tampil
  
  Tanpa di format. 
        Umumnya     teks ini ditampilkan dalam font courier new.
  </pre>
</body>
</html>

- Code, Samp, KBD, dan Var Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Code, Samp, KBD, dan Var Element</title>
</head>
<body>
  <p>
    <code>echo</code> adalah perintah PHP untuk menampilkan sesuatu. 
    Contohnya: <samp>echo "Hello World"</samp>. 
    Untuk membuat variabel PHP, ditulis dengan tanda dollar, 
    seperti: <var>$a</var>.
  </p>
  <p>
    Untuk melihat hasil kode HTML dari PHP bisa menggunakan 
    web developers tool, dengan menekan <kbd>CRTL+Shift+i</kbd>.   
  </p> 
</body>
</html>

- Cite, Quote dan Blockquote Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Cite, Quote dan Blockquote Element</title>
</head>
<body>
  <p>
    Seperti kata <cite>Albert Einstein</cite>: 
    <q>person who never made a mistake never tried anything new.</q>
  </p>
  <blockquote>
    Friendship... is not something you learn in school. 
    But if you haven't learned the meaning of friendship, 
    you really haven't learned anything.
    <cite>Muhammad Ali</cite>
  </blockquote>
</body>
</html>

- Mark Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Mark Element</title>
</head>
<body>
  <p>
    Berikut adalah hasil pencarian dari kata <mark>"web hosting"</mark> :
  </p>
  <p>
    Perusahaan jasa penyedia <mark>web hosting</mark> 
    juga memiliki paket-paket sendiri, sesuai dengan fitur 
    dan harga yang disediakan, seperti paket basic, personal, 
    bisnis, corporate, dll. 
  </p>
  <p>    
    Dalam tutorial kita akan membahas 
    tentang hal-hal teknis yang bisa jadi pertimbangan 
    untuk memilih paket <mark>web hosting</mark>.
  </p>
</body>
</html>

- Abbr Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Abbr Element</title>
</head>
<body>
  <p>
    <abbr title="Hypertext Markup Language">HTML</abbr> 
    adalah dasar dari semua halaman web di internet. 
    Jika anda ingin mempelajari cara membuat website, 
    maka <abbr>HTML</abbr> adalah langkah pertama anda.
  </p>
</body>
</html>

- Address Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Address Element</title>
</head>
<body>
  <address>
    Anda bisa mengunjungi website matadeveloper
    <a href="http://www.matadeveloper.com">
    www.matadeveloper.com</a>.
    <br>
    Jika ada pertanyaan dan masukkan, silahkan email 
    <a href="mailto:kharismamaulana1@gmail.com">Kharisma Maulana Pasaribu</a>.
    <br>
    Whatssapp : 082282845087
  </address>
</body>
</html>

- BDO Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar BDO Element</title>
</head>
<body>
  <p>
    <bdo dir="ltr">HTML adalah dasar semua website di internet.
    Jika anda ingin mempelajari cara membuat website,
    maka hal pertama yang harus dipelajari adalah HTML</bdo>
  </p>
  <p>
    <bdo dir="rtl">HTML adalah dasar semua website di internet.
    Jika anda ingin mempelajari cara membuat website,
    maka hal pertama yang harus dipelajari adalah HTML</bdo>
  </p>
</body>
</html>

- Dfn Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Dfn Element</title>
</head>
<body>
  <p>
    <dfn>HTML</dfn> adalah bahasa markup standar 
    yang digunakan untuk membuat halaman web.
  </p>
  <p>
    <dfn title="Hypertext Markup Language">HTML</dfn> 
    adalah bahasa markup standar yang digunakan 
    untuk membuat halaman web.
  </p>
  <p>
    <dfn>
      <abbr title="Hypertext Markup Language">HTML</abbr>
    </dfn>
    adalah bahasa markup standar yang digunakan 
    untuk membuat halaman web.
  </p>
</body>
</html>

- Non-Breaking Space

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Non-Breaking Space</title>
</head>
<body>
  <h3>Belajar HTML</h3>
  <h3>Belajar &nbsp; &nbsp; &nbsp; &nbsp; HTML</h3>
  <p>&nbsp; &nbsp; Belajar &nbsp; &nbsp; HTML</p>
</body>
</html>

Mungkin sampai sini dulu mengenai pembahasan macam-macam penulisan format element pada html, sampai jumpa di pertemuan selanjutnya, terima kasih ...

Tags : html

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Membuat Heading Pada Html
Next Post
Tutorial Sistem Notifikasi Realtime Di P