Selasa, 04 November 2008

Belajar PHP

Bermula dari pertanyaan seseorang mengenai bagaimana belajar PHP, maka saya tuliskan beberapa langkah dibawah ini sebagai panduan untuk mempelajari PHP. Semoga bermanfaat.

Catatan: database yang digunakan adalah MySQL.

  1. PHP sebagai server side scripting secara umum digunakan untuk membuat situs dinamis atau aplikasi berbasis web. Jadi langkah awal untuk mempelajari PHP adalah menguasai HTML terlebih dahulu. Tanpa penguasaan HTML dasar, rasanya PHP kurang bermanfaat untuk dipelajari.Links untuk belajar HTML
  2. PHP adalah bahasa pemrograman, artinya untuk menguasai PHP haruslah mengerti algoritma. Minimal yang harus diketahui untuk hal ini adalah apa dan bagaimana menggunakan variable, kondisi atau pencabangan, perulangan dan sub-rutin untuk menyelesaikan suatu masalah. Saat ini sudah banyak buku yang membahas mengenai algoritma dan pemrograman, silakan cari dan pilih sendiri.
  3. Install Apache, PHP dan MySQL pada PC Anda. Saya menyarankan untuk tidak menggunakan installer yang instant (seperti PHPTriad, Wampserver, e-novative dsb), tetapi lebih baik belajar dan mencoba menginstallnya satu demi satu diawali dari Apache, lalu PHP dan MySQL.Link panduan menginstal Apache, PHP dan MySQL
  4. Setelah langkah 1 & 2 sudah dipelajari dan sudah dimengerti (meskipun hanya sedikit) dan langkah 3 sudah bisa Anda lalui. Langkah berikutnya adalah mempelajari sintaks-sintaks dari PHP dan Anda wajib memiliki atau mendownload file Help PHP.Link untuk belajar PHP
  5. Coba untuk membuat form isian sederhana menggunakan PHP beserta HTML yang telah dikuasai. Lalu, tambahkan fitur validasi untuk beberapa atau semua data sehingga tidak boleh kosong saat submit ditekan.Links Tutorial membuat form
  6. Pelajari juga teknik session dan atau cookies. Ini penting dan sangat sering digunakan dalam pembuatan situs dinamis atau aplikasi berbasi web. Pada langkah ini, minimal Anda bisa membuat halaman login dengan user dan password yang masih ditulis secara hardcode dalam script.Links tutorial session dan cookies
  7. Langkah berikutnya adalah mempelajar seluk beluk mengenai database seperti apa itu database, table, record, field dsb. Download dan pergunakan phpMyAdmin untuk mencoba membuat database, table dan field-fieldnya.
  8. Pelajari SQL khusus untuk empat perintah dasar yaitu SELECT, INSERT, UPDATE dan DELETE. Perintah SELECT adalah perintah SQL yang paling kompleks karena meliputi klausa JOIN (INNER/OUTER), WHERE, GROUP BY, HAVING, ORDER BY dan LIMIT (limit adalah klausa yang diperkenalkan MySQL).Link tutorial SQL
  9. Setelah perintah SQL bisa Anda mengerti (syukur-syukur menguasai), maka pelajari bagaimana PHP berinteraksi dengan MySQL. Pada langkah ini, Anda diharuskan menguasai fungsi-fungsi wajib sehubungan dengan MySQL, yaitu mysql_connect_db, mysql_select_db, mysql_query dan mysql_fetch_object / mysql_fetch_array.Download Help MySQL.
  10. Sampai disini, coba untuk membuat script sederhana untuk input data menggunakan form. Data yang diinput melalui form disimpan dalam database (INSERT). Lalu buat juga script untuk menampilkan data-data yang telah tersimpan dalam database (SELECT). Selanjutnya, buat fasilitas untuk mmenghapus (DELETE) dan mengedit data (UPDATE).
  11. Coba membuat halaman login dimana user dan passwordnya dibaca dari database
  12. Coba gabungkan karya nomor 10 dan 11 sehingga hanya mereka yang login saja yang bisa menghapus/mengedit data.
  13. Sampai disini, Anda bisa dikatakan sudah sampai pada tahap beginner. Selanjutnya banyak-banyaklah bereksperimen dengan membuat proyek-proyek kecil minimal untuk kesenangan Anda sendiri. Saat Anda mengerjakan proyek, disanalah pelajaran demi pelajaran bisa Anda dapat dari berbagai masalah yang muncul.
  14. Selanjutnya, Anda harus mulai mempelajari masalah security seperti masalah Code/SQL Injection, session hijacking, session fixation, teknik enkripsi dsb.
  15. Sempatkan untuk belajar Javascript saat Anda merasa kemampuan PHP yang dimiliki sudah lumayan. Kelemahan dari script PHP adalah tidak dimungkinkannya interaksi pengguna secara on the fly. Nah, kekurangannya inilah yang di “tambal” menggunakan Javascript. Syukur-syukur Anda bisa menguasai AJAX.Link tutorial Javascript
  16. Sempatkan pula untuk mempelajari CSS. Ini penting untuk membuat tampilan/interface situs atau web-based application secara lebih baik.Link tutorial CSS:
  17. Terakhir. Karena PHP lebih banyak hidup di OS Linux, pelajari juga linux barang sedikit. Syukur-syukur kalo Anda ternyata sejak awal belajar di linux

