Belajar Membuat Tampilan Web Bagian 1 (Umum)

Untuk dapat membuat tampilan web, tahap awal yang perlu anda pelajari adalah mempelajari HTML, CSS, dan Javascript.

  • HTML adalah singkatan dari Hypertext Markup Language, merupakan skrip yang membuat web dapat ditampilkan melalui browser.
  • CSS adalah singkata dari Cascading Style Sheet, merupakan skrip yang membuat tampilan web menjadi lebih bergaya.
  • Javascript adalah skrip yang membuat tampilan web menjadi lebih interaktif.

Mempelajari HTML

Untuk dapat menguasai HTML, anda harus hafal dan paham mengenai tag HTML beserta atributnya. Tag adalah kata-kata yang dialokasikan sebagai kode yang dapat dimengerti oleh browser untuk dieksekusi. Ada sangat banyak tag HTML, anda dapat mempelajari tag HTML di sini.

Contoh skrip dasar HTML

<!DOCTYPE html>
<html>
<head>
<title>Judul web</title>
</head>
<body>
<p>Konten web</p>
</body>
</html>

Coba ketikkan kode di atas di Notepad kemudian simpan dengan mengganti "Save as type" sebagai "All Files (*.*)". Beri nama semisal "coba.html". Setelah itu dobel klik file HTML tersebut dan akan terbuka melalui browser.

Mempelajari CSS

Untuk dapat menguasai CSS, anda harus hafal dan paham mengenai properti CSS. Ada sangat banyak properti CSS, anda dapat mempelajari properti CSS di sini.

Di dalam CSS terdapat istilah selektor. Selektor ini mengacu kepada elemen HTML yang ingin diberi desain dan di dalamnya terdapat pasangan nama properti dan nilai properti.

Contoh skrip dasar CSS

body{
    background: black;
    color: white;
}

CSS diletakkan di dalam HTML menggunakan tag style. Berikut contoh skrip CSS yang saya masukkan ke dalam HTML. Silahkan ubah kode yang diketikkan di Notepad tadi mengikuti kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Judul web</title>
<style type="text/css">
body{
    background: black;
    color: white;
}
</style>
</head>
<body>
<p>Konten web</p>
</body>
</html>

Simpan perubahan lalu buka kembali file HTML tersebut dengan browser atau refresh saja halaman yang dibuka tadi. Anda akan melihat efek perubahannya.

Mempelajari Javascript

Javascript lebih rumit jika dibandingkan dengan HTML dan CSS, karena Javascript merupakan bahasa pemrograman yang dapat berjalan di browser. Jadi mempelajari Javascript berarti belajar sebuah bahasa pemrograman. Bagi yang sudah punya dasar pemrograman saya rasa tidak susah untuk menguasai Javascript. Tapi, bagi yang belum, maka anda harus berjuang ekstra. Bagi anda yang masih pemula, anda dapat mempelajarinya di sini.

Sama seperti CSS, Javascript juga diletakkan di dalam HTML.

Contoh skrip sederhana Javascript

 alert('Halo dunia!');

Javascript diletakkan di dalam HTML menggunakan tag script. Berikut contoh skrip Javascript yang saya masukkan ke dalam HTML. Silahkan ubah kode yang diketikkan di Notepad tadi mengikuti kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Judul web</title>
<style type="text/css">
body{
    background: black;
    color: white;
}
</style>
</head>
<body>
<p>Konten web</p>
<script language="javascript">
alert('Halo dunia!');
</script>
</body>
</html>

Simpan perubahan lalu buka kembali file HTML tersebut dengan browser atau refresh saja halaman yang dibuka tadi. Anda akan mendapati sebuah pesan yang muncul di browser.

Penutup

Sekian dulu isi tulisan saya. Masih banyak yang ingin saya ajarkan, tetapi saya punya kesibukan lain yang harus saya selesaikan untuk bertahan hidup. Tetap semangat untuk belajar web kawan.

comments powered by Disqus