Apa itu html dan css

Question

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.

Table of Contents Show

Cara Kerja HTML, CSS dan Javascript
Apa yang dimaksud HTML dan CSS?
Apa itu HTML dan fungsinya?
Apa fungsi HTML dan CSS?
Apakah HTML dan CSS itu sama?

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).

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>

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>

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>

Apa yang dimaksud HTML dan CSS?

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Apa itu HTML dan fungsinya?

HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.

Apa fungsi HTML dan CSS?

Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik. CSS akan membantu para web designer untuk mengubah tampilan teks (baik dari bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML.

Apakah HTML dan CSS itu sama?

HTML dan CSS adalah bahasa inti pada web, utamanya adalah untuk membuat halaman web dan aplikasi web. Perbedaan penting antara keduanya adalah bahwa HTML digunakan untuk pembuatan halaman web dan CSS digunakan untuk mengontrol gaya dan tata letak halaman web.

Apa itu CSS Cara Kerja HTML Fungsi HTML Belajar HTML