Memulai pengembangan web dengan membuat proyek web sederhana dalam Visual Studio Code yang berisi halaman web, file CSS, dan file JavaScript. Pelajari cara menggunakan alat pengembang di browser untuk memeriksa pekerjaan Anda

Catatan

Ini adalah modul proyek terpandu di mana Anda akan menyelesaikan proyek ujung ke ujung dengan mengikuti petunjuk langkah demi langkah

Saat memulai pengembangan web, pemula mungkin tidak mengetahui metode untuk membuat halaman HTML sederhana dan menjalankannya. Jadi, manual ini akan menunjukkan

Prasyarat untuk Membuat Halaman Web

Untuk membuat halaman web, prasyaratnya adalah

• Editor Teks
• Peramban web

1. Editor Teks sebagai Prasyarat untuk Membuat Halaman Web

Program perangkat lunak komputer yang memungkinkan pengguna untuk mengedit, menyimpan, dan mencetak teks adalah editor teks. Beberapa editor teks dapat digunakan untuk membuat program web, halaman web, dan lainnya, seperti Visual Studio Code, Sublime Text, Notepad, dan lain sebagainya. Jika Anda seorang pemula, maka Notepad relatif mudah digunakan. Tetapi untuk proyek besar, lebih baik menggunakan editor lain seperti Sublime Text atau Visual Studio Code

2. Web Browser sebagai Prasyarat untuk Melihat Halaman Web

Peramban web adalah perangkat lunak yang membawa Anda ke mana saja di internet. Ini mengambil informasi dan menampilkannya di layar

Bagaimana Cara Membuat Halaman HTML Sederhana?

Sekarang, mari kita mulai membuat halaman HTML sederhana selangkah demi selangkah

Langkah 1. Buat Folder Kosong
Pertama, buat folder kosong sebagai tempat penyimpanan proyek kita

Langkah 2. Buka Editor Teks
Untuk menulis kode HTML, pertama, pilih editor teks pilihan Anda. Misalnya, kita akan menggunakan Notepad++, dan ruang kerjanya entah bagaimana akan terlihat seperti ini

Langkah 3. Tambahkan Elemen HTML ke Editor Teks
Elemen HTML digunakan untuk membangun berbagai komponen dokumen HTML. Misalnya, untuk menambahkan paragraf,

tag is used, heading tags are denoted as

,

, , , , and . To add an image, a tag can be utilized. All these tags are added within the starting and closing tags of the root element . (adsbygoogle = window.adsbygoogle || []).push({}); Misalnya, kami telah menambahkan kode sampel HTML di file kami sebagai berikut< html >< kepala >< judul > Halaman HTML Pertama Saya < /kepala >< tubuh >< h1 > HTML < p > Selamat datang di Halaman HTML pertama saya. < /p >< /tubuh >< /html >Gambar di bawah menunjukkan contoh kode yang ditulis di editor Notepad++Langkah 4. Menyimpan fileSimpan file HTML ke dalam folder yang telah Anda buat pada langkah pertama dengan mengklik opsi "Simpan" seperti yang ditunjukkan di bawah ini (adsbygoogle = window.adsbygoogle || []).push({}); Akibatnya, Anda akan diminta untuk menentukan nama file dan jenisnya. Setelah melakukannya, klik tombol "Simpan" seperti yang ditunjukkan di bawah iniLangkah 5. Buka File Dengan Browser WebUntuk melihat bagaimana file HTML muncul di browser, ikuti langkah-langkah yang tercantum di bawah iniPertama, buka folder tempat file HTML disimpanPilih file dan klik kanan pada file. Akibatnya, menu drop-down akan munculKemudian, pilih opsi "Buka Dengan" dan kemudian pilih browser yang ingin Anda gunakan untuk membuka halaman web. Misalnya, kami telah memilih "Google Chrome"Dengan memilih browser, kode HTML akan menghasilkan hasil sebagai berikutIni adalah bagaimana kita dapat membuat halaman HTML sederhana. Anda dapat menerapkan gaya ke elemen HTML ini menggunakan CSS (adsbygoogle = window.adsbygoogle || []).push({}); Bagaimana Menata Halaman HTML Sederhana?

CSS, atau Cascading Style Sheet, digunakan untuk menentukan bagaimana elemen HTML ditampilkan di browser web. Ini memungkinkan pengguna untuk menerapkan beberapa properti gaya ke elemen HTML sehingga halaman web terlihat lebih menarik dan menarik

Sekarang, mari gaya halaman HTML yang dibuat di atas dengan bantuan properti CSS

• First, add a