Lompat ke konten
Home » Membuat Web Responsive Dengan Html Dan Css

Membuat Web Responsive Dengan Html Dan Css

  • oleh

Membuat Web Responsive Dengan Html Dan Css – Saat ini, penggunaan ponsel atau smartphone menjadi lebih umum di seluruh dunia. Banyak industri smartphone seperti Xiaomi, Samsung dan Iphone saling bersaing untuk merilis smartphone dengan fitur yang lebih canggih. Kesederhanaan dan portabilitasnya adalah alasan utama mengapa perangkat unik ini sangat diminati. Hampir setiap orang di dunia pasti memiliki smartphone sendiri. Membuat situs web responsif untuk layar tablet atau ponsel cerdas adalah poin penting untuk dimiliki di situs web Anda dan menjadi spesialisasi.

Pada artikel ini, kita akan melihat cara membuat website yang responsif dalam 3 langkah mudah. Bagaimana? Mari kita lihat di bawah ini.

Membuat Web Responsive Dengan Html Dan Css

Jika Anda ingin membuat website yang responsive atau membuat website yang sudah ada menjadi responsive maka hal yang paling penting untuk diperhatikan adalah layout dari website tersebut.

Html5 Css3: Belajar Membuat Responsive Web

Saat saya membuat situs web responsif, saya selalu memulai dengan terlebih dahulu membuat tata letak non-responsif, lalu memperbaiki ukuran default. Misalnya, lebar situs web CatsWhoCode.com adalah 1100 piksel (piksel).

Setelah puas dengan desain non-responsif, saya menambahkan Media Quarry dan memodifikasi CSS untuk membuat situs web terlihat responsif. Berbicara tentang desain web jauh lebih mudah dan sederhana jika Anda fokus pada 1 bagian saja dalam satu waktu.

Setelah Anda selesai mengedit tampilan situs web responsif Anda, hal utama yang harus dilakukan adalah menyalin kode di bawah ini dan menempelkannya di antara bagian tag dan ke halaman HTML Anda.

Fungsi kode di atas adalah untuk mengatur tampilan ke rasio aspek 1×1 pada semua jenis layar dan menghapus fungsi default yang menyediakan tampilan penuh situs web dari iPhone dan perangkat seluler lainnya serta memungkinkan pengguna untuk memperbesar dan memperkecil. .

Slider Css Terbaik Untuk Pengembang Web Untuk Meningkatkan Proyek Anda

Jadi saatnya menambahkan beberapa Media Quaries. Menurut situs web W3C, Media Quarry terdiri dari jenis media dan nol atau lebih pernyataan yang memeriksa status properti media tertentu. Dengan menggunakan media query, presentasi dapat diadaptasi ke layar perangkat yang digunakan tanpa mengubah konten.

Dengan kata lain, Media Quaries membuat website Anda terlihat bagus atau responsif di layar perangkat apapun, mulai dari layar smartphone hingga layar besar. Inilah yang disebut desain web responsif.

Penelusuran media disesuaikan dengan tata letak situs web Anda, jadi menyediakan kode siap pakai bisa sedikit rumit. Namun, kode di bawah ini bisa menjadi titik awal untuk sebagian besar situs web. Misalnya, #primary adalah area konten utama dan #secondary adalah sidebar.

Anda dapat melihat bahwa saya telah menetapkan 2 jenis ukuran dalam kode contoh di atas. Yang pertama digunakan untuk mengoptimalkan layar lanskap pada tablet dengan lebar maksimum 1060 piksel. #primer mengambil 67% dari wadah utama, #sekunder mengambil 30% dan margin kiri 3% ditambahkan.

READ  Berikut Ini Merupakan Tujuan Dari Pembuatan Reklame Adalah

Cara Membuat Tabel Responsive Dengan Css Di Blogger

Ukuran kedua dirancang khusus untuk tablet dengan layar vertikal (tegak) yang lebih kecil. Karena ukuran layar smartphone yang kecil, saya memutuskan untuk memberikan #primary width 100%. #secondary juga memiliki lebar 100% dan akan ditampilkan di bawah #primary.

Jika demikian, Anda dapat melihat hasilnya di tata letak situs web Anda. Di bawah ini adalah contoh situs web responsif di layar desktop:

Tata letak atau tata letak responsif adalah langkah pertama untuk membuat situs web yang sepenuhnya responsif. Sekarang mari kita fokus pada masalah penting lainnya, yaitu media seperti video atau gambar.

Kode CSS di bawah ini akan memastikan bahwa gambar Anda tidak pernah lebih besar dari penampung induknya. Tidak perlu khawatir, kodenya sangat sederhana dan berfungsi di sebagian besar situs web responsif. Cuplikan ini harus disertakan dalam lembar gaya CSS Anda agar berfungsi dengan baik.

Belajar Membuat Portofolio

Meskipun teknik di atas cukup efektif, terkadang Anda mungkin perlu menambahkan kode skrip gambar tambahan dan menampilkan gambar berbeda berdasarkan ukuran layar pengguna smartphone.

Seperti yang Anda lihat, saya menggunakan atribut data-* untuk menyimpan URL gambar yang diubah. Sekarang mari gunakan kekuatan CSS3 untuk mengganti gambar default dengan salah satu gambar pengganti yang ditentukan jika kondisi min. pencocokan lebar perangkat.

Bagaimana? Bukankah itu mengesankan? Sekarang kita beralih ke cara membuat media seperti video terlihat responsif di situs web Anda.

Terakhir, tipografi sering diabaikan oleh sebagian besar pengembang situs web saat membuat situs web responsif.

Membuat Website Sekolah Responsive Dengan Bootstrap

Sampai saat ini, sebagian besar pengembang menggunakan piksel untuk menentukan ukuran font. Meskipun piksel yang tersedia baik-baik saja saat situs web Anda memiliki lebar tetap, situs web responsif juga harus memiliki font responsif. Ukuran font halaman Anda harus terkait dengan lebar penampung induknya agar pas dengan layar pengguna dan mudah dibaca di perangkat seluler.

Spesifikasi CSS3 menyertakan fitur baru yang disebut rems. Rem bekerja hampir sama dengan unit ems, tetapi dalam hal elemen html, yang membuatnya lebih mudah digunakan daripada ems.

Ini adalah 3 langkah mudah untuk membuat situs web Anda terlihat responsif. Perhatikan baik-baik HTML dan CSS Anda untuk menghindari kesalahan. Semoga beruntung ?

Previous Post Tutorial PHP: Struktur Data String di PHP Beserta Contoh Next Post Cara Mencari Keyword SEO yang Tepat dalam 6 Langkah Mudah Tutorial Cara Desain Web Responsif – Pada postingan kali ini saya ingin membuat tutorial tentang sesuatu yang cukup penting, t .e . Cara Mendesain Responsif dengan CSS Membuat Web. Pada tutorial kali ini saya akan menjelaskan secara singkat apa itu Responsive Web dan bagaimana cara membuat Responsive Web. Di sini kita akan membuat tata letak web yang responsif di mana tata letak web kemudian dapat menyesuaikan tampilannya dengan ukuran layar yang berbeda seperti tablet, ponsel, atau komputer).

READ  Jam Tangan Paling Mahal Di Dunia 2020

Belajar Responsive Web Design Dari Nol · Karyakarsa

Dalam kode CSS. Selanjutnya yang perlu anda pahami adalah lebar dari desain website anda sendiri, ada yang lebar.

Kita ambil contoh dari website brianhrs.com saya, semuanya saya atur agar responsif (dapat menyesuaikan saat dibuka dari perangkat yang berbeda). Untuk menguji dan membuktikannya, buka di pratinjau browser dan perkecil atau silakan buka di ponsel Anda dan lihat tampilannya. Situs web saya masih melacak lebar layar browser, ini namanya

Saya sangat menyarankan untuk membiasakan diri dengan HTML dan CSS untuk mengikuti tutorial ini, jika Anda tahu sedikit tentang HTML, Anda dapat menemukan artikelnya di sini.

Web responsif adalah metode sistem web yang bertujuan untuk mengoptimalkan web jika web dibuka pada ukuran layar yang berbeda. Dengan metode ini, website akan menyesuaikan atau beradaptasi saat dibuka dari perangkat mobile/ponsel kecil, tablet atau komputer dengan monitor besar. Website yang responsif tentu akan membuat pengunjung senang ketika mengunjungi situs Anda karena tampilan atau tata letaknya menyesuaikan dengan perangkat yang digunakan pengunjung Anda. Anggap website Anda tidak responsif, mungkin terlihat bagus jika diakses dari laptop atau komputer, namun jika diakses melalui layout mobile akan berantakan dan tidak rapi, hal ini pasti akan mengganggu pengunjung Anda untuk tetap berada di halaman website Anda, jadi itu akan memakan waktu cukup lama bagi pengunjung untuk berhenti, tetapi situs web Anda tidak akan responsif, ia akan pergi dengan cepat.

