Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

30 Penerapan Terbaik HTML Bagi Pemula

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Aspek yang paling sulit dari menjalankan Nettuts+ adalah pertimbangan perbedaan tingkat keahlian yang cukup banyak. Jika kami mem-posting terlalu banyak tutorial tingkat lanjut, audiens pemula kami tidak akan mendapatkan keuntungan. Begitu juga sebaliknya. Kami melakukan yang terbaik, tetapi Anda bebas berteriak jika Anda merasa sedang diabaikan. Situs ini untuk Anda, jadi berbicaralah! Seperti yang dikatakan, tutorial hari ini adalah khusus untuk mereka yang barusaja menyelam ke pengembangan web. Jika Anda sudah memiliki satu tahun pengalaman atau kurang, mudah-mudahan beberapa tips yang tercantum di sini akan membantu Anda menjadi lebih baik, lebih cepat!

Tanpa basa-basi lagi, mari kita tinjau tiga puluh penerapan terbaik untuk diamati ketika membuat markup Anda.


1: Selalu Menutup Tag Anda

Kembali pada yang lalu, tidak jarang untuk melihat hal-hal seperti ini:

Perhatikan bahwa pembungkus tag UL/OL dihilangkan. Selain itu, banyak yang memilih untuk meninggalkan tag penutup LI juga. Menurut standar sekarang, ini adalah praktek yang buruk dan harus 100% dihindari. Selalu, selalu menutup tag Anda. Jika tidak, Anda akan menemui masalah validasi dan kesalahan di mana saja.

Lebih baik


2: Menyatakan DocType yang Benar

Declare doctypeDeclare doctypeDeclare doctype

Ketika saya lebih muda, saya sedikit berpartisipasi dalam forum CSS. Setiap kali pengguna memiliki masalah, sebelum kita melihat situasi mereka, mereka HARUS melakukan dua hal terlebih dahulu:

  1. Validasi file CSS. Memperbaiki kesalahan apapun.
  2. Menambahkan doctype.

"DOCTYPE berada sebelum pembukaan tag html di bagian atas halaman dan memberitahu browser apakah halaman tersebut berisi HTML, XHTML, atau campuran keduanya, sehingga dapat dengan benar menafsirkan markup."

Sebagian besar dari kita memilih di antara empat doctypes berbeda ketika membuat situs web baru.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
  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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ada sebuah perdebatan besar sedang terjadi tentang pilihan yang tepat di sini. Pada satu titik, itu dianggap sebagai praktek terbaik untuk menggunakan versi XHTML Strict. Namun, setelah beberapa penelitian, telah disadari bahwa kebanyakan browser kembali ke HTML biasa ketika menafsirkan itu. Untuk alasan itu, banyak yang telah memilih menggunakan HTML 4.01 Strict sebagai gantinya. Intinya adalah ini akan membuat Anda tetap di cek. Lakukan penelitian dan buat pemikiran Anda sendiri.


3: Jangan Pernah Menggunakan Gaya Inline

Ketika Anda bekerja keras pada markup Anda, kadang-kadang bisa tergoda untuk mengambil rute yang mudah dan menyisipkan sedikit styling.

Yakin -- tampaknya cukup berbahaya. Namun, ini menunjukkan kesalahan dalam praktek koding Anda.

    Ketika membuat markup Anda, jangan sekali-sekali berpikir tentang styling dahulu. Anda hanya mulai menambahkan gaya setelah halaman telah benar-benar selesai dikodekan.

Hal ini seperti menyeberangi sungai di Ghostbusters. Itu hanyalah bukan ide yang baik.
-Chris Coyier (mengacu pada sesuatu yang sama sekali tidak terkait.)

Sebaliknya, menyelesaikan dahulu markup Anda, dan kemudian referensikan tag P tersebut dari stylesheet eksternal Anda.

Lebih baik


4: Tempatkan Semua file CSS Eksternal dalam Tag Head

Secara teknis, Anda dapat menempatkan stylesheet dimana saja yang Anda suka. Namun, spesifikasi HTML merekomendasikan bahwa mereka ditempatkan dalam tag HEAD dokumen. Manfaat utamanya adalah halaman Anda tampaknya akan memuat lebih cepat.

Sementara meneliti kinerja di Yahoo!, kami menemukan bahwa memindah stylesheet ke HEAD dokumen membuat halaman tampaknya memuat lebih cepat. Ini karena menempatkan stylesheet di HEAD memungkinkan halaman untuk render secara progresif.
- Tim ySlow


5: Pertimbangkan Menempatkan File Javascript di Bagian Bawah

Place JS at bottomPlace JS at bottomPlace JS at bottom

Ingat -- tujuan utamanya adalah membuat halaman memuat secepat mungkin untuk pengguna. Ketika loading skrip, browser tidak dapat melanjutkan sampai seluruh file telah dimuat. Dengan demikian, pengguna akan harus menunggu lebih lama sebelum ada kemajuan.

Jika Anda memiliki file JS yang tujuan utamanya adalah untuk menambahkan fungsi -- misalnya, setelah tombol diklik -- langsung tempatkan file-file tersebut di bagian bawah, tepat sebelum penutupan tag body. Ini adalah benar-benar praktek terbaik.

Lebih baik


6: Jangan Pernah Menggunakan Javascript Inline. Ini Bukan Tahun 1996!

Praktek umum lainnya beberapa tahun yang lalu adalah menempatkan perintah JS langsung dalam tag. Ini sangat umum dengan galeri gambar sederhana. Biasanya, atribut "onclick" yang ditambahkan ke tag. Nilainya kemudian akan sama dengan beberapa prosedur JS. Tak perlu dikatakan, Anda seharusnya jangan pernah, sekalipun melakukan ini. Sebaliknya, mentransfer kode ini ke file JS eksternal dan menggunakan "addEventListener/attachEvent" untuk "listen" untuk event Anda. Atau, jika menggunakan kerangka seperti jQuery, cukup menggunakan metode "click".


7: Memvalidasi Terus-menerus

validate continuously

Baru-baru ini saya membuat blog tentang bagaimana ide dari validasi telah benar-benar disalahtafsirkan oleh orang-orang yang benar-benar tidak mengerti tujuannya. Seperti yang saya sebutkan dalam artikel, "validasi seharusnya bekerja untuk Anda, bukan melawan Anda."

Namun, terutama ketika pertama kali memulai, saya sangat menyarankan Anda men-download Web Developer Toolbar dan menggunakan pilihan "Validate HTML" dan "Validate CSS" yang terus-menerus. Meskipun CSS itu bahasa yang agak mudah untuk dipelajari, tapi juga dapat membuat rambut Anda rontok. Seperti yang Anda akan temukan, berkali-kali, markup Anda lusuh yang menyebabkan masalah spasi aneh pada halaman. Validasi, validasi, validasi.


8: Download Firebug

download firebugdownload firebugdownload firebug

Saya tidak bisa merekomendasikan hanya ini saja. Firebug adalah, tanpa diragukan lagi, plugin terbaik yang akan Anda gunakan saat membuat situs web. Tidak hanya tidak memberikan debugging Javascript luar biasa, tetapi Anda juga akan belajar bagaimana menentukan elemen mana yang mewarisi padding tambahan tersebut yang mana Anda tidak menyadarinya. Download itu!


9: Gunakan Firebug!

use firebuguse firebuguse firebug

Dari pengalaman saya, banyak pengguna hanya mengambil keuntungan sekitar 20% dari kemampuan Firebug. Anda benar-benar merugikan diri sendiri. Luangkan beberapa jam dan jelajahi web untuk setiap tutorial yang layak yang dapat Anda temukan pada subjeknya.

Sumber daya


10: Jaga Nama Tag Anda dengan Huruf kKecil

Secara teknis, Anda bebas dengan meng-huruf besarkan nama tag Anda.

Karena itu, tolong jangan. Itu tidak ada tujuannya dan menyakiti mata saya -- tidak luput untuk menyebutkan fakta bahwa ini mengingatkan saya pada fungsi html Microsoft Word!

Lebih baik


11: Gunakan Tag H1 - H6

Diakui, ini adalah sesuatu yang saya cenderung kendur di sini. Ini adalah praktek terbaik untuk menggunakan semua keenamnya dari tag-tag tersebut. Jika saya jujur, saya biasanya hanya menerapkan empat teratas; tapi saya sedang berusaha! :) Untuk alasan semantik dan SEO, paksa diri Anda mengganti tag P tersebut dengan H6 jika saatnya yang tepat.


12: Jika Membangun Sebuah Blog, Simpan H1 untuk Judul Artikel

h1 saved for title of article.h1 saved for title of article.h1 saved for title of article.

Hanya pagi ini, di Twitter, saya bertanya ke pengikut kami apakah mereka merasa itu cerdas untuk menempatkan tag H1 sebagai logo, atau sebaliknya menggunakannya sebagai judul artikel. Sekitar 80% dari tweets balasan mendukung metode yang terakhir.

Seperti apapun, tentukan apa terbaik untuk situs web Anda sendiri. Namun, jika membangun sebuah blog, saya akan merekomendasikan Anda menyimpan tag H1 Anda untuk judul artikel Anda. Untuk tujuan SEO, ini adalah praktik yang lebih baik - menurut pendapat saya.


13: Download ySlow


download yslowdownload yslowdownload yslow

Terutama dalam beberapa tahun terakhir, tim Yahoo telah melakukan beberapa pekerjaan yang benar-benar hebat dalam bidang kami. Tidak beberapa lama yang lalu, mereka merilis sebuah ekstensi untuk Firebug disebut ySlow. Ketika diaktifkan, akan menganalisis situs web tertentu dan mengembalikan "kartu laporan" dari segala macam rincian daerah mana dari situs Anda yang perlu perbaikan. Ini bisa menjadi sedikit sulit, tetapi semua demi kebaikan yang lebih besar. Saya sangat merekomendasikannya.


14: Bungkus Navigasi dengan Unordered List

Wrap navigation with unordered listsWrap navigation with unordered listsWrap navigation with unordered lists

Setiap situs memiliki bagian navigasi dari beberapa macam. Sementara Anda masih bisa dengan memformatnya seperti ini:

Saya akan mendorong Anda tidak menggunakan metode ini, untuk alasan semantik. Tugas Anda adalah menulis kode yang mungkin terbaik sesuai kemampuan Anda.

Mengapa kita akan men-style daftar link navigasi dengan apa pun selain unordered LIST?

UL tag dimaksudkan untuk berisi daftar item.

Lebih baik


15: Pelajari Cara untuk Menargetkan IE

Anda pasti akan menemukan diri Anda berteriak pada IE pada beberapa titik atau lainnya. Ini benar-benar menjadi pengalaman yang mengikat bagi masyarakat. Ketika saya membaca di Twitter bagaimana salah satu teman saya berjuang melawan paksaan IE, saya hanya tersenyum dan berpikir, "Saya tahu bagaimana rasanya, teman."

Langkah pertama, setelah menyelesaikan file CSS yang utama, adalah menciptakan sebuah file "ie.css"yang unik. Anda kemudian dapat mereferensikan hanya untuk IE dengan menggunakan kode berikut.

Kode ini mengatakan, "Jika browser pengguna Internet Explorer 6 atau lebih rendah, impor stylesheet ini. Jika tidak, jangan melakukan apa-apa." Jika Anda perlu untuk mengkompensasi IE7 juga, hanya mengganti "lt" dengan "lte" (less than or equal to/kurang dari atau sama dengan).


16: Pilih Editor Kode yang Hebat

choose a great code editorchoose a great code editorchoose a great code editor

Apakah Anda berada di Windows atau Mac, ada banyak editor kode fantastis yang akan bekerja luar biasa untuk Anda. Secara pribadi, saya memiliki Mac dan PC berdampingan yang saya gunakan sepanjang hari. Sebagai hasilnya, saya telah mendapatkan pengetahuan yang cukup baik dari apa yang tersedia. Berikut adalah rekomendasi/pilihan top saya dalam urutan:

Pecinta Mac

Pecinta PC


17: Setelah SitusLengkap, Kompres!

CompressCompressCompress

Dengan men-zip file CSS dan Javascript, Anda dapat mengurangi ukuran file secara substansial 25% atau lebih. Harap jangan repot-repot melakukan ini sementara masih dalam pengembangan. Namun, setelah situsnya selesai, lebih-atau-kurang, lengkap, gunakan beberapa program kompresi online untuk menghemat beberapa bandwidth.

Layanan Kompresi JavaScript

Layanan Kompresi CSS


18: Potong, Potong, Potong

cut cut cut

Melihat kembali di situs web pertama saya, saya sepertinya memiliki kasus PARAH dari divitis. Naluri alami Anda adalah membungkus dengan aman setiap paragraf dengan div, dan kemudian membungkusnya dengan satu div lebih agar lebih baik lagi. Ketika Anda akan dengan cepat belajar, ini sangat tidak efisien.

Setelah menyelesaikan markup Anda, periksa dua kali lagi dan cari cara mengurangi jumlah elemen pada halaman. Apakah UL itu benar-benar membutuhkan div pembungkus sendiri? Saya kira tidak.

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


19: Semua Gambar Memerlukan Atribut "Alt"

Sangat mudah untuk mengabaikan kebutuhan atribut alt dalam tag image. Namun demikian, ini sangat penting, untuk alasan aksesibilitas dan validasi, bahwa Anda mengambil waktu ekstra untuk mengisi bagian ini.

Jelek

Lebih baik


20: Terjaga Sampai Larut

Saya sangat meragukan bahwa saya satu-satunya yang, pada satu titik ketika belajar, mendongak dan menyadari bahwa saya berada di sebuah ruangan yang cukup gelap di awal, awal pagi sekali. Jika Anda menemukan diri Anda dalam situasi yang sama, yakinlah bahwa Anda telah memilih jurusan yang tepat.

Saat-saat "AHHA" yang menakjubkan, setidaknya untuk saya, selalu terjadi saat malam. Hal ini terjadi ketika saya pertama kali mulai memahami apa itu penutupan Javascript. Ini perasaan yang hebat yang Anda butuhkan untuk dirasakan, jika Anda belum mendapatkannya.


21: Lihat Kode Sumber

view source

Cara apa yang lebih baik untuk mempelajari HTML daripada menyalin pahlawan Anda? Pada awalnya, kita semua penyalin! Kemudian perlahan-lahan, Anda mulai mengembangkan metode/gaya Anda sendiri. Jadi kunjungi situs dari orang-orang yang Anda hormati. Bagaimana mereka mengkodenya dan bagian itu? Pelajari dan menyalin dari mereka. Kita semua melakukannya, dan Anda seharusnya juga. (Jangan mencuri desainnya; hanya pelajari dari gaya pengkodeannya.)

Melihat efek Javascript keren yang ingin Anda pelajari? Ada kemungkinan bahwa dia menggunakan plugin untuk mencapai efeknya. Lihat sumber kode dan cari tag HEAD untuk nama skripnya. Kemudian Google dia dan terapkan ke situs Anda sendiri! Yay.


22: Style Semua Elemen

Praktek terbaik ini terutama berlaku ketika merancang untuk klien. Hanya karena Anda belum menggunakan blockquote bukan berarti bahwa klien juga tidak akan. Tidak pernah menggunakan ordered lists? Itu bukan berarti dia tidak mau! Lakukan sendiri layanan dan buat halaman yang khususnya untuk menampilkan styling setiap elemen: ul, ol, p, h1-h6, blockquotes, dll.


23: Gunakan Twitter

Use TwitterUse TwitterUse Twitter

Akhir-akhir ini, saya tidak akan menyalakan TV tanpa mendengar rujukan ke Twitter; ini benar-benar menjadi agak menjengkelkan. Saya tidak punya keinginan untuk mendengarkan Larry King mengiklankan akun Twitter-nya - yang kita semua tahu dia tidak meng-update secara manual. Yay untuk asisten! Juga, berapa banyak ibu-ibu sign up akun setelah persetujuan Oprah? Kami hanya bisa selama untuk sehari ketika itu hanya beberapa dari kita yang menyadari layanannya dan potensi "pendingin air".

Awalnya, ide di balik Twitter adalah untuk mem-posting "apa yang Anda lakukan." Meskipun ini masih berlaku untuk tingkat yang kecil, ini menjadi lebih ke alat jaringan di industri kami. Jika seorang penulis dev web yang saya kagumi mem-posting link ke artikel yang menurutnya menarik, Anda lebih baik percaya bahwa saya akan memeriksa juga - dan Anda juga harus! Inilah alasan mengapa situs seperti Digg dengan cepat menjadi lebih dan lebih gelisah.

Twitter Snippet

Jika Anda telah mendaftar, jangan lupa untuk mengikuti kami: NETTUTS.


24: Pelajari Photoshop

Learn PhotoshopLearn PhotoshopLearn Photoshop

Pengkomentar di Nettuts+ beberapa waktu lalu menyerang kami untuk posting beberapa rekomendasi dari Psdtuts+. Ia berpendapat bahwa Photoshop Tutorial tidak punya urusan dalam blog pengembangan web. Saya tidak yakin tentangnya, tapi Photoshop terbuka cukup banyak 24/7 di komputer saya.

Pada kenyataannya, Photoshop mungkin sangat baik menjadi alat yang lebih penting yang Anda miliki. Setelah Anda belajar HTML dan CSS, secara pribadi saya merekomendasikan Anda kemudian belajar teknik Photoshop sebanyak mungkin.

  1. Kunjungi bagian Video di Psdtuts+
  2. Bercabang ke $25 untuk mendaftar keanggotaan satu bulan di Lynda.com. Tonton setiap video yang Anda dapat temukan.
  3. Nikmati seri "Anda Payah di Photoshop".
  4. Ambil beberapa jam untuk mengingat pintasan keyboard PS sebanyak yang Anda bisa.

25: Pelajari Setiap Tag HTML

