Pengertian dan fungsi HTML, CSS dan Javascript sebagai pembangun Halaman web

PENGANTAR
Sebagian besar Halaman web yang terdapat di internet tersusun atas 3 bahasa. Tiga bahasa ini adalah HTML, CSS dan Javascript. Pemahaman tentang HTML, CSS dan Javascript merupakan hal yang sangat penting dalam kegiatan blogging.



HTML

HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat Halaman web. HTML adalah markup yang digunakan untuk mendefinisikan struktur halaman web. Hal ini seperti misalnya membuat elemen paragraf, gambar, link dan lain sebagainya. HTML tersusun atas elemen/tag HTML.

Sebagian besar halaman web merupakan halaman yang dibangun dengan HTML. HTML merupakan bentuk utama dari halaman web. CSS dan Javascript terletak di dalam file HTML. Sebuah halaman web dapat dibuat hanya dengan menggunakan HTML (Tanpa CSS dan Javascript).

html css javascript



CSS

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur tampilan (gaya) elemen-elemen HTML. Dengan CSS, kita dapat memberikan warna background, border, mengatur posisi elemen, ukuran font dan lain sebagainya.



Javascript

Javascript adalah bahasa pemrograman (berjalan pada web browser) yang digunakan untuk membuat halaman web yang lebih interaktif. Dengan javascript, kita bisa membuat banyak fitur pada halaman web. Javascript memungkinkan kita untuk mendeteksi dan menindaklanjuti prilaku pengunjung (events) pada halaman web. Contoh penerapan javascript seperti misalnya menampilkan elemen tertentu hanya pada browser tertentu saja, membuat fitur yang memungkinkan pengguna untuk dapat menyesuaikan ukuran font pada blog, dan lain sebagainya.



Cara Kerja HTML, CSS dan Javascript

Memahami peranan masing-masing bahasa
Untuk lebih memperjelas tentang bagaimana ketiga bahasa ini bekerja secara bersamaan, perhatikan contoh berikut: 

        
        <!DOCTYPE html>
        <html>
          <head>
            <title>Belajar HTML</title>
          </head>
          <body>
            <p id='p1'>Paragraf 1</p>
            <p id='p2'>Paragraf 2</p>
          </body>
        </html>

Paragraf 1

Paragraf 2


Pada kode HTML diatas, tidak ada satupun konfigurasi CSS yang diterapkan. Hasil yang terlihat juga berupa paragraf sederhana tanpa dekorasi khusus. Pada contoh di bawah ini, beberapa konfigurasi CSS diterapkan untuk elemen paragraf (<style>...</style>). 

        
        <!DOCTYPE html>
        <html>
          <head>
            <title>Belajar HTML</title>
            <style>
              p {
                color:white;
                text-align:center;
                padding:30px;
                width:48%;
                float:left;
                box-sizing:border-box;
              }
              #p1 {
                background:blue;
              }
              #p2 {
                background:red;
              }
            </style>
          </head>
          <body>
            <p id='p1'>Paragraf 1</p>
            <p id='p2'>Paragraf 2</p>
          </body>
        </html>

Paragraf 1

Paragraf 2


Sampai disini, anda tentunya sudah paham tentang fungsi dari CSS. Pada contoh kode di bawah, javascript digunakan untuk menambahkan elemen tombol yang memungkinkan pengguna untuk dapat menukar background paragraf (<script>...</script>). 

        
        <!DOCTYPE html>
        <html>
          <head>
            <title>Belajar HTML</title>
            <style>
              p {
                color:white;
                text-align:center;
                padding:30px;
                width:48%;
                float:left;
                box-sizing:border-box;
              }
              #p1 {background:blue;}
              #p2 {background:red;}
            </style>
          </head>
          <body>
            <p id='p1'>Paragraf 1</p>
            <p id='p2'>Paragraf 2</p>
            <a href='#' id='b1'>Ganti background</a>
            <script>
              const p1 = document.getElementById("p1");
              const p2 = document.getElementById("p2");
              const b1 = document.getElementById("b1");
              b1.onclick = (e)=>{
                e.preventDefault();
                const bgMode = p1.style.background === "red" ? 1 : 2;
                p1.style.background = bgMode === 1 ? "blue" : "red";
                p2.style.background = bgMode === 1 ? "red" : "blue";
              };
            </script>
          </body>
        </html>

Paragraf 1

Paragraf 2

Ganti background
Komentar