Membangun Situs Web Anda Sendiri untuk Pemula: 5 Langkah

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

Apakah Anda pernah bermimpi menjadi seorang programmer komputer atau pernah menggunakan situs web, mari kita hadapi itu, hampir semua dari kita, teknologi informasi telah menjadi tulang punggung bisnis. Meskipun pemrograman mungkin tampak sedikit menakutkan pada awalnya, tujuan saya adalah untuk mengajari Anda dasar-dasar dasar desain web sehingga setelah tutorial ini, Anda akan dapat membuat halaman web Anda sendiri. Dengan itu, mari kita lakukan!

Perlengkapan

• PC Macintosh atau Windows (meskipun distro Linux juga dapat digunakan, saya melewatkannya untuk saat ini karena ini adalah pengantar pemula).
• Editor teks pilihan Anda (Notepad di Windows, TextEdit di Mac) atau IDE pilihan Anda. Dalam pengalaman saya, saya menemukan Visual Studio Code bekerja paling baik untuk diri saya sendiri, jadi saya juga merekomendasikan untuk memeriksanya di sini: https://code.visualstudio.com/ belum lagi itu berfungsi di semua platform OS.

Langkah 1: Tag dan Sedikit Sejarah

Setelah Anda memutuskan editor teks atau IDE pilihan Anda, mari kita mulai dengan dasar-dasarnya.

Percaya atau tidak, HTML atau HyperText Markup Language telah ada selama hampir 30 tahun sekarang dan setiap tahun semakin banyak peningkatan pada bahasa tersebut. Sekarang, Anda mungkin bertanya, bagaimana browser menafsirkan apa yang akan ditampilkan di layar? Ini dilakukan dalam beberapa bagian:

Pemformatan dokumen HTML itu mudah. Anda memiliki dua bagian yang dikenal sebagai kepala dan tubuh. Kepala situs web berisi kode yang tidak terlihat oleh pengguna. Ini digunakan untuk menautkan stylesheet dan mendeklarasikan bit lain yang diperlukan agar situs dapat ditampilkan dengan benar. Mengikuti kepala, tubuh seperti yang terdengar, tubuh situs web. Di sinilah Anda bisa menyuarakan suara Anda dan menunjukkan kepada penonton keterampilan HTML Anda yang fantastis! Sekarang tidak semudah hanya mengetik teks ke dalam isi dan menampilkannya persis seperti yang Anda inginkan, tetapi hampir semudah itu dengan penggunaan hal-hal yang kita sebut tag.

Berikut adalah beberapa tag HTML dasar:

• title – yang digunakan untuk memberi tahu browser apa judul halaman tersebut. Ini juga yang Anda lihat saat melihat tab halaman web.
• h1, h2, h3, h4 – yang digunakan untuk ukuran header yang berbeda dengan h1 menjadi yang terbesar dan h4 menjadi yang terkecil. Saya akan membahas lebih lanjut tentang ini di bagian selanjutnya.
• p – paragraf, digunakan untuk menulis paragraf teks. Seperti paragraf di atas kertas.
• br – break, yang menyisipkan break sesuai dengan teks.
• a – digunakan untuk membuat tautan ke halaman lain, seperti tautan yang dapat diklik.
• img – digunakan untuk menautkan gambar ke halaman web.
• ul, ol, li – daftar tidak berurutan, daftar berurutan, dan item daftar.
• – digunakan untuk membuat komentar sebaris dalam kode yang tidak akan dilihat oleh pengguna akhir.

Dan berikut adalah beberapa tag CSS (visual):

• color – digunakan untuk menetapkan warna tertentu ke elemen atau set tertentu di halaman web.
• font-size – digunakan untuk mengubah ukuran font pada halaman.
• background-color – digunakan untuk mengubah warna latar belakang elemen tertentu atau seluruh halaman.

Saya juga telah melampirkan lembar contekan kecil untuk membantu Anda jika Anda merasa sedikit tersesat, tetapi jangan khawatir, Anda akan segera menguasainya! Selain itu, www.w3schools.com juga merupakan sumber yang bagus untuk semua pertanyaan pemrograman Anda. Mereka pasti telah menyelamatkan saya waktu atau juga.

Pada dasarnya cara browser membaca file itu mudah. Ini berjalan baris demi baris dan memproses fungsi demi fungsi. Karakter digunakan untuk mendeklarasikan tag seperti

dan digunakan untuk menutup tag seperti

. Ini penting jika tidak, browser tidak akan berhenti di mana. Di antara

dan

tag, adalah tempat Anda memasukkan apa pun yang Anda suka!

Langkah 2: Pengaturan Editor

Sekarang setelah kita membahas sedikit tentang elemen dasar situs web HTML, mari selami dan coba sendiri. Untuk langkah selanjutnya saya akan menggunakan Visual Studio Code untuk memprogram situs web, tetapi tata letak kodenya akan sama jika Anda lebih nyaman menggunakan Notepad atau TextEdit.

Dalam Notepad:

• Dengan Notepad, program diluncurkan dengan file kosong yang membuatnya sangat mudah untuk memulai. Ini juga akan memungkinkan kita untuk melompat beberapa langkah dibandingkan dengan menggunakan VS Code. Mari kita mulai dengan menyimpan file dalam format yang benar.
• Klik File > Simpan
• Masukkan nama untuk file Anda diikuti dengan.html dan di bawah Simpan sebagai jenis, pilih semua file. Klik simpan.

Dalam Kode VS:

