Perbedaan antara html dan javascript dan css

JavaScript yang sering dikenal sebagai JS, adalah bahasa pemrograman interpretasi dinamis tingkat tinggi yang memungkinkan pembuatan skrip sisi klien untuk membuat aplikasi web dan situs web yang sepenuhnya dinamis. Ini adalah bahasa berbasis prototipe yang sangat ringan yang dapat dengan mudah dijalankan di browser. diketik dengan lemah, berbasis prototipe, multi-paradigma. Menjadi skrip multi-paradigma dan diketik dengan lemah Ini dapat memberikan kekuatan cemerlang ke halaman web Anda. Menggunakan JavaScript Anda dapat menempatkan perhitungan, kondisi logis, dan semua fungsi pemrograman

Pada artikel ini, saya ingin menjelaskan perbedaan antara HTML, CSS, dan JavaScript dengan sebuah analogi. Saya harap ini membantu Anda memahami apa bahasa-bahasa ini, dan apa yang mereka lakukan

Mari kita mulai dengan HTML

HTML

HTML adalah singkatan dari Hypertext Markup Language. Ini menciptakan struktur situs web

Mari kita gunakan rumah sebagai analogi. Pikirkan tentang rumah yang Anda tinggali saat ini. Berapa banyak kamar yang dimilikinya?

  • Satu ruang tamu
  • Satu dapur
  • Dua kamar tidur

Jika saya menulis struktur ini ke dalam kode, mungkin akan terlihat seperti ini

<house>
  <living-room></living-room>
  <kitchen></kitchen>
  <bedroom></bedroom>
  <bedroom></bedroom>
</house>

Setiap item dalam kurung siku (< dan >) disebut tag. Di sini,

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
_0 adalah tag. Ini memiliki satu
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
1, satu
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
2, dan dua
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
3s di dalamnya

HTML mirip dengan kode di atas. Tetapi HTML mengharuskan Anda untuk menggunakan daftar tag yang telah ditentukan sebelumnya, bukan

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
0 dan
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
1. Anda dapat menemukan daftar semua kemungkinan tag di MDN. Contoh tag ini termasuk

  1. <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom"></div>
      <div class="bedroom"></div>
    </div>
    
    6,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom"></div>
      <div class="bedroom"></div>
    </div>
    
    7,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom"></div>
      <div class="bedroom"></div>
    </div>
    
    8
  2. <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom"></div>
      <div class="bedroom"></div>
    </div>
    
    _9,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    0,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    1,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    2,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    3,
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    4,
  3. <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    _5,
  4. <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    _6
  5. <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed"></div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    _7

Yang paling dasar dari semua tag dalam HTML adalah

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
6. Untuk artikel ini, saya akan menggunakan
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
_6 untuk menunjukkan kepada Anda apa itu HTML dasar

Dalam HTML, kita tidak dapat menulis

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
_0 karena
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
0 bukan tag HTML yang valid. Kita dapat menggunakan
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
_6 sebagai pengganti tag
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
0. Tapi kita butuh cara untuk mengidentifikasi "rumah"

Untuk mengidentifikasi "rumah", kami menggunakan kelas. Versi HTML rumahnya terlihat seperti ini

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom"></div>
  <div class="bedroom"></div>
</div>
_

Kita bisa menyelam lebih dalam

Perhatikan ruangan tempat Anda berada. Furnitur apa yang Anda miliki di dalam ruangan?

Versi HTML dari ini adalah

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed"></div>
  </div>
  <div class="bedroom"></div>
</div>

Kata-kata antara

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>
4 dan
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>
5 disebut komentar. Itu adalah kata-kata yang dimaksudkan untuk Anda dan saya baca. Browser tidak akan mencoba memahami apa itu. Kami menggunakan komentar untuk menuliskan pemikiran untuk diri kami sendiri dan pengembang lain

Anda masih bisa menyelam lebih dalam

Di tempat tidurku, aku punya

  1. Dua bantal
  2. Satu penyangga
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>

Jika Anda melanjutkan, Anda dapat membuat seluruh struktur rumah Anda dalam HTML. Inilah yang saya maksud ketika saya mengatakan HTML adalah struktur sebuah situs web

