Belajar HTML Part 3 – Dasar-Dasar HTML [Lengkap]

CoretanKode – Pada kesempatan kali ini kita masih akan belajar HTML dengan mudah dan simple, artikel ini akan berisikan tentang hal-hal penting yang menjadi dasar dari pembuatan halaman HTML nih.

Artikel Menarik Lainnya :

Hal dasar seperti TAG-TAG dasar, struktur, aturan penulisan kode, cara melihat source code web dan beberapa sedikit penjelasan tentang tag-tag yang ada pada Bahasa HTML ini.

Jadi semua hal yang mendasar akan dibahas pada artikel Part 3 ini. Jadi jangan di skip yah.

Isi tampilkan

Ciri-Ciri Dokumen HTML

Web Page yang dibuat menggunakan Bahasa HTML ini sebenarnya dapat sangat mudah dikenali karena semua halaman yang dibuat dengan Bahasa HTML biasanya mempunyai tag deklarasi seperti : <! DOCTYPE html>.

Bukan hanya memiliki tag deklarasi tipe dokumen saja, sebuah halaman HTML juga pasti diawali dengan tag <HTML> dan diakhir dengan tag penutupnya </HTML>. Dan semua konten yang ingin di tampilkan pada halaman web di letakkan di dalam tag <BODY> dan di tutup dengan </body>.

Contoh sederhana dari sebuah halaman HTML dapat dilihat dibawah ini :

<!DOCTYPE html>

<html>

<body>

<h1>CoretanKode – We Code We Good</h1>

<p>Paragraf Satu.</p>

</body>

</html>

Penjelasan Deklarasi <! DOCTYPE html>

Tag <! DOCTYPE html> adalah sebuah tag pengenal yang digunakan dalam Bahasa HTML agar web browser dapat mengenali tipe dokumen sehingga web browser dapat menampilkan halaman web dengan benar.

READ : 10 Aplikasi Jualan Pulsa Terbaik, Termurah dan Terpercaya

Tag DOCTYPE ini seharusnya dan diwajibkan hanya di deklarasikan sekali saja pada sebuah dokumen HTML tidak perlu menuliskan berulang-ulang di dalam baris kode halaman web anda.

Kalian harus tahu bahwa tag <! DOCTYPE html> ini tidak bersifat case sensitive.

Bila belum mengetahui case sensitive itu apa silahkan baca artikel ini : Pengertian Case Sensitive: Contoh dan Cara Kerjanya

Heading pada HTML

Bila kalian sudah terbiasa menulis pada aplikasi Microsoft Word maka kalian pasti sudah tahu atau mengenal dengan istilah heading ini.

Heading digunakan untuk membuat judul atau sub-judul pada konten tertulis seperti sebuah artikel dan berita, dalam Bahasa HTML fitur Heading juga telah tersedia dan kalian bisa menggunakannya dengan cara memakai tag <h1> hingga <h6>.

Dimana setiap nomo didalam tag mempunyai tingkat kepentingan dan ukuran font yang berbeda, dimana H1 disebut sebagai important heading dan H2 disebut dengan Sub-Heading lalu terakhir H6 dianggap Least Important Heading.

Contoh penulisan kode-nya seperti ini :

<h1>CoretanKode Head 1</h1>

<h2> CoretanKode Head 2</h2>

<h3> CoretanKode Head 3</h3>

Nah heading ini dapat kalian gunakan apabila ingin membuat TOC (Table of Content) pada halaman website yang kalian buat, untuk SEO sendiri heading sangatlah penting dimana Heading ini lah yang seharusnya berisikan keyword yang penting pada artikel kalian.

Belajar HTML pada part ini mudah bukan ?

Membuat Paragraf di HTML

Konten website sudah pasti dituliskan pada sebuah paragraf dong, setiap kali orang menulis baik secara digital ataupun manual pasti memulai tulisan di paragraf yang baru kan. Pada HTML juga tersedia tag <P> yang dapat digunakan untuk membuat paragraf baru di halaman web kalian.

