Belajar HTML untuk pemula 1Rencananya materi tentang html ini akan berlanjut, sengaja saya buat per materi supaya mudahdip...
Contoh 1 menampilkan teks:Penulisan seperti diatas hanya untuk memudahkan membacanya saja, boleh ditulis :Hasilnya pada br...
Lalu kalau hasinya sama, kenapa harus memilih yang banyak kode? Kenapa tidak yang sedernana saja?Ya, ok. Kita baru menulis...
Membuat desain webDalah sebuah web, biasanya anda juga melihat ada beberapa bagian, antara lain misalnya: header,siderbar,...
Maka ketika dijalankan hasilnya :Sudah seperti web? Belum juga, ya namanya baru belajar, oke supaya tampil seperti web kit...
Hasilnya sebagai berikut:Nah sekarang tinggal kita atur lagi ukuran header, isi dan footernya buar seperti website beneran...
Nah sekarang kita lihat hasilnya:Udah hampir mirip website yah? Nah untuk pemilihan warna, anda bisa menggunakan kode warn...
kemudian akan tampak kode nya, anda copy ke program,jadi deh. Misalnya seperti ini, saya juga belumtahu hasilnya apa:Penul...
Misal kita coba yang lain:Kita lihat hasilnya ternyata seperti ini:Ok dirasa cukup deh permainan warnanya, sekarang kita a...
footerNah, sebelum kita ke koding, kita lihat dulu algoritmanya:Bagian atas dan bawah tidak ada masalah, tapi pada bagian ...
Kode kita ubah menjadi (saya cuplik saja biar irit halaman yah...) :Maka hasilnya menjadi seperti ini:Sip udah seperti yan...
Ok istirahat sebentar.....Sekarang kita akan belajar property teks.Pada bagian header, biasanya judul web nya khan besar, ...
Perintah yang kita pakai adalah valign untuk perataan secara vertikal, dan align untuk perataan secarahorisontal. Kemudian...
Ok kali ini kita akhiri dulu, kita lanjutkan pada materi berikutnya...
Upcoming SlideShare
Loading in...5
×

Belajar html untuk pemula 1

4,246

Published on

Published in: Technology, Design
4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,246
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
241
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

Belajar html untuk pemula 1

  1. 1. Belajar HTML untuk pemula 1Rencananya materi tentang html ini akan berlanjut, sengaja saya buat per materi supaya mudahdipelajari. Bagi anda yang sama sekali tidak memahami bahasa pemrograman tetapi ingin bisa, sering-seringlah berkunjung ke blog ini, sebisa mungkin akan selalu saya update ilmu yang bermanfaat.Untuk para master programer, posting ini bukan porsi anda, tatapi jika anda ikut membaca, makaberikanlah koreksi jika terjadi kesalahan, semoga ilmu yang kita sebarluaskan menjadi berkah danbermanfaat untuk sesama.Langsung saja untuk materi pertama, hal-hal yang harus anda persiapkan adalah: 1. Perangkat komputer tentu saja, kemudian aplikasi text editor. Contohnya Editplus, notepad++, dreamweaver dan lain-lain, yang paling sederhana kita bisa menggunakan note pad. Bawaan dari windows, buka melalui start – Program – accesories – note pad. Saya memakai notepad++ jadi text nya warna-warni saya suka he he he 2. Anda tidak perlu mahal-mahal beli buku, tapi kalau anda punya buku tentang html, maka itu sangat membantu.OK materi 1.Pengenalan htmlHTML : Hyper Text Markup Language merupakan salah satu bahasa program yang digunakan untukmembuat desain web. Html bukanlah satu-satunya bahasa yang digunakan, tetapi html merupakanbahasa standar yang dikenali oleh semua browser, sehingga memungkinkan web dapat diakses denganbaik oleh semua pengguna internet. Selain itu, didalam html juga dapat disisipkan dengan bahasa yanglain, misalnya CSS, Javascript dan lain-lain.Bentuk umum struktur pemrograman html adalah sebagai berikut:<html> <head> <title> untuk menuliskan judul </title> </head> <body> Isi program html, css, javascript dll </body></html>Kode yang dicetak tebal mutlak harus ada, yaitu tag buka html (<html>) dan tag penutup html (</html>).Aplikasi yang digunakan untuk membuat program html juga sangat banyak, yang paling sederhana bisamenggunakan notepad yang merupakan bawaan dari sistem operasi windows. Dapat juga menggunakantext editor yang lain, misalnya edit plus, notepad plus, dreamweaver dan lain-lain. Setiap program yangdibuat, kemudian disimpan dalam format ekstensi *.htm atau *.html sehingga hasilnya dapat dilihatpada browser.
  2. 2. Contoh 1 menampilkan teks:Penulisan seperti diatas hanya untuk memudahkan membacanya saja, boleh ditulis :Hasilnya pada browser akan sama, tetapi saya anjurkan anda menggunakan cara yang pertama, karenalebih enak dilihat, selain itu memudahkan dalam membaca susunan program. Jika terjadi kesalahan,maka dengan mudah kita menemukan kesalahan tersebut.Setelah kita membuat program seperti diatas, kemudian simpan dengan ekstensi .html misalnya kitasimpan dengan nama: latihan.htmlPada folder dimana anda menyimpan, klik ganda file tersebut, maka akan muncul pada broser sebagaiberikut:Mudah sekali bukan? Nah untuk selanjutnya, silahkan download full modulnya, kalau saya posting disiniterlalu panjang banyak gambar.Contoh 2 menampilkan teks dengan format html yang lengkap:Lalu kita simpan, kemudian kita refresh pada browser kita, misal anda pake mozzila atau ie atau apa ajalah, maka hasilnya:
  3. 3. Lalu kalau hasinya sama, kenapa harus memilih yang banyak kode? Kenapa tidak yang sedernana saja?Ya, ok. Kita baru menuliskan sedikit, kalau kita membuat program yang kompleks maka harus lengkapseperti aturan html. Dalam sebuah browser biasanya menggunakan standar W3C apa itu saya juga gakpaham he he he. Itu semacam standar sebuah bahasa program dapat dikenali oleh semua platform, jadidi komputer manapun bisa terbaca.Contoh 3 menampilkan judul halaman:Ketika anda membuka Yahoo! Atau Google, maka pada broser anda akan tampil judul seperti ini:Nah, bagaimana cara menampilkan judul? Seperti ini kode nya:Maka kalau kita simpan kemudian kita jalankan akan seperti ini hasilnya:Lihat! Bandingkan dengan yang tidak kita kasih title, nah yang perlu kita fahami bahwa title ini harusterletak didalam kalang tag head, lihat kode.Untuk sekedar pembuka materi, saya kita itu cukup, sekarang kita mulai ke tahap berikutnya, yaitumemulai membuat desain web! Siap? Ok kita mulai...
  4. 4. Membuat desain webDalah sebuah web, biasanya anda juga melihat ada beberapa bagian, antara lain misalnya: header,siderbar, isi, footer. Nah itu semua dibuat dengan html, kita menggunakan perintah table.Langsung saja seperti ini:Kalau kita buka pada browser maka hasilnya seperti ini:Apakah seperti tambilan sebuah website? Orang akan langsung close kalau tampilan web anda sepertiitu he he he. Tapi pada prinsipnya seperti itu, sekarang kita tambahkan properti supaya tampil satuhalaman penuh seperti ini:
  5. 5. Maka ketika dijalankan hasilnya :Sudah seperti web? Belum juga, ya namanya baru belajar, oke supaya tampil seperti web kita atur lagiproperty nya sehingga kodenya:
  6. 6. Hasilnya sebagai berikut:Nah sekarang tinggal kita atur lagi ukuran header, isi dan footernya buar seperti website beneran,tambahkan property seperti ini:
  7. 7. Nah sekarang kita lihat hasilnya:Udah hampir mirip website yah? Nah untuk pemilihan warna, anda bisa menggunakan kode warna, sayasendiri tidak hafal, kode warna berupa angkan heksa desimal dari 0,1,2,3,...A,B,C,D,E,F sekarang kitacoba-coba saja yuk... atau kalau anda punya photoshop, disana anda tinggal memilih warna apa,
  8. 8. kemudian akan tampak kode nya, anda copy ke program,jadi deh. Misalnya seperti ini, saya juga belumtahu hasilnya apa:Penulisan kode warna dengan format: #123456; diawali tanda pagar, diikuti 6 digit bilangan heksadiakhiri tanda titik-koma.Hasil kode diatas:
  9. 9. Misal kita coba yang lain:Kita lihat hasilnya ternyata seperti ini:Ok dirasa cukup deh permainan warnanya, sekarang kita akan membuat halaman web denganpembagian halaman seperti ini: header menu isi
  10. 10. footerNah, sebelum kita ke koding, kita lihat dulu algoritmanya:Bagian atas dan bawah tidak ada masalah, tapi pada bagian tengah ada dua kolom, lebar dan sempit.Untuk membuat baris, perintahnya adalah <tr>Untuk membuat kolom, perintahnya <td>Kasus diatas: 1. Baris pertama satu kolom, baris kedua dua kolom. Ini bisa kita asumsikan lebar kolom baris pertama = 2 kali lebar kolom baris kedua sehingga kita tambahkan perintah colspan 2. Demikian juga baris ketiga, kita tambahkan colspanSehingga perintahnya begini:Hasilnya seperti ini:Kolom bagian tengah kita ubah lagi, sehingga seperti konsep rencana awal.
  11. 11. Kode kita ubah menjadi (saya cuplik saja biar irit halaman yah...) :Maka hasilnya menjadi seperti ini:Sip udah seperti yang diharapkan, misalnya untuk isi kita ubah warnanya:
  12. 12. Ok istirahat sebentar.....Sekarang kita akan belajar property teks.Pada bagian header, biasanya judul web nya khan besar, nah kita atur sebagai berikut:Yang kita lakukan adalah mengatur font, font face=jenid huruf, font size=ukuran teks, font color=warnaHasilnya:Sekarang pada bagian isi, anda isi denganteks apa sajalah yang banyak yah,,,,
  13. 13. Perintah yang kita pakai adalah valign untuk perataan secara vertikal, dan align untuk perataan secarahorisontal. Kemudian ada kode baru yaitu <br> ini digunakan untuk membuat baris baru atau pindahbaris, lihat hasilnya:
  14. 14. Ok kali ini kita akhiri dulu, kita lanjutkan pada materi berikutnya...

×