Cara Belajar HTML

HTML adalah singkatan dari Hyper Text Markup Language, dan merupakan kode atau bahasa yang digunakan untuk pembuatan situs web. Bila Anda belum pernah membuatnya sebelumnya, kode ini mungkin terlihat sedikit sulit, namun yang Anda perlukan hanya sebuah aplikasi edit teks biasa dan peramban internet. Anda mungkin telah mengenali sedikit kode HTML saat mengubah teks di forum internet, menyesuaikan profil internet, atau bahkan membuat artikel How.com.vn. HTML adalah alat bantu yang berguna bagi siapa saja yang menggunakan internet, dan untuk menguasai dasar-dasar HTML diperlukan waktu yang lebih sedikit daripada yang Anda bayangkan.

Bagian 1

Bagian 1 dari 2:

Belajar Dasar HTML

Unduh PDF

1
Buka sebuah dokumen HTML. Kebanyakan program edit teks seperti Notepad atau Microsoft Word untuk Windows dan TextEdit untuk Mac dapat digunakan untuk menulis dokumen HTML. Buka dokumen baru dan gunakan File → Save As di menu atas untuk menyimpannya sebagai "Web Page," atau untuk mengubah ekstensi berkas ke ".html" atau ".htm" dan bukan ".doc," ".rtf," atau ekstensi lainnya.
- Anda mungkin melihat peringatan bahwa dokumen Anda akan berubah menjadi "teks biasa" dan bukan "rich text," atau format khusus dan gambar tidak akan disimpan dengan benar. Ini tidak apa-apa; Dokumen HTML tidak menggunakan pilihan ini.
- Tidak ada perbedaan antara berkas .html dan .htm. Kedua format ini dapat bekerja.^{[1]XTeliti sumber}
2
Tampilkan dokumen dengan peramban internet. Simpan dokumen kosong, lalu cari ikon dokumen tersebut di komputer Anda dan klik dua kali untuk membukanya. Sebuah halaman web kosong akan terbuka di peramban. Jika tidak, tarik ikon dokumen tersebut ke baris URL (alamat) di peramban. Ketika mengedit dokumen HTML pada tutorial ini Anda dapat tetap memeriksa kembali dan melihat perubahan pada halaman web.
- Untuk diketahui bahwa tindakan ini belum membuat situs web menjadi daring. Halaman tidak akan dapat diakses oleh orang lain dan Anda tidak memerlukan koneksi internet untuk menguji dokumen. Anda menggunakan peramban hanya untuk "membaca" dokumen HTML seolah-olah sebuah situs web.
3
Pahamilah tag markah. Tag markah tidak muncul pada halaman web seperti teks biasa. Sebaliknya tag markah memberi tahu peramban web bagaimana untuk menampilkan sebuah halaman dan isinya. "Tag awal" berisi instruksi. Sebagai contoh, tag dapat memberi tahu peramban untuk menampilkan teks tebal. Anda juga perlu sebuah "tag akhir" untuk memberi tahu peramban tahu tempat instruksi berlaku: pada contoh ini, semua teks antara tag awal dan tag akhir akan tampil tebal. Tag akhir juga ditulis di dalam sudut sudut, namun memiliki tambahan sebuah garis miring setelah tanda kurung buka.
- Tuliskan tag awal di antara kurung sudut: <tag awal di sini>
- Tuliskan tag akhir di antara kurung sudut, dengan tambahan sebuah garis miring setelah tanda kurung buka: </tag akhir di sini>)
- Lanjutkan membaca untuk tahu cara menulis tag markah fungsional. Untuk langkah ini, Anda hanya perlu mengingat format dasar tag markah: <> dan </>
- Jika Anda juga memiliki tutorial HTML lain, tutorial tersebut mungkin menyebutkan tag sebagai "elemen", dan teks di antara tag awal dan tag akhir sebagai "konten elemen."
4
Tuliskan tag <html> pertama Anda. Setiap dokumen html dimulai dengan sebuah tag <html> dan diakhiri dengan sebuah tag </html>. Kode ini memberi tahu peramban bahwa segala sesuatu antara tag ini adalah kode HTML. Tambahkan tag ini ke dokumen Anda:
- Tuliskan <html> di bagian atas dokumen.
- Tekan enter atau return beberapa kali untuk menambahkan spasi, lalu tuliskan </html>
- Jangan lupa untuk menuliskan apa saja di antara kedua tag tersebut.
5
Isikan bagian <head> di dokumen. Di antara tag <html> dan </html>, tuliskan sebuah tag awal <head> dan sebuah tag akhir </head>. Tambahkan beberapa spasi di antaranya. Segala sesuatu yang berada di antara tag head akan ditampilkan pada halaman. Cobalah kode berikut dan lihat di mana kode ini akan muncul:
- Di antara tag <head> dan </head>, tuliskan <title> dan </title>
- Di antara tag <title> dan </title>, tuliskan Cara Belajar HTML - How.com.vn.
- Simpan dokumen lalu buka di peramban (atau simpan dokumen, lalu segarkan halaman peramban jika sudah terbuka.) Apakah Anda melihat kode tersebut di bagian atas peramban, di atas baris alamat?
6
Buatlah sebuah bagian <body>. Kode lainnya di dalam dokumen akan berada di bagian body, yang akan tampil pada halaman web. Tuliskan <body> dan </body> setelah tag akhir </head> namun sebelum tag </html>. Untuk kode lainnya di tutorial ini, semuanya harus dituliskan antara tag body tersebut. Dokumen Anda sekarang seharusnya terlihat seperti ini (abaikan tanda poin):
- <html>
- <head>
- <title>Cara Belajar HTML - How.com.vn</title>
- </head>
- <body>
- </body>
- </html>
7
Tambahkan teks dalam berbagai gaya. Kini saatnya untuk menuliskan sesuatu yang benar-benar dapat dilihat di peramban! Apa pun yang Anda tuliskan di dalam tag body akan muncul di peramban setelah Anda menyimpan dokumen HTML dan menyegarkan halaman peramban. Jangan tuliskan apa pun dengan simbol < atau >, karena peramban Anda akan menafsirkannya sebagai instruksi HTML dan bukannya teks normal. Tuliskan Halo Dunia! (atau apa saja yang Anda suka), lalu tambahkan tag baru ini di sekitarnya dan lihat apa yang terjadi untuk masing-masing tag:
- <em>Halo Dunia!</em> akan muncul sebagai "teks tegas:" Halo Dunia!
- <strong>Halo Dunia!</strong> akan muncul sebagai "teks tebal:"Halo Dunia!
- <s>Halo Dunia!</s> akan muncul sebagai teks dicoret: ~~Halo Dunia!~~
- <sup>Halo Dunia!</sup> akan muncul sebagai teks superskrip: ^{Halo Dunia!}
- <sub>Halo Dunia!</sub> akan muncul sebagai teks subskrip: _{Halo Dunia!}
- Cobalah kombinasi berikut: Seperti apa <em><strong>Halo Dunia</strong></em> terlihat?
8
Bagilah teks menjadi beberapa paragraf. Jika Anda menuliskan beberapa baris teks dalam dokumen HTML, Anda mungkin melihat bahwa jeda baris tidak muncul di peramban. Anda harus menambahkan kode ini sendiri:
- <p>Ini adalah paragraf terpisah.</p>
- Kalimat ini diikuti oleh sebuah baris baru. <br>sebelum kalimat ini dimulai.
  Ini adalah tag pertama Anda yang tidak perlu tag akhir! Tag ini disebut "tag kosong."