READ : Belajar HTML Part 8 - Styling di Halaman HTML

Contoh Penulisan TAG paragraf di HTML adalah seperti ini :

<p>CoretanKode Paragraf 1.</p><p>Paragraf CoretanKode 2.</p>

Bila kalian menuliskan dua tag <p> pada satu baris kode maka secara otomatis mereka terpisah dan membuat paragraf-nya masing-masing loh jadi kalian dapat membuat isi body kalian lebih hemat baris kode-nya yah.

Membuat Link dengan HTML

Link pada HTML di definisikan menggunakan tag <a>, setelah itu terdapat atribut href yang bertujuan sebagai penjelas tujuan dari sebuah link yang dibuat alias url tujuan.

Contohnya seperti ini :

<a href=”https://coretankode.com”>CoretanKode.com</a>

Dimana url yang dijadikan tujuan harus di sertai dengan protokol-nya yakni HTTP dan HTTPS sebenarnya masih banyak lagi atribut yang tersedia pada tag <a> ini kita akan pelajari di part selanjutnya.

Menampilkan Gambar di HTML

Selanjutnya apabila kalian ingin menampilkan gambar-gambar pada sebuah halaman HTML kalian bisa menggunakan TAG <img> yang bertugas untuk menampilkan sebuah gambar.

Terdapat beberapa atribut lain-nya pada tag <img> ini yakni, src, alt, width dan height. Dan sebenarnya masih banyak lagi atribut yang dapat digunakan.

Nanti admin akan membuat part yang membahas penuh atribut pada HTML yah. Contoh penulisan tag penampil gambar dapat dilihat seperti ini :

<img src=”url tempat foto berada” alt=”CoretanKode Logo” width=”100” height=”150”>

Penjelasan singkat :

Alt merupakan atribut teks yang nanti akan muncul apabila gambar gagal dimuat
Width merupakan atribut untuk mengatur lebar gambar
Height merupakan atribut untuk mengatur tinggi gambar

Bila gambar berada pada folder yang sama dengan file dokumen HTML yang kalian buat maka kalian hanya perlu menuliskan nama serta format gambar saja pada atribut src.

Sehingga sekiranya source code anda mirip seperti ini :

<img src=”coretankodelogo.png” alt=”CoretanKode Logo” width=”100” height=”150”>

Nah akhirnya kalian seharusnya sudah berhasil menampilkan sebuah gambar pada halaman HTML yang kalian buat nih. Lebih lengkap lagi seputaran gambar akan admin bahas di part berikutnya yah.

READ : Belajar HTML Part 1 - Pengenalan [Lengkap]

Cara Melihat Source Code HTML di Browser

Kalian pernah tidak bertanya-tanya atau penasaran dengan Source Code halaman website orang lain ?

Sebenarnya kalian bisa kok melihat alias mengintip dan mencopy source code HTML orang lain dengan mudah hanya bermodalkan dengan web browser kalian sendiri saja. Berikut ini langkah melihat source code HTML di Browser :

Silahkan buka Google Chrome kalian
Buka halaman website yang membuat kalian penasaran
Klik kanan pada halaman tersebut
Pilih Inspect untuk melihat kodingan HTML dari halaman website tersebut
Silahkan kalian copy dan paste bila ingin
Selesai

Nah jadi HTML dan CSS merupakan 2 hal yang sangat mudah kalian intip baris kode-nya loh, karena HTML dan CSS bersifat publik dan boleh di lihat oleh siapa saja. Bila kalian ingin menyembunyikan source code halaman web kalian bisa saja.

Bisa saja kalian menggunakan Javascript atau mulai ngoding menggunakan back-end. Nah jadi itulah yang dapat admin sampaikan pada postingan belajar HTML part 2: Dasar-Dasar HTML kali ini semoga bermanfaat dan sampai jumpa di part selanjutnya.

Part sebelumnya, bila belum membaca :

Terima kasih telah berkunjung, Sekian dan Assalamualaikum Warahmatullahi Wabarakatu.

Originally posted 2021-11-10 16:19:16.