Skip to content

Beginner 1 HTML dan CSS

Jump to bottom Edit New page
Muhammad Arif Faizin edited this page Mar 15, 2024 · 1 revision

Apa itu HTML, CSS, Javascript

Belajar HTML, CSS, dan JavaScript (JS) adalah langkah awal yang fantastis untuk memasuki dunia yang menarik ini. Ketiga bahasa ini bekerja bersama untuk membangun fondasi halaman web:

Ilustrasi analogi

  • HTML (HyperText Markup Language): Ibarat batu bata untuk membangun rumah, HTML menyediakan struktur dasar halaman web. Ia menggunakan tag untuk mendefinisikan elemen-elemen konten seperti paragraf, heading, gambar, dan lain-lain.

  • CSS (Cascading Style Sheets): Mirip seperti cat dan perabotan yang mempercantik rumah, CSS berfungsi untuk mengatur tampilan halaman web. Ia menentukan warna, font, layout, dan elemen visual lainnya.

  • JavaScript (JS): Berperan seperti sistem listrik yang membuat rumah berfungsi, JS menambahkan interaktivitas dan dinamisme ke halaman web. Ia memungkinkan elemen web untuk bereaksi terhadap tindakan pengguna dan menjalankan berbagai fungsi.

Yang Perlu disiapkan

  • Editor Teks: Pilih editor teks yang nyaman untuk Anda gunakan. Beberapa pilihan populer termasuk Visual Studio Code, Sublime Text, Atom, atau Notepad++ (untuk Windows).
  • Web Browser: Anda perlu beberapa web browser untuk menguji tampilan dan responsifitas situs web Anda. Paling tidak, instal Google Chrome dan Mozilla Firefox. Saat mengembangkan, pastikan untuk memeriksa tampilan di beberapa browser yang berbeda.

Video tutorial instalasi kode editor Visual Studio Code : https://youtu.be/2I3wZ8mlT0E?si=Js5UYgpWorQfnPzO

HTML

HTML atau kepanjangan dari HyperText Markup Language adalah bahasa markup standar yang digunakan untuk membangun struktur halaman web.

Mirip seperti kerangka bangunan, HTML tidak langsung menentukan tampilan visual, melainkan menyediakan kerangka dasar konten yang nantinya akan dibaca dan ditampilkan oleh web browser.

HTML menggunakan tag, yang merupakan instruksi khusus diapit oleh kurung sudut (< dan >), untuk mendefinisikan elemen-elemen.

1. Elemen Struktur

Konstruksi dasar sebuah halaman HTML

html

Berikut beberapa jenis elemen HTML yang umum digunakan:

  • <html> : Elemen root yang menandakan awal dan akhir dokumen HTML.
  • <head> : Berisi informasi tentang halaman web, seperti judul dan meta data, namun tidak ditampilkan di browser.
  • <body> : Berisi konten utama halaman web yang akan ditampilkan di browser.

2. Elemen Konten

  • <h1> - <h6>: Elemen untuk judul dengan berbagai ukuran (h1 terbesar, h6 terkecil)
  • <p> : Mendefinisikan sebuah paragraf.
  • <br>: Menambahkan baris baru (line break).
  • <b> dan <i>: Memformat teks menjadi tebal dan miring (sekarang lebih disarankan menggunakan tag <span> dengan style atribut).
  • <ul> dan <ol> : Membuat daftar tidak berurut (unordered list) dan berurut (ordered list).
  • <table> : Mendefinisikan tabel dengan baris dan kolom.
  • <img> : Menampilkan gambar.
  • <a> : Mendefinisikan link (tautan) ke halaman web lain atau sumber lainnya.

3. Elemen Formulir:

  • <form> : Mendefinisikan formulir untuk mengumpulkan input pengguna. - <input> : Elemen input seperti text box, password field, checkbox, dan lain-lain.
  • <button>: Mendefinisikan tombol untuk submit formulir atau menjalankan aksi tertentu.

4. Elemen Multimedia:

  • <video> : Menampilkan video.
  • <audio>: Menampilkan audio.