- Buatlah judul untuk menampilkan nama-nama bagian:
  <h1>teks header</h1>: header terbesar
  <h2>teks header</h2> (header level 2)
  <h3>teks header</h3> (header level 3)
  <h4>teks header</h4> (header level 4)
  <h5>teks header</h5> (header terkecil)
9
Pelajari cara membuat daftar. Ada berbagai cara untuk menuliskan daftar pada halaman web. Cobalah jenis-jenis kode berikut untuk tahu mana yang Anda sukai. Perhatikan bahwa sepasang tag berada di sekitar seluruh daftar (seperti tag <ul> dan </ul> untuk "daftar tidak tersortir"), sedangkan item individual pada daftar dikelilingi oleh sepasang tag, seperti <li>dan</li>.
- Gunakan kode ini untuk membuat daftar poin:
  <ul><li>Salah satu item</li><li>Item lain</li><li>Item lain</li></ul>
- Atau kode ini untuk membuat daftar bernomor:
  <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
- Atau kode ini untuk membuat daftar definisi istilah:
  <dl><dt>Coffee</dt><dd>- Minuman Panas</dd><dt>Leite</dt><dd>- Minuman Dingin</dd></dl>
10
Ramaikan halaman dengan jeda baris, garis horizontal, dan gambar. Kini saatnya untuk menambahkan hal-hal selain teks ke halaman Anda. Cobalah tag berikut, atau klik tautan tersebut untuk informasi lebih lanjut. Anda harus menggunakan layanan hosting gambar internet agar bisa memiliki URL untuk tautan ke dalam tag gambar:
- Create a Line Break in HTML: <br>
- Make a Line in HTML: <hr>
- Menambahkan gambar: <img src="url_gambar_Anda">
11
Tautkan ke tempat lain pada halaman yang sama. Anda juga dapat menggunakan kode ini untuk menautkan ke halaman dan situs web lain, namun karena Anda belum memiliki situs web, kita akan berfokus untuk membuat "jangkar", atau tempat-tempat tertentu pada halaman yang dapat Anda tautkan:
- Pertama buatlah jangkar dengan tag <a> di titik pada halaman tempat tujuan tautan. Namai sebagai sesuatu yang deskriptif dan mudah diingat.:
  
  <a name="Tips"> ini adalah teks untuk menempatkan jangkar.</a>
