Dalam dunia pengembangan web, visualisasi yang baik dari semua objek yang disusun pada halaman sangatlah penting, begitu pula gambar dalam hal ini. Gambar tidak hanya berfungsi sebagai hiasan belaka untuk situs web tersebut, tetapi juga menyampaikan informasi yang bagus, dan komposisi situs web yang baik agar pesan yang ingin Anda sampaikan dengan benar sampai ke pengguna sangatlah penting. Inilah yang menjadi dedikasi para desainer web, dan mereka harus memiliki pemahaman yang memadai tentang komposisi agar hal ini dapat dicapai. Dalam hal ini, kami tidak akan mendedikasikan diri kami untuk mendesain situs web dari awal, tetapi kami akan melakukannya Kita akan mempelajari cara memusatkan gambar situs web ini menggunakan HTML, yang penting, karena Hampir semua halaman web disusun dengan bahasa HTML.
Sepanjang artikel ini, kami akan menjelaskan berbagai teknik dan proses yang dapat digunakan dengan bahasa ini. Kami akan mengeksplorasi berbagai alat yang dimiliki pengembang untuk memastikan bahwa tujuan desain web dapat terpenuhi. Dari metode dasar yang menggunakan atribut hingga teknik berbasis CSS.
Selain itu, kita akan memahami bagaimana teknik ini sesuai dengan konteks desain web yang lebih luas. Jika Anda sudah lama menggunakan bahasa merek, Anda akan tahu bahwa untuk mencapai suatu tujuan, ada banyak cara untuk mencapainya, beberapa lebih optimal dan canggih daripada yang lain, tetapi semuanya valid, dan oleh karena itu Kami akan mengajari Anda berbagai metode untuk memusatkan gambar dalam HTML.
Oleh karena itu, apakah Anda sudah lama mengenal bahasa markup dan ingin memoles beberapa teknik, atau jika Anda masih memulai dan ingin mempelajari konsep tertentu dari bahasa HTML, Anda berada di pihak yang tepat. tempat. Baca terus untuk mengetahui cara memusatkan gambar dalam HTML. Ayo mulai!
Apa itu HTML?
Sebelum membahas masalah ini, penting untuk mengetahui apa yang kita lakukan, dan untuk apa bahasa yang akan kita gunakan, dalam hal ini, HTML.
HTML, atau HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat halaman web dan aplikasi web.. Ini adalah bahasa yang mendefinisikan struktur dasar dan konten halaman web. Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menyediakan sekumpulan tag dan atribut yang memungkinkan pengembang web untuk menentukan berbagai jenis konten pada suatu halaman, seperti teks, gambar, link, formulir, dan multimedia.
Halaman web yang dibuat dengan HTML terdiri dari elemen struktural, seperti judul, paragraf, daftar, dan tabel., disusun berdasarkan tag tertentu yang menunjukkan bagaimana konten harus ditampilkan di browser web. Setiap elemen dapat berisi teks, link, atau bahkan elemen bertumpuk lainnya. HTML juga memungkinkan penggabungan bahasa lain, seperti CSS (Cascading Style Sheets) untuk desain visual dan presentasi, dan JavaScript untuk interaktivitas dinamis di sisi klien.
Evolusi HTML telah menghasilkan beberapa versi; Versi terbaru adalah HTML5, yang telah memperkenalkan fitur-fitur baru seperti elemen semantik (seperti , Dan ), API untuk multimedia dan grafik, serta peningkatan dukungan untuk perangkat seluler, sehingga memberikan aksesibilitas dan skalabilitas yang lebih baik. Kesimpulan, HTML adalah bahasa penting yang bertindak sebagai 'kerangka' semua halaman web, menyediakan struktur dasar yang menjadi dasar pembuatan konten situs web tersebut.
Metode untuk memusatkan gambar dalam HTML
Sekarang, setelah memahami apa itu HTML dan kegunaannya, kami akan menjelaskan bagaimana mencapai tujuan utama artikel ini. Di sini kami menunjukkan kepada Anda beberapa metode untuk memusatkan gambar dalam HTML
Gaya Inline (Inline, Properti perataan teks) Dengan membungkus gambar dalam a dan terapkan style=”text-align: center;”, Anda menggunakan CSS sebaris untuk menentukan gaya tertentu untuk penampung itu. Properti text-align: center; menyelaraskan gambar secara horizontal di tengah , terlepas dari ukuran atau kontennya.
Gaya Sebaris (Properti sebaris, margin, dan otomatis) Saat menerapkan style=»margin: 0 otomatis; perataan teks: tengah;» ke , Anda menggunakan dua properti CSS. margin: 0 diri; menetapkan margin nol di bagian atas dan bawah dan margin otomatis di samping, menempatkannya di tengah secara horizontal . perataan teks: tengah; memastikan bahwa konten apa pun di dalam juga terpusat secara horizontal.
Gaya dalam CSS Eksternal (margin dan properti otomatis) Saat mendefinisikan kelas CSS seperti .center-image { margin: 0 auto; perataan teks: tengah; }, Anda dapat menerapkan gaya ini pada gaya apa pun dengan kelas .center-image. Margin properti: 0 otomatis; masih terpusat secara horizontal, sementara text-align: center; memastikan bahwa konten di dalam juga terpusat.
Flexbox (Pemusatan Horizontal dan Vertikal) Saat menggunakan display: flex; justify-content: tengah; menyelaraskan-item: tengah; dalam wadah (misalnya, a ), Anda menerapkan teknik Flexbox. tampilan: fleksibel; ini mengubah wadah menjadi wadah yang fleksibel, sementara justify-content: center; dan align-item: center; Mereka memusatkan gambar secara horizontal dan vertikal, berapa pun ukurannya.
Grid (Pemusatan Horizontal dan Vertikal) Saat menerapkan display: grid; item tempat: tengah; di dalam container, Anda menggunakan teknik CSS Grid. tampilan: kisi; menetapkan wadah sebagai wadah kisi, dan item tempat: tengah; memusatkan konten apa pun di dalam kisi baik secara horizontal maupun vertikal.
Apa itu bahasa markup?
Seperti yang kami sebutkan di atas, HTML adalah bahasa markup, namun definisi ini mungkin terdengar asing bagi lebih dari satu orang, jadi tidak ada salahnya untuk mengetahui lebih banyak tentangnya., dan dengan itu, pelajari lebih banyak tentang lingkungan HTML.
Bahasa markup adalah sistem pengkodean yang menggunakan tag untuk menyusun dan memformat teks dalam dokumen elektronik.. Bahasa-bahasa ini, seperti HTML dan XML, Mereka sangat penting dalam pembuatan halaman web dan pengorganisasian data. Tag mendefinisikan elemen seperti judul, paragraf, dan tautan, memungkinkan komputer dan browser web menafsirkan dan menampilkan konten dengan benar.
Bahasa markup sangat penting untuk penyajian informasi terstruktur dalam lingkungan digital, menyediakan kerangka standar untuk komunikasi dan desain di era Internet. Karena itu, Jika Anda ingin mempelajari lebih lanjut tentang bahasa HTML, kami mengundang Anda untuk mengaksesnya artikel, yang didalamnya kami menjelaskan lebih lanjut konsep mengenai HTML, dalam hal ini bagaimana cara memasang gambar background. Jika Anda ingin mempelajari bahasa markup lainnya, kami mengundang Anda untuk membaca bahasa markup lainnya artikel, di dalamnya kami menjelaskan apa itu XML.