Ini hanyalah sebagian kecil dari elemen-elemen HTML yang ada. Bahasa ini memiliki banyak sekali elemen untuk berbagai keperluan.

Dalam HTML, setiap elemen umumnya memiliki tag pembuka dan tag penutup. Tag pembuka diawali dengan < dan diakhiri dengan >, sedangkan tag penutup diawali dengan </ dan diakhiri dengan >

<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>

Contoh pengorganisasian konten dalam halaman HTML page

Link belajar HTML: https://www.w3schools.com/html/

CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengendalikan tampilan dan presentasi dari dokumen web yang ditulis dengan HTML atau XML.

Mirip seperti halnya kita mengatur gaya busana dan dekorasi rumah, CSS memungkinkan kita untuk menentukan warna, font, ukuran, layout, dan berbagai aspek visual lainnya dari halaman web.

Menulis aturan styling

styling

Selector CSS: Memilih Elemen untuk Di-Style Selector CSS adalah pola khusus yang digunakan untuk memilih elemen tertentu atau kelompok elemen dalam dokumen HTML yang ingin Anda terapkan gaya menggunakan CSS. Dengan selector, Anda dapat menentukan elemen mana yang akan diubah tampilannya, seperti warna, font, ukuran, atau layout.

Jenis-jenis Selector:

  1. Selector berdasarkan tag (type selector):

    • Memilih elemen berdasarkan tag HTML mereka. Contoh: p untuk memilih semua paragraf, h1 untuk memilih semua heading level 1.

  2. Selector berdasarkan class:

    • Memilih elemen yang memiliki class tertentu. Contoh: .highlight untuk memilih semua elemen dengan class "highlight". Class diawali dengan titik (.).

  3. Selector berdasarkan id:

    • Memilih elemen yang memiliki id unik. Contoh: #banner untuk memilih elemen dengan id "banner". Id diawali dengan tanda pagar (#). Harap dicatat, setiap id harus unik di dalam dokumen HTML.

  4. Descendant selector:

    • Memilih elemen berdasarkan posisinya di dalam struktur halaman. Contoh: h1 p untuk memilih semua paragraf yang merupakan anak dari elemen h1.

  5. Universal selector:

    • Memilih semua elemen (tidak disarankan untuk digunakan karena kurang spesifik dan dapat memengaruhi kinerja). Contoh: *.

Contoh-contoh Styling CSS

Berikut beberapa contoh untuk menunjukkan berbagai macam style yang dapat diterapkan menggunakan CSS:

1. Mengubah warna dan ukuran font:

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

p {
  color: #666;
  font-size: 14px;
}

2. Menambahkan background dan border:

.box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

3. Membuat layout dengan flexbox:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
}

4. Animasi sederhana ketika hover:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #2980b9;
}

5. Membuat layout responsif:

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    flex-direction: column;
  }

  .item {
    flex: none;
  }
}

Tips:

  • Lakukan eksperimen dengan berbagai properti dan nilai CSS untuk melihat efeknya pada elemen yang dipilih.
  • Gunakan browser developer tools untuk membantu melihat dan memodifikasi style CSS secara langsung.
  • Cari inspirasi dari website lain yang memiliki desain menarik dan pelajari bagaimana mereka menggunakan CSS.

Menerapkan styling CSS ke HTML

Ada tiga cara umum untuk menerapkan styling CSS ke dalam file HTML:

1. Inline Styles:

  • Gaya diterapkan langsung di dalam tag HTML menggunakan atribut style.

Contoh:

<p style="color: red; font-weight: bold;">This text is red and bold.</p>
  • Kelebihan: Mudah digunakan untuk gaya unik pada elemen tertentu.
  • Kekurangan: Code menjadi tidak terorganisir dan sulit dimaintain, tidak disarankan untuk penggunaan dalam skala besar.

2. Internal Styles:

  • Gaya ditulis di dalam tag <style> yang ditempatkan di dalam tag <head> file HTML Anda.

Contoh:

