SlideShare a Scribd company logo

Modul PHP untuk Pemula

•
•
Abdul Aziz
Abdul Aziz

modul utorial php yang saya khususkan untuk para pemula yang ingin membuat web application dengan php.

InternetTechnologyBusiness
1 of 145
Daftar Isi TOC quot; 1-3quot; BAB 1 :Pengenalan Internet PAGEREF _Toc288414060 61.1Pengertian Internet PAGEREF _Toc288414061 71.2Sejarah Internet PAGEREF _Toc288414062 71.3Situs Web dan Halaman Web PAGEREF _Toc288414063 81.3.1Halaman Web PAGEREF _Toc288414064 81.3.2Situs Web PAGEREF _Toc288414065 81.4Cara Kerja Halaman Web PAGEREF _Toc288414066 81.5Macam Macam Halaman Web PAGEREF _Toc288414067 9BAB 2 :Menggunakan HTML PAGEREF _Toc288414068 102.1Pengertian dan Sejarah HTML PAGEREF _Toc288414069 112.2Bersiap-Siap PAGEREF _Toc288414070 122.2.1Alternatif Text Editor PAGEREF _Toc288414071 132.2.2Alternatif Web Browser PAGEREF _Toc288414072 142.3“Halo, Dunia!” PAGEREF _Toc288414073 152.4Struktur Dokumen HTML PAGEREF _Toc288414074 162.4.1Mengunjungi Kembali “Halo, Dunia!” PAGEREF _Toc288414075 182.5Bekerja dengan Teks PAGEREF _Toc288414076 182.5.1Membuat Paragraf PAGEREF _Toc288414077 192.5.2Membuat Judul PAGEREF _Toc288414078 192.5.3Membuat Daftar PAGEREF _Toc288414079 202.5.4Memformat Teks PAGEREF _Toc288414080 222.6Bekerja dengan Link PAGEREF _Toc288414081 282.7Bekerja dengan Gambar PAGEREF _Toc288414082 302.8Bekerja dengan Tabel PAGEREF _Toc288414083 312.9Bekerja dengan Formulir PAGEREF _Toc288414084 332.10Bekerja dengan Peta PAGEREF _Toc288414085 36BAB 3 :Menggunakan CSS PAGEREF _Toc288414086 393.1Pengertian CSS PAGEREF _Toc288414087 403.2Membuat dan Menghubungkan File CSS PAGEREF _Toc288414088 403.3Aturan CSS PAGEREF _Toc288414089 423.3.1Selector PAGEREF _Toc288414090 423.3.2Property dan Value PAGEREF _Toc288414091 443.4Menggunakan Warna PAGEREF _Toc288414092 443.5Memformat Teks PAGEREF _Toc288414093 463.6Memberikan Margin PAGEREF _Toc288414094 483.7Memberikan Border dan Padding PAGEREF _Toc288414095 493.8Menggunakan Pseudo-Class PAGEREF _Toc288414096 503.9Menggunakan Gambar Latar PAGEREF _Toc288414097 52BAB 4 :Mengatur Tata Letak Halaman Web PAGEREF _Toc288414098 544.1Membuat Kolom PAGEREF _Toc288414099 554.1.1Kolom untuk Tata Letak PAGEREF _Toc288414100 554.1.2Kolom untuk Teks PAGEREF _Toc288414101 59BAB 5 :Pengenalan Basis Data PAGEREF _Toc288414102 625.1Pengertian Basis Data PAGEREF _Toc288414103 635.2Komponen dalam Basis Data PAGEREF _Toc288414104 635.3Relasi antar Tabel PAGEREF _Toc288414105 645.3.1One-to-One Relationship PAGEREF _Toc288414106 655.3.2One-to-Many Relationship PAGEREF _Toc288414107 655.3.3Many-to-Many Relationship PAGEREF _Toc288414108 65BAB 6 :Menggunakan SQL PAGEREF _Toc288414109 676.1Pengertian SQL PAGEREF _Toc288414110 686.2Bekerja dengan Skema PAGEREF _Toc288414111 686.3Bekerja dengan Tabel PAGEREF _Toc288414112 686.3.1Membuat Tabel PAGEREF _Toc288414113 696.3.2Mengubah Tabel PAGEREF _Toc288414114 706.3.3Menghapus Tabel PAGEREF _Toc288414115 716.4Bekerja dengan Data PAGEREF _Toc288414116 726.4.1Memasukkan Data PAGEREF _Toc288414117 726.4.2Mengambil Data PAGEREF _Toc288414118 726.4.3Mengubah Data PAGEREF _Toc288414119 756.4.4Menghapus Data PAGEREF _Toc288414120 756.5Menggunakan phpMyAdmin PAGEREF _Toc288414121 766.5.1Bekerja dengan Pengguna PAGEREF _Toc288414122 76BAB 7 :Menggunakan PHP PAGEREF _Toc288414123 807.1Pengertian PHP PAGEREF _Toc288414124 817.2Halo, Dunia! PAGEREF _Toc288414125 817.3Mendokumentasikan Dokumen PHP PAGEREF _Toc288414126 837.4Menggunakan Variabel PAGEREF _Toc288414127 847.4.1Tipe Data dalam Variabel PAGEREF _Toc288414128 867.5Berkerja dengan Angka PAGEREF _Toc288414129 877.6Bekerja dengan String PAGEREF _Toc288414130 887.7Bekerja dengan Tanggal dan Waktu PAGEREF _Toc288414131 907.8Memproses Formulir PAGEREF _Toc288414132 927.9Membuat Halaman Dinamis PAGEREF _Toc288414133 947.10Menggunakan Array PAGEREF _Toc288414134 967.10.1Map PAGEREF _Toc288414135 977.10.2Array Multidimensi PAGEREF _Toc288414136 987.11Mengatur Alur program PAGEREF _Toc288414137 997.11.1Menggunakan Kondisi PAGEREF _Toc288414138 1007.11.2Menggunakan Percabangan PAGEREF _Toc288414139 1027.11.3Menggunakan Pengulangan PAGEREF _Toc288414140 1067.12Menggunakan Fungsi PAGEREF _Toc288414141 110BAB 8 :Menghubungkan PHP dengan Basis Data PAGEREF _Toc288414142 1128.1Membuat Koneksi PAGEREF _Toc288414143 1128.2Mengambil Data PAGEREF _Toc288414144 1148.3Memasukkan Data PAGEREF _Toc288414145 1188.4Mengubah Data PAGEREF _Toc288414146 1208.5Menghapus Data PAGEREF _Toc288414147 123BAB 9 :Lebih Lanjut dengan PHP PAGEREF _Toc288414148 1259.1Menggunakan Session PAGEREF _Toc288414149 1269.2Menerima Upload Berkas PAGEREF _Toc288414150 1309.3Mengirim E-Mail PAGEREF _Toc288414151 131BAB 10 :Mendeploy Situs Web PAGEREF _Toc288414152 13210.1Membuat Akun PAGEREF _Toc288414153 13310.2Mendeploy Basis Data PAGEREF _Toc288414154 13710.3Mendeploy Situs Web PAGEREF _Toc288414155 141<br />Pengenalan Internet<br />Pengertian Internet<br />Internet adalah gabungan dari banyak jaringan-jaringan komputer yang terhubung secara global, mulai dari jaringan komputer pribadi perseorangan, perusahaan, pendidikan, hingga pemerintahan. Internet digunakan untuk saling bertukar informasi antara sebuah komputer dengan komputer lainnya di berbagai belahan dunia dengan sangat cepat.<br />Sejarah Internet<br />Cikal bakal internet berasal dari sebuah proyek yang dilaksanakan oleh DARPA (Defense Advanced Research Project Agancy), sebuah agensi dari departemen pertahanan Amerika Serikat pada tahun 1958. Proyek ini bertujuan untuk menghubungkan komputer-komputer yang terdapat pada setiap markas militer tentara Amerika Serikat sehingga proses komunikasi dan manajemen informasi dapat terlaksana dengan lebih baik. Jaringan komputer antar markas tersebut dikenal dengan nama ARPANET.<br />Melihat kesuksesan dari ARPANET dalam mempercepat proses komunikasi jarak jauh, dunia bisnis mulai tertarik dan berusaha untuk membuat jaringan yang serupa. Pada Maret 1976, ITU (International Telecommunication Union), sebuah organisasi internasional yang berfungsi untuk mengatur standar komunikasi, meresmikan sebuah protokol yang dinamakan X.25. Protokol ini berfungsi untuk menetapkan standar komunikasi antar komputer melalui kabel telepon. Protokol ini pertama kali digunakan oleh Kantor Pos Inggris, Western Union, dan Tymnet pada tahun 1978.<br />Dalam waktu singkat, protokol X.25 berkembang dengan pesat dan mulai menjangkau konsumen pribadi pada tahun 1979. Walaupun begitu, layanan yang disediakan hanyalah berupa layanan surat elektronik (e-mail) dan papan pesan (BBS/Bulletin Board System).<br />Sekitar tahun 1980, protokol TCP/IP telah berkembang menjadi sebuah protokol standar yang dapat digunakan oleh setiap komputer, dan secara efektif telah menggeser protokol-protokol komunikasi lainnya yang pada saat itu saling berbeda-beda tergantung dari masing-masing produsen komputer. Walaupun begitu, proses komunikasi yang terjadi antara satu komputer dengan komputer lainnya masih bersifat terbatas dan internal saja.<br />Internet yang seperti dikenal sekarang ini dipelopori oleh seorang ahli fisika dari Inggris yang bernama Tim Berners-Lee dari CERN, sebuah lembaga penelitian tenaga nuklir Eropa. Pada awalnya ia ingin mempermudah proses pertukaran informasi penelitian antara satu lembaga dengan lembaga lainnya. Untuk mencapati tujuannya, ia memulai sebuah proyek yang dinamakan World Wide Web (WWW), yaitu sebuah sistem yang dapat digunakan untuk bertukar informasi tidak hanya melalui surat eletronik dan papan pesan tetapi juga melalui halaman-halaman atau artikel-artikel yang dapat dengan mudah dibaca oleh setiap orang seperti halaman web yang dikenal sekarang ini.<br />Pada saat ini, World Wide Web telah berkembang sangat pesat dan merevolusi proses komunikasi yang telah ada. Pada tahun 2010, diperkirakan ada 1.97 miliar orang pengguna internet aktif.<br />Situs Web dan Halaman Web<br />Jika berbicara mengenai internet, tentunya situs web (website) dan halaman web (webpage) adalah istilah-istilah yang tidak dapat dipisahkan. Namun tahukan Anda bahwa keduanya adalah hal yang sangat berbeda?<br />Halaman Web<br />Halaman web adalah sebuah dokumen yang paling umum dan paling penting di dalam internet. Halaman web berisikan berbagai macam informasi dalam berbagai bentuk dan media. Mulai dari teks, gambar, audio, video dan bahkan media interaktif.<br />Halaman web pada umumnya menggunakan format dokumen HTML (Hypertext Markup Language) yang akan Anda pelajari pada bab selanjutnya. Untuk menampilkan sebuah halaman web, Anda akan memerlukan sebuah aplikasi khusus yang dikenal dengan istilah peramban web (web browser). Aplikasi peramban akan mengambil halaman yang Anda inginkan dari internet dan menampilkannya pada layar monitor dari komputer Anda. Halaman web pada umumnya juga saling terhubung dengan halaman web lainnya melalui sebuah tautan (link) yang dikenal dengan istilah hyperlink.<br />Situs Web<br />Jika halaman web diibaratkan sebagai sebuah halaman, maka situs web dapat diibaratkan sebagai sebuah buku. Sebuah situs web memiliki banyak halaman web yang memiliki informasi yang serupa dan saling berhubungan.<br />Sebagai contoh, situs web dari Universitas Indonesia memiliki halaman-halaman web yang berisikan informasi tentang berbagai progam studi yang terdapat pada Universitas Indonesia. Situs web Universitas Indonesia tentunya tidak memiliki informasi tentang harga mobil dari produsen Toyota.<br />Cara Kerja Halaman Web<br />Apabila Anda membuka sebuah halaman web dengan menggunakan peramban web Anda, maka secara garis besar akan terjadi proses sebagai berikut :<br />1.Anda memasukkan URL dari halaman web yang inginkan Anda buka pada peramban web Anda.<br />2.Peramban web akan mencari alamat server dari situs web yang memiliki halaman web tersebut<br />3.Peramban web akan meminta halaman web yang Anda inginkan dari server tersebut.<br />4.Server akan memproses permintaan tersebut dan mengirimkan hasilnya kepada peramban web.<br />5.Peramban web akan memproses data yang didapatkan dari server tersebut dan menampilkannya pada layar monitor.<br />Macam Macam Halaman Web<br />Pada dasarnya, ada dua macam halaman web, yaitu halaman web statis dan halaman web dinamis. Sesuai dengan namanya, isi atau konten yang terdapat pada halaman web statis bersifat tetap dan tidak berganti-ganti, sedangkan isi atau konten yang terdapat pada halaman web dinamis akan berganti-ganti sesuai dengan kondisi dan/atau keadaan tertentu.<br />Sebagai contoh, apabila Anda membuka halaman web dari situs surat elektronik seperti Gmail, maka halaman tersebut akan menampilkan surat-surat yang Anda memiliki. Sedangkan apabila teman Anda membuka halaman web yang sama, maka surat-surat yang akan ditampilkan adalah surat-surat yang dimiliki oleh teman Anda. Inilah yang dimaksud dengan halaman web dinamis, satu halaman yang sama tetapi dapat menampilkan isi atau konten yang berbeda.<br />Sebuah halaman web dinamis memerlukan sebuah skrip atau program yang akan dijalankan pada server web untuk menentukan konten yang akan dimasukkan ke dalam halaman web. Ada banyak bahasa pemrograman yang dapat digunakan untuk melakukan hal ini, salah satu di antaranya yang paling populer adalah PHP (PHP: Hypertext Preprocessor). Selain PHP, ada pula bahasa-bahasa lainnya seperti ASP.NET, Perl, Python, Ruby, Java, ColdFusion, dan sebagainya.<br />Menggunakan HTML<br />Pengertian dan Sejarah HTML<br />Jika Anda ingin membuat sebuah halaman web, maka bahasa HTML adalah sebuah bahasa yang harus Anda pelajari. Semua halaman web yang Anda temui di dalam jaringan Internet sebenarnya adalah sebuah dokumen teks yang dibuat dengan menggunakan bahasa HTML. Dokumen teks HTML tersebut selanjutnya akan diterjemahkan oleh aplikasi web browser menjadi sebuah rangkaian teks, gambar, audio, dan bahkan video yang Anda kenali sebagai sebuah halaman web.<br />HTML sendiri adalah kepanjangan dari HyperText Markup Language, yang memiliki arti sebagai beikut :<br />,[object Object]
TextMenandakan bahwa HTML adalah suatu kumpulan dari teks.
MarkupBahasa HTML adalah sebuah bahasa markup, yaitu sebuah bahasa yang dapat digunakan untuk memberikan markup atau keterangan tambahan pada sesuatu. Misalkan, huruf yang bercetak tebal, keterangan warna, paragraf, gambar, dan sebagainya.
LanguageSeperti namanya, HTML adalah sebuah ...bahasa.HTML pertama kali ditemukan pada tahun 1990 oleh sebuah ahli fisika dari Inggris yang bernama Tim Berners Lee. Pada awalnya, bahasa HTML tidaklah dimaksudkan untuk membuat sebuah halaman web yang seperti Anda kenal seperti sekarang ini. Melainkan, HTML dirancang untuk mempermudah proses pertukaran dokumen dan informasi penelitian antara suatu lembaga penelitian dengan lembaga penelitian lainnya melalui jaringan Internet. <br />Tidak lama setelah bahasa ini ditemukan, para pelaku bisnis mulai tertarik dengan kemampuan yang dimiliki oleh HTML, dan bermaksud untuk menggunakan bahasa tersebut untuk urusan bisnis, seperti untuk beriklan dan memberikan informasi-informasi seputar perusahaannya. Setelah itu, HTML mulai berkembang secara pesat dan menjadi tulang punggung dari Internet pada jaman sekarang. Bahkan, sampai sekarang pun HTML masih terus berkembang dengan pesat.<br />Proses perkembangan dari HTML diatur oleh sebuah lembaga internasional yang bernama W3C (World Wide Web Consortium). Lembaga ini berfungsi untuk menjaga agar HTML tetap menjadi sebuah standar internasional sebagai sebuah bahasa untuk membuat halaman web. Dengan adanya standar ini, setiap pembuat web dapat memastikan bahwa halaman web yang telah dibuat olehnya dapat ditampilkan pada setiap pengunjung sesuai dengan keinginannya, tidak peduli perangkat keras atau perangkat lunak apapun yang digunakan oleh pengunjung tersebut.<br />Bahasa HTML yang akan dipelajari dalam buku ini adalah hasil perkembangan yang terbaru dari HTML, yaitu HTML5. Berbeda dengan versi-versi HTML yang sebelumnya seperti HTML 4.01 atau XHTML (eXtended HyperText Markup Language, bahasa HTML yang telah ditambahkan kegunaannya) 1.0 dan 1.1, HTML5 memiliki banyak fitur multimedia terbaru yang dapat membuat sebuah halaman web menjadi lebih menarik dan interaktif.<br />Sekilas, HTML terlihat sebagai sebuah bahasa yang memiliki kemampuan yang hebat. Namun, sebenarnya bahasa HTML memiliki banyak kekurangan dan keterbatasan didalamnya. Oleh karena itu, untuk membuat sebuah halaman web yang menarik, Anda akan memerlukan bahasa-bahasa lain yang dapat digunakan untuk menutupi kekurangan dan keterbatasan yang ada pada HTML.<br />Sebagai contoh, halaman web yang hanya dibuat dengan hanya menggunakan bahasa HTML tidak dapat memiliki tampilan yang menarik. Oleh karena itu, seringkali HTML digabungkan dengan dokumen CSS (Cascading Style Sheet) yang dapat digunakan untuk mempercantik tampilan dari sebuah halaman web. HTML tidak dapat membuat animasi pada halaman web. Untuk ini, dapat digunakan teknologi JavaScript, Flash, atau Silverlight. HTML sendiri juga tidak dapat berinteraksi dengan pengunjung atau menampilkan data-data yang terdapat pada sebuah database. Jika Anda ingin membuat halaman web Anda dapat melakukan hal tersebut, maka Anda perlu menggabungkan HTML dengan sebuah bahasa pemrograman server seperti PHP, ASP, Java, Python, Ruby, dan sebagainya.<br />Bersiap-Siap<br />Untuk membuat sebuah halaman web dengan menggunakan bahasa HTML, Anda akan memerlukan dua buah aplikasi yang sangat penting, yaitu aplikasi text editor dan aplikasi web browser. Aplikasi text editor akan digunakan untuk membuat dokumen HTML dimana nantinya Anda akan mengetik kode-kode yang terdapat pada bahasa HTML. Sedangkan aplikasi web browser akan digunakan untuk menampilkan dokumen HTML yang telah Anda buat sebagai halaman web.<br />Untungnya, jika Anda menggunakan sebuah sistem komputer yang menggunakan sistem operasi berbasis Microsoft Windows (versi apa saja, mulai dari Windows 95 sampai Windows 7), Apple Mac OS X, atau bahkan berbagai macam distro dari Linux, Anda sudah memiliki kedua aplikasi tersebut pada komputer Anda.<br />Pada sistem operasi Microsoft Windows, Anda sudah memiliki aplikasi Notepad sebagai text editor dan Internet Explorer sebagai web browser. Pada sistem operasi Apple Mac OSX, ada TextEdit sebagai (seperti yang Anda duga) text editor dan Safari sebagai web browser. Jika Anda menggunakan sistem operasi berbasis Linux, pilihannya lebih beragam lagi. Anda mungkin akan memiliki Gedit, Kate, Mousepad, atau Leafpad sebagai text editor Anda tergantung dari distro yang Anda gunakan. Untuk web browser pada Linux, umumnya menggunakan Firefox.<br />Walaupun begitu, apabila Anda merasa aplikasi-aplikasi tersebut masih memiliki kekurangan, tentunya Anda dapat menggunakan aplikasi text editor dan web browser lain yang sesuai dengan keinginan Anda.<br />Alternatif Text Editor<br />Pada dasarnya, Anda dapat menggunakan aplikasi text editor apapun untuk membuat sebuah halaman web dengan menggunakan bahasa HTML. Namun, ada baiknya Anda menggunakan aplikasi text editor yang dikhususkan untuk pemrograman, yaitu aplikasi text editor yang memiliki fitur syntax highlighting dan line numbering.<br />Fitur syntax highlighting atau pewarnaan sintaks/teks adalah suatu fitur utama yang perlu diperhatikan dalam memilih sebuah aplikasi text editor. Dengan adanya fitur ini, kode-kode HTML yang Anda ketikkan akan diberikan warna yang berbeda-beda sesuai dengan fungsinya. Pemberian warna ini dapat digunakan untuk membantu Anda melihat struktur dan mencari kesalahan dari sebuah dokumen HTML.<br />Selain syntax highlighting, fitur lain yang perlu diperhatikan adalah fitur line numbering. Melalui fitur ini, aplikasi text editor akan memberikan nomor baris pada setiap baris kode yang Anda buat. Pada awalnya, fitur ini mungkin terlihat sepele, namun fitur ini akan menjadi sangat berguna setelah Anda mempelajari pemrograman halaman web dengan PHP, karena jika ada suatu kesalahan pada halaman web Anda, PHP akan memberitahukan letak kesalahan tersebut melalui nomor baris. Jika text editor Anda tidak memiliki fitur ini, tentu akan sulit untuk mengetahui letak dari kesalahan tersebut.<br />Mungkin Anda pernah mendengar sebuah aplikasi yang bernama Adobe Dreamweaver atau Microsoft Frontpage (yang notabene sudah berganti nama menjadi Microsoft Expression Web). Pada aplikasi-aplikasi tersebut, Anda dapat membuat sebuah halaman web secara visual dan tanpa perlu mengetahui bahasa HTML, cukup melakukan drag-and-drop komponen tampilan yang Anda inginkan pada halaman web Anda dan program tersebut akan menerjemahkannya menjadi kode-kode HTML secara otomatis. Aplikasi-aplikasi seperti ini dikenal dengan istilah WYSIWYG (What You See Is What You Get).<br />Walaupun terdengar menarik, perlu diperhatikan bahwa penggunaan aplikasi-aplikasi ini tidaklah dianjurkan jika Anda ingin belajar membuat sebuah halaman web dengan menggunakan HTML. Kode HTML yang dibuat secara otomatis oleh WYSIWYG pada umumnya sangatlah berantakan dan tidak memenuhi standar HTML yang ditetapkan oleh W3C, menjadikan halaman web Anda akan memiliki tampilan yang tidak konsisten pada aplikasi web browser yang berbeda-beda. Selain itu, jika Anda tidak memahami struktur dari dokumen HTML yang dibuat secara otomatis tersebut, Anda akan sangat sulit menggabungkan pemrograman PHP pada halaman tersebut.<br />Dalam buku ini, penulis akan menggunakan aplikasi text editor yang bernama Notepad++. Penulis menggunakan aplikasi ini karena aplikasi ini telah memiliki fitur-fitur pemrograman yang lengkap, tentu saja, diantaranya adalah fitur syntax highlighting dan line numbering. Selain itu, aplikasi ini juga dapat Anda peroleh dengan gratis, karena aplikasi ini adalah aplikasi yang bersifat open-source. Anda dapat mendapatkan aplikasi ini melalui situs web http://notepad-plus-plus.org/.<br />Selain Notepad++, ada banyak aplikasi text editor sejenis yang dapat Anda peroleh secara gratis, seperti Gedit (http://projects.gnome.org/gedit/), jEdit (http://www.jedit.org/), Komodo Edit (http://www.activestate.com/komodo-edit), Notepad2 (http://www.flos-freeware.ch/notepad2.html), Programmer’s Notepad (http://www.pnotepad.org/), SciTE (http://www.scintilla.org/SciTE.html), dan banyak lainnya. Pilihlah aplikasi text editor yang paling cocok dengan Anda.<br />Alternatif Web Browser<br />Sebagai seorang pembuat web, tentunya Anda ingin situs web Anda diakses oleh banyak orang. Setiap orang yang mengunjungi halaman web Anda tentunya akan menggunakan aplikasi web browser yang berbeda-beda. Ada orang yang menggunakan Firefox, ada yang menggunakan Opera, Safari, Chrome, Internet Explorer, dan sebagainya. Anda haruslah memastikan bahwa halaman web Anda akan tampil dengan baik dan benar sesuai dengan yang Anda inginkan pada setiap aplikasi web browser tersebut.<br />Oleh karena itu, idealnya Anda juga harus memiliki banyak aplikasi web browser untuk mencoba apakah halaman web Anda memiliki tampilan yang konsisten atau tidak. Untungnya, hampir semua aplikasi web browser dapat Anda peroleh dengan gratis. Namun, pastikanlah Anda selalu menggunakan versi terbaru dari aplikasi web browser tersebut.<br />Anda dapat mendapatkan Firefox pada situs http://www.mozilla.com/id/firefox/, Opera pada http://www.opera.com/, Chrome pada http://www.google.com/chrome/, dan Safari pada http://www.apple.com/safari/.<br />“Halo, Dunia!”<br />Sebuah program “Halo, Dunia!” dapat dikatakan menjadi sebuah tradisi yang tidak dapat dipisahkan dalam mempelajari sebuah bahasa komputer. Program halo dunia pada dasarnya adalah sebuah program yang sangat sederhana, program ini berfungsi untuk menampilkan teks “Halo, Dunia!” pada layar monitor. Dalam HTML, yang bukan merupakan sebuah bahasa pemrograman, tentunya Anda tidak akan membuat sebuah program halo dunia. Melainkan, karena HTML adalah sebuah bahasa yang digunakan untuk membuat halaman web, maka Anda akan membuat sebuah halaman web yang menampilkan teks “Halo, Dunia!”.<br />Untuk membuat halaman tersebut, pertama-tama bukalah aplikasi text editor favorit Anda dan buatlah sebuah dokumen HTML yang berisikan kode-kode seperti yang terdapat di bawah ini. Jangan khawatir jika Anda tidak memahami makna dari kode-kode HTML tersebut, Anda akan segera mempelajarinya dalam bagian selanjutnya.<br /><!doctype html><br /><html><br /><head><br /><title>Halo, Dunia!</title><br /></head><br /><body><br />Belajar HTML sangat mudah dan menyenangkan!<br /></body><br /></html><br />Setalah itu. simpanlah dokumen yang telah Anda buat tersebut tersebut dengan nama halo_dunia.html. Anda dapat menyimpan dokumen tersebut dimana saja sesuai dengan keinginan Anda. Perlu diperhatikan disini bahwa Anda harus menyimpan dokumen tersebut dengan ekstensi.html, hal ini ditujukan untuk memberitahukan kepada komputer bahwa dokumen tersebut adalah sebuah dokumen HTML. <br />Jika sudah, bukalah dokumen tersebut dengan menggunakan peramban web Anda dengan melakukan drag-n-drop dari jendela file manager (Windows Explorer jika Anda menggunakan Windows) ke jendela web browser Anda. Jika semua berjalan dengan baik, Anda akan melihat tulisan “Belajar HTML sangat mudah dan menyenangkan!” pada web browser Anda. Selamat, Anda telah berhasil membuat halaman web pertama Anda!<br />Struktur Dokumen HTML<br />Sebuah halaman web yang dibuat dengan menggunakan HTML pada dasarnya terdiri dari banyak komponen-komponen yang dikenal dengan istilah elemen. Elemen dapat dikatakan sebagai sebuah bagian dari suatu halaman web. Elemen dapat berupa sebuah teks, gambar, link, atau bahkan komponen multimedia seperti audio atau video. Dalam sebuah dokumen HTML, kumpulan dari elemen-elemen ini akan disusun dengan sedemikian rupa sehingga dapat dimengerti dan ditampilkan oleh web browser. <br />Elemen sendiri terdiri dari beberapa bagian, yaitu tag dan konten. Agar dapat lebih memahami bentuk dari sebuah elemen pada sebuah dokumen HTML, perhatikanlah diagram berikut ini :<br />ElemenStart TagKontenEnd Tag<strong>Google</strong><br />Tag adalah sebuah label yang diberikan pada sebuah konten. Tag adalah komponen yang terdapat didalam tanda < dan >. Tag berfungsi untuk memberikan keterangan tambahan terhadap sebuah konten atau isi dari sebuah halaman tambahan. Sebagai contoh, tag <strong></strong> berfungsi untuk memberi keterangan pada web browser bahwa segala sesuatu yang ada di dalamnya akan ditampilkan dengan menggunakan huruf yang bercetak tebal (bold). Pada contoh diatas, teks “Google” akan ditampilkan dengan cetak tebal.<br />Sebuah tag pada umumnya terdiri dari dua macam, yaitu start tag dan end tag. Start tag dan end tag akan mengawali dan mengakhiri konten yang akan diberikan keterangan tambahan oleh tag tersebut. Pada penulisannya, end tag selalu akan menggunakan simbol garis miring. Sekarang perhatikanlah contoh berikut ini :<br /><strong>Facebook</strong> Twitter<br />Pada contoh diatas, teks “Facebook” akan ditampilkan dengan bercetak tebal, karena terdapat diantara tag <strong></strong>. Sedangkan, teks “Twitter” tidak akan ditampilkan dengan cetak tebal karena tidak berada di dalam tag <strong></strong>.<br />Walaupun begitu, ada pula beberapa elemen HTML yang tagnya hanya terdiri dari satu buah tag saja, tanpa adanya pasangan start tag dan end tag, sebagai contoh, <br> yang berfungsi untuk membuat baris baru diantara teks. Tag seperti ini dikenal dengan istilah self-closing tag karena tag tersebut menutup atau mengakhiri dirinya sendiri dengan sebuah tanda garis miring yang dituliskan sebelum tanda kurung siku penutup.<br />Selain itu, sebuah tag juga dapat memiliki satu atau lebih atribut. Atribut berfungsi untuk memberikan informasi tambahan kepada sebuah elemen. Perhatikanlah diagram berikut ini :<br />ElemenStart TagKontenEnd TagAtribut<ahref=quot; http://google.comquot; >Google</a><br />Pada diagram di atas, tag <a></a> berfungsi untuk membuat sebuah link pada halaman web. Penggunaan tag di atas pada sebuah halaman web, akan menghasilkan sebuah link dengan teks “Google” yang apabila diklik, akan memindahkan Anda ke alamat web http://google.com. Perlu diperhatikan bahwa alamat tujuan http://google.com dituliskan pada sebuah atribut yang bernama href (hypertext reference).<br />Atribut sendiri pada dasarnya terdiri dari dua buah bagian, yaitu name dan value. Pada contoh diatas, href adalah sebuah attribute name sedangkan http://google.com adalah sebuah attribute value. Dalam penulisannya, attribute value diletakkan di dalam sepasang tanda kutip dua. Jika dituangkan dalam sebuah diagram, maka akan menjadi seperti berikut ini :<br />ElemenStart TagKontenEnd TagAtributNameValue<ahref=quot; http://google.comquot; >Google</a><br />Selain itu, konten atau isi yang terdapat pada sebuah elemen tidaklah terbatas pada teks saja. Melainkan, sebuah elemen bisa saja berisikan elemen lainnya. Perhatikanlah contoh berikut ini :<br /><strong><br /><em><br />Belajar HTML<br /></em><br /></strong><br />Pada contoh di atas, konten yang terdapat pada elemen strong adalah elemen lain, yaitu elemen em yang berfungsi untuk membuat teks menjadi bercetak miring. Penggabungan kedua buah elemen ini akan menjadikan teks “Belajar HTML” yang terletak di dalamnya ditampilkan dengan cetak tebal dan miring.<br />Dalam penggunaan elemen yang memiliki elemen lain di dalamnya, perlu diperhatikan urutan penutupan masing-masing tag dari elemen-elemen tersebut. Penutupan tag ini mengikuti aturan yang dikenal dengan istilah FILO (First In, Last Out), dimana tag yang dibuka pertama kali akan ditutup terakhir kali. Untuk lebih jelasnya, perhatikanlah contoh berikut ini :<br />Benar :<strong><em> Satu</em></strong>Salah :<strong><em> Satu</strong></em><br />Mengunjungi Kembali “Halo, Dunia!”<br />Setelah Anda memahami struktur dari sebuah dokumen HTML, marilah kita membahas kembali mengenai elemen-elemen yang terdapat pada halaman “Halo, Dunia!” yang telah Anda buat sebelumnya.<br /><!doctype html><br />Elemen doctype berfungsi untuk memberitahukan versi HTML yang digunakan dalam sebuah halaman web. Penulisan doctype seperti diatas akan memberitahukan kepada web browser bahwa halaman web Anda menggunakan HTML 5. Apabila elemen ini tidak digunakan, maka web browser bekerja dalam quirks mode, dimana nantinya akan menghasilkan tampilan yang tidak sesuai dengan keinginan Anda.<br /><html> ... </html><br />Elemen html berfungsi untuk menandakan awal dan akhir dari sebuah dokumen HTML.<br /><head> ... </head><br />Elemen head berfungsi untuk menandakan bagian kepala (anggaplah seperti kepala/kop surat) dari sebuah halaman web. Semua yang terdapat di dalam bagian ini tidak akan tampil pada web browser dan hanya berfungsi untuk memberikan keterangan atau informasi tambahan mengenai halaman web tersebut, seperti identitas pembuat, hak cipta, judul halaman, dan sebagainya.<br /><title> ... </title><br />Elemen title berfungsi untuk memberikan judul pada sebuah halaman web. Judul ini biasa akan tampil pada bagian tab dari web browser dan berfungsi untuk mempermudah pengunjung halaman web untuk mengenali halaman web Anda dari halaman-halaman yang terdapat pada tab lainnya. Elemen ini hanya dapat diletakkan di dalam elemen head karena elemen ini hanya berfungsi sebagai informasi tambahan.<br /><body> ... </body><br />Jika elemen head dapat diibaratkan sebagai kepala surat, maka elemen body adalah badan atau isi dari surat tersebut. Semua yang terdapat di dalam elemen ini akan ditampilkan pada web browser. Di dalam elemen inilah nantinya Anda akan membuat isi dari halaman web Anda. <br />Bekerja dengan Teks<br />Fungsi utama dari sebuah halaman web adalah menyampaikan suatu informasi kepada orang lain melalui Internet. Untuk menyampaikan informasi tersebut, tentunya Anda akan memerlukan teks atau tulisan-tulisan yang berisikan informasi tersebut.<br />Pada contoh halaman “Halo, Dunia!” yang telah Anda buat, Anda hanya meletakkan teks dengan begitu saja di dalam elemen body. Ini bukanlah cara yang terbaik untuk meletakkan teks di dalam sebuah halaman web, melainkan, Anda harus meletakkan teks di dalam elemen yang khusus yang berfungsi untuk memberikan makna semantis kepada teks tersebut. Maksudnya adalah bahwa Anda harus menjelaskan apakah fungsi dari teks tersebut, apakah teks itu berfungsi sebagai judul bab, judul subbab, paragraf isi, keterangan, daftar, atau tabel.<br />Membuat Paragraf<br />Paragraf dalam sebuah halaman web didefinisikan dengan menggunakan elemen p(paragraph). Penggunaan elemen ini sangatlah mudah, Anda cukup memberikan tag <p> pada awal dari setiap paragraf yang ingin Anda buat.<br />SINTAKS :<br /><p>teks paragrafCONTOH :<!doctype html><br /><html><br /><head><br /><title>Paragraf</title><br /></head><br /><body><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /></body><br /></html><br />Membuat Judul<br />Dalam HTML, ada 6 elemen yang dapat Anda gunakan untuk memberikan judul pada paragraf Anda, yaitu elemen h1, h2, h3, h4, h5, dan h6. Dimana elemen h1 berfungsi sebagai judul utama dan h6 berfungsi sebagai judul subbab tingkatan keenam. Berbeda dengan elemen p, Anda perlu menggunakan start tag dan end tag pada elemen judul.<br />Dalam pembuatan judul, perlu diperhatikan bahwa Anda juga harus menggunakan judul-judul subbab secara berurutan. Sebagai contoh, judul h4 haruslah menjadi subbab dari judul h3, dimana h3 sendiri adalah subbab dari judul h2.<br />SINTAKS :<br /><h1>teks judul</h1>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Judul</title><br /></head><br /><body><br /><h1>Lorem Ipsum</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h2>Dolor sit Amet</h2><br /><p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><h2>Consectetur Adipiscing Elit</h2><br /><p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /></body><br /></html><br />Membuat Daftar<br />Selain paragraf dan judul, Anda juga dapat membuat daftar pada halaman web Anda. Ada tiga macam elemen yang dapat Anda gunakan untuk membuat daftar, yaitu elemen ul(unordered list)yang berfungsi untukuntuk membuat daftar yang tidak terurut, elemen ol(ordered list)yang berfungsi untuk untuk membuat daftar yang berurut, dan elemen li(list item) yang berfungsi untuk membuat isi pada sebuah daftar.<br />Dalam penggunaannya, Anda akan terlebih dahulu mendefinisikan jenis daftar yang ingin Anda buat (terurut atau tidak terurut) dengan menggunakan elemen ul atau ol, lalu Anda menamabahkan isi ke dalam daftar tersebut dengan menggunakan elemen li.<br />SINTAKS :<br /><ul><li>isi pertama<br /><li>isi kedua</ul><br /><ol><li>isi pertama<br /><li>isi kedua</ol>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Daftar</title><br /></head><br /><body><br /><h1>Contoh daftar</h1><br /><h2>Tidak terurut</h2><br /><ul><br /><li>Lorem ipsum<br /><li>Dolor sit amet<br /><li>Consectetur adipiscing elit<br /></ul><br /><h2>Terurut</h2><br /><ol><br /><li>Lorem ipsum<br /><li>Dolor sit amet<br /><li>Consectetur adipiscing elit<br /></ol><br /><h2>Daftar di dalam daftar</h2><br /><ul><br /><li>Lorem<br /><li>Ipsum :<br /><ul><br /><li>Dolor<br /><li>Sit<br /></ul><br /><li>Amet :<br /><ol><br /><li>Consectetur<br /><li>Adipiscing :<br /><ul><br /><li>Elit<br /><li>Etiam<br /></ul><br /><li>Aliquam<br /></ol><br /><li>Vitae<br /></ul><br /></body><br /></html><br />Memformat Teks<br />Sampai saat ini, halaman-halaman web yang telah Anda buat mungkin terasa hambar karena hanya berupa teks biasa saja tanpa adanya format khusus dan penggunaan warna dan jenis serta ukuran huruf yang menarik. Sekarang, marilah mencoba memformat teks yang terdapat pada halaman web Anda agar halaman web Anda menjadi lebih menarik.<br />Cetak Tebal dan Miring<br />Penggunaan huruf yang bercetak tebal dan miring dapat membantu Anda untuk memberikan penekanan pada suatu bagian dari sebuah teks. Untuk membuat efek seperti ini, Anda akan memerlukan elemen strong dan em. Elemen strong berfungsi untuk membuat cetak tebal dan elemen em berfungsi untuk membuat cetak miring.<br />SINTAKS :<strong>teks</strong><em>teks</em>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Cetak Tebal dan Miring</title><br /></head><br /><body><br /><p>Teks ini menggunakan cetak <strong>tebal</strong><br /><p>Teks ini menggunakan cetak <em>miring</em><br /><p>Teks ini menggunakan cetak <strong><em>tebal dan miring</em></strong><br /></body><br /></html><br />Jenis, Ukuran, dan Berat Huruf<br />Untuk mengatur jenis dan ukuran huruf dari sebuah teks, Anda dapat menambahkan atribut style pada elemen yang ingin Anda atur jenis dan ukuran hurufnya. Atribut style, sesuai namanya, adalah sebuah atribut yang berfungsi untuk memberikan format atau “gaya” pada elemen-elemen yang terletak di dalam sebuah halaman web.<br />Atribut ini memiliki banyak nilai atribut yang dapat Anda gunakan, namun, marilah terlebih dahulu berkenalan dengan nilai atribut font-family yang berfungsi untuk mengatur jenis huruf, dan nilai atribut font-size yang berfungsi untuk mengatur ukuran huruf. <br />Dalam penulisan nilai-nilai atribut dari atribut style, Anda perlu mengakhiri setiap nilai atribut dengan menggunakan sebuah tanda titik koma (;).<br />SINTAKS :<elemen style=quot; font-family: jenis huruf; font-size: ukuran huruf;quot; >teks</elemen>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Jenis dan Ukuran Huruf</title><br /></head><br /><body><br /><p style=quot; font-family: Georgia; font-size: 14pt;quot; ><br />Georgia adalah contoh jenis huruf serif<br /><p style=quot; font-family: Trebuchet MS; font-size: 10pt;quot; ><br />Trebuchet MS adalah contoh jenis huruf sans-serif<br /><p style=quot; font-family: Consolas; font-size: 16pt;quot; ><br />Consolas adalah contoh jenis huruf <strong>monospace</strong><br /></body><br /></html><br />Selain dengan menggunakan elemen strong, Anda juga dapat membuat teks bercetak tebal dengan mengatur “berat” huruf dengan menggunakan nilai atribut font-weight. Walaupun begitu, perlu diperhatikan bahwa penggunaan utama dari nilai atribut ini bukanlah untuk membuat huruf bercetak tebal melainkan untuk membuat huruf yang sudah bercetak tebal dari awal (seperti pada elemen h1) menjadi tidak bercetak tebal.<br />SINTAKS :<elemen style=quot; font-weight: bobot huruf;quot; >teks</elemen>OPSI BOBOT HURUF :bold -> Bercetak tebalnormal ->Tidak bercetak tebalCONTOH :<!doctype html><br /><html><br /><head><br /><title>Bobot huruf</title><br /></head><br /><body style=quot; font-family: Trebuchet MS; font-size: 12pt;quot; ><br /><h1>Judul ini bercetak tebal</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h1 style=quot; font-weight: normalquot; >Judul ini tidak bercetak tebal</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /></body><br /></html><br />Bila Anda perhatikan contoh di atas, dapat diketahui bahwa atribut style yang diberikan pada suatu elemen akan diterapkan pula kepada elemen-elemen lain yang berada di dalam elemen tersebut. Dalam contoh ini, atribut style=quot; font-family: Trebuchet MS; font-size: 12pt;quot; pada elemen body juga akan diterapkan pada elemen h1 dan p yang terdapat di dalamnya.<br />Variasi dan Dekorasi Teks<br />Selain menentukan jenis dan ukuran huruf, Anda juga bisa menentukan variasi dan dekorasi dari sebuah teks dengan menggunakan nilai atribut font-variant dan text-decoration pada atribut style. Perlu diketahui bahwa Anda dapat menggabungkan berbagai macam nilai atribut pada atribut style sesuai dengan kebutuhan Anda.<br />SINTAKS :<elemen style=quot; font-variant: variasi; text-decoration: dekorasi;quot; >teks</elemen>OPSI VARIASI :small-caps -> Huruf kecil kapitalOPSI DEKORASI :underline -> Bergaris bawahoverline -> Bergaris atasline-through -> Dicoretblink -> Berkedap-kedipCONTOH :<!doctype html><br /><html><br /><head><br /><title>Variasi dan Dekorasi Teks</title><br /></head><br /><body style=quot; font-family: Trebuchet MS; font-size: 14pt;quot; ><br /><ul><br /><li style=quot; font-variant: small-caps;quot; >Kapital kecil<br /><li style=quot; text-decoration: underline;quot; >Bergaris bawah<br /><li style=quot; text-decoration: line-through;quot; >Dicoret<br /><li style=quot; font-size: 24pt; text-decoration: blinkquot; >Halo, Dunia!<br /></ul><br /></body><br /></html><br />Perataan Teks<br />Anda juga dapat mengatur perataan dari teks yang terdapat di dalam halaman web Anda. Selayaknya pengaturan perataan teks yang terdapat di dalam sebuah aplikasi word prosesor, Anda dapat membuat teks Anda menjadi rata kiri, rata tengah, rata kanan, maupun justify (rata kanan dan kiri). Nilai atribut style yang digunakan kali ini adalah text-align.<br />SINTAKS :<elemen style=quot; text-align: perataan;quot; >teks</elemen>OPSI PERATAAN :left -> Rata kiricenter -> Rata tengahright -> Rata kanan<br />justify -> Rata kiri dan kananCONTOH :<!doctype html><br /><html><br /><head><br /><title>Perataan Teks</title><br /></head><br /><body style=quot; font-family: Trebuchet MS; font-size: 12pt;quot; ><br /><h1>Rata kiri</h1><br /><p style=quot; text-align: left;quot; >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h1>Rata tengah</h1><br /><p style=quot; text-align: center;quot; >Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><h1>Rata kanan</h1><br /><p style=quot; text-align: right;quot; >Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /><h1>Rata kiri dan kanan <em>(justify)</em></h1><br /><p style=quot; text-align: justify;quot; >Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu.<br /></body><br /></html><br />Jika Anda perhatikan, apabila nilai atribut text-align tidak digunakan, secara otomatis web browser akan menganggap teks tersebut menggunakan perataan rata kiri.<br />Indentasi Paragraf<br />Aturan penulisan paragraf di dalam Bahasa Indonesia mengharuskan baris pertama dari setiap paragraf diberikan indentasi (dibuat menjorok ke dalam) seperti halnya paragraf yang terdapat di dalam modul ini. Untuk melakukan hal ini, Anda dapat menggunakan nilai atribut text-indent.<br />SINTAKS :<elemen style=quot; text-indent: jarak;quot; >teks</elemen>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Indentasi Paragraf</title><br /></head><br /><body style=quot; font-family: Trebuchet MS; font-size: 12pt;quot; ><br /><h1>Paragraf tanpa indentasi</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h1>Paragraf dengan indentasi 1em</h1><br /><p style=quot; text-indent: 1em;quot; >Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><h2>Paragraf dengan indentasi 2em</h2><br /><p style=quot; text-indent: 2em;quot; >Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu.<br /></body><br /></html><br />Jarak Antar Baris<br />Selain perataan teks dan indentasi paragraf, Anda juga dapat mengatur jarak antara suatu baris dengan baris lainnya di dalam sebuah paragraf (line spacing). Nilai atribut yang dapat Anda gunakan untuk mengatur hal ini adalah line-height.<br />SINTAKS :<elemen style=quot; line-height: jarak;quot; >teks</elemen>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Jarak Antar Baris</title><br /></head><br /><body style=quot; font-family: Trebuchet MS; font-size: 12pt;quot; ><br /><h1>Paragraf tanpa pengaturan jarak antar baris</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h1>Paragraf dengan jarak antar baris 1 spasi</h1><br /><p style=quot; line-height: 1em;quot; >Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><h1>Paragraf dengan jarak antar baris 1.5 spasi</h1><br /><p style=quot; line-height: 1.5em;quot; >Curabitur at tortor dui. Nunc turpis justo, luctus quis eleifend sit amet, egestas sed justo. Morbi dapibus augue ac diam interdum consequat. Suspendisse nisl lorem, rutrum ut tempus at, venenatis id neque. Nulla fermentum molestie lacus, laoreet rhoncus sapien porta vel. Integer quis mi ac arcu adipiscing lacinia nec a arcu.<br /></body><br /></html><br />Penggunaan Warna<br />Ada dua macam warna yang dapat Anda berikan kepada teks di dalam halaman web Anda, yaitu warna latar belakan dan warna teks. Untuk memberikan warna latar belakang, Anda akan menggunakan nilai atribut background, sedangkan untuk warna teks Anda akan menggunakan nilai atribut color.<br />SINTAKS :<elemen style=quot; background: warna; color: warna;quot; >teks</elemen>OPSI WARNA :white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purpleCONTOH :<!doctype html><br /><html><br /><head><br /><title>Penggunaan Warna</title><br /></head><br /><body style=quot; background: black; color: white; font-family: Trebuchet MS; font-size: 12pt;quot; ><br /><h1 style=quot; color: red;quot; >Lorem Ipsum</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h1 style=quot; background: green;quot; >Dolor sit Amet</h1><br /><p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue. <br /><h1 style=quot; background: blue; color: black;quot; >Consectetur Adipiscing Elit</h1><br /><p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /></body><br /></html><br />Bekerja dengan Link<br />Sebuah situs web pada umumnya terdiri dari beberapa halaman web yang saling berkaitan, untuk mempermudah pengunjung situs web Anda berpindah dari satu halaman ke halaman lainnya, Anda dapat membuat link atau tautan dengan menggunakan elemen a(anchor).<br />Elemen a akan memerlukan sebuah atribut yang bernama href(hypertext reference). Atribut ini berfungsi untuk menetukan alamat tujuan dari suatu link yang juga dikenal dengan istilah URL (Uniform Resource Locator). Ada dua macam alamat tujuan yang dapat digunakan, yaitu absolute URL, dan relative URL.<br />Sebelum mengenal lebih lanjut tentang berbagai macam alamat tujuan, marilah terlebih dahulu mengetahui dasar pembuatan sebuah link.<br />SINTAKS :<a href=quot; alamat_tujuanquot; >teks</a>CONTOH :<!doctype html><br /><html><br /><head><br /><title>Link</title><br /></head><br /><body><br /><h1>Selamat datang!</h1><br /><p>Silahkan pilih halaman yang ingin Anda kunjungi :<br /><ul><br /><li><a href=quot; profil.htmlquot; >Profil</a><br /><li><a href=quot; galeri.htmlquot; >Galeri Foto</a><br /><li><a href=quot; http://saya.blogspot.comquot; >Blog</a><br /><li><a href=quot; http://www.facebook.com/sayaquot; >Facebook</a><br /></ul><br /></body><br /></html><br />Penggunaan relative URL akan menjadikan alamat halaman tempat asal link menjadi referensi. Untuk lebih memahami penggunaan alamat relatif, perhatikan bagan berikut ini :<br />Anggaplah bagan di atas adalah struktur dari sebuah situs web www.contoh.com, dimana berita dan galeri adalah sebuah folder/direktori. Berdasarkan pada bagan di atas, perhatikanlah contoh berikut ini :<br />,[object Object]
Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html, maka Anda dapat menggunakan <a href=”berita/2010.html”>. Untuk tujuan yang berada dalam folder yang berbeda, namun folder tersebut masih satu tingkatan dengan lokasi dokumen awal, maka perlu dituliskan nama folder dokumen tujuan.
Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman berita.html, maka Anda dapat menggunakan <a href=”../berita.html”>. Untuk tujuan yang berada pada folder lain yang memiliki tingkatan yang lebih tinggi, maka perlu dituliskan .. yang berarti satu folder diatas.
Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman laut.html, maka Anda dapat menggunakan <a href=”../galeri/laut.html”>. Ini adalah kombinasi dari perintah “naik ke satu folder diatas” dan “masuk ke dalam folder galeri”.Sedangkan penggunaan absolute URL akan menggunakan referensi lengkap dan tidak memperdulikan lokasi dari dokumen awal. Sebagai contoh, halaman hutan.html pada contoh diatas dapat diakses dengan menggunakan <a href=”http://www.contoh.com/galeri/hutan.html”>.<br />Sebuah link tidak hanya dapat mengubungkan sebuah halaman web dengan halaman web lainnya. Tautan juga dapat digunakan untuk menguhubungkan sebuah halaman web dengan berkas audio, video, gambar, dan sebagainya. <br />Bekerja dengan Gambar<br />Sebuah halaman web yang hanya berisikan teks saja tentunya terasa hambar dan membosankan. Penambahan gambar yang relevan terhadap informasi yang ingin Anda sampaikan kepada pengunjung situs web Anda tentunya dapat memberikan nilai lebih, sesuai dengan pepatah “sebuah gambar lebih bermakna dari pada seribu kata”.<br />Untuk menambahkan gambar pada halaman web Anda, Anda dapat menggunakan elemen img(image). Pada elemen ini, Anda harus memberikan sebuah atribut src(source) yang berfungsi untuk menentukan lokasi gambar yang dituju. Penggunaan atribut ini pada dasarnya sama dengan penggunaan atribut href pada elemen a, hanya saja, Anda hanya dapat mengarahkan alamat tujuannya terhadap sebuah file gambar saja.<br />Anda dapat menggunakan format gambar apa saja, baik itu jpg / jpeg, png, maupun gif. Walaupun begitu, ada baiknya Anda memastikan terlebih dahulu bahwa ukuran file gambar yang Anda gunakan tidak terlalu besar. Penggunaan gambar dengan ukuran file yang terlalu besar tentunya juga akan memerlukan waktu yang lama untuk ditampilkan pada pengunjung Anda yang tidak memiliki koneksi internet dengan kecepatan yang tinggi.<br />SINTAKS :<img src=quot; alamat_gambarquot; >CONTOH :<!doctype html><br /><html><br /><head><br /><title>Gambar</title><br /></head><br /><body><br /><h1>Social Network</h1><br /><h2>Facebook</h2><br /><a href=quot; http://facebook.com/quot; ><img src=quot; facebook.pngquot; ></a><br /><h2>Twitter</h2><br /><a href=quot; http://twitter.comquot; ><img src=quot; twitter.pngquot; ></a><br /></body><br /></html><br />Bekerja dengan Tabel<br />Selain daftar dan gambar, Anda juga dapat menambahkan tabel pada halaman web Anda. Sistem pembuatan tabel dengan menggunakan HTML menyerupai sistem pembuatan tabel dalam aplikasi spreadsheet seperti Microsoft Excel, dimana sebuah tabel terdiri dari baris (row), kolom (column), dan sel (cell). <br />Untuk sebuah tabel, Anda akan memerlukan beberapa elemen, yaitu elemen table, tr(table row), th(table header), dan td (table data). Elemen table berfungsi untuk mendefinisikan sebuah tabel. Elemen tr berfungsi untuk mendefinisikan sebuah baris dari suatu tabel. Elemen th berfungsi untuk mendefinisikan sebuah kolom judul. Elemen td berfungsi untuk mendefinisikan sebuah kolom data.<br />Elemen table dapat menggunakan atribut tambahan border yang berfungsi untuk menentukan ketebalan garis pembatas pada tabel tersebut. Selain itu, Anda juga dapat menggunakan atribut tambahan width untuk menentukan lebar dari suatu tabel. Atribut tambahan width juga dapat digunakan pada elemen th untuk mengatur lebar dari suatu kolom. Untuk elemen th dan td, Anda juga dapat menggunakan atribut align yang berfungsi untuk mengatur perataan dari suatu kolom.<br />SINTAKS :<table border=quot; ukuran_garisquot; width=quot; lebarquot; ><tr><br /><th width=quot; lebarquot; align=quot; perataanquot; >judul</th></tr><tr><td align=quot; perataanquot; >isi</td><br /></tr></table>OPSI UKURAN GARIS :0 ->tanpa garis1 sampai 10 -> dengan garis, semakin besar semakin tebal<br />OPSI LEBAR :%-> menggunakan persentasepx -> menggunakan satuan pikselOPSI PERATAAN :left -> Rata kiricenter -> Rata tengahright -> Rata kananCONTOH :<!doctype html><br /><html><br /><head><br /><title>Daftar Barang</title><br /></head><br /><body><br /><h1>Daftar Barang PT. Untung Untungan</h1><br /><table border=quot; 1quot; width=quot; 50%quot; ><br /><tr><br /><th width=quot; 10%quot; >No.</th><br /><th width=quot; 50%quot; >Nama Barang</th><br /><th width=quot; 10%quot; >Jumlah</th><br /><th width=quot; 30%quot; >Harga Satuan</th><br /></tr><br /><tr><br /><td>1</td><br /><td>Komputer</td><br /><td>50</td><br /><td>Rp 5.000.000,00</td><br /></tr><br /><tr><br /><td>2</td><br /><td>Printer Multifungsi</td><br /><td>5</td><br /><td>Rp 750.000,00</td><br /></tr><br /><tr><br /><td>3</td><br /><td>Pendingin Ruangan</td><br /><td>5</td><br /><td>Rp 2.000.000,00</td><br /></tr><br /></table><br /></body><br /></html><br />Anda mungkin pernah menemukan sebuah tabel yang memiliki sel yang tergabung (merged). Untuk membuat tabel seperti itu pada halaman web Anda, Anda dapat menggunakan atribut tambahan rowspan atau colspan pada elemen th atau td pada sel yang ingin Anda gabungkan. Dimana atribut rowspan berfungsi untuk menggabungkan baris (satu sel menggunakan lebih dari satu baris) dan atribut colspan berfungsi untuk menggabungkan kolom (satu sel menggunakan lebih dari satu kolom).<br />SINTAKS :<td rowspan=quot; jumlah_barisquot; colspan=quot; jumlah_kolomquot; >teks</td>CONTOH :<doctype html><br /><html><br /><head><br /><title>Daftar Nilai</title><br /></head><br /><body><br /><h1>Daftar Nilai Siswa Kelas XII iA 5</h1><br /><table border=quot; 1quot; width=quot; 50%quot; ><br /><tr><br /><th width=quot; 10%quot; rowspan=quot; 2quot; >No.</th><br /><th width=quot; 40%quot; rowspan=quot; 2quot; >Nama Siswa</th><br /><th width=quot; 30%quot; colspan=quot; 3quot; >Nilai</th><br /><th width=quot; 20%quot; rowspan=quot; 2quot; >Rata-Rata</th><br /></tr><br /><tr><br /><th width=quot; 10%quot; >MTK</th><br /><th width=quot; 10%quot; >B.Ind</th><br /><th width=quot; 10%quot; >B.Ing</th><br /></tr><br /><tr><br /><td>1</td><br /><td>Azani Z. Ramsan</td><br /><td>80</td><br /><td>85</td><br /><td>90</td><br /><td>85.00</td><br /></tr><br /><tr><br /><td>2</td><br /><td>Hardi Mulyana</td><br /><td>90</td><br /><td>90</td><br /><td>70</td><br /><td>83.33</td><br /></tr><br /><tr><br /><td>3</td><br /><td>Rangga Satria</td><br /><td>70</td><br /><td>95</td><br /><td>95</td><br /><td>86.67</td><br /></tr><br /></table><br /></body><br /></html><br />Bekerja dengan Formulir<br />Formulir dapat digunakan untuk meminta masukan berbagai macam data dan informasi dari pengunjung situs web Anda. Sebagai contoh adalah formulir pendaftaran, login, pencarian, kontak, dan sebagainya. Ada beberapa elemen yang dapat Anda gunakan untuk membuat formulir, yaitu elemen form, input, textarea, select, dan option.<br /><form action=quot; ...quot; method=quot; ...quot; > ... </form><br />Elemen form berfungsi untuk membuat formulir. Elemen ini memerlukan dua buah atribut, yaitu atribut action dan method.<br />Atribut action berfungsi untuk menentukan halaman yang akan digunakan untuk memproses data yang dikirimkan melalui formulir tersebut. Nilai dari atribut ini memiliki aturan yang sama dengan atribut href pada elemen a dan atribut src pada elemen img.<br />Atribut method berfungsi untuk menentukan metode pengiriman data dari halaman formulir ke halaman pemroses. Nilai dari atribut ini ada dua, yaitu post dan get. Post lebih umum digunakan karena data yang dikirimkan lebih aman daripada menggunakan get.<br /><input name=quot; ...quot; type=quot; text/passwordquot; size=quot; ...quot; maxlength=quot; ...quot; ><br />Elemen input adalah elemen paling dasar untuk memasukkan data pada sebuah formulir. Pada contoh diatas, elemen input menggunakan empat buah atribut, yaitu atribut name, type, size, dan maxlength. Sebenarnya, atribut yang wajib digunakan pada elemen ini hanyalah name dan type saja. Atribut size dan maxlength bersifat sebagai tambahan saja.<br />Atribut name berfungsi untuk menentukan nama dari variabel yang akan digunakan oleh halaman pemroses. Lebih lanjut mengenai atribut ini akan Anda pelajari pada Bab 7. Pastikanlah Anda memberikan nama yang jelas dan mudah dimengerti. Peraturan lainnya yang perlu diperhatikan adalah jangan menggunakan spasi dalam atribut ini.<br />Atribut type berfungsi untuk menentukan tipe dari data yang akan dimasukkan. Ada bebera[a nilai yang dapat digunakan pada atribut ini, diantaranya adalah text danpassword. Jika menggunakan nilai text maka data yang akan dimasukkan berupa teks biasa, sedangkan jika menggunakan nilai password maka data yang akan dimasukkan akan disembunyikan. <br />Atribut size berfungsi untuk menentukan ukuran dari tempat masukan data. Ukuran ini dihitung dalam satuan karakter. Sedangkan atribut maxlength berfungsi untuk menentukan jumlah karakter maksimal yang dapat dimasukkan.<br /><input name=quot; ...quot; type=quot; radioquot; value=quot; ...quot; ><br />Jika menggunakan nilai radio pada atribut type, maka elemen input akan menampilkan radio button. Radio button memerlukan sebuah atribut lain, yaitu atribut value. Atribut ini berfungsi untuk menentukan nilai dari variabel pada atribut name. Dari beberapa radio button yang memiliki nilai atribut name yang sama, hanya dapat dipilih satu saja.<br /><textarea name=quot; ... quot; rows=quot; ...quot; cols=quot; ...quot; > ... </textarea><br />Elemen textarea berfungsi untuk memasukkan data yang panjang. Sama seperti elemen input, elemen ini juga memiliki atribut name. Atribut lainnya pada elemen ini adalah atribut rows yang berfungsi untuk menentukan ukuran tinggi textarea dan atribut cols yang berfungsi untuk menentukan ukuran lebar textarea. Semua yang terdapat dalam elemen ini akan ditampilkan di dalamnya.<br /><select name=quot; ...quot; > ... </select><br />Elemen select berfungsi untuk membuat drop-down menu. Elemen ini juga memiliki atribut name seperti elemen input dan textarea.<br /><option value=quot; ...quot; > ... </option><br />Elemen option berfungsi untuk menentukan sebuah pilihan di dalam elemen select. Elemen ini memiliki atribut value seperti pada radio button. Elemen select dan option bekerja seperti elemen ul/ol dan li.<br /><input type=quot; resetquot; value=quot; ...quot; ><br />Jika menggunakan nilai reset pada atribut type, maka elemen input ini akan menampilkan sebuah tombol yang berfungsi untuk mengosongkan data pada formulir. Berbeda dengan atribut value pada radio button dan drop-down menu, atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.<br /><input type=quot; submitquot; value=quot; ...quot; ><br />Jika menggunakan nilai submit pada atribut type, maka elemen input ini akan menampilkan sebuah tombol yang berfungsi untuk mengirimkan data formulir pada halaman pemroses. Sama seperti reset, atribut value pada elemen ini berfungsi untuk menentukan teks yang terdapat pada tombol tersebut.<br />CONTOH :<!doctype html><br /><html><br /><head><br /><title>Formulir Pendaftaran</title><br /></head><br /><body><br /><h1>Formulir Pendaftaran</h1><br /><form action=quot; proses_daftar.phpquot; method=quot; postquot; ><br /><p><br />Nama : <br><br /><input name=quot; namaquot; type=quot; textquot; size=quot; 50quot; maxlength=quot; 100quot; ><br /><p><br />Jenis Kelamin : <br><br /><input name=quot; jenis_kelaminquot; type=quot; radioquot; value=quot; pquot; > Pria<br /><input name=quot; jenis_kelaminquot; type=quot; radioquot; value=quot; wquot; > Wanita<br /><p><br />Alamat : <br><br /><textarea name=quot; alamatquot; rows=quot; 5quot; cols=quot; 50quot; ></textarea><br /><p><br />Agama : <br><br /><select name=quot; agamaquot; ><br /><option value=quot; islamquot; >Islam</option><br /><option value=quot; katolikquot; >Kristen Katolik</option><br /><option value=quot; protestanquot; >Kristen Protestan</option><br /><option value=quot; hinduquot; >Hindu</option><br /><option value=quot; buddhaquot; >Buddha</option><br /><option value=quot; lainnyaquot; >Lainnya</option><br /></select><br /><p><br />Kata Sandi : <br><br /><input name=quot; sandiquot; type=quot; passwordquot; size=quot; 50quot; maxlength=quot; 100quot; ><br /><p><br />Konfirmasi Kata Sandi : <br><br /><input name=quot; konfirmasi_sandiquot; type=quot; passwordquot; size=quot; 50quot; maxlength=quot; 100quot; ><br /><p><br /><input type=quot; resetquot; value=quot; Hapusquot; ><br /><input type=quot; submitquot; value=quot; Kirimquot; ><br /></form><br /></body><br /></html><br />Bekerja dengan Peta<br />Peta dalam sebuah halaman web dapat dijadikan sebuah metode alternatif untuk mendapatkan masukkan data dari pengguna situs web Anda. Walaupun begitu, proses pembuatan peta dengan menggunakan bahasa HTML sangatlah rumit, terutama apabila Anda melakukannya secara manual.<br />Oleh karena itu, untuk mempermudah proses pembuatan peta pada halaman web, akan digunakan sebuah aplikasi tambahan yang bernama ImageMap. Aplikasi ini dapat Anda dapatkan secara gratis dari http://code.google.com/p/imgmap/. Namun, Anda akan memerlukan Adobe AIR untuk menjalankannya. Adobe AIR juga dapat didapatkan secara gratis dari http://get.adobe.com/air/. <br />Berikut adalah langkah-langkah untuk membuat sebuah peta HTML dengan menggunakan ImageMap :<br />,[object Object],Setelah Anda menyiapkan gambar peta dengan menggunakan ImageMap, tentunya Anda harus membuat sebuah halaman web untuk menampilkan peta tersebut. Buatlah dokumen HTML baru sebagai berikut :<br /><!doctype html><br /><html><br /><head><br /><title>Peta Indonesia</title><br /></head><br /><body><br /><h1>Peta Indonesia</h1><br /><p><br /><img src=quot; peta.gifquot; usemap=quot; #indonesiaquot; ><br /><map name=quot; indonesiaquot; ><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 154,214,170,206,277,222,273,255,144,228quot; href=quot; jawa.htmlquot; target=quot; quot; /><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 132,216,168,202,168,178,196,180,196,163,173,162,166,149,152,151,138,142,145,133,127,121,61,67,42,65,24,58,29,103,92,178quot; href=quot; sumatra.htmlquot; target=quot; quot; /><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 208,104,193,139,221,180,265,185,275,195,300,184,305,156,319,142,319,130,331,130,331,117,319,108,311,94,315,79,286,78,281,97,272,115,252,114,229,122,218,118quot; href=quot; kalimantan.htmlquot; target=quot; quot; /><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 335,209,351,210,349,177,364,200,387,193,365,161,375,156,388,165,395,163,387,136,351,149,349,136,398,133,414,113,407,105,392,121,353,113,337,122,331,144,324,162,324,182,331,188quot; href=quot; sulawesi.htmlquot; target=quot; quot; /><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 608,169,609,259,586,246,559,256,557,235,572,230,553,204,499,192,477,146,499,135,574,154,594,161quot; href=quot; papua.htmlquot; target=quot; quot; /><area shape=quot; rectquot; alt=quot; quot; title=quot; quot; coords=quot; 419,97,470,196quot; href=quot; maluku.htmlquot; target=quot; quot; /><area shape=quot; rectquot; alt=quot; quot; title=quot; quot; coords=quot; 277,234,291,252quot; href=quot; bali.htmlquot; target=quot; quot; /><area shape=quot; polyquot; alt=quot; quot; title=quot; quot; coords=quot; 295,245,311,231,349,236,380,234,421,229,438,227,435,238,400,246,406,262,374,281,331,267,321,252,300,256quot; href=quot; nusatenggara.htmlquot; target=quot; quot; />map><br /></body><br /></html><br />Pastikan Anda mengganti tag map yang dihasilkan dari ImageMap menjadi sesuai dengan contoh.<br /><img src=quot; ...quot; usemap=quot; #...quot; /><br />Atribut tambahan usemap pada elemen image menandakan bahwa gambar tersebut adalah sebuah peta. Dimana nilai dari atribut ini adalah nama dari peta yang bersangkutan.<br /><map name=quot; indonesiaquot; > ... </map><br />Elemen map berfungsi untuk mendefinisikan sebuah peta. Elemen ini memerlukan sebuah atribut, yaitu atribut name yang berfungsi untuk memberikan nama terhadap peta tersebut.<br /><area shape=quot; ...quot; alt=quot; ...quot; title=quot; ...quot; coords=quot; ...quot; href=quot; ...quot; target=quot; ...quot; /><br />Elemen area berfungsi untuk mendefinisikan sebuah area. Atribut dasar dari elemen ini adalah atribut shape yang berfungsi untuk menentukan bentuk area dan atribut coords yang berfungsi untuk menentukan koordinat X dan Y dari titik sudut area tersebut. Atribut alt, title, href, dan target memiliki fungsi yang sama dengan atribut pada elemen a.<br />Menggunakan CSS<br />Pengertian CSS<br />Pada bab sebelumnya, Anda sudah mempelajari cara memberikan format dan warna pada elemen-elemen yang terdapat di dalam halaman web Anda dengan menggunakan atribut style. Sebenarnya, penggunaan atribut style ini bukanlah merupakan cara yang efisien untuk memformat sebuah halaman web. Bayangkan, jika Anda memiliki 20 halaman di dalam website Anda, dan Anda ingin merubah jenis huruf dari semua halaman tersebut, maka Anda harus mengedit semua halaman tersebut. Bagaimana jika Anda memiliki 100 halaman? Tentunya hal ini akan memakan waktu yang banyak.<br />Untuk mengatasi masalah tersebut, Anda dapat menggunakan CSS (Cascading Style Sheet) sebagai sebuah suplemen terhadap halaman-halaman web Anda. Dengan menggunakan CSS, Anda dapat memisahkan isi dan format tampilan dari halaman web Anda, dimana nantinya HTML hanya digunakan untuk membuat isi dari halaman Anda dan format tampilannya diletakkan di dalam sebuah file CSS yang terpisah. <br />Dengan adanya pemisahan antara isi dengan format seperti ini tentunya akan mempermudah Anda untuk mengubah-ubah isi maupun tampilan dari halaman web Anda. Hal ini dikarenakan sebuah file CSS dapat digunakan berkali-kali oleh banyak halaman web sekaligus, sehingga perubahan yang Anda berikan pada file CSS akan berpengaruh terhadap semua halaman web yang menggunakan file CSS tersebut. Menjadikan proses desain menjadi lebih efisien.<br />Sama halnya dengan HTML, CSS juga distandarisasi oleh W3C. Standar CSS yang paling baru adalah CSS versi 2.1 yang diresmikan pada tanggal 19 Juli 2007.<br />Membuat dan Menghubungkan File CSS<br />Seperti yang sudah dijelaskan sebelumnya, file CSS akan berada terpisah dengan file-file HTML yang Anda miliki. Oleh karena itu Anda harus menghubungkan file HTML yang ingin Anda format dengan sebuah file CSS. <br />Namun, Sebelum Anda dapat menghubungkan file HTML dengan file CSS, tentunya Anda harus membuat file CSS yang ingin Anda hubungkan terlebih dahulu. Proses pembuatan file CSS sangatlah mudah, Anda cukup menggunakan text editor favorit Anda dan menyimpannya dengan menggunakan ekstensi .css. Sebagai awal, cobalah membuat sebuah file CSS yang berisikan sebagai berikut :<br />h1 { <br />color: red; <br />}<br />h2 { <br />color: green; <br />}<br />p { <br />color: blue; <br />}<br />Lalu simpanlah dengan nama tampilan.css di dalam folder yang sama dengan file HTML yang ingin Anda hubungkan dengan file CSS tersebut. Jika Anda perhatikan baik-baik, Anda akan menggunakan nilai-nilai atribut yang terdapat pada atribut style di dalam sebuah file CSS. Dalam contoh ini, akan digunakan nilai atribut color yang berfungsi untuk memberikan warna pada suatu teks.<br />Setelah itu, Anda dapat menghubungkan file-file HTML dengan file CSS tersebut. Proses menghubungkan file HTML dengan file CSS tersebut dapat Anda lakukan dengan menggunakan elemen link yang diletakkan pada elemen head dalam file HTML Anda. Elemen ini akan memerlukan beberapa atribut, yaitu href, rel, dan type. Atribut href memiliki fungsi yang sama seperti atribut href pada elemen a, yaitu untuk menentukan alaman dari file CSS yang akan ingin dihubungkan. Sedangkan elemen rel dan type berfungsi untuk memberikan keterangan bahwa ini adalah sebuah file tampilan (stylesheet) dengan tipe file CSS.<br />SINTAKS :<link href=quot; alamat_file_cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; >CONTOH :<!doctype html><br /><html><br /><head><br /><title>Judul</title><br /><link href=quot; tampilan.cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; /><br /></head><br /><body><br /><h1>Lorem Ipsum</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h2>Dolor sit Amet</h2><br /><p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue.<br /><h2>Consectetur Adipiscing Elit</h2><br /><p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /></body><br /></html><br />Aturan CSS<br />Sebuah file CSS memiliki struktur yang berbeda dengan file HTML. Jika pada sebuah file HTML Anda akan menggunakan tag, atribut, dan elemen, maka dalam sebuah file CSS Anda akan menggunakan suatu aturan khusus yang dikenal dengan istilah CSS Rule, atau aturan CSS, dimana aturan tersebut terdiri dari berbagai macam komponen, yaitu selector, property, dan value. Secara garis besar, sintaks untuk menuliskan sebuah aturan CSS sangatlah sederhana, yaitu :<br />selector { property: value; }<br />Selector<br />Selector berfungsi untuk menentukan elemen atau komponen HTML manakah yang akan diberlakukan sebuah aturan CSS. Ada tiga macam selector yang dapat Anda gunakan, yaitu tag selector, class selector, dan ID selector.<br />Tag Selector<br />Tag selector adalah sebuah selector yang akan menerapkan aturan CSS kepada sebuah tag atau elemen yang terdapat pada file HTML. Perhatikanlah contoh berikut ini :<br />body { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen body dan semua elemen lain yang terdapat di dalamnya.<br />form p { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di dalamnya apabila elemen p tersebut terletak di dalam elemen form.<br />ul li p { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p dan semua elemen lain yang terdapat di dalamnya apabila elemen p terletak di dalam elemen li yang juga terletak di dalam elemen ul.<br />Dalam penggunaanya, sebuah aturan yang diberikan dengan menggunakan tag selector akan berlaku untuk semua elemen sesuai yang terdapat di dalam file HTML Anda. Sebagai contoh, apabila di dalam sebuah file HTML terdapat sepuluh buah paragraf dengan menggunakan elemen p, dan di dalam file CSS yang dihubungkan memiliki aturan untuk elemen p, maka semua paragraf yang terdapat di dalam file HTML tersebut akan memiliki format yang sama sesuai dengan aturan yang diterapkan pada file CSS.<br />Mungkin ada kalanya Anda ingin memberikan warna merah pada paragraf pertama dan warna biru pada paragraf kedua. Jika hanya menggunakan tag selector, maka tentunya hal ini tidak dapat dilakukan. Untuk melakukan hal seperti ini Anda dapat menggunakan class selector atau ID selector.<br />Class Selector<br />Class selector adalah sebuah selector yang akan menerapkan aturan CSS kepada semua tag atau elemen yang memiliki atribut class yang sesuai. Untuk menggunakan aturan seperti ini, Anda harus memberikan atribut tambahan class untuk setiap elemen HTML dimana Anda ingin memberlakukan aturan yang terdapat pada file CSS.<br />SINTAKS :<elemen class=quot; nama_kelasquot; >CONTOH :<p class=quot; merahquot; ><br />Untuk membuat aturan CSS seperti ini sangatlah mudah, class selector selalu diawali dengan sebuah titik. Perhatikanlah contoh berikut ini :<br />.red { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya.<br />p.red { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya <br />p .red { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen p.<br />form p.red { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen form.<br />form.login p.red { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen form yang memiliki nilai login untuk atribut classnya.<br />ID Selector<br />ID selector pada dasarnya selector memiliki fungsi yang sama dengan class selector, hanya saja atribut tambahan yang digunakan pada elemen-elemen yang tedapat di dalam file HTML adalah atribut id.<br />SINTAKS :<elemen id=quot; nama_idquot; >CONTOH :<p id=quot; merahquot; ><br />Selectornya sendiri menggunakan tanda pagar (#). Perhatikanlah contoh berikut ini :<br />#home { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai home untuk atribut IDnya.<br />p#green { ... }<br />Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai green untuk atribut IDnya.<br />Property dan Value<br />Properti (property) berfungsi untuk menentukan faktor tampilan yang ingin dirubah, seperti warna dan jenis tulisan, warna latar belakang, posisi dan sebagainya. Nilai dari sebuah property disebut dengan istilah value.<br />Dalam penulisannya, property dan value selalu berpasangan, dipisahkan oleh sebuah titik dua, dan diakhiri dengan sebuah titik koma. Sebuah aturan CSS juga dapat memiliki lebih dari satu properti. Perhatikanlah contoh berikut ini :<br />body { background: black; }<br />Aturan dengan ini memiliki sebuah properti, yaitu background dengan nilai (value) black.<br />h1 { border-bottom: 1px dotted; color: red; }<br />Aturan dengan ini memiliki dua buah properti, yaitu border-bottom dengan nilai (value) 1px dotted dan color dengan nilai red.<br />Menggunakan Warna<br />Pemilihan warna yang tepat dapat membuat halaman web Anda menjadi lebih menarik untuk dilihat. Walaupun begitu, perlu diperhatikan bahwa pemilihan warna adalah sebuah hal yang subjektif. Warna yang menurut Anda bagus bisa jadi tidak disukai oleh pengunjung halaman web Anda. Seperti yang sudah Anda pelajari sebelumnya, ada dua properti yang dapat Anda gunakan untuk memberikan warna pada halaman web Anda, yaitu property background dan color.<br />SINTAKS :selector { background: value; }<br />CONTOH :.merah { color: red; }<br />.jingga { color: rgb(255, 127, 0); }<br />.kuning { color: #ffff00; }<br />.hijau { color: #0f0; }<br />.biru { color: #0000ff; }<br />.nila { color: rgb(127, 0, 255); }<br />.ungu { color: purple; }<br />Properti background berfungsi untuk menentukan warna latar balakang. Nilai yang dapat digunakan pada properti ini ada empat macam, yaitu nama warna, kode RGB, kode heksadesimal, dan kode heksadesimal pendek. <br />Ada 18 nama warna yang dapat digunakan, yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white,yellow, dan transparent. Penggunaan nama warna hanya menyediakan jumlah warna yang sangat terbatas, walaupun bagitu, penggunaan nama warna seperti ini sangat mudah dipahami.<br />Dalam penggunaan kode RGB, maka warna akan didefinisikan dalam bentuk rgb(red, green, blue). Angka pertama menentukan intensitas warna merah, angka kedua untuk hijau, dan angka ketiga untuk biru, dimana angka-angka ini berkisar dari 0 (intensitas terendah) hingga 255 (intensitas tertinggi).<br />Kode heksadesimal adalah cara yang paling umum digunakan, kode ini akan mendefinisikan sebuah warna dalam bentuk #RRGGBB. Dua karakter pertama menentukan intensitas warna merah, dua karakter kedua untung hijau, dan dua huruf karakter untuk biru. Karakter yang digunakan adalah 0 (intensitas terendah), 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E dan F (intensitas tertinggi). Kode heksadesimal singkat menyingkat 6 karakter pada kode heksadesimal menjadi 3 karakter dalam bentuk #RGB.<br />SINTAKS :selector { color: value; }<br />Sedangkan properti color berfungsi untuk menentukan warna huruf. Nilai yang digunakan pada properti ini sama dengan nilai yang digunakan pada properti background.<br />Memformat Teks<br />Selain warna, Anda juga dapat memformat teks yang ada dalam halaman web Anda dengan menggunakan CSS. Anda dapat merubah jenis, ukuran, dan bahkan dekorasi huruf.Kesemua properti ini juga telah Anda pelajari pada bab sebelumnya.<br />SINTAKS :selector { font-family: value; }<br />CONTOH :body { font-family: quot; trebuchet msquot; , quot; verdanaquot; , quot; sans-serifquot; ; }<br />.trebuchet { font-family: quot; verdanaquot; ; }<br />.times { font-family: quot; times new romanquot; ; }<br />.courier { font-family: quot; courier newquot; ; }<br />Properti font-family berfungsi untuk menentukan jenis huruf. Jenis huruf dituliskan di dalam tanda kutip dua. Anda dapat memberikan lebih dari satu jenis huruf dengan menggunakan spasi sebagai pemisah. Jenis huruf tambahan yang diberikan akan berfungsi sebagai alternatif apabila jenis huruf yang sebelumnya tidak ditemukan pada komputer yang digunakan oleh pengunjung halaman web Anda.<br />SINTAKS :selector { font-size: value; }<br />CONTOH :h1 { font-size: xx-large; }<br />h2 { font-size: 16pt; }<br />p { font-size: 16px; }<br />Property font-size berfungsi untuk menentukan ukuran huruf. Ukuran huruf dapat dinyatakan dalam tiga macam satuan, yaitu nama ukuran, pt, dan px.<br />Ada 7 nama ukuran yang dapat digunakan, mulai dari yang terbesar xx-large, x-large, large, medium, small, x-small, hingga yang terkecil xx-small. Sama seperti penggunaan nama warna, penggunaan nama ukuran huruf memberikan pilihan yang lebih sedikit tetapi mudah untuk dipahami.<br />Satuan pt (point) adalah satuan ukuran huruf yang umum digunakan dalam tipografi (percetakan), sedangkan satuan px (pixel/piksel) adalah satuan ukuran huruf berdasarkan jumlah piksel dari sebuah karakter. Untuk kedua satuan ini, semakin besar nilainya maka akan semakin besar pula ukuran hurufnya.<br />SINTAKS :selector { font-weight: value; }<br />CONTOH :.tebal { font-weight: bold; }<br />Property font-weight dengan nilai bold memiliki fungsi yang sama dengan tag strong, yaitu memberikan cetak tebal kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.<br />SINTAKS :selector { font-style: value; }<br />CONTOH :.miring { font-style: italic; }<br />Property font-style dengan nilai italic memiliki fungsi yang sama dengan tag em, yaitu memberikan cetak miring kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.<br />SINTAKS :selector { font-variant: value; }<br />CONTOH :.kapital-kecil { font-variant: small-caps; }<br />Property font-variant dengan nilai small-caps berfungsi untuk memberikan efek kapital kecil (small-caps) kepada sebuah teks. Untuk mengembalikan seperti semula dapat menggunakan nilai normal.<br />SINTAKS :selector { text-deocation: value; }<br />CONTOH :.garis-bawah { text-decoration: underline; }<br />.garis-tengah { text-decoration: line-through; }<br />.garis-atas { text-decoration: overline; }.kedip { text-decoration: blink; }<br />Property text-decoration berfungsi untuk memberikan dekorasi tambahan terhadap sebuah teks. Nilai yang dapat digunakan adalah underline (garis-bawah), overline (garis-atas), line-through (garis-tengah), blink (berkedap-kedip), dan none (tanpa dekorasi).<br />SINTAKS :selector { text-transform: value; }<br />CONTOH :.kapital { text-transform: uppercase; }<br />Property text-transform berfungsi untuk merubah kapitalisasi huruf dari sebuah teks. Nilai yang dapat digunakan adalah capitalize (Huruf Besar Pada Awal Kata), uppercase (BESAR SEMUA), lowercase (kecil semua), dan none (tanpa perubahan).<br />SINTAKS :selector { text-align: value; }<br />CONTOH :.rata-tengah { text-align: center; }<br />.rata-kanan { text-align: left; }<br />Property text-align berfungsi untuk mengatur proses perataan dari sebuah teks. Nilai yang dapat digunakan adalah left (rata kiri), center (rata tengah), right (rata kanan), dan justify (rata kiri dan kanan).<br />SINTAKS :selector { text-indent: value; }<br />CONTOH :.rata-kiri {<br />text-indent: 100px;<br />text-align: left;<br />}.rata-kanan-kiri {<br />text-indent: 50pt;<br />text-align: justify;<br />}<br />Property text-indent berfungsi untuk memberikan indentasi pada baris pertama dari sebuah paragraf menggunakan satuan pt atau px.<br />Memberikan Margin<br />Margin dapat digunakan untuk mengatur jarak antara sebuah elemen dengan elemen lainnya pada sebuah halaman web. Pemberian jarak yang tepat tentunya dapat digunakan untuk membuat isi dari halaman web Anda mudah dibaca.<br />Properti margin digunakan untuk memberikan jarak. Satuan yang digunakan adalah px (piksel). Jika Anda ingin mengatur jarak dengan lebih mendetail, Anda dapat menggunakan properti margin-top (jarak dengan elemen yang berada di atas), margin-bottom (bawah), margin-left (kiri), dan margin-right (kanan).<br />SINTAKS :selector { margin: value; }selector{ margin-top: value; margin-bottom: value; margin-left: value; margin-right: value; }<br />CONTOH (HTML) :<!doctype html><br /><html><br /><head><br /><title>Galeri Foto</title><br /><link href=quot; margin.cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; ><br /></head><br /><body><br /><h1>Galeri Foto</h1><br /><img src=quot; foto1.jpgquot; ><br /><img src=quot; foto2.jpgquot; ><br /><br><br /><img src=quot; foto3.jpgquot; ><br /><img src=quot; foto4.jpgquot; ><br /><br><br /></body><br /></html>CONTOH (CSS) :h1 {<br />margin-top: 0px;<br />margin-bottom: 0px;<br />margin-left: 10px;<br />}<br />img { margin: 10px; }<br />Memberikan Border dan Padding<br />Selain margin, Anda juga dapat memberikan border dan padding untuk memberikan batasan yang lebih jelas lagi antara sebuah elemen dengan elemen lain yang terdapat pada halaman web Anda. Margin, border, dan padding dalam kesatuannya disebut dengan istilah box-model. Untuk lebih jelas mengenai perbedaan diantaranya, perhatikanlah diagram berikut ini :<br />Padding adalah jarak yang membatasi antara isi dari sebuah elemen dengan border, sedangkan margin adalah jarak yang membatasi antara border dengan elemen lainnya.<br />SINTAKS :selector { border: ketebalan tipe warna; }selector{ border-top: ketebalan tipe warna; border-bottom: ketebalan tipe warna; border-left: ketebalan tipe warna; border-right: ketebalan tipe warna; }<br />Properti border berfungsi untuk memberikan garis batas atau bingkai terhadap sebuah elemen. Properti ini memerlukan tiga buah nilai yang harus ditulis secara berurutan, yaitu ketebalan dalam satuan px, diikuti tipe yang dapat berupa solid (garis lurus), dotted (titik-titik), dashed (garis putus-putus), dan none (tanpa border), dan diakhiri dengan warnagaris. Seperti halnya dengan properti margin, Anda juga dapan menggunakan properti boder secara mendetail.<br />SINTAKS :selector { padding: value; }selector{ padding-top: value; padding-bottom: value; padding-left: value; padding-right: value; }<br />Properti padding berfungsi untuk memberikan jarak antara garis batas atau bingkai dengan isi dari sebuah elemen. Satuan yang digunakan adalah px (piksel). Properti padding juga dapat digunakan secara mendetail.<br />CONTOH (HTML) :<!doctype html><br /><html><br /><head><br /><title>Galeri Foto</title><br /><link href=quot; border.cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; ><br /></head><br /><body><br /><h1>Galeri Foto</h1><br /><img src=quot; foto1.jpgquot; ><br /><img src=quot; foto2.jpgquot; ><br /><br><br /><img src=quot; foto3.jpgquot; ><br /><img src=quot; foto4.jpgquot; ><br /><br><br /></body><br /></html>CONTOH (CSS) :h1 {<br />margin-top: 0px;<br />margin-bottom: 0px;<br />margin-left: 10px;<br />}<br />img {<br />margin: 5px;<br />border: 5px solid #729fcf;<br />padding: 5px;<br />}<br />Menggunakan Pseudo-Class<br />Ketika Anda membuat link dalam halaman web, umumnya link tersebut berwarna biru, tetapi setelah link tersebut diklik, maka warnanya akan berubah menjadi ungu. Hal ini sebenarnya dimaksudkan untuk mempermudah pengunjung halaman web Anda untuk membedakan link mana yang sudah dikunjungi dan mana yang belum dikunjungi. Apabila warna yang tersebut tidak serasi dengan warna-warna lain yang digunakan pada halaman web Anda, tentunya Anda ingin merubahnya.<br />Untuk melakukan hal ini, Anda dapat menggunakan bantuan pseudo-class, yaitu sebuah kelas khusus yang berfungsi untuk memberikan aturan CSS pada sebuah elemen berdasarkan dari keadaan elemen tersebut. Misalkan keadaan jika kursor mouse berada di atas elemen tersebut, atau keadaan link yang telah dikunjungi.Penulisan psseudo-class selalu diawali dengan tanda titik dua.<br />SINTAKS :selector:hover {property:value; }<br />Pseudo-class :hover berfungsi untuk membedakan aturan CSS yang diberikan kepada sebuah elemen apabila kursor (penunjuk) mouse berada di atas elemen tersebut. Pseudo-class hover dapat digunakan untuk semua selector.<br />SINTAKS :a:visited {property:value; }<br />Pseudo-class :visited berfungsi untuk membedakan aturan CSS yang diberikan kepada elemen a apabila link tersebut sudah pernah dikunjungi. Berbeda dengan :hover, pseudo-class ini hanya dapat digunakan untuk tag selector a saja.<br />CONTOH (HTML) :<!doctype html><br /><html><br /><head><br /><title>Link</title><br /><link href=quot; pseudo_class.cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; ><br /></head><br /><body><br /><h1>Selamat datang!</h1><br /><p>Silahkan pilih halaman yang ingin Anda kunjungi :<br /><ul><br /><li><a href=quot; profil.htmlquot; >Profil</a><br /><li><a href=quot; galeri.htmlquot; >Galeri Foto</a><br /><li><a href=quot; http://saya.blogspot.comquot; >Blog</a><br /><li><a href=quot; http://www.facebook.com/sayaquot; >Facebook</a><br /></ul><br /></body><br /></html>CONTOH (CSS) :a {<br />color: #204a87;<br />text-decoration: none;<br />}<br />a:hover {<br />color: #729fcf;<br />text-decoration: underline;<br />}<br />a:visited {<br />color: #204a87;<br />text-decoration: none;<br />}<br />Menggunakan Gambar Latar<br />Gambar latar yang tepat juga dapat menjadi sebuah sentuhan tersendiri yang dapat membuat halaman web Anda tampil lebih menarik. Walaupun begitu, penggunaan gambar latar sebaiknya tidak berlebihan, karena pengguaan gambar latar yang tidak baik akan membuat teks yang terdapat pada halaman web Anda menjadi sulit untuk dibaca. <br />SINTAKS :selector {background-image: url('alamat_gambar'); }<br />Properti background-image berfungsi untuk memberikan gambar latar belakang kepada sebuah elemen. Nilai dari url menggunakan konsep yang sama seperti nilai dari atribut src pada elemen img.<br />SINTAKS :selector { background_repeat: value; }<br />Properti background-repeat berfungsi untuk mengulang gambar latar berdasarkan nilai properti ini. Nilai yang dapat digunakan adalah repeat-x (mengulang secara horizontal), repeat-y (mengulang secara vertikal), repeat (mengulang secara horizontal dan vertikal), dan no-repeat (tidak mengulang).<br />CONTOH (HTML) :<!doctype html><br /><html><br /><head><br /><title>Judul</title><br /><link href=quot; latar.cssquot; rel=quot; stylesheetquot; type=quot; text/cssquot; /><br /></head><br /><body><br /><h1>Lorem Ipsum</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum tellus eu metus tristique condimentum. Nam fringilla erat ac ipsum dictum cursus. Vivamus pulvinar dictum est, vitae commodo turpis vestibulum in. Sed quis justo elit, in dictum metus.<br /><h2>Dolor sit Amet</h2><br /><p>Nulla non sem risus, vitae fermentum nisl. Etiam aliquam, turpis vel mattis placerat, quam neque commodo lorem, sed sodales nisl nisl at diam. Etiam aliquet magna sed ipsum sagittis tincidunt. Mauris vel lacus nec justo commodo vehicula. Donec sit amet est augue.<br /><h2>Consectetur Adipiscing Elit</h2><br /><p>Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.<br /></body><br /></html>CONTOH (CSS) :body {<br />background-image: url('gradasi.png');<br />background-repeat: repeat-x;<br />font-family: quot; trebuchet msquot; ;<br />font-size: 14px;<br />}<br />h1 {<br />margin-top: 50px;<br />margin-bottom: 10px;<br />border-bottom: 1px solid;<br />padding-bottom: 3px;<br />font-weight: normal;<br />}<br />h2 {<br />margin-bottom: -15px;<br />font-weight: normal;<br />}<br />Mengatur Tata Letak Halaman Web<br />Membuat Kolom<br />Pada bab 3, Anda sudah belajar dasar-dasar dari CSS yang dapat digunakan untuk memberikan format tampilan kepada halaman web Anda. Namun, mungkin Anda merasa
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula
Modul PHP untuk Pemula

