Catatan belajar HTML kali ini akan menyajikan bagaimana penulisan paragraf dalam HTML. Selain itu juga akan diperkenalkan bagaimana penulisan huruf miring, huruf tebal dalam html. Untuk memulai nya coba perhatikan kode di bawah ini, jalankan di komputer anda.
<!DOCTYPE html>
<html>
<head>
<title>Penulisan HTML Dasar</title>
</head>
<body>
Diketik ini
2 baris, tapi tampil satu baris
Ini adalah paragraf kedua
<p> Ini dipisahkan mengunakan tag </p>
<p> lihat beda kalau dipisahkan. </p>
antar ini dan baris berikutnya pakai br<br/>
ini dan sebelumnya pakai br/ <br/>
<i> pakai tag i </i> <b> pakai tag b </b>
</body>
</html>
2 baris, tapi tampil satu baris
Ini adalah paragraf kedua
Dari kode di atas, meskipun pada teks editor (saya menggunakan notepad) ditulis dalam bentuk dua baris, tapi pada tampilannya masih terlihat satu baris. Ini berarti bentuk spasi, enter ataupun tab (dikenal dengan istilah (white characters) tidak mempengaruhi tampilan halaman html.
Lalu bagaimana cara membuat paragraf dalam html? Pembatas antara 2 paragraf dalam html menggunakan tag <p> dan </p>. Kemudian pada paragraf berikutnya juga dibuar hal serupa. Dengan menggunakan tag tersebut maka akan tampil halaman dengan 2 paragraf. Antara paragraf 1 dan berikutnya akan diberikan jarak. Bentuk penggunaanya ada pada kode yang berwarna kuning di atas. Perhatikan hasil teks tersebut, terlihat bahwasanya ada pembatas antara paragraf 1 dan paragraf 2.
Untuk pemberian baris baru, bisa anda perhatikan kode yang berwarna biru. Antara baris pertama dan baris kedua. Pada penulisannya dibatasi oleh tag </br>. Apabila tanpa tag <br/> maka kode warna biru tersebut kan ditampilkan dalam satu baris.
Tag <p> , dan <br/> terlihat memiliki fungsi yang hampir sama. Namun ada sedikit perbedaanya. Pada tag <p> baris antara 2 paragraf terlihat lebih berjarak dibanding <br/>. Sebenarnya penggunaan ini tidak dibatasi, sesuai dengan keinginan dan kebutuhan anda dalam pemberian jarak.
<!DOCTYPE html>
<html>
<head>
<title>Penulisan HTML Dasar</title>
</head>
<body>
Diketik ini
2 baris, tapi tampil satu baris
Ini adalah paragraf kedua
<p> Ini dipisahkan mengunakan tag </p>
<p> lihat beda kalau dipisahkan. </p>
antar ini dan baris berikutnya pakai br<br/>
ini dan sebelumnya pakai br/ <br/>
<i> pakai tag i </i> <b> pakai tag b </b>
</body>
</html>
Hasil tampilan yang diperoleh seperti gambar di atas. Sekarang bandingkan dengan kode yang diberikan. Perhatikan kode kode yang di warnai. Kita akan bahas satu persatu.
Penulisan Paragraf dalam HTML
Diketik ini2 baris, tapi tampil satu baris
Ini adalah paragraf kedua
Dari kode di atas, meskipun pada teks editor (saya menggunakan notepad) ditulis dalam bentuk dua baris, tapi pada tampilannya masih terlihat satu baris. Ini berarti bentuk spasi, enter ataupun tab (dikenal dengan istilah (white characters) tidak mempengaruhi tampilan halaman html.
Lalu bagaimana cara membuat paragraf dalam html? Pembatas antara 2 paragraf dalam html menggunakan tag <p> dan </p>. Kemudian pada paragraf berikutnya juga dibuar hal serupa. Dengan menggunakan tag tersebut maka akan tampil halaman dengan 2 paragraf. Antara paragraf 1 dan berikutnya akan diberikan jarak. Bentuk penggunaanya ada pada kode yang berwarna kuning di atas. Perhatikan hasil teks tersebut, terlihat bahwasanya ada pembatas antara paragraf 1 dan paragraf 2.
Untuk pemberian baris baru, bisa anda perhatikan kode yang berwarna biru. Antara baris pertama dan baris kedua. Pada penulisannya dibatasi oleh tag </br>. Apabila tanpa tag <br/> maka kode warna biru tersebut kan ditampilkan dalam satu baris.
Tag <p> , dan <br/> terlihat memiliki fungsi yang hampir sama. Namun ada sedikit perbedaanya. Pada tag <p> baris antara 2 paragraf terlihat lebih berjarak dibanding <br/>. Sebenarnya penggunaan ini tidak dibatasi, sesuai dengan keinginan dan kebutuhan anda dalam pemberian jarak.
Penulisan Huruf Miring/Italic dan Huruf Tebal (Bold) dalam HTML
Sekarang untuk penulisan huruf miring dan huruf tebal dalam HTML. Sesama diketahui pada notepad tidak ada opsi untuk membuat huruf miring dan tebal. Jika ingin menampikan sebuah kata/kalimat dengan miring atau tebal bagaimana?
Untuk membuat huruf tebal dan huruf miring pada HTML bisa dilihat pada kode yang diwarnai hijau. Jika menginginkan huruf miring (italic) maka bisa digunakan tag <i> dan ditutup dengan </i>. Format penulisannya adalah <i> isi teks </i>. Selain dengan menggunakan tag i, anda juga bisa menggunakan tag <em> dan ditutup dengan tag </em>.
Jika ingin membuat sebuah teks tebal atau bold maka bisa digunaka tag <b> dan ditutup dengan tag </b>. Format penulisan lengkapnya <b> isi teks </b>. Dalam hal ini tag <b> </b> bisa diganti dengan tag <strong>isi teks </strong>.
Agar memudahkan anda mengingat perhatikan masing masing perintah huruf dalam tanda kurung tersebut. Berikut rahasianya.
- Pada paragraf (<p> , </p>) digunakan perintah p , ini singkatan dari paragraph
- Pada bentuk penulisan baris baru digunakan <br/> (tanpa ada tag pembuka - ingat pengertian self-closing) huruf br adalah singkatan dari break.
- Tampilan huruf miring digunakan tag <i> , </i> i singkatan dari italic
- Tampialn tebal digunakan <b>, </b> ; b singkatan dari bold.
Nah sekian dulu catatan untuk beberapa penulisan dasar HTML mengenai paragraf, huruf miring dan huruf tebal. Dasar ini sangat penting dalam pembentukan tampilan teks pada halaman web nantinya. Seharusnya di ingat dengan baik.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment