PHP Pemula

download PHP Pemula

of 150

description

Pengertian Php

Transcript of PHP Pemula

emp4tbelas

DAFTAR ISIBAB 1 : 1.1 1.2 1.3 1.3.1 1.3.2 1.4 1.5 BAB 2 : 2.1 2.2 2.2.1 2.2.2 2.3 2.4 2.4.1 2.5 2.5.1 2.5.2 2.5.3 2.5.4 2.6 Pengenalan Internet......................................................................................6 Pengertian Internet..........................................................................................7 Sejarah Internet...............................................................................................7 Situs Web dan Halaman Web...........................................................................8 Halaman Web............................................................................................8 Situs Web...................................................................................................8 Cara Kerja Halaman Web.................................................................................8 Macam Macam Halaman Web..........................................................................9 Menggunakan HTML....................................................................................10 Pengertian dan Sejarah HTML........................................................................11 Bersiap-Siap...................................................................................................12 Alternatif Text Editor................................................................................13 Alternatif Web Browser............................................................................14 Halo, Dunia!................................................................................................15 Struktur Dokumen HTML................................................................................16 Mengunjungi Kembali Halo, Dunia!.......................................................18 Bekerja dengan Teks......................................................................................18 Membuat Paragraf...................................................................................19 Membuat Judul.........................................................................................19 Membuat Daftar.......................................................................................20 Memformat Teks......................................................................................22 Bekerja dengan Link.......................................................................................28 1

emp4tbelas

emp4tbelas

2.7 2.8 2.9 2.10 BAB 3 : 3.1 3.2 3.3 3.3.1 3.3.2 3.4 3.5 3.6 3.7 3.8 3.9 BAB 4 : 4.1 4.1.1 4.1.2 BAB 5 : 5.1 5.2 5.3

Bekerja dengan Gambar................................................................................30 Bekerja dengan Tabel....................................................................................31 Bekerja dengan Formulir................................................................................33 Bekerja dengan Peta...................................................................................36 Menggunakan CSS......................................................................................39 Pengertian CSS...............................................................................................40 Membuat dan Menghubungkan File CSS........................................................40 Aturan CSS.....................................................................................................42 Selector....................................................................................................42 Property dan Value..................................................................................44 Menggunakan Warna.....................................................................................44 Memformat Teks............................................................................................46 Memberikan Margin........................................................................................48 Memberikan Border dan Padding...................................................................49 Menggunakan Pseudo-Class...........................................................................50 Menggunakan Gambar Latar..........................................................................52 Mengatur Tata Letak Halaman Web............................................................54 Membuat Kolom.............................................................................................55 Kolom untuk Tata Letak...........................................................................55 Kolom untuk Teks....................................................................................59 Pengenalan Basis Data................................................................................62 Pengertian Basis Data....................................................................................63 Komponen dalam Basis Data.........................................................................63 Relasi antar Tabel..........................................................................................64 emp4tbelas 2

emp4tbelas

5.3.1 5.3.2 5.3.3 BAB 6 : 6.1 6.2 6.3 6.3.1 6.3.2 6.3.3 6.4 6.4.1 6.4.2 6.4.3 6.4.4 6.5 6.5.1 BAB 7 : 7.1 7.2 7.3 7.4 7.4.1 7.5

One-to-One Relationship..........................................................................65 One-to-Many Relationship........................................................................65 Many-to-Many Relationship......................................................................65 Menggunakan SQL......................................................................................67 Pengertian SQL...............................................................................................68 Bekerja dengan Skema..................................................................................68 Bekerja dengan Tabel....................................................................................68 Membuat Tabel........................................................................................69 Mengubah Tabel......................................................................................70 Menghapus Tabel.....................................................................................71 Bekerja dengan Data......................................................................................72 Memasukkan Data...................................................................................72 Mengambil Data.......................................................................................72 Mengubah Data........................................................................................75 Menghapus Data......................................................................................75 Menggunakan phpMyAdmin...........................................................................76 Bekerja dengan Pengguna.......................................................................76 Menggunakan PHP......................................................................................80 Pengertian PHP...............................................................................................81 Halo, Dunia!...................................................................................................81 Mendokumentasikan Dokumen PHP...............................................................83 Menggunakan Variabel...................................................................................84 Tipe Data dalam Variabel.........................................................................86 Berkerja dengan Angka..................................................................................87 emp4tbelas 3

