1. Perkenalan dengan HTML
HTML adalah
bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML
sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila kalian ingin
belajar membangun sebuah situs sendiri maka bahasa HTML wajib kalian pelajari.
Pelajaran HTML ini akan diberikan dalam bahasa yang mudah dimengerti sehingga
kalian dapat belajar mulai dari nol alias tidak tahu apa-apa tentang html.
HTML merupakan singkatan dari Hypertext Markup Language yang merupakan
bahasa paling standard yang digunakan untuk membuat suatu website. HTML
bukanlah merupakan suatu bahasa pemrograman, karena bahasa ini hanya berguna
untuk mengontrol tampilan dari suatu halaman (web page) beserta isinya, beda
dengan bahasa PHP yang didalamnya dapat mendukung suatu bentuk perulangan
(Loop) atau bentuk pengandaian (if-else) sehingga bahasa PHP dapat disebut
sebagai suatu bahasa pemrograman. Namun dengan berawal dari bahasa paling dasar
ini kamu dapat menambahkan obyek-obyek lainnya seperti gambar, suara, video,
dan permainan flash dalam suatu dokumen HTML.
Untuk
membuat suatu dokumen HTML, hal-hal yang kamu perlukan hanyalah sebuah text
editor biasa seperti : Notepad atau Wordpad (program standar bawaan dari
windows) lalu kamu mengetikkan kode HTML didalamnya kemudian di save (simpan)
dengan akhiran (ekstensi) .htm atau .html. Sebagai contoh kamu bisa menyimpan
dokumen HTML kamu dengan nama belajar.html Bila kamu ingin sebuah HTML editor
yang lebih profesional lagi, mungkin kamu bisa menggunakan program MS FrontPage
atau bahkan Dreamweaver (editor HTML yang paling terkenal), tetapi tentunya
kedua program (software) diatas merupakan software berbayar yang tentunya
disini kami amat tidak menyarankan kamu untuk mencari crack-nya atau
menggunakan software ilegal. Kemudian apabila file kamu telah disimpan dengan
akhiran .html atau .htm maka selanjutnya kamu dapat membukanya dengan software
(dalam hal ini disebut browser) seperti : Internet Explorer (bawaan windows) , Mozilla
Firefox , Google
Chrome , Opera , atau
browser lainnya.
2. Dasar-dasar HTML
Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur
dari HTML. Struktur HTML ini dapat kamu ibaratkan seperti Hamburger. Pernah
makan? Kalau belum, kamu akan melihat roti bulat yang ditumpuk-tumpuk dengan
isi sayuran didalamnya. Struktur HTML ini mirip seperti Hamburger, sayuran yang
dijepit oleh roti tersebut adalah isi dari kedua tag HTML yang menjepitnya. Apa
itu tag? Sekarang kita langsung lihat saja pada struktur sederhana dari HTML.
Di bawah ini adalah struktur dasar suatu file html,
- <html>
- <head>
- <title>Sedang Belajar</title>
- </head>
- <body>
- aku belajar html nih ..
- </body>
- </html>
kode yang dimulai dengan tanda "<" dan diakhiri dengan
tanda ">" (tanpa tanda kutip) merupakan tag-tag HTML. Tag-tag ini
menandai bagian-bagian pada halaman situs agar ditampilkan sesuai dengan
standar tampilannya. Tag HTML dasar adalah yang kalian lihat diatas, yaitu
html, head, dan body, inilah roti dari hamburger kita, mereka masing-masing
menjepit isinya. Perhatikan kode paling atas dan paling bawah, yaitu
- <html>
dan
- </html>
Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat
dalam tag ini adalah bagian dari html.
Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag
<head> dan </head> digunakan untuk meletakkan informasi-informasi
penting yang tidak ditampilkan oleh browser sehingga ketika kita tidak akan
melihatnya pada halaman situs. Tulisan didalam <head> dan </head>
hanya dapat dilihat apabila kita mengklik 'View Source' pada browser Internet
Explorer, atau 'View Page Source' pada Mozilla Firefox. Keduanya dapat
ditemukan dengan klik kanan pada halaman situs yang dilihat. Tag <head>
ini umumnya berisi judul (tag <title> dan </title>) dari halaman
situs dan beberapa informasi tambahan lainnya.
Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.
Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.
Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
- <html>
- <head>
- <title>Sedang Belajar</title>
- </head>
- <body bgcolor=red>
- aku belajar html nih ..
- </body>
- </html>
Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang
merah pada halaman situs..". Sehingga latar belakang dari halaman yang
kalian buat akan berwarna merah. Atribut-atribut yang lain dapat kalian temukan
pada bagian tag yang bersangkutan.
Penjelasan diatas merupakan dasar-dasar dari HTML. Kalian dapat
mencobanya sendiri di komputer kalian dengan menggunakan notepad atau wordpad,
caranya dengan menulis kode-kode html dalam notepad atau wordpad lalu simpan
sebagai [dot]html. Jangan lupa untuk memilih pilihan 'All Files' untuk 'Save as
Type'nya sehingga file yang tersimpan bukan [dot]txt. Atau kalian juga dapat
mencobanya langsung disini, dengan menulis kode-kode tersebut di papan tulis
dibawah ini. Setelah selesai kalian dapat melihat hasilnya dengan menekan
tombol 'Lihat Hasilnya!'. Papan tulis ini akan ada di setiap pelajaran HTML
berikutnya untuk memudahkan kalian mencoba kode-kode HTML dalam pelajaran
tersebut.
Posting Komentar