Membina Laman Web Anda Sendiri untuk Pemula: 5 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Sama ada anda pernah bermimpi menjadi pengaturcara komputer atau pernah menggunakan laman web, yang boleh dilihat, hampir semua kita, teknologi maklumat telah menjadi tulang belakang perniagaan. Walaupun pengaturcaraan mungkin kelihatan agak menakutkan pada mulanya, tujuan saya adalah untuk mengajar anda asas-asas asas reka bentuk web sehingga selepas tutorial ini, anda dapat membuat halaman web anda sendiri. Dengan itu, mari kita selesaikan!

Bekalan

• PC Macintosh atau Windows (walaupun distro Linux juga dapat digunakan, saya melupakannya buat masa ini kerana ini adalah pengenalan pemula).
• Pilihan penyunting teks anda (Notepad pada Windows, TextEdit pada Mac) atau IDE pilihan anda. Dalam pengalaman saya, saya mendapati Visual Studio Code berfungsi paling baik untuk diri sendiri, jadi saya juga mengesyorkan untuk melihatnya di sini: https://code.visualstudio.com/ apatah lagi ia berfungsi di semua platform OS.

Langkah 1: Teg dan Sedikit Sejarah

Setelah anda menentukan pilihan editor teks atau IDE anda, mari kita mulakan dengan asas-asasnya.

Percaya atau tidak, HTML atau HyperText Markup Language telah wujud selama hampir 30 tahun sekarang dan dengan setiap tahun semakin banyak peningkatan dalam bahasa tersebut. Sekarang, anda mungkin bertanya, bagaimana penyemak imbas menafsirkan apa yang harus diletakkan di layar? Ini dilakukan dalam beberapa bahagian:

Pemformatan dokumen HTML adalah mudah. Anda mempunyai dua bahagian yang dikenali sebagai kepala dan badan. Kepala laman web mengandungi kod yang tidak dapat dilihat oleh pengguna. Ini digunakan untuk menghubungkan lembaran gaya dan menyatakan bit lain yang diperlukan agar laman web dapat dipaparkan dengan betul. Mengikuti kepala, badan seperti yang terdengar, badan laman web. Di sinilah anda dapat menyampaikan suara anda dan menunjukkan kepada anda kemahiran HTML hebat anda kepada penonton! Sekarang tidak semudah mengetik teks ke dalam badan dan memaparkannya dengan tepat seperti yang anda mahukan, tetapi hampir semudah itu dengan penggunaan perkara yang kita namakan teg.

Berikut adalah beberapa tag HTML asas:

• title - yang digunakan untuk memberitahu penyemak imbas apa tajuk halaman. Ini juga yang anda lihat ketika melihat tab halaman web.
• h1, h2, h3, h4 - yang digunakan untuk saiz tajuk yang berbeza dengan h1 menjadi yang terbesar dan h4 menjadi yang terkecil. Saya akan membahas lebih lanjut mengenai perkara ini di bahagian seterusnya.
• p - ayat, digunakan untuk menulis perenggan teks. Seperti perenggan di atas kertas.
• br - break, yang memasukkan jeda sejajar dengan teks.
• a - digunakan untuk membuat pautan ke halaman lain, seperti pautan yang boleh diklik.
• img - digunakan untuk menghubungkan gambar ke laman web.
• ul, ol, li - senarai yang tidak tersusun, senarai yang dipesan, dan item senarai.
• - digunakan untuk membuat komen sebaris dalam kod yang tidak akan dilihat oleh pengguna akhir.

Berikut adalah beberapa tag CSS (visual):

• warna - digunakan untuk menetapkan warna tertentu pada elemen tertentu atau ditetapkan di laman web.
• font-size - digunakan untuk mengubah ukuran fon di halaman.
• background-color - digunakan untuk menukar warna latar elemen tertentu atau keseluruhan halaman.

Saya juga melampirkan helaian kecil untuk menolong anda sekiranya anda merasa sedikit tersesat, tetapi jangan bimbang, anda akan mendapat maklumat segera! Selain itu, www.w3schools.com juga merupakan sumber yang hebat untuk sebarang pertanyaan pengaturcaraan anda. Mereka pasti menjimatkan masa atau saya juga.

Pada dasarnya bagaimana penyemak imbas membaca fail itu mudah. Ia berjalan mengikut baris dan memproses fungsi mengikut fungsi. Karakter digunakan untuk menyatakan tag seperti

dan digunakan untuk menutup tag seperti

. Ini penting jika tidak penyemak imbas tidak mahu berhenti. Di antara

dan

tag, adalah tempat anda memasukkan apa sahaja yang anda mahukan!

Langkah 2: Persediaan Editor

Sekarang kita telah membahas sedikit tentang elemen asas laman web HTML, mari kita selami dan mencubanya sendiri. Untuk langkah seterusnya, saya akan menggunakan Visual Studio Code untuk memprogramkan laman web, tetapi susun atur kodnya akan sama jika anda lebih selesa dengan hanya menggunakan Notepad atau TextEdit.

Di dalam Notepad:

• Dengan Notepad, program ini dilancarkan dengan fail kosong yang menjadikannya sangat mudah untuk dimulakan. Ini juga membolehkan kita melompat beberapa langkah berbanding dengan menggunakan VS Code. Mari mulakan dengan menyimpan fail dalam format yang betul.
• Klik Fail> Simpan
• Masukkan nama untuk fail anda diikuti oleh.html dan di bawah Simpan sebagai jenis, pilih semua fail. Klik simpan.

Dalam Kod VS:

