Halo teman teman kali ini saya akan memberikan contoh mengenai format text pada HTML.
MEMBUAT HEADING DAN PARAGRAF
Heading biasanya digunakan untuk menuliskan judul dari sebuah document sedangkan paragraf digunakan untuk menuliskan isi dari document.
Untuk lebih jelasnya silahkan copy code di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Format Text HTML</title>
</head>
<body>
<!-- Heading -->
<h1>Mari Belajar HTML</h1>
<h2>Mari Belajar HTML</h2>
<h3>Mari Belajar HTML</h3>
<h4>Mari Belajar HTML</h4>
<h5>Mari Belajar HTML</h5>
<h6>Mari Belajar HTML</h6>
<br>
<br>
<!-- digunakan untuk menambah space ke bawah (enter) -->
<hr>
<!-- digunakan untuk manampilkan garis horizontal -->
<h3 align="center">Pembukaan UUD 1945</h3>
<!-- "align" digunakan untuk menentukan perataan teks(center/leaf/right) -->
<p>
Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab
itu, maka penjajahan di atas dunia harus dihapuskan karena tidak sesuai dengan
perikemanusaan dan perikeadialan.
</p>
<p>
Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat yang
berbahagia dengan selamat sentosa mengantarkan rakyat Indonesia ke depan pintu
kemerdekaan negara Indonesia, yang merdeka, bersatu, berdaulat, adil dan makmur.
</p>
<p>
Atas berkat rahmat Allah Yang Maha Kuasa dan dengan didorongkan oleh keingina luhur,
supaya berkehidupan kebangsaan yang bebas, maka rakyat Indonesia menyatakan dengan ini
kemerdekaannya.
</p>
<p>
Kemudian daripada itu untuk membentuk suatu pemerintah negara Indonesia yang melindungi
segenap bangsa Indonesia dan seluruh tumpah darah Indonesia dan untuk memajukan kesejaterahan
umum, mencerdaskan kehidupan bangsa, dan ikut melaksanakan ketertiban dunia yang berdasarkan
kemerdekaan, perdamaian abadi dan keadilan sosial, maka disusunlah kemerdekan kebangsaan
Indonesia itu dalam suatu Undang-Undang Dasar negara Indonesia, yang terbentuk dalam suatu
susunan negara Republik Indonesia yang berkedaulatan rakyat dengan berdasar kepada : Ketuhanan
Yang Maha Esa, Kemanusian yang adil dan beradab, Persatuan Indonesia, Kerakyatan yang dipimpin
oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan, Keadilan sosial bagi seluruh rakyat
Indonesia.
</p>
</body>
</html>
Hasilnya akan seperti ini.
Sebenarnya tag yang ada di code di atas sudah pernah saya jelaskan di post saya yang sebelumnya, tepi disini akan saya jelaskan ulang. <!DOCTYPE html> digunakan untuk memberi tau bahwa code ini ditulis menggunakan html. <html> digunakan untuk membuat file html. <head> digunakan untuk membuat kepala html. <title> digunakan untuk menuliskan judul dari halaman web (judul pada tab browser). <body> digunakan untuk membuat tubuh html (isi dari halaman). <h1> hingga <h6> digunakan untuk membuat heading (biasanya digunakan untuk menuliskan judul). <br> digunakan untuk menambah space ke bawah (enter). <hr> digunakan untuk menampilkan garis horizontal. Sedangkan <p> digunakan untuk membuat paragraf.
MENGUBAH BENTUK TULISAN
Selanjutnya saya akan memberikan cara menggubah bentuk tulisan dari yang biasa menjadi Bold (tebal), italic (miring) dan lain lain.
Silahkan salin code di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Membuat Format Teks</title>
</head>
<body>
<h2>Latihan Membuat Format Teks</h2>
<ul>
<!-- Format Tebal -->
<li>
<b>Ini adalah Format Tebal</b>
</li>
<!-- Format Miring -->
<li>
<i>Ini adalah Format Miring</i>
</li>
<!-- Format Garis Bawah -->
<li>
<u>Ini Format Underline</i>
</li>
<!-- Format Superscript Text -->
<li>
Ini adalah Format pangkat x<sup>2</sup> + y <sup>3</sup> = 15
</li>
<!-- Format Subscript Text -->
<li>
H<sub>2</sub>o<sub>3</sub>
</li>
<!-- Format Highligh -->
<li>
<mark>Coding itu Easy</mark>
</li>
<!-- Format Coret -->
<li>
Pemrograman web itu <del>sulit</del> mudah
</li>
</ul>
</body>
</html>Hasilnya akan seperti ini.
Oke disini ada beberapa tag baru yang muncul seperti <ul> dan <li>. Kalian pasti merasa asing dengan tag tersebutkan, kalau begitu akan saya jelaskan.
<ul> biasanya digunakan untuk membuat daftar tetapi tapi daftar yang dibuat tidak menggunakan nomor, untuk membuat daftar menggunakan nomor akan saya bahas di part terakhir. Kemudian ada <li> digunakan untuk membuat list item yang akan dimasukkan ke daftar.
Selanjutnya ada tag yang digunakan untuk menggubah bentuk font, yang pertama <b> digunakan untuk menebalkan font/tulisan. Kemudian ada <i> yang digunakan untuk membuat tulisan menjadi miring. Lalu ada <u> fungsinya untuk membuat tulisan berunderline. <sup> biasanya digunakan untuk membuat pangkat. <sub> biasanya digunakan untuk menuliskan nomor atom. <mark> digunakan untuk memberikan warna background pada tulisan. Dan yang terakhir adalah <del> digunakan untuk membuat tulisan tampak seperti di coret.
MEMBUAT LIST ANGKA
Untuk materi yang terakhir kita akan membuat list angka menggunkan <ol>
Untuk mempersingkat waktu silahkan salin code di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>List Pada HTML</title>
</head>
<body>
<!-- Ordered List Angka -->
<h3>List Menggunakan Urutan</h3>
<h4>Urutan Angka</h4>
<ol type="1">
<li>Judul Laporan</li>
<li>Kata Pengantar</li>
<li>Bab 1</li>
<li>Bab 2</li>
<li>Bab 3</li>
<li>Penutup</li>
</ol>
<h4>Urutan Abjad</h4>
<ol type="A">
<li>Judul Laporan</li>
<li>Kata Pengantar</li>
<li>Bab 1</li>
<li>Bab 2</li>
<li>Bab 3</li>
<li>Penutup</li>
</ol>
<h4>Urutan Romawi</h4>
<ol type="I">
<li>Judul Laporan</li>
<li>Kata Pengantar</li>
<li>Bab 1</li>
<li>Bab 2</li>
<li>Bab 3</li>
<li>Penutup</li>
</ol>
<h3>List Tak Berurutan</h3>
<ul>
<li>Judul Laporan</li>
<li>Kata Pengantar</li>
<li>Bab 1</li>
<li>Bab 2</li>
<li>Bab 3</li>
<li>Penutup</li>
</ul>
</body>
</html>Hasilnya seperti ini.
Oke pertama tama kita akan membahas mengenai tag ol. <ol> merupakan tag untuk membuat daftar menggunakan angka dan abjad. Nah, untuk menggunakan ol kita harus menambahkan type=” “. type sendiri berfungsi untuk menentukan jenis penulisan urutan dari daftar yang kita buat, caranya adalah tinggal memasukkan code jenis daftar pada tanda kutip. Untuk jenis codenya sendiri ada :
- “1” untuk daftar dengan urutan angka
- “A” untuk daftar dengan urutan Alphabet
- “I” untuk daftar dengan urutan angka romawi.
Oke sepertinya itu saja dulu untuk kali ini, semoga bermanfaat.
Andra Stories 