Bahasa HTML bisa terdiri atas gambar, audio,teks video, dan lain-lain. Jadi HTML punya beragam sintaks penting yang sudah dibuat standarnya oleh W3C. Pada artikel ini kita akan kembali membahas beberapa sintaks penting HTML dan cara penggunaannya. Materinya sesuai dengan yang saya janjikan kemarin, porsinya sesuai dengan yang Anda butuhkan sebelum membuat theme sendiri. Mari kita mulai..
Pendahuluan
Perintah di HTML disebut juga dengan tag. Aturan tag standar HTML yang harus ada sudah pernah dibahas. Cara penulisannya tidak bersifat case sensitive. Jadi penulisan tag<HTML>akan dianggap sama dengan<html>oleh browser.
Struktur HTML
3 bagian utama HTML adalah HTML, HEAD, dan BODY. Urutannya sebagai berikut.
HTML:
4. </head>
6. </html>
Tag<html>harus ada dibagian awal lalu diakhiri dengan</html>.
Tag<head></head>mengapit tag<title></title>yang fungsinya menampilkan judul halaman pada browser. Tag META juga ada dibagian HEAD. Fungsi dan cara penggunaan tag META juga dibahas diartikel ini.
Tag<body></body>berfungsi untuk menampilkan semua elemen isi dari halaman web seperti teks, link, gambar, dll.
Tag Standar HTML
Meta. Tag META berguna untuk menampilkan informasi mengenai suatu dokumen HTML. Biasanya untuk memuat informasi mengenai author,keyword, dan lainnya.
Cara penulisannya sebagai berikut:
<META name="ATTRIBUTE" content="value">.
Misal untuk memberikan informasi tentang author, cara penulisannya tagnya sebagai berikut:
<META name=”Author” contents=”Yoki DHINATA”>.
Contoh atribut META tag lainnya yang bisa Anda gunakan bisa dilihat pada source code halaman ini.
Heading (H1 - H6). Berfungsi untuk membuat judul halaman dengan batas antara H1 - H6. Masing-masing tag memiliki ukuran yang berbeda, dari tingkat paling besar hingga lebih kecil. Cara penulisannya sebagai berikut:<h1>Contoh tag H1</h1>.
Paragraf (<p></p>). Fungsinya untuk membuat paragraf, sehingga akan secara otomatis memberikan jarak vertikal antara bagian atas dan bawahnya. Cara penulisannya sebagai berikut:<p>Contoh tag paragraf</p>.
Break (<br />). Fungsinya sama dengan tombol Enter pada keyboard yaitu membuat jarak kebawah 1 baris. Cara penggunaannya sangat mudah seperti ini:
Ini adalah kalimat pertama.<br />Ini adalah kalimat kedua.
Jika dilhat dengan browser, maka letak kalimat kedua akan turun 1 baris berada dibawah kalimat pertama seperti ini:
Ini adalah kalimat pertama.
Ini adalah kalimat kedua.
Horizontal Rules(<hr />). Berfungsi untuk membuat garis horizontal pada halaman. Cukup dengan meletakkan tag<hr />maka 1 garis horizontal sudah muncul, jadi
gunakan saja sebagai pemisah antara bagian halaman.
Besok kita akan melanjutkan lagi dengan pokok bahasan format font, link, dan gambar.
Jangan sampai terlewat ya!
Artikel sebelumnya kita telah membahas cara penulisan tag HTML, struktur HTML, dan beberapa tag standar HTML serta cara penggunaannya. Artikel ini masih kelanjutan artikel tersebut. Materi yang dibahas adalah berbagai format HTML untuk teks, link, serta gambar. Seperti biasa, tanpa banyak basa-basi lagi.. mari kita mulai.. Berbagai Format Text
| Tag | Keterangan |
| <b> ... </b> | Cetak tebal |
| <i> ... </i> | Cetak miring |
| <u> ... </u> | Garis bawah |
| <strike> ... </strike> | Garis tengah
|
| <center> ... </center> | Rata tengah |
| <big> ... </big> | Ukuran text menjadi lebih besar |
| <small> ... </small> | Ukuran text menjadi lebih kecil |
| <sup> ... </sup> | Membuat efek Superscript |
| <sub> ... </sub> | Membuat efek Subscript |
| <blockquote> ... </blockquote> | Membuat indentasi paragraf |
Semua tag diatas harus diletakkan diantara tag<body> ... </body>.
Membuat Link
Hyperlink yang sering juga disingkat menjadi link menggunakan anchor tag<a>untuk menentukan hyperlink dalam dokumen HTML. Cara penulisannya seperti berikut.
HTML:
1. <a href="URL tujuan" target="target"> Tulisan/Gambar </a> URL tujuan harus ditulis lengkap beserta protokol yang digunakan.
Misalhttp://www.dhinata.com/.
Target menentukan apakah sebuah halaman web tujuan perlu dibuka dalam browser baru atau tidak. Jika ingin membuka link tanpa harus menutup halaman yang sedang dibuka, maka target yang harus digunakan adalah_blank. Sebagai contoh jika ingin membuat link untuk dhinata.com dengan menggunakan target blank, skripnya sebagai berikut.
HTML:
1. <a href="http://www.dhinata.com" target="_blank"> Tulisan/Gambar</a> Menampilkan Gambar
Cukup dengan 1 baris skrip saja sudah bisa menampilkan gambar. Cara penulisannya adalah sebagai berikut.
HTML:
1. <img src="URL gambar"/> Ukuran gambar seperti tinggi dan lebar bisa diatur sesuai dengan keinginan. Cukup dengan menambahkan propertiwidth="value"danheight="value". Misalnya jika ada sebuah gambar Jpeg berukuran 800x600 pixel yang ingin ditampilkan dengan ukuran 200x150 pixel, penulisan tag-nya seperti ini.
HTML:
1. <img src="namagambar.jpg" width="200" height="150"/> Sebenarnya masih banyak lagi tag HTML dan properti yang belum dibahas dalam artikel ini dan kemarin. Tujuannya supaya perlahan-lahan Anda lebih dapat memahami ketimbang lebih banyak materi malah jadi bingung. Bagi yang merasa masih kurang, silahkan download ebook berikut ini yang menurut saya pribadi sudah lengkap kok materinya. Malah ada bahasan tentang CSS lagi..
Besok kita akan bahas CSS sesuai dengan kebutuhan aja.. selamat belajar
Refrensi dari :
http://dhinata.com/belajar-html-lebih-lanjut-bagian-1.html
http://dhinata.com/belajar-html-lebih-lanjut-bagian-2.html