emp4tbelas

7.6 7.7 7.8 7.9 7.10

Bekerja dengan String....................................................................................88 Bekerja dengan Tanggal dan Waktu..............................................................90 Memproses Formulir.......................................................................................92 Membuat Halaman Dinamis...........................................................................94 Menggunakan Array....................................................................................96 Map.......................................................................................................97 Array Multidimensi................................................................................98 Mengatur Alur program...............................................................................99 Menggunakan Kondisi.........................................................................100 Menggunakan Percabangan................................................................102 Menggunakan Pengulangan................................................................106 Menggunakan Fungsi................................................................................110 Menghubungkan PHP dengan Basis Data..................................................112 Membuat Koneksi.........................................................................................112 Mengambil Data...........................................................................................114 Memasukkan Data........................................................................................118 Mengubah Data............................................................................................120 Menghapus Data..........................................................................................123 Lebih Lanjut dengan PHP..........................................................................125 Menggunakan Session..................................................................................126 Menerima Upload Berkas.............................................................................130 Mengirim E-Mail............................................................................................131 Mendeploy Situs Web.............................................................................132 Membuat Akun..........................................................................................133 emp4tbelas 4

7.10.1 7.10.2 7.11 7.11.1 7.11.2 7.11.3 7.12 BAB 8 : 8.1 8.2 8.3 8.4 8.5 BAB 9 : 9.1 9.2 9.3 BAB 10 : 10.1

emp4tbelas

10.2 10.3

Mendeploy Basis Data...............................................................................137 Mendeploy Situs Web................................................................................141

Mendeploy Situs Web

emp4tbelas

5

emp4tbelas

BAB 1:PENGENALAN INTERNET

emp4tbelas

6

emp4tbelas

1.1 PENGERTIAN INTERNETInternet 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.

1.2 SEJARAH INTERNETCikal 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. 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. 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). 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. 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 2

emp4tbelas

emp4tbelas

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

1.3 SITUS WEB DAN HALAMAN WEBJika 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?

1.3.1 HALAMAN WEBHalaman 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. 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.

1.3.2 SITUS WEBJika 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. 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.

1.4 CARA KERJA HALAMAN WEB

emp4tbelas

2

emp4tbelas

Apabila Anda membuka sebuah halaman web dengan menggunakan peramban web Anda, maka secara garis besar akan terjadi proses sebagai berikut : 1. Anda memasukkan URL dari halaman web yang inginkan Anda buka pada peramban web Anda. 2. Peramban web akan mencari alamat server dari situs web yang memiliki halaman web tersebut 3. Peramban web akan meminta halaman web yang Anda inginkan dari server tersebut. 4. Server akan memproses permintaan tersebut dan mengirimkan hasilnya kepada peramban web. 5. Peramban web akan memproses data yang didapatkan dari server tersebut dan menampilkannya pada layar monitor.

1.5 MACAM MACAM HALAMAN WEBPada 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. 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. 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.

emp4tbelas

2

emp4tbelas

BAB 2:MENGGUNAKAN HTML

emp4tbelas

1

emp4tbelas

2.1 PENGERTIAN DAN SEJARAH HTMLJika 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. HTML sendiri adalah kepanjangan dari HyperText Markup Language, yang memiliki arti sebagai beikut : Hyper Dalam bahasa Inggris berarti sesuatu yang sangat aktif. Hal ini memiliki maksud bahwa HTML adalah sebuah bahasa yang dapat membawa Anda kemana saja dan kapan saja dalam dunia maya. Text Menandakan bahwa HTML adalah suatu kumpulan dari teks. Markup Bahasa 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. Language Seperti 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. 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 informasiinformasi 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.

emp4tbelas

2

emp4tbelas

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

1.1 BERSIAP-SIAPUntuk 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. 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.

emp4tbelas

2

emp4tbelas

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

1.1.1 ALTERNATIF TEXT EDITORPada 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. 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. 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. 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). Walaupun terdengar menarik, perlu diperhatikan bahwa penggunaan aplikasi-aplikasi ini tidaklah dianjurkan jika Anda ingin belajar membuat sebuah halaman web dengan emp4tbelas 2

