Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Desain Web Untuk Anak-anak dengan Layout CSS

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

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

Selamat datang di pelajaran keenam dari seri Desain Web untuk Anak-anak kami, Layout CSS!

Ini adalah dimana kita menaruh semua elemen kita persis dimana kita inginkan mereka tampil di layar. Kita akan menambahkan ke file HTML dan CSS kita untuk melakukannya.

Untuk mengingatkan diri Anda, silakan lihat di website yang sedang kita bangun. File untuk kursus ini dapat di-download di sini dan jangan lupa untuk mengajukan pertanyaan Anda di bagian komentar di bagian bawah halaman ini.

Sebelum Kita Mulai

Ada beberapa hal yang perlu kita ketahui sebelum melompat tepat ke dalam tata letak. Pada bagian pertama ini kita akan melihat bagaimana untuk tetap teratur. Kami akan membahas beberapa dasar memposisikan dan berbicara tentang jenis properti CSS yang digunakan untuk tata letak.

Pengurutan CSS

Menjaga dokumen CSS tetap teratur sangat penting. Pengaturan yang tepat akan membuatnya lebih mudah bagi kita untuk menemukan semua potongan-potongan dalam file kita, sehingga lebih mudah untuk mengubah dan menambahkan hal-hal nantinya. Pada umumnya, yang terbaik adalah mengurutkan deklarasi CSS kita dalam urutan dimana mereka mengambil tempat pada halaman.

Kami akan menambahkan style dalam pelajaran ini ke main, misalnya. Styling yanng ditambahkan ini pada suatu elemen utama harus dimasukkan dalam dokumen CSS kami sebelum elemen lain yang bersarang di dalam main.

Box Model

Elemen HTML adalah sedikit seperti kotak persegi panjang. Box model CSS menjelaskan jarak dari kotak-kotak ini.

Setiap kotak memiliki empat sisi. Kita dapat menerapkan nilai untuk keempat sisi sekaligus dalam CSS kita melalui padding, border, dan/atau margin. Namun, jika kita ingin men-style satu sisi elemen kita dapat melakukannya juga. Sebagai contoh:

Katakanlah kotak merah muda ini mewakili teks. Kita bisa melihat bahwa padding telah ditambahkan hanya ke kiri dan border biru tebal mencakup semua empat sisi konten.

Flexbox

CSS memberikan kita satu set properti yang dibuat terutama untuk membantu kita dengan tata letak situs web kita. Jadi sementara box model membantu menjelaskan spasi di sekitar elemen HTML, flexbox akan memungkinkan kita untuk memindah elemen-elemen ini tempatnya.

Ketika kita menggunakan flexbox pada sebuah elemen kontainer, elemen ini menjadi kontainer flex dan semua unsur di dalamnya menjadi item flex.

Ketika kita menerapkan flexbox untuk kontainer, secara otomatis akan meletakkan item-item sepanjang garis lurus (secara horizontal) dan kemudian kita bisa mendapatkan lebih rinci dengan properti flexbox lainnya.

Kita tidak perlu menggunakan flexbox terlalu banyak untuk website kami, tetapi penting untuk berpikir tentang flexbox seperti ini dianggap sebagai yang paling modern, cara tepat untuk memposisikan potongan-potongan kecil konten pada situs web.

Header

h1 dan gambar kota dalam header diletakkan ditengah halaman. Ada beberapa cara berbeda untuk menengahkan sesuatu dengan CSS, tetapi untuk sekarang kita akan menggunakan text-align: center; pada header.

Kita akan menunjuk ke header dengan menggunakan nama class-nya yang telah kita tambahkan sebelumnya:

Jangan lupa! Simpan dokumen dan me-refresh browser untuk melihat perubahan kita setelah kita membuatnya!

Section

Hal pertama yang kita akan ingin melakukan ke section kita adalah membuat konten, gambar dan daftar, dalam setiap section di samping satu sama lain daripada ditumpuk.

Untuk mencapai hal ini, kita akan menggunakan flexbox. Flexbox diterapkan ke item dalam sebuah elemen kontainer dengan menggunakan display: flex; pada kontainer:

Untuk membawa ini kembali ke apa yang kita bicarakan sebelumnya, gambar dan div yang berisi daftar toko sekarang adalah item flex, karena mereka dalam kontainer flex ini.

