Pengenalan HTML - Introduction to HTML

Pengenalan  HTML berarti proses, cara, perbuatan mengenal atau mengenali HTML. Sebelum kita membahas apa itu HTML ada baiknya kita kenal dahulu apa itu website - anda bisa membaca artikel Definisi Web, Sejarah Web, Macam - macam Situs Web, dan Aplikasi Web. Pengetahuan tentang HTML mutlak diperlukan untuk membuat sebuah halaman website. Selain itu perlu juga diketahui bagaimana sebuah website bekerja.

Pada saat sebuah website diakses melalui jaringan internet, ada dua sisi yang bekerja, yaitu klien dan server. Klien adalah orang yang mengakses website melalui browser. Ketika klien mengetikkan alamat website
(URL) pada browser, komputer klien tersebut akan mengirimkan permintaan (HTTP request) ke alamat server yang sesuai dengan alamat website. Lalu server akan memberi respon (HTTP response) dengan mengirimkan sejumlah data ke komputer klien. Data tersebut diterjemahkan oleh browser dalam bentuk teks, gambar, video, suara, dll.


Hypertext Markup Languange yang disingkat HTML adalah bahasa yang digunakan untuk membuat sebuah website. Bahasa ini akan diterjemahkan oleh browser sehingga tampaklah halaman sebuah website seperti yang biasa kita kunjungi.
Ada dua poin penting dalam HTML yaitu tag dan style. Tag merupakan penanda untuk membuat suatu tampilan atau suatu fungsi sedangkan style adalah keterangan tambahan yang menentukan tampilan dari website itu. Adapula javascript yang akan membuat tampilan menjadi semakin menarik.

HTML Editor


File HTML dapat dibuat menggunakan aplikasi sederhana seperti Notepad. Namun penggunaan Notepad kurang efektif karena tidak tersedianya berbagai fitur seperti library dan browser test. Alternatif lain dapat menggunakan aplikasi berikut:
  1. Notepad++. Text editor seperti Notepad namun memiliki berbagai kelebihan seperti formatting yang lebih mudah dan juga library yang mengenal bahasa HTML dan juga PHP. Notepad++ digunakan ketika penulisan file HTML masih sederhana.
  2. Adobe Dreamweaver. Text editor yang sangat baik karena dilengkapi library yang sangat lengkap sehingga sangat memudahkan developer. Kompatibilitas file HTML yang dibuat dapat langsung dicoba melalui fitur browser test, apakah file yang telah dibuat tersebut kompatibel pada browser yang berbeda-beda. Artinya, apakah file HTML yang telah dibuat dapat ditampilkan dengan baik oleh browser seperti Chrome, Firefox, Opera, Internet Explorer, Maxthon, dll.
  3. Neatbeans. Merupakan text editor yang cukup advance, namun memiliki library yang sangat lengkap sehingga cocok digunakan ketika membangun website yang menggunakan pemrograman yang agak rumit.

Membuat Sebuah Halaman HTML Sederhana


Membuat sebuah halaman HTML yang paling sederhana kita cukup menuliskan di HTML editor sebagai berikut:

<html>
<head>
<title>
Mod Template
</title>
<!--selain judul, head juga berisi atribut lain-->
</head>
<body>
Isi halaman web.
</body>
</html>
Lalu simpan dengan file extension .html, misal "modtemplate1.html". Sampai di sini kita sudah berhasil membuat sebuah file HTML untuk sebuah halaman web. Klik dua kali file tersebut untuk melihat penampilannya di browser. Kita pelajari lebih lanjut contoh di atas.
  1. Tag. Adalah komponen dalam html untuk menginformasikan pada browser untuk memberikan efek tertentu. Tag ditandai dengan <...>...</...>. Yaitu tag pembuka (<...>) dan tag penutup (</...>). Ada pula tag yang hanya satu, awalan dan akhiran menjadi satu (<.../>).
  2. Tag <html></html>. Setiap file html harus memiliki tag ini agardapat dikenal oleh browser.
  3. Tag <head></head>. Isi yang terdapat diantara tag <head>dan</head> adalah infromasi tentang situs itu seperti title, meta data, dan informasi lainnya.
  4. Tag <!--...-->. Ini adalah tag komentar yang tidak akan tampak oleh pengunjung kecuali dalam mode developer.
  5. Tag <body></body>. Merupakan isi halaman web yang dilihat pengunjung.
File yang kita buat di atas masih sangat sederhana dan belum standard. Sekarang ada standard dalam penulisan file HTML seperti di bawah ini. Simpan dengan nama "modtemplate2.html"

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>
Mod Template
</title>
<!--selain judul, head juga berisi atribut lain-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>

<p>Isi halaman web.</p>

</body>
</html>
Semua baris sebelum <head> merupakan sebuah DTD atau Document Type Definition yang mendefinisikan versi XHTML maupun HTML yang kita gunakan. DTD mutlak ada pada sebuah file atau dokumen XHTM namun versi yang kita gunakan bisa mana saja tergantung kebutuhan. Adapun meta adalah penjelasan tentang suatu elemn di file HTML. Contoh penggunaannya sebagai berikut:
<head>

<title>
Mod Template
</title>

<meta name='keywords' content='[kata kunci halaman web]'/>
<meta name='description' content='[deskripsi tentang web]'/>
<meta name='author' content='[pembuat]'/>

</head>
Buka lagi file "modtemplate2.html" di browser untuk melihat hasilnya.

Comments

Post a Comment

Entri Populer

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template