Mengenal HTML Di Blogger Yuk!!!

Sebelum mengenal yang namanya CSS dan Javascript lebih baik mengenal HTML saja terlebih dahulu. Karena mengenal HTML itu sangat dianjurkan bagi sodara yang ingin memperindah tampilan blognya. Kenapa bisa begitu? Karena dihalaman web, HTML itu berfungsi untuk menyusun kerangka halaman yang akan sobat buat. Jadi bisa dikatakan HTML itu memiliki peran yang sangat penting karena dibutuhkan untuk menyusun elemen yang ada di halaman web oleh karena itu disini CSS dan Javascript tidak akan berfungsi jika tidak adanya HTML. Tetapi agar tampilan kerangka yang diisi oleh HTML itu teratur dan terlihat menarik, maka CSS itu sangat diperlukan untuk membantu tampilan HTML di halaman browser.

Sodara harus tahu juga bahwa HTML bukan sebuah bahasa pemrograman melainkan bahasa markup atau bahasa penanda yang mengartikan struktur konten sodara pada halaman tertentu, karena seperti yang sudah dijelaskan bahwa HTML terdiri atas serangkaian elements, yang dapat sodara gunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya. Seperti memiringkan atau menebalkan tulisan contohnya seperti dibawah ini.

Catatan Ican Al Ihsan

Jika sodara ingin membuat tulisan tersebut seperti paragraph yang barisnya berdiri sendiri maka sodara perlu tambahkan tag seperti dibawah ini

<p>Catatan Ican Al Ihsan</p>

Mari kita coba dalami elemen diatas bersama-sama

Tag Pembuka
Terdiri dari nama elemen, disini saya menggunakan elemen p yang diawali tanda < dan ditutup dengan tanda >yang artinya bahwa elemen tersebut mulai bekerja.

Tag Penutup
Mirip dengan tag pembuka, bedanya di tag penutup ada garis miring "slash" di depan nama elemen. Ini menandakan bahwa itu adalah akhir dari elemen

Konten Elemen
Konten elemen yang ada disini adalah teks.

Elemen
Elemen disini adalah dari tag pembuka hingga tag penutup yang didalamnya terdapat konten.

Apakah Bisa Kita memasukan Elemen ke dalam Elemen?

Jawabannya tentu bisa, biasanya ini dilakukan jika kita ingin membuat huruf tebal dalam suatu kalimat yang sebelumnya sudah dibungkus oleh elemen lain. contohnya disini saya ingin menebalkan kata

Ican Al Ihsan

Maka saya harus membungkung kata "Ican Al Ihsan" ke dalam elemen <strong>. lebih jelasnya bisa dilihat dibawah ini

<p>Catatan <strong>Ican Al Ihsan</strong></p>

Disini sodara harus teliti dengan tag pembuka dan tag penutup. Contoh di atas saya membukanya dengan elemen <p> dulu, lalu disisipi dengan elemen <strong>, lalu kita tutup terlebih dahulu dengan elemen yang disisipi </strong>, kemudian baru saya tutup dengan elemen </p>. Bukan seperti contoh dibawah ini

<p>Catatan <strong>Ican Al Ihsan</p></strong>

Biasanya kesalahan tersebut dilakukan oleh orang yang baru belajar ngotak-ngatik kode di template blognya sendiri. Seperti yang sudah saya jelaskan, disini sodara harus perhatikan tag pembuka dan tag penutup dimana elemen harus terbuka dan tertutup dengan benar sehingga posisinya jelas berada di mana dari elemen lain. Kalau posisinya tumpang-tindih seperti contoh diatas, maka web browser kita akan bingung dan mengakibatkan hasilnya berantakan.

Setelah sodara sudah memahami tentang sebagian elemen HTML yang sudah dijelaskan, selanjutnya sodara harus tahu dengan struktur HTML agar membentuk satu halaman web di browser. Secara umum, struktur dasar HTML berbentuk seperti dibawah ini :


<!DOCTYPE html>
<lt;html>
  <head>
    <meta charset="utf-8">
    <title>Judul Blog</title>
  </head>
  <body>
    <p>Catatan Ican Al Ihsan</p>
  </body>

Dari struktur yang ada diatas, sodara bisa mengenal Tag dan Elemen HTML. Konten dari HTML tersebut mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Agar lebih mudah memahami, penjabarannya akan saya jelaskan dibawah ini.

<!DOCTYPE html>
Katanya doctypes berfungsi sebagai penghubung ke satu set aturan yang wajib diikuti halaman HTML supaya disebut halaman HTML yang baik, yang berarti error checking otomatis dan hal berfaedah lainnya. Tapi sekarang ini mereka sudah tidak terlau berguna dan hanya berfungsi sebagai penanda bahwa dokumen sobat bekerja dengan baik.

<html></html>
Elemen ini fungsinya membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.

<head></head>
Elemen ini berguna sebagai wadah bagi semua hal yang sobat inginkan ke dalam halaman HTML yang bukan konten yang ditampilkan ke pengguna. Ini termasuk hal-hal semacam keywords dan deskripsi halaman yang akan sobat tampilkan dalam hasil pencarian, CSS untuk menggayakan konten sobat, deklarasi karakter set, dan lain sebagainya.

<meta charset="utf-8">
Elemen ini mengeset karakter set. Dokumen sobat sebaiknya menggunakan UTF-8 karena berisi karakter paling banyak dari seluruh bahasa di dunia sehingga bisa mengatasi konten tekstual apa saja di dalamnya. Tidak ada alasan untuk tidak menggunakan ini, dan dia bisa mencegah masalah lain yang timbul kemudian.

<title></title>
Elemen ini mengeset judul halaman sobat, yang tampil di browser tab di mana halaman ini diload. Juga digunakan untuk mendeskripsikan halaman ketika sobat membookmark/memfavoritkan halaman.

<body></body>
Elemen ini mengandung semua konten yang ingin sobat tunjukkan ke user, berupa teks, image, video, games, audio track dll.

Selain tag-tag yang diatas, masih ada tag-tag lain yang memiliki fungsi masing-masing. Dibawah ini ada beberapa jenis tag yang sering dijumpai ketika mengedit template di blogger untuk sodara agar mengetahui tag-tag HTML yang lain.

TagFungsi
<!– ….–>Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html>digunakan untuk Mendefinisikan tipe document
<a>Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain
<b>membuat teks menjadi tebal
<p>membuat pargraf
<h1>membuat heading satu
<h2>membuat heading dua
<body>mendefinisikan body/isi dokument html
<head>mendefinisikan bagian kepala dokumen html
<title>memdefiniskan judul halaman
<div>mendefinisikan halaman
<link>mendefinisikan hubungan antar dokumen
<script>Mendefinisikan client-side script
<table>mendefinisikan tabel
<th>Mendefinisikan sel header di dalam sebuah tabel
<td>Mendefinisikan sel di dalam sebuah tabel
<tr>Membuat baris di dalam sebuah tabel
<ul>Mendefinisikan daftar dalam format bullet
<li>mendefinisikan list

Sampai disini, saya yakin bahwa sodara sudah sedikit mengenal dengan yang namanya HTMLnya baik itu tag maupun elemennya. Sebenarnya saya ingin memaparkan lebih jauh dari ini tetapi saya bingung dalam cara penyampaiannya. Mungkin hanya sampai disini saja. Semoga postingan ini bisa membantu sodara yang sedang mengenal HTML dasar, dan pastikan sering praktek mengenai tag-tag html agar sodara benar-benar hafal mengenai tag-tag yang ada di HTML.

Comments