Isi

• Melangkah
• Bagian 1 dari 2: Mempelajari dasar-dasar HTML
• Bagian 2 dari 2: Mempelajari HTML lanjutan
• Tips
• Peringatan
• Kebutuhan

HTML adalah singkatan dari Hyper Text Markup Language, itu adalah kode atau bahasa yang digunakan untuk membuat situs web. Ini mungkin terlihat rumit jika Anda belum pernah memprogram sebelumnya, tetapi untuk mencobanya yang Anda butuhkan hanyalah program pengolah kata sederhana dan browser internet. Anda mungkin mengenali beberapa HTML dari forum, profil online, atau artikel wikiHow. HTML adalah sumber daya yang berguna bagi siapa saja yang menggunakan Internet, dan mempelajari HTML mungkin membutuhkan waktu lebih sedikit daripada yang Anda harapkan.

Melangkah

Bagian 1 dari 2: Mempelajari dasar-dasar HTML

1. Buka dokumen HTML. Sebagian besar program pengolah kata, termasuk Notepad atau Word untuk Windows dan Editor Teks untuk Mac, dapat digunakan untuk membuat dokumen HTML. Buka dokumen baru dan pilih File → Save As dari menu atas untuk menyimpan dokumen Anda sebagai halaman web, atau ubah ekstensi file dari ".doc", ".rtf" atau yang lainnya menjadi ".html" atau ".htm ".
   • Sekarang Anda mungkin melihat peringatan yang menyatakan bahwa dokumen Anda sedang diubah dari Rich Text Format (RTF) ke format "teks biasa", dan bahwa beberapa opsi pemformatan dan gambar tidak disimpan dengan benar. Anda bisa mengabaikan peringatan ini; Dokumen HTML tidak menggunakan opsi ini.
   • File .html dan .htm sama. Keduanya bekerja.
2. Lihat dokumen Anda dengan browser. Simpan dokumen kosong Anda, tutup, lalu klik dua kali dokumen di lokasi penyimpanannya untuk membukanya lagi. Dokumen Anda sekarang harus dibuka oleh browser Anda sebagai halaman web kosong. Jika tidak berhasil, seret ikon file ke bilah alamat browser Anda. Nanti, jika Anda mengedit dokumen HTML Anda dengan mengikuti langkah-langkah dalam artikel ini, Anda akan terus kembali ke browser untuk memeriksa seperti apa perubahan pada kodenya.
   • Catatan: halaman web Anda belum online. Halaman ini tidak dapat diakses oleh orang lain dan Anda tidak memerlukan koneksi internet yang berfungsi untuk mengujinya. Anda cukup menggunakan browser Anda untuk "membaca" dokumen HTML seolah-olah itu adalah situs web.
3. Pahami apa itu "tag". Tag tidak terlihat di halaman web akhir, seperti teks biasa. Tag memberi tahu browser Anda cara menampilkan halaman dan konten pada halaman. Tag awal berisi instruksi. Misalnya, dapat memberi tahu browser untuk menampilkan teks yang dicetak tebal. Tag akhir diperlukan untuk memberi tahu browser tempat instruksi berlaku: dalam contoh ini, semua teks di antara tag awal dan akhir dicetak tebal. Tag akhir juga ditempatkan di dalam tanda kurung, tetapi garis miring mengikuti tanda kurung pertama.
   • Tulis tag awal dalam tanda kurung: ini adalah hari awal>
   • Tulis tag akhir dalam tanda kurung, tetapi beri garis miring setelah tanda kurung pertama: /ini adalah tag penutup>)
   • Baca nanti di artikel cara menulis tag fungsional. Pada langkah ini, Anda hanya perlu mengingat cara mana untuk menulis tag:> dan />.
   • Dalam kursus HTML lainnya, tag juga disebut sebagai "elemen" dan teks antara tag pembuka dan penutup juga disebut sebagai "konten elemen".