- Gunakan <href> untuk menautkan ke jangkar tersebut atau ke halaman web lain:
  
  <a href="url halaman web, atau nama jangkar di dalam halaman ini">Tuliskan teks atau gambar yang akan ditampilkan sebagai tautan di sini.</a>
- Untuk menghubungkan ke sebuah jangkar pada halaman web lain, tambahkan tanda # setelah URL, diikuti dengan nama jangkar. Misalnya, http://id.wikihow.com/Belajar-HTML#Tips akan menautkan ke bagian Tips di halaman ini.
Iklan

Bagian 2

Bagian 2 dari 2:

Belajar HTML Lebih Lanjut

Unduh PDF

1
Pelajari mengenai atribut. Atribut ditempatkan di dalam tag sehingga membuat perubahan tambahan untuk "isi elemen" antara tag awal dan akhir. Atribut tidak pernah berdiri sendiri, dan ditulis dalam format name="value", name adalah nama atribut (misalnya "color"), dan value menjelaskan contoh yang spesifik (misalnya "red").
- Anda sebenarnya sudah melihat atribut, jika Anda mengikuti tutorial di bagian HTML dasar. Tag <img> menggunakan atribut src, jangkar menggunakan atribut name, dan tautan menggunakan atribut href. Apakah Anda memperhatikan bila semua atribut ini mengikuti format ___="___"?
2
Bereksperimenlah dengan tabel HTML. Tabel atau grafik memerlukan berbagai tag. Bermainlah dengan tag ini atau belajarlah lebih dalam lagi mengenai tabel HTML.
- Mulailah dengan tag table di sekitar seluruh tabel: <table></table>
- Tag baris di sekitar isi masing-masing baris: <tr>
- Judul kolom di baris pertama: <th>
- Sel di baris berikutnya: <td>
- Berikut ini contoh dari semua tag yang disatukan:
  
  <table><tr><th>Kolom 1: Bulan</th><th>Kolom 2: Uang Disimpan</th></tr><tr><td>Januari</td><td>$100</td></tr></table>
