Jurnal Perkuliahan (3) : HTML, CSS, Javascript

 Pentingnya Struktur dalam Sebuah Website

HTML, CSS, dan JavaScript merupakan tiga teknologi yang sangat penting dan saling berinteraksi dalam pembuatan website modern. Selain itu, ketiga teknologi ini dapat saling berinteraksi dalam sebuah halaman web. Misalnya, Anda dapat menggunakan JavaScript untuk menanggapi tindakan pengguna, seperti mengubah tampilan elemen HTML atau menerapkan animasi, dan Anda dapat menggunakan CSS untuk mendefinisikan bagaimana halaman web akan terlihat dalam kondisi tertentu. HTML bertindak sebagai struktur dasar yang menampung konten dan elemen-elemen lainnya. Berikut adalah peran masing-masing:

1. HTML (HyperText Markup Language)

HTML digunakan untuk struktur dasar dari sebuah halaman web. Dengan HTML, Anda mendefinisikan elemen-elemen seperti teks, gambar, tautan, dan bagian-bagian lainnya dalam halaman web. Ini memberi struktur dasar pada konten halaman web.

HTML (HyperText Markup Language) terdiri dari beberapa bagian yang digunakan untuk membangun struktur dasar sebuah halaman web. Berikut adalah beberapa bagian utama HTML:

- Elemen

Elemen HTML adalah bangunan dasar dari sebuah halaman web. Setiap elemen dimulai dengan tag pembuka, berisi konten, dan ditutup dengan tag penutup (kecuali beberapa elemen tertentu yang tidak memerlukan penutup). Contohnya, `<p>` adalah tag pembuka untuk paragraf dan `</p>` adalah tag penutup untuk paragraf.

- Tag Pembuka dan Penutup

Sebagian besar elemen HTML memiliki tag pembuka dan tag penutup. Tag pembuka dimulai dengan tanda `<` diikuti dengan nama elemen, sedangkan tag penutup dimulai dengan tanda `<` diikuti dengan garis miring (`/`) dan nama elemen. Contohnya, `<p>` adalah tag pembuka untuk paragraf dan `</p>` adalah tag penutup untuk paragraf.

- Atribut

Atribut memberikan informasi tambahan tentang elemen dan didefinisikan di dalam tag pembuka. Atribut biasanya terdiri dari nama atribut dan nilainya, dipisahkan oleh tanda sama dengan (`=`). Contohnya, dalam tag `<img src="gambar.jpg" alt="Gambar">`, `src` dan `alt` adalah atribut, dan `"gambar.jpg"` dan `"Gambar"` adalah nilainya.

- Elemen Berperebunan

Beberapa elemen HTML memungkinkan untuk memiliki anak-anak (elemen-elemen lainnya) di dalamnya. Misalnya, elemen `<ul>` (unordered list) dapat memiliki elemen-elemen `<li>` (list item) di dalamnya.

- Elemen Teks

Elemen-elemen teks seperti `<p>` (paragraf), `<h1>`-`<h6>` (heading), `<a>` (tautan), `<span>` (span), dan lainnya digunakan untuk menampilkan dan mengorganisir teks pada halaman web.

- Elemen Media

Elemen media seperti `<img>` (gambar), `<audio>` (audio), dan `<video>` (video) digunakan untuk menampilkan media pada halaman web.

- Elemen Formulir

Elemen formulir seperti `<form>`, `<input>`, `<textarea>`, `<select>`, dan lainnya digunakan untuk membuat formulir interaktif di halaman web.

- Elemen Tabel

Elemen tabel seperti `<table>`, `<tr>` (table row), `<td>` (table data), dan lainnya digunakan untuk membuat tabel di halaman web.

Ini hanya beberapa bagian utama HTML, dan masih ada banyak lagi elemen dan konsep yang bisa digunakan dalam pembuatan halaman web. Setiap elemen memiliki peran dan fungsi tertentu untuk membentuk struktur dan konten halaman web.

2. CSS (Cascading Style Sheets)

CSS digunakan untuk mengatur tampilan dan tata letak elemen-elemen HTML. Dengan CSS, Anda dapat mengatur warna, font, ukuran, dan posisi elemen-elemen tersebut. Ini memungkinkan Anda untuk membuat tampilan yang konsisten dan menarik untuk halaman web Anda.

CSS (Cascading Style Sheets) terdiri dari beberapa bagian yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen HTML dalam sebuah halaman web. Berikut adalah beberapa bagian utama CSS:

- Selektor

Selektor adalah bagian dari aturan CSS yang menentukan elemen mana yang akan diberikan gaya. Selektor bisa berupa nama elemen, kelas, ID, atribut, atau kombinasi dari semuanya. Contoh selektor umum termasuk `h1` untuk heading level 1, `.class` untuk kelas, dan `#id` untuk ID.

- Properti

Properti adalah bagian dari aturan CSS yang menentukan aspek tertentu dari tampilan elemen yang dipilih. Misalnya, `color`, `font-size`, `margin`, `padding`, dan `background-color` adalah beberapa properti umum yang digunakan untuk mengatur warna, ukuran, margin, padding, dan warna latar belakang sebuah elemen.

- Nilai

