Isi

• Langkah
• Bagian 1 dari 2: Mempelajari Dasar-dasar HTML
• Bagian 2 dari 2: HTML Lanjutan
• Tips
• Peringatan
• Apa yang kamu butuhkan

HTML adalah kependekan dari bahasa Inggris Hyper Text Markup Language (Hyper Text Markup Language). Ini adalah kode, atau bahasa, di mana markup dasar situs dibuat. Belajar mungkin tampak menakutkan jika Anda belum pernah memprogram, tetapi pada kenyataannya yang Anda butuhkan untuk memulai adalah editor teks dasar dan browser internet. Anda bahkan mungkin mengenali beberapa contoh markup HTML yang pernah Anda temui di forum internet, halaman khusus yang disesuaikan, atau artikel wikiHow. HTML adalah alat yang berguna untuk setiap pengguna internet, dan mempelajari dasar-dasarnya akan memakan waktu lebih sedikit dari yang Anda kira.

Langkah

Bagian 1 dari 2: Mempelajari Dasar-dasar HTML

1. 1 Buka dokumen HTML. Kebanyakan editor teks (Notepad atau Notepad++ untuk Windows, TextEdit untuk Mac, gedit untuk GNU/Linux) dapat digunakan untuk menghasilkan file HTML. Buat dokumen baru dan simpan menggunakan File → Save As in Web Page Format, atau ubah ekstensi file menjadi .html atau .htm alih-alih .doc, .rtf atau ekstensi lainnya.
   • Anda mungkin menerima peringatan bahwa file akan disimpan sebagai "teks biasa" alih-alih format RTF, atau bahwa pemformatan dan gambar tidak akan disimpan. Ini baik-baik saja; untuk HTML opsi ini tidak diperlukan.
2. 2 Buka file yang dihasilkan di browser. Simpan file kosong, temukan di komputer Anda dan klik dua kali untuk membukanya. Halaman kosong akan terbuka di browser. Jika tidak, seret file ke bilah alamat browser Anda. Saat Anda mengedit file HTML, Anda dapat menyegarkan halaman ini untuk melihat perubahannya.
   • Harap dicatat bahwa dengan cara ini Anda tidak membuat situs web di Internet. Orang lain tidak akan memiliki akses ke halaman ini, dan Anda tidak memerlukan koneksi internet untuk menguji halaman lokal Anda. Peramban hanya menafsirkan kode HTML, "membacanya" seolah-olah itu adalah situs web.
3. 3 Pahami apa itu tag markup. Tidak seperti teks biasa, tag tidak muncul di halaman. Sebagai gantinya, mereka memberi tahu browser cara menampilkan halaman dan kontennya. Tag "pembukaan" berisi instruksi. Misalnya, ia dapat memberi tahu browser bahwa teks harus ditampilkan sebagai mencolok... Itu juga membutuhkan tag "akhir" untuk menunjukkan browser di mana instruksi berakhir. Dalam contoh ini, teks antara tag awal dan akhir akan ditampilkan dalam huruf tebal. Tag ditulis di dalam tanda yang tidak sama, tetapi tag akhir dimulai dengan garis miring.
   • Tag pembuka ditulis di antara tanda pertidaksamaan: tag pembuka>
   • Pada tag penutup, garis miring ditempatkan sebelum deskriptor tag (nama): /tag akhir>
   • Baca terus untuk mengetahui bagaimana tag yang berbeda digunakan. Untuk langkah ini, Anda hanya perlu mengingat format rekaman. Tag ditulis di antara tanda pertidaksamaan:> dan />
   • Dalam beberapa tutorial, tag HTML disebut elemen, dan teks di antara tag pembuka dan penutup disebut konten elemen.
4. 4 Ketik html> tag di editor. Setiap file HTML harus dimulai dengan tag html> dan diakhiri dengan tag /html>... Tag ini memberi tahu browser bahwa semua konten di antara tag ada dalam HTML. Tambahkan tag ini ke dokumen Anda:
   • Seringkali file HTML dimulai dengan baris ! DOCTYPE html>yang berarti bahwa browser harus mengenali seluruh file sebagai HTML. Baris ini tidak diperlukan, tetapi dapat membantu Anda memecahkan masalah kompatibilitas.
   • panggil html> di bagian atas dokumen.
   • Tekan Enter atau Return beberapa kali untuk membuat beberapa baris kosong, lalu ketik / html>
   • ingat itu keseluruhan kode yang akan Anda buat dalam artikel ini harus ditulis di antara dua tag ini.
5. 5 Buat bagian kepala> dalam file. Di antara tag html> dan / html>, buat tag pembuka kepala> dan tag penutup / kepala>... Tambahkan beberapa baris kosong di antara mereka. Konten yang ditulis di antara tag head> dan / head> tidak ditampilkan di halaman itu sendiri. Ikuti langkah-langkah ini dan Anda akan melihat untuk apa tag ini:
   • Di antara tag head> dan / head>, tulis judul> dan / judul>
   • Di antara tag judul> dan / judul>, tulis Cara belajar HTML - wikiHow.
   • Simpan perubahan Anda dan buka file di browser (atau segarkan halaman jika file sudah terbuka). Lihat teks yang muncul di judul halaman di atas bilah alamat?
6. 6 Buat bagian tubuh>. Semua tag dan teks lain dalam contoh ini ditulis di bagian isi, yang isinya ditampilkan di halaman. Setelah tag penutup / kepala>, tapi sebelum tag / html> tambahkan tag tubuh> dan / tubuh>... Untuk sisa artikel ini, kerjakan bagian tubuh. File Anda akan terlihat seperti ini:
   html>
   kepala>
   title> Cara Belajar HTML - wikiHow / title>
   / kepala>
   tubuh>
   / tubuh>
   /html>
7. 7 Tambahkan teks menggunakan gaya yang berbeda. Saatnya menambahkan konten nyata ke halaman! Apa pun yang Anda tulis di antara tag tubuh akan ditampilkan di halaman setelah disegarkan di browser. Jangan gunakan simbol atau >karena browser akan mencoba menafsirkan konten sebagai tag, bukan teks. Menulis Halo! (atau apa pun yang Anda suka), lalu coba tambahkan tag ini ke teks dan lihat apa yang terjadi:
   • em> Halo semuanya! / em> membuat teks "miring": Halo!
   • kuat> Halo semuanya! / kuat> membuat teks "tebal": Halo!
   • s> Halo semuanya! / s> teks yang dicoret: Halo!
   • sup> Halo semuanya! / sup> menampilkan font sebagai superscript:
   • sub> Halo semuanya! / sub> menampilkan font sebagai subskrip: _Halo!
   • Coba tag yang berbeda bersama-sama. Bagaimana tampilannya? em> kuat> Halo semuanya! / kuat> / em>?
8. 8 Bagilah teks menjadi paragraf. Jika Anda mencoba menulis beberapa baris teks dalam file HTML, Anda akan melihat bahwa jeda baris tidak ditampilkan di browser. Untuk membagi teks menjadi paragraf, Anda perlu menambahkan tag:
   • p> Ini adalah paragraf terpisah. / p>
   • Kalimat ini diikuti dengan jeda baris br> sebelum awal baris ini.
     Ini adalah tag pertama yang tidak memerlukan tag akhir. Tag ini disebut tag "kosong".
   • Buat judul untuk menampilkan judul bagian:
     h1> teks judul / h1>: gelar terbesar
     h2> teks judul / h2> (judul tingkat kedua)
     h3> teks judul / h3> (judul tingkat ketiga)
     h4> teks judul / h4> (judul tingkat keempat)
     h5> teks judul / h5> (judul terkecil)
9. 9 Belajar membuat daftar. Ada beberapa cara untuk membuat daftar di halaman web. Coba opsi di bawah ini dan putuskan mana yang paling Anda sukai. Perhatikan bahwa satu pasang tag diperlukan untuk daftar secara keseluruhan (misalnya, ul> dan / ul> untuk daftar berpoin), dan setiap item daftar disorot dengan sepasang tag yang berbeda, misalnya, li> dan / li>.
   • Daftar Berpoin:
     ul> li> Baris pertama / li> li> Baris kedua / li> li> Dan seterusnya / li> / ul>
   • Daftar bernomor:
     ol> li> Satu / li> li> Dua / li> li> Tiga / li> / ol>
   • Daftar definisi:
     dl> dt> Kopi / dt> dd> - minuman panas / dd> dt> Limun / dt> dd> - minuman dingin / dd> / dl>
10. 10 Tata letak halaman menggunakan jeda baris, garis horizontal, dan Foto-foto. Saatnya menambahkan sesuatu selain teks ke halaman. Coba tag berikut atau ikuti tautan untuk informasi lebih lanjut. Gunakan layanan hosting online untuk membuat tautan ke gambar yang ingin Anda posting:
    • Garis horisontal: jam>
    • Sisipkan gambar: img src = "tautan gambar">
11. 11 Tambahkan tautan. Anda dapat menggunakan tag ini untuk membuat hyperlink ke halaman dan situs lain, tetapi karena Anda belum memiliki situs web, sekarang Anda akan mempelajari cara membuat tautan jangkar, yaitu tautan ke tempat tertentu di halaman:
    • Buat jangkar dengan tag a> di mana Anda ingin menautkan pada halaman. Buatlah nama yang jelas dan mudah diingat:
      
      a name = "Tips"> Teks yang Anda tautkan. / a>
    • Gunakan tag href> untuk membuat tautan relatif atau tautan ke sumber daya eksternal:
      
      a href = "tautan ke halaman atau nama jangkar di dalam halaman"> Teks atau gambar yang akan berfungsi sebagai tautan. / a>
    • Untuk menautkan ke tautan relatif di halaman lain, tambahkan tanda # setelah tautan utama dan nama jangkar. Misalnya, https://en.wikihow.com/learn-HTML#Tips menautkan ke bagian kiat laman ini.

Bagian 2 dari 2: HTML Lanjutan

1. 1 Kenali atributnya. Atribut ditulis di dalam tag, yang menunjukkan informasi tambahan. Format atributnya adalah sebagai berikut: nama = "nilai", di mana judul mendefinisikan atribut (misalnya, warna untuk atribut warna), dan nilainya menunjukkan nilainya (misalnya, merah untuk merah).
   • Atribut sebenarnya telah digunakan di bagian sebelumnya tentang dasar-dasar HTML. Tag img> menggunakan atribut src, jangkar tautan relatif menggunakan atribut namadan tautan menggunakan atribut href... Seperti yang telah Anda perhatikan, semua atribut ditulis dalam format ___='___’.
2. 2 Bereksperimenlah dengan tabel HTML. Pembuatan tabel melibatkan penggunaan berbagai tag. Anda dapat bereksperimen, atau membaca petunjuk yang lebih detail.
   • Buat tag tabel:meja> / meja>
   • Lampirkan konten setiap baris dalam tabel dalam tag: tr>
   • Judul kolom ditentukan oleh tag: t>
   • Sel di baris berikutnya: td>
   • Contoh penggunaan tag ini:
     
     tabel> tr> th> Kolom 1: bulan / th> th> Kolom 2: tabungan / th> / tr> tr> td> Januari / td> td> 5000 rubel / td> / tr> / tabel>
