Friday, August 29, 2025

Archive for 2025

Pengenalan HTML, CSS dan Javascript serta contoh hasil aplikasi

Syamsul Yadi 8/29/2025 06:58:00 PM Leave a Reply

Baca Juga

 Pengenalan Dasar HTML, CSS, dan JavaScript

 




1. Pendahuluan: Apa Itu Web?

 

Website adalah halaman digital yang dibuka di browser. Contoh: Google, YouTube, Instagram. Website dibangun dari tiga komponen utama: HTML (struktur), CSS (tampilan), dan JavaScript (fungsi/interaksi).

 

2. Pengenalan HTML (HyperText Markup Language)

 

HTML adalah bahasa markup yang digunakan untuk membangun struktur dasar halaman web. Ibaratnya, HTML adalah rangka bangunan yang menentukan letak teks, gambar, tombol, dll.

 

Contoh kode HTML:

 

<h1>Halo Dunia!</h1>

<p>Ini adalah paragraf.</p>

<img src='gambar.jpg' alt='Contoh Gambar'>

 

3. Pengenalan CSS (Cascading Style Sheets)

 

CSS adalah bahasa untuk mengatur tampilan halaman web seperti warna, ukuran, posisi, dan desain visual lainnya. Ibaratnya, CSS adalah makeup atau dekorasi dari rumah.

 

Contoh kode CSS:

 

h1 { color: blue; font-size: 36px; }

p { background-color: yellow; padding: 10px; }

 

4. Pengenalan JavaScript

 

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan logika ke dalam halaman web. Ibaratnya, JavaScript adalah otak atau mesin dari halaman web.

 

Contoh kode JavaScript:

 

function tampilkanPesan() { alert('Halo, Selamat Datang!'); } Contoh penggunaannya dalam HTML:

<button onclick='tampilkanPesan()'>Klik Saya</button>

 

5. Perbandingan HTML, CSS, dan JavaScript

 

HTML = struktur | CSS = tampilan | JavaScript = interaksi. Ketiganya saling melengkapi dalam membangun website modern.


Pertanyaan ?

Apakah HTML itu Adalah Bahasa pemograman?

Tidak, HTML bukan bahasa pemrograman.


HTML adalah bahasa markup, bukan bahasa pemrograman.

  • Adalah bahasa markup yang digunakan untuk membuat struktur dan isi halaman web.
  • HTML tidak bisa melakukan perhitungan, logika IF, pengulangan (loop), atau menyimpan data — kemampuan yang biasanya dimiliki oleh bahasa pemrograman.
  • HTML hanya menyusun: "ini paragraf", "ini gambar", "ini tombol", dan seterusnya.

 

Apa Itu Bahasa Pemrograman?

Bahasa pemrograman memiliki kemampuan seperti:

  • Logika (if, else)
  • Perulangan (for, while)
  • Variabel & fungsi
  • Pengambilan keputusan otomatis

Contohnya: JavaScript, Python, PHP, Java, C++

 

Apakah Javascript Bahasa pemograman?

Iya, Javascript Adalah Bahasa pemograman

 

ANALOGI

Ibarat bangunan:

  • HTML adalah kerangka & isi ruangan
  • CSS adalah cat & dekorasi
  • JavaScript adalah listrik, pintu otomatis, dan mesin yang membuat rumah bisa berfungsi

 

Ilustrasi Cara Kerja (Dengan Bahasa Sederhana)

Bayangkan halaman ini seperti:

  • HTML = papan tulis
  • CSS = spidol warna-warni untuk menghias tulisan di papan
  • JavaScript = tangan kamu yang menulis dan menghapus pesan secara dinamis

 

Ketika User 1 mengirim pesan:

  1. JavaScript membaca isi input
  2. HTML membuat elemen pesan baru di layar
  3. CSS menghias elemen tersebut agar tampil bagus

Kesimpulan :

 

Bahasa

Termasuk Bahasa Pemrograman?

Fungsi

HTML

❌ Bukan

Struktur halaman

CSS

❌ Bukan

Tampilan/desain

JavaScript

✅ Ya

Logika, aksi, interaksi

 

MASUK SESI PRAKTEK

Tools :

