Mengenal HTML, CSS,JavaScript

1. HTML

Apa itu HTML?

HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau "bahasa markup"

HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange).

Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website.

Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.

Fungsi HTML

1. Membuat Halaman Website

Fungsi utama dari HTML adalah untuk membuat halaman website. Sehingga Anda dapat berbagi informasi pada banyak orang melalui browser di internet.

HTML juga mudah untuk diaplikasikan untuk seorang pemula, tak heran, hampir semua website pasti dibuat menggunakan HTML.

2. Menjadi Pondasi Website

HTML juga berfungsi sebagai pondasi utama pembuatan website. Beberapa bahasa pemrograman akan diaplikasikan pada HTML untuk dapat menampilkan website yang lebih menarik.

Sebagai contoh, tampilan website dapat lebih berwarna dengan menggunakan CSS. Lalu website menampilkan banyak fitur dengan menggunakan bahasa pemrograman Javascript, PHP, atau lainnya.

3. Menandai Teks dan Bagian pada Halaman Website

Fungsi lainnya dari HTML ialah menjadi penanda teks dan bagian dari laman website. Semisal untuk menandai kalimat cetak tebal dan miring hanya perlu diberi kode <bold>, <italic>.

Selain itu, HTML juga berfungsi untuk menandai bagian pada website. Misalnya bagian header, main, footer, dan navigation. Sehingga lebih memudahkan pembuatan website.

4. Menampilkan Multimedia di Website

Supaya website tidak membosankan, Anda tentu perlu menambahkan gambar, video, tabel, dan media lainnya, bukan? Nah dengan HTML, Anda bisa menampilkan berbagai media sesuai kebutuhan.

5. Mengarahkan Pengguna ke Halaman Website Lain

Seiring perkembangannya, HTML kini juga berfungsi untuk mengarahkan pengguna ke halaman atau website lain melalui teks tertentu. Fungsi tersebut juga bisa disebut hyperlink.

struktur HTML

Penjelasan Tentang Struktur HTML dan Tag HTML Beserta Contoh dan Penjelasannya | SOBAT INFORMATIKA

2. CSS

Apa itu CSS?

Cascading Style Sheet(CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Kelebihan CSS

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

Cara Kerja CSS

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

CSS Style Internal, External, dan Inline
Kami akan membahas masing-masing CSS Style secara singkat. Untuk informasi atau pembahasan yang lebih mendalam, kami menyertakan link di bawah ikhtisar.
CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.
External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.
CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.
3.    JavaScript
JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.
Keunggulan JavaScript
1. General Purpose
Saat ini JavaScript tidak hanya digunakan di sisi client (browser) saja lho. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu kamu bisa mengembangkan back-end (server), console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript.
2. Mudah untuk Dipelajari
Setiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan bisa dilihat dari beberapa faktor. Menurut saya sih, syntax atau penulisan jadi salah satu faktor yang paling penting buat dipelajari. JS masih tergolong mudah dipelajari asalkan kamu serius dalam belajar dan selalu berani melakukan improvement atau bermain-main dengan itu. Masih belum percaya JS mudah dipelajari? Baiklah, ini perbandingan JS dengan beberapa bahasa lainnya. Contohnya dalam menampilkan “Hello World!” ya.
Bahasa C++
1
2
3
4
5
6
7 #include <iostream>
 
int main()
{
  std::cout << "Hello, world!\n";
  return 0;
}
Bahasa Java
1
2
3
4
5
6 class AppHelloWorld {
 
public static void main(String[] args) {
         System.out.println("Hello World!");     
     }
}
Bahasa JavaScript
1 console.log('Hello World!')
Kode program di atas menampilkan hasil yang sama yaitu “Hello World!”. terbukti, JS jauh lebih ringkas dalam hal penulisan.
3. Sangat Powerfull
Kamu harus tau! JavaScript termasuk bahasa pemrograman yang sudah mature, sifat inilah yang membuat JavaScript sangat powerfull. Dulu, website basisnya masih PHP atau mungkin saja kita pakai WordPress. Semua logika web dibuat dan bergantung pada sisi server. Inilah yang membuat web browser lebih statis. 
Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua berkat JavaScript.
4. Banyak perusahaan yang mengimplementasikan JS
Siapa yang nggak mau kerja di startup? Iya pasti maulah, jika gajinya besar hehe. Kamu akan dibutuhkan perusahaan seperti startup jika serius untuk belajar JavaScript. 
JavaScript menempati urutan ke-4 soal gaji developer tertinggi di tahun 2018 dengan rata-rata pendapatan adalah $105,415 (Techrepublic). Bayangkan jika dirupiahkan? Apalagi pada tahun ini bisa makin lebih besar nih. Dan lebih manisnya lagi, jika kamu bekerja sebagai developer Google dsb karena mereka semua sudah menerapkan JavaScript sebagai penunjang teknologi. Dan itupun juga tergantung pada level pemrograman kamu dan juga posisi kerja.
5. Dukungan Komunitas
Inilah salah satu alasan JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika kamu sedang mengembangkan sebuah aplikasi, serta  menemukan bug. Dengan dukungan komunitas yang baik, maka kamu akan lebih mudah untuk menemukan solusi dari bug tersebut.

Cari Blog Ini

Programming