CARA MUDAH BELAJAR HTML,XHTML,

Ukuran: px

Mulai penontonan dengan halaman:

Download "CARA MUDAH BELAJAR HTML,XHTML,"

Djaja Kurnia
7 tahun lalu
Tontonan:

1 IMZEN SITORUS CARA MUDAH BELAJAR HTML,XHTML, dan CSS 3 (Langkah awal menjadi programmer web, beserta contoh-contoh program) Penerbit nulisbuku

3 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 Terima kasih untuk 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

4 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

5 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 Pengertian (X)HTML Struktur dasar (X)HTML, dan HTML Perbedaan HTML dan XHTML Tata cara Penulisan (X)HTML Bab 3 Membuat Dokumen (X)HTML Mulai Menuliskan Dokumen Menyimpan Dokumen (X)HTML Menjalankan Dokumen (X)HTML.. 26 Mengedit Dokumen (X)HTML Membuat Elemen Header dalam (X)HTML Membuat Elemen Body Membuat Title Membuat Headings Mengatur Posisi Headings Memformat Paragrap dan Teks Dalam (X)HTML Tugas Bab 4 Membuat efek Marquee

6 Marquee teks bergerak dari bawah ke atas Marquee teks mantul ke atas dan ke bawah Variasi dari marquee Marquee yang terdapat link Bab 5 Membuat List (X)HTML Unordered List Ordered List Tugas Bab 6 Gambar (image) dalam (X)HTML Menampilkan Gambar Mengatur Ukuran Gambar Mengatur Perataan Gambar Memberi Bingkai Gambar Tugas Bab 7 Tabel (X)HTML Pengertian Tabel...52 Menggunakan Cellspacing dan Cellpading Menggunakan Rowspan dan Colspan Mengatur Lebar Tabel...56 Memformat isi Tabel Menambahkan Judul Tabel Tugas Bab 8 Frame (X)HTML Kegunaan Frame Atribut SRC, Frameborder,Scrolling 60 Membuat Frame Kolom Membuat Frame Baris

7 Membuat Frame Gabungan Tugas Bab 9 Membuat Link dengan (X)HTML Link ke halaman web yang lain dalam dokumen yang berbeda dalam satu web site Link ke halaman web di website yang lain Tugas Bab 10 CSS Perkembangan dan Dasar-dasar CSS Versi CSS Syntax Dasar Penggunaan Selector Penggunaan lebih dari satu Selector 76 Penggunaan lebih dari satu Property 76 Penulisan Syntax CSS Penulisan Komentar pada CSS Pengenalan CSS Membuat dokumen CSS Bab 11 Hal baru dalam CSS Border Border Radius Box Shadow Border Image Backgrounds Backgrounds Size Backgrounds-Origin Multiple Background Images Text Effects

8 Text Shadow Word Wrapping CSS3 Transforms Transform Rotate Transform Scale CSS3 Transform Skew Translate Method CSS3 Transitions Animasi CSS Rule Tugas Daftar Pustaka Profil Penulis

9 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: <html> <head><title> contoh</title></head> <body> Tio </body> </html> 9

10 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

11 Profil Penulis Imzen Sitorus. Pernah sekolah di USU dan Universitas Mulawarman. Bisa dikontak lewat 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

dokumen-dokumen yang mirip

SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA

SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA 1. HTML adalah kepanjangan dari. A. Hyper Text Multiple Language B. Hiper Text Multiple Language C. Hipo Text Multiple Language D. Hyper Text Multiple Land E.