Membuat tentang garis datar (Horizontal Rule)


Kali ini kita akan membahas tentang garis datar (Horizontal Rule) yang akan sering anda gunakan.
<BODY>
<HR>
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif




Ada beberapa pilihan yang bisa kita ambil....
<BODY>
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif














Yang ini saya rasa tidak perlu dijelaskan lagi.
<BODY>
<HR WIDTH=60% ALIGN="left">
<HR WIDTH=60% ALIGN="right">
<HR WIDTH=60% ALIGN="center">
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif








Kita bisa menentukan ukuran garisnya....
<BODY>
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif










Bisa juga kita membuatnya menjadi garis yang tebal.
<BODY>
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif










Masih ingat yang saya katakan bahwa browser tidak mengenal pemformatan; hanya menampilkan teks sebagai susunan karakter yang berurutan? Semacam ini misalnya....
<BODY>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      Tegakkan UUD '45   |
     |           dan           |
     |        Pancasila        |
     +-----------------oOO-----+
               |__|__| 
                || ||
               ooO Ooo
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif
///\\___ (@ @) +----oOO----(_)-----------+ | Tegakkan UUD '45 | | dan | | Pancasila | +-----------------oOO-----+ |__|__| || || ooO Ooo


Dengan menggunakan tag <PRE> (preformat), kita dapat mengatur supaya tampilan yang muncul sesuai dengan apa yang kita tuliskan.
<BODY>
<PRE>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      Tegakkan UUD '45   |
     |           dan           |
     |        Pancasila        |
     +-----------------oOO-----+
               |__|__| 
                || ||
               ooO Ooo
</PRE>
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      Tegakkan UUD '45   |
     |           dan           |
     |        Pancasila        |
     +-----------------oOO-----+
               |__|__| 
                || ||
               ooO Ooo
Perhatikan pemakaian font monospaced.


Tag terakhir yang akan kita bahas adalah catatan atau komentar.
<BODY>
<!--Ini adalah catatan atau komentar-->
Yang ini bukan.
<P>Catatan atau komentar bisa kita tempatkan di manapun dalam dokumen dan
browser akan mengabaikan semua yang ada di dalam tanda kurung. Anda bisa
menyisipkan pesan, <!--Halo, yang!--> catatan untuk diri anda sendiri,
<!--Jangan lupa nelpon--> atau menuliskan pesan yang bermanfaat untuk orang yang
membuka source (HTML) anda. <!--Jangan mengcopy apapun dari halaman ini!-->
</BODY>
http://gratis45.com/caramembuatwebsite/web/pics/netbar.gif
Yang ini bukan.
Catatan atau komentar bisa kita tempatkan di manapun dalam dokumen dan browser akan mengabaikan semua yang ada di dalam tanda kurung. Anda bisa menyisipkan pesan, catatan untuk diri anda sendiri, atau menuliskan pesan yang bermanfaat untuk orang yang membuka source (HTML) anda.
Untuk lebih memperjelas lagi, catatan atau komentar harus dimulai dengan <!-- dan diakhiri dengan -->
Bahkan anda (biasanya) bisa menuliskan tag html lain di dalamnya dan semuanya akan diabaikan. Browser akan mengabaikan apapun sampai menemukan
-->


Yah.... itulah semuanya! Sekarang anda sudah tahu tag-tag dasar yang anda perlukan untuk membuat web page. Masih adakah tag yang lain? O ya! Masih banyak lagi. Tetapi yakinlah bahwa anda sudah memiliki cukup banyak peralatan dasar yang anda perlukan. Sesudah anda merasa cukup bermain-main dengan tag-tag utama tersebut, mungkin anda ingin melihat beberapa tutorial yang sedikit lebih rumit: Membuat Tabel, Membuat Form dan Membuat Frame. Tutorial ini akan mengajarkan beberapa hal menarik yang perlu anda ketahui untuk melengkapi kemampuan anda dalam web publishing. Di luar itu, hanya tersisa sedikit tag lagi. Tag yang secara teoritis memiliki fungsi khusus, tetapi dalam praktek perannya sama dengan tag-tag umum yang disajikan di sini. Ada tag yang sudah jarang digunakan, dan beberapa lagi yang pemakaiannya sangat terbatas sehingga kurang perlu untuk diperhatikan. Selain itu ada juga beberapa browser-specific tags (tag yang berfungsi pada satu browser saja).
Beberapa waktu lalu muncul kecenderungan untuk memisahkan perintah-perintah yang berkaitan dengan struktur halaman (paragraf, list, tabel dsb.) dan yang berhubungan dengan tampilan (warna, font dsb.). Hasilnya, antara lain, adalah diperkenalkannya konsep style sheets. Meskipun pemahaman tentang style sheets bukan hal yang mutlak untuk membuat web page, barangkali suatu saat anda punya keinginan untuk mempelajarinya sebagai pelengkap kemampuan anda.

2 komentar:

  1. Thank's infonya gan. klo nagtur jarak antar garis gmana yaa?

    BalasHapus
  2. Bagaimana Gan kalo kita mau buat kotak persegi panjang dan atau empat... Trus bikin garis vertikal yang bisa berdiri tegak dan tingginya bisa diatur ukurannya thanks y gan

    BalasHapus