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
, , , and . To add an image, a
Langkah 4. Menyimpan file
Simpan file HTML ke dalam folder yang telah Anda buat pada langkah pertama dengan mengklik opsi "Simpan" seperti yang ditunjukkan di bawah ini
Akibatnya, Anda akan diminta untuk menentukan nama file dan jenisnya. Setelah melakukannya, klik tombol "Simpan" seperti yang ditunjukkan di bawah ini
Langkah 5. Buka File Dengan Browser Web
Untuk melihat bagaimana file HTML muncul di browser, ikuti langkah-langkah yang tercantum di bawah ini
- Pertama, buka folder tempat file HTML disimpan
- Pilih file dan klik kanan pada file. Akibatnya, menu drop-down akan muncul
- Kemudian, 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 berikut
Ini adalah bagaimana kita dapat membuat halaman HTML sederhana. Anda dapat menerapkan gaya ke elemen HTML ini menggunakan CSS
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 tag in the head section of the HTML file.
- Inside it, h1 is used to access the
tag on which we will apply different properties.
- Untuk menambahkan warna font, gunakan properti "warna" dan tetapkan nilainya sebagai "merah"
- Nilai properti "text-align" ditetapkan sebagai "center", yang berarti tajuk akan ditampilkan di tengah
- Kemudian, untuk menggarisbawahi heading, properti "text-decoration" ditetapkan sebagai "8px underline grey", di mana 8px mewakili lebar garis, underline adalah properti dekorasi, dan abu-abu adalah warnanya. Pengguna dapat mengatur nilai properti sesuai dengan preferensi mereka
- Similarly, we will apply some properties to the
element as well.
Di bawah ini adalah kode untuk skenario yang dijelaskan di atas
< kepala >
< judul >Halaman HTML Pertama Saya< /title>
< gaya >
h1 {
warna . merah;
teks- sejajarkan . pusat;
dekorasi teks. 8px menggarisbawahi abu-abu;
}
p {
teks- sejajarkan . pusat;
font- ukuran . 20 piksel;
warna . biru;
}
< /gaya >
< /kepala >
Simpan file dan kemudian buka di browser web
Itu keren. Kami telah belajar membuat halaman HTML sederhana dan menatanya dengan beberapa properti CSS
Kesimpulan
Untuk mengembangkan situs web, pengguna perlu mempelajari bahasa HTML dan CSS terlebih dahulu karena bahasa HTML menyediakan struktur halaman web, dan untuk mempercantik halaman web, kami menggunakan properti CSS. Properti ini diatur sesuai dengan pilihan pengguna. Untuk membuat file HTML sederhana, Anda dapat menggunakan editor teks atau editor kode dan mengikuti prosedur yang diberikan. Panduan ini telah menjelaskan cara membuat halaman HTML sederhana dengan CSS dengan bantuan implementasi praktis