Belajar HTML Kode Dasar Untuk Pemula Tahap 2

  • 4 min read
  • Jun 10, 2020
Koding Tahap 2
Hosting Unlimited Indonesia

Tahap kedua dari pelajaran HTML (Hypertext Markup Language) ini akan mempelajari bagian dari head element. Sebelumnya, kita sudah sama-sama mengetahui bagaimana cara menuliskan HTML. Ada tag single dan tag couple. Pengertian kedua jenis tag itu memberikan gambaran bahwa head element adalah tag couple.

Untuk memahami tahap kedua ini, kamu perlu flashback artikel sebelumnya. Klik sini.

Ya, meskipun tidak susah susah amat, namun kita perlu tau bahwa head element atau tag <head> harus diletakan tepat sesuai urutan DOM (Document Object Model)Tag <head> berada setelah keberadaaan tag <html>.  Dan di dalam tag tersebut, bisa berisi tag lainnya. Seperti tag meta, title, script, link, style.

Isi dari tag <head> bisa panjang dan pendek. Coba kamu gunakan Ctrl + U, saat membuka artikel ini, tekan Ctrl + F, cari tag penutup head,  yakni </head>. Contoh;

Tahap 2
Hasil view source artikel lautanit

Apapun kode sebelum tag </head>, itu adalah bagian dari tag head. Kita akan membahas satu persatu, dimulai dari tag meta.

Tag Meta

Tag ini tidak memberikan informasi kepada pengunjung, melainkan kepada web browser. Informasi yang diberikan kepada web browser akan memperjelas tujuan dari web yang kamu bangun. Meta termasuk ke dalam jenis tag single. Bagian paling penting sebagai pelengkap dari tag ini adalah atribut. Contoh atribut yang digunakan adalah charset, http-equiv, content, name, property, dan lain-lain.

Berikut adalah penjelasan masing masing atribut tersebut, beserta dengan nilainya. Tetap fokus pada tahap ini

Charset

Charsert adalah sebutan untuk kumpulan kode kode bit komputer. Jika kita mempelajari bagaimana sebuah huruf A dapat tampil di layar komputer hanya dari angka 0 dan 1, maka kita akan mendapatkan ASCII (American Standard Code Information Interchange) sebagai jawabannya. Dari sini kita dapat menyimpulkan bahwa salah satu nilai dari atribut charset pada tag meta adalah ASCII.

Sayangnya, ASCII tidak menampung karakter lain seperti non-latin. Oleh sebab itulah diperkenalkan nilai atribut ini dengan nama UTF-8 (Unicode Transformation Format-8). UTF-8 menampung lebih dari 10.000 karakter dari berbagai macam bahasa di dunia.

Jika ditulis menjadi skrip maka akan seperti ini;

<meta charset=”UTF-8″>

Http-equiv

Agak susah menjelaskan fungsi atribut ini. Atribut bertugas menyediakan informasi kepada header HTTP (Hypertext Transfer Protocol). Dapat juga digunakan untuk simulasi respon header HTTP. Nilai dari atribut ini adalah refresh, X-UA-Compatible, dan lainnya.

Setelah memberikan nilai pada atribut http-equiv maka diperlukan atribut tambahan. Atribut tambahan digunakan untuk memperjelas informasi yang diberikan dari nilai pengisi atribut http-equiv. Atribut tersebut adalah content.

Contoh ;

<meta http-equiv=”refresh” content=”60″>

Tag di atas bermakna lakukan refresh halaman setiap satu menit. Contoh lainnya;

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

Makna skrip diatas, adalah menjadikan internet explorer Edge tidak bisa menampilkan web, alias browser IE dijadikan tidak kompatibel dengan skrip kode website.

Name

Name digunakan untuk memperjelas nama dari jenis informasi. Teman dari atribut adalah content. Fungsi atribut content di sini sama seperti fungsi di atribut sebelumnya. Yakni sebagai penjelas. Nilai dari atribut name, adalah author, keywords, description, viewports, robots.

<meta name=”author” content=”lautanit”>.

Memberikan penjelasan kepada web browser, bahwa penulis dari situs atau kode website adalah lautanit.

<meta name=”keywords” content=”tech news, unik-unik, event, kuliah IT, TKJ, Sejarah IT, Ngoding”>

Ya, kamu bisa tebak maknanya. Memberitahukan pada web browser tentang kata-kata kunci website.

<meta name=”description” content=”seputar teknologi terkini”>.

Penjelas kepada web browser tentang deskripsi dari website.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Digunakan agar desain web responsive meski di layar kecil sekalipun.

<meta name=”robots” content=”index, follow”> (memasukkan halaman ke dalam mesin pencarian, Google)

Atau <meta name=”robots” content=”noindex, follow”> (tidak memasukkan halaman ke dalam mesin pencarian, Google).

Atribut dan nilai nilai yang admin sudah uraikan hanyalah beberapa saja. Namun, pengetahuan yang sedikit tadi, jadi bagian yang paling sering digunakan atau dipelajari. Tidak lain tujuanlah adalah optimasisasi SEO (Search Engine Optimatization). Terutama untuk nilai author, keywords, dan description.

Digunakan untuk membuat halaman HTML yang ada terhubung dengan file yang lain. Termasuk pula skrip CSS (Cascading Style Sheets). Tag ini punya beberapa atribut, dan yang paling sering digunakan href dan rel. Apa makna kedua atribut itu?

href merupakan singkatan dari hypertext references, digunakan untuk menulis alamat dari file yang ingin digabungkan dalam halaman HTML. Rel adalah relationship menyatakan hubungan dengan file yang dikaitkan.

Contoh;

<link href=”kodecss.css” rel=”stylesheet”>.

Cara membuat favicon.

Di tahap ini, admin akan berikan satu trik. Salah satu manfaat dari tag ini adalah dapat digunakan untuk membuat favicon. Favicon, adalah favorit icon digunakan untuk memberikan logo web pada tab di atas address bar. 

Tahap koding
Contoh favicon

Berikut adalah langkah-langkah membuatnya…Simpan sebuah gambar berukuran pas untuk favicon. Lalu buatlah kode halaman HTML baru, letakkan file favicon dan skrip HTML tersebut dalam satu folder yang sama.

Contoh skripnya;

Skrip diatas juga memberikan contoh kepada kamu bagaimana penulisan tag meta. Jangan salah menuliskan tipe file gambar favicon.

Tahap Favicon
Hasil percobaan favicon

Tag Script dan Style

Kedua tag ini sudah dibahas oleh admin, di kategori Ngoding > CSS dan JavaScript.

Tag Title

Tag ini digunakan untuk menampilkan judul halaman di bagian atas address bar web browser. Gunakan judul yang tidak terlalu panjang, contohlah skrip sebelumnya.

Kesimpulan

Tag head adalah jenis tag couple. Didalamnya bisa termuat berbagai macam tag seperi meta, link, title, script, style. Khusus untuk tag meta. Meta punya pengaruh terhadap SEO (Search Engine Optimatization) dari sebuah website. Atribut dan nilai untuk itu adalah name, author, keywords, description.

Namun, informasi terbaru yang admin dapatkan, menambahkan banyak keywords di website terutama untuk perkembangan SEO sekarang tidak terlalu banyak berpengaruh. Inilah pembejalaran kode dasar HTML tahap 2

sumber : di bawah

Pratama, Andre. 2015. HTML Uncover Panduan Belajar HTML untuk Pemula.Padang Panjang :www.duniailkom.com.

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

One thought on “Belajar HTML Kode Dasar Untuk Pemula Tahap 2

Leave a Reply

Your email address will not be published. Required fields are marked *