Sekarang kita lanjutkan belajar tentang html, setelah sebelumnya saya menjelaskan untuk anda pemula/newbe tentang Struktur Dasar HTML.
Pada saat ini sebenarnya baik blogspot maupun wordpress telah menyediakan menu instan untuk melakukan format baik font maupun paragraph dan sebagainya , tetapi biasanya dalam ukuran dan jenis terbatas. Jika kita ingin melakukan kreasi dan lebih memahami tampilan web maka sebaiknya anda juga belajar format-format html tersebut.
Kali ini saya akan menguraikan tentang heading dan paragraph
Heading
Dalam penulisan html ada yang disebut tag Heading yaitu <h1></h1>, <h2></h2> dan seterusnya. Tag heading digunakan untuk judul ,bab, sub-sub bab dan lainnya. Untuk judul yang paling atas bisasnya menggunakan tag <h1></h1>. Jika ada judul bab di bawahnya menggunakan <h2></h2>. Heading mulai dari <h1></h1> sampai dengan <h6></h6> dengan tampilan <h1> ukuran font paling besar dan <h6> ukuran font yang paling kecil.
Untuk membuktikannya silakan copy script berikut pada Notepad , kemudian simpan dengan nama heading.html setelah itu cobalah file tadi dibuka.
<html><head><title>Heading</title></head><body><h1>Judul dengan Tag h1</h1><h2>Bab dengan Tag h2</h2><h3>Sub Bab dengan tag h3</h3><h4>Sub sub bab dengan tag h4</h4></body></html>
Nah jika penulisnnya benar setelah dibuka akan tampil sebagai berikut :
Paragraph
Perpindahan baris/paragraph
Dalam penulisan html suatu paragraph atau kalimat tidak akan berpindah baris kalau tidak diberi tag break (br>. Meskipun ketika mengetik di Notepad sudah dienter tetapi nanti tampilannya akan terus menyambung.
Untuk memindahkan kalimat atau paragraph ke baris berikutnya menggunakan tag break <br>. Tag ini tanpa penutup. Jadi setelah menulis kalimat tertentu isikan tag <br> kemudian ketik lagi teks berikutnya, maka nanti akan tampil di bawah tek sebelumnya.
Untuk memperjelas mari kita coba, buat script berikut pada Notepad dan simpan dengan nama paragraph.html
<html><head><title>Paragraph</title></head><body>Kali ini saya akan mencoba untuk menulis paragrah pertamaDan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atasSedangkan ini adalah kalimat penutup</body></html>
Setelah disimpan, silakan dibuka dan lihat hasilnya.
Nampak bahwa semua kalimat menjadi satu.
Sekarang kita coba perbaiki scripnya dengan menambahkan tag <br> , copy script berikut pada Notepad paragraph.html.
<html><head><title>Paragraph</title></head><body>Kali ini saya akan mencoba untuk menulis paragrah pertama<br>Dan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atas<br>Sedangkan ini adalah kalimat penutup</body></html>
Simpan file dan pada brwoser buka kembali atau refresh , maka akan tampil adanya paragraph.
Disini hasilnya nampak bahwa kalimat ke dua berada di bawah kalimat pertama demikian juga kalimat ketiga berada di bawah kalimat kedua.
Perataan/Alignment
Tag ini berfungsi untuk mengatur tampilan perataan teks. Untuk pengaturan ini maka harus diberikan tag paragraph <p>...</p>. Jadi aturan perataan ini hanya berlaku untuk kalimat yang ada diantara kedua tag tersebut. Tag perataan diletakkan dalam tag paragraph tersebut
Ada empat jenis perataan dengan tag-nya masing-masing sebagai berikut :
Perataan/Alignment
Tag ini berfungsi untuk mengatur tampilan perataan teks. Untuk pengaturan ini maka harus diberikan tag paragraph <p>...</p>. Jadi aturan perataan ini hanya berlaku untuk kalimat yang ada diantara kedua tag tersebut. Tag perataan diletakkan dalam tag paragraph tersebut
Ada empat jenis perataan dengan tag-nya masing-masing sebagai berikut :
- Rata kiri dengan tag < p align="left">...</p>
- Rata kanan dengan tag < p align="right">...</p>
- Rata tengah dengan tag < p align="center">...</p>
- Rata kiri-kanan dengan tag < p align="justify">...</p>
Ketentuan tag adalah teks yang berwarna biru.
Sekarang kita coba untuk memberikan perataan script di atas, sehingga menjadi
Sekarang kita coba untuk memberikan perataan script di atas, sehingga menjadi
<html><head><title>Paragraph</title></head><body><p align="center">Kali ini saya akan mencoba untuk menulis paragrah pertama<br>Dan yang ini adalah paragraph kedua dengan harapan bisa berbeda baris dengan paragraph di atas<br>Sedangkan ini adalah kalimat penutup</p></body></html>
Setelah script Notepad diubah, simpan kembali dan halaman browser coba di refresh. Lihat hasilnya akan menjadi :
Sekarang silakan mencoba tag perataan yang lainnya.
Demikian dulu untuk heading dan paragraph. Semoga anda bisa lebih berkreasi setelah memahami tag heading dan paragraph ini.
Berikutnya mari kita belajar tentang Format Font
0 comments:
Post a Comment