<head>
  <style>
    p {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This text is red and bold.</p>
</body>
  • Kelebihan: Lebih terorganisir daripada inline styles, cocok untuk gaya yang diterapkan ke beberapa elemen dalam file HTML yang sama.
  • Kekurangan: Gaya hanya berlaku untuk file HTML tersebut, tidak bisa digunakan berulang kali di halaman web lain.

3. External Stylesheets:

  • Gaya ditulis dalam file terpisah dengan ekstensi .css.
  • File tersebut kemudian dihubungkan ke file HTML menggunakan tag <link> di dalam tag <head>.

Contoh:

File HTML (index.html):

<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <p>This text will be styled based on the rules in style.css.</p>
</body>

File CSS (style.css):

p {
  color: red;
  font-weight: bold;
}
  • Kelebihan: Metode yang paling disarankan, gaya dapat digunakan kembali di banyak file HTML yang berbeda, membuat code lebih terorganisir dan mudah dimaintain.
  • Kekurangan: Membutuhkan file tambahan, menambah sedikit kompleksitas.

Link belajar CSS: https://www.w3schools.com/css/

Javascript

1. Pengenalan JavaScript:

  • Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. JavaScript memungkinkan Anda untuk menambahkan animasi, validasi formulir, dan interaksi pengguna ke website Anda.

  • Sejarah singkat JavaScript:

JavaScript dibuat pada tahun 1995 oleh Brendan Eich di Netscape Communications.

  • Kegunaan JavaScript:

JavaScript digunakan untuk:

* **Menambahkan animasi dan efek**
* **Melakukan validasi formulir**
* **Menciptakan interaksi pengguna**
* **Membuat aplikasi web**

  • Contoh penggunaan JavaScript:

    • Animasi: Anda dapat menggunakan JavaScript untuk membuat animasi pada website Anda, seperti animasi loading spinner.
    • Validasi formulir: Anda dapat menggunakan JavaScript untuk memastikan bahwa pengguna memasukkan data yang benar dalam formulir.
    • Interaksi pengguna: Anda dapat menggunakan JavaScript untuk membuat website Anda lebih interaktif, seperti tombol yang berubah warna saat diklik.

2. Dasar-dasar Pemrograman:

  • Variabel dan tipe data

Variabel adalah tempat untuk menyimpan data. Tipe data adalah jenis data yang disimpan dalam variabel.

Contoh:

var nama = 'John Doe'; // Tipe data string
var usia = 20; // Tipe data number
var isMale = true; // Tipe data boolean
  • Operator matematika dan logika

Operator matematika digunakan untuk melakukan operasi matematika pada data. Operator logika digunakan untuk melakukan operasi logika pada data.

Contoh:

var x = 10 + 5; // Operasi penjumlahan
var y = 10 - 5; // Operasi pengurangan
var z = 10 * 5; // Operasi perkalian
var a = 10 / 5; // Operasi pembagian

var b = 10 > 5; // Operator logika "lebih besar dari"
var c = 10 < 5; // Operator logika "lebih kecil dari"
var d = 10 == 5; // Operator logika "sama dengan"
  • Struktur kontrol (if, else, for, while)

Struktur kontrol digunakan untuk mengontrol aliran program.

Contoh:

if (usia > 18) {
  // Jalankan kode ini jika usia lebih besar dari 18
} else {
  // Jalankan kode ini jika usia tidak lebih besar dari 18
}

for (var i = 0; i < 10; i++) {
  // Jalankan kode ini 10 kali
}

while (i < 10) {
  // Jalankan kode ini selama i kurang dari 10
  i++;
}
  • Fungsi

Fungsi adalah blok kode yang dapat digunakan kembali.

Contoh:

function sayHello() {
  console.log('Hello, world!');
}

sayHello(); // Memanggil fungsi

3. JavaScript di Web: DOM dan Event Handling Untuk Membangun Interaktivitas di Web

DOM (Document Object Model) dan Event Handling adalah konsep fundamental dalam pengembangan web dengan JavaScript yang memungkinkan Anda membuat halaman web yang dinamis dan interaktif. Mari kita bahas keduanya secara detail:

1. DOM (Document Object Model):

DOM adalah representasi berjenjang berstruktur pohon dari sebuah halaman web. Ini memudahkan JavaScript untuk mengakses, memodifikasi, dan berinteraksi dengan elemen HTML, CSS, dan konten halaman.

  • Seperti Pohon Struktur: Bayangkan halaman web sebagai pohon, di mana elemen teratas adalah HTML dan elemen lain bersarang di dalamnya, membentuk struktur hierarki.
  • Akses Elemen: JavaScript menyediakan metode untuk mengakses elemen DOM tersebut, seperti getElementById, getElementsByTagName, querySelector, dan querySelectorAll.

2. Contoh Struktur DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh DOM</title>
  </head>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf.</p>
    <button>Klik Saya!</button>
  </body>
</html>
  • Elemen teratas adalah <html>.
  • Elemen <h1>, <p>, dan <button> adalah elemen turunan dari <body>, dan seterusnya.

3. Akses Elemen DOM (Contoh):

const h1 = document.getElementById('judul'); // Akses elemen h1 dengan ID "judul"
const paragraphs = document.getElementsByTagName('p'); // Dapatkan semua elemen p
const button = document.querySelector('button'); // Cari elemen button pertama

4. Manipulasi Elemen DOM:

Setelah mengakses elemen, Anda dapat memanipulasinya dengan berbagai cara:

  • innerHTML: Mengubah konten HTML di dalam elemen.
  • innerText: Mengubah teks di dalam elemen.
  • style. properti: Mengubah gaya elemen (misalnya, style.color = "red").
  • classList: Menambahkan, menghapus, atau mengubah class pada elemen.

5. Contoh Manipulasi Elemen DOM:

h1.innerHTML = 'Judul Baru'; // Ubah konten h1
paragraphs[0].innerText = 'Paragraf ini telah diubah'; // Ubah teks paragraf pertama
button.style.backgroundColor = 'blue'; // Ubah warna background button
button.classList.add('active'); // Tambahkan class "active" ke button

6. Event Handling:

Event Handling adalah proses menangani tindakan pengguna dan peristiwa yang terjadi pada halaman web. JavaScript memungkinkan Anda untuk "mendengarkan" peristiwa ini dan menjalankan kode tertentu sebagai tanggapan, membuat halaman web interaktif.

7. Menambahkan Event Listener:

Untuk mendengarkan suatu event, Anda dapat menggunakan method addEventListener pada elemen DOM.

Syntax: element.addEventListener(event, function, useCapture)

  • event: Nama event (misalnya, "click", "mouseover", "submit").
  • function: Fungsi yang akan dijalankan ketika event terjadi.
  • useCapture (opsional): Boolean yang menentukan apakah event listener dijalankan dalam capture phase atau bubbling phase (biasanya diabaikan).

8. Contoh Event Handling:

<button id="myButton">Klik Saya!</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function () {
    alert('Button diklik!');
  });
</script>

Penjelasan:

  • Kode JavaScript pertama kali mendapatkan elemen button dengan getElementById.
  • Kemudian, method addEventListener digunakan untuk "mendengarkan" event "click" pada button.
  • Ketika button diklik, fungsi anonim yang didefinisikan di dalam addEventListener akan dijalankan, menampilkan alert "Button diklik!".

9. Event Umum Digunakan:

  • click: Ketika elemen diklik.
  • mouseover: Ketika mouse berada di atas elemen.
  • mouseout: Ketika mouse keluar dari elemen.
  • submit: Ketika formulir dikirimkan.
  • keydown: Ketika tombol keyboard ditekan.
  • keyup: Ketika tombol keyboard dilepas.
  • dan masih banyak lagi.

10. Contoh Tambahan:

<p id="myText">Ini adalah paragraf.</p>

<script>
  const text = document.getElementById('myText');

  text.addEventListener('mouseover', function () {
    text.style.color = 'red';
  });

  text.addEventListener('mouseout', function () {
    text.style.color = 'black';
  });
</script>

Link belajar Javascript: https://www.w3schools.com/js/

Add a custom footer

Navigasi

Clone this wiki locally