• Cara terbaik untuk anda memanfaatkan semua ciri IDE adalah bermula dengan membuat fail dan memberitahu IDE jenis fail apa itu. Ini boleh dilakukan seperti berikut:
• Klik Fail> Fail Baru
• Fail kosong dibuka
• Seterusnya, anda ingin memulakan dengan menyimpan fail, walaupun kosong, kerana ini akan membolehkan IDE dapat memahami jenis fail apa yang akan dihasilkan oleh produk akhir. Semasa menyimpan pastikan untuk memasukkan pelanjutan.html di akhir nama fail. Klik simpan.

Langkah 3: Pelan Pembangunan

Setelah berjaya menyimpan fail nama file.html, mari mulakan dengan membuat kerangka untuk laman web kami. Ingat dari atas bahagian utama fail yang perlu kita nyatakan sebelum kita dapat memulakan dengan membuat halaman HTML yang selebihnya. Petua Pro: semasa memulakan kerangka kerja untuk laman web, tag HTML DOCTYPE memberitahu penyemak imbas bahawa fail yang dibacanya adalah fail html. Perkara ini sangat berguna jika anda mempunyai pelbagai jenis kod dalam fail yang sama dan ingin bertukar antara jurubahasa. Untuk ruang lingkup arahan ini, kami tidak akan terlalu banyak menyentuh perkara ini tetapi jika selepas Instruksional ini, anda ingin mengetahui lebih lanjut mengenai pengembangan HTML, jangan ragu untuk mencuba. Saya akan memasukkan tag HTML! DOCTYPE di bahagian atas fail untuk amalan terbaik. Ingatlah untuk membuka dan menutup dengan.

Di sinilah menyimpan fail sebelum anda memulakan pengaturcaraan sangat berguna, sekarang setelah IDE mengetahui bahawa ia berfungsi dengan fail HTML, ia akan menggunakan intellisense untuk menyelesaikan ungkapan dan memberikan cadangan agar anda tidak lupa untuk menutup teg secara tidak sengaja. Perhatikan bahawa bagi anda yang menggunakan Notepad, intellisense tidak tersedia seperti di IDE. Kita mulakan dengan memasukkan tanda kepala dan badan seperti berikut: (lihat gambar kedua).

Setelah persediaan dokumen selesai, kita dapat turun ke perlumbaan dan bersenang-senang!

Langkah 4: Kod; Kod; Kod;

Kita boleh mulakan dengan memasukkan tajuk untuk fail yang baru kita buat. Masukkan apa sahaja yang anda mahukan. Ingat bahawa ini adalah nama yang muncul di tab penyemak imbas. Mari kita mulakan dengan memasukkan tajuk laman web kami. Ingat dari sebelumnya bagaimana kita melakukan ini. Adakah saya mendengar h1 / 2/3/4? Itulah betul!

Sebelum kita meneruskan, saya rasa sangat berguna untuk membuka fail kita di tetingkap penyemak imbas sehingga kita dapat melihat secara nyata bagaimana perubahan kita dapat dilihat dalam penyemak imbas. Anda boleh melakukannya dengan mengklik Fail> Simpan untuk menyimpan fail, menavigasi ke folder di mana fail HTML disimpan, bagi saya ini adalah desktop, dan gunakan penyemak imbas pilihan anda untuk membuka fail dan adakah anda melihatnya, ada laman web anda! Catatan: Saya secara peribadi menggunakan Safari sebagai penyemak imbas pilihan saya di komputer saya, namun, dalam pembangunan web, Firefox adalah penyemak imbas standard emas untuk diuji kerana ia berfungsi dengan hampir setiap bahasa skrip web.

Seperti yang anda lihat, tajuknya dipaparkan di tab, serta melihat tajuk h1 kami. Saya lebih suka membuka kedua-dua tetingkap penyemak imbas fail di samping IDE kerana ketika anda membuat perubahan pada IDE dan menyimpan, perubahannya berlaku dalam penyemak imbas.

Jangan ragu untuk menambahkan tag dan bermain-main dengan pelbagai perkara yang boleh anda lakukan dengan HTML. Seperti yang anda lihat di bawah ini, saya telah menambahkan beberapa perenggan, jeda, hyperlink luaran ke Instructables.com, gambar, (yang boleh dihubungkan dari sumber luaran atau dalam direktori yang sama dengan tempat fail. HTML disimpan), contoh senarai tidak tersusun, senarai teratur, dan terakhir komen.

Sekiranya anda ingin mencuba menambahkan beberapa warna, dan pilihan susunan, anda boleh memasukkan tanda gaya di kepala fail. Ini adalah titik di mana ini beralih dari HTML ke CSS tetapi untuk kepentingan visual, saya akan memasukkan beberapa baris sehingga anda dapat melihat bagaimana ini berfungsi. Pada dasarnya bagaimana CSS berfungsi, ia membolehkan anda mengawal elemen HTML dalam fungsi dengan menggunakan tanda kurung {} untuk memasukkan kod anda untuk elemen HTML tertentu.

Langkah 5: Pemikiran Akhir

Dan di sana anda memilikinya; anda berjaya membuat laman web pertama anda! Kerana ini adalah panduan pemula, saya ingin menjadikan pengalaman pertama anda dengan HTML sebagai sesuatu yang menyeronokkan. Kaedah terbaik untuk belajar berdasarkan pengalaman saya adalah menyelam dan mencuba pelbagai perkara, melihat apa yang boleh anda lakukan dengan kod anda dan juga melihat bagaimana anda dapat memecahkan kod anda. Ini membina integriti dan membantu anda untuk lebih memahami bagaimana dan mengapa kod berfungsi seperti yang berlaku. Ingat bahawa www. W3Schools.com adalah sumber yang baik untuk soalan dan mereka bahkan menawarkan kotak pasir maya dalam penyemak imbas untuk mencuba kod anda. Semoga anda telah mempelajari sesuatu dan selamat membuat kod!