Kami akan melakukannya dengan sangat baik untuk mempelajari penggunaan, atribut yang diizinkan, dan validasi. Ini akan mengarahkan Anda ke praktik terbaik UI, kegunaan, dan aksesibilitas Show Daftar teratas untuk panduan penggunaan adalah MDN (Mozilla Developer Network) tetapi Anda akan dengan cepat menambahkan banyak situs otoritas lainnya ke bookmark itu. SitePoint menawarkan banyak sumber daya yang bagus untuk pelajar. Paket Premium mereka terjangkau dan membuka perpustakaan besar sumber bacaan mereka knightjmcc
Penyorotan sintaks tersedia di semua editor teks yang mengenali HTML, CSS, dll. Untuk pemula ada Notepad++ yang sangat populer dan dilengkapi dengan baik. Ketika Anda mencapai tingkat di mana Anda benar-benar berkomitmen untuk berkembang, maka akan bermanfaat untuk mencari IDE berbayar, tetapi tidak sampai saat itu. Anda dapat menguji coba beberapa lingkungan pengembang online seperti repl. itu, codepen, & c. yang terbukti sangat berguna karena mereka memiliki linting bawaan, yang merupakan fitur yang Anda tanyakan. Setelah Anda melanjutkan pembelajaran, Anda mungkin ingin melihat plugin linter untuk editor teks Anda knightjmcc
Alat pencarian umum yang biasanya ditemukan di menu Edit editor teks sudah lebih dari cukup. Editor akan memiliki toggling segmen untuk menyembunyikan sebagian besar kode agar tidak mengganggu. Mereka juga membantu melacak sarang. Setelah Anda menemukan dan belajar menggunakan banyak alat di editor gratis Anda, Anda akan lebih betah dan tidak terlalu terganggu setelah beralih ke lingkungan alur kerja yang lebih profesional Sejauh ini Anda telah menambahkan gaya ke berbagai elemen di halaman portofolio Anda, namun gaya yang Anda tambahkan telah memengaruhi semua elemen dari jenis tertentu. Misalnya, saat Anda menambahkan gaya ke elemen div yang memengaruhi semua elemen div secara merata. Bagaimana jika Anda ingin mengubah gaya beberapa elemen div dengan satu cara, dan elemen div lainnya dengan cara yang berbeda? . Dalam pelajaran ini Anda akan mempelajari bagaimana atribut ID dan Kelas dapat digunakan untuk menyesuaikan gaya elemen individu (id) atau kelompok elemen (kelas) Hasil PelajarPada penyelesaian latihan ini
Apa itu id?Dalam HTML, setiap elemen di halaman web Anda dapat diberi atribut id yang unik. Ini dapat berupa teks apa pun yang Anda suka, tetapi harus unik (hanya satu item yang dapat memiliki label ini). Merupakan praktik yang baik untuk menetapkan label yang menjelaskan fungsi elemen. Misalnya, a
Anda menetapkan atribut id ke elemen HTML saat Di unit ini, kami hanya tertarik pada alasan pertama untuk menambahkan ID. Kami ingin dapat mengatur gaya elemen tertentu menggunakan CSS. Misalnya, Anda memiliki paragraf yang berfungsi sebagai peringatan di halaman. Anda tidak ingin terlihat seperti semua paragraf lain di halaman. Anda ingin menonjol sehingga orang pasti akan menyadarinya. Anda dapat menambahkan id="alert" ke paragraf tersebut, seperti ini
Untuk menambahkan gaya ke elemen dengan id, Anda mengawali id dengan simbol # di CSS Anda. Misalnya, inilah cara membuat paragraf peringatan muncul dalam kotak kuning besar dengan batas hitam dan teks hitam besar p#alert { color: black; font-weight: bold; background: #FFFF66; /* yellow */ border: 2px solid black; padding: 1em; }_ Perhatikan bahwa menentukan tipe elemen dalam CSS bersifat opsional jika elemen memiliki id. Pada contoh di atas, kami menggunakan "p#alert" sebagai pemilih, yang memberi tahu browser bahwa gaya berikut berlaku untuk paragraf dengan id "alert". Namun, karena tidak ada elemen lain - paragraf atau lainnya - yang memiliki id yang sama, kita dapat dengan mudah menggunakan "#alert" sebagai pemilih kita, tanpa "p", seperti ini #alert { color: black; font-weight: bold; background: #FFFF66; /* yellow */ border: 2px solid black; padding: 1em; } Ini umumnya merupakan praktik yang baik untuk memasukkan elemen karena ini membantu Anda mengingat elemen mana yang memiliki id tertentu. Terkadang Anda ingin mengetahuinya hanya dengan melihat file CSS, tanpa harus merujuk kembali ke file HTML asli Apa itu kelas?Terkadang mungkin ada sekelompok elemen yang ingin Anda sesuaikan gaya dengan cara tertentu. Misalnya, Anda membuat laman web hiburan yang menyertakan beberapa ulasan film, selain konten lainnya. Keseluruhan isi dari setiap review (sebuah heading dengan judul film, ditambah beberapa paragraf) dikemas dalam a untuk menyimpan semuanya dalam satu kotak. Paragraf pertama dari setiap ulasan adalah ringkasan singkat yang menggambarkan film tersebut, kemudian semua paragraf yang tersisa berisi konten kritik Anda terhadap film tersebut. Anda mungkin ingin mengatur gaya elemen yang berisi setiap ulasan berbeda dari yang lain elemen di halaman, jadi semua ulasan memiliki tampilan yang berbeda, tetapi konsisten satu sama lain. Anda dapat melakukannya dengan menugaskan class="review" ke setiap ulasan ini. Selain itu, Anda mungkin ingin paragraf ringkasan memiliki tampilan yang khas, berbeda dari semua paragraf lainnya. Anda dapat melakukannya dengan menugaskan class="summary" ke setiap paragraf ringkasan. Kode Anda mungkin terlihat seperti ini.
Untuk menambahkan gaya ke semua elemen yang merupakan bagian dari kelas tertentu, Anda mengawali nama kelas dengan tanda titik (. ) di CSS Anda. Misalnya, inilah cara kami dapat menambahkan latar belakang biru pucat dan bingkai biru tua ke semua ulasan film, dan menambahkan huruf miring ke semua paragraf ringkasan div.review { background-color: #E6EBF5; /* pale blue */ border: 1px solid #003399; /* dark blue */ } p.summary { font-style: italic; }_ Pemilih KeturunanSelain menetapkan gaya ke kelas elemen, Anda juga dapat menetapkan gaya ke keturunan elemen tersebut. Keturunan adalah elemen yang bersarang di dalam elemen lain Sebagai contoh, katakanlah Anda ingin semua elemen (tautan) pada halaman berwarna merah dan bergaris bawah. Inilah cara Anda dapat melakukannya di CSS a { color: red; text-decoration: underline; } Namun, katakanlah Anda menginginkan gaya yang berbeda untuk tautan yang merupakan bagian dari menu navigasi Anda. Anda ingin mereka menjadi teks putih dengan latar belakang biru tua, tanpa garis bawah. Dengan asumsi tautan ini terkandung dalam a elemen, Anda bisa mengatur gaya yang menggunakan penyeleksi keturunan di CSS, seperti itu.nav a { color: white; background-color: #003399; /* dark blue */ text-decoration: none; }_ Pada contoh di atas, nav pemilih memberi tahu browser untuk menerapkan definisi gaya ke setiap elemen yang ada di dalam a elemen. Dengan kata lain, jika ada tautan di dalam menu navigasi, terapkan gaya ini ke sanaDalam contoh ulasan film, misalkan sebagian besar paragraf di halaman hiburan Anda memiliki padding yang disetel ke 1em. Namun, Anda ingin mengurangi bantalan itu menjadi 0. 75em untuk semua paragraf yang membentuk ulasan film, agar ulasan terlihat sedikit lebih ketat. Karena ulasan film masing-masing terbungkus dalam a elemen dengan class="review", Anda dapat dengan mudah mengubah gaya semuanya menggunakan penyeleksi turunan, seperti ini. div.review p { padding: 0.75em; } Kegiatan
Selebaran/Dokumen OnlineSemua selesai?Setelah Anda menambahkan elemen id dan kelas ke masing-masing div di halaman beranda portofolio Anda, Anda sekarang memiliki kerangka kerja untuk menambahkan lebih banyak variasi pada gaya di halaman Anda. Tunjukkan halaman Anda kepada instruktur Anda sebelum melanjutkan ke Pelajaran 2 Bisakah seorang div memiliki ID?Ya, elemen HTML apa pun (seperti div, input, nav, body, dll) dapat memiliki "id" dan "class" secara bersamaan dan sekaligus . Satu-satunya perbedaan di sini adalah bahwa "id" hanya dapat memiliki satu nilai unik dan "kelas" dapat memiliki lebih dari satu.
Bisakah div memiliki nama dan ID?Jika Anda perlu 'memberi nama' pada div untuk mengatasinya dari javascript atau mengidentifikasinya secara unik di halaman, Anda dapat menggunakan atribut id. That said, most modern browsers will handle a name attribute on a div with no issues but it does not conform to HTML standards. Save this answer.
Apakah DIV memerlukan ID?Jika Anda memberi mereka ID yang berbeda maka Anda harus menentukan semua gaya pada keduanya di CSS. Mengapa Anda perlu menggunakan ID daripada kelas? . DIV hanyalah elemen blok generik dan tidak memiliki persyaratan seperti itu .
Kemana perginya div id dalam HTML?Div masuk di bagian badan file HTML. Ini jelas ditandai dengan tag dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. dalam file HTML. |