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 web
Dalah 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

menu

isi

footer
Nah, 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 colspan
Sehingga 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=warna
Hasilnya:

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

Belajar html untuk pemula 1

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Belajar html untuk pemula 1

Similar to Belajar html untuk pemula 1 (20)

Belajar html untuk pemula 1