Mempelajari Struktur Dasar Html

Menurut W3C atau Word World Wide Web Consortium, dokumen atau kode Html harus memiliki setidaknya 4 struktur dasar/struktur utama. Keempat struktur komponen tersebut harus digunakan secara bersamaan dan urutan penggunaanya juga harus tepat.

Lha...., gen koe ngerti tentang papat komponen kui, ayo woconen artikel iki antek pol ngisor :). ngk ngerti yak? v(=∩_∩=)ﾌ

Gomene :)

Struktur dasar html

Struktur dasar html merupakan gabungan antara tag, elemen dan atribut. Ke-tiga komponen tersebut saling melengkapi hingga akhirnya terbentuklah kode html yang berjalan dengan lancar.

Contoh struktur dasar html

<!DOCTYPE html>
<html>
<head>
    <title>Struktur dasar Html </title>
</head>
  <body>
    <p> Konichiwa, selamat datang di blog Agata </p>
    <img src ="gambar.jpeg" />
  </body>
</html>

Itu adalah salah satu contoh struktur dasar html. Didalam contoh tersebut terdapat 4 komponen dasar didalam sebuah kode html, yang meliputi :

<!DOCTYPE html>
<html>
<head>
<body>

Keempat komponen itulah yang menjadi struktur dasar kode html. Penulisan struktur tersebut juga harus sesuai, tidak boleh di salah apalagi direndem (asal nulis aja gitu :q).

Untuk mempermudah pemahaman, mari kita bahas satu persatu komponen tersebut ヾ(〃^∇^)ﾉ.

Bagian <!DOCTYPE html>

Yang pertama ada <!DOCTYPE html>. DOCTYPE merupakan sebuah singkatan dari Document Type Declaration atau dalam bahasa indonesia berarti deklarasi jenis dokumen.

Fungsi <!DOCTYPE html> dalam kode html ialah mendeklarasikan bahwa ia merupakan kode/dokumen html. Bukan kode/dokumen dari bahasa makrup lain.

Bagian Tag <html>

Tag <html> digunakan untuk wadah komponen lain seperti tag, alemen maupun atribut. Tak hanya menampung komponen dari bahasa html, didalam Tag <html> juga dapat digunakan untuk menampung script dari bahasa lain seperti css, JavaScript ataupun php.

Secara sederhana, Tag <html> merupakan tempat kode html berada. Apabila ada kode/script html yang berada diluar Tag <html>, maka kode/script tersebut tidak akan dieksekusi dan akan ditampilkan sebagai text biasa.

Bagian Tag <head>

Komponen yang berada didalam Tag <head> biasanya tidak dapat dilihat oleh user, kecuali Tag <title> dan Tag yang digunakan untuk menampilkan favicon (lupa aku nama Tag nya :v) .

Sebagai tambahan
Tag <title> merupakan Tag yang berfungsi untuk menampilkan judul dibagian atas browser.

Selain Tag <title>, ada beberapa Tag lain yang dapat dimasukkan kedalam komponen <head>, seperti

Symbol	Keterangan
<style>	Wadah atau tempat untuk Css
<link>	Sebagai penghubung untuk file atau website lain
<script>	Wadah atau tempat untuk JavaScript
klik disini untuk melihat Tag lain

Oh ya. Apabila kamu ingin menambahkan script Css ke dalam kode Html kamu dapat menggunakan Tag <style> dan ditempatkan didalam Tag <head>.

Contoh penggunaan script Css didalam html

See the Pen Penulisan Css didalam Html by Agata_desu (@Agata_desu) on CodePen.

Klik Result untuk melihat hasil program

Bagian Tag <body>

Ini merupakan kebalikan dari Tag <head>. Apabila Tag <head> tidak dapat dilihat oleh user, komponen <body> justru dapat dilihat oleh user.

Dan didalam Tag <body> inilah konten suatu website berada. Tag <body> dapat berisikan Tag lain, elemen dan atribut, didalam Tag <body> inilah kita dapat menyisipkan script JavaScript kedalam kode Html.

Dan untuk menyisipkan script JavaScript kedalam Html dapat menggunakan syntax untuk <script>.

Owhkeh, sekian dulu untuk artikel ini. Apabila ada pertanyaan atau keslahan penulisan dapat kamu sampaikan melalui kolom komentar dibawah.

Arigatou gozaimasu.

Agata_Desu

PENGATURAN

Mempelajari Struktur Dasar Html