Recommended

Php module hierarchical
Php module hierarchicalPhp module hierarchical
Php module hierarchicalWahyu Bimo
 
Modul program komputer otomasi perkantoran
Modul program komputer otomasi perkantoranModul program komputer otomasi perkantoran
Modul program komputer otomasi perkantoranMuraba Nasuha
 
TUGAS SIM
TUGAS SIMTUGAS SIM
TUGAS SIMrizka idris
 
Module desain web
Module desain webModule desain web
Module desain webDedy Setiawan
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaDoni Andriansyah
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Webarisjunedi
 
06 stmik amikom yogyakarta wireless application protocol
06 stmik amikom yogyakarta wireless application protocol06 stmik amikom yogyakarta wireless application protocol
06 stmik amikom yogyakarta wireless application protocolMustafa Hasan
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa webikasulistiyani
 

Recommended

Php module hierarchical
Php module hierarchicalPhp module hierarchical
Php module hierarchicalWahyu Bimo
 
Modul program komputer otomasi perkantoran
Modul program komputer otomasi perkantoranModul program komputer otomasi perkantoran
Modul program komputer otomasi perkantoranMuraba Nasuha
 
TUGAS SIM
TUGAS SIMTUGAS SIM
TUGAS SIMrizka idris
 
Module desain web
Module desain webModule desain web
Module desain webDedy Setiawan
 
