Pemrogaman WEB dengan HTML, Tag-tag Dasar HTML, Line Break, Heading, Mengatur Letak Heading, Penggaris Mendatar, Komentar, Tag-tag Dasar HTML, Catatan Tips yang Berguna
Tag-tag Dasar HTML
Tag dasar bearti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas teks informasi.
Judul atau topic utama dokumen disimpan dalam section/ elemen head, disimpan dalam elemen title, dengan tag <title>…</title>. Title ini akan ditampilkan pada bagian caption dari window browser web. Hanya elemen title saja dari elemen head yang ditampilkan di browser, elemen yang lainnya dari head tidak ditampilkan, sebagai elemen yang menjelaskan tentang dokumen HTML yang bersangkutan.
Teks informasi ini akan disimpan dalam section/elemen body – didalam tag <body> dan </body>. Teks disusun dalam paragraph-paragraf – tag <p>. Teks juga mempunyai judul-judul yang menunjukan topic-topik atau bagian-bagian dalam dokumen – judul disebut sebagai heading. Heading di dalam HTML mempunyai level1 sampai dengan 6, dinyatakan dengan tah <h1> s.d. <h6>, demikian juga pasangannya </h1> s.d. </h6>.
HTML: Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskan sebagai tag pertama dalam dokumen HTML.
<html> di awal dokumen </html> di akhir dokumen.
HEAD: Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.
<head> diawal setelah <html>, dan </head> diakhir section head.
Title: Merupakan tag didalam head yang harus dituliskan untuknmemberikan judul atau informasi pada caption browser web tentang topic atau judul dari dokumen web yang ditampilkan dalam browser.
<title> judul dokumen </tittle>
Body: Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan dalam browser harus dituliskan.
<body> di awal, setelah tag </head>
</body> di akhir, diletakkan sebelum tah </html>
Paragraph: informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama disimpam dalam satu paragraph.
Setipa paragraph harus dimulai dengan member tag <p>. diakhir paragraph tidak diharuskan menuliskan tag </p> sebagai akhir paragraph, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap pergantian paragraph harus dimulai dengan <p> kembali.
<!—cobe_minimum.htmlà
<htmk>
<head>
<title>Sebuah contoh HTML sederhana </title>
</head>
<body>
<p>HTML Mudah Dibuat. Selamat di dunia HTML.</p>
</body>
</html>
Contoh coba_minimum.html menunjukkan dokumen HTML sederhana yang hanya mempunyai sebuah informasi dalam sebuah paragraph. Tetapi, yang lebih penting adalah ketentuan minimum dari suatu dokumen HTML, yaitu harus terdiri atas tag <html>, <head>, dan <body>; dengan title didalam section head.
Catatan:
Pada beberapa browser, walaupun tidak menggunakan pola minimum yang mengharuskan adanya tag <html>, kemudian section <head>, dan <body>; browser tersebut masih bisa menempilkan dokumen html.
<!—coba_paragraf.htmlà
<html>
<head>
<title>Contoh penggunaan tag paragraph </title>
</head>
<body>
<p> Ini adalah Paragraf.</p>
<p> Ini adalah paragraph. </p>
<p> Ini adlah paragraph. </p>
<p>Elemen paragraph ditandai dengan menggunakan tag <p>, dan bisa diakhiri dengan tag pasangannya </p>.
</body>
</html>
Pada elemen paragraph, sebaiknya selalu disertakan </p> untuk menandakan penutup paragraph, sebelum memulai paragraph baru.
Pada browser diperlihatkan setiap paragraph akan ditampilkan dengan loncat satu baris. Jika sudah teks yang akan ditampilkan melebihi lebar window, maka secara otomatis teks yang tidak cukup akan ditampilkan pada baris berikutnya.
<!—coba_paragraf2à
<html>
<head>
<title>Contoh tidak menggunakan tag paragraph</title>
</head>
<body>
Ini teks pertama dari paragraph.
Yang ini baris kedua.
Yang ini baris ketiga.
Dan yang ini baris keempat, tapi panjang, supaya bisa dilihat apakah bisa pindah sendiri???
</body>
</html>
Contoh ini memperlihatkan suatu dokumen web yang tidak menggunakan tag paragraph sama sekali. Teks akan ditampilkan berbeda, seolah-olah tidak ada ganti baris, walaupun kita telah pisah-pisah menuliskannya dalam notepad.
Yang menjadi catatan disini adalah jika ingin mendefinisikan paragraph baru, maka kita harus menuliskan secara eskplisit tag <p>-nya. Tidak ada pengaruh kita menuliskan <enter> berapa kali pun kita dalam notepad, karena semuanya akan dianggap satu paragraph dengan sebelumnya. Ukuran window akan menyebabkan hasil yang berbeda-beda. Browser web akan melakukan pemformatan tampilan sesuai dengan ukuran windownya.
Line Break
Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraph. Untuk menampilkan suatu teks ditampilkan pad baris yang baru dalam suatu paragraph, maka harus digunakan tag<br>sebelum teks yang dimaksud tersebut dituliskan.
<!—coba_gantibaris.htmlà
<html>
<head>
<title>Contoh ganti baris</title>
</head>
<body>
<p>
Memotong <br>baris<br> dalam suatu<br> paragraph, <br> gunakan tag br.
</p>
</body>
</html>
Heading
Teks dalam dokumen umumnya mempunyai judul topic, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan
Ada 6 tingkat heading dalam HTML, dinomori dari 1 sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan / keberartian teks tersebut, jika dianggap sangat penting kita bisa menganggap heading 1 – digunakan tag <h1>.
Sintaks elemen heading:
<hy>Teks yang menjadi heading<hy>, dimana y adalah nomor heading
<!—coba_heading.htmlà
<html>
<head>
<title>Contoh heading</title>
</head>
<body>
<h1>Ini heading</h1>
<h2> Ini heading</h2>
<h3>Ini heading</h3>
<h4>Ini heading</h4>
<h5>Ini heading</h5>
<h6>Ini heading</h6>
<p>Gunakan tag heading hanya untuk heading. Jangan gunakan tag ini hanya sekedar membuat suatu teks menjadi lebih besar.</p>
</body>
</html>
Mengatur Letak Heading
Tat heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris – align. Aligment heading:
- Kiri – left
- Tengah – center
- Kanan – right
<!—coba_heading2.htmlà
<html>
<head>
<title>Contoh heading dengan aligment</title>
</head>
<body>
<h1 align=”center”>Heading 1 di tengah</h1>
<p>Heading diatas diposisikan di tengah baris. Heading diatas diposisikan di tengah baris. Heading diatas diposisikan di tengah baris. Heading diatas diposisikan di tengah baris. Heading diatas diposisikan di tengah baris. Heading diatas diposisikan di tengah baris. </p>
<h1 align=”right”>Heading 1 di kanan</h1>
<p> Heading di atas diposisikan di kanan baris. Heading di atas diposisikan di kanan baris. Heading di atas diposisikan di kanan baris. Heading di atas diposisikan di kanan baris. Heading di atas diposisikan di kanan baris. Heading di atas diposisikan di kanan baris.</p>
</body>
</html>
Penggaris Mendatar
Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraph.
Tag <hr> disisipkan pada tempat garis akan disisipkan dalam dokumen.
<!—coba_garis.htmlà
<html>
<head>
<title>Contoh garis mendatar</title>
</head>
<body>
<p>Tag hr digunakan untuk mendefinisikan garis</p>
<hr>
<p>Yang ini paragraph.</p>
<hr>
<p>Yang ini paragraph.</p>
<hr>
<p>Yang ini paragraph.</p>
</body>
</html>
Garis yang disisipkan dapat dalam bentuk penggaris karena lebar garis dapat diatur, ukuran garis dapat dalam bentuk point atau dalam bentuk relative dalam window browser.
Komentar
Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak ditampilkan dalam browser.
Komentar disisipkan dalam section body, diletakkan pada bagian-bagian teks dokumen yang memeang perlu dikomentari. Komentar ini umumnya sebagai untuk menyajikan dokumen pada masa mendatang.
Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Bisa jadi karena belum adanya kepastian dari isi dokumen yang akan dipublikasikan terutama dari aspek legal; perlu ada approval sebelum bisa dipublikasikan.
Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag <!—sebagai awal, kemudian teks yang dikomentari, dan tag à sebagai akhir tag.
Kusus untu tag komentar ini, tag tag penutup tidak menggunakan tanda garis miring sebelunya.
<!—coba_komentarà
<html>
<head>
<title>Contoh penggunaan komentar</title>
</head>
<body>
<!—komentar ini tidak akan ditampilkan à
<p>Ini normal paragraph.</p>
</body>
</html>
Tag-tag Dasar HTML
NN: netscape, IE: Internet Explorer, W3: Web Standard (W3C)
Tag Awal
|
NN
|
IE
|
W3
|
Kegunaan
|
<html>
<body>
<h1> - <h6>
<p>
<br>
<hr>
<!--
|
3.0
3.0
3.0
3.0
3.0
3.0
3.0
|
3.0
3.0
3.0
3.0
3.0
3.0
3.0
|
3.2
3.2
3.2
3.2
3.2
3.2
3.2
|
Definisi sebuah dokumen HTML
Difinisi sebuah body dokumen
Difinisi heading 1 s.d. 6
Definisi sebuah paragraph
Sisipkan line break
Definisi sebuah horizontal rule
Difinisi komentar dalam source code
|
Catatan Tips yang Berguna
Pad saat anda menuliskan teka HTML, anda tidak pernah mendapat kepastian bagaimana teks ditampilkan pada berbagai browser. Beberapa mempunyai display yang besar, beberapa lagi kecil. Teks akan diformat ulang setiap saat pemakai melakukan resize window. Jangan mencoba memformat teks dalam editor dengan menambahkan baris dan spasi kosong ke dalam teks.
Menggunakan tag <p> untuk menyisipkan baris kosong merupakan kebiasaan buruk. Gunakan tag <br> sebagai gantinya, tapi jangan gunakan <br> untuk membuat list. Jangan lupa untuk memberikan </p> pada setiap paragraph.
HTML otomotis menambahkan baris kosong sebelum atau sesudah beberapa elemen, seperti sebelum dan sesudah paragraph.
