Modul FrontEnd Web Dasar
  • Pengenalan Penulis
  • Muqadimah
  • Tujuan Pembelajaran
  • Prasyarat Pembelajaran
  • Persiapan & Pendahuluan
    • Tools Yang Dibutuhkan
    • Cara Kerja Internet: Bagaimana Website Sampai ke Pengguna
    • Web Statis & Dinamis
    • Peranan Web Server & Web Browser
    • Anatomi Website (HTML, CSS, JavaScript)
    • Referensi Tambahan
  • Belajar HTML
    • Pengenalan HTML
    • Elemen, Tag, dan Atribut
    • Strukur Dasar HTML
    • Menjalankan File HTML di Browser
    • Semantic HTML
    • Tag Dasar HTML
      • Tag Heading (h1-h6)
      • Tag Paragraf (p)
      • Tag Untuk Pemformatan Teks Dasar
      • Tag Anchor/Link (a)
      • Tag Image (img)
      • Tag List (ul, ol, li)
      • Tag Table (table)
      • Tag Form (form, input, select, textarea)
      • Tag Div
      • Tag Audio & Video
      • iframe
      • Tag Untuk Citation, Quotation dan Definisi
      • Tag Untuk Hasil Kode Komputer
    • Simbol/Karakter Khusus
  • Belajar CSS
    • Pengenalan CSS
    • Menambahkan CSS ke HTML
    • Selektor CSS
    • Properti CSS
      • Teks Formatting
      • Warna dan Background
      • Pengenalan Box Model
      • Box Model: Konten
      • Box Model: Padding dan Margin
      • Box Model: Border
      • Box Shadow
      • Box Sizing
      • Positioning
      • Display
      • Pengenalan Flexbox
      • Flexbox: Properti Pada Container
      • Flexbox: Properti Item
      • Flexbox: Gap
      • Pengenalan Grid
      • Grid: Grid Struktur
      • Grid: Gap
      • Grid: Alignment
      • Grid: Grid Auto Flow
      • Grid: Item Placment
      • Grid: Functions in Grid Layout
    • Media Queries Untuk Responsifitas Pada Website
    • Media Queries: Media Types
    • Media Queries: Media Features
  • Belajar JavaScript
    • Pengenalan JavaScript
    • Menghubungkan JavaScript ke HTML
    • Variable
    • Tipe Data
    • Operator & Ekspresi
    • Perkondisian
    • Perulangan
    • Fungsi
    • Debugging
    • JavaScript BOM (browser Object Model)
      • Pengenalan JavaScript BOM
      • Akses ke Objek Window
      • Akses ke Objek Document
      • Akses Ke Navigator Object
      • Akses ke Screen Object
      • Akses ke Histori Object
    • JavaScript DOM (Document Object Model)
      • Pengenalan JavaScript DOM
      • Menarget Element HTML
      • Menambah, Menghapus, dan Mengedit Element
    • Events Handler
      • Pengenalan Event Handler Untuk Interaktifitas
      • Windows Events
      • Form Events
      • Keyboard Events
      • Clipboard Events
      • Mouse Events
    • Web Storage
      • Pengenalan Web Storage
      • Local Storage
      • Session Storage
  • Framework CSS
    • Pengenalan Framework CSS (Bootstrap)
    • Menambahkan Bootstrap ke Project
    • Penggunaan Utility Classes
    • Penggunaan Komponen Bootstrap
    • Customizing Bootstrap
    • Responsive dengan Bootstrap
  • Belajar Figma Untuk Slicing
    • Pengenalan dan Peran Figma
    • Membuat Desain Website
    • Melakukan Slicing
  • Pengenalan Framework FrontEnd
  • Hosting (Web Statis)
Powered by GitBook
On this page
  1. Persiapan & Pendahuluan

Anatomi Website (HTML, CSS, JavaScript)

Anatomi Website (HTML, CSS, JavaScript)

Sebuah website terdiri dari tiga komponen utama: HTML, CSS, dan JavaScript. Berikut adalah penjelasan singkat tentang peran masing-masing komponen dalam anatomi sebuah website:

  1. HTML (Hypertext Markup Language):

    • HTML adalah bahasa markah yang digunakan untuk membuat struktur dasar sebuah halaman web.

    • HTML mengatur konten teks, gambar, video, link, dan elemen-elemen lainnya menjadi sebuah struktur yang terorganisir.

    • Struktur HTML terdiri dari berbagai elemen, termasuk tag pembuka dan penutup yang menandai bagian-bagian berbeda dari halaman web.

    • Contoh elemen HTML termasuk <html>, <head>, <title>, <body>, <div>, <p>, <img>, dan lainnya.

  2. CSS (Cascading Style Sheets):

    • CSS digunakan untuk mengatur tampilan dan gaya dari elemen-elemen yang ditampilkan di dalam halaman web.

    • Dengan CSS, Anda dapat mengontrol warna, font, ukuran, posisi, dan tata letak dari elemen-elemen HTML.

    • CSS memungkinkan desainer web untuk membuat halaman web yang menarik, estetis, dan konsisten secara visual.

    • Contoh properti CSS termasuk color, font-size, margin, padding, background-color, dan lainnya.

  3. JavaScript:

    • JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas dan dinamisme ke dalam halaman web.

    • Dengan JavaScript, Anda dapat menangani peristiwa, membuat animasi, memanipulasi elemen HTML, dan berinteraksi dengan pengguna.

    • JavaScript juga memungkinkan komunikasi dengan server untuk mengambil atau mengirim data tanpa harus me-refresh halaman.

    • Contoh fitur JavaScript termasuk validasi formulir, slideshow, menu dropdown, efek transisi, dan lainnya.

Ketiga komponen ini bekerja bersama-sama untuk menciptakan pengalaman web yang lengkap dan responsif bagi pengguna. HTML digunakan untuk membuat struktur konten, CSS digunakan untuk mengatur tampilan dan gaya, sementara JavaScript digunakan untuk menambahkan interaktivitas dan fungsi dinamis ke dalam halaman web. Dengan kombinasi ini, pengembang web dapat menciptakan website yang menarik, fungsional, dan sesuai dengan kebutuhan pengguna.

PreviousPeranan Web Server & Web BrowserNextReferensi Tambahan

Last updated 1 year ago