Membuat Situs Web Pertama Anda: 10 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54

Dalam tutorial ini Anda akan belajar membangun halaman web dasar yang memiliki style sheet tertaut dan file javascript interaktif.

Langkah 1: Membuat Folder Anda

Buat folder untuk file yang akan kita buat untuk disimpan. Silakan beri nama sesuka Anda, ingat saja di mana letaknya karena kami akan menyimpan file ke sana nanti.

Langkah 2: Membuat File Pertama Anda

Buka editor teks favorit Anda. Dalam kasus saya, saya hanya akan menggunakan notepad bawaan Windows 10. Setelah Anda memiliki file baru, ketik yang berikut ini:

Ini adalah halaman web pertama saya, dipersembahkan oleh instruksi

Inilah yang dikenal sebagai tag HTML. Itu singkatan dari Heading 1. Teks yang kita masukkan ke dalam tag ini akan muncul sebagai heading pada halaman. Itu dibuka dan ditutup seperti ini. Teks di antara dua tag inilah yang akan ditampilkan di browser web Anda. Bagian yang mengatakan memberi tag itu atribut yang akan kita rujuk pada langkah x. Setelah selesai, lanjutkan dan simpan file di folder yang kita buat pada langkah 1 sebagai index.html.

Langkah 3: Buka File

Sekarang kita telah selesai menavigasi ke file di dalam folder yang kita buat, klik kanan file dan pilih opsi "buka dengan" dan pilih browser web yang Anda gunakan. Dalam kasus saya ini adalah google chrome. Sekarang lihat hasil kerja keras Anda sejauh ini!

Langkah 4: Menata Halaman Anda

Apa adanya, situs web kami cukup sederhana. Kami akan menambahkan apa yang dikenal sebagai cascading style sheet untuk sedikit membumbui. Buat file teks baru dan ketik berikut ini:

h1{warna: biru; perataan teks: tengah;}

Apa yang kami katakan kepada browser di sini adalah untuk menemukan elemen apa pun dalam tag h1 (yang kami pelajari di langkah 2) dan beri warna biru dan sejajarkan di tengah halaman. Simpan file ini di folder yang kita buat pada langkah 1 sebagai style.css.

Langkah 5: Tautkan Style.css ke Index.html Anda

Pada titik ini kami memiliki dua file terpisah yang tidak saling mengenal. Kita perlu memberi tahu file index.html kita bahwa kita memiliki file style.css yang ingin kita rujuk dan ambil beberapa gaya. Untuk melakukan ini, kita akan membuka file index.html di editor teks kita, dan di atas tag h1 kita akan menambahkan apa yang dikenal sebagai tag tautan. Tag tautan berfungsi seperti namanya, itu menautkan ke sesuatu. Dalam kasus kami sebuah stylesheet. Silakan dan ketik. Tag tautan adalah tag penutup sendiri sehingga tag penutup tidak diperlukan. Rel adalah singkatan dari relasi dan href memberi tahu file indeks di mana file eksternal yang kita rujuk berada. Sekarang simpan file index.html itu.

Langkah 6: Lihat Halaman Gaya Baru Anda

Kunjungi kembali langkah 3 dan muat ulang halaman web Anda dan lihat bagaimana perubahan tersebut tercermin.

Langkah 7: Membuat Tombol

Buka kembali file index.html Anda di editor teks Anda dan ketik berikut ini:

Klik saya!

dan simpan filenya. Ini menciptakan elemen tombol pada halaman. Setelah disimpan, buka kembali file seperti yang ditunjukkan pada langkah 3 dan pastikan tombol ada di sisi kiri bawah halaman Anda.

Langkah 8: Buat File Javascript Anda

Terakhir kita akan membuat file javascript kita. Inilah yang akan membuat situs kita interaktif. Buka editor teks dan ketik berikut ini:

document.querySelector("#button").addEventListener("klik", function(){

document.querySelector("#heading").innerText = "Mengubah judul dengan cepat"

})

Apa yang kami lakukan adalah meminta dokumen untuk menemukan kami elemen dengan ID tombol, dan kami akan meminta tombol merespons acara klik dengan mengubah teks elemen dengan ID menuju "Mengubah judul dengan cepat ". Simpan file sebagai button.js di folder yang kita buat di Langkah 1.

Langkah 9: Tautkan File Javascript dan Indeks Anda

Seperti yang kita lakukan dengan file style.css, kita perlu memberi tahu file index.html tentang file javascript kita. Di bagian bawah di bawah semua yang telah kita lakukan sejauh ini ketikkan yang berikut:

Tag skrip memungkinkan kami untuk menambahkan bahasa skrip (dalam kasus kami, javascript) untuk menyediakan fungsionalitas ke halaman kami. Kami menyuruhnya untuk mencari file bernama button.js dan menambahkan semua kode yang ada di dalamnya ke file indeks kami. Setelah Anda mengetiknya, simpan file dan buka file lagi seperti yang ditunjukkan pada langkah 3.

Langkah 10: Uji Tombol yang Baru Dibuat

Sekarang lanjutkan dan klik tombol dan perhatikan perubahan judul!

Selamat!! Anda sekarang telah membuat halaman web interaktif pertama Anda! Saya bertanya-tanya seberapa jauh Anda dapat mengambilnya dengan mengetahui apa yang Anda ketahui sekarang ??