Cara Membuat Situs Web dengan HTML/CSS dan Javascript

HTML adalah bahasa markah yang dirancang khusus untuk membuat halaman web dan aplikasi. Halaman web ini kemudian dapat dilihat oleh orang lain yang sedang terhubung ke Internet. 

Daftar Isi

Sejak pertama kali HTML direlease dan diperkenalkan hingga kemudian dijadikan standar yang digunakan secara luas untuk menampilkan sebuah tampilan web. Kini HTML terus mengalami perkembangan revisi dan evolusi yang terus tumbuh di bawah arahan W3C, sebuah organisasi yang bertugas merancang dan memelihara bahasa. 

Sejarah HTML (HyperText Markup Language) pertama kali dikembangkan pada tahun 1989 oleh Tim Berners-Lee, seorang insinyur komputer yang bekerja pada CERN (Organisasi Eropa untuk Penelitian Nuklir). Berners-Lee membuat HTML sebagai bahasa markup untuk membuat halaman web dan menyediakan cara untuk menghubungkan halaman web satu sama lain melalui hyperlink.

Versi pertama HTML, yang dikenal sebagai HTML 1.0, hanya memiliki beberapa elemen dasar seperti headings, paragraf, dan link. Versi-versi berikutnya dari HTML dikembangkan dan ditingkatkan untuk memasukkan elemen baru dan fitur seperti tabel, formulir, dan gambar.

HTML 4.0, yang dirilis pada tahun 1997, membawa beberapa perubahan besar, termasuk penambahan elemen untuk membuat formulir interaktif dan tabel yang lebih kompleks.

HTML5, versi terbaru HTML yang dirilis pada tahun 2014, memiliki banyak fitur baru seperti elemen multimedia, lokalisasi, dan database offline. HTML5 juga memiliki dukungan built-in untuk aplikasi web dan membuat pengembangan aplikasi web lebih mudah dan cepat.

Sampai sekarang, HTML terus dikembangkan dan ditingkatkan untuk memenuhi kebutuhan pengembangan web yang semakin canggih. HTML saat ini merupakan bahasa markup paling umum digunakan untuk membuat halaman web dan tetap menjadi dasar dari pengembangan web modern.

Definisi HTML adalah HyperText Markup Language. dikatakan HyperText adalah sebuah metode yang dapat digunakan untuk berpindah antar halaman web dan aplikasi melalui perantara teks khusus berwarna biru ( hyperlink) yang ketika di klik teks biru itu akan membawa Anda ke halaman berikutnya. 

Sedangkan Markup adalah apa yang dilakukan oleh tag HTML terhadap teks yang ada di dalamnya, tag ini memberitahu browser untuk menandainya sebagai jenis teks tertentu dari element yang mengacu pada blok halaman web (misalnya teks yang dicetak miring atau teks yang dicetak tebal). 

Disebut bahasa, karena HTML memang mempunyai sintaksis kode seperti sebuah bahasa, tetapi HTML tidak bisa disebut sebagai bahasa pemrograman, sebab HTML tidak mempunyai kemampuan untuk membuat fungsionalitas yang dinamis untuk menjalankan logika.

HTML terdiri dari serangkaian baris kode penanda yang diketik dan diapit diantara tag pembuka <tag> dengan teks berada ditengah tengah kemudian diakhiri oleh tag penutup </tag>. Tag tersebut membuat hirearki yang dapat menyusun konten hingga menjadi bagian paragraf, block kalimat, heading dan yang lainnya.

Teks ini kemudian disimpan sebagai file *.html atau *.htm. Ekstensi file ini bisa dilihat melalui browser apapun, baik Mozilla Firefox, Safari, atau Chrome. Kemudian Browser akan membaca file tersebut dengan menerjemahkannya ke dalam bentuk yang dapat dilihat oleh pengguna di internet seperti text, animasi, tabel, gambar, audio, video dsb. Biasanya halaman web dan aplikasi ini dibuat secara terpisah dengan menyertakan sejumlah halaman yang berbeda-beda.

Menulis kode HTML Anda sendiri memerlukan penggunaan tag dengan benar dan tepat. Anda dapat menggunakan notepad++ untuk menuliskan kode HTML dan disimpan dalam format ASCII. 

Apa itu Tag?

Tag adalah karakter khusus pemisah teks normal dari kode HTML. Anda mungkin mengenal Tag sebagai kata-kata di antara < Teks >. Dengan Tag Anda bisa membuat semua hal keren seperti gambar dan animasi, hanya dengan memberi tahu browser apa yang harus dirender di dalam halaman. 

Tag HTML memiliki dua tipe utama:

1. block-level

Block level HTML tag adalah tag HTML yang membuat elemen HTML sebagai blok sendiri yang memulai baris baru dan memenuhi seluruh lebar tersedia. Mereka memiliki default styling yang berbeda dari teks dan dapat memiliki margin dan padding. Beberapa contoh block level HTML tag adalah tag <h1>, <div>, <p>, <header>, <footer>, <section>, dan <article>.

Heading tag mempunyai 6 level di HTML, mulai dari tag <h1> sampai tag terendah <h6>, tag tersebut digunakan untuk memformat judul atau subjudul teks pada halaman web. Setiap heading tag memiliki ukuran font yang berbeda, dimulai dari <h1> yang memiliki ukuran font terbesar, dan <h6> yang memiliki ukuran font terkecil. 

