Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

30 Amalan Terbaik HTML untuk Pemula

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Aspek yang paling sukar untuk menjalankan Nettuts adalah merangkumi tahap kemahiran yang berbeza. Jika kami menyiarkan terlalu banyak tutorial canggih, penonton pemula kami tidak akan mendapat manfaat. Perkara yang sama berlaku untuk sebaliknya. Kami melakukan yang terbaik, tetapi selalu merasa bebas untuk mengepalai jika anda merasa anda diabaikan. Tapak ini adalah untuk anda, jadi bersuaralah! Dengan itu, tutorial hari ini khusus untuk mereka yang hanya menyelam ke dalam pembangunan web. Jika anda mempunyai satu tahun pengalaman atau kurang, semoga beberapa petua yang disenaraikan di sini akan membantu anda menjadi lebih baik, lebih cepat!

Tanpa keliru lagi, mari mengkaji semula tiga puluh amalan terbaik untuk memerhatikan ketika membuat markup anda.


1: Sentiasa Tutup Teg Anda

Kembali ke hari, tidak biasa melihat perkara-perkara seperti ini:

Perhatikan bagaimana pembalut tag UL/OL diabaikan. Di samping itu, ramai juga memilih untuk meninggalkan tag LI tutup juga. Dengan piawaian hari ini, ini hanya amalan buruk dan harus 100% dielakkan. Sentiasa, selalu tutup tag anda. Jika tidak, anda akan menghadapi masalah pengesahan dan masalah pada setiap masa.

Lebih baik


2: Mengisytiharkan DocType yang Betul

Declare doctype

Apabila saya masih muda, saya mengambil sedikit bahagian dalam forum CSS. Apabila pengguna mempunyai masalah, sebelum kita melihat keadaan mereka, mereka HARUS melakukan dua perkara dahulu:

  1. Mengesahkan fail CSS. Betulkan sebarang kesalahan yang perlu.
  2. Tambah doktor.

"DOCTYPE berjalan sebelum tag html pembuka di bahagian atas halaman dan memberitahu penyemak imbas sama ada halaman mengandungi HTML, XHTML, atau campuran kedua-duanya, supaya ia dapat mentafsirkan markup dengan betul."

Kebanyakan kita memilih antara empat jenis yang berbeza ketika membuat laman web baru.

  1. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/stic.didi">
  2. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd'>
  3. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xtml1-transitional.did">
  4. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Stict//EN" "http://www/www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

Ada perdebatan besar yang sedang berlaku mengenai pilihan yang betul di sini. Pada satu ketika, ia dianggap sebagai amalan terbaik untuk menggunakan versi XHTML Strict. Walau bagaimanapun, selepas beberapa penyelidikan, ternyata kebanyakan penyemak imbas kembali ke HTML biasa apabila menyalinnya. Atas sebab itu, ramai yang memilih untuk menggunakan HTML 4.01 Sebaliknya. Intinya adalah bahawa mana-mana ini akan membuat anda cek. Lakukan kajian dan buat minda anda sendiri.


3: Jangan sekali-kali menggunakan Gaya Inline

Apabila anda bekerja keras pada markup anda, kadang-kadang ia boleh menggoda untuk mengambil laluan mudah dan menyelinap dalam sedikit gaya.

Pasti - ia kelihatan tidak berbahaya. Walau bagaimanapun, ini menunjukkan kesilapan dalam amalan pengekodan anda.

    Apabila membuat markup anda, jangan fikir tentang gaya ini lagi. Anda hanya mula menambahkan gaya sekali halaman itu telah dikodkan sepenuhnya.

Ia seperti menyeberangi aliran di Ghostbusters. Ia bukan idea yang baik sahaja.
-Chris Coyier (merujuk kepada sesuatu yang tidak berkaitan sepenuhnya).

Sebaliknya, tamatkan markup anda, dan kemudian sebutkan bahawa tag P dari stylesheet luaran anda.

Lebih baik


4: Tempatkan semua Fail CSS Luaran dalam Tag Ketua

Secara teknikal, anda boleh meletakkan stylesheet di mana sahaja anda suka. Walau bagaimanapun, spesifikasi HTML mengesyorkan bahawa mereka diletakkan di dalam tag HEAD dokumen. Manfaat utama ialah halaman Anda akan kelihatan lebih cepat.

Semasa meneliti prestasi di Yahoo!, kami dapati bahawa stylesheets bergerak ke HEAD dokumen membuat halaman nampaknya memuatkan lebih cepat. Ini kerana meletakkan gaya styleshe dalam HEAD membolehkan halaman itu menjadi lebih progresif.
- Pasukan ySlow


5: Pertimbangkan Menempatkan Fail Javascript di Bawah

Place JS at bottom

Ingat - matlamat utama adalah untuk membuat beban halaman secepat mungkin untuk pengguna. Apabila memuat skrip, penyemak imbas tidak dapat diteruskan sehingga keseluruhan fail telah dimuatkan. Oleh itu, pengguna perlu menunggu lebih lama sebelum melihat sebarang kemajuan.

Sekiranya anda mempunyai fail JS yang bertujuan untuk menambah fungsi - contohnya, selepas butang diklik - pergi ke depan dan letakkan fail-fail tersebut di bahagian bawah, sebelum tag tubuh ditutup. Ini benar-benar amalan terbaik.

Lebih baik


6: Jangan sekali-kali menggunakan Javascript dalam talian. Ia bukan tahun 1996!

Satu lagi amalan biasa tahun lalu adalah untuk meletakkan arahan JS secara langsung dalam tag. Ini sangat biasa dengan galeri imej yang mudah. Pada asasnya, atribut "onclick" dilampirkan pada teg. Nilai kemudiannya akan sama dengan beberapa prosedur JS. Tidak perlu dikatakan, anda tidak boleh, pernah lakukan ini. Sebaliknya, pindahkan kod ini ke fail JS luaran dan gunakan "addEventListener/attachEvent" untuk "mendengarkan" untuk acara yang anda kehendaki. Atau, jika menggunakan kerangka seperti jQuery, hanya gunakan kaedah "klik".


7: Mengesahkan Secara Berterusan

validate continuously

Saya baru-baru ini ngeblogg mengenai bagaimana idea pengesahan telah benar-benar salah difahami oleh mereka yang tidak sepenuhnya memahami tujuannya. Seperti yang saya sebutkan dalam artikel itu, "pengesahan harus berfungsi untuk anda, bukan bertentangan."

Walau bagaimanapun, terutamanya apabila mula pertama, saya sangat mengesyorkan bahawa anda memuat turun Bar Pengembang Web dan menggunakan pilihan "Validate HTML" dan "Validate CSS" secara berterusan. Walaupun CSS adalah bahasa yang agak mudah untuk dipelajari, ia juga boleh membuat anda mengoyakkan rambut anda. Seperti yang anda dapati, berkali-kali, ia adalah markup lusuh anda yang menyebabkan isu ruang kosong aneh di halaman. Mengesahkan, sahkan, sahkan.


8: Muat Firebug

download firebug

Saya tidak boleh mengesyorkan yang cukup ini. Firebug adalah, tanpa keraguan, plugin terbaik yang pernah anda gunakan ketika membuat laman web. Bukan sahaja ia menyediakan debugging Javascript yang luar biasa, tetapi anda juga akan belajar bagaimana untuk menentukan elemen mana yang mewarisi padding tambahan yang anda tidak menyedari. Muat turun!


9: Gunakan Firebug!

use firebug

Dari pengalaman saya, banyak pengguna hanya memanfaatkan lebih kurang 20% ​​keupayaan Firebug. Anda benar-benar melakukan kecederaan diri anda. Ambil beberapa jam dan menjelajahi web untuk setiap tutorial yang layak yang anda dapati mengenai perkara ini.

Sumber


10: Simpan Nama Tag Anda Huruf Kecil

Secara teknikal, anda boleh pergi dengan memanfaatkan nama tag anda.

Setelah mengatakannya, sila jangan. Ia berfungsi tanpa tujuan dan menyakitkan mata saya - apatah lagi fakta bahawa ia mengingatkan saya tentang fungsi html Microsoft Word!

lebih baik


11: Use H1 - H6 Tags

Diakui, ini adalah sesuatu yang saya cenderung kekurangan. Amalan terbaik untuk menggunakan semua enam tag ini. Jika saya jujur, saya biasanya hanya melaksanakan empat teratas; tetapi saya bekerja padanya! :) Untuk alasan semantik dan SEO, paksa diri anda untuk menggantikan tag P dengan H6 apabila sesuai.


12: Jika Membina Blog, Simpan H1 untuk Tajuk Artikel

h1 saved for title of article.

Hanya pada pagi ini, di Twitter, saya bertanya kepada pengikut kami sama ada mereka merasakan ia adalah yang paling bijak untuk meletakkan tag H1 sebagai logo, atau sebaliknya menggunakannya sebagai tajuk artikel. Sekitar 80% daripada tweet yang dipulangkan telah memihak kepada kaedah yang kedua.

