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:
- JavaScript membaca isi input
- HTML membuat elemen pesan baru di layar
- 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
0 komentar: