Coding Library
HTML
- HTML singkatan dari HyperText Markup Language.
- Merupakan bahasa markup yang digunakan untuk membuat struktur dasar halaman web.
- Semua elemen HTML diapit oleh tag.
- Contoh tag:
<p>
untuk paragraf,<h1>
untuk judul utama,<a>
untuk tautan.
- Setiap dokumen HTML dimulai dengan tag
<html>
dan diakhiri dengan</html>
. - Bagian kepala dokumen ditandai dengan tag
<head>
, sedangkan isi dokumen ditandai dengan tag<body>
.
Tag <title>
digunakan untuk menentukan judul halaman yang ditampilkan di bilah judul browser.
- Tag
<p>
digunakan untuk mendefinisikan paragraf. - Tag
<h1>
hingga<h6>
digunakan untuk judul dengan tingkat kepentingan yang berbeda.
- Tag
<a>
digunakan untuk membuat tautan. href
adalah atribut yang menentukan URL tautan.
- Tag
<img>
digunakan untuk menyisipkan gambar. - Atribut
src
menunjukkan lokasi gambar.
- Tag
<ul>
untuk daftar tak terurut. - Tag
<ol>
untuk daftar terurut. - Tag
<li>
untuk setiap elemen dalam daftar.
- Tag
<table>
digunakan untuk membuat tabel. - Tag
<tr>
untuk baris,<td>
untuk sel data, dan<th>
untuk sel kepala tabel.
- Tag
<form>
digunakan untuk membuat formulir. - Berbagai elemen formulir seperti
<input>
,<textarea>
, dan<select>
digunakan untuk mengumpulkan informasi dari pengguna.
Elemen HTML dapat memiliki atribut seperti class
, id
, dan style
untuk memberikan informasi tambahan atau gaya.
Komentar ditulis dengan menggunakan <!--
untuk awal komentar dan -->
untuk akhir komentar.
- Dokumen HTML harus valid agar dapat diinterpretasikan dengan benar oleh browser.
- Alat seperti W3C Validator dapat digunakan untuk memeriksa validitas kode HTML.
CSS
- CSS digunakan untuk memisahkan struktur (HTML) dan presentasi (styling) dari suatu halaman web.
- Memungkinkan kontrol yang lebih baik terhadap tata letak, warna, font, dan elemen desain lainnya.
- Selektor digunakan untuk memilih elemen HTML yang akan diberi gaya.
- Contoh selektor:
h1
untuk memilih semua elemen heading level 1,.class
untuk memilih elemen dengan class tertentu,#id
untuk memilih elemen dengan id tertentu.
- Setiap aturan CSS terdiri dari properti dan nilai.
- Contoh:
h1 {
color: blue;
font-size: 24px;
}
Di sini, color
dan font-size
adalah properti, sedangkan blue
dan 24px
adalah nilai.
- Setiap elemen HTML dapat dianggap sebagai “kotak” dengan properti seperti lebar, tinggi, margin, padding, dan batas.
- CSS memungkinkan kontrol mendetail terhadap model kotak ini.
- Konsep kaskade merujuk pada cara aturan CSS diterapkan dan diuraikan berdasarkan prioritas dan spesifisitas.
- Warisan mengacu pada kemampuan elemen anak untuk mewarisi properti tertentu dari elemen induknya.
- CSS dapat digunakan untuk membuat desain responsif, yang menyesuaikan tata letak dan gaya berdasarkan ukuran layar perangkat pengguna.
- Media queries digunakan untuk mengatur aturan CSS berdasarkan resolusi dan karakteristik perangkat.
- CSS menyediakan kemampuan untuk membuat animasi dan transisi tanpa perlu JavaScript.
- Properti seperti
transition
dananimation
digunakan untuk menciptakan efek visual.
- Sass dan Less adalah preprocessor CSS yang memperluas fungsionalitas CSS dengan menambahkan fitur seperti variabel, fungsi, dan nesting.
- Bootstrap, Foundation, dan Materialize adalah contoh framework CSS yang menyediakan komponen dan gaya bawaan untuk mempercepat pengembangan web.
CSS merupakan komponen kunci dalam pengembangan web modern karena memberikan fleksibilitas dan kontrol yang tinggi terhadap presentasi halaman web.
Contoh Halaman Web
Selamat Datang di Halaman Web Kami
Tentang Kami
Ini adalah contoh halaman web sederhana dengan beberapa bagian dasar.
Konten Utama
Ini adalah bagian utama dari halaman web. Anda dapat menambahkan lebih banyak konten di sini.
Penjelasan:
<!DOCTYPE html>
: Menentukan jenis dokumen HTML.<html lang="en">
: Memulai elemen HTML, dengan menentukan atribut bahasa.<head>
: Berisi meta-informasi tentang dokumen seperti karakter set, viewport, dan judul halaman.<meta charset="UTF-8">
: Menentukan karakter set dokumen sebagai UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Mendefinisikan tampilan halaman sesuai dengan lebar perangkat dan tingkat zoom awal.<title>Contoh Halaman Web</title>
: Menentukan judul halaman.<style>
: Bagian ini digunakan untuk menambahkan CSS internal ke dalam dokumen.<body>
: Memulai bagian tubuh dokumen yang berisi konten yang akan ditampilkan di halaman web.<header>
: Bagian kepala halaman dengan judul utama.<section>
: Bagian-bagian konten halaman.<footer>
: Bagian bawah halaman dengan informasi tambahan atau hak cipta.
CSS di dalam tag <style>
mengatur tata letak dan gaya halaman web, seperti warna latar belakang, jenis huruf, dan tata letak header dan footer. Semua ini memberikan tampilan yang bersih dan terorganisir pada halaman web. Jika ada pertanyaan lebih lanjut atau hal lain yang ingin dijelaskan, beri tahu saya!
Javascript
- JavaScript adalah bahasa pemrograman yang umumnya digunakan untuk membuat interaksi dinamis pada halaman web.
- Merupakan bagian integral dari pengembangan web modern.
Manipulasi DOM: JavaScript digunakan untuk memanipulasi Dokumen Objek Model (DOM), yang mewakili struktur halaman web. Ini memungkinkan perubahan dinamis terhadap elemen dan konten HTML.
Interaksi Pengguna: Menanggapi tindakan pengguna seperti klik, hover, atau input. Ini memungkinkan pembuatan antarmuka pengguna yang responsif.
Kontrol Alur Program: Penggunaan kondisional (if-else), perulangan (loop), dan fungsi untuk mengendalikan alur eksekusi program.
Asinkronus Programming: Mendukung pemrograman asinkronus dengan menggunakan callback, promise, dan async/await untuk mengatasi operasi yang memerlukan waktu seperti pengambilan data dari server.
- JavaScript dapat disematkan langsung dalam tag HTML menggunakan tag
<script>
. - Juga dapat ditempatkan di file eksternal dan dihubungkan ke halaman HTML.
<script>
// Kode JavaScript di sini
</script>
- Variabel digunakan untuk menyimpan nilai.
- Tipe data melibatkan string, number, boolean, array, object, dll.
Contoh :
let nama = "John";
let umur = 25;
let isActive = true;
let daftarAngka = [1, 2, 3, 4, 5];
let person = { nama: "John", umur: 25 };
- Blok kode yang dapat dipanggil dengan nama tertentu.
- Dapat mengambil parameter dan mengembalikan nilai.
Contoh:
function tambah(angka1, angka2) {
return angka1 + angka2;
}
- document.getElementById(“tombol“).addEventListener(“click“, function() {
alert(“Tombol diklik!”);
});
- Memungkinkan komunikasi dengan server tanpa harus me-refresh halaman web.
- Digunakan untuk pengambilan dan pengiriman data.
- Beberapa library populer seperti jQuery dan framework seperti React, Angular, dan Vue.js memperluas fungsionalitas JavaScript dan mempermudah pengembangan aplikasi web.
JavaScript adalah bahasa yang sangat fleksibel dan kuat, memungkinkan pengembang untuk membuat aplikasi web yang dinamis dan interaktif.
Berikut adalah contoh Code untuk membuat Dashboard sederhana
![](https://ruanglogika.com/wp-content/uploads/2023/11/Screen-Shot-2023-11-16-at-12.37.25-1024x240.png)
code dibawah adalah representasi dari dashboard yang anda lihat di atas, anda dapat menyalin kode tersebut dan share ke teman-teman anda!
Dashboard
Card 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 3
Some quick example text to build on the card title and make up the bulk of the card's content.
Dashboard Side Navbar
Dashboard
Dashboard
Card 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 3
Some quick example text to build on the card title and make up the bulk of the card's content.
![](https://ruanglogika.com/wp-content/uploads/2023/11/Screen-Shot-2023-11-16-at-12.52.18-1024x355.png)
Gradient Card
Dashboard
Dashboard
Card 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 3
Some quick example text to build on the card title and make up the bulk of the card's content.
![](https://ruanglogika.com/wp-content/uploads/2023/11/Screen-Shot-2023-11-16-at-12.52.47-1024x337.png)
Dashboard Analytic
Dashboard
Dashboard
Card 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Card 3
Some quick example text to build on the card title and make up the bulk of the card's content.
![](https://ruanglogika.com/wp-content/uploads/2023/11/Screen-Shot-2023-11-16-at-12.50.35-1024x542.png)
Saya akan menjelaskan kode tersebut. Kode tersebut menggunakan HTML, CSS, dan JavaScript (murni, tanpa menggunakan ReactJS). Mari kita jelaskan bagian-bagian utama dari kode tersebut:
- HTML Structure:
– Struktur dasar HTML terdiri dari elemen-elemen seperti `<html>`, `<head>`, `<body>`, dan `<script>`.
– Kita memiliki beberapa `<div>` untuk menyusun tata letak, termasuk untuk card, chart-container, dan setiap chart individu. - Bootstrap:
– Kode menggunakan Bootstrap CSS untuk styling yang responsif dan modern.
– Bootstrap JS (Popper.js dan Bootstrap JS) digunakan untuk fitur-fitur tertentu dari Bootstrap seperti navbar dan komponen modal. - Chart Libraries:
– Kode menggunakan Chart.js dan Chart.js-radial-gauge untuk membuat grafik dan diagram. Chart.js digunakan untuk doughnut chart dan radar chart, sedangkan Chart.js-radial-gauge digunakan untuk speedometer chart. - CSS:
– Ada beberapa gaya CSS khusus, seperti warna latar belakang gradient untuk card dan beberapa gaya untuk mengatur tata letak chart. - JavaScript:
– Di bagian bawah, terdapat skrip JavaScript yang mencakup konfigurasi dan inisialisasi untuk setiap chart (doughnut, radar/pentagon, dan speedometer).
– Data dan opsi (options) untuk setiap chart didefinisikan di sini.
Kode tersebut adalah implementasi sederhana untuk membuat dashboard dengan card dan tiga jenis chart yang berbeda. Murni menggunakan HTML, CSS, dan JavaScript, bukan ReactJS. Jika ada bagian tertentu yang perlu dijelaskan lebih rinci atau jika ada pertanyaan tambahan, beri tahu saya!