Seperti apa-apa, tentukan apa yang terbaik untuk laman web anda sendiri. Walau bagaimanapun, jika membina blog, saya cadangkan anda menyimpan tag H1 anda untuk tajuk artikel anda. Untuk tujuan SEO, ini adalah amalan yang lebih baik - pada pandangan saya.


13: Muat turun ySlow


download yslow

Khususnya dalam beberapa tahun kebelakangan ini, pasukan Yahoo telah melakukan beberapa kerja yang sangat hebat dalam bidang kami. Belum lama dahulu, mereka mengeluarkan pelanjutan untuk Firebug dipanggil ySlow. Apabila diaktifkan, ia akan menganalisis laman web yang diberikan dan mengembalikan "kad laporan" jenis yang memperincikan kawasan-kawasan di mana tapak anda memerlukan peningkatan. Ia boleh menjadi sedikit keras, tetapi semuanya adalah untuk kebaikan yang lebih baik. Saya sangat mengesyorkannya.


14: Bendera Navigasi dengan Senarai Tak Berorder

Wrap navigation with unordered lists

Setiap laman web mempunyai segmen navigasi semacam. Meskipun Anda pasti bisa lolos dengan memformatnya seperti ini:

Saya akan menggalakkan anda untuk tidak menggunakan kaedah ini, atas alasan semantik. Tugas anda adalah untuk menulis kod yang paling baik yang anda mampu.

Kenapa kita akan menyusun senarai pautan navigasi dengan apa-apa selain LIST yang tidak disusun?

Tag UL dimaksudkan untuk mengandungi senarai item.

Lebih baik


15: Belajar Cara Menetapkan IE

Anda pasti akan menjerit sendiri di IE selama beberapa ketika. Ia sebenarnya menjadi pengalaman ikatan bagi masyarakat. Apabila saya membaca di Twitter bagaimana salah seorang kawan saya bertarung dengan kekuatan IE, saya hanya tersenyum dan berfikir, "Saya tahu bagaimana perasaan anda, pal."

Langkah pertama, setelah anda menyelesaikan fail CSS utama, adalah untuk membuat fail "ie.css" unik. Anda boleh merujuknya hanya untuk IE dengan menggunakan kod berikut.

Kod ini berkata, "Jika pelayar pengguna Internet Explorer 6 atau lebih rendah, import helaian gaya ini. Jika tidak, jangan buat apa-apa." Jika anda perlu mengimbangi IE7 juga, cukup ganti "lt" dengan 'lte" (kurang atau sama dengan).


16: Pilih Editor Kod Besar

choose a great code editor

Sama ada anda berada di Windows atau Mac, terdapat banyak editor kod hebat yang akan berfungsi dengan baik untuk anda. Secara peribadi, saya mempunyai Mac dan PC bersebelahan yang saya gunakan sepanjang hari saya. Akibatnya, saya telah mengembangkan pengetahuan yang cukup tentang apa yang ada. Berikut ialah pilihan utama saya/cadangan agar:

Mac Lovers

PC Lovers


17: Setelah Laman Web Lengkap, Kompres!

Compress

Dengan menanggalkan fail CSS dan Javascript anda, anda boleh mengurangkan saiz setiap fail sebanyak 25% atau lebih. Tolong jangan buat ini sementara masih dalam pembangunan. Walau bagaimanapun, sebaik sahaja laman web ini, lebih atau kurang, lengkap, menggunakan beberapa program mampatan dalam talian untuk menyelamatkan diri beberapa jalur lebar.

Perkhidmatan Pemampatan Javascript

CSS Compression Services


18: Cut, Cut, Cut

cut cut cut

Melihat semula laman web pertama saya, saya mesti mempunyai SEVERE kes divitis. Naluri semulajadi anda adalah dengan selamat membalut setiap perenggan dengan div, dan kemudian balut dengan satu lagi div untuk ukuran yang baik. Seperti yang anda akan belajar dengan cepat, ini sangat tidak cekap.

Sebaik sahaja anda telah menyelesaikan markup anda, pergi lebih dua kali lagi dan cari cara untuk mengurangkan bilangan unsur pada halaman. Adakah UL benar-benar memerlukan div pembungkus sendiri? Saya rasa tidak

Sama seperti kunci untuk menulis adalah "memotong, memotong, memotong," yang sama berlaku untuk markup anda.


19: Semua Imej Memerlukan "Alt"  Atribut

Sangat mudah untuk mengabaikan keperluan untuk atribut alt dalam tag imej. Walau bagaimanapun, ia adalah sangat penting, untuk sebab kebolehaksesan dan pengesahan, bahawa anda mengambil masa tambahan untuk mengisi bahagian-bahagian ini.