3. 3 Pelajari tag bagian kepala tambahan. Anda telah mempelajari tag head> yang ada di awal setiap file html. Selain tag title>, ada tag lain untuk bagian ini:
   • Meta tag yang mengandung metadatadigunakan oleh mesin pencari untuk mengindeks situs. Untuk membuat situs Anda lebih mudah ditemukan di mesin pencari, gunakan satu atau lebih tag meta> pembuka (tag penutup tidak diperlukan).Gunakan satu atribut dan satu nilai per tag: meta name = "description" content = "page description">; or meta name = "keywords" content = "kata kunci yang dipisahkan koma">
   • Tautan> tag yang mengarah ke file pihak ketiga, seperti lembar gaya (CSS), yang dibuat menggunakan jenis penyandian berbeda dan memungkinkan Anda mengubah halaman HTML menggunakan warna, perataan teks, dan banyak fitur lainnya.
   • Tag script> yang digunakan untuk melampirkan file JavaScript ke halaman. File-file ini diperlukan untuk memodifikasi halaman secara interaktif (sebagai tanggapan atas tindakan pengguna).
4. 4 Bereksperimenlah dengan kode HTML situs lain. Melihat kode sumber halaman web lain adalah cara yang bagus untuk mempelajari HTML. Anda dapat mengklik kanan pada halaman dan memilih Lihat Sumber atau yang serupa dari menu atas browser Anda. Cobalah untuk mencari tahu apa yang dilakukan oleh tag yang tidak dikenal, atau cari di Internet untuk informasi tentangnya.
   • Meskipun Anda tidak dapat mengedit situs orang lain, Anda dapat menyalin kode sumber ke dalam file Anda untuk bereksperimen dengan tag nanti. Harap dicatat bahwa markup CSS mungkin tidak tersedia dan warna serta format mungkin terlihat berbeda.
5. 5 Mulai jelajahi panduan yang lebih detail. Ada banyak situs di Internet yang didedikasikan untuk tag HTML, seperti W3Schools atau HTMLbook. Ada juga buku kertas yang dijual, tetapi cobalah untuk menemukan edisi terbaru karena standar berubah dan berkembang. Lebih baik lagi, kuasai CSS untuk memiliki kontrol lebih besar atas tata letak dan tampilan situs Anda. Setelah mempelajari CSS, desainer web biasanya mempelajari JavaScript.

Tips

• Notepad ++ adalah program gratis yang bagus, mirip dengan Notepad biasa, tetapi Anda dapat menyimpan dan menguji kode Anda di browser Anda secara online. (Ini juga mendukung hampir semua bahasa - HTML, CSS, Python, JavaScript, dan sebagainya.)
• Temukan beberapa halaman sederhana di internet, simpan kodenya ke komputer Anda dan bereksperimenlah dengannya. Coba pindahkan teks, ubah font, ganti gambar - apa pun!
• Anda dapat menyimpan buku catatan tempat Anda menulis tag sehingga Anda selalu memilikinya. Anda juga dapat mencetak halaman ini dan merujuknya.
• Saat Anda menulis kode, lakukan dengan hati-hati agar Anda dan orang lain dapat memahaminya. Gunakan! - Sisipkan komentar di sini -> untuk komentar HTML: komentar tidak akan ditampilkan di halaman, tetapi akan terlihat di dokumen kode.
• XML dan RSS semakin populer. Kode untuk halaman yang berisi teknologi XML dan RSS lebih sulit untuk dibaca dan dipahami oleh pengguna yang tidak berpengalaman, tetapi alat ini cukup berguna.
• Tag markup dalam HTML tidak peka huruf besar/kecil, tetapi kami menyarankan hanya menggunakan huruf kecil (seperti dalam contoh dalam artikel ini) untuk standarisasi dan kompatibilitas XHTML.

Peringatan

• Beberapa tag telah tidak digunakan selama beberapa tahun terakhir dan telah diganti dengan yang baru yang memberikan efek yang sama atau beberapa tambahan.
• Jika Anda ingin menguji halaman Anda, kunjungi situs W3 dan lihat persyaratan HTML modern. Standar HTML berubah seiring waktu, dan beberapa tag diganti dengan tag baru yang berfungsi lebih baik di peramban modern.

Apa yang kamu butuhkan

• Editor teks seperti Notepad (Windows) atau TextEdit (Mac)
• Kertas / notepad (tidak perlu)
• Editor HTML seperti Notepad ++ (Windows) atau TextWrangler (Mac) (tidak perlu)