3
Pelajari tag header lainnya. Selain tag <head> yang memiliki tag <title> di awal dokumen, terdapat pula tag-tag lain seperti:
- Tag meta untuk menyediakan metadata halaman web. Data ini dapat digunakan oleh mesin pencari ketika robot memindai internet untuk mencari dan mencantumkan situs web. Untuk membuat sebuah situs web lebih cepat tampil di mesin pencari, gunakan salah satu tag awal <meta> atau lebih (tanpa perlu tag akhir), masing-masing tag memiliki satu atribut nama dan satu atribut konten, misalnya: <meta name = "description" content = "tuliskan deskripsi di sini">; atau <meta name = "keywords" content = "tuliskan daftar kata kunci, masing-masing dipisahkan oleh koma">
- Tag <link> untuk menghubungkan berkas lain pada suatu halaman. Tag ini terutama digunakan untuk tautan ke lembar gaya CSS yang dibuat dengan menggunakan berbagai jenis pengodean untuk mengubah halaman HTML dengan menambahkan warna, menyelaraskan teks, dan banyak hal lainnya.
- Tag <script> untuk menghubungkan halaman ke berkas JavaScript, sehingga pengguna dapat berinteraksi di halaman tersebut.
4
Bermainlah dengan HTML yang Anda temukan di situs web. Anda dapat memperluas pengetahuan dengan melihat ke dalam sumber HTML halaman web. Lakukan ini dengan mengeklik kanan halaman dan memilih "View Source", "View Page Source" atau pilihan yang serupa, atau dengan membuka bagian View di menu atas peramban. Lihatlah tag-tag HTML yang masih terlihat asing bagi Anda, lalu cari jawabannya di internet.
- Meskipun Anda tidak dapat mengedit situs web orang lain, Anda dapat menyalin HTML tersebut ke dalam dokumen Anda sendiri, kemudian mengutak-atiknya untuk melihat pilihan yang dapat Anda lakukan. Namun tanpa memiliki lembar gaya CSS yang ditautkan oleh situs web, Anda mungkin tidak dapat melihat semua warna atau format pada halaman.
Ada berbagai sumber di internet yang dapat Anda gunakan untuk belajar tentang tag-tag HTML lainnya, seperti W3Schools atau Codecademy. Anda juga dapat menemukan buku-buku tutorial HTML, tapi pastikan Anda menggunakan buku yang diterbitkan tahun-tahun terakhir, karena terkadang terdapat pemutakhiran dan perubahan. Lebih baik lagi bila Anda belajar CSS agar memiliki kontrol lebih atas tata letak dan penampilan halaman web. Setelah Anda menguasai CSS, langkah berikutnya untuk dikuasai oleh desainer web yaitu Javascript.
Iklan

Tips

Anda bisa mengambil buku catatan dan menuliskan semua kode, sehingga bila terlupa Anda tinggal membuka buku catatan dan melihatnya. Anda juga bisa mencetak halaman ini sebagai titik acuan bermanfaat.
XML dan RSS saat ini menjadi lebih umum ditemukan pada situs web. Kode kedua format ini mungkin sulit untuk dibaca dan dipahami, terutama bila Anda melihatnya melalui berkas kode sumber HTML, tetapi kedua format ini berpengaruh untuk berkas HTML.
Anda dapat mencari sebuah halaman web sederhana di Internet, lalu mengutak-atik kodenya. Coba pindahkan beberapa teks, mengubah fonta, mengubah gambar, apa pun yang Anda mau!
Tag markah pada HTML tidak bersifat peka huruf besar atau kecil, tetapi menggunakan semua huruf kecil (seperti yang digunakan di halaman ini) sangat dianjurkan untuk tujuan standardisasi dan kompatibilitas dengan XHTML.^{[2]XTeliti sumber}

Peringatan

Jika Anda tertarik untuk memvalidasi halaman, kunjungi situs web W3 dan pelajari HTML yang valid! Standar HTML berubah dari waktu ke waktu, dan sebagian tag telah diganti dengan tag lain yang bekerja lebih baik pada peramban modern.
Beberapa tag telah menjadi usang selama beberapa tahun terakhir, dan telah diganti dengan tag lain untuk menghasilkan efek yang sama, bahkan menambahkan efek yang berbeda.

Hal Yang Anda Butuhkan

Sebuah program edit teks, mis. Notepad (Windows) atau TextEdit (Mac)
Sebuah kertas/buku catatan (opsional)
Sebuah program edit HTML seperti Notepad++ (Windows) atau TextWrangler (Mac) (opsional)