Pengertian Website Responsive

Pada artikel kali ini kita akan membuat layout web yang responsive, mungkin kita akan mencoba membuat 3 kolom kiri, tengah dan kanan. Setelah itu, saat halaman dibuka dalam ukuran preset yang berbeda, misalnya (1024px), kolom akan dipecah menjadi 2 kolom dan saat di layar dengan lebar 786px ke bawah, kolom hanya akan menjadi 1.

Pastinya langkah pertama yang kita lakukan adalah membuat file HTML terlebih dahulu. Dalam kode HTML, akan ada 3 kelas.

Dalam kode CSS sehingga Anda dapat membuat kolom. Untuk kode lengkapnya silahkan lihat dan ketik di text editor yang sesuai.

, kode tersebut adalah kode CSS yang berfungsi untuk memuat file CSS yang merupakan style sheet eksternal (file terpisah).

Tutorial Belajar Bootstrap Bagian 5

Setelah Anda selesai membuat struktur file HTML, langkah selanjutnya adalah membuat dan mengedit tata letak web menggunakan CSS. Karena tata letak tidak terbentuk seperti yang kita inginkan, kita akan menata tata letak dengan kode CSS untuk membuat 3 kolom, buat file baru bernama style.css dan letakkan di folder dengan file HTML Anda, lalu tulis kode di bawah ini di teks Anda editor terkait.

READ  Penting Nya Globalisasi Bagi Indonesia

Mengapa saya mengatakan sebelumnya bahwa Anda perlu mengetahui HTML dan CSS untuk mengikuti tutorial ini? Jawabannya sangat sederhana, jadi saya tidak perlu menjelaskan kode CSS di atas, karena meskipun saya menjelaskannya, Anda mungkin tidak akan memahaminya (kecuali jika Anda sudah terbiasa dengan CSS) karena memahami kode di atas membutuhkan setidaknya pengetahuan dasar. .

Langkah selanjutnya kita akan melakukan perubahan ketika ukuran layar blank dari 1080 pixels, sebenarnya anda bisa menentukan ukuran ini sesuai dengan kebutuhan anda masing-masing apakah 1024 pixels, 1000 pixels atau 960 pixels. Namun disini kita akan menggunakannya sesuai dengan ukuran perangkat yang biasa digunakan seperti iPhone, iPad, Samsung Galaxy dan lain sebagainya. Untuk mengubahnya, kita hanya perlu menggunakan bantuan Media Query.

Kode CSS di atas tidak hanya untuk mengatur tata letak kolom, tetapi juga dapat melakukan perubahan lain seperti membuat kolom kiri menjadi biru, mengubah warna font, mengubah ukuran font, atau mengubah font. kelas dalam kode di atas

Coding Dasar Html And Css

Langkah selanjutnya adalah kita perlu memperkecil tata letak web kita ke ukuran seluler, karena tablet tidak dapat digunakan untuk hosting seluler, jadi kita harus mendefinisikan ulang kode CSS ketika ukuran layar lebih kecil. Sekali lagi seperti sebelumnya, kita hanya akan mengubah menjadi satu kolom saat diakses pada ukuran 700px ke bawah. Kode CSS ada di bawah, silahkan ketik, jangan copy paste.

Lihat kode di atas, kita tidak menentukan lebar kolom lagi, semua elemen (div) ditampilkan dengan width: auto; artinya, itu akan dibuat untuk mengisi layar lebar. Untuk alasan ini, tata letak kolom tunggal akan dibuat saat ukuran yang lebih kecil dimasukkan.

Seperti ini

Membuat tampilan web dengan html dan css, membuat web perpustakaan dengan html dan css, tutorial membuat web dengan html dan css, contoh membuat web dengan html dan css, membuat web statis dengan html dan css, membuat template web responsive dengan html dan css, cara membuat web responsive dengan css, membuat web profile dengan html dan css, membuat halaman web dengan html dan css, membuat web dengan html dan css, membuat web sederhana dengan html dan css, cara membuat web responsive dengan html dan css

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *