Belajar html untuk pemula 1

Belajar HTML untuk pemula 1

Rencananya materi tentang html ini akan berlanjut, sengaja saya buat per materi supaya mudah dipelajari. 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, maka berikanlah koreksi jika terjadi kesalahan, semoga ilmu yang kita sebarluaskan menjadi berkah dan bermanfaat 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 html

HTML : Hyper Text Markup Language merupakan salah satu bahasa program yang digunakan untuk membuat desain web. Html bukanlah satu-satunya bahasa yang digunakan, tetapi html merupakan bahasa standar yang dikenali oleh semua browser, sehingga memungkinkan web dapat diakses dengan baik oleh semua pengguna internet. Selain itu, didalam html juga dapat disisipkan dengan bahasa yang lain, 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 bisa menggunakan notepad yang merupakan bawaan dari sistem operasi windows. Dapat juga menggunakan text editor yang lain, misalnya edit plus, notepad plus, dreamweaver dan lain-lain. Setiap program yang dibuat, kemudian disimpan dalam format ekstensi *.htm atau *.html sehingga hasilnya dapat dilihat pada browser.

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, karena lebih 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 kita simpan dengan nama: latihan.html

Pada folder dimana anda menyimpan, klik ganda file tersebut, maka akan muncul pada broser sebagai berikut:

Mudah sekali bukan? Nah untuk selanjutnya, silahkan download full modulnya, kalau saya posting disini terlalu 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 aja lah, maka hasilnya:

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 lengkap seperti aturan html. Dalam sebuah browser biasanya menggunakan standar W3C apa itu saya juga gak paham he he he. Itu semacam standar sebuah bahasa program dapat dikenali oleh semua platform, jadi di 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 harus terletak didalam kalang tag head, lihat kode.

Untuk sekedar pembuka materi, saya kita itu cukup, sekarang kita mulai ke tahap berikutnya, yaitu memulai membuat desain web! Siap? Ok kita mulai...

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 seperti itu he he he. Tapi pada prinsipnya seperti itu, sekarang kita tambahkan properti supaya tampil satu halaman penuh seperti ini:

Maka ketika dijalankan hasilnya :

Sudah seperti web? Belum juga, ya namanya baru belajar, oke supaya tampil seperti web kita atur lagi property nya sehingga kodenya:

Hasilnya sebagai berikut:

Nah sekarang tinggal kita atur lagi ukuran header, isi dan footernya buar seperti website beneran, tambahkan property seperti ini:

Nah sekarang kita lihat hasilnya:

Udah hampir mirip website yah? Nah untuk pemilihan warna, anda bisa menggunakan kode warna, saya sendiri tidak hafal, kode warna berupa angkan heksa desimal dari 0,1,2,3,...A,B,C,D,E,F sekarang kita coba-coba saja yuk... atau kalau anda punya photoshop, disana anda tinggal memilih warna apa,

kemudian akan tampak kode nya, anda copy ke program,jadi deh. Misalnya seperti ini, saya juga belum tahu hasilnya apa:

Penulisan kode warna dengan format: #123456; diawali tanda pagar, diikuti 6 digit bilangan heksa diakhiri tanda titik-koma.Hasil kode diatas:

Misal kita coba yang lain:

Kita lihat hasilnya ternyata seperti ini:

Ok dirasa cukup deh permainan warnanya, sekarang kita akan membuat halaman web dengan pembagian halaman seperti ini:

header

isi

menu

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.

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:

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

Perintah yang kita pakai adalah valign untuk perataan secara vertikal, dan align untuk perataan secara horisontal. Kemudian ada kode baru yaitu <br> ini digunakan untuk membuat baris baru atau pindah baris, lihat hasilnya:

Ok kali ini kita akhiri dulu, kita lanjutkan pada materi berikutnya...

Technology

Belajar html untuk pemula 1