Cara membuat website sederhana (bagian 2)
Tag Text Preformat
Jarak antar kata atau kalimat pada dokumen HTML yang ditampikan oleh browser adalah satu spasi. Untuk membuat browser menampilkan text dengan apa adanya, sesuai degan yang kita tulis pada dokumen html maka gunakanlah tag pre yang merupakan tag berpasangan <pre>....</pre>. Contoh:<html>Tulis script diatas pada editor text notepad lalu simpan dengan ekstensi “.html”, untuk nama bebas silahkan tentukan sendiri. Jika sudah, jalankan file html.a dan hasilnya akan seperti gambar ini
<body>
<pre>
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum Dolor Sit Amet
Lorem Ipsum
Dolor Sit Amet
</pre>
</body>
</html>
Hasil yang tertampil pada halaman browser akan sama persis dengan apa yang dituliskan, posisi dan jarak spasi tidak mengalami perubahan, sama dengan apa yang di tuliskan pada scriptnya. Kamu bisa mengujinya sendiri untuk membandingkan jika memakai tag preformat dan tidak memakai tag preformat. Silahkan bereksperimen.
Tag Address
Pada kebanyakan pengguna website, pasti menginformasikan alamat dari pemilik website untuk memudahkan pengunjung website berinteraksi. Untuk memenuhi kebutuhan tersebut, pada dokumen html disediakan juga tag <address>...</address> agar penulisan alamat dapat distandarkan. Penggunaan tag ini akan memberikan penekanan pada text yang menginformasikan kepada mesin perambah bahwa text yang diapit oleh tag address merupakan text yang berisi informasi mengenai alamat. Agar terlihat rapi maka disetiap baris dari alamat dipisahkan oleh tag “<br>” (enter). Contoh penggunaan tag address:<html>Tulis script diatas pada notepad, simpan dengan ekstensi “.html”, jalankan filenya dan hasilnya akan seperti gambar berikut ini.
<body>
<address>
ditulis oleh eao team</a>.<br>
Kunjungi kami di:<br>
dIgnet.com<br>
jl jalan, No.564, Jakarta<br>
INA
</address>
</body>
</html>
Tag Paragraf & Kutipan
Untuk memulai penulisan sebaiknya diberikan tag paragraf <p>…</p>, Salah satu atribut dalam tag <p> adalah align yang memiliki value sebagai berikut: Left, Right, Center dan Justify. Sedangkan untuk kalimat kutipan digunakan tag <blockquote>….</blockquote>. Dengan penulisan tag <blockqoute>, nantinya akan membuat text sebagai kutipan akan diblock sendiri pada paragraf berikutnya. Contoh penggunaannya adalah:<html>Tulis script diatas pada text editor notepad, simpan dengan ekstensi “.html”, nama file bebas, jalankan file tersebut dan hasilnya akan seperti ini
<body>
<h1>Tentang Kami</h1>
<p align="center">Moto perusahaan kami adalah:</p>
<blockquote >
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</blockquote>
</body>
</html>
Text yang diapit tag blockquote, akan membuat paragraf sendiri. text “moto perusahaan kami adalah” bisa berada ditengah karena penggunaan tag paragraf dengan tambahan atribut align dan value-nya center, sehingga tulisan berada ditengah. Untuk text yang besar sendiri, digunakan tag heading, saya harap kamu tidak bingung karena tag heading sudah dibahas pada penulisan sebelumnya.
Untuk menampilkan kode-kode tertentu atau karakter-karakter simbol pada tulisan, bisa menambahkan kode-kode berikut ini:
" " / " tanda kutipUntuk bisa menampilkan tanda kutip, tanda lebih besar dari, sum dan yang lainnya bisa dengan menambahkan salah satu script diatas.
' ' / ' tanda apostrof
< < / < kurang dari
> > / > lebih dari
∑ ∑ / ∑ sum
√ √ / √ square root
∫ ∫ / ∫ integral
≠ ≠ / ≠ not equal
≤ ≤ / ≤ less or equal
≥ ≥ / ≥ greater or equal
Tag Singkatan atau Akronim
Pada dokumen HTML singkatan dapat diberikan penjelasan kepanjangannya secara tersembunyi yang akan ditampilkan bila kursor mouse berada di atas tulisan singkatan tersebut. Tag yang digunakan untuk keterangan singkatan tersebut adalah <abbr> dan <acronym> dimana atribut title memiliki value keterangan dari singkatan tersebut. Contoh:<html>Tulis Script diatas pada notepad, simpan dengan nama bebas tapi ekstensinya “.html”, jalankan file tersebut dan hasilnya akan seperti ini:
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>
Hasilnya ketika kursor mouse menyentuh tulisan “WHO” maka akan muncul kepanjangan dari singkatan tersebut. Tag abbr yang digunakan bisa juga diganti dengan tag <acronym>…</acronym>. Keduanya memiliki fungsi yang sama. Kamu bisa mencoba merubahnya sendiri, selamat bereksperimen.Tag membuat daftar atau list
Untuk membuat list pada dokumen HTML dapat digunakan beberapa list yaitu, list tanpa nomor,list dengan nomor dan list definisi. Berikut ini script yang digunakan untuk membuat daftar sekaligus contohnya.Daftar bernomor menggunakan <ol>…</ol>, dan tanpa nomor <ul>…</ul>:
<html>
<body>
<p>Daftar minuman:</p>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
<p>Daftar makanan:</p>Daftar dengan definisi:
<ul>
<li>Gado-gado</li>
<li>Soto</li>
<li>Mie ayam</li>
</ul>
</body>
</html>
Untuk membuat daftar definisi digunakan tag awal <dl>, sedangkan kata yang akan didefinisikan diapit oleh tag berpasangan <dt>....</dt>. Untuk kalimat yang mendefinisikannya diapit oleh tag <dd>...</dd>. Bila kalimat dan definisinya telah dibuat jangan lupa untu menutupnya dengan tag <dl>. Contoh:
<html>Silahkan kalian coba praktekan sendiri script diatas, dan lihat perbedaan yang ditampilkan. Selamat mencoba.
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Pada prakteknya, tag untuk membuat daftar ini juga bisa digunakan dalam membuat tampilan drop down menu, atau yang sering kita lihat ketika kursor diarahkan pada suatu menu pada halaman web, maka akan muncul sub-sub menu dibawahnya yang bisa dipilih. Untuk membuat drop down menu, nanti bisa dipraktekan pada akhir sesi pembahasan ini. Terimakasih, semoga bermanfaat.
Belajar Membuat Website Bagian 1
Tidak ada komentar:
Posting Komentar