Dasar-Dasar Pemrograman Web

A. Sejarah Web
Web telah menjadi bagian integral dari kehidupan kita sehari-hari, dan evolusinya
mencerminkan perkembangan teknologi dan kebutuhan pengguna. Mari kita telusuri sejarah web,
dari halaman statis awal hingga dunia interaktif yang kita kenal sekarang. Sejarah web cukup
panjang dan menarik, mari kita telusuri bersama!
Web terus berkembang dengan pesat dan inovasi baru terus bermunculan. Masa depan web
masih penuh dengan kemungkinan dan akan terus mengubah cara kita hidup, bekerja, dan
berkomunikasi.
1. Web Awal (1989-1993): Era Web 1.0
 1989: Sir Tim Berners-Lee menemukan World Wide Web (www) di CERN, Swiss, untuk
memudahkan pertukaran informasi antara para ilmuwan.
 1991: Pertama kali situs web diluncurkan di luar CERN, yaitu http://info.cern.ch/, situs web
pertama di dunia.
 1993: Mosaic, browser web grafis pertama, dirilis, populerkan web di luar komunitas
ilmiah.

2. Web Dinamis (1994-2004): Era Web 2.0

 1994: Yahoo! dan Netscape Navigator diluncurkan, menjadikan web lebih mudah diakses
dan dinavigasi.
 1995: Amazon.com dan eBay didirikan, awal dari e-commerce modern.
 1998: Google didirikan, mengubah cara kita mencari informasi.
 2003: Blogspot dan WordPress diluncurkan, memudahkan orang untuk membuat dan
menerbitkan konten online.
 2004: Facebook diluncurkan, menandai era jejaring sosial.

3. Web Interaktif (2005-sekarang): Era Web 3.0

 2005: YouTube didirikan, meroketnya popularitas video online.
 2007: iPhone diluncurkan, menandai era mobile web.
 2009: Bitcoin diciptakan, awal dari era cryptocurrency.
 2010: Instagram diluncurkan, platform berbagi foto yang populer.
 2016: Tik Tok diluncurkan, aplikasi video pendek yang fenomenal.
 2023: Web 3.0 terus berkembang, dengan fokus pada decentralization, semantic web, dan
artificial intelligence.
Masa Depan Web
Masa depan web diprediksi akan semakin interaktif, immersive, dan personal. Teknologi seperti
virtual reality (VR), augmented reality (AR), dan artificial intelligence (AI) akan memainkan peran
yang semakin penting. Web akan semakin terintegrasi dengan kehidupan kita, menghubungkan kita
dengan dunia fisik dan digital dengan cara yang belum pernah ada sebelumnya.
Inilah sekilas tentang sejarah Web dan bagaimana ia berkembang menjadi dunia online yang
kita kenal sekarang. Perkembangan teknologi ini akan terus berlanjut, membentuk web yang
semakin dinamis dan interaktif di masa depan.

1
B. Komponen Dasar Web
Komponen dasar web adalah elemen-elemen yang membentuk sebuah website. Komponen-
komponen ini dapat dikelompokkan menjadi dua, yaitu komponen struktural dan komponen konten.
1. Komponen struktural
Komponen struktural adalah komponen yang mengatur tata letak dan struktur website.
Komponen ini terdiri dari:

 Domain adalah alamat website yang unik di internet. Domain biasanya berbentuk teks dan
diakhiri dengan ekstensi, seperti .com, .id, atau .net.
 Hosting adalah tempat penyimpanan file-file website. Hosting biasanya berupa server yang
berada di suatu lokasi tertentu.
 HTML (HyperText Markup Language) adalah bahasa pemrograman yang digunakan untuk
membuat struktur website. HTML terdiri dari tag-tag yang digunakan untuk mengatur
tampilan dan perilaku website.
 CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk
mengatur tampilan website. CSS terdiri dari aturan-aturan yang digunakan untuk mengatur
warna, font, ukuran, dan gaya elemen-elemen website.

2. Komponen konten
Komponen konten adalah komponen yang berisi informasi atau konten yang ingin
disampaikan kepada pengunjung website. Komponen ini terdiri dari:

 Header adalah bagian atas website yang biasanya berisi logo, judul website, dan menu
navigasi.
 Menu navigasi adalah elemen yang digunakan untuk memudahkan pengunjung dalam
berpindah antar halaman website.
 Body adalah bagian utama website yang berisi konten utama website.
 Sidebar adalah bagian samping website yang biasanya berisi informasi tambahan, seperti
artikel, galeri, atau iklan.
 Footer adalah bagian bawah website yang biasanya berisi informasi tentang pemilik
website, hak cipta, atau kontak.
Selain komponen-komponen tersebut, ada beberapa komponen lain yang dapat digunakan
dalam website, seperti:
1. Gambar digunakan untuk memperindah tampilan website atau untuk menyampaikan informasi
tertentu.
2. Video digunakan untuk menyampaikan informasi yang lebih kompleks atau untuk menarik
perhatian pengunjung.
3. Formulir digunakan untuk mengumpulkan data dari pengunjung, seperti nama, alamat, atau
email.
4. Script digunakan untuk menambahkan fungsionalitas tertentu ke website, seperti animasi,
permainan, atau interaksi dengan pengguna.