emp4tbelas

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. Dalam buku ini, penulis akan menggunakan aplikasi text editor yang bernama Notepad++. Penulis menggunakan aplikasi ini karena aplikasi ini telah memiliki fiturfitur 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/. 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), Programmers Notepad (http://www.pnotepad.org/), SciTE (http://www.scintilla.org/SciTE.html), dan banyak lainnya. Pilihlah aplikasi text editor yang paling cocok dengan Anda.

1.1.2 ALTERNATIF WEB BROWSERSebagai 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. 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. 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/.

emp4tbelas

2

emp4tbelas

1.2 HALO, DUNIA!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!. 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 kodekode HTML tersebut, Anda akan segera mempelajarinya dalam bagian selanjutnya. Halo, Dunia! Belajar HTML sangat mudah dan menyenangkan!

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. 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!

emp4tbelas

2

emp4tbelas

1.3 STRUKTUR DOKUMEN HTMLSebuah 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. 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 : Elemen Start Tag Konten End Tag

Googl e

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 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. 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 :Facebook Twitter

Pada contoh diatas, teks Facebook akan ditampilkan dengan bercetak tebal, karena terdapat diantara tag . Sedangkan, teks Twitter tidak akan ditampilkan dengan cetak tebal karena tidak berada di dalam tag . 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,
yang berfungsi untuk membuat baris baru diantara teks. Tag seperti ini dikenal dengan

emp4tbelas

1

emp4tbelas

istilah self-closing tag karena tag tersebut menutup atau mengakhiri dirinya sendiri dengan sebuah tanda garis miring yang dituliskan sebelum tanda kurung siku penutup. Selain itu, sebuah tag juga dapat memiliki satu atau lebih atribut. Atribut berfungsi untuk memberikan informasi tambahan kepada sebuah elemen. Perhatikanlah diagram berikut ini :

Elemen Start Tag Atribut

Konten

End Tag

< a

href="http://google.co m">

Googl e

Pada diagram di atas, tag 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). 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 : Elemen Start Tag Atribut Value

Konten

Name

End Tag

< a

href

=

"http://google.com ">

Googl e

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 : Belajar HTML

Pada contoh di atas, konten yang terdapat pada elemen strong adalah elemen lain, yaitu elemen em yang berfungsi untuk membuat teks menjadi bercetak miring.

emp4tbelas

1

emp4tbelas

Penggabungan kedua buah elemen ini akan menjadikan teks Belajar HTML yang terletak di dalamnya ditampilkan dengan cetak tebal dan miring. 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 :Benar : Satu Salah : Satu

1.3.1 MENGUNJUNGI KEMBALI HALO, DUNIA!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.

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

Elemen html berfungsi untuk menandakan awal dan akhir dari sebuah dokumen HTML. ...

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

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 emp4tbelas 1

emp4tbelas

halaman-halaman yang terdapat pada tab lainnya. Elemen ini hanya dapat diletakkan di dalam elemen head karena elemen ini hanya berfungsi sebagai informasi tambahan. ...

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.

1.4 BEKERJA DENGAN TEKSFungsi 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. 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.

1.4.1 MEMBUAT PARAGRAFParagraf dalam sebuah halaman web didefinisikan dengan menggunakan elemen p(paragraph). Penggunaan elemen ini sangatlah mudah, Anda cukup memberikan tag pada awal dari setiap paragraf yang ingin Anda buat.SINTAKS : teks paragraf CONTOH : Paragraf 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.

emp4tbelas

2

emp4tbelas 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. 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.

1.4.2 MEMBUAT JUDULDalam 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. 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.SINTAKS : teks judul CONTOH : Judul Lorem Ipsum 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. Dolor sit Amet 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. Consectetur Adipiscing Elit Aliquam mattis mollis luctus. Integer venenatis elit non diam vestibulum vitae euismod turpis aliquet. In hac habitasse platea dictumst. Vestibulum

emp4tbelas

2

emp4tbelas rhoncus nunc sed nisl dictum ultricies. Vestibulum commodo, elit id pharetra venenatis, eros nulla scelerisque nibh, vitae malesuada nisi mauris in nisi.

1.4.3 MEMBUAT DAFTARSelain 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. 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.SINTAKS :

  • isi pertama
  • isi kedua