Nilai adalah nilai yang diberikan kepada properti tertentu. Misalnya, nilai `blue` atau `#FF0000` dapat diberikan kepada properti `color` untuk mengatur warna teks menjadi biru atau merah.

- Aturan CSS

Aturan CSS terdiri dari selektor dan satu atau lebih deklarasi properti-nilai yang dipisahkan oleh tanda titik koma (`;`). Aturan CSS digunakan untuk menghubungkan gaya dengan elemen HTML. Contoh aturan CSS adalah:

 

- Komentar

Komentar digunakan untuk menambahkan catatan atau penjelasan di dalam kode CSS. Komentar dimulai dengan tanda `/*` dan diakhiri dengan tanda `*/`. Komentar tidak akan diproses oleh browser dan hanya digunakan untuk dokumentasi atau alasan lainnya.

- Unit

Unit digunakan untuk menentukan ukuran, panjang, dan nilai lainnya dalam CSS. Beberapa unit umum termasuk piksel (`px`), persen (`%`), em (`em`), dan rem (`rem`). Unit digunakan untuk mengatur ukuran dan posisi elemen serta nilai-nilai properti lainnya.

- Pewarisan (Inheritance)

Pewarisan adalah konsep di mana properti tertentu dari elemen anak dapat mewarisi nilai dari elemen induknya jika tidak ada nilai yang ditetapkan untuk properti tersebut. Misalnya, jika sebuah paragraf (`<p>`) memiliki warna teks yang ditetapkan, maka teks di dalam elemen tersebut akan mengikuti warna tersebut kecuali jika diberikan nilai yang berbeda.

- Prioritas

Prioritas digunakan untuk menentukan urutan penentuan gaya jika ada aturan CSS yang bertentangan. Prioritas CSS ditentukan oleh jenis selektor, urutan penulisan, dan kekhususan. Misalnya, aturan CSS yang didefinisikan lebih spesifik (misalnya menggunakan ID daripada kelas) akan memiliki prioritas lebih tinggi.

3. JavaScript 

JavaScript memberikan interaktivitas pada halaman web. Dengan JavaScript, Anda dapat menambahkan efek animasi, validasi formulir, manipulasi DOM (Document Object Model), dan banyak lagi. Ini memungkinkan pengguna untuk berinteraksi dengan konten halaman web dan membuat pengalaman pengguna menjadi lebih dinamis.

JavaScript memiliki beberapa bagian penting yang bekerja sama untuk membuat halaman web interaktif. Berikut adalah beberapa bagian utama:

1. Variabel dan Tipe Data:
   Variabel digunakan untuk menyimpan nilai-nilai yang dapat digunakan nanti di dalam program Anda. JavaScript memiliki beberapa tipe data bawaan, seperti angka (numbers), string (teks), boolean (true/false), dan lain-lain. Dengan memahami tipe data, Anda dapat memastikan program Anda menangani informasi dengan benar.

2. Operator:
   Operator adalah simbol atau keyword yang digunakan untuk melakukan operasi pada data. JavaScript memiliki operator aritmatika (penjumlahan, pengurangan, dll), operator perbandingan (lebih besar dari, kurang dari, sama dengan), operator logika (AND, OR, NOT), dan lainnya. Operator membantu memanipulasi data dan mengontrol aliran program Anda.

3. Percabangan (Conditional Statements):
   Percabangan memungkinkan program Anda membuat keputusan berdasarkan kondisi tertentu. Instruksi if/else dan switch digunakan untuk menentukan blok kode mana yang akan dijalankan berdasarkan hasil evaluasi kondisi.

4. Looping:
   Looping digunakan untuk mengulangi blok kode tertentu beberapa kali. JavaScript memiliki beberapa jenis loop, seperti for loop dan while loop, yang memungkinkan Anda mengeksekusi kode secara berulang hingga kondisi tertentu terpenuhi.

5. Fungsi (Functions):
   Fungsi adalah blok kode yang dapat digunakan kembali. Fungsi menerima input (parameter), melakukan tugas tertentu, dan kemudian dapat mengembalikan nilai (output). Memecah program menjadi fungsi-fungsi yang lebih kecil membuat kode lebih terorganisir dan dapat digunakan kembali.

6. Object:
   Object adalah kumpulan properti (key-value pairs) yang digunakan untuk merepresentasikan data terstruktur. Object dapat digunakan untuk menyimpan informasi tentang entitas dunia nyata, seperti produk, pengguna, atau lainnya.

7. Array:
   Array adalah kumpulan berurutan dari nilai-nilai. Array digunakan untuk menyimpan daftar item yang sejenis. JavaScript menyediakan berbagai metode untuk mengakses, menambah, menghapus, dan memanipulasi elemen dalam array.

8. DOM (Document Object Model):
   DOM adalah representasi berjenjang dari halaman web. JavaScript dapat digunakan untuk mengakses dan memanipulasi elemen HTML dan elemen lainnya di halaman web, memungkinkan pembuatan halaman web yang dinamis dan interaktif.

Dengan bekerja bersama, HTML, CSS, dan JavaScript memungkinkan Anda untuk membuat website yang dinamis, interaktif, dan menarik bagi pengguna.