Tutorial Membuat Website dengan HTML dan CSS
Membuat website sederhana tidaklah sulit. Jika Anda menguasai dasar-dasar HTML dan CSS, Anda dapat dengan mudah membangun situs web Anda sendiri tanpa pengetahuan pemrograman profesional apa pun. HTML (HyperText Markup Language) digunakan untuk membuat struktur halaman web, sedangkan CSS (Cascading Style Sheets) bertanggung jawab atas desain dan tata letak.
Apa yang Anda butuhkan
Untuk memulai, Anda hanya memerlukan dua hal:
Editor teks seperti Notepad (Windows), TextEdit (Mac), atau program seperti VS Code, Sublime Text atau Atom.
Peramban web seperti Google Chrome, Mozilla Firefox atau Microsoft Edge untuk menampilkan hasilnya.
Mulailah dengan HTML
Buat file baru dan simpan dengan nama indeks.html. Kemudian tulis kode HTML berikut :
Situs web pertama saya
Selamat datang di situs web saya
Ini paragraf pertama saya.
Penjelasan singkat:
menunjukkan bahwa ini adalah dokumen HTML5.
Itu -Area berisi informasi meta, judul halaman dan link ke file CSS.
Itu -Area berisi konten halaman sebenarnya seperti judul dan teks.
Tambahkan desain dengan CSS
Buat file baru dengan nama gaya.css di folder yang sama dan tulis kode CSS di dalamnya.
Kode CSS ini memberikan tampilan yang lebih menarik pada situs web Anda: latar belakang abu-abu terang, font yang mudah dibaca, dan judul biru.
Simpan dan lihat
Setelah Anda memiliki kedua file (indeks.html Dan gaya.css) disimpan, terbuka indeks.html dengan mengklik dua kali. Situs web Anda akan muncul di browser.
Berkembang
Setelah Anda memahami dasar-dasarnya, Anda dapat menambahkan elemen tambahan seperti gambar, link, daftar, tabel, atau formulir.
Pastikan file gambar berada di folder yang sama dengan file HTML atau gunakan link gambar langsung.
Tutorial Mengirim Data Sensor ke Web
Di era Internet of Things (IoT), menghubungkan komponen perangkat keras seperti sensor dengan aplikasi berbasis web menjadi semakin penting. Data yang dikumpulkan oleh sensor misalnya, suhu, kelembapan, atau kecerahan jauh lebih bermanfaat jika dapat dipantau secara real-time melalui internet. Dalam artikel ini, kami menunjukkan tutorial sederhana namun efektif tentang cara mengirimkan data sensor ke web.
Mengapa mengirim data sensor ke web?
Sensor adalah perangkat kecil yang merekam kondisi lingkungan. Namun, nilainya tetap terbatas jika hanya disimpan secara lokal. Dengan mengirimkannya ke web, kita dapat:
Pemantauan jarak jauh – Data dapat diakses dari mana saja melalui laptop atau telepon pintar.
Penyimpanan data – Nilai dapat disimpan dalam basis data untuk analisis jangka panjang.
Visualisasi waktu nyata – Dasbor memungkinkan data disajikan dalam bentuk bagan atau tabel.
Integrasi dengan layanan lain – Data dapat dihubungkan ke layanan cloud, sistem notifikasi, atau bahkan aplikasi AI.
Peralatan dan bahan yang dibutuhkan
Untuk tutorial ini kita membutuhkan:
Mikrokontroler – ESP8266 atau ESP32 populer karena mendukung Wi-Fi.
Sensor – Misalnya, sensor suhu dan kelembapan DHT11 atau DHT22.
Koneksi internet – Koneksi Wi-Fi yang stabil untuk mengirim data.
Server atau platform web – Server Anda sendiri dengan PHP/MySQL atau platform gratis seperti ThingSpeak, Firebase, atau Blynk.
Software IDE – Arduino IDE untuk menulis dan mengunggah kode.
Langkah-langkah untuk mengirim data sensor ke web
Hubungkan mikrokontroler dan sensor
Hubungkan sensor ke mikrokontroler sesuai dengan pinout. Contoh dengan DHT11:
VCC → 3,3V
GND → GND
Data → GPIO-Pin (z. B. D4 beim ESP8266)
Gunakan pustaka di Arduino IDE
Pustaka berikut ini diperlukan:
ESP8266WiFi atau WiFi.h (untuk ESP32) untuk membuat koneksi.
DHT.h untuk membaca sensor.
Tulis program dasar
Kode sederhana untuk membaca sensor:
#include <ESP8266WiFi.h>
#include <DHT.h>
#definisikan DHTPIN D4
#definisikan DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
const char* ssid = "Nama_WLAN";
const char* kata sandi = "Kata Sandi_WLAN";
batalkan pengaturan() {
Serial.mulai(115200);
WiFi.begin(ssid, kata sandi);
dht.mulai();
sementara (status WiFi() != WL_TERHUBUNG) {
tunda(1000);
Serial.println("Menghubungkan ke Wi-Fi...");
}
Serial.println("Wi-Fi tersambung!");
}
void loop() {
float temp = dht.bacaSuhu();
mengapung hum = dht.bacaKelembapan();
jika (!adalah(suhu) dan !adalah(hum)) {
Serial.print("Suhu: ");
Serial.print(temp);
Serial.print(" °C, Kelembaban: ");
Serial.print(hum);
Serial.println(" %");
}
delay(5000); // kirim setiap 5 detik
}Kirim data ke server web
Dengan server PHP/MySQL, data dapat dikirim melalui permintaan HTTP:
#include <ESP8266HTTPClient.h>
void loop() {
float temp = dht.bacaSuhu();
mengapung hum = dht.bacaKelembapan();
jika (status WiFi() == WL_TERHUBUNG) {
Klien HTTP http;
String url = "http://alamat-server.com/input.php?temp=" + String(temp) + "&hum=" + String(hum);
http.mulai(url);
int httpCode = http.GET();
jika (httpCode > 0) {
Serial.println("Data terkirim!");
} kalau tidak {
Serial.println("Kesalahan saat mengirim.");
}
http.akhir();
}
penundaan(5000);
}File input.php di server menerima nilai dan menyimpannya dalam database.
Visualisasikan data
Setelah data disimpan ke server atau platform IoT, data tersebut dapat ditampilkan secara grafis. ThingSpeak secara otomatis menampilkannya dalam bentuk diagram.
Tips penting
Atur interval pengiriman – Jangan mengirim terlalu sering untuk menghindari kelebihan beban server.
Data aman – Gunakan HTTPS atau kunci API untuk data sensitif.
Kalibrasi sensor – Untuk memastikan nilai yang akurat.
Gunakan platform IoT – ThingSpeak, Firebase, atau Blynk menghemat waktu dibandingkan memiliki server sendiri.
Kesimpulan
Baik membangun situs web maupun mengirim data sensor ke web merupakan keterampilan dasar yang semakin mudah dipelajari oleh siapa pun. Dengan memahami struktur HTML dan desain menggunakan CSS, Anda sudah dapat membuat situs web sederhana namun fungsional sebagai fondasi utama. Di sisi lain, dengan mikrokontroler, sensor, dan koneksi internet, Anda bisa membangun sistem pemantauan IoT dasar yang mampu membaca dan mengirim data ke server.
Kedua kemampuan ini dapat dikembangkan lebih jauh: situs web dapat ditingkatkan menggunakan JavaScript atau framework seperti Bootstrap, sementara proyek IoT dapat diperluas dengan dasbor interaktif, notifikasi otomatis, hingga analitik berbasis AI. Dengan penguasaan dasar-dasar ini, siapa pun dapat memulai dan mengembangkan proyek web maupun IoT sesuai kebutuhan secara mudah, cepat, dan fleksibel.