4. Tulis tag html> pertama Anda. Setiap dokumen HTML dimulai dengan a html>tag dan diakhiri dengan a / html>menandai. Ini memberi tahu browser bahwa semua yang ada di antara tag ini ditulis dalam HTML. Tambahkan tag berikut ke dokumen Anda:
   • Menulis html> di bagian atas dokumen Anda.
   • Tekan enter atau return beberapa kali untuk memberi diri Anda ruang, lalu tulis / html>
   • Ingat kamu segala sesuatu dalam artikel ini di antara dua tag ini.
5. Jadikan head> bagian dari dokumen Anda. Di antara tag html> dan / html> Anda menulis file kepala>mulai tag dan a / head>-end tag. Beri jarak lagi di antara tag-tag ini. Apa pun yang ditulis di antara tag ini tidak akan terlihat di halaman web itu sendiri. Coba langkah-langkah berikut dan lihat apakah Anda dapat melihat di mana informasi itu muncul:
   • Tulis di antara tag head> dan / head>: judul> dan / judul>
   • Di antara tag title> dan / title> Anda menulis: Cara Mempelajari HTML (dengan Gambar) - wikiHow.
   • Simpan dokumen dan buka di browser (atau simpan dokumen dan segarkan halaman di browser jika halaman masih terbuka). Apakah Anda melihat apa yang baru saja Anda tulis di bagian atas halaman, di atas bilah alamat?
6. Buat bagian tubuh>. Segala sesuatu yang lain dalam dokumen pemula ini ditempatkan di bagian body>, dan itu ditampilkan di halaman web. Setelah tag / head>, tapi di depan tag / html> Anda menulis tubuh> dan / body>. Semua yang kami bahas lebih lanjut dalam artikel ini, kami tempatkan di antara tag tubuh. Anda sekarang harus memiliki dokumen yang terlihat seperti ini (tanpa peluru):
   • html>
   • kepala>
   • title> belajar HTML - wikiHow / title>
   • / head>
   • tubuh>
   • / body>
   • / html>
7. Tambahkan teks dengan gaya berbeda. Sekarang saatnya Anda mulai menulis sesuatu yang benar-benar akan terlihat di browser! Semua yang Anda tulis di dalam tag badan akan terlihat di browser setelah Anda menyimpan perubahan dan menyegarkan halaman di dalam browser. Menulis tidak sesuatu dengan tanda-tandanya dan >karena browser Anda akan menafsirkannya sebagai instruksi HTML, bukan teks biasa. Menulis misalnya Halo Dunia! (Bahasa Inggris untuk "Hello world!", Ini adalah teks standar global sebagai contoh pertama dalam kursus pemrograman apa pun dalam bahasa pemrograman tertentu) atau yang lainnya, dan letakkan tag berikut sebelum dan sesudah teks dan lihat apa yang terjadi:
   • em> Halo dunia! / em> Sepertinya teks miring: Halo Dunia!
   • kuat> Halo dunia! / kuat> terlihat seperti teks tebal: Halo Dunia!
   • s> Halo dunia! / s> Sepertinya teks coret: Halo Dunia!
   • sup> Halo dunia! / sup> terlihat seperti superskrip:
   • sub> Halo dunia! / sub> Sepertinya keterangan: _{Halo Dunia!}
   • Cobalah kombinasi: Bagaimana melihat em> kuat> Halo dunia! / kuat> / em> keluar?
8. Bagilah teks Anda menjadi beberapa paragraf. Jika Anda meletakkan baris teks yang berbeda di dokumen Anda, Anda akan melihat bahwa semua baris ditempatkan satu demi satu. Anda harus memprogram sendiri baris baru dan baris kosong:
   • p> Ini adalah bagian terpisah./p>
   • Kalimat ini ada di baris pertama dan kalimat ini di baris berikutnya.
     Ini adalah tag pertama yang kami temukan yang tidak membutuhkan tag akhir! Kami menyebutnya tag satu tag kosong.
   • Buat header untuk memperjelas nama bagian:
     h1> tajuk / h1>: kemungkinan tajuk sebesar mungkin
     h2> tajuk / h2> (tajuk 2 tingkat)
     h3> tajuk / h3> (tajuk 3 tingkat)
     h4> tajuk / h4> (tajuk 4 tingkat)
     h5> tajuk / h5> (tajuk sekecil mungkin)
9. Pelajari cara membuat daftar. Ada beberapa cara untuk membuat daftar di halaman web. Cobalah metode berikut untuk mencari tahu apa yang paling Anda sukai. Perhatikan bahwa sepasang tag ditempatkan di sekitar seluruh daftar (seperti ul> dan / ul> tag untuk daftar tidak berurutan) dan bahwa pasangan tag yang berbeda ditempatkan di sekitar setiap item dalam daftar, seperti li> dan / li> .
   • Gunakan kode berikut untuk membuat daftar berpoin:
     ul> li> 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 apa yang disebut daftar definisi:
     dl> dt> Kopi / dt> dd> - Minuman panas / dd> dt> Susu / dt> dd> - Minuman dingin / dd> / dl>
10. Jadikan halaman Anda lebih menarik dengan garis, garis horizontal, dan gambar baru. Sekarang saatnya untuk mulai menambahkan hal-hal lain ke halaman Anda. Coba tag berikut (gambar harus diposting online agar Anda dapat menggunakan link ke gambar):
    • Sisipkan baris: br> atau jam>
    • Sisipkan gambar: img src = "the_url_of_your_image">
11. Sisipkan link ke tempat lain di halaman. Anda juga dapat menggunakan kode ini untuk menautkan ke halaman dan situs web lain, tetapi karena Anda belum memiliki situs web, kami akan fokus pada "jangkar", yaitu tempat-tempat tertentu pada halaman yang dapat Anda tautkan:
    • Pertama, buat jangkar dengan tag a> pada titik di halaman yang ingin Anda tautkan. Beri jangkar Anda nama yang jelas yang mudah diingat:
      
      a name = "Tips"> Ini adalah teks tempat Anda menempatkan anchor./a>
    • Gunakan tag href> untuk menautkan ke jangkar Anda atau ke halaman web lain:
      
      a href = "url halaman web atau nama jangkar di halaman ini"> Tulis teks atau gambar yang ditampilkan sebagai tautan di sini./a>
    • Untuk menautkan ke jangkar di halaman lain, tambahkan karakter # setelah url, diikuti dengan nama jangkar Anda. Misalnya http://www.wikihow.com/HTML-leren#Tips akan membawa Anda langsung ke bagian "Tips" di halaman ini.

Bagian 2 dari 2: Mempelajari HTML lanjutan

1. Pelajari tentang atribut. Atribut ditempatkan di dalam tag dan digunakan untuk membuat penyesuaian tambahan pada "konten elemen" antara tag awal dan akhir. Mereka tidak pernah berdiri sendiri. Mereka ditulis sebagai berikut: name = "value". nama mewakili nama atribut (misalnya, "warna") dan nilai menjelaskan kasus khusus ini (mis. "merah").
   • Jika Anda telah melihat lebih dekat di bagian sebelumnya dari artikel ini, Anda telah menemukan atribut. Tag img> menggunakan atribut src, jangkar menggunakan atribut nama dan tautan menggunakan atribut tersebut href. Anda dapat mengetahui bahwa mereka semua berukuran ___='___’ mengikuti.
2. Bereksperimen dengan tabel HTML. Untuk membuat tabel atau grafik Anda membutuhkan beberapa tag:
   • Mulailah dengan tag tabel ("tabel" dalam bahasa Inggris) di sekitar seluruh tabel:tabel> / tabel>
   • Tempatkan tag di sekitar konten setiap baris: tr>
   • Tempatkan tajuk kolom di baris pertama: th>
   • Tempatkan sel dalam baris yang berurutan: td>
   • Ini adalah contoh bagaimana semua ini bersatu:
     
     tabel> tr> th> Kolom 1: Bulan / th> th> Kolom 2: Uang yang disimpan / th> / tr> tr> td> Januari / td> td> € 100 / td> / tr> / tabel>
3. Pelajari tag lain yang digunakan di bagian kepala. Anda telah mempelajari tag head>, yang Anda tempatkan di awal setiap dokumen. Selain tag title>, mungkin ada tag lain di bagian head:
   • Tag meta digunakan untuk membuat metadata tentang halaman web. Data ini digunakan oleh mesin pencari untuk mengkategorikan halaman web. Untuk membuat halaman Anda terlihat oleh mesin pencari, Anda dapat menempatkan satu atau lebih tag meta (tag akhir tidak diperlukan), setiap tag harus mengandung tepat satu atribut nama dan atribut konten, misalnya: meta name = "description" content = "letakkan di sini deskripsi ">; atau meta name = "keywords" content = "tulis daftar kata kunci di sini, selalu dipisahkan dengan koma">
   • link> tag digunakan untuk menghubungkan file lain ke halaman. Biasanya digunakan untuk mengasosiasikan lembar gaya CSS dengan halaman HTML, halaman ini dibuat dengan jenis kode yang berbeda dan digunakan untuk menentukan gaya keseluruhan halaman.
   • script> tag digunakan untuk mengasosiasikan file javascript dengan halaman HTML. Javascript memungkinkan halaman berubah jika pengguna melakukan sesuatu pada halaman.
4. Bermain dengan HTML dari halaman yang ada. Melihat kode sumber halaman web adalah cara terbaik untuk memperluas pengetahuan HTML Anda. Klik kanan pada halaman dan pilih "Lihat sumber", "Tampilkan sumber halaman" atau yang serupa. Cari tahu fungsi tag tertentu yang tidak Anda ketahui atau cari jawabannya di internet.
   • Anda tidak dapat mengedit situs web orang lain, tetapi Anda dapat menyalin kode HTML ke dalam dokumen Anda sendiri dan bermain-main dengannya untuk melihat apa saja penyesuaian yang dilakukan. Catatan: karena banyak situs web menggunakan lembar gaya CSS, Anda mungkin tidak dapat melihat banyak warna atau gaya lainnya.
5. Pelajari tentang HTML dengan membaca artikel yang lebih mendalam. Ada banyak sumber daya di internet untuk menguasai lebih banyak tag HTML seperti W3Schools atau Codecademy. Ada juga banyak buku HTML yang tersedia, tetapi pastikan Anda menggunakan edisi terbaru karena standar HTML berubah dari waktu ke waktu. Setelah Anda menguasai HTML ke tingkat yang baik, Anda dapat beralih ke CSS untuk lebih mengontrol desain dan gaya halaman web Anda. Setelah itu, langkah selanjutnya biasanya javascript.

Tips

• Ini dapat berguna untuk menemukan halaman web sederhana di Internet dan kemudian mulai mengotak-atik kode. Cobalah untuk memindahkan beberapa teks, ubah font, ubah gambar, apa pun yang Anda inginkan!
• Anda dapat menggunakan buku catatan untuk menuliskan kodenya, sehingga Anda memiliki sesuatu untuk digunakan kembali jika Anda tidak mengingatnya sejenak. Anda juga dapat mencetak halaman ini dan menyimpannya sebagai referensi.
• XML dan RSS semakin banyak digunakan di situs web saat ini. Kode tersebut mungkin terlihat tidak dapat diakses oleh mata manusia, terutama jika dilihat dalam kode sumber, tetapi fungsinya dapat berguna.
• Tag yang digunakan dalam HTML tidak peka huruf besar / kecil, tetapi defaultnya adalah menggunakan huruf kecil (seperti yang kita lakukan di artikel ini). Huruf kecil untuk tag sangat dianjurkan, juga untuk kompatibilitas dengan XHTML.

Peringatan

• Beberapa tag tidak lagi digunakan dan telah diganti dengan tag lain yang melakukan hal yang sama, tetapi sering kali menawarkan lebih banyak opsi.
• Jika Anda ingin memastikan bahwa halaman Anda sesuai dengan standar HTML, kunjungi situs web W3 untuk menguji kode Anda terhadap standar saat ini. Banyak tag menjadi usang dan telah digantikan oleh tag yang berfungsi lebih baik di browser modern.

Kebutuhan

• Program pengolah kata, seperti Notepad (Windows) atau Text Editor (Mac).
• selembar kertas atau buku catatan (pilihan)
• Program yang dirancang khusus untuk menulis HTML, seperti Notepad ++ untuk Windows atau TextWrangler untuk Mac (pilihan)