1.    Sublime Text (https://www.sublimetext.com/)

2.    Browser

·                 Chrome : https://chromeenterprise.google/intl/id_id/download/

·                 Firefox : https://www.firefox.com/id/



Metode pengembangan sistem :




URUTAN MEMBUAT APLIKASI SEDERHANA

Langkah

Penjelasan

1. Pahami Tujuan

Tentukan apa yang ingin dibuat

2. Rancang Tampilan

Buat sketsa atau desain UI

3. HTML

Buat kerangka struktur

4. CSS

Percantik tampilan

5. JavaScript

Tambahkan fungsi & interaksi

6. Uji

Cek tampilan & fitur

7. Kembangkan

Tambahkan fitur lanjutan

Tujuan :

Membuat aplikasi chat sederhana dengan HTML

 

Rancang Tampilan :




Langkah selanjutnya buat folder bacarita.

Berisi :

·         Index.html

·         Style.css

·         Script.js 

Index.html

 

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>BACARITA</title>

  <link rel="stylesheet" href="style.css" />

</head>

<body>

  <div class="container">

    <h1 class="title">BACARITA</h1>

 

    <div class="user-switch">

      <span>Chat Sebagai: </span>

      <button id="toggle-user" onclick="toggleUser()">User 1</button>

    </div>

 

    <div class="chat-box" id="chat-box">

      <!-- Pesan akan ditambahkan di sini -->

    </div>

 

    <div class="input-section">

      <input type="text" id="chat-input" placeholder="Ketik disini....." />

      <button onclick="sendMessage()">KIRIM</button>

    </div>

  </div>

 

  <script src="script.js"></script>

</body>

</html>

 

Style.css

 

:root {

  --ungu: #6d2aff;

  --biru: #003f8c;

  --abu: #f2f2f2;

}

 

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

body {

  font-family: 'Segoe UI', sans-serif;

  background: white;

  color: #333;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

}

 

.container {

  width: 100%;

  max-width: 600px;

}

 

.title {

  text-align: center;

  font-size: 36px;

  margin-bottom: 20px;

  color: var(--ungu);

}

 

.chat-box {

  background: #fff;

  border-radius: 12px;

  padding: 10px;

  height: 400px;

  overflow-y: auto;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  margin-bottom: 20px;

}

 

/* Chat bubble style */

.chat {

  display: flex;

  margin: 15px 0;

  align-items: flex-start;

}

 

.chat.left {

  flex-direction: row;

}

 

.chat.right {

  flex-direction: row-reverse;

}

 

.avatar {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0 10px;

}

 

.avatar-icon {

  width: 40px;

  height: 40px;

  background-color: #ddd;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  font-weight: bold;

  font-size: 18px;

}

 

.user-name {

  font-size: 12px;

  margin-top: 5px;

  color: var(--biru);

  font-weight: bold;

}

 

.status {

  font-size: 11px;

  color: green;

}

 

.bubble {

  max-width: 70%;

  padding: 12px;

  border-radius: 12px;

  position: relative;

  word-wrap: break-word;

  font-size: 15px;

}

 

.left .bubble {

  background: none;

  border: 2px solid var(--ungu);

  color: #333;

}

 

.right .bubble {

  background: none;

  border: 2px solid var(--biru);

  color: #333;

}

 

.timestamp {

  font-size: 11px;

  text-align: right;

  color: #999;

  margin-top: 5px;

}

 

/* Input section */

.input-section {

  display: flex;

  align-items: center;

  gap: 10px;

}

 

#chat-input {

  flex: 1;

  padding: 12px;

  border-radius: 25px;

  border: 2px solid var(--ungu);

  font-size: 14px;

  outline: none;

}

 

button {

  background: var(--ungu);

  color: white;

  border: none;

  padding: 12px 20px;

  border-radius: 50%;

  cursor: pointer;

  font-weight: bold;

  transition: background 0.3s;

}

 

button:hover {

  background: #4e1eb3;

}

 

/* Responsif */

@media (max-width: 600px) {

  .bubble {

    max-width: 85%;

  }

 

  .title {

    font-size: 28px;

  }

 

  button {

    padding: 10px 16px;

    font-size: 12px;

  }

}

 

.user-switch {

  text-align: center;

  margin-bottom: 15px;

  font-size: 14px;

}

 

.user-switch button {

  background: var(--biru);

  color: white;

  padding: 6px 14px;

  border: none;

  border-radius: 15px;

  margin-left: 8px;

  cursor: pointer;

  font-weight: bold;

}

 

.user-switch button:hover {

  background: #002b62;

}

 

 Script.js

let currentUser = "User 1";

 

function toggleUser() {

  currentUser = currentUser === "User 1" ? "User 2" : "User 1";

  document.getElementById("toggle-user").textContent = currentUser;

}

 

function sendMessage() {

  const input = document.getElementById("chat-input");

  const chatBox = document.getElementById("chat-box");

  const messageText = input.value.trim();

 

  if (messageText === "") return;

 

  // Tentukan posisi dan style berdasarkan user

  const isUser1 = currentUser === "User 1";

  const position = isUser1 ? "right" : "left";

  const bubbleColor = isUser1 ? "#003f8c" : "#6d2aff";

 

  const chat = document.createElement("div");

  chat.className = `chat ${position}`;

 

  const avatar = `

    <div class="avatar">

      <div class="avatar-icon" style="background-color: ${bubbleColor};">👤</div>

      <div class="user-name">${currentUser}</div>

      <div class="status">🟢 Online</div>

    </div>

  `;

 

  const bubble = `

    <div class="bubble" style="border-color: ${bubbleColor};">

      ${messageText}

      <div class="timestamp">${getTimestamp()}</div>

    </div>

  `;

 

  chat.innerHTML = isUser1 ? avatar + bubble : avatar + bubble;

  chatBox.appendChild(chat);

  chatBox.scrollTop = chatBox.scrollHeight;

 

  input.value = "";

}

 

function getTimestamp() {

  return "1 menit yang lalu"; // Bisa diperluas dengan waktu nyata

}

Hasil

Klik 2 kali pada index.html



Pengembangan, silakan dapat mengembangkan menjadi lebih sempurna seperti :

 

·         Menjadi Dinamis.

·         Menggunakan database.

·         Menggunakan Bahasa pemograman yang mendukung.


Aplikasi Chat :

https://www.beebeep.net/download

                Download Materi :

                DOWNLOAD MATERI