TIPS:

  • Jangan terlalu memaksakan untuk menghapalkan fungsi, sintaks dari PHP atau MySQL. Manfaatkan file HELP dalam praktek dan latihan. Semakin Anda sering praktek dan melatih diri, maka fungsi dan sintaks yang sering dipakai akan bisa Anda hapal dengan sendirinya.
  • Jangan terlalu cepat untuk mengambil keputusan untuk bertanya terhadap masalah atau kesulitan yang timbul. Bertanyalah setelah Anda mencoba terlebih dahulu.
  • Rajin-rajin mengikuti milis atau forum dan selalu ingat, diatas langit ada langit ;)

Perintah-perintah Dasar LINUX

Bagi anda yang baru belajar LINUX dibawah ini saya tuliskan perintah-perintah dasar LINUX yang sering digunakan :

untuk menggunakan dan mempelajari lebih detil tentang perintah-perintah dasar di Linux kita boleh menggunakan manual yang sudah tersedia di Command Line nya dengan mengetik :

$ man {nama sintak yang ingin di cari}


***membuka directory di Linux:
aroel fisika@fisika $ ls

***masuk maupun keluar dari directory (Change Directory) :
aroel fisika@fisika $ cd /home/
perintah diatas menandakan bahwa kita masuk ke directory home.

aroel fisika@fisika home $ cd ..
perintah ini akan membuat si user akan keluar ke directory pertahap dan nantinya setelah dienter akan mengembalikan lagi ke directory atau user fisika " aroel fisika@fisika $

***membuat directory dengan make directory :
aroel fisika@fisika home $ mkdir coba/
perintah diatas telah menunjukkan bahwa si user telah membuat sebuah directory baru didalam directory home dengan nama coba.

