Bingung tentang Kode HTML? Kamu bukanlah satu – satunya.
Saya akan mengakuinya. Ketika saya mulai menulis untuk web, saya tahu nihil tentang Kode HTML. Dan saya akan mengakuinya lagi. Saya masih belum tahu banyak.
Namun, saya telah menemukan bahwa sedikit pengetahuan HTML dapat membuat segalanya menjadi jauh lebih mudah saat menulis untuk web.
Tentu, saya tidak tahu cara membuat situs web, tapi saya tahu cara mengubah komponen kecil, dan ketika saya dihadapkan dengan sistem pengeditan yang membutuhkan kode HTML – yang kemungkinan besar akan Anda temui juga – Saya tahu cukup untuk memformat teks saya dengan benar.
Ingin menghilangkan kebingungan itu dan belajar sedikit tentang pengkodean HTML? Mari kita mulai.
Contents
Apa itu Kode HTML?
Anda sudah melihatnya, tetapi Anda mungkin tidak tahu apa arti semua omong kosong HTML itu.
Itu singkatan Hyper Text Markup Language. HTML adalah sistem standar yang digunakan untuk memformat dokumen. Kode yang digunakan — disebut tag markup — dapat memformat font, ukuran teks, warna, hyperlink, paragraf, dan lainnya.
Browser web membaca HTML dan menggunakan tag untuk menentukan cara menampilkan konten. Contoh tag adalah tag yang membuat teks tebal, yang terlihat seperti ini:
Ini adalah teks tebal.
Di halaman, terlihat seperti ini:
Ini adalah teks tebal.
Ada banyak versi HTML selama bertahun-tahun, tetapi pada Oktober 2014, HTML5 adalah bahasa markup standar dari web.
Mengapa Bagus untuk Diketahui Blogger
Meskipun Anda mungkin dapat bertahan tanpa mengetahui HTML sebagai blogger dan melakukan sedikit kecurangan sebagai gantinya – seperti menggunakan program yang mengubah pemformatan Anda menjadi bahasa HTML – mengetahui beberapa tag dasar dapat sangat membantu saat Anda membuat blog.
Berikut adalah beberapa situasi yang menurut saya bermanfaat secara pribadi:
- Ketika blogging tamu, beberapa situs ingin bio penulis Anda ditulis dalam format HTML. Dengan sedikit pengetahuan, Anda akan dapat menambahkan tautan dan huruf miring jika diperlukan.
- Saat sesuatu terlihat tidak jelas, Anda dapat melihat HTML pada halaman dan melihat apa yang menyebabkan masalah.
- Dalam jaringan online, Anda dapat menggunakan tag HTML untuk memformat komentar posting blog dan komentar forum.
- Jika Anda cukup belajar tentang HTML, Anda bisa mulai belajar sedikit tentang CSS dan membuat perubahan kecil ke situs web Anda tanpa menyewa seorang desainer.
Kode Umum yang Digunakan Blogger
Sebelum kita masuk terlalu dalam, ketahuilah bahwa tag HTML adalah kata kunci yang terbungkus dalam kurung sudut. Tag-tag ini berpasangan, dan teks antara tag awal dan tag akhir adalah apa yang akan terpengaruh. Tag akhir ditulis sama dengan tag awal, tetapi menggunakan garis miring sebelum nama tag.
Kedengarannya membingungkan? Lebih mudah jika saya memberikan beberapa contoh. Mari kita lihat beberapa tag HTML umum yang harus Anda ketahui sebagai blogger.
Tag Kerangka
Pertama adalah tag kerangka. Ini adalah yang tidak perlu Anda gunakan, tetapi membantu untuk mengetahuinya. Tag-tag ini meletakkan fondasi untuk dokumen, oleh karena itu istilah “tag kerangka”. Mereka akan dibaca oleh halaman web tetapi tidak akan diterjemahkan ke dalam elemen visual.
Meski begitu, itu baik untuk diketahui. Misalnya, apakah Anda pernah bekerja dengan program yang meminta Anda untuk menempelkan kode ke bagian “kepala” situs web Anda? Anda akan dapat menemukannya dengan sedikit pengetahuan HTML. Jadi, inilah beberapa tag kerangka yang harus Anda ketahui:
- : Bagian ini menjelaskan dokumen HTML.
- : Bagian ini memberikan informasi tentang dokumen.
- : Ini memberikan judul dokumen.
- : Ini menjelaskan elemen halaman visual. Ada di bagian tubuh halaman yang blogger akan sering membuat HTML tweak ketika diperlukan. Tag lain yang disebutkan ditemukan di dalam tubuh dokumen.
-
:
Tag ini menjelaskan satu paragraf.
Ingat bahwa teks halaman Anda terbungkus dalam tag awal dan akhir. Ini sebuah contoh:
Ini adalah teks paragraf.
Tag Judul
Tag heading digunakan untuk menampilkan hierarki dokumen. Anda kemungkinan sudah menggunakan heading dalam format blog Anda, tetapi perbedaan antara heading 1-6 berarti lebih dari sekadar ukuran teks dan berat font. Mereka juga menyampaikan rasa hierarki ke browser web dan bot mesin pencari.
Tajuk 1 harus digunakan untuk tajuk utama dokumen, seperti judul posting blog Anda. Heading 2 harus berupa informasi sekunder, seperti subtitle utama Anda. Gunakan Heading 3 untuk sub-subtitle, dan seterusnya melalui Heading 6. Tag ini terlihat seperti ini:
Berikut ini contoh terjemahannya:
Ini Pos 5
Ini Pos 5
Tag Teks sebaris
Tag teks sebaris adalah yang akan Anda gunakan untuk memformat teks dalam tag tingkat blok seperti
dan
. Berikut adalah contoh yang biasa Anda gunakan.- : Ini mendefinisikan teks yang ditekankan, yang dicetak miring oleh sebagian besar browser.
- : Ini mendefinisikan teks yang sangat ditekankan, yang dicetak tebal oleh sebagian besar browser.
- : Ini memformat kutipan.
- : Ini menunjukkan teks yang dihapus, yang sering diterjemahkan sebagai strike-through, seperti ini.
Daftar Tag
Seperti yang Anda perhatikan, saya telah menggunakan beberapa daftar peluru di seluruh posting blog ini. Tetapi bagaimana saya melakukannya? Berikut adalah tag yang perlu Anda ketahui:
- :
Ini mendefinisikan elemen daftar.-
- :
-
- :
Berikut adalah contoh tampilan kode HTML untuk daftar berurutan:
- Daftar item 1
- Daftar item 2
- Daftar item 3
Beginilah tampilannya di laman:
- Daftar item 1
- Daftar item 2
- Daftar item 3
Gambar dan Tag Tautan
Sebelum kita berpisah, mari kita lihat bagaimana cara menyisipkan gambar dan tautan. Mungkin lebih mudah untuk hanya melihat kode dan kemudian mengisi informasi Anda ketika Anda menggunakan tag:
Tautan
Jangan hapus tanda kutip di sekitar URL Anda. Cukup masukkan URL Anda di antara tanda kutip. Teks jangkar Anda adalah teks yang muncul di halaman.
Mari kita lihat sebuah contoh. Jika saya ingin menautkan ke artikel Kerajaan Hosting sebelumnya, kode akan terlihat seperti ini:
Jika Anda Mendaftarkan Domain Melalui Host Web Anda?
Tautan akan muncul seperti ini di halaman:
Jika Anda Mendaftarkan Domain Melalui Host Web Anda?
Gambar
Kode untuk gambar terlihat seperti ini:
Perhatikan bahwa ini adalah tag non-kontainer, jadi ini tidak memiliki tag akhir, tetapi Anda memang membutuhkan atribut src. Anda dapat menambahkan ekstra ke tag ini, seperti teks alternatif atau definisi ukuran. Itu akan terlihat seperti ini:
Sekali lagi, pastikan Anda tidak menghapus tanda kutip.
catatan: Anda mungkin melihat kode berbeda yang dapat digunakan untuk hal yang sama. Misalnya, saya pernah melihat , , dan tag digunakan untuk huruf tebal, meskipun mereka dapat tampil berbeda di berbagai browser.
HTML tidak harus membingungkan seperti kelihatannya. Untuk berlatih HTML dan merasakan lebih baik untuk itu, gunakan situs-situs interaktif seperti Akademi Kode, dan beri tahu kami cara kerjanya di bagian komentar.
