Di elemen html apa kita meletakkan javascript?

Sedikit mengulang pertemuan sebelumnya, sebelumnya kita telah membahas tentang beberapa pengertian istilah-istilah dasar dalam HTML, diantaranya

• Tag. yaitu sintaks

  
  
    
      Elemen Pada HTML
    
    
      Tombol Kiri
      Tombol Kanan
    
  
  

  0 dan

  
  
    
      Elemen Pada HTML
    
    
      Tombol Kiri
      Tombol Kanan
    
  
  

  1 digunakan untuk membuat elemen HTML
• Elemen. yaitu objek atau node HTML yang membentuk satu kesatuan struktur halaman web
• Atribut. adalah informasi tambahan untuk elemen HTML yang kita buat, seperti atribut width dan height pada tag

  
  
    
      Elemen Pada HTML
    
    
      Tombol Kiri
      Tombol Kanan
    
  
  

  2

Struktur Tag, Konten, dan Atribut

Kita juga sudah membahas bagaimana struktur penulisan

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

3 pada HTML

Ini sebuah contoh

  Selamat Datang

  

_

Jika kita melakukan operasi, kita bisa mendapatkan beberapa informasi

Itulah gambaran struktur dasar penulisan tag dan atribut konten pada HTML

Namun - lebih umum dari itu - ada beberapa struktur dasar yang merupakan bagian utama dari sebuah dokumen HTML. Dan itulah yang akan menjadi topik pembahasan kita kali ini

Struktur Pohon HTML

Ingat dua kenop yang kita buat pada pertemuan sebelumnya?

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

Di dalam kode markup terdapat beberapa komponen yang menyusun dokumen HTML

1. 
   
     
       Elemen Pada HTML
     
     
       Tombol Kiri
       Tombol Kanan
     
   
   

   _4

   Bagian ini menjelaskan jenis dokumen yang sedang ditampilkan oleh browser. Apakah dokumen tersebut benar-benar dokumen HTML5 [bukan dokumen markup lain seperti XML atau XHTML]. Mendefinisikannya cukup penting agar dokumen HTML yang kita buat dapat diurai dengan baik oleh semua browser [1]

2. Dokumen

   
   
     
       Elemen Pada HTML
     
     
       Tombol Kiri
       Tombol Kanan
     
   
   

   5

   Menandai kapan dan di mana dokumen html dimulai

3. Bagian

   
   
     
       Elemen Pada HTML
     
     
       Tombol Kiri
       Tombol Kanan
     
   
   

   6

   Merupakan bagian yang tidak terlihat oleh pengguna, namun memiliki peran penting dalam menyiapkan berbagai informasi yang berkaitan dengan halaman web

4. Bagian

   
   
     
       Elemen Pada HTML
     
     
       Tombol Kiri
       Tombol Kanan
     
   
   

   7

   Ini adalah bagian di mana semua konten yang akan dilihat pengguna ditulis

Kita akan bahas lebih detail satu per satu

Bagian kepala

Tag

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 dalam dokumen HTML adalah bagian yang tidak terlihat oleh pengguna. Namun, ia memiliki berbagai jenis informasi yang terkait dengan dokumen HTML, baik informasi yang terlihat maupun yang tidak terlihat

Misalnya, kami memiliki kode markup berikut

  Elemen Pada HTML

Kode markup di atas akan memberi tahu browser bahwa Judul dokumen yang ditampilkan adalah "Elements in HTML"

Di mana itu akan ditampilkan?

Judul Dokumen [

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

_9]

Judul dokumen akan ditampilkan di berbagai tempat oleh browser. Yang paling penting ada di judul tab

Itu bahkan ditampilkan saat kami mem-bookmark halaman

Pengkodean Karakter

Selanjutnya, di antara hal-hal umum yang ditempatkan di bagian

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 adalah definisi pengkodean karakter yang harus digunakan oleh browser

Karakter penyandian yang bersifat universal dan paling sering ditemui adalah

  Elemen Pada HTML

1

Dari situ, halaman web kita bisa menampilkan berbagai karakter dari berbagai bahasa

Misalnya, kita dapat menampilkan karakter bahasa Inggris, Jepang, dan Arab

  Contoh bahasa Jepang: こんにちは皆さん
  Contoh bahasa Arab: مرحبا بكم جميعا

Output dari kode di atas adalah sebagai berikut

Favikon Halaman Web

Termasuk hal-hal yang secara umum didefinisikan dalam elemen

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 adalah favicon. Ini adalah ikon kecil dari dokumen web. Ikon ditampilkan di berbagai tempat termasuk di

• Tab peramban
• Menu bookmark browser
• Menu riwayat
• pencarian Google
• dll.

Cara mendefinisikan ikon dari dokumen web adalah sebagai berikut

Jangan lupa bahwa kode markup di atas harus diletakkan di

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 HTML

Halaman responsif

Antara lain yang biasa kita temukan pada elemen

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 pada halaman web adalah

Apa itu?

Kode markup di atas akan menginstruksikan browser bahwa panjang dokumen web adalah ukuran perangkat. Meta viewport sangat penting agar sebuah dokumen web dapat ditampilkan secara responsif pada berbagai ukuran layar

Ingin tahu perbedaannya?

Silakan buka dua halaman web di bawah ini dari browser seluler Anda masing-masing

1. Halaman 1 [dengan meta viewport]
2. Halaman 2 [tanpa area pandang meta]

Perbedaannya tampak jelas, bukan?

Pengarang dan Deskripsi

Selain itu, ada banyak metadata yang bisa kita tempatkan pada elemen

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6. Diantaranya adalah informasi tentang penulis dan informasi tentang konten halaman web itu sendiri

Deskripsi halaman web biasanya akan dipilih oleh mesin pencari sebagai "ikhtisar" singkat untuk setiap hasil pencarian

Dan masih banyak hal lainnya yang masih bisa kita tempatkan pada element

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6

gaya CSS

Struktur penting berikutnya dalam dokumen HTML adalah css

CSS adalah singkatan dari Cascading Style Sheets. Bertugas mengatur bagaimana suatu halaman web akan ditampilkan pada halaman browser [2]

Kita dapat mendefinisikan CSS halaman web dengan beberapa cara. Cara paling umum adalah menempatkan tautan di tag

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6 yang mengarah ke file

  Elemen Pada HTML

8

Atau, kita juga bisa langsung membuat elemen

  Elemen Pada HTML

9 di dalam

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

6, dan ini biasa disebut internal style

Perhatikan contoh berikut

  ...
  
    body {
      background-color: #272727;
      padding: 20px;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
    }
  
    button {
      background-color: rgb[11, 148, 197];
      padding: 15px;
      border-radius: 5px;
      border: none;
      color: white;
    }
  

Hasil css di atas akan mengubah halaman ini

Makhluk

Bukankah itu lebih mengasyikkan?

Bagian tubuh

Selanjutnya yang termasuk elemen penting dalam dokumen HTML adalah bagian tag

  
    Elemen Pada HTML
  
  
    Tombol Kiri
    Tombol Kanan
  

7. Seperti yang sudah dijelaskan, itu adalah bagian yang benar-benar terlihat langsung oleh pengguna

Di dalamnya kita bisa meletakkan gambar, tombol, formulir, tabel, daftar, teks, video, dll

JavaScript

Yang terakhir tapi tidak kalah pentingnya adalah. javascript

Ini adalah struktur halaman web yang memiliki peran yang sangat vital

Javascript dapat membuat halaman web lebih interaktif dan fungsional. Seperti menambahkan pemutar video, menampilkan peta, membuat game, dan sebagainya

Sama seperti CSS, javascript dapat ditambahkan baik secara internal maupun eksternal

Namun jika secara eksternal, biasanya javascript ditempatkan di bagian bawah dokumen html tepat sebelum tag body ditutup

2

Perhatikan contoh berikut

  ...

  
    const tombolKiri = document.querySelector['button']

    tombolKiri.addEventListener['click', [] => {
      const teks = document.createElement['p']
      teks.innerHTML = 'Tombol diklik'

      document.body.appendChild[teks]

      setTimeout[[] => {
        teks.remove[]
      }, 1000]
    }]
  

Coba klik tombol kiri di bawah, dan lihat apa yang terjadi

Setiap kali tombol di sebelah kiri diklik, javascript [js] akan menginstruksikan browser untuk menampilkan paragraf baru dengan teks Tombol diklik. Dan setelah 1 detik, teks akan hilang lagi

Keren bukan?

Poin Penting

Oke. Itu saja untuk pertemuan ini. Kami telah membahas beberapa hal penting di antaranya

• Bagian

  
  
    
      Elemen Pada HTML
    
    
      Tombol Kiri
      Tombol Kanan
    
  
  

  6 pada dokumen HTML berisi berbagai metadata dan informasi tambahan tentang halaman web
• CSS pada HTML berfungsi untuk mengatur bagaimana struktur komponen HTML ditampilkan
• Sedangkan javascript akan memberikan “kemampuan lebih” pada sebuah halaman web sehingga bisa lebih interaktif dan lebih fungsional

Kode Program Lengkap

Seperti biasa, kode program lengkap dari pertemuan ini dapat ditemukan di repositori html-dasar

Jangan lupa kasih ⭐⭐

Pertemuan Lanjutan

Insya Allah pada pertemuan selanjutnya kita akan membahas inline element dan block element pada HTML

Apakah HTML sama dengan JavaScript?

Apa fungsi JavaScript dalam membuat halaman web?

Apa yang dimaksud dengan skrip HTML?

Apa fungsi JavaScript dan berikan contohnya?