Heading tag juga digunakan sebagai penanda semantik untuk menandai konten sebagai bagian dari struktur halaman web yang dapat membantu mesin pencari dan aplikasi lain memahami konten dengan lebih baik. 

Division tag digunakan untuk membagi konten HTML menjadi bagian-bagian yang terpisah dan dapat diformat secara individual. Division tag adalah contoh dari block level HTML tag dan memiliki properti seperti margin dan padding. Biasanya digunakan sebagai container untuk membungkus elemen HTML lain dan membantu dalam membuat tata letak dan desain halaman web.

Di dalam elemen div juga terdapat tag div lainnya, Anda juga bisa menyisipkan tag <ul></ul> untuk list item yang tidak berurutan dan <ol></ol> untuk list item yang berurutan. Berikut adalah contoh tampilan dasar dari list item yang tidak berurutan:

<ul>

    <li>List item 1</li>
    <li>List item 2</li>

    <li>List item 3</li>

</ul>

2. Inline tag

Inline HTML tag adalah tag HTML yang digunakan untuk menentukan teks atau elemen HTML sebagai bagian dari teks yang lebih besar. Inline HTML tag memiliki ukuran yang sama dengan teks yang ada di sekitarnya dan tidak memulai baris baru. Beberapa contoh inline HTML tag adalah tag <a>, <span>, <img>, <strong>, dan <em>. 

Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong> akan mengubah elemen teks ke format tebal, sedangkan tag <em> akan merender teks dalam format italic.

Hyperlink tag (<a>) adalah elemen inline yang digunakan untuk membuat tautan (link) ke halaman web lain, file, email, dll. Tag ini menentukan tujuan dari tautan dan teks tautan yang ditampilkan pada halaman web. Anchor Tag <a> selalu diiringi dengan attribute href untuk mengindikasi tujuan link, Contoh:

<a href="https://rubrikpulsa.com/">Klik disini !</a>

Di sini, "Klik disini !" adalah teks tautan dan "https://www.rubrikpulsa.com" adalah tujuan dari link.

Tag <img> juga merupakan elemen inline, yang mana tag ini digunakan untuk menambahkan gambar ke halaman web. Tag ini tidak memiliki tag tutup dan hanya memiliki atribut seperti "src" yang menentukan lokasi file gambar, "alt" yang memberikan teks alternatif untuk gambar, dan lainnya, Contoh:

<img src="/images.jpg" alt="Contoh image">

Di sini, "image.jpg" adalah lokasi file gambar dan "Contoh image" adalah teks alternatif yang akan ditampilkan jika gambar tidak dapat dirender.

Berapa lama belajar HTML?

Mempelajari HTML dasar hanya membutuhkan beberapa hari membaca dan mempelajari tag dan sintaksis kode. Anda dapat menguasai dasar-dasarnya dalam satu jam. Setelah Anda tahu tag, Anda dapat langsung membuat halaman HTML. 

Namun, menggunakan HTML dan mendesain situs web yang baik adalah lebih dari sekedar mengajarkan Anda sebuah kode HTML. Dibutuhkan setengah keterampilan dan setengah bakat untuk membuat desain situs web yang bagus dan responsif. 

HTML dapat dimodifikasi menggunakan dua bahasa front end diantaranya, bahasa performatan CSS dibaca (Cascading Stylesheets) dan JavaScript yang bisa digunakan untuk membuat efek khusus dan web interaktif.

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa desain web yang digunakan untuk mengontrol tampilan dan format halaman web. Ini memungkinkan web designer untuk memisahkan konten HTML dari presentasi visualnya dan membuat situs web tampak lebih menarik dan mudah dibaca.

CSS memungkinkan pengontrolan atas elemen seperti warna latar belakang, font, margins, padding, ukuran, dan posisi dari elemen HTML. Ini memungkinkan web designer untuk mengaplikasikan gaya yang sama pada banyak halaman web dengan mudah dan mengubah tampilan situs web dengan cepat dan efisien.

CSS juga memungkinkan web designer untuk membuat situs web yang responsif, yang berarti bahwa situs web akan terlihat baik pada berbagai ukuran layar, termasuk desktop, tablet, dan ponsel.

Secara singkat, CSS membantu menghasilkan halaman web yang terlihat bagus, mudah dibaca, dan responsif, memungkinkan web designer untuk memberikan pengalaman yang baik bagi pengguna.

Kami akan mengajarkan Anda untuk membuat tampilan halaman web yang sederhana. Pertama Anda siapkan Notepad untuk menulis teks berikut. Kemudian simpan dengan nama websiteku.html di folder komputer. 

Untuk melihatnya cukup klik 2 kali nama websiteku.html tersebut kemudian komputer PC akan memerintahkan browser untuk merender kode kode tersebut dan menampilkannya ke dalam bentuk teks normal.

<head>

<title>Websiteku</title>

</head>

<body>

<h1>Ini Judul halaman</h1>

<p>Selamat datang di Webite saya</p>

</body>

</html>

Demikian artikel tentang bagaimana cara membuat situs web menggunakan Kode HTML, CSS, dan Javascript. Ini hanya panduan dasar. Untuk membuat situs web yang lebih kompleks dan fungsional, Anda perlu mempelajari banyak hal lain, seperti menggunakan framework dan library, membuat halaman responsif, dan melakukan optimasi SEO. Namun, dengan memulai dari panduan ini, Anda sudah memiliki dasar yang baik untuk memulai belajar pembuatan situs web.

Berbagi :