***membuat user dengan perintah adduser :
aroel fisika@fisika # adduser aroel
Kita sudah membuat sebuah user dengan nama aroel, untuk membuat user baru biasanya keberadaan hak kita harus dalam keadaan Super User SU (#) bukan user biasa ($), kecuali si user biasa sudah diberikan izin oleh si root. #passwd ali --> untuk membuat dan menggantikan password user ali.

***memberikan izin (permission)
Dengan menggunakan letter coding, Anda dapat merubah permission diatas untuk masing-masing u (user), g (group), o (other) dan a (all) dengan hanya memberi tanda plus (+) untuk menambah ijin dan tanda minus (-) untuk mencabut ijin.

Misalnya untuk memberikan ijin baca dan eksekusi file coba1 kepada owner dan group, perintahnya adalah:
aroel fisika@fisika $ chmod ug+rx coba1

Untuk mencabut ijin-ijin tersebut:
aroel fisika@fisika $ chmod ug-rx coba1

Dengan menggunakan sitem numeric coding, permission untukuser, group dan other ditentukan dengan menggunakan kombinasi angka-angka, 4, 2 dan 1 dimana 4 (read), 2 (write) dan 1 (execute).

Misalnya untuk memberikan ijin baca(4), tulis(2) dan eksekusi(1) file coba2 kepada owner, perintahnya adalah:
aroel fisika@fisika $ chmod 700 coba2

Contoh lain, untuk memberi ijin baca(4) dan tulis(2) file coba3 kepada user, baca(4) saja kepada group dan other, perintahnya adalah:
aroel fisika@fisika $ chmod 644 coba3

***merubah index
chown index Merubah user ID (owner) sebuah file atau direktori
aroel fisika@fisika $ chown

***mengcopy file
aroel fisika@fisika $ cp -fR {nama file} /{nama directory yang mau dipastekan}

***perintah grep untuk melihat file sudah terinstall apa belum
aroel fisika@fisika $ rpm -qa grep gcc
perintah diatas akan menampilkan seluruh file yang berhubungan dengan gcc bila ada atau sudah terinstall.

***mount removable (flash disk)
roel fisika@fisika $ mount -t vfat /dev/sda1 /{directory kosong sebagai penempatan}

untuk mengaktifkan auto mount bisa di buat di editor vi dengan perintah vi /etc/fstab, kemudian ketiklah scrip nya kemudian simpan.

Belajar Blogger

Domain User : http://user.blogspot.com
Keuntungan :
~ Bisa membuat lebih dari 1 blog dengan 1 acount.
~ Layout bisa diganti.
~ Acount di GMAIL ( jika diaktifkan ).
~ Otomatis akan masuk dalam Search Engine GOOGLE.
Kelemahan :
~ Tak adanya category posting.
~ Tak adanya search dalam 1 blog juga 1 database.
~ Tak adanya calendar arsip.
~ Anonymous jika pemberi komentar tidak login blogger.com

A. REGISTER :

Jika belum mempunyai acount di BLOGGER.COM, kamu bisa mulai dari sini, yaitu cara mendaftar….

1. Create Your Blog Now
Buka browser window, buka situs blogger.com ( klik di link disamping )
Pilih tombol yang terdapat tulisan CREATE YOUR BLOG NOW pada halaman web ( yang dilingkari pada gambar dibawah ).
Blogger.Com

2. Isi Formulir
Isilah form dengan lengkap, kemudian tekan CONTINUE ( yang dilingkari pada gambar )
Blogger.Com

3. Pilih Domain Blog
Isilah title blogmu, kemudian isi form address blog mu ( URL ) untuk membuka blog mu jika sudah selesai.
Sebagai contoh, saya membuat domain http://bantuanbelajar.blogspot.com, berarti di form ke dua diisi bantuanbelajar.
Pada form ke tiga, di isi code yang ada pada gambar atasnya ( gambar berupa perpaduan angka dan huruf , yang diberi tanda kotak pada gambar ).
Kemudian CONTINUE ( yang dilingkari pada gambar )
Blogger.Com

4. Memilih Template
Pilih template yang kamu sukai. Template yang di sediakan adalah template standart pada Blogger.Com. Jika ingin mengganti bisa pada halaman admin acountmu ( akan di bahas di belakang ).
Pilih template yang di suka dengan cara memberi tanda titik (.) pada bawah gambar template yang ada ( gambar yang dilingkari ), kemudian CONTINUE.
Blogger.Com

B. POSTING

Selamat, kamu sudah memiliki sebuah blog…..
Kamu tinggal memulai untuk menulis di blog mu….
[+] Setelah memilih template, maka kamu akan masuk ke halaman yang bertiliskan :
Your blog has been created!
Kamu tinggal menekan tombol START POSTING ( yang dilingkari pada gambar )
Blogger.Com

[+] Jika kamu sudah memiliki acount, kamu tinggal login saja di halaman depan.
Kemudian kamu memilih gambar + ( yang diberi tanda lingkaran ) untuk menulis postingan baru.
Jika ingin membuat blog baru, tak perlu untuk register kembali, karena untuk membuat beberapa blog, cukup 1 acount juga bisa, yaitu dengan cara menekan tombol CREAT A BLOG ( dalam gambar diberi tanda panah ).
Blogger.Com

[+] Mulai isi postingan yang akan kamu tulis, mulai dari judul postingan, juga isi postingan. Diatas tempat postingan telah tersedia tool - tool untuk style tulisan, baik mau text miring, ataupun tebal, dan sebagainya….
Untuk menampilkan gambar pada isi postingan, bisa menggunakan code berikut…

http://geocities.com/user/gambar.jpg">

dalam code di atas, yang text tebal adalah lokasi file gambar berada.
Bagi yang mempunyai ID Yahoo bisa mendapatkan hosting gratis di Geocities untuk meletakkan file gambar ataupun file lainnya, yaitu tentu dengan cara mendaftar….
Atau juga bisa mencari di Google, atau di situs manapun.
Untuk mengetahui letak (lokasi) file gambar di situs lain yaitu klik kanan pada gambar, pilih properties, nanti disitu keluar keterangan gambar, mulai dari ukuran, jenis juga letak gambar…
Ambil yang Address [URL], taruh dalam tag tadi….

Setelah postingan selesai, tinggal mem-publish kannya, yaitu tekan tombol PUBLISH POST, atau yang dibeli lingkaran pada gambar dibawah…
Blogger.Com

*) Kemudian tekan tombol REPUBLISH ENTIRE BLOG, setelah itu tekan tombol REPUBLISH INDEX ONLY.
Blogger.Com