Modul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaModul web design - studi kasus website portal berita
Modul web design - studi kasus website portal beritaDoni Andriansyah
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Webarisjunedi
 
06 stmik amikom yogyakarta wireless application protocol
06 stmik amikom yogyakarta wireless application protocol06 stmik amikom yogyakarta wireless application protocol
06 stmik amikom yogyakarta wireless application protocolMustafa Hasan
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa webikasulistiyani
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa webAditya Indraprasti
 
Tugas 8
Tugas 8Tugas 8
Tugas 8Elisanendes
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptxFileArsip
 
Bab 1 Teknologi Web
Bab 1 Teknologi WebBab 1 Teknologi Web
Bab 1 Teknologi WebYUSRA FERNANDO
 
Jobsheet Pemrograman
Jobsheet Pemrograman Jobsheet Pemrograman
Jobsheet Pemrograman Rika Pertiwi
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
BOOK-web-programming.pdf
BOOK-web-programming.pdfBOOK-web-programming.pdf
BOOK-web-programming.pdfAnandaindrasetiawan1
 
Konsep Teknologi Web
Konsep Teknologi WebKonsep Teknologi Web
Konsep Teknologi WebTeukuMahawira
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 
Internet Programming v2.0 Comp
Internet Programming v2.0 CompInternet Programming v2.0 Comp
Internet Programming v2.0 CompNurdin Al-Azies
 
Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316sapatati
 
