Dasar Pemrograman HTML


Labkom99.com - 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.


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, <h1>Golf</h1> 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.

 

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

 

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 :
View Code HTMLs
<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

CONTOH KODE TAG & FUNGSINYA :

1

<br>

Turun satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun satu baris kebawah

2

<big>isi tulisan</big>

tulisan menjadi sedikit lebih besar dengan ukuran 3

3

<font color="warna tulisan">isi tulisan</font>

Mewarnai tulisan. Ganti warna tulisan dengan salah satu pilihan yang ada : red, blue, yellow, green, brown, gold, purple

4

&nbsp;

Menambah 1 spasi. (halaman sunting Wikipedia tidak bisa mengenal 2 spasi kosong atau lebih)

5

<font size="ukuran tulisan">isi tulisan</font>

mengganti ukuran tulisan. Ukuran standar adalah 2. Di Wikipedia tidak di-izinkanmemakai ukuran tulisan yang terlalu besar.

6

<strong>isi tulisan</strong>atau

<b>isi tulisan</b>

Untuk menebalkan tulisan. Fungsi sama dengan '''isi tulisan''' atau tombol 'cetak tebal'

7

<P>

Kursor dan kalimat dibelakangnya turun satu setengah baris kebawah

8

<u>isi tulisan</u>

membuat garis bawah tulisan

9

<small>isi tulisan</small>

tulisan menjadi sedikit lebih kecil dengan ukuran 1

10

<s>isi tulisan</s>

membuat garis mencoret pada tulisan

11

<pre>isi tulisan</pre>

Membuat tulisan tetap pada keadaan yang kita mau. misalnya untuk urutan berjejer kebawah.

12

<center>isi tulisan</center>

Membuat tulisan berada di tengah halaman

 

 

 

 

 BODY

Di dalam TAG terdapat beberapa atribut. Atribut tag berada di dalam tanda tag tersebut. Atribut tersebut ada yang memiliki nilai tetapi juga ada yang tidak. TAG <BODY> memiliki atribut : <BODY bgcolor = “#...”background=”…”>

Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah dengan menggunakan aturan komposisi RGB(Red Green Blue) dengan angka hexadecimal maksimal adalah FF (setara dengan 225 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk memberikan warna merah (red) maka nilainya adalah “#FF0000”, warna hijau (green) nilainya adalah “00FF00’ dan warna biru (blue) nilainya adalah “000FF”. atau dapat juga menggunakan pre-define color seperti red, green, blue, yellow, cyan, magenta.

Baca Juga : Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

 

HEADING

Heading digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul atau topic utama dari sebuah paragraph, ukurannya dari terbesar <H1> sampai terkecil <H6>, sedangkan untuk mengatur posisi heading digunakan atribut “align” contoh adalah <H1 align=”…”> ditutup dengan </H1> yang nilai atributnya dapat diisi nilai left untuk rata kiri, right untuk rata kanan, dan center untuk rata tengah.

 

PARAGRAF

Untuk memformat paragraf agar dapat rata kiri, kanan, tengah dan justify digunakan tag pembuka <P align=”…”> dan penutup </P>, isi dari atribut “align” adalah left untuk rata kiri, right untuk rata kanan, center untuk rata tengah dan justify untuk rata kiri dan kanan. Antara paragraph dalam HTML akan dibatasai secara otomatis oleh sebuah jeda baris.

 

BREAKING NOW

Tag <BR> ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup.

Baca juga : Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas


HORIZONTAL RULER

Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki adalah “align” untuk perataan,”size” untuk mengatur ketebalan garisnya (dalam pixel), dan “width” untuk mengatur lebar garisnya (dalam pixel atau peren). Penggunaan satuan persen memiliki arti bahwa ukuran garis horizontal akan diambil presentase terhadap width dari tampilan jendelanya. Tag HR ini juga tidak memiliki tag penutup.

 

PREFORMAT

Untuk memformat dokumen HTML dengan menggunakn fasilitas preformat. Dengan fasilitas ini tampilan yang akan diformat sama persis dengan isi yang ada di dalam tag <PRE>isi</PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.

Baca Juga : Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas

LIST

Dalam dokumen HTML dapat menampilkan daftar list seperti Bullet & Numbering pada aplikasi program Microsoft Word. Ada dua macam list, yaitu UnorderList (mirip bullets) dan OrderList (mirip numbering). Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup, untuk item-item yang ada didalamnya digunakan tag <LI> untuk mengawalinya, Unordered List mempunyai atribut “type” yaitu bentuk dari bulletnya, ada beberapa jenis tipe yaitu disc (default) untuk lingkaran tidak berlubang, circle untuk bentuk lingkaran berlubang, square untuk kotak. Ordered List juga memiliki atribut tipe untuk menentukan tipe penomoronnya, tipe-tipenya adalah :

Ø  1 untuk penomeran 1, 2, 3,…..

Ø  A untuk penomeran A, B, C,….

Ø  I untuk penomeran I, II, III,….

Ø  A untuk penomeran a, b, c,….

Ø  i untuk penomeran I, ii, iii….

Baca Juga : Membuat Animasi Teks Dengan HTML5 Dan Canvas

KARAKTER KHUSUS DALAM HTML

Dikarenakan penulisan tag HTML telah menggunakan tanda < dan > maka tanda tersebut tidak dapat dipakai dalam isi dokumen HTML. Sebagai gantinya maka penggunaan tanda < digunakan perintah & lt; dan > digunakan perintah &gt: untuk spasi dalam HTML juga digunakan perintah &mbsp; (non breaking space). Beberapa perintah khusus yang dapat digunakan dalam HTML antara lain :

BENTUK

PERINTAH

&copy;

©                                        

&reg;

®                               

&#8482;

           

&#8212;

-

&plusmn;

±                                          

&para;

                                           

&acute;

Komentar