Belajar HTML bagian 3

Elemen - elemen HTML

Dokomen HTML terdiri dari File Text yang dibuat dengan berbagai elemen (unsur/dasar) HTML. Elemen-elemen HTML didefenisikan dengan menggunakan berbagai Tag.

1. Tag-tag HTML

Tag HTML digunakan untuk memberikan tanda pada elemen HTML.
Tag HTML diapit oleh tanda dengan duabuah karakter < and >
Diantara dua karakter yang diapit disebut sebagai “angle brackets”
Biasanya Tag HTML terdiri dari sepasang tanda seperti <b> dan </b>
Tag yang pertama dari pasangan tersebut adalah “start tag”, dan yang kedua adalah “end tag”.
Tulisan (text) diantara start dan end tags adalah “element content”.
Tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya sama dengan <B>.

2. Mengapa kita menggunakan tag dengan huruf kecil ?

Diatas kita menyebutkan tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya sama dengan <B>. Bila Anda mengamati Web, Anda akan memberikan catatan bahwa kebanyakan contoh menggunakan tag dengan huruf besar. Kita selalu menggunakan huruf kecil, mengapa ?. Bila kita mempersiapkan diri untuk generasi HTML yang berikutnya, maka kita harus membiasakan diri dengan menggunakan tag dengan huruf kecil. World Wide Web Consortium (W3C) merekomendasikan huruf kecil untuk HTML4 dan juga untuk XHTML (generasi berikutnya dari HTML).

3. Atribut-atribut (lambang)

TagTag dapat memiliki atribut. Atribut dapat memberikan informasi tambahan tentang elemen HTML pada page. Tag ini mendefenisikan elemen body dari page HTML : <body>. Dengan menambahkan sebuah atribut bgcolor, Anda dapat memberitahukan browser, bahwa warna latar belakang (background color) dari page akan diubah menjadi merah seperti : <body bgcolor="red">.

Tag ini mendefenisikan sebuah tabel HTML : <table>. Dengan menambahkan sebuah atribut border (batas), Anda dapat memberitahukan Browser, bahwa tabel dibuat tanpa garis pembatas: <table border=”0”> Atribut selalu dibuat dalam bentuk pasangan seperti ini : name=”value”. Atribut selalu ditambahkan pada bagian start tag dalam sebuah elemen HTML.

4.Bentuk tanda kutip “red” atau ‘red’

Nilai atribut selalu diapit oleh dua tanda kutip. Biasanya digunakan tanda kutip ganda ( “ ) tetapi yang single ( ‘ ) pun dapat digunakan. Pada beberapa kondisi tertentu (janggal), seperti bila nilainya sendiri memiliki tanda kutip, biasanya kita gunakan tanda kutip tunggal, seperti contoh dibawah ini :Name=’Binsar “bermarga” Siagian’

5.Dasar – dasar Tag HTML

Bagian terpenting dari tag HTML adalah tag yang mendefenisikan Headings, paragraphs dan line breaks. Cara yang terbaik untuk belajar HTML adalah dengan cara mencoba contoh-contah. Saya sudah mempersiapkan beberapa contoh yang dapat Anda coba seperti cara-cara yang telah dijelaskan pada halaman sebelumnya. Contoh programnya sudah tersedia disini. Dengan adanya contoh- contoh ini maka diharapkan Anda dapat bekerja dan mencoba lebih praktis dan cepat. Bila diperlukan untuk menyimpan ke Hardisk, gunakan teknik Copy dan pastekan ke Notepad kemudian simpan pada folder kerja Anda dengan nama file sesuai dengan contoh, jangan lupa ! extension file adalah xxxxxx.html

6. Lakukan percobaan untuk contoh-contoh berikut :

Contoh ini adalah sebuah dokumen HTML yang sangat sederhana, dengan jumlah tag yang minimal. Contoh ini mendemonstrasikan, bagaimana sebuah text yang diapit oleh elemen <body> ditampilkan pada browser.

Contoh: 2

<html>

<body>

Tulisan yang diapit oleh elemen body ditampilkan pada browser.

</body>

<html>

7. Pragraph

Contoh ini adalah sebuah dokumen HTML yang mendemonstrasikan, bagaimana tampilan sebuah tulisan yang diapit oleh elemen prograph <p> </p>. HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah heading.

Contoh: 3

<html>