<div class="house">
  <div class="living-room"><!-- .. --> </div>
  <div class="kitchen"><!-- .. --> </div>
  <div class="bedroom"><!-- .. --> </div>
  <div class="bedroom"><!-- .. --> </div>
</div>

CSS

CSS adalah singkatan dari Cascading Stylesheets. Ini memungkinkan Anda membuat situs web terlihat lebih bagus. Dalam istilah industri, kami mengatakan Anda "menata gaya" situs web dengan CSS

Anda dapat menata item dengan menulis yang berikut ini

selector {
  property: value;
}

<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>
_6 mengacu pada tag atau kelas, (atau atribut, jika Anda sedikit lebih mahir) yang ingin Anda gaya.
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>
7 dan
<div class="house">
  <div class="living-room"></div>
  <div class="kitchen"></div>
  <div class="bedroom">
    <!-- Items in the bedroom -->
    <div class="chair"></div>
    <div class="table"></div>
    <div class="wardrobe"></div>
    <div class="bed">
      <!-- Items on my bed --> 
      <div class="pillow"></div>
      <div class="pillow"></div>
      <div class="bolster"></div>
    </div>
  </div>
  <div class="bedroom"></div>
</div>
8 pasang membiarkan Anda menentukan gaya. Ini akan lebih masuk akal jika kita kembali ke analogi rumah kita lagi

Pertimbangkan kamar tidur Anda. Bagaimana penataan furniturnya?

  • Tempat tidur ditempatkan di sudut timur laut
  • Lemari pakaian ditempatkan di sudut tenggara
  • pintu ada di sudut barat daya

Di situs web, kami tidak memiliki arah utara/timur/selatan/barat. Tapi kita masih bisa mengatakan di mana letaknya dengan top/right/bottom/left

Katakanlah tempat tidur saya diletakkan di sudut kanan atas ruangan. Demikian yang dapat saya tulis

.bed {
  position: absolute;
  top: 0; 
  right: 0;
}

Ini berarti

  1. Tetapkan
    <div class="house">
      <div class="living-room"></div>
      <div class="kitchen"></div>
      <div class="bedroom">
        <!-- Items in the bedroom -->
        <div class="chair"></div>
        <div class="table"></div>
        <div class="wardrobe"></div>
        <div class="bed">
          <!-- Items on my bed --> 
          <div class="pillow"></div>
          <div class="pillow"></div>
          <div class="bolster"></div>
        </div>
      </div>
      <div class="bedroom"></div>
    </div>
    
    _9 ke
    <div class="house">
      <div class="living-room"><!-- .. --> </div>
      <div class="kitchen"><!-- .. --> </div>
      <div class="bedroom"><!-- .. --> </div>
      <div class="bedroom"><!-- .. --> </div>
    </div>
    
    0 untuk
    <div class="house">
      <div class="living-room"><!-- .. --> </div>
      <div class="kitchen"><!-- .. --> </div>
      <div class="bedroom"><!-- .. --> </div>
      <div class="bedroom"><!-- .. --> </div>
    </div>
    
    1 elemen kelas
  2. Dorong sampai ke atas
  3. Dorong sampai ke kanan

Selain lokasi, Anda juga dapat mengubah hal-hal seperti ukuran dan warna

.bed {
  width: 400px; 
  height: 200px; 
  background-color: lightskyblue;
}

Lihat Pen vYBWLwM oleh Zell Liew (@zellwk) di CodePen

Anda dapat menemukan daftar semua properti CSS di sini

Catatan. Ini adalah daftar besar. Anda mungkin kewalahan jika melihatnya. Kabar baiknya adalah, Anda tidak harus mempelajari semuanya sekaligus. Jika Anda memulai dari awal, saya sangat menyarankan untuk membaca “Internet itu sulit”. Ini menjelaskan dasar-dasar HTML dan CSS dengan cara yang sederhana

(Saya sedang mengerjakan kursus CSS langkah demi langkah untuk membawa Anda dari pemula hingga mahir di masa mendatang. Tinggalkan email Anda di sini jika Anda ingin bertanya/mendapatkan update tentang kursus ini)

JavaScript

HTML dan CSS bersifat statis. Anda tidak dapat mengubah HTML dan CSS (dengan mengubah file HTML atau CSS) setelah situs web dimuat. Tetapi JavaScript memberi Anda kemampuan untuk mengubah HTML dan CSS pada halaman

Mari gunakan analogi rumah lagi untuk menjelaskan apa itu JavaScript. Omong-omong, JavaScript dan Java adalah dua hal yang berbeda. Jangan campur mereka

Katakanlah sekarang gelap. Kamu masuk ke kamarmu. Apa yang akan Anda lihat?

Tidak ada apa-apa. Karena di dalamnya gelap gulita

Anda memindahkan tangan Anda ke sakelar dan menyalakan lampu. Ini adalah contoh interaksi. Contoh lainnya adalah

  1. Menyalakan TV
  2. Menyalakan keran untuk air mengalir
  3. Menyalakan AC

Di situs web, interaksi dasar mirip dengan menyalakan lampu. Anda mengklik tombol dan sesuatu terjadi. Di GIF di bawah ini, saya mengklik tombol dan menu muncul. Saya mengklik tombol lagi dan menu ditutup

Perbedaan antara html dan javascript dan css

Anda dapat melakukan lebih banyak hal dengan JavaScript. Contohnya adalah

  1. Mainkan animasi saat Anda menggulir ke bawah
  2. Buka menu saat Anda menekan tombol pada keyboard
  3. Buat pintasan keyboard untuk situs web Anda
  4. Buat carousel tempat orang dapat beralih antar slide
  5. Membuat kalkulator

Ada jauh lebih banyak tentang JavaScript daripada yang bisa saya katakan dengan satu posting blog. Jika Anda tertarik mempelajari JavaScript, saya menulis kursus untuk mengajari Anda semua yang perlu Anda ketahui tentang JavaScript. Ini disebut Pelajari JavaScript. Saksikan berikut ini. Anda juga akan melihat beberapa inspirasi tentang apa yang dapat Anda buat. )

Membungkus

HTML memungkinkan Anda membuat struktur situs web

CSS memungkinkan Anda membuat situs web terlihat bagus

JavaScript memungkinkan Anda mengubah HTML dan CSS. Karena memungkinkan Anda mengubah HTML dan CSS, ini dapat melakukan banyak hal

Itu dia. Semoga ini membantu Anda lebih memahami perbedaan antara HTML, CSS, dan JavaScript

Jika Anda menikmati artikel ini, dukung saya dengan membagikan artikel ini ke Twitter atau membelikan saya kopi 😉. Jika Anda menemukan kesalahan ketik, saya akan menghargai jika Anda dapat memperbaikinya di GitHub. Terima kasih

Apakah JavaScript lebih baik daripada HTML dan CSS?

CSS dan JavaScript keduanya digunakan pada halaman Web dengan HTML tetapi untuk peran yang berbeda. . Perbedaan antara CSS dan JavaScript

Apa perbedaan utama antara HTML dan CSS?

HTML Vs. CSS. HTML adalah bahasa markup yang digunakan untuk membuat halaman web statis dan aplikasi web. CSS adalah bahasa style sheet yang bertanggung jawab atas penyajian dokumen yang ditulis dalam bahasa markup.

Mana yang lebih mudah HTML CSS atau JavaScript?

HTML jauh lebih mudah dipelajari daripada JavaScript dan dianggap sebagai bahasa yang paling mudah dipelajari. Anda dapat mempelajari sebagian besar HTML dari tingkat pemula hingga pengkodean HTML (dasar) Anda sendiri hanya dalam satu atau dua hari, tetapi hanya mengetahui HTML tidak akan memberi Anda pekerjaan pengkodean.

Haruskah saya mempelajari JavaScript terlebih dahulu atau HTML dan CSS?

Apakah Saya Perlu Mengetahui HTML Dan CSS Sebelum Mempelajari JavaScript? . Namun, memiliki pemahaman dasar tentang bahasa-bahasa ini akan memudahkan Anda mempelajari dan menggunakan JavaScript