2
 Komponen-komponen tersebut dapat digabungkan dan dimodifikasi sesuai dengan kebutuhan dan
tujuan website.

C. Pengantar HTML

1. Apa itu HTML?

HTML, singkatan dari HyperText Markup Language, adalah bahasa markah standar untuk
dokumen yang dirancang untuk ditampilkan di peramban internet. HTML digunakan untuk
menggambarkan struktur dan konten dari sebuah halaman web.

2. Bagaimana cara kerja HTML?

HTML terdiri dari tag-tag yang digunakan untuk menandai elemen-elemen dalam sebuah
halaman web. Tag-tag ini memiliki nama dan atribut yang dapat digunakan untuk mengatur
tampilan dan perilaku elemen tersebut. Misalnya, tag <h1> digunakan untuk menandai judul
dari sebuah halaman web. Tag ini memiliki atribut id yang dapat digunakan untuk memberi
nama unik pada judul tersebut.

3. Contoh kode HTML

Berikut adalah contoh kode HTML sederhana yang menampilkan judul dan paragraf:

Kode ini akan menampilkan halaman web dengan judul "Ini adalah judul" dan paragraf "Ini
adalah paragraf".

4. Pemahaman dasar HTML

Berikut adalah beberapa pemahaman dasar HTML yang perlu Anda ketahui:
 Elemen
Elemen adalah unit dasar dari HTML. Elemen terdiri dari tag pembuka, konten, dan tag
penutup.
 Tag

3
 Tag adalah tanda yang digunakan untuk menandai elemen-elemen dalam sebuah halaman
web. Tag memiliki nama dan atribut.

 Atribut
Atribut adalah informasi tambahan yang dapat diberikan kepada tag. Atribut digunakan
untuk mengatur tampilan dan perilaku elemen.
 Tipografi
HTML dapat digunakan untuk mengatur tipografi pada halaman web. Untuk mengatur
tipografi, Anda dapat menggunakan tag <p>, <h1>, <h2>, dan seterusnya.
 Link
HTML dapat digunakan untuk membuat link ke halaman web lain. Untuk membuat link,
Anda dapat menggunakan tag <a>.
 Gambar
HTML dapat digunakan untuk menampilkan gambar pada halaman web. Untuk
menampilkan gambar, Anda dapat menggunakan tag <img>.

D. Pengantar Css

1. Apa itu CSS?

CSS, singkatan dari Cascading Style Sheets, adalah bahasa pemrograman yang digunakan
untuk mengatur tampilan dari halaman web yang ditulis dalam HTML. CSS digunakan untuk
mengatur hal-hal seperti font, warna, ukuran, dan tata letak dari elemen-elemen dalam sebuah
halaman web.

2. Bagaimana cara kerja CSS?

CSS menggunakan aturan untuk mengatur tampilan dari elemen-elemen dalam sebuah halaman
web. Aturan CSS terdiri dari selector dan declaration. Selector digunakan untuk memilih
elemen yang akan diatur, dan declaration digunakan untuk menentukan pengaturan yang akan
diterapkan pada elemen tersebut.

Misalnya, aturan CSS berikut ini akan mengatur warna judul halaman web menjadi merah:

Hasil :

3. Contoh kode CSS

Berikut adalah contoh kode CSS sederhana yang mengatur tampilan dari judul dan paragraf:

4
 Kode ini akan menampilkan halaman web dengan judul berwarna merah berukuran 24px dan
paragraf dengan font sans-serif dan line-height 1.5.

4. Pemahaman dasar CSS

Berikut adalah beberapa pemahaman dasar CSS yang perlu Anda ketahui:

 Selector
Selector digunakan untuk memilih elemen yang akan diatur. Selector dapat berupa tag,
kelas, atau ID.
 Declaration
Declaration digunakan untuk menentukan pengaturan yang akan diterapkan pada elemen.
Declaration terdiri dari property dan value. Property adalah nama pengaturan, dan value
adalah nilai dari pengaturan tersebut.
 Pengaturan CSS
CSS memiliki berbagai pengaturan yang dapat digunakan untuk mengatur tampilan dari
elemen-elemen dalam sebuah halaman web. Beberapa pengaturan CSS yang umum
digunakan adalah:

 Font : pengaturan font, seperti jenis font, ukuran font, dan warna font.
 Warna : pengaturan warna, seperti warna teks, warna latar belakang, dan warna elemen
lainnya.
 Ukuran : pengaturan ukuran, seperti ukuran teks, ukuran gambar, dan ukuran elemen
lainnya.
 Tata letak : pengaturan tata letak, seperti posisi elemen, margin, dan padding.