isi pertama isi kedua CONTOH : Daftar Contoh daftar Tidak terurut

  • Lorem ipsum
  • Dolor sit amet
  • Consectetur adipiscing elit

Terurut Lorem ipsum

Dolor sit amet

emp4tbelas

2

emp4tbelas

Consectetur adipiscing elit Daftar di dalam daftar

  • Lorem
  • Ipsum :
    • Dolor
    • Sit
  • Amet :
  • Consectetur
  • Adipiscing :
    • Elit
    • Etiam
  • Aliquam
  • Vitae

1.4.4 MEMFORMAT TEKSSampai 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. 1.4.4.1 CETAK TEBAL DAN MIRING 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.SINTAKS : teks teks CONTOH :

emp4tbelas

2

emp4tbelas Cetak Tebal dan Miring Teks ini menggunakan cetak tebal Teks ini menggunakan cetak miring Teks ini menggunakan cetak tebal dan miring

1.4.4.2 JENIS, UKURAN, DAN BERAT HURUF 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. 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. Dalam penulisan nilai-nilai atribut dari atribut style, Anda perlu mengakhiri setiap nilai atribut dengan menggunakan sebuah tanda titik koma (;).SINTAKS : teks CONTOH : Jenis dan Ukuran Huruf Georgia adalah contoh jenis huruf serif Trebuchet MS adalah contoh jenis huruf sans-serif Consolas adalah contoh jenis huruf monospace

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

emp4tbelas

2

emp4tbelas

bukanlah untuk membuat huruf bercetak tebal melainkan untuk membuat huruf yang sudah bercetak tebal dari awal (seperti pada elemen h1) menjadi tidak bercetak tebal.SINTAKS : teks OPSI BOBOT HURUF : bold -> Bercetak tebal normal ->Tidak bercetak tebal CONTOH : Bobot huruf Judul ini bercetak tebal 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. Judul ini tidak bercetak tebal 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.

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="font-family: Trebuchet MS; font-size: 12pt;" pada elemen body juga akan diterapkan pada elemen h1 dan p yang terdapat di dalamnya. 1.4.4.3 VARIASI DAN DEKORASI TEKS Selain menentukan jenis dan ukuran huruf, Anda juga bisa menentukan variasi dan dekorasi dari sebuah teks dengan menggunakan nilai atribut font-variant dan textdecoration pada atribut style. Perlu diketahui bahwa Anda dapat menggabungkan berbagai macam nilai atribut pada atribut style sesuai dengan kebutuhan Anda.SINTAKS : teks OPSI VARIASI : small-caps -> Huruf kecil kapital

emp4tbelas

2

emp4tbelas

OPSI DEKORASI : underline -> Bergaris bawah overline -> Bergaris atas line-through -> Dicoret blink -> Berkedap-kedip CONTOH : Variasi dan Dekorasi Teks

  • Kapital kecil
  • Bergaris bawah
  • Dicoret
  • Halo, Dunia!

1.4.4.4 PERATAAN TEKS 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.SINTAKS : teks OPSI PERATAAN : left -> Rata kiri center -> Rata tengah right -> Rata kanan justify -> Rata kiri dan kanan CONTOH : Perataan Teks

emp4tbelas

2

emp4tbelas

Rata kiri 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. Rata tengah 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. Rata kanan 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. Rata kiri dan kanan (justify) 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.

Jika Anda perhatikan, apabila nilai atribut text-align tidak digunakan, secara otomatis web browser akan menganggap teks tersebut menggunakan perataan rata kiri. 1.4.4.5 INDENTASI PARAGRAF 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.SINTAKS : teks CONTOH : Indentasi Paragraf

emp4tbelas

2

emp4tbelas

Paragraf tanpa indentasi 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. Paragraf dengan indentasi 1em 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. Paragraf dengan indentasi 2em 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.

1.4.4.6 JARAK ANTAR BARIS 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.SINTAKS : teks CONTOH : Jarak Antar Baris Paragraf tanpa pengaturan jarak antar baris 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. Paragraf dengan jarak antar baris 1 spasi 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. Paragraf dengan jarak antar baris 1.5 spasi

emp4tbelas

2

emp4tbelas 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.

1.4.4.7 PENGGUNAAN WARNA 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.SINTAKS : teks OPSI WARNA : white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple CONTOH : Penggunaan Warna Lorem Ipsum 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. Dolor sit Amet 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. Consectetur Adipiscing Elit 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.

emp4tbelas

2

emp4tbelas

1.5 BEKERJA DENGAN LINKSebuah 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). 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. Sebelum mengenal lebih lanjut tentang berbagai macam alamat tujuan, marilah terlebih dahulu mengetahui dasar pembuatan sebuah link.SINTAKS : teks CONTOH : Link Selamat datang! Silahkan pilih halaman yang ingin Anda kunjungi :

  • Profil
  • Galeri Foto
  • Blog
  • Facebook

Penggunaan relative URL akan menjadikan alamat halaman tempat asal link menjadi referensi. Untuk lebih memahami penggunaan alamat relatif, perhatikan bagan berikut ini :

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 : 2

emp4tbelas

emp4tbelas

Apabila dari halaman menu.html Anda ingin membuat tautan menuju halaman galeri.html, maka Anda dapat menggunakan . Untuk tujuan yang berada dalam folder yang sama, maka cukup dituliskan seperti ini. Apabila dari halaman menu.html Anda ingin membuat link menuju halaman 2010.html, maka Anda dapat menggunakan . 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 . 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 . 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 . 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.

1.1 BEKERJA DENGAN GAMBARSebuah 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. 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. 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 1

emp4tbelas

emp4tbelas

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.SINTAKS : CONTOH : Gambar Social Network Facebook Twitter

1.2 BEKERJA DENGAN TABELSelain 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). 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. 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.

emp4tbelas

2

emp4tbelas SINTAKS :

judul isi

OPSI UKURAN GARIS : 0 ->tanpa garis 1 sampai 10 -> dengan garis, semakin besar semakin tebal OPSI LEBAR : %-> menggunakan persentase px -> menggunakan satuan piksel OPSI PERATAAN : left -> Rata kiri center -> Rata tengah right -> Rata kanan CONTOH : Daftar Barang Daftar Barang PT. Untung Untungan No. Nama Barang Jumlah Harga Satuan 1 Komputer 50 Rp 5.000.000,00 2 Printer Multifungsi 5 Rp 750.000,00 3 Pendingin Ruangan 5

emp4tbelas

2

emp4tbelas Rp 2.000.000,00

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).SINTAKS : teks CONTOH : Daftar Nilai Daftar Nilai Siswa Kelas XII iA 5 No. Nama Siswa Nilai Rata-Rata MTK B.Ind B.Ing 1 Azani Z. Ramsan 80 85 90 85.00 2 Hardi Mulyana 90 90

emp4tbelas

3

emp4tbelas 70 83.33 3 Rangga Satria 70 95 95 86.67

1.3 BEKERJA DENGAN FORMULIRFormulir 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. ...

Elemen form berfungsi untuk membuat formulir. Elemen ini memerlukan dua buah atribut, yaitu atribut action dan method. 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. 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.

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. Atribut name berfungsi untuk menentukan nama dari variabel yang akan digunakan oleh halaman pemroses. Lebih lanjut mengenai atribut ini akan Anda pelajari pada Bab 4

emp4tbelas

emp4tbelas

7. Pastikanlah Anda memberikan nama yang jelas dan mudah dimengerti. Peraturan lainnya yang perlu diperhatikan adalah jangan menggunakan spasi dalam atribut ini. 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. 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.

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

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

Elemen select berfungsi untuk membuat drop-down menu. Elemen ini juga memiliki atribut name seperti elemen input dan textarea. ...

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.

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.

emp4tbelas

2

emp4tbelas

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.CONTOH : Formulir Pendaftaran Formulir Pendaftaran Nama :
Jenis Kelamin :
Pria Wanita Alamat :
Agama :
Islam Kristen Katolik Kristen Protestan Hindu Buddha Lainnya Kata Sandi :
Konfirmasi Kata Sandi :

1.4 BEKERJA DENGAN PETA3

emp4tbelas

emp4tbelas

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. 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/. Berikut adalah langkah-langkah untuk membuat sebuah peta HTML dengan menggunakan ImageMap : 1. Jalankan aplikasi ImageMap hingga tampil jendela utamanya. Pilih menu File > Get Image From File.. untuk memilih berkas gambar peta.

