Belajar HTML Dasar Pengenalan Tags

Pengenalan HTML

Belajar HTML: Pengenalan TAG

Belajar HTML Dasar Pengenalan TagsHypertext Markup Language  merupakan bahasa markah yang berperan sebagai struktur dalam membangun sebuah halaman website.
Untuk membuat sebuah file html cukuplah mudah seperti membuat file pada umumnya hanya saja berakhiran .html, kalian bisa mencobanya menggunakan notepad namun saya lebih menyarankan menggunakan code editor seperti visual studio code, sublime, notepad++ ataupun yang lain dikarenakan akan lebih mudah membacanya. sekarang mari kita mulai Belajar HTML: Pengenalan TAG

Struktur Dasar HTML

HTML memilik sebuah struktur didalamnya seperti judul, sub judul, gambar, paragraf dan seterusnya, penulisan html diawali dengan tag dan di akhiri juga dengan tag penutup <tag> html </tag>.
Seperti ini contoh struktur html pada halaman website:
[dm_code_snippet background=”no” background-mobile=”no” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

<!DOCTYPE html>
<html>

<head>
    <title>Judul Halaman</title>
</head>

<body>
    <h1>Heading Utama</h1>
    <p>Sebuah Paragraph.</p>
</body>

</html>

[/dm_code_snippet]
Perhatikan contoh kode html diatas, pada elemen <html> menunjukan bahwa bahwa file atau berkas tersebut merupakan html, sedangkan <head> merupakan tempat untuk menyimpan meta tag, style css ataupun link dan judul, untuk element <body> adalah tempat dimana sebuah isi dari halaman website diletakan seperti paragraf dan juga gambar dari artikel.

Tag Judul

Tag judul digunakan untuk menformat elemen judul contohnya <h1> hingga <h6> huruf H disini berartikan heading sedangkan angka akan menunjukan besar ukuran dari yang terbesar hingga terkecil, silahkan di coba untuk mengetahui perbedaannya.

Tag Paragraf

Tag paragraf ( <p> ) adalah tag yang digunakan untuk membuat paragraf baru, jika ada text yang berada di tengah tag ini maka akan dimulai baris baru, contoh <p>Belajar HTML di SurgaTutorial </p>.

Tag Komentar

Jika ingin memberi komentar pada sebuah berkas html kita dapat melakukannya dengan cara mengawali text dengan tag <!– dan di akhiri dengan –>, kalimat yang ada diantara tag tersebut tidak akan tampil pada browser kecuali kita melihatnya melalui view-source.

Tag Tautan

Pernah kan kalian mengklik sebuah link pada halaman website ? itu yang dinamakan tautan jika bisa membuatnya dengan menggunakan tag anchor, contoh penulisannya seperti ini: <a href=”https://surgatutorial.com”>klik disini</a>. Loh kok ada href nya ? tenang akan dijelaskan dibawah.

Tag Gambar

Tag gambar dituliskan dengan <img> namun seperti diatas kita menambahkan src sebagai sumber dari gambar yang akan di tampilkan, contohnya: <img src=”https://surgatutorial.com/wp-content/uploads/2021/02/blacksurga.png”> tanpa tag penutup seperti </img>.

Atribut HTML

Seperti yang kalian lihat diatas ada href dan src itu yang namanya atribut html untuk mengisi nilai dari atribut kita di haruskan menambahkan tanda kutp ganda ( ).

Tag Daftar

Dalam html untuk membuat daftar atau list kita membutuhkan 2 buah tag berbeda, untuk lebih jelasnya langsung lihat contoh berikut:

[dm_code_snippet background=”no” background-mobile=”no” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

[/dm_code_snippet]

Indentasi

Untuk penulisan html bersarang seperti pada tag daftar cara terbaik atau best practicenya dengan menerapkan indentasi contohnya seperti diatas, untuk mempermudah melakukan hal tersebut kita bisa menggunakan extension pada vs code ataupun kode editor lainnya.

Sampai disini semoga dapat dipahami penjelasan tentang dasar – dasar html sekian artikel Belajar HTML Dasar Pengenalan Tags kali ini terima kasih.