Tak perlu dikatakan, pengembangan web sangat besar. Sebagian besar dari itu adalah karena hampir semua orang ada di Web. Namun, ada kekurangan pengembang di lapangan, dan itulah sebabnya kurikulum pengembangan web sudah tersedia, dan gratis juga. Dengan mengingat hal itu, kami akan menunjukkan kepada Anda sedikit tentang apa itu HTML dan CSS. Lebih khusus lagi, kami akan menunjukkan kepada Anda bagaimana "kelas" bekerja.
Kami tidak memulai Anda dari awal, karena sudah ada banyak kurikulum gratis di luar sana. Sebagai gantinya, kami secara khusus akan menunjukkan cara kerja kelas, karena ini merupakan komponen yang diperlukan untuk menata situs web Anda. Kami juga berpikir mungkin layak untuk dibahas sebelum memposting tampilan kami di Bootstrap API Twitter, karena kelas juga merupakan komponen yang diperlukan.
Sebagai penafian, jika Anda benar-benar baru mengenal HTML dan CSS, ini mungkin bukan awal yang baik untuk Anda. Namun, jika Anda terbiasa dengan hal itu, tidak terlalu sulit untuk mengambilnya. Tetapi, jika Anda sedang mencari tutorial pemula yang lengkap, ada banyak pilihan bagus secara online. Untuk beberapa nama, ada FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity, dan banyak lagi. Jika Anda memilih untuk mulai menggali salah satu dari itu, saya sangat merekomendasikan untuk tetap menggunakan salah satunya (seperti Free Code Camp) dan menyelesaikannya sebelum memulai yang lain, karena banyak konten "dasar" yang dapat berulang-ulang.
Dengan itu, mari kita gali kelas apa saja.
Bagaimana Kelas Bekerja
Kelas sangat berguna. Mereka mengambil repetitiveness dari styling HTML. Tanpa kelas, Anda akan menata setiap elemen dalam markup Anda secara individual. Dan bagaimana jika Anda memiliki dua elemen yang sama, tetapi ingin gaya masing-masing secara berbeda? Ini akan menjadi kekacauan total. Itu sebabnya kami memiliki kelas. Kelas menambahkan beberapa struktur organisasi HTML Anda, memungkinkan Anda untuk menjaga kode Anda relatif bersih. Bukan hanya itu, tetapi kelas dapat digunakan lebih dari sekali. Dengan kata lain, Anda tidak perlu membuat aturan gaya yang sama dua kali.
Beginilah bentuk kelas di dalam kelas kami
menandai:
Seperti yang Anda lihat, di bawah label tubuh kami, kami memiliki dua
elemen dengan kelas yang berbeda. Pertamatag memiliki kelas "head1" sedangkan tag kedua memiliki kelas "head2." Jadi, di CSS kami, alih-alih menerapkan penataan ke hanyaelemen, kita dapat menerapkan gaya ke masing-masing kelas. Mengapa kita ingin melakukan itu?
elemen, kita dapat menerapkan gaya ke masing-masing kelas. Mengapa kita ingin melakukan itu?
Alasan utamanya adalah Anda tidak menginginkan semuanya
elemen untuk memiliki gaya yang sama. Itu akan membuat banyak sakit kepala ketika membuat situs web, dan selain itu, situs web tidak akan terlihat hebat. Kelas memungkinkan kita untuk menerapkan gaya hanya pada satu contoh tag, tidak semuatag di seluruh dokumen. Jadi, bagaimana Anda menulis kelas dalam HTML? Seperti ini:
Beberapa konten
Anda dapat menambahkan properti "class" ke hampir semua elemen HTML.
Bagus! Jadi, kami memiliki kelas, tetapi dalam kondisi saat ini, mereka sebenarnya tidak melakukan apa-apa. Itu karena kami belum menambahkan aturan gaya ke kelas. Untuk melakukan itu, kita perlu membuat dokumen .css terpisah. Saya hanya akan menyebutnya main.css. Dalam dokumen itu, kita akan menata kelas seperti ini:
Untuk memilih kelas yang ingin kita gaya, kita melakukan ini:
.head1 {color: red; perataan teks: tengah; }
Dalam kurung kurawal adalah semua "aturan" (atau gaya) yang kami terapkan untuk kelas itu. Ada banyak aturan berbeda yang bisa Anda masukkan ke dalam kelas itu. Dalam kasus saya, saya mengubah warna teks menjadi merah menggunakan aturan "warna" dan saya memusatkan teks dengan menggunakan aturan "text-align". Anda dapat menemukan daftar lengkap aturan CSS serta dokumentasinya dari Jaringan Pengembang Mozilla.
Sekarang, gaya kami masih belum diterapkan ke kelas-kelas dalam dokumen HTML kami, dan itu karena kami belum menautkan kedua file tersebut bersama-sama. Kembali ke file HTML Anda, dan di
tag, Anda ingin menautkan file CSS Anda dengan melakukan ini:
Dokumen HTML Anda akan terlihat seperti ini:
Dan proyek pengujian Anda akan terlihat seperti ini di Web:
Untuk video yang lebih detail yang membahas langkah-langkah ini, silakan lihat di bawah.
Video
Kesimpulan
Dan hanya itu yang ada di kelas! Mereka sangat mudah dimengerti. Jelas pada situs web besar dan populer yang Anda kunjungi, aturan di dalam kelas jauh lebih rumit daripada yang kami bahas, tetapi dalam bentuk paling dasar, itulah cara kerjanya.
Jika Anda memiliki pertanyaan atau mengalami kesulitan dalam waktu yang lama, pastikan untuk memberi tahu kami di komentar di bawah atau di Forum PCMech! Atau, jika Anda tertarik pada panduan pemula HTML / CSS lengkap di PCMech, pastikan untuk memberi tahu kami juga!
