Sunday, 27 February 2011

Tutorial HTML

Andika Yuswanto No comments

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.
Anggap kalian sedang ingin membuat suatu kue. Sebelum membuat suatu kue maka kalian harus mengetahui terlebih dahulu bahan-bahan yang akan kalian gunakan beserta tahapan-tahapannya agar kue itu nanti terasa lezat apabila dimakan. Membuat file html pun demikian, sebelum membuat suatu file html kalian harus mengerti struktur dari file html itu sendiri dan 'bahan-bahan' yang digunakan dalam membuat file tersebut agar file html kalian dapat tampil dengan bagus di browser manapun.
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.

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,
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Sedang Belajar</title>  
  4.     </head>  
  5.     <body>  
  6.           
  7.         aku belajar html nih ..  
  8.   
  9.     </body>  
  10. </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
view plaincopy to clipboardprint?
  1. <html>  
dan
view plaincopy to clipboardprint?
  1. </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,
view plaincopy to clipboardprint?
  1. <html>  
  2.  <head>  
  3.  <title>Sedang Belajar</title>  
  4.  </head>  
  5.  <body bgcolor=red>  
  6.  aku belajar html nih ..  
  7.  </body>  
  8. </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.

Posted in:

0 komentar:

Post a Comment

 
Design by Andhika Yuswanto | Bloggerized by Kunir - JAWA TIMUR | UNIVERSITAS JEMBER