Perkembangan web server di Linux
Perkembangan web server di LinuxPerkembangan web server di Linux
Perkembangan web server di LinuxApriyanto Gafur
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 
WEBSITE
WEBSITEWEBSITE
WEBSITEKevin Simbolon
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5 Hardini_HD
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa webUmmi khairani
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
9711 web desain
9711 web desain9711 web desain
9711 web desainmasrianna harahap
 
Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1Agus Supriatna
 
World wide web
World wide webWorld wide web
World wide webpeces123
 

More Related Content

Similar to Modul PHP untuk Pemula

storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptxFileArsip
 
Jobsheet Pemrograman
Jobsheet Pemrograman Jobsheet Pemrograman
Jobsheet Pemrograman Rika Pertiwi
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
Konsep Teknologi Web
Konsep Teknologi WebKonsep Teknologi Web
Konsep Teknologi WebTeukuMahawira
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 
Internet Programming v2.0 Comp
Internet Programming v2.0 CompInternet Programming v2.0 Comp
Internet Programming v2.0 CompNurdin Al-Azies
 
Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316sapatati
 
Perkembangan web server di Linux
Perkembangan web server di LinuxPerkembangan web server di Linux
Perkembangan web server di LinuxApriyanto Gafur
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5 Hardini_HD
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa webUmmi khairani
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1Agus Supriatna
 