C. EDIT / ERASE POST
Jika ingin meng-edit atau menghapus postingan, pilih menu EDIT POST ( yang diberi lingkaran pada gambar )
Blogger.Com
Setelah di edit, atau di hapus, ulangi langkah *) ( diatas ).

D. TEMPLATE
Untuk mengganti template, atau menambahkan tool dalam blog, pilihlah menu TEMPLATE ( yang dilingkari pada gambar dibawah ). Dihalaman tersebut akan terlihat code-code, tag HTML dari blogmu. Tentang cara mengganti template akan saya bahas di lain waktu….
Blogger.Com

E. LIHAT HASIL
Disamping kanan menu TEMPLATE, terdapat menu VIEW BLOG, klik kanan menu tersebut, pilih Open in New Window.
Dan hasilnya…….
Taraaaaaaaaaaaaaaaaaaaa………………
Blogmu sudah jadi……, selamat yahh…… :D :D :)

Senin, 03 November 2008

Materi Dasar Belajar HTML

Ini merupakan artikel pertama yang saya tulis di website saya ini. Karena diwebsite ini saya akan membagi-bagikan ilmu apa aja tentang pembuatan website, maka kita pelajari biangnya dulu, dasar dari semua dasar pembuatan website yaitu HTML.

HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.

Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.

HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.

Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.
Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.

Sekarang buka saja notepad anda dan kita mulai.
Kode HTML pertama

Buka notepad dan tuliskan kode dibawah ini

Hello World

Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:

Hello World!!

Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag maksudnya untuk memulai huruf tebal (bold) dan tag merupakan tag penutup untuk menghentikan huruf tebal.

Sebuah halaman HTML yang baik harus memiliki tag dan , tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.

Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).
Containers

Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:

Hello World!!


Hasil:

Hello World!!

Tag berguna untuk memiringkan teks (italic) tag memiliki penutup yaitu . Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka dan tag penutup sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.
Standalone Tag

Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah
yang berguna untuk memberi jarak antar teks dan tag


untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.
Atribut

Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:

Hello World!!

Hasilnya:

Hello World!!

Tulisan World!! terletak ditengah tag nah tag memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?
HTML Entity

Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:

Saya belajar web

Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu   jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:

Saya belajar    web

HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.
Struktur Dokumen HTML

Tadi sudah saya katakan bahwa HTML yang baik memiliki tag dan . mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag tidak memiliki atribut tetapi memiliki container khusus didalam header seperti , , dan . Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini: <br /> <br /><html> <br /><head> <br /><title>Your title


Hello World!!



Hasilnya didalam Microsoft Internet Explorer :
Contoh HTML dasar

Anda lihat teks yang berada diantara tag muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya. <br />Susun file Anda <br /> <br />Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda. <br />index.html <br /> <br />Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html. <br /> <br />Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda. <br /> <br />Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body> <br />Teks dan Paragraf <br /> <br />Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website. <br /> <br />Heading merupakan container yang diawali dengan tag <h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6. <br /> <br />Cobalah kode berikut ini: <br /> <br /><h1>My First HTML</h1> <br /><h2>My First HTML</h2> <br /><h3>My First HTML</h3> <br /><h4>My First HTML</h4> <br /><h5>My First HTML</h5> <br /><h6>My First HTML</h6> <br /> <br />Hasil: <br />Contoh penggunaan tag Heading <br /> <br />Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah <br /> <br />Sekarang coba kode berikut ini: <br /> <br /><p>Halo, nama saya <b>Budi</b> dan <br />saya ingin belajar HTML.</p> <br /><p>Ini merupakan <i>kode HTML pertama saya</i> dan saya <br />belajar untuk <u>memformat</u> teks dalam HTML </p> <br /> <br />Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba :) <br /> <br />Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut: <br /> <br /><h1 align="center">Nama saya Jono</h1> <br /><p>Halo nama saya Jono dan saya lagi belajar HTML</p> <br /><p align="right">James, 2006</p> <br /> <br />Hasilnya: <br />Contoh penggunaan Alignment <br /> <br />Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh: <br /> <br /><p><font face="Arial" size="2" color="#FF0000">Nama <br />saya</font> <br /><b>Bambang</b><font face="Arial" size="2"> <br />dan </font><font face="Tahoma">saya cinta rupiah</font></p> <br /> <br />Silahkan anda coba sendiri untuk melihat seperti apa hasilnya <br /> <br />Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah  . Langsung saja coba kode berikut ini: <br /> <br /><p>Baris 1<br>Baris 2<br>Baris     3<br>Baris <br /><b>4</b></p> <br /> <br />Hasil: <br /> <br />Baris 1 <br />Baris 2 <br />Baris 3 <br />Baris 4 <br /> <br />Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr> memiliki beberapa atribut. Tag <hr> tidak memerlukan tag penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini: <br /> <br /><p>Halo nama saya Telo</p> <br /><hr width="25%" align="justify"> <br /><p>Saya lagi belajar membuat garis horisontal.</p> <br /><hr size="4" align="justify"> <br /><p>Matur nuwun</p> <br /><hr size="3" noshade color="#000000" width="25%" align="justify"> <br /> <br />Hasil: <br />Contoh penggunaan Horizontal Rules <br /> <br />Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan yang tidak pada kode diatas. <br /> <br />Bagaimana? mudah kan belajar HTML, jangan senang dulu sekarang kita akan mempelajari yang lebih sulit <br />Links <br /> <br />Oke anda telah membuat banyak halaman HTML, sekarang bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain? Apakah saya perlu menuliskan alamatnya di browser? Link adalah jawabannya. <a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <a> memiliki atribut yang sangat penting yaitu href. Langsung saja coba kode berikut ini: <br /> <br />My <a href="http://www.dhimasronggobramantyo.com">Homepage</a> <br /> <br />Hasil: <br /> <br />My homepage <br /> <br />Jika anda lihat, maka teks homepage telah berubah menjadi link, jika anda klik maka browser akan menuju alamat yang tertera pada atribut href. Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi link. Contoh: <br /> <br />My <a href="contact.html">homepage</a> <br /> <br />Hasil: <br /> <br />My homepage <br /> <br />Jika anda klik, maka browser akan membuka file contact.html yang berada pada satu folder. Bagaimana jika filenya berada difolder lain? gampang, gunakan kode berikut: <br /> <br />My <a href="folder/contact.html">homepage</a> <br /> <br />Hasil: <br /> <br />My homepage <br /> <br />Jika anda ingin ketika link diklik dan halaman tersebut muncul pada jendela browser yang baru, gunakan atribut target="_blank" seperti ini: <br /> <br />My <a href="http://www.dhimasronggobramantyo.com" <br />target="_blank">homepage</a> <br /> <br />Oke silahkan anda coba sendiri untuk melihat hasilnya, sekarang kita akan belajar tentang images <br />Images <br /> <br />Pertengahan tahun 90'an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag <img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini: <br /> <br /><img src="images/artikel/introhtml_02.gif" width="313" height="43" <br />alt="Contoh Gambar"> <br /> <br />Hasil: <br />Contoh Gambar <br /> <br />Atribut src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan height merupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border <br /> <br /><a href="http://www.dhimasronggobramantyo.com"> <br /><img border="1" src="images/introhtml_02.gif" width="313" <br />height="43"></a> <br /> <br />Hasil: <br /> <br />Contoh Gambar <br />Komentar <br /> <br />Anda dapat menuliskan komentar dikode HTML, komentar berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja. Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali dengan <!-- dan diakhiri dengan --> lihat contoh berikut ini: <br /> <br /><!--Kode untuk menampilkan nama saya--> <br /><p>Nama saya <b>Dhimas</b></p> <br /> <br />List <br /> <br />Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <ul>: <br /> <br /><ul> <br /> <li>List 1</li> <br /> <li>List 2</li> <br /> <li>List 3</li> <br /></ul> <br /> <br />Hasil: <br /> <br /> * List 1 <br /> * List 2 <br /> * List 3 <br /> <br />Tag <ul> merupakan tag pembuka. Diantara tag <ul> Anda dapat menambahkan tag <li> untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol> Anda dapat menggunakannya sama seperti tag <ul> Contoh: <br /> <br /><ol> <br /> <li>List 1</li> <br /> <li>List 2</li> <br /> <li>List 3</li> <br /></ol> <br /> <br />Hasil: <br /> <br /> 1. List 1 <br /> 2. List 2 <br /> 3. List 3 <br /> <br />Jika anda ingin memulai list tidak dari nomor satu tambahkan atribut start. Contoh: <br /> <br /><ol start="3"> <br /> <li>List 1</li> <br /> <li>List 2</li> <br /> <li>List 3</li> <br /></ol> <br /> <br />Hasil: <br /> <br /> 3. List 1 <br /> 4. List 2 <br /> 5. List 3 <br /> <br />Tabel merupakan hal yang paling penting dalam membuat interface website anda. Dengan tabel anda dapat memecah layout website menjadi beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih. <br />Table merupakan tag html terumit, karena didalam tag table terdapat tag-tag lainnya. Dan table sangat penting. Karena itu sebelum meneruskan, tarik nafas dalam-dalam dan konsentrasi. <br /> <br />Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini : <br /> <br /> * <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel. <br /> * <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris. <br /> * <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom. <br /> * <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel. <br /> <br />Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini: <br /> <br />Contoh: <br /> <br /><table border="1" width="60%"> <br /><tr> <br /><td>Contoh Table</td> <br /></tr> <br /></table> <br /> <br />Hasilnya: <br /> <br />Contoh Tabel <br /> <br />Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini: <br /> <br /><table border="1" width="200" cellpadding="4" cellspacing="5"> <br /><tr> <br /><td width="100">Cell 1</td> <br /><td width="100">Cell 2</td> <br /></tr> <br /></table> <br /> <br />Hasil: <br /> <br />Cell 1 <br /> <br /> <br />Cell 2 <br /> <br />Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya. <br /> <br />Setiap tabel memiliki baris dengan menggunakan tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini: <br /> <br /><table border="1" width="200" cellpadding="2"> <br /> <tr> <br /> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <br /> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> / <br /> </tr> <br /> <tr> <br /> <td width="100">cell 1</td> <br /> <td width="100">cell 2</td> <br /> </tr> <br /> <tr> <br /> <td width="100">cell 3</td> <br /> <td width="100">cell 4</td> / <br /> </tr> <br /></table> <br /> <br />Hasil: <br /> <br />Header <br /> <br /> <br />Header <br /> <br />cell 1 <br /> <br /> <br />cell 2 <br /> <br />cell 3 <br /> <br /> <br />cell 4 <br /> <br />Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom <td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table> didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya: <br /> <br /><table border="1" width="200" cellpadding="2"> <br /><tr> <br /><td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <br /><td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <br /></tr> <br /><tr> <br /><td width="100" rowspan="2" valign="top">cell 1</td> <br /><td width="100">cell 2</td> <br /></tr> <br /><tr> <br /><td width="100">cell 4</td> <br /></tr> <br /></table> <br /> <br />Hasilnya: <br /> <br />Header <br /> <br /> <br />Header <br /> <br />cell 1 <br /> <br /> <br />cell 2 <br /> <br />cell 4 <br /> <br />Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini: <br /> <br /><table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000"> <br /><tr> <br /><td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <br /><td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <br /></tr> <br /><tr> <br /><td width="100" valign="top" bgcolor="#CCCCCC" align="left">Left</td> <br /><td width="100" bgcolor="#CCCCCC" align="right">Right</td> <br /></tr> <br /><tr> <br /><td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center"> <br />Table is cool</td> <br /></tr> <br /><tr> <br /><td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center"> <br />But it's not easy</td> <br /></tr> <br /></table> <br /> <br />Hasil: <br /> <br />Header <br /> <br /> <br />Header <br /> <br />Left <br /> <br /> <br />Right <br /> <br />Table is cool <br /> <br />But it's not easy <br /> <br />Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP. <br /> <br />Sekarang kita akan membicarakan tag <META>. Tag <META> digunakan agar search engine mengenal dan dapat mengkategorisasikan website anda, gampangnya agar search engine mengetahui website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag <META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <META> berada diantara tag <head> bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser. <br /> <br />Sebenarnya apa sih kegunaan Search Engine dan apa pengaruhnya untuk website? Saya akan jelaskan secara gampang, anda memiliki website katakan websitesaya.com, nah bagaiman milyaran pengguna internet dapat mengetahui kalau ada sebuah situs websitesaya.com diantara ratusan juta situs lainnya. Pengguna internet banyak yang melakukan pencarian melalui search engine seperti google atau yahoo. Jika mereka melakukan pencarian dan situs anda muncul pada hasil pencarian tersebut, maka anda mendapatkan pengunjung yang mengunjungi website anda. Bagaimana agar website saya ada di google atau search engine lainnya? ya dengan menggunakan <META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit, search engine memiliki perhitungannya sendiri seperti ranking, backlink, recipocal link, tetapi kita ambil gampangnya saja. <br /> <br />Oke anda sudah mengerti pentingnya tag <META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita. <br /> <br />Sebagai contoh misalnya kita memiliki website kecoak.com yang berisi bagaimana cara memelihara dan beternak kecoa. Maka kira-kira kita perlu membuat meta seperti ini: <br /> <br /><html> <br /><head> <br /><META content="kecoak.com" name=AUTHOR> <br /><META content="Cara memelihara dan beternak kecoak." name=description> <br /><META content="kecoak, beternak, memelihara, coro, ternak, pelihara" name=keywords> <br /><META content="INDEX, FOLLOW" name=ROBOTS> <br /><META http-equiv="Content-Language" content="en-us"> <br /><META http-equiv="Content-Type" content="text/html; charset=windows-1252"> <br /><title>Ternak Kecoak


Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda semakin ahli.