Pengertian HTML :
- HTML merupakan singkatan dari HyperText Markup Language.
- HTML bukanlah sebuah bahasa pemrograman.
- HTML digunakan untuk menyebarkan informasi secara global.
Kalau membaca tulisan ini, maka yang anda baca pada dasarnya adalah dokumen HyperText Markup Language (HTML). Itu adalah tipe dokumen yang digunakan untuk membuat halaman web yang ditemui pada berbagai situs web. Cara membuat HTML relatif sederhana dan hanya membutuhkan aplikasi text editor, seperti notepad di Windows. Untuk produktifitas lebih baik, saya sarankan untuk menggunakan text editor dengan fitur yang dapat menandai kode HTML dengan variasi warna, seperti aplikasi Notepad++ yang harus diinstal terlebih dahulu.
Untuk mulai membuat HTML, pertama-tama mari kita lihat bagaimana struktur minimal dari dokumen HTML dibawah ini:
1
2
3
4
5
6
7
8
9
10
11
| <html> <head> <meta charset=”utf-8”> <title>Cara Membuat HTML | 9trilliun.com</title> </head> <body><h1>Cara Membuat HTML</h1><p>Contoh Struktur Minimal Dokumen HTML</p></body></html> |
Simpan dokumen diatas dari teks editor dengan nama index.html. Pada bagian paling atas contoh dokumen HTML terdapat teks yang merupakan deklarasi doctype. Deklarasi tersebut adalah cara untuk memberikan petunjuk ke peramban web (webbrowser) agar menampilkan dokumen HTML sesuai dengan standar yang ditentukan oleh World Wide Web Consortium (W3C), yaitu organisasi yang bertanggung-jawab untuk membuat standarisasi berbagai teknologi yang digunakan di web, salah satunya adalah HTML.
Setelah deklarasi doctype, terdapat teks . Ini disebut dengan tag. Seperti yang bisa dilihat pada contoh dokumen HTML diatas, ada beberapa tags berbeda selain . Sebagian besar tag mempunyai pasangannya, sebagai contoh tag pembuka selalu ditutup dengan (perhatikan garis miring “/” pada tag penutup). Tidak semua tag mempunyai pasangan, seperti yang berdiri sendiri.
Secara garis besar dokumen HTML dibagi menjadi 2 bagian. Bagian pertama yang berada didalam tags berisi informasi mengenai dokumen HTML itu sendiri. Sementara yang berada didalam tags adalah bagian yang ditampilkan oleh peramban web ke pengguna. Segala sesuatu yang anda baca dan lihat pada tulisan ini, diletakkan didalam pasangan body tags.
Mari kita lihat daribagian pertama. Didalam head tags terdapat tag. Teks charset=”utf-8” disebut dengan atribut untuk meta tag. Atribut terdiri dari pasangan name dan value. Dalam hal ini name adalah charset dan value adalah utf-8. Meta tagdigunakan untuk menginformasikan peramban web, kalau dokumen HTML ini menggunakan character set UTF-8. Bahasa dengan huruf latin, seperti bahasa Inggris dan Indonesia dapat menggunakan character set UTF-8.
Setelah meta tag terdapat Cara Membuat HTML | 9trilliun.com . Pasangan tags pembuka dan penutup dengan konten yang ada didalamnya disebut dengan elemen HTML. Pada contoh, title element mempunyai konten berupa teks “Cara Membuat HTML | 9trilliun.com”. Teks tersebut yang berada dalam elemen title menunjukkan judul dokumen HTML. Ini adalah satu-satunya informasi dalamhead yang ditampilkan oleh peramban web, tepatnya bisa dilihat di tab yang ada di peramban itu sendiri.
Bagian kedua dari dokumen HTML berada dalam elemen body. Pada contoh didalam body terdapat 2 elemen, yaitu h1 dan p. Ketika anda menulis surat, biasanya dimulai dengan judul (heading) dan diikuti dengan beberapa paragraf dibawahnya. Begitu juga dengan menulis dengan HTML. Tulisan tersebut bisa mempunyai judul yang ditandai dengan h1. Suatu tulisan bisa dibagi lagi menjadi beberapa bagian dan dimulai dengan sub-judul. Anda bisa menandai sub-judul dengan elemen h2, h3, …. , hingga h6. Sementara paragraf dalam tulisan bisa ditaruh didalam elemen p.
Kalau anda sudah menyalin contoh dokumen HTML diatas dan menyimpannya sebagai index.html melalui teks editor, maka sekarang saatnya untuk mencoba menampilkan dokumen tersebut di peramban web. Klik kanan index.html, arahkan mouse cursor ke menu Open with di Windows dan pilih peramban web yang ingin digunakan untuk menampilkan dokumen tersebut, seperti Google Chrome atau Mozilla Firefox. Apabila anda mengikuti semua petunjuk yang sudah disebutkan, maka peramban web akan menampilkan teks “ Cara Membuat HTML | 9trilliun.com” tanpa tanda petik. Bila teks tersebut muncul di peramban web, maka anda sudah berhasil membuat dokumen HTML.
Cara Belajar Membuat HTML Dasar
Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.
Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :
1 | <html> |
2 | <head> |
3 | <title>Belajar HTML</title> |
4 | </head> |
5 | <body> |
6 | Hallo, selamat belajar HTML. |
7 | </body> |
8 | </html> |
Catatan : Nomor yang muncul di setiap baris tidak perlu anda ketik, itu hanya tampilan untuk menunjukkan nomor baris kode yang ada. Jadi ketikkan seperti gambar berikut ini :
Selanjutnya silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan “latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.
Kemudian tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan cara memilih dan klik double.
Jika sudah benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan aplikasi browser yang ada di komputer anda seperti Internet Explorer atau Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti berikut.
Sampai disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan bagaimana cara melihat tampilan HTML yang anda buat melalui browser. Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode HTML yang diberikan maka anda tahu bagaimana mencobanya.
Pada tahap belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML, anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML yang lebih kompleks.
(Sumber: codingku.com dan kuliah.imadewira.com)
No comments:
Post a Comment