2. Pilih berkas gambar peta yang Anda inginkan lalu tekan tombol Open,

3. Pilih bentuk area yang Anda inginkan, peta HTML mendukung 3 macam bentuk area, yaitu kotak, lingkaran, dan poligon (tidak beraturan).

emp4tbelas

1

emp4tbelas

4. Tandai area yang Anda inginkan dengan menggunakan klik kiri. Pada titik yang terakhir, gunakan Shift + klik kiri untuk mengakhiri mode penandaan. 5. Di bagian atas, masukan tujuan tautan pada kolom Href. 6. Ulangi proses penandaan hingga semua area telah ditandai.

7. Jika proses penandaan sudah selesai salin perintah yang tertera pada bagian code, lalu gunakanlah perintah tersebut dalam dokumen HTML.

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 : Peta Indonesia Peta Indonesia map>

Pastikan Anda mengganti tag map yang dihasilkan dari ImageMap menjadi sesuai dengan contoh.

Atribut tambahan usemap pada elemen image menandakan bahwa gambar tersebut adalah sebuah peta. Dimana nilai dari atribut ini adalah nama dari peta yang bersangkutan. ...

Elemen map berfungsi untuk mendefinisikan sebuah peta. Elemen ini memerlukan sebuah atribut, yaitu atribut name yang berfungsi untuk memberikan nama terhadap peta tersebut.

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.

emp4tbelas

2

emp4tbelas

BAB 1:MENGGUNAKAN CSS

emp4tbelas

3

emp4tbelas

1.1 PENGERTIAN CSSPada 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. 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. 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. 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.

1.2 MEMBUAT DAN MENGHUBUNGKAN FILE CSSSeperti yang sudah dijelaskan sebelumnya, file CSS akan berada terpisah dengan filefile HTML yang Anda miliki. Oleh karena itu Anda harus menghubungkan file HTML yang ingin Anda format dengan sebuah file CSS. 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 :h1 { color: red; } h2 { color: green; }

emp4tbelas

2

emp4tbelas

p { color: blue; }

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 baikbaik, 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. 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.SINTAKS : CONTOH : Judul Lorem Ipsum 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. Dolor sit Amet 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. Consectetur Adipiscing Elit 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.

emp4tbelas

2

emp4tbelas

emp4tbelas

3

emp4tbelas

1.3 ATURAN CSSSebuah 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 :selector { property: value; }

1.3.1 SELECTORSelector 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. 1.3.1.1 TAG SELECTOR Tag selector adalah sebuah selector yang akan menerapkan aturan CSS kepada sebuah tag atau elemen yang terdapat pada file HTML. Perhatikanlah contoh berikut ini :body { ... }

Selector ini akan menerapkan aturan CSS untuk elemen body dan semua elemen lain yang terdapat di dalamnya.form p { ... }

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.ul li p { ... }

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. 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. emp4tbelas 4

emp4tbelas

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. 1.3.1.2 CLASS SELECTOR 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.SINTAKS : CONTOH :