Buruk

Baik


20: Tinggal Akhir

Saya sangat ragu-ragu bahawa saya satu-satunya yang, pada satu ketika ketika belajar, memandang dan menyedari bahawa saya berada di ruang gelap-gelap dengan baik ke awal, awal pagi. Jika anda mendapati diri anda dalam keadaan yang sama, yakinlah bahawa anda telah memilih medan yang betul.

Momen "AHHA" yang luar biasa, sekurang-kurangnya bagi saya, selalu berlaku larut malam. Inilah yang berlaku ketika saya mula-mula memahami persis apa-apa penutupan Javascript. Ia adalah perasaan hebat yang perlu anda alami, jika anda belum melakukannya.


21: Lihat Sumber

view source

Apa cara yang lebih baik untuk belajar HTML daripada menyalin wira anda? Pada mulanya, kita semua mesin salin! Kemudian perlahan-lahan, anda mula mengembangkan gaya/kaedah anda sendiri. Jadi lawati laman web orang yang anda hormati. Bagaimana mereka kod ini dan bahagian itu? Belajar dan salin dari mereka. Kami semua melakukannya, dan anda juga perlu. (Jangan mencuri reka bentuk; hanya belajar dari gaya pengekodan.)

Perhatikan apa-apa kesan Javascript yang sejuk yang anda ingin pelajari? Kemungkinan dia menggunakan plugin untuk mencapai kesannya. Lihat sumber dan cari tag HEAD untuk nama skrip. Kemudian Google dan perlaksanaannya ke laman web anda sendiri! Yay.


22: Style ALL Elements

Amalan terbaik ini terutama berlaku semasa mereka bentuk untuk pelanggan. Hanya kerana anda tidak menggunakan blockquote tidak bermakna pelanggan tidak akan. Jangan gunakan senarai yang disusun? Itu tidak bermakna dia tidak akan! Buat sendiri perkhidmatan dan buat halaman khas khusus untuk memamerkan gaya setiap elemen: ul, ol, p, h1-h6, blockquotes, dll.


23: Use Twitter

Use Twitter

Akhir-akhir ini, saya tidak boleh menghidupkan TV tanpa mendengar rujukan ke Twitter; ia benar-benar menjadi agak menjengkelkan. Saya tidak mempunyai keinginan untuk mendengar Larry King mengiklankan akaun Twitternya - yang kita semua tahu dia tidak mengemaskini secara manual. Yay untuk pembantu! Juga, berapa ramai ibu mendaftar untuk akaun selepas mendapat persetujuan Oprah? Kita hanya boleh lama untuk hari ketika hanya segelintir orang yang menyedari tentang perkhidmatan dan potensi "penyejuk air".

Pada mulanya, idea di sebalik Twitter adalah untuk menyiarkan "apa yang sedang anda lakukan". Walaupun ini masih berlaku sedikit, ia menjadi lebih banyak alat rangkaian dalam industri kami. Sekiranya seorang penulis web yang mengagumi kiriman pautan ke artikel yang ditemuinya menarik, anda lebih baik percaya bahawa saya akan menyemaknya juga - dan anda juga perlu! Inilah sebabnya mengapa laman-laman seperti Digg cepat menjadi lebih dan lebih saraf.

Twitter Snippet

Jika anda baru mendaftar, jangan lupa ikuti kami: NETTUTS.


24: Belajar Photoshop

Learn Photoshop

Pengulas baru-baru ini mengenai Nettuts+ menyerang kami kerana menyiarkan beberapa cadangan daripada Psdtuts+. Beliau berhujah bahawa tutorial Photoshop tidak mempunyai perniagaan di blog pembangunan web. Saya tidak pasti tentangnya, tetapi Photoshop dibuka cukup banyak 24/7 di komputer saya.

Malah, Photoshop mungkin menjadi alat yang paling penting yang anda miliki. Sebaik sahaja anda mempelajari HTML dan CSS, saya secara peribadi akan mengesyorkan agar anda mempelajari seberapa banyak teknik Photoshop yang mungkin.

  1. Lawati bahagian Video di Psdtuts+
  2. Fork lebih daripada $25 untuk mendaftar untuk keahlian sebulan ke Lynda.com. Tonton setiap video yang boleh anda temui.
  3. Nikmati siri "You Suck at Photoshop".
  4. Ambil beberapa jam untuk menghafal pintasan keyboard PS sebanyak yang anda boleh.

25: Pelajari Setiap Tag HTML

