Dengan pengembangan begitu banyak bahasa pengaturcaraan, gaya, dan markup, pembelajaran reka bentuk web menjadi lebih rumit daripada sebelumnya. Nasib baik, terdapat banyak alat yang tersedia untuk membantu anda memulakannya. Cari beberapa sumber asas, seperti tutorial dalam talian atau buku terkini mengenai reka bentuk web. Setelah anda bersedia untuk memulakan, mulailah dengan menguasai asas-asas HTML dan CSS. Kemudian anda boleh mula meneroka bahasa reka bentuk web yang lebih maju, seperti JavaScript!
Langkah-langkah
Kaedah 1 dari 4: Mencari Sumber Reka Bentuk Web
Langkah 1. Periksa dalam talian untuk kursus dan tutorial reka bentuk web
Internet penuh dengan maklumat terperinci mengenai reka bentuk web, dan banyak daripadanya tersedia secara bebas. Anda mungkin bermula dengan mengikuti beberapa kursus dalam talian percuma di Udemy atau CodeCademy, atau menyertai komuniti pengekodan seperti freeCodeCamp. Anda juga boleh mendapatkan tutorial video reka bentuk web di YouTube.
- Sekiranya anda tahu dengan tepat apa yang anda cari, cuba lakukan carian menggunakan istilah tertentu (mis., "Pemilih kelas dalam tutorial CSS").
- Sekiranya anda seorang pemula tanpa pengalaman reka bentuk web, mulailah dengan mempelajari asas pengkodan dalam HTML dan CSS.
Langkah 2. Nantikan kelas di kolej atau universiti tempatan
Sekiranya anda menghadiri kolej atau universiti, periksa dengan jabatan sains komputer sekolah anda atau rujuk katalog kursus anda untuk mengetahui apakah ada kursus reka bentuk web yang tersedia. Sekiranya anda tidak bersekolah, periksa untuk mengetahui sama ada kolej atau universiti berhampiran anda menawarkan kelas pendidikan lanjutan dalam reka bentuk web.
Beberapa universiti menawarkan kelas reka bentuk web dalam talian yang terbuka untuk sesiapa sahaja yang ingin mendaftar. Semak laman web seperti Coursera.org untuk mencari kelas reka bentuk web percuma atau berpatutan yang diajar oleh tenaga pengajar universiti
Langkah 3. Dapatkan beberapa buku reka bentuk web dari kedai buku atau perpustakaan
Buku yang bagus untuk reka bentuk web boleh menjadi rujukan yang tidak ternilai ketika anda belajar dan menggunakan kerajinan anda. Cari buku terkini mengenai reka bentuk web umum atau format dan bahasa pengekodan tertentu yang ingin anda pelajari.
Membaca majalah dan artikel blog mengenai reka bentuk web juga merupakan cara yang baik untuk mempelajari teknik baru, mendapatkan inspirasi, dan mengikuti tren terkini
Langkah 4. Muat turun atau beli beberapa perisian reka bentuk web
Perisian reka bentuk web yang baik dapat membantu anda membina laman web dengan lebih cekap dan berkesan, dan juga bagus untuk membantu anda mempelajari selok-belok penggunaan pengekodan, skrip, dan elemen reka bentuk utama yang lain. Anda mungkin mendapat faedah menggunakan alat seperti:
- Program reka bentuk grafik, seperti Adobe Photoshop, GIMP, atau Sketch.
- Alat pembinaan laman web, seperti WordPress, Chrome DevTools, atau Adobe Dreamweaver.
- Perisian FTP untuk memindahkan fail selesai anda ke pelayan anda.
Langkah 5. Cari beberapa templat laman web untuk dimainkan semasa anda memulakan
Tidak ada salahnya menggunakan templat semasa anda mempelajari asas-asas reka bentuk web. Lakukan templat laman web yang anda suka, dan perhatikan kodnya dengan teliti untuk mendapatkan idea bagaimana pereka menyatukan halaman. Anda juga boleh bereksperimen dengan menukar kod dan menambahkan elemen anda sendiri ke templat.
Lakukan pencarian templat laman web percuma untuk memulakan, atau bereksperimen dengan templat yang disertakan dengan perisian reka bentuk web anda
Kaedah 2 dari 4: Menguasai HTML
Langkah 1. Biasakan diri anda dengan tag HTML asas
HTML adalah bahasa markup sederhana yang digunakan untuk memformat elemen asas laman web. Anda boleh memformat elemen yang berbeza dari laman web anda dengan menggunakan tag. Teg muncul dalam tanda kurung bersudut sebelum dan sesudah setiap elemen, dan memberikan arahan mengenai bagaimana elemen itu berfungsi di halaman. Untuk menutup tag, letakkan a / di hadapan tag terakhir di dalam tanda kurung bersudut.
- Contohnya, jika anda mahu sebilangan teks anda berani, anda akan mengelilingi elemen dengan tag, seperti ini: Teks ini tebal.
- Beberapa tag biasa termasuk (ayat), (jangkar, yang menentukan teks yang dipautkan), dan (fon, yang dapat membantu menentukan pelbagai atribut teks, seperti ukuran dan warna).
- Tag lain menentukan bahagian yang berbeza dari dokumen HTML itu sendiri. Sebagai contoh, digunakan untuk mengandung informasi tentang halaman yang tidak akan dapat dilihat oleh penonton, seperti kata kunci atau keterangan halaman yang akan muncul dalam hasil mesin pencari.
Langkah 2. Belajar menggunakan atribut tag
Beberapa tag memerlukan maklumat tambahan untuk menentukan bagaimana ia berfungsi. Maklumat tambahan ini muncul dalam tag pembuka, dan disebut "atribut". Nama atribut muncul tepat setelah nama tag, dipisahkan oleh spasi. Nilai atribut dilampirkan pada nama atribut dengan tanda = dan dikelilingi oleh tanda petik.
- Contohnya, jika anda ingin menjadikan teks anda berwarna merah, anda boleh melakukannya dengan menggunakan tanda dan atribut warna fon yang sesuai, seperti ini: Teks ini berwarna merah.
- Banyak kesan yang pernah dicapai secara rutin dengan atribut tag HTML, seperti menetapkan warna font yang berlainan, kini biasanya dilakukan dengan pengekodan CSS.
Langkah 3. Eksperimen dengan elemen bersarang
HTML juga membolehkan anda meletakkan elemen dalam elemen lain untuk membuat pemformatan yang lebih kompleks. Sebagai contoh, jika anda ingin menentukan perenggan dan kemudian mencetak sebahagian teks dalam perenggan, anda boleh melakukannya seperti ini:
Saya suka pengekodan!
Langkah 4. Berkenal dengan elemen kosong
Beberapa elemen dalam HTML tidak memerlukan tag pembuka dan penutup. Contohnya, jika anda memasukkan gambar, anda hanya memerlukan satu tag "img" yang mengandungi nama tag dan atribut lain yang diperlukan (seperti nama fail gambar dan teks alternatif yang ingin anda tambahkan untuk tujuan aksesibilitas). Sebagai contoh:
Langkah 5. Terokai susun atur asas dokumen HTML
Agar laman web berasaskan HTML anda berfungsi dengan baik, anda perlu mengetahui cara memformat keseluruhan halaman. Ini melibatkan menentukan di mana kod html anda bermula dan berakhir, serta menggunakan tag untuk menentukan bahagian kod mana yang akan dipaparkan berbanding yang ada untuk memberikan maklumat latar belakang tersembunyi. Sebagai contoh:
- Gunakan tag untuk menentukan halaman anda sebagai dokumen HTML.
- Seterusnya, masukkan keseluruhan halaman anda dalam tag untuk menentukan di mana kod anda bermula dan berakhir.
- Letakkan maklumat yang tidak akan ditampilkan kepada penonton, seperti judul halaman, kata kunci, dan keterangan halaman anda, di dalam tag.
- Tentukan isi halaman anda (iaitu teks dan gambar yang anda mahu penonton lihat) dengan teg.
Kaedah 3 dari 4: Mengenal CSS
Langkah 1. Gunakan CSS untuk menerapkan gaya pada dokumen HTML anda
CSS adalah bahasa lembaran gaya yang membolehkan anda menerapkan elemen gaya dan reka bentuk yang berbeza ke laman web anda. Sebagai contoh, jika anda ingin menerapkan font atau warna teks tertentu pada beberapa elemen teks di halaman anda, anda boleh membuat fail CSS untuk melakukannya. Kemudian, anda boleh memasukkan fail CSS ke dalam dokumen HTML anda di mana sahaja anda mahu.
-
Sebagai contoh, jika anda mahu fail CSS mengubah semua elemen perenggan dalam dokumen HTML anda menjadi hijau, anda boleh membuat fail.css yang mengandungi baris:
- p {
- warna: hijau;
- }
- Anda kemudian akan menyimpan fail dengan nama seperti style.css.
- Untuk menerapkan helaian gaya ke dokumen HTML anda, anda akan memasukkannya sebagai elemen pautan kosong di dalam tag. Sebagai contoh:
Langkah 2. Ketahui elemen-elemen set peraturan CSS
Satu bahagian kod CSS disebut "set peraturan." Set peraturan mengandungi elemen yang berbeza yang menentukan apa yang anda mahu kod anda lakukan. Ini termasuk:
- Pemilih, yang menentukan elemen HTML yang ingin anda gayakan. Sebagai contoh, jika anda mahu set peraturan anda mempengaruhi elemen perenggan, anda akan memulakan set peraturan anda dengan huruf "p".
- Deklarasi, yang menentukan sifat yang ingin anda gayakan (seperti warna fon). Pengisytiharan tersebut terdapat dalam tanda kurung keriting {}.
- Properti, yang menentukan sifat elemen HTML yang ingin anda gayakan. Sebagai contoh, dalam tag ini, anda boleh menentukan bahawa anda ingin menggayakan warna teks.
- Nilai harta mentakrifkan secara spesifik bagaimana anda ingin mengubah harta tanah (mis., Jika harta itu berwarna font, maka nilai harta tanah akan menjadi "hijau").
- Anda boleh mengubah beberapa sifat yang berbeza dalam satu deklarasi.
Langkah 3. Terapkan CSS pada teks anda untuk membuat penataan jenis anda kelihatan bagus
CSS berguna untuk menerapkan pelbagai kesan pada teks anda tanpa perlu membuat kod setiap harta secara HTML. Eksperimen dengan mengubah sifat penetapan jenis yang berbeza di CSS, termasuk:
- Warna fon
- Saiz huruf
- Keluarga fon (mis. Julat fon yang ingin anda gunakan dalam teks anda)
- Penjajaran teks
- Ketinggian garisan
- Jarak huruf
Langkah 4. Eksperimen dengan kotak dan alat susun atur CSS yang lain
CSS juga berguna untuk menambahkan elemen visual yang menarik ke halaman anda, seperti kotak teks dan jadual. Selain itu, anda boleh menggunakannya untuk mengubah susun atur keseluruhan halaman anda dan menentukan di mana unsur-unsur yang berbeza diposisikan satu sama lain.
Sebagai contoh, anda boleh menentukan atribut seperti lebar dan warna latar elemen, menambah sempadan, atau menetapkan margin yang akan mewujudkan ruang antara pelbagai elemen di halaman anda
Kaedah 4 dari 4: Bekerja dengan Bahasa Reka Bentuk Lain
Langkah 1. Pelajari JavaScript jika anda ingin menambahkan elemen interaktif ke halaman anda
JavaScript adalah bahasa yang bagus untuk dipelajari jika anda berminat untuk menambahkan fitur yang lebih maju ke laman web anda, seperti animasi dan pop timbul. Ikuti kursus atau cari tutorial dalam talian mengenai cara membuat kod dalam JavaScript dan memasukkan unsur-unsur berkod tersebut ke dalam laman web anda | menggunakan HTML.
Sebelum anda selesa dengan JavaScript, anda harus mengetahui asas-asas membina halaman dalam HTML dan CSS
Langkah 2. Biasakan jQuery untuk menjadikan pengekodan JavaScript lebih mudah
jQuery adalah pustaka JavaScript yang dapat mempermudah pengaturcaraan Java dengan memungkinkan anda mengakses berbagai elemen JavaScript yang telah dikodekan sebelumnya. jQuery adalah alat yang hebat jika anda sudah biasa dengan asas pengkodan JavaScript.
Anda boleh mengakses perpustakaan jQuery dan banyak sumber berharga lain melalui jQuery.org, laman web Yayasan jQuery
Langkah 3. Belajar bahasa di sisi pelayan jika anda berminat dengan pengembangan back-end
Walaupun HTML, CSS, dan JavaScript sangat sesuai untuk pereka web yang memfokuskan pada apa yang dilihat dan dilakukan pengguna di laman web, bahasa di sisi pelayan berguna jika anda lebih berminat dengan kerja di belakang layar. Sekiranya anda ingin belajar mengenai pengembangan back-end, fokus pada pembelajaran bahasa seperti Python, PHP, dan Ruby on Rails.
Bahasa-bahasa ini berguna untuk mengurus dan memproses data yang tidak dilihat oleh pengguna. Sebagai contoh, PHP boleh digunakan untuk membina alat pembuatan kata laluan yang selamat di laman web yang memerlukan log masuk
Fail Bantuan
Lembaran Menipu HTML
Lembaran Menipu CSS