<body>
<p>Ini sebuah paragraph baris 1.</p>

     <p>Ini sebuah paragraph baris 2.</p>
     <p>Ini sebuah paragraph baris 3.</p>
     <p>Elemen-elemen Paragraph didefenisikan dengan tag p.</p>
</body>

<html>

8. Headings

Heading didefenisikan dengan tag <h1> sampai <h6>. <h1> mendefenisikan heading yang terbesar, dan <h6> mendefenisikan heading yang terkecil. HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah heading.

Contoh: 4

<html>
<body>

<h2> Ini contoh dari sebuah heading 1</h1>
<h2> Ini contoh dari sebuah heading 2</h2>
<h3> Ini contoh dari sebuah heading 3</h3>
<h4> Ini contoh dari sebuah heading 4</h4>
<h5> Ini contoh dari sebuah heading 5</h5>
<h6> Ini contoh dari sebuah heading 6</h6>

</body>
</html>

9. Line Break

Tag <br> akan digunakan apabila diperlukan mangakhiri baris, seperti layaknya menekan tombol Enter, tetapi bukan sebuah paragrap yang baru. Tag <br> akan memutus baris bila Anda tempatkan dimana saja diantara text.
Contoh:

<p>Ini <br> sebuah contoh para<br>grap menggunakan break</p>

Contoh: 5

<html>
<body>

<p>Untuk memotong <br>baris<br>dalam sebuah<br>pragraph<br>gunakan tag br.</p>

</body>
</html>

10. Komentar atau Catatan dalam HTML

Tag komentar digunakan untuk memasukkan catatan-catatan programmer pada source code HTML. Sebuah komentar tidak akan diproses oleh browser. Anda dapat menggunakan catatan untuk menjelaskan arti dari sekelompok program, yang dapat membantu Anda untuk memahami seluruh isinya bila dikemudian hari diperlukan perbaikan atau pengembangan.
Contoh:

11. Tips yang sangat berguna !

Bila Anda menulis text HTML, Anda tidak akan tahu persis bagaimana hasilnya bila ditampilkan dengan browser lain. Karena ada orang yang memiliki display yang besar, dan ada juga yang kecil. Apabila dilakukan pengubahan ukuran Window maka saat itu juga akan dilakukan format ulang tampilan. Jangan melakukan pengaturan pada layar komputer Anda dengan menambahkan baris kosong atau spasi dalam text.

HTML akan memotong spasi yang ada dalam text Anda. Banyak spasi diatara kata dianggab menjadi satu spasi kosong dan dalam satu baris kosong yang memiliki banyak spasi dianggab hanya satu spasi kosong.

Menggunakan pragraph kosong dengan tag <p></p> untuk menyisipkan baris kosong adalah cara yang kurang baik. Lebih baik Anda menggunakan tag <br>. (Tetapi jangan menggunakan tag <br> untuk membuat daftar atau list, tunggu sampai Anda belajar tentang list pada HTML.)

Mungkin sekarang Anda akan mempunyai catatan bahwa pragraph dapat ditulis tanpa menutup tag </p>. Jangan mempercayai hal itu. Versi berikutnya dari HTML tidak akan mengijinkan Anda melompati atau mengabaikan tag penutup.
HTML akan secara otomatis menambahkan baris kosong sebelum dan sesudah elemen, seperti sebelum dan sesudah pragraph, dan sebelum dan sesudah sebuah heading.

Kita menggunakan penggaris (rule) horizontal ( tag <hr>), untuk memisahkan section pada latihan kita.

Catatan:

Contoh-contoh dibawah ini tidak ditampilkan Source HTML nya pada halaman ini, tetapi dapat Anda lihat secara lengkap saat melakukan ujicoba dengan menekan tombol Contoh.

12. Membuat posisi center untuk heading

Contoh ini mendemonstrasikan cara menempatkan Heading di posisi Center.

13. Horizontal Rule

Contoh ini mendemonstrasikan cara menempatkan garis horizontal diantara baris text.

14. Catatan atau Hidden Comment

Contoh ini mendemonstrasikan cara menempatkan catatan dalam Source code HTML.

15. Warna latar belakang (background)

Contoh ini mendemonstrasikan cara menempatkan catatan dalam Source code HTML.

Ini contoh dari sebuah heading 1

Ini contoh dari sebuah heading 2

Ini contoh dari sebuah heading 3

Ini contoh dari sebuah heading 4

Ini contoh dari sebuah heading 5

Ini contoh dari sebuah heading 6

Ini Heading 1

Lihat ! Warna Background!