Belajar HTML #01: Mengenal, Unsur, dan Struktur Dasar HTML

Mengenal, Unsur, dan Struktur Dasar HTML - Codinganku

Mengenal Apa Itu HTML?

HTML merupakan singkatan dari Hypertext Markup Language yaitu bahasa standar web yang dikelola penggunaannya oleh W3C (World Wide Web Consortium) berupa tag-tag yang menyusun setiap elemen dari website. HTML berperan sebagai penyusun struktur halaman website yang menempatkan setiap elemen website sesuai layout yang diinginkan.

HTML biasanya disimpan dalam sebuah file berekstensi (.html). Untuk mengetikkan skrip HTML dapat menggunakan teks editor seperti Notepad sebagai bentuk paling sederhana atau text editor khusus yang dapat mengenali setiap unsur skrip HTML dan menampilkannya dengan warna yang berbeda sehingga mudah dibaca, seperti Notepad++, Sublime Text, dan masih banyak lagi aplikasi lain yang sejenisnya.

Unsur HTML

HTML terdiri atas unsur-unsur yang membentuk struktur skrip HTML yaitu tag, atribut, dan elemen.

1. Tag

Tag adalah simbol khusus (markup) berupa dua karakter "<" dan ">" yang mengapit suatu teks sebagai nama tag. Contohnya tag <body> adalah tag dengan nama body. Sebagian besar tag memiliki tag pembuka dan tag penutup yang membatasi pengaruh dari tag tersebut. Namun, terdapat sebagian kecil tag yang tidak memiliki tag penutup. Penutup tag ditambah simbol "/" setelah tanda "<", misalnya </body> yang merupakan penutup tag <body>.

Berikut adalah karakteristik dari tag pada HTML:
  • Tag boleh ditulis dengan huruf besar (kapital), kecil, atau campuran karena bersifat incase sensitive. Misalnya: <BODY>, <body>, atau <Body> semuanya memiliki hasil yang sama. Namun, untuk standarnya lebih baik menggunakan huruf kecil semua.
  • Tag bisa berisi tag lain. Tag yang dibuka dahulu ditutup terakhir, sedangkan tag yang dibuka terakhir ditutup pertama. Namun, kesalahan dalam struktur ini tidak mengakibatkan error. Misalnya:

<p>Hello <b>HTML</b></p>


2. Atribut

Atribut yaitu properti yang mengatur bagaimana elemen dari suatu tag akan ditampilkan. Atribut ditulis di dalam simbol tag setelah nama tag dengan dipisahkan oleh spasi. Atribut ada yang memiliki nilai dan ada yang tidak memiliki nilai. Nilai suatu atribut ditulis di dalam tanda petik ganda ("..."), dipisahkan dengan simbol sama dengan (=) dari nama atribut. Misalnya: <p align="center">.

Berikut adalah karakteristik dari atribut pada HTML:
  • Atribut hanya ditulis pada tag pembuka.
  • Setiap tag memiliki atribut yang berbeda-beda yang dapat diterapkan pada tag tersebut.
  • Beberapa atribut ada yang dapat diterapkan ke semua tag atau disebut global attribute, misalnya: class, id, style, dan sebagainya.
  • Sebuah tag dapat ditulis dengan satu atribut, banyak atribut, atau tanpa atribut sama sekali.
  • Jika tag ditulis dengan banyak atribut, masing-masing atribut dipisahkan oleh spasi.

3. Element

Element adalah bagian dari skrip HTML yang terdiri dari tag pembuka, isi element, dan tag penutup. Jika sebuah element ditampilkan pada browser, maka hanya isi element yang ditampilkan di browser. Misalnya:


<p> Saya sedang belajar HTML</p>


Jika ditampilkan pada browser, maka hanya tulisan "Saya sedang belajar HTML" yang akan tampil di browser.

Element HTML - Codinganku


Struktur Dasar HTML

HTML disimpan dengan ekstensi (.html), jika di dalamnya tidak mengandung skrip PHP. Jika di dalamnya mengandung skrip PHP, maka akan disimpan dengan ekstensi (.php).

Dalam penulisan HTML ada beberapa tag yang wajib dituliskan dengan struktur yang sudah ditentukan. Setiap file HTML harus menerapkan struktur tersebut, yaitu sebagai berikut:


<!DOCTYPE html>
<html>
    <head>
        <title>Belajar HTML</title>
    </head>
    <body>
        <p> Halo, Saya sedang belajar HTML</p>
    </body>
</html>


Penjelasan dan fungsi dari masing-masing tag di atas adalah sebagai berikut:
  • <!DOCTYPE html> adalah tag wajib atau tag awal dari setiap dokumen HTML yang berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan pada setiap awal penulisan HTML.
  • <html> ... </html> adalah tag yang menunjukkan pembuka dan penutup dokumen HTML.
  • <head> ... </head> adalah tag yang digunakan untuk menyimpan berbagai informasi tentang dokumen HTML. Apa yang terdapat di dalam tag ini tidak akan ditampilkan di browser.
  • <title> ... </title> adalah tag yang digunakan untuk membuat judul website yang akan muncul di title bar browser.
  • <body> ... </body> adalah tag yang menunjukkan bagian utama website. Semua yang akan ditampilkan pada halaman browser dituliskan di dalam tag ini.

Posting Komentar