Terdapat banyak tag HTML yang anda tidak akan jumpa setiap hari. Namun demikian, itu tidak berarti Anda tidak harus mempelajarinya! Apakah Anda akrab dengan tag "abbr"? Bagaimana dengan "mengutip"? Kedua-dua ini sepatutnya mendapat tempat dalam alat dada anda. Belajarlah semuanya!

Dengan cara ini, sekiranya anda tidak biasa dengan kedua-dua yang disenaraikan di atas:

  • abbr cukup banyak apa yang anda harapkan. Ia merujuk kepada singkatan. "Blvd" boleh dibungkus tag <abbr> kerana ia merupakan singkatan untuk "boulevard".
  • memetik digunakan untuk merujuk tajuk kerja. Sebagai contoh, jika anda merujuk artikel ini pada blog anda sendiri, anda boleh meletakkan "30 HTML Amalan Terbaik untuk Pemula" dalam sebuah tag <memetik> . Perhatikan bahawa ia tidak sepatutnya digunakan untuk merujuk pengarang sebut harga. Ini adalah salah faham yang biasa.

26: Mengambil bahagian dalam Komuniti

Sama seperti laman web seperti kami menyumbang banyak untuk meneruskan pengetahuan pemaju web, anda juga perlu! Akhirnya terangkan cara mengaplikasikan elemen anda dengan betul? Buat posting blog untuk mengajar orang lain bagaimana. Selalu ada orang yang kurang pengalaman daripada anda. Bukan sahaja anda akan menyumbang kepada komuniti, tetapi anda juga akan mengajar diri anda sendiri. Pernah perhatikan bagaimana anda tidak benar-benar memahami sesuatu sehingga anda terpaksa mengajarnya?


27: Gunakan CSS Reset

Ini adalah satu lagi kawasan yang dibahaskan kepada kematian. Reset semula CSS: untuk digunakan atau tidak digunakan; itulah soalannya. Jika saya menawarkan nasihat peribadi saya sendiri, saya 100% mengesyorkan agar anda membuat fail set semula anda sendiri. Mulailah dengan memuat turun yang popular, seperti Eric Meyer, dan perlahan-lahan, semasa anda belajar lebih banyak, mula mengubahnya menjadi anda sendiri. Jika anda tidak melakukan ini, anda tidak akan benar-benar memahami mengapa item senarai anda menerima sedikit padding tambahan apabila anda tidak menyatakannya di mana-mana dalam fail CSS anda. Simpan diri anda kemarahan dan menetapkan semula segala-galanya! Yang perlu anda mulakan.

28: Talian 'em Up!


Line em up

Secara umumnya, anda harus berusaha untuk menyusun elemen anda sebaik mungkin. Lihatlah reka bentuk kegemaran anda. Adakah anda melihat bagaimana setiap baris tajuk, ikon, perenggan, dan logo dengan sesuatu yang lain di halaman? Tidak melakukan ini adalah salah satu daripada tanda-tanda utama pemula. Fikirkan cara begini: Jika saya bertanya mengapa anda meletakkan elemen di tempat itu, anda sepatutnya dapat memberi saya alasan yang tepat.


29: Slice a JPA

Slice a PSD

Baiklah, jadi anda telah mendapat pemahaman yang kukuh dari HTML, CSS, dan Photoshop. Langkah seterusnya ialah menukar JPA pertama anda ke laman web yang berfungsi. Jangan bimbang; ia tidak sukar kerana anda mungkin berfikir. Saya tidak boleh memikirkan cara yang lebih baik untuk meletakkan kemahiran anda untuk ujian. Jika anda memerlukan bantuan, semak semula tutorial video yang mendalam yang menunjukkan kepada anda dengan tepat bagaimana untuk mendapatkan kerja.


30: Jangan Gunakan Kerangka ... Namun

Kerangka, sama ada untuk Javascript atau CSS adalah hebat; tetapi jangan gunakannya apabila mula mula. Walaupun ia boleh dikatakan bahawa jQuery dan Javascript boleh dipelajari serentak, yang sama tidak boleh dibuat untuk CSS. Saya telah mempromosikan Rangka Kerja CSS 960 secara peribadi, dan sering menggunakannya. Setelah mengatakan itu, jika anda masih dalam proses belajar CSS - yang bermaksud tahun pertama - anda hanya akan membuat diri anda lebih keliru jika anda menggunakannya.

Rangka kerja CSS adalah untuk pemaju yang berpengalaman yang ingin menyelamatkan diri sedikit masa. Mereka bukan untuk pemula.

  • Ikuti kami di Twitter, atau melanggan RSS BETTING RSS untuk lebih banyak tuts dan artikel pembangunan web harian.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.