0 Members and 1 Guest are viewing this topic.
HTML merupakan akronim dari HyperText Markup Language. Dokumen HTML adalah file teks murni yang berisi informasi dan dapat dibuat dengan editor sembarang, yang kemudian dikenal sebagai webpage karena ditampilkan dalam browser web surfer. Ada dua cara untuk melakukan editing sebuah dokumen HTML, yakni menggunakan HTML editor seperti Microsoft Frontpage ataupun Macromedia Dreamweaver.Namun begitu, Notepad adalah HTML editor yang paling 'senior' di antara semua yang telah saya sebutkan di atas.Dokumen HTML sendiri tersusun atas elemen-elemen atau komponen dasar pembentuknya. Karena banyaknya elemen atau komponen dasar ini, maka ditandai dengan sebuah tag. Berikut beberapa catatan soal petunjuk tag html ini :1. Terdiri atas sebuah kurung sudut kiri/tanda lebih kecil (<), sebuah nama tag, dan sebuah kurung sudut kanan/tanda lebih besar (>)2. Tag HTML secara normal selalu berpasangan seperti <b> diawal dan </b> di akhir.3. Tag yang pertama berarti awal suatu elemen, dan yang kedua atau yang menjadi pasangan berarti akhir suatu elemen dan selalu diawali dengan garis miring (/).4. Nama elemen ditunjukkan dengan nama tagnya. Misal b, yang berarti elemen tersebut memiliki karakter bold atau tebal. Tag awal dan akhir harus memiliki nama yang sama. Jika nama tag awal adalah b, maka nama pada tag akhirnya juga harus b dengan disertai garis miring.Walaupun begitu, ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, di antaranya adalah : * ganti baris - line break dengan tag <br>, dan * garis datar - horizontal rule dengan tag <hr>Kemudian, beberapa hal yang harus anda perhatikan disini adalah :1. Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh saling bersilangan, tapi harus berurut. Misalnya:Code: [Select]<b><I>Huruf Tebal dan Miring</I></b>.2. Tag html tidak "case sensitive". Sehingga <b> sama dengan <B>.3. Walaupun tag html tidak "case sensitive", saya sarankan semua penulisan tag anda menggunakan huruf kecil saja; <b> dan bukan <B> contohnya.Memang, kebanyakan web masih menggunakan tag HTML dengan huruf besar, tapi hal ini untuk mengantisipasi perkembangan standar HTML pada generasi selanjutnya. Karena mulai HTML versi 4.0 dan XHTML, W3C atau badan resmi yang membuat standarisasi web di dunia, merekomendasikan penggunaan tag dengan huruf kecil. Setidaknya hal ini akan sedikit memperkecil ukuran webpage anda.Sumber: Berkenalan dengan Tag
<b><I>Huruf Tebal dan Miring</I></b>.
Tag dasar berarti elemen dasar. Pada dasarnya, dokumen HTML terdiri atas teks informasi yang ingin anda sampaikan pada pengunjung situs. Seperti yang kita ketahui pada tutorial sebelumnya, bahwa HTML terdiri atas elemen tag sebagai penyusunnya. Untuk dapat membangun sebuah dokumen HTML, maka diperlukan susunan tag minimum atau sekurang-kurangnya, dokumen HTML harus terdiri atas susunan tag :1. HTMLMerupakan tag dasar yang mendefinisikan bahwa ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrograman untuk menuliskannya sebagai tag pertama dalam dokumen HTML.Cara penulisan :Code: [Select]<html> di bagian paling awal dokumen dan </html> di akhirnya.2. HEADMerupakan bagian untuk menuliskan keterangan tentang dokumen yang akan ditampilkan. Salah satunya adalah judul/topik utama suatu dokumen.Cara penulisan :Code: [Select]<head> ditaruh tepat setelah </html>, dan</head> di akhir dokumen head yang hendak ditampilkan.3. TITLETag penjelas judul atau topik utama suatu dokumen yang akan ditunjukkan pada caption browser web. Dituliskan pada bagian/section HEAD.Cara penulisan :Code: [Select]<title> Judul Dokumen </title>4. BODYMerupakan bagian utama dalam dokumen web. Pada bagian ini semua isi dokumen yang akan ditampilkan di dalam browser, harus dituliskan disini.Cara penulisan :Code: [Select]<body> di awal tepat setelah </head>.Dan </body> di akhir, tepat sebelum </html>Itulah tag/elemen dasar yang minimum harus ada dalam suatu dokumen HTML. Akan tetapi, pada beberapa browser, walaupun tidak menggunakan pola minimum seperti ini, browser tersebut masih bisa menampilkan dokumen html. Dan saya sangat tidak menganjurkan hal tersebut. Berikut contoh lengkap penulisan ketentuan minimum yang harus ada pada suatu dokumen web :Code: [Select]<!--contoh_tag.html--><html><head><title>Contoh Tag Minimun Sebuah HTML</title></head><body>Ini adalah suatu demonstrasi contoh penggunaan tag minimun yang harus ada pada sebuah dokumen HTML. Mudah sekali bukan? Selamat datang di dunia HTML. Bravo...!!!</body></html>INGAT!Jika anda mengedit dalam sebuah editor seperti Ms. Frontpage/Macromedia Dreamweaver, maka formula tersebut harus dituliskan dalam ruang dan hasilnya dapat di lihat di Pada tutorial selanjutnya, saya akan menjelaskan beberapa tag yang biasa dipergunakan dalam sebuah dokumen HTML.Sumber: Tag-tag Dasar HTML
<html> di bagian paling awal dokumen dan </html> di akhirnya.
<head> ditaruh tepat setelah </html>, dan</head> di akhir dokumen head yang hendak ditampilkan.
<title> Judul Dokumen </title>
<body> di awal tepat setelah </head>.Dan </body> di akhir, tepat sebelum </html>
<!--contoh_tag.html--><html><head><title>Contoh Tag Minimun Sebuah HTML</title></head><body>Ini adalah suatu demonstrasi contoh penggunaan tag minimun yang harus ada pada sebuah dokumen HTML. Mudah sekali bukan? Selamat datang di dunia HTML. Bravo...!!!</body></html>
Supaya lebih jelas, sekarang kita akan mencoba menampilkan tag-tag dasar HTML sebagai halaman web. Copy-paste kode dibawah ini ke dalam Notepad contohnya.Code: [Select]<!--contoh_tag.html--><html><head><title>Contoh Tag Minimun Sebuah HTML</title></head><body>Ini adalah suatu demonstrasi contoh penggunaan tag minimun yang harus ada pada sebuah dokumen HTML. Mudah sekali bukan? Selamat datang di dunia HTML. Bravo?!!!</body></html>Perhatikan kedua bagian yang diberi tanda merah, kita akan lihat nanti posisi mereka saat telah tampil sebagai halaman web.Sekarang simpan file Notepad Anda dengan ekstensi *.htm/*.html. Klik menu File > Save atau dengan shortcut Ctrl+S. Beri nama seperti "Contoh Website.html" namun jangan lupa untuk mengubah kolom Save as type: sebagai All files.Jika sudah, sekarang buka file yang telah Anda simpan tersebut dari lokasi penyimpanan pada Windows Explorer Anda. Maka, pada browser akan tampil seperti berikut...Anda lihat, pada bagian atas, disanalah letak isi dari apa yang kita tuliskan di dalam tag <title>...</title> sedangkan pada halaman browser, itu merupakan isi dari apa yang kita tuliskan di dalam tag <body>...</body>Mudah bukan?
<!--contoh_tag.html--><html><head><title>Contoh Tag Minimun Sebuah HTML</title></head><body>Ini adalah suatu demonstrasi contoh penggunaan tag minimun yang harus ada pada sebuah dokumen HTML. Mudah sekali bukan? Selamat datang di dunia HTML. Bravo?!!!</body></html>
Tutorial sebelumnya kita sudah bahas dan mengenal tag minimum yang harus ada pada sebuah dokumen HTML. Nah, untuk tutorial sekarang ini saya ingin memberitahukan juga beberapa tag dasar lainnya, terutama yang berhubungan dengan penulisan teks dokumen itu sendiri. Berikut beberapa tag tersebut:1. ParagrafSetiap paragraf harus dimulai dengan memberi tag <p> dan tidak harus selalu diakhiri dengan </p>. Tapi, saya lebih menyarankan agar anda menggunakannya untuk menandai bahwa itu adalah akhir dari suatu paragraf dan awal dari paragraf yang lain.Contoh:Code: [Select]<p>Ini adalah sebuah contoh paragraf.</p><p>Sekarang sudah ganti paragraf.</p>Hasil:Code: [Select]Ini adalah sebuah contoh paragraf.Sekarang sudah ganti paragraf.Untuk menentukan besar spasi antar paragraf, anda dapat menambahkan style="margin:0pt 0pt 6pt 0pt". Yang berarti jarak atas dari paragraf tersebut=0point, kanan=0point, bawah=6point, dan kiri=0point. Silahkan ganti angkanya sesuka anda. Contohnya:Code: [Select]<p style="margin:0pt 0pt 6pt 0pt">...</p>2. Line BreakKita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini hanya dimaksudkan menampilkan suatu teks pada baris selanjutnya dalam suatu paragraf dan tidak berganti paragraf lain.Contoh:Code: [Select]Ini adalah<br>sebuah<br>contoh<br>line breaking.Hasil:Code: [Select]Ini adalahsebuahcontohline breaking.Jangan gunakan tag <p> untuk menyisipkan baris kosong, tapi gunakan <br>. Itu adalah suatu kebiasaan buruk!3. Penggaris MendatarSebuah garis dapat disisipkan dalam dokumen web yang biasanya digunakan sebagai pemisah antar bagian atau paragraf. Tag <hr> disisipkan pada tempat garis akan ditampilkan dalam dokumen.Contoh:Code: [Select]<p>Tag hr didefinisikan sebagai garis datar.</p><hr><p>Ini adalah paragraf lain.</p>Hasil:Code: [Select]Tag hr didefinisikan sebagai garis datar._________________________________________Ini adalah paragraf lain.4. HeadingTeks dalam dokumen umumnya mempunyai judul topik pada tiap dokumen HTML. Nah, judul ini disebut heading. Heading tulisan akan ditampilkan dalam huruf yang besar dan ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan dengan memberikan tingkatan mulai dari tingkat 1-6, dimana tingkat 1 adalah heading yang terbesar dan berlaku surut untuk tingkatan selanjutnya.Contoh:Code: [Select]<h1>Ini heading 1</h1><h2>Ini heading 2</h2><h3>Ini heading 3</h3><h4>Ini heading 4</h4><h5>Ini heading 5</h5><h6>Ini heading 6</h6>Hasil:Ini heading 1Ini heading 2Ini heading 3Ini heading 4Ini heading 5Ini heading 6Anda dapat mengatur letak heading pada sisi kiri, kanan ataupun tengah dengan menambahkan atribut tag align=?left/right/center?. Contohnya, <h2 align="left">...</h2>5. KomentarDalam suatu teks dokumen, ada sebagian teks yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Akan tetapi, apa yang anda tuliskan dalam komentar ini tidak akan ditampilkan dalam browser dan hanya terlihat pada source code saja.Di lain pihak, komentar ini bisa juga digunakan untuk menyembunyikan sebagian dokumen web karena alasan belum ada kepastian dari isi dokumen terutama dari aspek legal, perlu ada approval sebelum bisa dipublikasikan atau karena dokumen tersebut belum lengkap 100%. Tag komentar ditandai dengan <!-- di awal, dan --> di akhirnya.Contoh:Code: [Select]<!-- Ini adalah komentar --><p>Ini paragraf normal.</p>Hasil pada browser:Code: [Select]Ini paragraf normal.Ingat, karena ini adalah tag penulisan dokumen, tentu saja, semua harus dituliskan di antara tag <body>...</body>.Selamat mencoba.. Sumber: Tag-tag Pengaturan Teks Dokumen I
<p>Ini adalah sebuah contoh paragraf.</p><p>Sekarang sudah ganti paragraf.</p>
Ini adalah sebuah contoh paragraf.Sekarang sudah ganti paragraf.
<p style="margin:0pt 0pt 6pt 0pt">...</p>
Ini adalah<br>sebuah<br>contoh<br>line breaking.
Ini adalahsebuahcontohline breaking.
<p>Tag hr didefinisikan sebagai garis datar.</p><hr><p>Ini adalah paragraf lain.</p>
Tag hr didefinisikan sebagai garis datar._________________________________________Ini adalah paragraf lain.
<h1>Ini heading 1</h1><h2>Ini heading 2</h2><h3>Ini heading 3</h3><h4>Ini heading 4</h4><h5>Ini heading 5</h5><h6>Ini heading 6</h6>
<!-- Ini adalah komentar --><p>Ini paragraf normal.</p>
Ini paragraf normal.
Berikut sebagian diantara sekian banyak kode-kode tag HTML yang biasa digunakan dalam bahasa pemrograman web.Untuk kode-kode lainnya/contoh penerapannya bisa tengok halaman http://www.web-source.net/html_codes_chart.htm atau http://www.w3schools.com/tags/default.asp
Beberapa karakter memiliki arti khusus dalam HTML. Seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Tidak seperti nama tag, b (bold) misalnya, karakter HTML ini memiliki sifat case sensitive yang berarti jika salah mengetik sedikit saja, maka browser tidak akan dapat membacanya. Sehingga, jika kita menginginkan browser untuk menampilkan karakter-karakter tersebut, harus menyisipkan entitas karakter ke dalam source HTML.Entitas karakter mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas (#) dan nomor entitas, terakhir adalah sebuah tanda titik koma/semicolon (.Contoh:Jika ingin menampilkan tanda lebih kecil (<) dalam sebuah HTML, maka di dalam source anda harus menuliskan: < atau <.Kelebihan dengan menggunakan nama dibandingkan dengan nomor bahwa nama akan lebih mudah diingat. Sementara kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan untuk nomor-nomor entitas didukung oleh hampir semua browser.Entitas Karakter yang Sering DigunakanDaftar Entitas HTML selengkapnya bisa dilihat di Wikipedia.Sumber: Entitas Karakter HTML
wow... bandwidth killer Thanx n Keep posting!