World wide web
World wide webWorld wide web
World wide webpeces123
 

Similar to Modul PHP untuk Pemula (20)

Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
 
Bab 1 Teknologi Web
Bab 1 Teknologi WebBab 1 Teknologi Web
Bab 1 Teknologi Web
 
Jobsheet Pemrograman
Jobsheet Pemrograman Jobsheet Pemrograman
Jobsheet Pemrograman
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
 
BOOK-web-programming.pdf
BOOK-web-programming.pdfBOOK-web-programming.pdf
BOOK-web-programming.pdf
 
Konsep Teknologi Web
Konsep Teknologi WebKonsep Teknologi Web
Konsep Teknologi Web
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi web
 
Internet Programming v2.0 Comp
Internet Programming v2.0 CompInternet Programming v2.0 Comp
Internet Programming v2.0 Comp
 
Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316
 
Perkembangan web server di Linux
Perkembangan web server di LinuxPerkembangan web server di Linux
Perkembangan web server di Linux
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi web
 
WEBSITE
WEBSITEWEBSITE
WEBSITE
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
 
9711 web desain
9711 web desain9711 web desain
9711 web desain
 
Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1Php, mySQL dan Javascript - 1
Php, mySQL dan Javascript - 1
 
World wide web
World wide webWorld wide web
World wide web
 

Modul PHP untuk Pemula

  • 1.
  • 2. TextMenandakan bahwa HTML adalah suatu kumpulan dari teks.
  • 3. MarkupBahasa HTML adalah sebuah bahasa markup, yaitu sebuah bahasa yang dapat digunakan untuk memberikan markup atau keterangan tambahan pada sesuatu. Misalkan, huruf yang bercetak tebal, keterangan warna, paragraf, gambar, dan sebagainya.
  • 4.
  • 5. Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html, maka Anda dapat menggunakan <a href=”berita/2010.html”>. Untuk tujuan yang berada dalam folder yang berbeda, namun folder tersebut masih satu tingkatan dengan lokasi dokumen awal, maka perlu dituliskan nama folder dokumen tujuan.
  • 6. Apabila dari halaman 2010.html Anda ingin membuat link menuju halaman berita.html, maka Anda dapat menggunakan <a href=”../berita.html”>. Untuk tujuan yang berada pada folder lain yang memiliki tingkatan yang lebih tinggi, maka perlu dituliskan .. yang berarti satu folder diatas.
  • 7.