• Cara terbaik bagi Anda untuk memanfaatkan semua fitur IDE adalah memulai dengan membuat file dan memberi tahu IDE jenis file apa itu. Hal ini dapat dilakukan sebagai berikut:
• Klik File > File Baru
• File kosong terbuka
• Selanjutnya, Anda akan ingin memulai dengan menyimpan file, meskipun kosong, karena ini akan memungkinkan IDE untuk dapat memahami jenis file apa yang akan menjadi produk akhir. Saat menyimpan pastikan untuk menyertakan ekstensi.html di akhir nama file. Klik simpan.

Langkah 3: Cetak Biru

Setelah Anda berhasil menyimpan file name.html Anda, mari kita mulai dengan membuat kerangka kerja untuk halaman web kita. Ingat dari atas bagian penting apa dari file yang perlu kita deklarasikan sebelum kita bisa mulai dengan membuat sisa halaman HTML. Pro-tip: saat memulai kerangka kerja untuk situs, tag HTML !DOCTYPE memberi tahu browser bahwa file yang dibacanya adalah file html. Ini bisa berguna jika Anda memiliki berbagai jenis kode dalam file yang sama dan ingin beralih antar juru bahasa. Untuk ruang lingkup instruksi ini, kami tidak akan terlalu banyak menyentuh hal ini tetapi jika setelah Instruksi ini Anda penasaran untuk memeriksa lebih lanjut tentang pengembangan HTML, jangan ragu untuk mencobanya. Saya akan memasukkan tag HTML !DOCTYPE di bagian atas file untuk praktik terbaik. Ingatlah untuk membuka dan menutup dengan.

Di sinilah menyimpan file sebelum Anda memulai pemrograman berguna, sekarang IDE tahu bahwa itu bekerja dengan file HTML, itu akan menggunakan intellisense untuk menyelesaikan ekspresi dan menawarkan saran sehingga Anda tidak sengaja lupa untuk menutup tag. Perhatikan bahwa bagi Anda yang menggunakan Notepad, intellisense tidak tersedia seperti di IDE. Kita mulai dengan memasukkan tag head dan body sebagai berikut: (lihat gambar kedua).

Sekarang setelah penyiapan dokumen selesai, kita dapat pergi ke balapan dan bersenang-senang!

Langkah 4: Kode; Kode; Kode;

Kita bisa mulai dengan memasukkan judul untuk file yang baru kita buat. Masukkan apa pun yang Anda suka. Ingatlah bahwa ini adalah nama yang muncul di tab browser. Mari kita juga mulai dengan memasukkan heading untuk situs kita. Ingat dari sebelumnya bagaimana kita melakukan ini. Apakah saya mendengar h1/2/3/4? Itu benar!

Sebelum melanjutkan, saya merasa terbantu untuk membuka file kita di jendela browser sehingga kita dapat melihat secara real time bagaimana perubahan kita tercermin di browser. Anda dapat melakukan ini dengan mengklik File > Simpan untuk menyimpan file, menavigasi ke folder tempat file HTML disimpan, bagi saya ini adalah desktop, dan gunakan browser pilihan Anda untuk membuka file dan maukah Anda melihatnya, itu halaman web Anda! Catatan: Saya pribadi menggunakan Safari sebagai browser pilihan saya di komputer saya, namun, dalam pengembangan web, Firefox adalah browser standar emas untuk pengujian karena berfungsi dengan hampir semua bahasa skrip web.

Seperti yang Anda lihat, judul ditampilkan di tab, serta melihat judul h1 kami. Saya lebih suka membuka kedua jendela browser file di samping IDE seperti ketika Anda membuat perubahan di IDE dan menyimpannya, perubahannya instan di browser.

Jangan ragu untuk mencoba menambahkan tag dan bermain-main dengan berbagai hal yang dapat Anda lakukan dengan HTML. Seperti yang Anda lihat di bawah, saya telah menambahkan beberapa paragraf, jeda, hyperlink eksternal ke Instructables.com, sebuah gambar, (yang dapat ditautkan dari sumber eksternal atau dalam direktori yang sama dengan tempat file. HTML disimpan), contoh daftar tidak berurutan, daftar berurutan, dan terakhir komentar.

Jika Anda ingin mencoba menambahkan beberapa warna, dan opsi pengaturan, Anda dapat memasukkan tag gaya di kepala file. Ini adalah titik di mana ini bergeser dari HTML ke CSS tetapi demi visual, saya akan memasukkan beberapa baris sehingga Anda dapat melihat cara kerjanya. Pada dasarnya cara kerja CSS adalah memungkinkan Anda untuk mengontrol elemen HTML di dalam fungsi dengan menggunakan tanda kurung {} untuk memasukkan kode Anda ke elemen HTML tertentu.

Langkah 5: Pikiran Terakhir

Dan di sana Anda memilikinya; Anda telah berhasil membuat halaman web pertama Anda! Karena ini adalah panduan pemula, saya ingin membuat pengalaman pertama Anda dengan HTML menjadi menyenangkan. Cara terbaik untuk belajar dari pengalaman saya adalah menyelami dan mencoba berbagai hal secara langsung, melihat apa yang dapat Anda lakukan dengan kode Anda dan juga melihat bagaimana Anda dapat memecahkan kode Anda. Ini membangun integritas dan membantu Anda untuk lebih memahami bagaimana dan mengapa kode bekerja seperti itu. Ingatlah bahwa www. W3Schools.com adalah sumber yang bagus untuk pertanyaan dan mereka bahkan menawarkan kotak pasir virtual di dalam browser untuk mencoba kode Anda. Semoga Anda telah belajar sesuatu dan selamat coding!