Belajar HTML Dasar Untuk Pemula Sampai Mahir
Dalam tahap ini kita akan memberikan beberapa contoh HTML dasar.
Jangan khawatir dan jangan takut untuk lanjut belajar jika kami akan menunjukan dan memberikan tag yang belum Anda pelajari, karena ini merupakan ilmu-ilmu dasar HTML yang perlu diketahui.
Pada tahap tutorial ini silahkan Anda eksekusi kode HTML yang telah contohkan pada Notepad yang Anda gunakan.
Dokumen HTML
Deklarasi dari tipe dokumen HTML harus diawali dengan : <!DOCTYPE html>.
Dokumen HTML itu sendiri dimulai atau dibuka dengan <html> dan diakhiri atau ditutup dengan </html>.
Bagian yang nantinya akan terlihat atau ditampilkan di browser dari dokumen HTML adalah antara <body> dan </body>.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>Ini adalah heading pertama saya</h1>
<p>Ini adalah paragraf pertama saya</p>
</body>
</html>
Deklarasi <!DOCTYPE>
<! DOCTYPE> Mendeklarasikan dan mewakili tipe dokumen, dan membantu browser menampilkan halaman website dengan benar dan sesuai apa yang ditulis dalam kode HTML.
<! DOCTYPE> hanya boleh ditulis sekali, di bagian atas halaman (sebelum tag HTML apa pun).
Deklarasi <!DOCTYPE> tidak berpengaruh terhadap huruf besar atau kecil.
Deklarasi <!DOCTYPE> digunakan untuk HTML5, penulisanya yaitu : <!DOCTYPE html>
Membuat Heading atau Judul dengan HTML
HTML Judul/Headings ditentukan dengan tag <h1> hingga <h6>.
<h1> mendefinisikan heading yang paling utama.
<h6> mendefinisikan heading yang tidak terlalu penting atau jarang terlalu penting.
Contoh :
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
Silahkan dicoba pada Notepad yang Anda gunakan. Caranya sama seperti pada bab HTML Editors.
Membuat Paragraf dengan HTML
Paragraf pada HTML ditentukan dengan tag <p>.
Contoh dan penulisannya seperti ini :
<p>Ini adalah paragraf</p>
<p>Dan ini adalah paragraf yang lain</p>
Membuat LINK dengan HTML
link HTML didefinisikan dengan tag <a>:
Contoh dan penulisanya :
<a href="https://niatkomputer.blogspot.com/">Ini adalah link atau tautan</a>
Penulisan link atau tautan pada HTML ditulis dalam atribut href.
Atribut berfungsi sebagai pemberi informasi tambahan tentang elemen HTML.
Anda akan mempelajari lebih lanjut mengenai atribut pada bab selanjutnya, jadi tetap ikuti tutorial yang kami berikan agar menambah wawasan Anda tentang HTML, terutama dalam pembuatan website untuk pemula sampai mahir.
Menyisipkan Gambar dengan HTML
Gambar HTML (HTML images) didefinisikan dengan tag <img>.
Kemudian di dalam tag <img> terdapat beberapa atribut, seperti sumberfie (src), teks alternetif (alt), lebar, dan tinggi.
Contoh penulisannya :
<img src="w3schools.jpg" alt="W3Schools.com" width="104px" height="142px">
Keterangan :
dimana :
src="w3schools.jpg"
src adalah atribut yang digunakan untuk menampilkan gambar di dokumen HTML
w3schools.jpg adalah gambar yang akan ditampilkan
alt="W3Schools.com"
alt adalah atribut yang digunakan untuk menampilkan alternatif teks ketika gambar tidak muncul
W3Schools.com adalah teks yang akan muncul
width="104px"
width adalah atribut yang digunakan untuk mengatur lebar dari gambar
104px adalah lebar dari gambar
height="142px"
height adalah atribut yang digunakan untuk mengatur panjang dari gambar
142px adalah panjang dari gambar
Tips dan Trik
Bagaimana Cara Melihat Sumber HTML?
Pernahkah Anda melihat halaman Website dan Anda seketika itu bertanya-tanya "Gimana sih cara mereka melakukannya?"
Berikut Cara Melihat Sumber Kode HTML:
Klik kanan di halaman HTML dan pilih "View Page Source" (di browser Google Chrome) atau "View Source" (di Edge), atau di browser lainya yang tidak jauh berbeda. Cara ini akan membuka jendela yang berisi kode sumber halaman HTML.
Periksa Elemen HTML:
Arahkan kursos ke elemen atau area kosong halaman, lalu Klik kanan, dan pilih "Inspect" atau "Inspect Element" untuk melihat elemen apa yang dibuat (Anda akan melihat HTML dan CSS). Anda juga dapat mengedit HTML atau CSS dengan cepat di panel Elements atau Styles yang terbuka.