Daftar Isi:
- Langkah 1: Menggunakan Notepad
- Langkah 2: Menambahkan Pohon Dokumen HTML Dasar
- Langkah 3: Menyimpan Sebagai Halaman.html
- Langkah 4: Menambahkan Judul ke Halaman Web Anda
- Langkah 5: Menambahkan Konten ke Halaman Web Anda
- Selamat datang di halaman web saya
- Langkah 6: Melihat Perubahan Kami Sejauh Ini
- Langkah 7: Menambahkan Tag Paragraf
- Selamat datang di halaman web saya
- Langkah 8: Berikan Beberapa Warna
- Selamat datang di halaman web saya
- Langkah 9: Menambahkan Gambar
- Selamat datang di halaman web saya
- Langkah 10: Melihat Produk Akhir
Video: Halaman Web Bare Bones: 10 Langkah
2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57
Hari ini kita akan membuat halaman web yang sangat sederhana dari awal. Kami akan berbicara tentang elemen HTML, menata halaman web Anda (warna, font, perataan, dll.), dan akhirnya cara menyisipkan gambar ke halaman web Anda!
Pada akhir instruksi ini, Anda akan memiliki keterampilan dasar untuk membuat halaman web dari awal, dan menemukan bahwa pengkodean tidak sesulit kelihatannya!
Langkah 1: Menggunakan Notepad
Kami akan menggunakan Notepad di windows untuk membuat halaman web pertama kami. Meskipun editor teks apa pun akan melakukannya, notepad sudah diinstal sebelumnya pada mesin Windows sehingga ini adalah titik awal yang bagus.
Untuk membuka notepad, buka bilah pencarian Anda di sudut kiri bawah layar Anda dan ketik "Notepad". Kemudian pilih aplikasi "Notepad" yang muncul di hasil pencarian. Sebuah jendela baru harus terbuka.
Langkah 2: Menambahkan Pohon Dokumen HTML Dasar
Semua halaman web harus mengikuti struktur kerangka standar agar browser web Anda (Chrome, Firefox, Edge, Internet Explorer, Safari…) memproses dan menampilkan halaman web Anda.
Ini disebut pohon dokumen html. Di Notepad, ketik html "elemen" atau "tag" seperti yang ditampilkan di tangkapan layar. Jangan ragu untuk menyalin dan menempel juga:
Langkah 3: Menyimpan Sebagai Halaman.html
Sekarang kita memiliki struktur html dasar kita di Notepad, mari kita simpan agar kita tidak kehilangan pekerjaan apapun, dan agar kita dapat melihat perubahan kita saat kita maju di sepanjang Instructable.
- Pilih 'File' > 'Save as…' (Screenshot 1)
- Ubah Jenis File menjadi 'Semua File' (Screenshot 2)
- Berikan file Anda nama pilihan Anda. Pastikan untuk mencatat di mana Anda menyimpan dokumen di komputer Anda sehingga Anda dapat membukanya nanti. CATATAN: Bagian terpenting dari menyimpan file ini adalah menambahkan ".html" di akhir nama file. Ini akan memungkinkan komputer Anda mengenalinya sebagai halaman web. Jadi jika Anda ingin memberi nama file Anda "my_webpage", pastikan untuk menambahkan.html di akhir itu, mis. "halaman web_saya.html"
Langkah 4: Menambahkan Judul ke Halaman Web Anda
Jadi kami memiliki struktur html dasar yang diperlukan browser web untuk menafsirkan dan menampilkan halaman web kami, tetapi kami tidak memiliki konten apa pun. Mari kita ubah itu!
Hal pertama yang harus kita lakukan adalah memberikan Judul ke halaman web kita. Hampir semua halaman web memiliki judul. Inilah yang ditampilkan pada tab di browser web Anda (lihat tangkapan layar). Saya akan memberi halaman web saya judul "Situs Web Taylor". Untuk melakukan ini, kita perlu menambahkan elemen 'judul'.
Situs web Taylor
Pada titik ini Anda akan melihat bahwa setiap tag memiliki tag "pembuka" dan tag "penutup". Seperti
dan.
Ini untuk membedakan di mana judul dimulai, dan di mana itu berakhir. Hampir semua tag html mengikuti ini, namun ada beberapa pengecualian.
Langkah 5: Menambahkan Konten ke Halaman Web Anda
Yah, kami memiliki Judul untuk halaman web kami, tetapi kami masih belum memiliki konten yang sebenarnya untuk itu. Mari tambahkan beberapa bakat!
Kami telah menambahkan judul ke halaman web kami menggunakan elemen 'judul'. Mari berikan halaman web kita sebuah header yang besar dan menarik perhatian dengan menggunakan elemen 'h1' yang merupakan elemen heading.
Situs web Taylor
Selamat datang di halaman web saya
Langkah 6: Melihat Perubahan Kami Sejauh Ini
Kami memiliki judul, kami memiliki beberapa konten, mari kita periksa halaman web kami untuk mengetahui sejauh ini.
- Simpan file Anda di notepad
- Pergi ke tempat Anda menyimpan file Anda dan klik dua kali. Ini akan terbuka secara otomatis di browser web default Anda. Terlihat bagus!
Langkah 7: Menambahkan Tag Paragraf
Kami memiliki judul, heading, sekarang mari tambahkan paragraf dengan beberapa teks lagi. Nama elemen untuk paragraf adalah 'p'. Anda dapat melihat penggunaannya di bawah ini:
Situs web Taylor
Selamat datang di halaman web saya
Hari ini kita akan belajar cara membuat halaman web yang sangat sederhana ini!
Catatan: Anda dapat melihat perubahan Anda kapan saja Anda suka dengan menyimpan notepad dan membuka file.
Langkah 8: Berikan Beberapa Warna
Kami memiliki halaman web kami yang bergulir, tapi itu cukup sederhana. Mari beri tag paragraf kita beberapa warna!
Kita dapat mewarnai elemen yang berbeda dengan menambahkan atribut 'style' ke tag 'p' seperti yang dijelaskan di bawah ini:
Situs web Taylor
Selamat datang di halaman web saya
Hari ini kita akan belajar cara membuat halaman web yang sangat sederhana ini!
Langkah 9: Menambahkan Gambar
Apa itu situs web tanpa gambar? Mari tambahkan gambar ke situs web kami!
Langkah pertama adalah menemukan gambar yang Anda sukai. Saya menggunakan gambar google untuk mencari golden retriever. Tarik gambar ke atas dan pastikan url berakhiran.jpg,.png,.gif,.jpg, dll.
Setelah Anda memilih gambar Anda, kami perlu menambahkannya ke halaman html menggunakan tag 'img'. Gambar saya adalah:
Tambahkan ke halaman Anda menggunakan tag 'img' dengan atribut 'src':
Situs web Taylor
Selamat datang di halaman web saya
Hari ini kita akan belajar cara membuat halaman web yang sangat sederhana ini!
Langkah 10: Melihat Produk Akhir
Simpan file notepad, dan buka produk akhir. Anda akan melihat halaman web Anda!
Direkomendasikan:
Mengontrol Kecerahan Led oleh Raspberry Pi dan Halaman Web Kustom: 5 Langkah
Mengontrol Kecerahan Led oleh Raspberry Pi dan Halaman Web Kustom: Menggunakan server apache di pi saya dengan php, saya menemukan cara untuk mengontrol kecerahan led menggunakan penggeser dengan halaman web khusus yang dapat diakses di perangkat apa pun yang terhubung ke jaringan yang sama dengan pi Anda .Ada banyak cara di mana hal ini dapat
ESP8266 POV Fan Dengan Jam dan Pembaruan Teks Halaman Web: 8 Langkah (dengan Gambar)
ESP8266 POV Fan Dengan Jam dan Pembaruan Teks Halaman Web: Ini adalah kecepatan variabel, POV (Persistence Of Vision), Kipas yang sebentar-sebentar menampilkan waktu, dan dua pesan teks yang dapat diperbarui "on the fly."Kipas POV juga merupakan server web satu halaman yang memungkinkan Anda mengubah dua teks saya
Cara Membuat Halaman Web Sederhana Menggunakan Tanda Kurung untuk Pemula: 14 Langkah
Cara Membuat Halaman Web Sederhana Menggunakan Tanda Kurung untuk Pemula: Pengantar Petunjuk berikut memberikan panduan langkah demi langkah untuk membuat halaman web menggunakan Tanda Kurung. Brackets adalah editor kode sumber dengan fokus utama pada pengembangan web. Dibuat oleh Adobe Systems, ini adalah perangkat lunak bebas dan sumber terbuka berlisensi
Merakit Klon Arduino Benar-Benar Bare Bones Board (RBBB) - DIPERBARUI: 16 Langkah
Merakit Benar-Benar Bare Bones Board (RBBB) Arduino Clone - DIPERBARUI: UPDATE 16/8/2008: menambahkan gambar konfigurasi papan yang berbeda pada langkah terakhir. RBBB dari Modern Device Company adalah tiruan Arduino kecil yang luar biasa. Jika Anda memiliki proyek Arduino yang membutuhkan tapak kecil atau papan khusus yang murah, ini
Bare Bones Breadboard Arduino Label: 4 Langkah
Bare Bones Breadboard Arduino Labels: Instruksi ini sangat sederhana. Saya terinspirasi oleh antarmuka tulang telanjang uDuino tymm untuk membuat papan tempat memotong roti di Arduino, tetapi berpikir bahwa ada satu hal yang hilang. Deskripsi pin Arduino, D0, D1, A0, A2, dll, tidak cocok langsung dengan ATMeg