Secara harfiah ada puluhan tag HTML yang tidak akan Anda temui setiap hari. Namun demikian, itu bukan berarti Anda tidak perlu mempelajarinya semua! Apakah Anda akrab dengan tag "abbr"? Bagaimana dengan "cite"? Kedua itu saja layak mendapat tempat di kantong alat Anda. Pelajari semuanya!

Omong-omong, dalam kasus Anda tidak terbiasa dengan dua yang tercantum di atas:

  • abbr melakukan cukup banyak seperti yang Anda harapkan. Ia merujuk kepada singkatan. "Blvd" bisa dibungkus dalam tag <abbr> karena itu adalah singkatan dari "boulevard".
  • cite dipakai untuk mereferensi judul dari beberapa pekerjaan. Misalnya, jika Anda referensi artikel ini pada blog Anda sendiri, Anda dapat menempatkan "30 Penerapan Terbaik HTML Bagi Pemula" dalam tag <cite>. Catatan bahwa ini tidak boleh digunakan untuk referensi penulis dari kutipan. Ini adalah kesalahpahaman umum.

26: Berpartisipasi di Komunitas

Sama halnya situs-situs kita memberikan kontribusi besar untuk memajukan pengetahuan pengembang Web, Anda juga harus! Akhirnya tahu bagaimana mem-float elemen Anda dengan benar? Buatlah sebuah blog posting untuk mengajari orang lain bagaimana caranya. Akan selalu ada orang-orang yang kurang pengalaman daripada Anda. Tidak hanya Anda akan berkontribusi kepada komunitas, tetapi juga akan mengajari diri Anda sendiri. Pernah menyadari bagaimana Anda benar-benar tidak memahami sesuatu sampai Anda terpaksa harus mengajarkannya?


27: Gunakan Sebuah CSS Reset

Ini adalah daerah lain yang telah diperdebatkan sampai mati. Reset CSS: menggunakan atau tidak; itu adalah pertanyaannya. Jika saya untuk menawarkan saran pribadi saya sendiri, saya akan 100% merekomendasikan Anda membuat file reset sendiri. Mulailah dengan men-download yang populer, seperti Eric Meyer, dan kemudian perlahan-lahan, setelah Anda belajar lebih banyak, mulai mengubahnya menjadi ke Anda sendiri. Jika Anda tidak melakukan ini, Anda tidak akan benar-benar memahami mengapa list item Anda memiliki sedikit tambahan padding ketika Anda tidak menentukannya di mana saja di file CSS Anda. Selamatkan diri dari kemarahan dan me-reset semuanya! Satu ini harus Anda mulai.

28: Mensejajarkan semuanya!


Line em upLine em upLine em up

Pada umumnya, Anda harus berusaha untuk membariskan elemen Anda sebaik mungkin. Lihatlah desain favorit Anda. Apakah Anda memperhatikan bagaimana masing-masing baris judul, ikon, paragraf, dan logo sejajar dengan sesuatu yang lain pada halaman? Tidak melakukan hal ini adalah salah satu tanda-tanda terbesar seorang pemula. Pikirkan cara ini: jika saya bertanya mengapa Anda menempatkan sebuah elemen dalam tempat itu, Anda harus mampu memberi saya alasan yang tepat.


29: Mengiris PSD

Slice a PSDSlice a PSDSlice a PSD

Oke, jadi Anda telah mendapatkan pemahaman yang solid tentang HTML, CSS, dan Photoshop. Langkah berikutnya adalah mengubah PSD pertama Anda ke situs web sebenarnya. Jangan khawatir; ini tidak sesulit yang Anda bayangkan. Saya tidak bisa memikirkan cara yang lebih baik untuk menguji keterampilan Anda. Jika Anda memerlukan bantuan, periksa di tutorial video mendalam yang menunjukkan kepada Anda bagaimana melakukannya.


30: Jangan Menggunakan Kerangka... Belum

Kerangka, apakah mereka untuk Javascript atau CSS tetaplah fantastis; tetapi harap tidak menggunakan mereka ketika pertama kali memulai. Meskipun dapat dikatakan bahwa jQuery dan Javascript dapat dipelajari secara bersamaan, yang sama tidak berlaku untuk CSS. Saya secara pribadi mengajukan 960 CSS Framework, dan sering menggunakannya. Yang katanya, jika Anda masih dalam proses belajar CSS -- yang berarti pada tahun pertama -- Anda hanya akan membuat diri Anda lebih bingung jika Anda menggunakan salah satunya.

Kerangka CSS adalah untuk pengembang berpengalaman yang ingin menghemat banyak waktu. Mereka bukan untuk pemula.


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.