Labkom99.com – Dasar Pemrograman HTML yang harus dikuasi programmer. Untuk membangun sebuah web page HTML dibutuhkan sebuah dasar bahasa pemrograman yang lebih dikenal dengan sebutan web scripting. Dikatakan script karena perintah kode program tersebut akan di interpreter dan tidak ada kompilasi untuk menjadikannya executable. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side.
Client side dilakukan oleh web browser seperti Internet Explore, Netscape, Opera dan Firefox. Untuk contoh bahasa client side adalah HTML, CSS, Javascript, VBscript, dan XML. Sedangkan server side dilakukan oleh web server seperti PWS (Personal Web Server untuk system operasi windows 98), IIS (untuk system operasi window 2000/window XP), Apache, Tomcat, Xitami, dan ZOPE. Untuk contoh bahasa server side adalah ASP (NET), PHP, JSP, CFM, dan CGI/PL.
Web scripting yang bersifat client side akan menghasilkan web page yang statis artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat di update seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apa pun. Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang bersifat dinamis dengan web scripting bersifat client side ini, tetapi harus dikombinasikan juga dengan web scripting yang bersifat server side.
Dasar Pemrograman HTML / PENGERTIAN HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.
Secara garis besar, terdapat 4 jenis elemen dari HTML:
· structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h2>Golf</h2> akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1
· presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
· hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href=”http://www.wikipedia.org/”>Wikipedia</a> akan menampilkan Wikipediasebagai sebuah hyperlink ke URL tertentu),
· Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).
Selain markup presentational , markup yang lin tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.
Tidak diperlukan suatu program editor khusus untuk, menggunakan kode perintah-perintah HTML, dapat juga menggunakan Notepad, Edit Plus, ataupun editor lainnya yang berbasis GUI (Graphical User Interface ) seperti Microsft Frontpage, Macromedia Dreamwaver, Adobe GoLive dan sebagainya (dengan program-program ini tidak perlu mengetik kode HTMLnya semua perintahnya diwujudkan secara icon base). Tetapi bagi seorang pengembang aplikasi web maka kemampuan penguasaan terhadap kode-kode HTML sangat diperlukan sehingga sangatlah disarankan untuk menguasai kode perintah HTML.
Dasar Pemrograman HTML / ATURAN PENULISAN HTML :
1) Memiliki struktur minimal dari dokumen HTML.
2) Bentuk penulisan TAG. TAG memiliki pembuka <TAG>, tetapi tidak semua tag punya penutup </TAG>, tag memberi instruksi interpreter kepada browser (misalnya Internet Explorer).
3) Di dalam sebuah tag HTML terdapat atribut tag. Atribut yang terkandung dalam tag satu dengan lainnya belum tentu sama. Atribut yang dipakai tidak memiliki urutan pendefinisian tertentu. Atribut tag digunakan untuk memodifikasi sifat-sifat dari tag, bergantung dari nilai yang diberikan.
4) Penulisan TAG bersifat non case-sensitive, yang artinya bahwa penulisan tag huruf besar atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html> atau <HtMl>
5) Setelah tanda “<” harus langsung diikuti oleh nama TAG dan ditutup tanda “>” tidak boleh ada spasi, angka, tanda baca, dan nama TAG tidak dapat dibuat sendiri. Nama TAG harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web.
6) Dalam dokumen HTML diperlukan tag <HEAD> </HEAD>, dalam tag ini diletakkan judul web page dengan menggunakan tag <TITLE>judul web page</TITLE>, sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page. Untuk ektensi dari file HTML perlu ditambahkan .html atau .htm dibelakang nama file-nya (misalnya : coba.htm).
7) Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML secara continue horizontal seperti berikut ini : <HTML><HEAD><TITLE>Judul Web Page</TITLE></HEAD> dst.
Baca Juga : Membuat Efek Teks 3D Marquee Super Keren Dengan CSS3
Dasar Pemrograman HTML / MACAM-MACAM KODE TAG HTML :
1. Meta Tag
Meta tag adalah kode khusus tag html yang memberikan informasi tentang konten website / blog untuk memudahkan search engine mengindeks isi dari website / blog yang di crawl.
Beberapa bagian yang terdapat pada meta tag:
1. Meta Tag judul halaman (Title)
Jika pada website anda dapat menambahkan meta tag title pada lembar kerja bagian edit HTML website builder anda atau secara manual dengan menambahkan kode seperti di bawah ini :
<title>tulis title halaman anda</title>
2. Tag Deskripsi Halaman (Description).
Anda dapat menuliskan deskripsi dari setiap halaman website anda dengan menggunakan kode meta tag ini. Untuk blog, penulisan deskripsi tidak bisa ditambahkan pada setiap halaman, hanya pada bagian ‘Edit HTML’ saja. Penulisan Meta Tag deskripsi dapat anda lihat seperti di bawah ini :
<meta content=’Tuliskan deskripsi halaman website anda’name=’description’/>
3. Meta Tag Kata Kunci (KeyWord)
Keyword atau kata kunci biasanya terdiri dari dua sampai lima kata yang memberikan informasi tentang garis besar isi atau konten suatu halaman website. Untuk blog kode meta tag ini hanya bisa digunakan pada bagian ‘Edit HTML’ saja. Penulisan meta tag keyword dapat anda lihat seperti bi bawah :
<meta content=’keyword1,keyword2,keyword,dst’name=’keyword’/>==>
4. Meta Tags Robots
Terdapat beberapa alternatif yang dapat anda pilih, sesuikan dengan website anda.
a. Digunakan untuk mengindeks semua halaman dan mengikuti
<META NAME=”ROBOTS” CONTENT=”INDEX, FOLLOW”/>
b. Digunakan untuk mengindeks semua halaman tetapi tidak mengikuti semua link :
<META NAME=”ROBOTS” CONTENT=”INDEX, NO FOLLOW”/>
c. Digunakan untuk mengecualikan halaman dari proses pengindeksan, tetapi mengikuti semua link :
<META NAME=”ROBOTS” CONTENT=”NO INDEX, FOLLOW”/>
d. Tidak ada halaman atau link yang di indeks
<META NAME=”ROBOTS” CONTENT=”NO INDEX, NO FOLLOW”/>
5. Meta Tag “Revisit-After”
Meta tag ini dikembangkan dan hanya diperuntukkan bagi situs daerah vancouver dan search engine lokal ‘searchBC’. Tujuan meta tag ini memberikan informasi kepada search engine untuk mengindeks website sesuai interval value tertentu yang diisikan. Lihat contoh penulisannya dibawah ini: <meta name=”revisit-after”contene=15 days”/>. Maksudnya search engine akan kembali crawl website setelah 15 hari sejak crawl terakhir dilakukan. Untuk Blog semua penambahan meta tag di atas dapat dituliskan pada bagian ‘Edit HTML’ di bawah kode seperti yang anda lihat di bawah ini :
<head>
<meta content='Tuliskan deskripsi halaman website anda' name='description'/><meta content='keyword1, keyword2, keyword3, dst' name='keywords'/>
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"/>
<meta name="revisit-after" content="15 days"/>
</head>2. Marquee Tag
Marquee adalah sebuah tag/kode dalam bahasa HTML yang dapat membuat sebuah objek seperti teks dan gambar bergerak secara horizontal maupun vertikal. Untuk memulai marquee kita cukup menuliskan tag <marquee>…</marquee> pada halaman web. Marquee banyak digunakan pada untuk membuat ucapan selamat datang pada sebuah web. Kadang ada juga yang membuat untuk menampilkan blog roll pada sebuah blog.
Tag Marquee memiliki beberapa atribut untuk membuat marquee lebih cantik, diantaranya adalah :
Ø BGCOLOR=”color” ?
digunakan untuk menambahkan warna latar belakang dari sebuah objek (teks, image, dll).
Ø DIRECTION=”left/right/up/down” ?
digunakan untuk menentukan arah pergerakan dari marquee.
Ø BEHAVIOR=”scroll/slide/alternate” ?
digunakan untuk mengatur jenis dari marquee.
NB :
Scroll ? objek selalu berputar.
Slide ? objek berputar sekali lalu berhenti.
Alternate ? objek bergerak ke kiri dan ke kanan secara berulang.
Ø SCROLLAMOUNT=”number” ?
untuk mengatur kecepatan gerakan dalam satuan pixel (semakin besar angka semakin cepat gerakannya).
Ø SCROLLDELAY=”number” ?
untuk mengatur waktu tunda gerakan dalam mili detik.
Ø LOOP=”number|-1|infinite” ?
untuk mengatur jumlah loop.
Ø WIDTH=”number” ?
untuk mengatur panjang/lebar dari marquee dalam satuan pixel (px) atau persen (%).
Tag Marquee bisa dikombinasikan dengan kode lain dalam html, seperti merubah warna background, warna tulisan, memasukkan link, dll.
Contoh :
<font face="impact" color="#ffffff"><marquee scrollamount="3" behavior="alternate" width="70%" bgcolor="#0000ff">MARQUEE BERWARNA</marquee></font>Untuk membuat marquee memiliki fungsi yang bagus, kita dapat menambahkan variasi lain dari marquee, yaitu membuat teks berjalan pada marquee berhenti ketika mouse digeserkan diatas area marquee, dan akan berjalan lagi ketika mouse digeser dari area marquee.
Contoh : arahkan mouse anda ke area marquee di bawah ini :
View Code HTML
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" width="50%" height="200" align="center">ARAHKAN MOUSE ANDA KESINI<br />
<img src="https://1.bp.blogspot.com/-aSAkQ2Y4a7w/X4-l11x9BDI/AAAAAAAAAjk/s94Z5KbiONU6TYgksM-8tIWX5e_xNpbTQCLcBGAsYHQ/s1391/Membuat%2BEfek%2BTeks%2B3D%2BMarquee%2BSuper%2BKeren%2BDengan%2BCSS3.jpg" width="48" border="0" /></marquee>
Baca Juga : Membuat efek animasi teks keren menggunakan HTML5