Meskipun ada banyak pilihan untuk menentukan persis di mana elemen harus berada, perilaku default flexbox di sini bekerja sempurna bagi kita–dan daftar toko kita sekarang langsung di sebelah kanan gambar toko.

Catatan tentang "Vendor Prefixes"

Karena Flexbox cukup baru, tidak semua browser memiliki kesempatan untuk memasukkannya dengan benar. Untuk bekerja di sekitar ini kami dapat menyertakan vendor prefix ke properti flexbox, menambahkan dukungan yang hilang ini untuk sementara waktu. Meskipun kita hanya berfokus pada versi terbaru dari browser modern untuk proyek ini, kita masih perlu untuk memasukkan vendor prefix -webkit- untuk flexbox untuk memastikan ia bekerja di "Safari".

Gambar & Daftar

Kita bisa menggunakan sedikit jarak antara elemen yang berisi semua teks dan gambar, jadi dalam HTML mari kita tambahkan class store-details ke div yang berisi teks.

Setelah kita simpan ini kita dapat langsung menuju CSS kita dan menambahkan jarak ini, tetapi hanya bagian kiri dari div:

Default Spasi Daftar

Ada beberapa spasi daftar unordered dari toko kita di sebelah kiri. Ini karena ada beberapa styling default yang datang bersamaan dengan menggunakan daftar HTML. Kadang-kadang styling default ini adalah OK, dan di lain waktu ini tidak dapat menghasilkan efek yang kita inginkan.

Kita dapat menyingkirkan default spasi daftar ini dengan menggunakan padding: 0; pada unordered list, tetapi itu akan menyebabkan poin-poin kita menjadi terlalu jauh ke kiri dibandingkan dengan heading daftar kita.

Kami ingin sedikit padding di sini, tapi tidak sebanyak yang disediakan oleh styling daftar default. Pengaturan padding-left pada 15px pada daftar akan mejajarkan poin-poin kita dengan judul cukup baik, sehingga kami akan menambahkan ini selain hal-hal yang kita tambahkan ke daftar pada pelajaran sebelumnya:

Ruang Antara Item Daftar

Kami masih memiliki masalah yang kami sebutkan pada pelajaran sebelumnya dengan item daftar yang terlalu berdekatan. Untuk memecahkan masalah ini mari kita tambahkan class store-name untuk semua item daftar, <li>, dalam HTML kita. Kami kemudian akan menambahkan margin kecil ke bawah item-item tersebut.

Margin dan Menengahkan

Jarak butuh untuk ditambahkan ke bagian setelah menempatkan mereka di tengah halaman. Kami akan melakukan ini melalui properti margin dan width.

Sekali lagi, kami akan menambahkan styling yang telah kita tulis:

Nilai 50px dalam margin di sini adalah menerapkan jumlah ruang di bagian atas setiap section-toko. Mengikutinya dengan auto akan memberitahukan browser untuk mempertimbangkan lebar elemen (yang kita tetapkan ke 450px) dan menengahkan dalam jendela browser secara otomatis.

Footer

Untuk footer kita, kami akan menengahkan teks dan menambahkan sejumlah kecil padding untuk memastikan teks ini tidak terlalu dekat dengan tepi footer.

Margin Body

Kami berbicara tentang styling default sedikit ketika kita menempatkan daftar kami ke tempatnya. Dari elemen body datang dengan style default sendiri, salah satunya adalah margin yang mengelilingi seluruh halaman. Walaupun kadang-kadang ini bukan masalah, kita dapat melihat bahwa itu adalah mencegah background-color dari footer kita untuk meregang sepenuhnya ke sisi jendela browser.

Solusinya adalah untuk melompat body di dokumen CSS kita dan tambahkan berikut:

Kesimpulan

Dalam kursus ini kita mendapatkan semua elemen ke tempatnya dengan teknik layout CSS. Sementara biasanya ada beberapa cara yang berbeda untuk mencapai tata letak yang spesifik, mendapatkannya lebih nyaman dengan box model CSS dan flexbox menyediakan pemahaman yang sangat padat untuk pendekatan yang berbeda ini.

Sejak situs kita sudah lengkap (selamat!) kita akan berbicara tentang desain, tipografi, dan warna dalam pelajaran untuk diikuti. Ini akan membantu Anda menjadi sepenuhnya desainer web penuh informasi.

Sampai jumpa di sekitar kota!

Advertisement
Advertisement
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.