Untuk membuat aturan CSS seperti ini sangatlah mudah, class selector selalu diawali dengan sebuah titik. Perhatikanlah contoh berikut ini :.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya.p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnyap .red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen p.form p.red { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai red untuk atribut classnya apabila elemen tersebut berada di dalam elemen form.form.login p.red { ... }

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. 1.3.1.3 ID SELECTOR 2

emp4tbelas

emp4tbelas

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.SINTAKS : CONTOH :

Selectornya sendiri menggunakan tanda pagar (#). Perhatikanlah contoh berikut ini :#home { ... }

Selector ini akan menerapkan aturan CSS untuk elemen-elemen yang memiliki nilai home untuk atribut IDnya.p#green { ... }

Selector ini akan menerapkan aturan CSS untuk elemen p yang memiliki nilai green untuk atribut IDnya.

1.3.2 PROPERTY DAN VALUEProperti (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. 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 :body { background: black; }

Aturan dengan ini memiliki sebuah properti, yaitu background dengan nilai (value) black.h1 { border-bottom: 1px dotted; color: red; }

Aturan dengan ini memiliki dua buah properti, yaitu border-bottom dengan nilai (value) 1px dotted dan color dengan nilai red.

1.4 MENGGUNAKAN WARNAPemilihan 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 emp4tbelas 2

emp4tbelas

dua properti yang dapat Anda gunakan untuk memberikan warna pada halaman web Anda, yaitu property background dan color.SINTAKS : selector { background: value; } CONTOH : .merah { color: red; } .jingga { color: rgb(255, 127, 0); } .kuning { color: #ffff00; } .hijau { color: #0f0; } .biru { color: #0000ff; } .nila { color: rgb(127, 0, 255); } .ungu { color: purple; }

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. 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. 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). 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.SINTAKS : selector { color: value; }

Sedangkan properti color berfungsi untuk menentukan warna huruf. Nilai yang digunakan pada properti ini sama dengan nilai yang digunakan pada properti background.

emp4tbelas

2

emp4tbelas

1.5 MEMFORMAT TEKSSelain 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.SINTAKS : selector { font-family: value; } CONTOH : body { font-family: "trebuchet ms", "verdana", "sans-serif"; } .trebuchet { font-family: "verdana"; } .times { font-family: "times new roman"; } .courier { font-family: "courier new"; }

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.SINTAKS : selector { font-size: value; } CONTOH : h1 { font-size: xx-large; } h2 { font-size: 16pt; } p { font-size: 16px; }

Property font-size berfungsi untuk menentukan ukuran huruf. Ukuran huruf dapat dinyatakan dalam tiga macam satuan, yaitu nama ukuran, pt, dan px. 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. 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.SINTAKS : selector { font-weight: value; } CONTOH : .tebal { font-weight: bold; }

emp4tbelas

3

emp4tbelas

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.SINTAKS : selector { font-style: value; } CONTOH : .miring { font-style: italic; }

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.SINTAKS : selector { font-variant: value; } CONTOH : .kapital-kecil { font-variant: small-caps; }

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.SINTAKS : selector { text-deocation: value; } CONTOH : .garis-bawah { text-decoration: underline; } .garis-tengah { text-decoration: line-through; } .garis-atas { text-decoration: overline; } .kedip { text-decoration: blink; }

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).SINTAKS : selector { text-transform: value; } CONTOH : .kapital { text-transform: uppercase; }

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).SINTAKS : selector { text-align: value; } CONTOH : .rata-tengah { text-align: center; }

emp4tbelas

2

emp4tbelas .rata-kanan { text-align: left; }

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).SINTAKS : selector { text-indent: value; } CONTOH : .rata-kiri { text-indent: 100px; text-align: left; } .rata-kanan-kiri { text-indent: 50pt; text-align: justify; }

Property text-indent berfungsi untuk memberikan indentasi pada baris pertama dari sebuah paragraf menggunakan satuan pt atau px.

1.6 MEMBERIKAN MARGINMargin 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. 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).SINTAKS : selector { margin: value; } selector{ margin-top: value; margin-bottom: value; margin-left: value; marginright: value; } CONTOH (HTML) : Galeri Foto Galeri Foto

emp4tbelas

3

emp4tbelas

CONTOH (CSS) : h1 { margin-top: 0px; margin-bottom: 0px; margin-left: 10px; } img { margin: 10px; }

1.7 MEMBERIKAN BORDER DAN PADDINGSelain 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 :

Padding adalah jarak yang membatasi antara isi dari sebuah elemen dengan border, sedangkan margin adalah jarak yang membatasi antara border dengan elemen lainnya.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; }

emp4tbelas

2

emp4tbelas

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.SINTAKS : selector { padding: value; } selector{ padding-top: value; padding-bottom: value; padding-left: value; padding-right: value; }

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.CONTOH (HTML) : Galeri Foto Galeri Foto

