Hello coders, kali ini kita akan membahas tentang Text Formatting HTML . Setelah kemarin kita membahas istilah pada html di tutorial kali ini kita akan membuat sebuah text sederhana di html. Pertama – tama temen temen siapkan code editornya dan browsernya. Kita akan membuat stuktur html kita. Kalian bisa membuat dulu di folder latihan kalian dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Text Formating</title>
</head>
<body>
Hello World
Aku sedang belajar programming
</body>
</html>Kemudian kita bisa menjalankanya di browser kita. Maka akan tampil seperti ini dibrowser kita.
Penulisan Text Formatting HTML Paragraf HTML
Untuk penulisan paragraf HTML kita menggunakan tag <p>. Seperti yang sudah kita bahas sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Text Formating</title>
</head>
<body>
<p>"Kruukk…krruuk," Kancil mengelus perutnya yang dari tadi mengeluh lapar, dan tenggorokannya pun sangat kering. Hari amatlah panas. Kancil berjalan sendirian. Tadi dia memang bersama teman-temannya meninggalkan hutan kecil tempat tinggal mereka yang terbakar. Sekarang, teman-temannya sudah meninggalkannya.</p>
</body>
</html>
Disini saya mengutip cerita komik kancil gaess wkwkwk. Nah caranya sama cuman teks tadi kita masukan di tag p nah perbedaanya akan kerasa jika sudah banyak yaa. Jika kalian mengcoding sintaks diatas maka akan muncul seperti ini di browser. Oiya buat title ini akan muncul di tulisan paling atas gaes.
Penulisan Text Formatting HTML Judul di HTML
Untuk penulisan judul di html kalian bisa menggunakan tag h1, h2 dan seterusnya. Semakin tinggi angkanya maka akan semakin kecil, sehingga kita bisa menyesuaikan di ukuran yang kita inginkan walupun kita masih bisa merubah ukurannya nanti di css menggunakan fontsize. Tetapi tag h ini memudahkan kita memulai gitu istilahnya gak mikir ukuran gedenya dulu. Disini saya akan mempraktekan untuk judulnya si cerita kancil.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Text Formating</title>
</head>
<body>
<h2 style="text-align: center">Kancil Mencuri Timun Pak Tani</h2>
<p>"Kruukk…krruuk," Kancil mengelus perutnya yang dari tadi mengeluh lapar, dan tenggorokannya pun sangat kering. Hari amatlah panas. Kancil berjalan sendirian. Tadi dia memang bersama teman-temannya meninggalkan hutan kecil tempat tinggal mereka yang terbakar. Sekarang, teman-temannya sudah meninggalkannya.</p>
</body>
</html>
Nah maka tampilan di browser akan seperti ini.
Disini saya sedikit menggunakan bantuan css yah biar tampilannya agak rapi menggunakan inline css meggunakan atribut style. Selanjutnya agar lebih menarik lagi kita akan membuat sebuah text miring di beberapa text.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Text Formating</title>
</head>
<body>
<h2 style="text-align: center">Kancil Mencuri Timun Pak Tani</h2>
<p><i>"Kruukk…krruuk,"</i> Kancil mengelus perutnya yang dari tadi mengeluh lapar, dan tenggorokannya pun sangat kering. Hari amatlah panas. Kancil berjalan sendirian. Tadi dia memang bersama teman-temannya meninggalkan hutan kecil tempat tinggal mereka yang terbakar. Sekarang, teman-temannya sudah meninggalkannya.</p>
</body>
</html>
Nah pasti sekarang di tampilan kalian pasti akan menjadi seperti ini.
Waw menarik bukan, text atau pragraf petikan cerita kancil kini menjadi leabih rapi dan sesuai dengan aslinya. Selain tag <i> untuk bikin jadi miring ada tag <strong> dan tag <b> untuk menebalkan huruf dan juga ada tag u untuk underline atau memberikan garis bawah.
Penulisan Text Formatting HTML List di Html
Setelah kita tadi mencoba membuat text paragraf dan judul, sekarang kita akan mencoba membuat studikasus yang lebih beda lagi, yaitu membuat tampilan untuk menampilkan daftar list resep makanan. Nah untuk membuat list kita akan membuat nya dengan tag ul dan ol.
Nah untuk perbedaanya nanti temen temen bisa liat sendiriya . Dibawah ini kita akan mencoba tag ul.
<!DOCTYPE html>
<html>
<head>
<title>ul list</title>
</head>
<body>
<h3 style="text-align: center;">Resep Nasi Goreng Smoked Beef</h3>
<h4>Bahan : </h4>
<ul>
<li>2 pirimh nasi putih masukkan ke freezer sebentar agar agak kering</li>
<li>2 butir telur auam, buat orak-arik</li>
<li>2 lembar daging asap, potong kecil-kecil</li>
<li>1 batang daun bawang, iris halus</li>
<li>3 lembar kol, iris halus</li>
<li>2 sdm mentega</li>
</ul>
<h4>Bumbu : </h4>
<ul>
<li>3 siung bawang putih, memarkan dan cincang halus</li>
<li>¼ buah bawang bombay, cincang halus</li>
<li>1 buah cabai merah keriting, iris halus</li>
<li>¼ sdt merica, haluskan</li>
<li>1 sdm saus tomat</li>
<li>1 sdm kecap manis</li>
<li>1 sdt saus tiram</li>
<li>1 sdt garam</li>
</ul>
</body>
</html>
Nah maka temen temen akan mendapatkan tampilan seperti dibawahnya.
Sekarang kita akan menggunakan tag ol untuk langkah langkahnya, karena tag ol menggunakan nomor didepannya bukan titik.
<!DOCTYPE html>
<html>
<head>
<title>ul list</title>
</head>
<body>
<h3 style="text-align: center;">Resep Nasi Goreng Smoked Beef</h3>
<h4>Bahan : </h4>
<ul>
<li>2 pirimh nasi putih masukkan ke freezer sebentar agar agak kering</li>
<li>2 butir telur auam, buat orak-arik</li>
<li>2 lembar daging asap, potong kecil-kecil</li>
<li>1 batang daun bawang, iris halus</li>
<li>3 lembar kol, iris halus</li>
<li>2 sdm mentega</li>
</ul>
<h4>Bumbu : </h4>
<ul>
<li>3 siung bawang putih, memarkan dan cincang halus</li>
<li>¼ buah bawang bombay, cincang halus</li>
<li>1 buah cabai merah keriting, iris halus</li>
<li>¼ sdt merica, haluskan</li>
<li>1 sdm saus tomat</li>
<li>1 sdm kecap manis</li>
<li>1 sdt saus tiram</li>
<li>1 sdt garam</li>
</ul>
<h4>Langkah - langkah : </h4>
<ol>
<li>Panaskan mentega, tumis bawang putih dan bawang bombay hingga harum. Masukkan cabai, aduk-aduk hingga layu.</li>
<li>Masukkan telur ayam, daging asap, daun bawang dan kol. Aduk rata hingga setengah layu.</li>
<li>Masukkan merica, saus tomat, kecap manis dan saus tiram. Tambahkan air dan garam, aduk rata.
</li>
<li>Masukkan nasi putih, aduk rata hingga bumbu tercampur dan matang. Angkat dan hidangkan.</li>
</ol>
</body>
</html>
Nah maka tampilannya akan menjadi seperti ini
Kesimpulan
Teks formatting akan sering kita pakai dalam membuat konten di web, pastikan kamu mengingat tag-tag yang digunakan untuk teks formatting ya gaes, tapi kalo lupa juga gpp sih kan ada google wkwkwk yang penting kamu mengerti tentang konsepnya. Mungkin sekian dulu dari mimin ya gaes. Tetap semangat belajarnya SALAM NGODING
