Tutorial Belajar HTML Lengkap Untuk Pemula

By Bang Feri 02 Feb, 2020 Post a Comment

Halo sobat, selamat datang di Bang Feri Blog, nah pada kesempatan kali ini saya akan membagikan artikel Coding pertama saya di blog ini yang berjudul Tutorial Belajar HTML Lengkap Untuk Pemula. Jadi seperti apa pembahasannya? Mari kita pelajari satu per satu.

Tutorial Belajar HTML Lengkap Untuk Pemula

Apa itu HTML?

Untuk mulai belajar HTML, hal pertama yang perlu diketahui adalah pengertian HTML itu sendiri. Jadi berikut ini akan saya jelaskan secara singkat apa itu HTML dan pengertiannya.

HTML atau singkatan dari kata Hyper Text Markup Language adalah salah satu bahasa markup standar yang sangat sering digunakan oleh setiap programmer atau web design saat membuat sebuah proyek seperti aplikasi, dokumen, maupun situs web, salah satu contohnya adalah blog ini, yang tersusun oleh banyaknya struktur kode HTML.

HTML sendiri dapat dikatakan sebagai pondasi dari setiap situs web/blog, lanyaknya seperti sebuah rumah yang jika tidak memiliki pondasi rumah tersebut pasti tidak akan berdiri kokoh.

Srtuktur HTML terdiri atas serangkaian elemen yang fungsinya untuk memberi tahu browser cara menampilkan konten dari web tertentu. Elemen-elemen pada HTML diwakili oleh tag-tag yang memberikan label pada konten seperti "heading", "paragraf", "tabel", dan lain sebaginya.

Info
Dokumen yang berisi struktur kode HTML akan berjenis/berekstensi .html

Agar lebih jelas berikut ini adalah contoh penulisan sederhana struktur kode dari dokumen index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Belajar HTML Lengkap Untuk Pemula</title>
    </head>
    <body>

        <h2>Heading Pertama Saya</h2>
        <p>Contoh Paragraf: Tutorial Belajar HTML Lengkap Untuk Pemula</p>
        
    </body>
</html>

Penjelasan Contoh

Tag <!DOCTYPE html> dideklarasi untuk mendefinisikan dokumen ini menjadi sebuah dokumen HTML 5.
Tag <html> adalah elemen akan dalam dokumen HTML.
Tag <head> adalah elemen yang sesuai dengan namanya head, berisi infornamsi tentang meta dalam dokumen.
Tag <body> adalah elemen yang berisi konten halaman atau tag untuk menempatkan tag-tag lain yang merupakan konten yang nantinya ingin ditampilkan di browser.
Tag <h2> adalah elemen yang fungsinya untuk mendefinisikan judul dengan tampilan yang besar.
Tag <p> adalah elemen untuk mendefinisikan atau membuat konten dalam bentuk paragraf.

Catatan
Perlu sobat ketahui bahwa, "Tag" adalah elemen yang dibungkus oleh tanda kurung sudut. Misalnnya <body>, <h1>, <p>, dan masih banyak lagi.

Tag yang ada di HTML biasanya terdiri secara berpasangan (tag pembuka dan tag penutup), seperti <body> dan </body>. Tag yang tidak memiliki tanda garis miring sebelum namanya adalah tag pembuka atau tag awal, sedangkan tag yang memiliki tanda garis miring sebelum namanya adalah tag penutup.

Browser yang Mendukung HTML

Seperti yang telah saya singgung pada pengertian HTML bahwa struktur kode HTML fungsinya untuk memberi tahu browser cara menampilkan konten dari web atau dokumen yang berekstensi .html. Oleh kerena itu, perlu juga kita ketahui browser mana saja yang sudah mendukung untuk menampilkan konten yang tersusun oleh kode HTML.

Jadi, sebagai rekomendasi sobat bisa menggunkan browser seperti Chrome, FireFox, Edge, atau Safari. Browser tidak menampilkan tag, tetapi menggunakannya untuk menentukan tampilan dokumen. Berikut ini hasil struktur kode HTML yang ada diatas jika ditampilkan pada browser.

Berdasarkan hasil struktur dokumen HTML diatas, berikut ini bentuk visualisasinya:

<html>

<head>

<titile>
Tutorial Belajar HTML Lengkap Untuk Pemula - Bang Feri Blog
<titile>

</head>

<body>

<h2> Heading Pertama Saya </h2>

<p> Paragraf pertama </p>

<p> Paragraf berikutnya </p>

</body>

<html>

Catatan
Semua Konten yang ada didalam tag <body> (pada area kotak warna putih) yang akan tampil di browser.

Dan jika diperhatikan, kotak visualisasi di atas tidak menampilkan kotak untuk tag <!DOCTYPE html>. Nah, hal tersebut sesuai dengan apa yang telah saya terangkan pada penjelasan contoh di atas bahwa, tag <!DOCTYPE html> hanya digunakan untuk membantu browser menampilkan konten HTML dengan benar. Jadi, walaupun tag tidak ditulis juga tidak masalah.

Contoh struktur kode HTML tanpa tag <!DOCTYPE html>

<html>
    <head>
        <title>Tutorial Belajar HTML Lengkap Untuk Pemula</title>
    </head>
    <body>

        <h2>Heading Pertama Saya</h2>
        <p>Contoh Paragraf: Tutorial Belajar HTML Lengkap Untuk Pemula</p>
        
    </body>
</html>

Kesimpulan

HTML adalah bahasa markup standar yang digunakan pada sebuah dokumen atau laman web yang berekstensi .html dan terdiri dari berbagai macam elemen atau tag. Tag dalam HTML berfungsi untuk memberitahu browser cara menampilkan konten dengan benar.

Penutupan

Menulis (membuat struktur HTML) bagi saya pribadi sangatlah keren dan dapat melatih kelincahan tangan dalam menekan tombol yang ada di keyboard. Serta dengan melihat perkembangan teknologi yang sekarang, bisa jadi bahasa pemrograman juga akan semakin digunakan salah satunya HTML.

Nah, jadi apakah sobat sudah siap untuk mulai belajar HTML secara lebih mendalam? Semoga sudah siap ya?

Nah, mungkin cukup sekian pembahasan kali ini, semoga penjelasan HTML diatas ini mudah dipahami oleh sobat pemula. Terima kasi atas kunjungannya dan sampai jumpa pada artikel coding berikutnya. Salam Anak Bangsa!

Bang Feri Blog - Blogging and Coding