CONTOH (CSS) : h1 { margin-top: 0px; margin-bottom: 0px; margin-left: 10px; } img { margin: 5px; border: 5px solid #729fcf; padding: 5px; }

1.8 MENGGUNAKAN PSEUDO-CLASSKetika Anda membuat link dalam halaman web, umumnya link tersebut berwarna biru, tetapi setelah link tersebut diklik, maka warnanya akan berubah menjadi ungu. Hal ini emp4tbelas 2

emp4tbelas

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. 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.SINTAKS : selector:hover {property:value; }

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.SINTAKS : a:visited {property:value; }

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.CONTOH (HTML) : Link Selamat datang! Silahkan pilih halaman yang ingin Anda kunjungi :

  • Profil
  • Galeri Foto
  • Blog
  • Facebook

CONTOH (CSS) : a { color: #204a87; text-decoration: none; }

emp4tbelas

2

emp4tbelas a:hover { color: #729fcf; text-decoration: underline; } a:visited { color: #204a87; text-decoration: none; }

emp4tbelas

3

emp4tbelas

1.9 MENGGUNAKAN GAMBAR LATARGambar 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.SINTAKS : selector {background-image: url('alamat_gambar'); }

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.SINTAKS : selector { background_repeat: value; }

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).CONTOH (HTML) : Judul Lorem Ipsum 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. Dolor sit Amet 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. Consectetur Adipiscing Elit 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.

emp4tbelas

4

emp4tbelas

CONTOH (CSS) : body { background-image: url('gradasi.png'); background-repeat: repeat-x; font-family: "trebuchet ms"; font-size: 14px; } h1 { margin-top: 50px; margin-bottom: 10px; border-bottom: 1px solid; padding-bottom: 3px; font-weight: normal; } h2 { margin-bottom: -15px; font-weight: normal; }

emp4tbelas

2

emp4tbelas

BAB 2:MENGATUR TATA LETAK HALAMAN WEB

emp4tbelas

3

emp4tbelas

2.1 MEMBUAT KOLOMPada bab 3, Anda sudah belajar dasar-dasar dari CSS yang dapat digunakan untuk memberikan format tampilan kepada halaman web Anda. Namun, mungkin Anda merasa tata letak dari halaman web Anda masih bersifat sangat sederhana, yaitu terus menerus dari atas ke bawah tanpa ada variasi seperti kolom, menu navigasi, dan sebagainya. Dahulu, pengaturan tata letak dari sebuah halaman web dibuat dengan menggunakan banyak tabel yang saling berhubungan antara satu dengan lainnya. Pada saat itu metode ini memang dinilai cukup efektif, namun penggunaan tabel seperti ini ternyata adalah hal yang salah. Elemen tabel yang didefinisikan dalam sebuah dokumen HTML hanya berfungsi untuk menampilkan data yang bersifat tabular, bukanlah berfungsi untuk mengatur tata letak halaman web. Oleh karena itu, ditemukanlah sebuah teknik baru yang dapat digunakan untuk mengatur tata letak dari sebuah halaman web dengan menggunakan CSS. Teknik ini dikenal dengan istilah CSS layout atau tableless layout. Teknik ini menggunakan elemen HTML div dan properti tertentu dari CSS untuk menghasilkan efek tata letak yang tidak kalah dan bahkan jauh lebih baik apabila dibandingkan dengan menggunakan tabel.

2.1.1 KOLOM UNTUK TATA LETAKPengelompokkan elemen-elemen dari sebuah halaman HTML ke dalam beberapa bagian adalah dasar dari tata letak sebuah halaman web. Bagian-bagian tersebut antara lain adalah bagian judul, navigasi, isi atau konten, dan penutup (header). Berikut adalah contoh dari beberapa macam tata letak sebuah halaman web :

Judul Naviga si Penutup

Judul Navigasi Isi Isi Penutup

Judul Naviga si

Isi Penutup

Dasar dari pembuatan tata letak seperti ini adalah penggunaan kolom. Kolom dapat dibuat dengan membuat elemen div untuk setiap bagian dan memberikan properti CSS yang tepat untuk setiap elemen tersebut. Cobalah terlebih dahulu membuat sebuah halaman web sebagai berikut :

emp4tbelas

2

emp4tbelas CONTOH HTML : Layout 1 Lorem Ipsum Lorem Ipsum Dolor sit Amet, Consectetur Adipiscing Elit Menu Utama

  • Lorem Ipsum
  • Dolor sit Amet
  • Consectetur
  • Adispiscing Elit

Lorem Ipsum 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. Dolor sit Amet 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. Consectetur Adipiscing Elit 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. Halaman ini dibuat oleh saya CONTOH CSS : * { margin: 0px; padding: 0px; } body {

emp4tbelas

2

emp4tbelas width: 960px; margin: auto; background-image: url('gradasi.png'); background-repeat: repeat-x; padding: 20px; color: #2e3436; font-family: "trebuchet ms"; font-size: 10pt;

}

a { col