Kali ini saya akan berbagi pengetahuan saya mengenai HTML, CSS dan Javascript dalam pembuatan Website. Saya tidak akan membahas terlalu jauh dulu, pada artikel ini saya hanya akan fokus memperkenalkan HTML, CSS dan Javascript saja kepada anda…. Jadi silahkan simak baik-baik.
Dengan tools tersebut anda tidak perlu ngoding, anda bisa langsung membuat layoutnya dengan mudah tinggal drag dan klik-klik saja.
Baiklah, kita kembali ke tema. Pertama-tama akan saya perkenalkan dulu apa itu HTML.
1. Tentang HTML
1.1 Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa markup atau markah yang digunakan untuk membuat sebuah halaman Web yang bisa menampilkan berbagai informasi berupa text maupun gambar.
1.2 Fungsi HTML
HTML adalah bahan dasar atau kerangka dari website. Anda bisa mengangga website adalah sebuah Rumah, lalu HTML adalah bagian kerangka dan pondasi dari rumah tersebut. Atau anda juga bisa membayangkan Website sebagai Manusia, lalu HTML adalah bagian kerangka dan tengkorangnya.
1.3 Contoh Penulisan Kode HTML
Berikut ini adalah struktur dasar untuk pembuatan HTML.
<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
<p>Disini bagian isi untuk menampilkan website yang bisa menampilkan teks maupun gambar.</p>
</body>
</html>
Penjelasan
| Nama Tag | Keterangan |
|---|---|
<!DOCTYPE html> |
Digunakan untuk mendefinisikan dokumen sebagai HTML5. |
<html> |
Elemen root dari HTML, ditutup dengan</html>. |
<head> |
Digunakan untuk menampilkan judul dan meta atau informasi tentang dokumen. tag ini juga perlu ditutup dengan</head>untuk bisa mendefinisikan tag berikutnya. |
<title> |
Hanya bisa didefinisikan didalam tag head untuk menampilkan judul website. Dan perlu ditutup juga dengan tag</title>. |
<body> |
Bagian konten dalam website yang terlihat. Perlu ditutup dengan tag</body>. |
<p> |
Digunakan untuk membuat paragraf. |
Kode tersebut disimpan sebagai file dokumen dengan format .html. File .html tersebut bisa kita buka menggunakan aplikasi web browser seperti Google Chrome, Firefox, Internet Explorer dan lain-lain. Berikut hasil dari kode tersebut jika dijalankan pada web browser.
2. Tentang CSS
2.1 Apa itu CSS?
CSS merupakan singkatan dari Cascading Style Sheets. CSS bukan bahasa pemrograman. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan suatu dokumen seperti html.
2.2 Fungsi CSS
Jika HTML itu adalah bagian dari pondasi rumah, CSS bisa dikatakan adalah bagian desain atau gaya dari rumahnya, seperti tembok, warna cat, lantai, atap dan bagian lainnya. Jadi CSS itu bertugas untuk mengatur tampilan pada website agar terlihat rapih dan menarik.
Sama seperti styles pada aplikasi pengolah kata seperti Microsoft Word yang bisa memberi gaya pada tulisan seperti besar kecilnya huruf, memberi warna, mengatur line height dan lain-lain.
CSS selain bisa mengatur gaya tulisan pada html, css juga bisa mengatur tampilan gambar, warna background, mengatur jarak antar elemen, mengatur jarak spasi antar kata, mengatur jarak setiap baris antar paragraf, margin atas-kanan-bawah-kiri, dan masih banyak lagi.
Umumnya CSS ini mengatur tampilan seluruh elemen yang terlihat pada html.
2.3 Contoh Penulisan Kode CSS
Ada 3 cara yang bisa digunakan untuk menuliskan css.
1. Menuliskan CSS Dalam Dokumen HTML
Untuk menuliskan kode css dalam html, harus didahului dengan menuliskan tag<style>dan ditutup oleh tag</style>.
<style>
body{
background: green;
}
</style>
2. Menuliskan Kode CSS Pada Elemen HTML
Untuk menuliskan css pada elemen html, kita bisa menulis kodenya pada suatu atribut yaitu style.
<body style="background: green;">3. Menuliskan Kode CSS Secara Terpisah
CSS bisa juga ditulis terpisah dari dokumen html. Kita perlu membuat dokumen baru dengan format .css.
Contoh :
Saya membuat file dengan nama style.css, dan isinya seperti berikut.
body {
background: green;
}
kita tidak perlu lagi membungkus kode css kita dengan elemen<style>karena kita tidak menulis cssnya didalam dokumen html nya lagi, jadi sudah terpisah.
Tetapi jika kita ingin menggunakan cssnya pada dokumen html, kita perlu memanggil nama file css tadi yang sudah dibuat didalam elemen<link>.
Untuk penulisannya seperti berikut ini :
<link rel="stylesheet" href="style.css">Elemen<link>tidak perlu penutup.
Hasilnya seperti ini.
3. Tentang Javascript
3.1 Apa itu Javascript?
Javascript adalah bahasa pemrograman tingkat tinggi yang disisipkan didalam dokumen html dan dibungkus didalam tag<script>.
3.2 Fungsi Javascript
Jika html sebagai kerangka atau pondasi rumah, dan css untuk gaya rumah, Javascript bisa dianggap sebagai listrik yang bisa menghidupkan alat elektronik pada rumah seperti lampu, tv, mesin cuci dan lain-lain. Atau jika pada tubuh kita javascript bisa dibilang adalah otot-ototnya.
Pada website Javascript ini digunakan untuk menjadikan website kita menjadi interaktif dan fungsional.
3.3 Contoh Penulisan Kode Javascript
Untuk menuliskannya dalam dokumen html, perlu di bungkus dengan tag<script>. Kode javascript ini berfungsi untuk menampilkan pesan pop up pada halaman web.
<script>
var pesan = "Halo Dunia!";
alert(pesan);
</script>
Hasilnya seperti ini.
Selain disisipkan pada file html. Javascript juga bisa ditulis secara terpisah. Dokumen javascript diberi format .js.
Untuk pemanggilannya ke dokumen HTML, seperti ini.
<script src="nama_file.js"></script>4. Kesimpulan
Seperti yang sudah saya tulis diatas. Jadi HTML itu bisa dikatakan sebagai pondasi atau kerangka pada website. CSS untuk mengatur tampilah halamannya agar terlihat menarik. Dan Javascript untuk menjadikan website interaktif dan fungsional.
Anda bisa menganggap website sebagai rumah atau tubuh manusia. Kemudian HTML adalah pondasi atau kerangka nya. Lalu CSS sebagai gaya atau tampilannya. Dan Javascript sebagai listrik atau Otot-ototnya.
Bagaimana? Sampai sini sudah paham? jika kurang paham silahkan langsung tanyakan saja di kolom komentar. Mungkin cukup sampai disini untuk artikel kali ini.
Untuk artikel selanjutnya saya akan memberi tahu kalian tentang HTML lebih lanjut. Saya akan membahas tentang elemen atau tag pada html, dan saya akan berikan lengkap tag-tag yang ada pada html.
Oke, sampai jumpa besok. Jika artikel ini bermanfaat, tolong bantu share ke teman-teman kalian ya! Terima Kasih.
2 thoughts on “Yuk Kenalan Dulu Dengan HTML, CSS dan Javascript”
Pingback: Pengertian Tag Beserta Daftar Tag-tag yang Ada pada HTML – Kakanda Zyan
Pingback: Cara Membuat Tabel di HTML dengan Benar – Kakanda Zyan