IMZEN SITORUS
CARA MUDAH BELAJAR HTML,XHTML, dan CSS 3 (Langkah awal menjadi programmer web, beserta contoh-contoh program)
Penerbit nulisbuku
CARA MUDAH BELAJAR HTML, XHTML, DAN CSS 3
(Langkah awal menjadi programmer web)
Oleh:IMZEN SITORUS Copyright © 2011 by IMZEN SITORUS http://blogzensitorus.blogspot.com
Penerbit nulisbuku
Diterbitkan melalui: www.nulisbuku.com
2
Ucapan Terimakasih Bersyukur kepada Allah Pencipta langit dan bumi karena buku ini bisa sampai ke hadapan para pembaca yang budiman. Sudah lama pengen punya buku hasil karya sendiri. Kini harapan itu menjadi kenyataan lewat www.nulisbuku.com. Terima kasih untuk www.nulisbuku.com yang telah mewujudkan harapan menerbitkan buku ini. “CARA MUDAH BELAJAR HTML,XHTML, DAN CSS 3” ini sebagian besar merupakan catatan materi yang saya ajarkan di SMPK Assisi Samarinda dan di tempat kursus. Terima kasih kepada rekan-rekan sesama mantan pengajar PT. BSW Gramedia Kaltim yang sudah mendukung saya selama ini: BuMaria,dan Bu Yuli( Guru TIK SMP dan SD GPIB Balikpapan), Kennedy Sitinjak, Amd (Guru Komputer Airlangga College Samarinda), Benny, S.Kom ( Pengajar TIK SMK Katolik WR Soepratman Samarinda), Muh.Zul, S.Kom (Guru TIK SMP Neg.7 Samarinda), Petrus, S.T. serta Riel Tandi, S.T. Terima kasih kepada sahabat-sahabat di komunitas akta4unmul yang telah mau berbagi yang tidak bisa saya sebutkan satu per satu : Pak Widiawan, S.Kom, Pak Asta, Pak Boedi Raharja, Pak Burhanuddin, serta Pak Hilal . 3
Terima kasih kepada keluarga saya, yang selalu meneguhkan. Terima kasih kepada Marolop T.S., Loas Panahatan yang menginspirasi. Terima kasih kepada para pembaca, semoga buku ini dapat bermanfaat.
Bexasie, Januari 2012
4
DAFTAR ISI
Ucapan terima kasih ............................................ 3 Daftar Isi .............................................................. 5 Bab 1 (X)HTML ............................................ 9 Pengenalan .......................................... 9 Perkembangan HTML ........................11 Bab 2 Dasar-dasar (X)HTML ..................... 15 Pengertian (X)HTML ....................... 15 Struktur dasar (X)HTML, dan HTML 5 .............................................17 Perbedaan HTML dan XHTML........ 18 Tata cara Penulisan (X)HTML ........ 23 Bab 3 Membuat Dokumen (X)HTML ....... 24 Mulai Menuliskan Dokumen ............ 24 Menyimpan Dokumen (X)HTML .... 25 Menjalankan Dokumen (X)HTML .. 26 Mengedit Dokumen (X)HTML........ 26 Membuat Elemen Header dalam (X)HTML ......................................... 26 Membuat Elemen Body ................... 28 Membuat Title .................................. 28 Membuat Headings .......................... 30 Mengatur Posisi Headings ................ 30 Memformat Paragrap dan Teks Dalam (X)HTML .......................................... 31 Tugas.................................................. 36 Bab 4 Membuat efek Marquee .................... 38
5
Bab 5
Bab 6
Bab 7
Bab 8
6
Marquee teks bergerak dari bawah ke atas .................................................... 39 Marquee teks mantul ke atas dan ke bawah ................................................ 39 Variasi dari marquee ......................... 39 Marquee yang terdapat link .............. 40 Membuat List (X)HTML .................. 41 Unordered List .................................. 41 Ordered List ...................................... 43 Tugas ................................................. 44 Gambar (image) dalam (X)HTML ... 46 Menampilkan Gambar ...................... 46 Mengatur Ukuran Gambar ................ 47 Mengatur Perataan Gambar .............. 47 Memberi Bingkai Gambar ................ 50 Tugas ................................................. 51 Tabel (X)HTML ................................52 Pengertian Tabel ................................52 Menggunakan Cellspacing dan Cellpading ......................................... 54 Menggunakan Rowspan dan Colspan .............................................. 55 Mengatur Lebar Tabel .......................56 Memformat isi Tabel .........................57 Menambahkan Judul Tabel ............... 57 Tugas ................................................. 59 Frame (X)HTML .............................. 60 Kegunaan Frame ............................... 60 Atribut SRC, Frameborder,Scrolling60 Membuat Frame Kolom .................... 61 Membuat Frame Baris ...................... 65
Bab 9
Bab 10
Bab 11
Membuat Frame Gabungan .............. 65 Tugas ................................................. 68 Membuat Link dengan (X)HTML ... 70 Link ke halaman web yang lain dalam dokumen yang berbeda dalam satu web site .................................. 70 Link ke halaman web di website yang lain .................................................... 71 Tugas ................................................ 72 CSS 3 ................................................ 73 Perkembangan dan Dasar-dasar CSS .................................................. 73 Versi CSS ......................................... 73 Syntax Dasar .................................... 74 Penggunaan Selector ........................ 76 Penggunaan lebih dari satu Selector 76 Penggunaan lebih dari satu Property 76 Penulisan Syntax CSS ..................... 76 Penulisan Komentar pada CSS .. ..... 76 Pengenalan CSS 3 ........................... 81 Membuat dokumen CSS 3............... 82 Hal baru dalam CSS 3 ..................... 87 Border ............................................... 87 Border Radius .................................. 87 Box Shadow ..................................... 89 Border Image ................................... 92 Backgrounds .................................... 94 Backgrounds Size ............................ 94 Backgrounds-Origin ........................ 96 Multiple Background Images ......... 99 Text Effects ..................................... 101 7
Text Shadow ................................... 101 Word Wrapping .............................. 103 CSS3 Transforms ............................ 104 Transform – Rotate ......................... 105 Transform – Scale ........................... 106 CSS3 Transform – Skew ................ 106 Translate Method ............................ 109 CSS3 Transitions ............................ 111 Animasi CSS3 ................................. 114 CSS3 @keyframes Rule ................. 115 Tugas ............................................... 119 Daftar Pustaka ................................................. 120 Profil Penulis ...................................................121
8
Bab 1
(X)HTML
Pengenalan Pernah membuka websitenya Yahoo.com? Nah, kalo anda membuka website itu biasanya akan anda temukan tulisan atau gambar yang bergerak. Bisa bergerak dari kiri ke kanan layar komputer anda atau sebaliknya. Tulisan yang ditampilkan juga warna-warni dan memiliki style bermacammacam. Kenapa bisa seperti itu? Karena di balik halaman web yahoo tersebut ada (X)HTML(baca: HTML atau XHTML) yang berperan. Jika menggunakan browser Mozilla Firefox coba Anda klik Menu Tools, klik Web developer, lalu klik Page source di Web page-nya Yahoo. Nah, Anda akan temukan bahasa bertanda “<” dan “>”. Itulah yang disebut (X)HTML. (X)HTML merupakan bahasa pemograman web. Boleh dikatakan bahasa tingkat tinggi. Oleh karena tidak semua orang bisa memahaminya dengan mudah. Bayangkan saja untuk menuliskan Tio (tiga huruf) saja Anda harus menuliskan seabrek karakter berikut:
contoh Tio 9
Maka akan tampil di halaman Web tulisan : Tio.
Gambar 1. Menuliskan Tio ( tiga huruf) saja. Anda yang sudah memiliki weblog tentu sudah tidak asing lagi dengan (X)HTML. (X)HTML perlu dipelajari untuk dapat meingkatkan performance dari blog yang Anda punya. Kalau sudah memahami (X)HTML, maka Anda bisa melakukan kostumasi dan optimasi tingkat lanjut pada blog Anda. Pada dasarnya Programmer Web harus mengerti dahulu (X)HTML agar lebih mudah memahami pemrograman web yang lain. (X)HTML merupakan bahasa pemrograman dasar untuk membuat halaman web. Buku ini akan membantu Anda mempelajari HTML, XHTML, dan CSS 3 dengan mudah. Anda pun bisa menjadi programmer web. Anda bisa membuat Webpages Anda sendiri. .
10
Profil Penulis
Imzen Sitorus. Pernah “sekolah” di USU dan Universitas Mulawarman. Bisa dikontak lewat (
[email protected]).Pernah bekerja sebagai HSE Coordinator di area perusahaan migas di Mutiara Plant, Pamaguan Plant, Handil, dan Muara Badak serta Senipah Kaltim, pernah bekerja sebagai Pengajar komputer untuk PT. BSW Gramedia dan SMPK Assisi Samarinda, Kaltim. Selain mengajar juga aktif sebagai Konsultan HSE.
11
