Isi kandungan:
- Langkah 1: Menggunakan Notepad
- Langkah 2: Menambah Pokok Dokumen HTML Asas
- Langkah 3: Menyimpan Sebagai Halaman.html
- Langkah 4: Menambah Tajuk ke Halaman Web Anda
- Langkah 5: Menambah Kandungan ke Halaman Web Anda
- Selamat datang ke laman web saya
- Langkah 6: Melihat Perubahan Kita Sejauh Ini
- Langkah 7: Menambah Tag Perenggan
- Selamat datang ke laman web saya
- Langkah 8: Beri Warna
- Selamat datang ke laman web saya
- Langkah 9: Menambah Gambar
- Selamat datang ke laman web saya
- Langkah 10: Melihat Produk Akhir
Video: Laman Web Bare Bones: 10 Langkah
2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11
Hari ini kita akan membuat laman web tulang yang sangat sederhana dari awal. Kami akan membincangkan elemen HTML, menggayakan halaman web anda (warna, fon, penjajaran, dll.), Dan akhirnya bagaimana memasukkan gambar ke laman web anda!
Pada akhir arahan ini, anda akan mempunyai kemahiran asas untuk membuat laman web dari awal, dan mengetahui bahawa pengekodan tidak semudah yang disangka!
Langkah 1: Menggunakan Notepad
Kami akan menggunakan Notepad di windows untuk membuat laman web pertama kami. Walaupun mana-mana editor teks akan melakukannya, notepad sudah dipasang sebelumnya pada mesin Windows jadi ini adalah titik permulaan yang baik.
Untuk membuka notepad, pergi ke bar carian anda di sudut kiri bawah skrin anda dan ketik "Notepad". Kemudian pilih aplikasi "Notepad" yang muncul dalam hasil carian. Tetingkap baru akan dibuka.
Langkah 2: Menambah Pokok Dokumen HTML Asas
Semua halaman web mesti mengikuti struktur rangka standard agar penyemak imbas web anda (Chrome, Firefox, Edge, Internet Explorer, Safari…) memproses dan memaparkan halaman web anda.
Ini dipanggil pokok dokumen html. Di Notepad, ketik "elemen" html atau "tag" seperti yang ditunjukkan dalam tangkapan skrin. Jangan ragu untuk menyalin dan menampal juga:
Langkah 3: Menyimpan Sebagai Halaman.html
Sekarang kita mempunyai struktur html asas kita di Notepad, mari simpannya agar kita tidak kehilangan pekerjaan, dan supaya kita dapat melihat perubahan kita semasa kita maju di sepanjang Instructable.
- Pilih 'Fail'> 'Simpan sebagai …' (Tangkapan Skrin 1)
- Tukar Jenis Fail ke 'Semua Fail' (Tangkapan Skrin 2)
- Beri nama fail pilihan anda. Pastikan anda mengetahui di mana anda menyimpan dokumen di komputer anda supaya anda dapat membukanya kemudian. NOTE: Bahagian yang paling penting dalam menyimpan fail ini ialah menambahkan ".html" di hujung nama fail. Ini akan membolehkan komputer anda mengenalinya sebagai laman web. Oleh itu, jika anda mahu menamakan fail anda sebagai "my_webpage", pastikan untuk menambahkan.html di hujungnya, mis. "my_webpage.html"
Langkah 4: Menambah Tajuk ke Halaman Web Anda
Oleh itu, kami mempunyai struktur html asas yang diperlukan agar penyemak imbas web dapat menafsirkan dan memaparkan laman web kami, tetapi kami tidak mempunyai kandungan apa pun. Mari ubah itu!
Perkara pertama yang harus kita lakukan ialah memberikan Tajuk ke laman web kita. Sebilangan besar laman web mempunyai tajuk. Inilah yang dipaparkan pada tab di penyemak imbas web anda (lihat tangkapan skrin). Saya akan memberi tajuk laman web saya "Laman web Taylor". Untuk melakukan ini, kita perlu menambahkan elemen 'tajuk'.
Laman Web Taylor
Pada ketika ini anda akan melihat bahawa setiap tag mempunyai tag "pembuka" dan tag "penutup". Seperti
dan.
Ini untuk mengetahui di mana tajuk bermula, dan di mana ia berakhir. Hampir semua tag html mengikuti ini, namun terdapat beberapa pengecualian.
Langkah 5: Menambah Kandungan ke Halaman Web Anda
Kami mempunyai Tajuk untuk laman web kami, tetapi kami masih belum mempunyai kandungan sebenarnya. Mari tambah bakat!
Kami telah menambahkan tajuk ke laman web kami menggunakan elemen 'tajuk'. Mari berikan halaman web kami tajuk yang menarik dan menarik dengan menggunakan elemen 'h1' yang merupakan elemen tajuk.
Laman Web Taylor
Selamat datang ke laman web saya
Langkah 6: Melihat Perubahan Kita Sejauh Ini
Kami mempunyai tajuk, kami mempunyai beberapa kandungan, mari lihat laman web kami untuk mengetahui sejauh mana ia sampai sekarang.
- Simpan fail anda di notepad
- Pergi ke tempat anda menyimpan fail anda dan klik dua kali. Ia akan dibuka secara automatik dalam penyemak imbas web lalai anda. Nampak baik!
Langkah 7: Menambah Tag Perenggan
Kami mempunyai tajuk, tajuk, sekarang mari kita tambahkan perenggan dengan beberapa teks lagi. Nama elemen untuk perenggan adalah 'p'. Anda dapat melihat penggunaannya di bawah:
Laman Web Taylor
Selamat datang ke laman web saya
Hari ini kita akan belajar membuat laman web yang sangat mudah ini!
Catatan: Anda dapat melihat perubahan anda bila-bila masa anda suka dengan menyimpan notepad dan membuka fail.
Langkah 8: Beri Warna
Kami mempunyai laman web kami yang bergulir, tetapi cukup jelas. Mari beri warna perenggan kita!
Kita dapat mewarnai elemen yang berbeza dengan menambahkan atribut 'style' ke tag 'p' seperti yang diperincikan di bawah:
Laman Web Taylor
Selamat datang ke laman web saya
Hari ini kita akan belajar membuat laman web yang sangat mudah ini!
Langkah 9: Menambah Gambar
Apakah laman web tanpa gambar? Mari tambahkan gambar ke laman web kami!
Langkah pertama adalah mencari gambar yang anda suka. Saya menggunakan gambar google untuk mencari retriever emas. Tarik gambar ke atas dan pastikan url berakhir dengan.jpg,.png,.gif,.jpg, dll.
Setelah memilih gambar anda, kami perlu menambahkannya ke halaman html menggunakan tag 'img'. Gambar saya ialah:
Tambahkan ke halaman anda menggunakan tag 'img' dengan atribut 'src':
Laman Web Taylor
Selamat datang ke laman web saya
Hari ini kita akan belajar membuat laman web yang sangat mudah ini!
Langkah 10: Melihat Produk Akhir
Simpan fail notepad, dan buka produk akhir. Anda mesti melihat laman web anda!
Disyorkan:
Cara Membuat Laman Web yang Ramping dan Sederhana Dengan Langkah-langkah Bootstrap 4: 7
Cara Membuat Laman Web yang Ramping dan Sederhana Dengan Bootstrap 4: Tujuan Instruksional ini adalah untuk memberi mereka yang biasa dengan pengaturcaraan - HTML atau sebaliknya - pengenalan mudah untuk membuat portfolio dalam talian dengan Bootstrap 4. Saya ' akan membimbing anda melalui persediaan awal laman web, bagaimana membuat beberapa
Cara Membuat Laman Web (Panduan Langkah demi Langkah): 4 Langkah
Cara Membuat Laman Web (Panduan Langkah-demi-Langkah): Dalam panduan ini, saya akan menunjukkan kepada anda bagaimana kebanyakan pembangun laman web membina laman web mereka dan bagaimana anda dapat mengelakkan pembangun laman web mahal yang sering terlalu terhad untuk laman web yang lebih besar. Saya juga bantu anda mengelakkan beberapa kesilapan yang saya lakukan semasa saya mula
Tutorial IO Pemandu Web Menggunakan Laman Web Langsung dan Contoh Kerja: 8 Langkah
Tutorial IO Pemandu Web Menggunakan Laman Web Langsung dan Contoh Bekerja: Tutorial IO Pemandu Web Menggunakan Laman Web Langsung Dan Contoh Bekerja Kemas kini Terakhir: 07/26/2015 (Selalunya periksa semula kerana saya mengemas kini arahan ini dengan lebih terperinci dan contoh) Latar belakang Saya baru-baru ini cabaran menarik yang dikemukakan kepada saya. Saya perlu
Memasang Arduino Clone Board Really Bare Bones (RBBB) - DIKEMASKINI: 16 Langkah
Memasang Arduino Clone Really Bare Bones Board (RBBB) - DIKEMASKINI: KEMASKINI 8/16/2008: menambah gambar konfigurasi papan yang berbeza pada langkah terakhir. RBBB dari Modern Device Company adalah klon Arduino kecil yang indah. Sekiranya anda mempunyai projek Arduino yang memerlukan jejak kecil atau papan khusus yang murah, ini
Bare Bones Breadboard Arduino Label: 4 Langkah
Bare Bones Breadboard Arduino Labels: Instructable ini sungguh mudah. Saya terinspirasi oleh antara muka uDuino telanjang tymm untuk papan roti Arduino, tetapi berpendapat bahawa satu perkara hilang. Huraian pin Arduino, D0, D1, A0, A2, dan lain-lain, tidak sesuai langsung dengan ATMeg