Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Orphans Style HTML DOM dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti orphans Style DOM pada HTML merupakan properti yang digunakan untuk mengontrol angka minimum dari baris pada paragraf terpisah dari paragraf lama. Nilai default dari properti orphans adalah nilai turunan atau 2, atau dengan kata lain merupakan sebuah nilai minimum dari dua baris yang tersisa dari halaman, jika paragraf akan mengalami pemisahan.

Sebelum memahami lebih dalam materi tentang Orphans Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Urutan HTML Menggunakan Order Style DOM, Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM, dan Mengatur Posisi Objek HTML Menggunakan objectPosition Style DOM.

Sintak:
  • mengembalikan nilai properti orphans: object.style.orphans
  • mengatur nilai properti orphans: object.style.orphans = "number|initial|inherit"

Property Values:
  • number: merupakan nilai integer yang digunakan untuk menentukan angka dari baris yang dapa ditinggalkan pada bagian akhir dari halaman atau kolom. Pada value ini nilai negatif tidak diperbolehkan, dan nilai default-nya adalah 2.
  • initial: merupakan value yang digunakan untuk mengatur elemen ke nilai initial.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Contoh: mengatur angka dari baris untuk properti orphans.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style orphans DOM

</title>

 

<div 

id="element">

 

<p>

CSS merupakan bahasa yang 

digunakan untuk 

mendeskripsikan tampilan dari 

sebuah dokumen yang ditulis 

pada HTML.

</p>

 

<p>

<span style="color: red; font-weight: bold">

CSS dirancang untuk 

memungkinkan terjadinya 

pemisahan antara konten dan 

tampilan, termasuk juga untuk 

layout, warna, dan bentuk 

huruf. CSS memiliki sintak 

sederhana dan menggunakan 

keywor berhahasa Inggris untuk 

menentukan nama dari berbagai 

macam style properti. Sebuah 

style terdiri dari sebuah 

daftar aturan tertentu, dimana 

setiap aturan terdiri dari 

satua tau lebih selektor, dan 

sebuah deklarasi block.

</span>

</p>

 

<p>

Pemisahan antara tampilan dan 

konten dapat meningkatnan 

kemampuan aksesibilitas dari 

sebuah konten, dimana hal ini 

akan menyediakan lebih banyak 

fleksibilitas dan kendali pada 

tampilan karakter spesifik, 

juga memungkin kuntuk berbagai 

macam halaman web untuk 

memilikif format yang telah 

ditentukan secara relevan oleh 

CSS secara terpisah. File CSS 

mengurangi kompleksitas 

reduksi dan repetisi pada 

konten struktural.

</p>

 

<p>

Pemisahan antara format dan 

konten juga dapat dilakukan 

untuk menampilkan halaman 

markup yang sama pada style 

yang berbeda untuk method 

rendering yang berbeda pula, 

seperti pada layar, pada 

cetakan, suara, atau pada 

papan braile. CSS juga 

memiliki aturan format 

alternatif jika konten yang 

diakses ersebut menggunakan 

perangkat mobile.

</p>

 

<p>

Nama CSS berasal dari skema 

prioritas yang telah 

ditentukan untuk menentukan 

style mana yang dapat 

diterapkan jika terdapat lebih 

dari satu aturan yang cocok 

pada sebuah elemen, yang 

sifatnya dapat diperkirakan.

</p>

 

</div>

 

<style>

#element 

{

columns: 12em 3;

column-gap: 3em;

}

</style>

 

<script>

function myFunction() 

{

// Jumlah baris yang dapat 

// ditinggalkan pada bagian 

// akhir dari halaman atau 

// kolom.

document.getElementById("element").style.orphans =

"5";

}

myFunction()

</script>

 

</head>

 

</html>

Output:
Sesuai dengan nilai properti orphans, minimal 5 baris akan ditinggalkan pada halaman atau kolom yang tersedia sebelumnya, jika sebuah paragraf melakukan split.


Orphans Style dalam HTML DOM merupakan salah satu properti dalam pengaturan tampilan halaman web yang berhubungan dengan elemen tipografi. Elemen tipografi sendiri mencakup berbagai aspek, termasuk pemilihan jenis huruf, ukuran, jarak antar baris, dan penyelarasan teks. Salah satu masalah umum dalam tata letak teks adalah munculnya orphans atau kata-kata tunggal yang terpisah pada baris terakhir suatu paragraf. Orphans mengacu pada keadaan saat satu atau beberapa kata berada di awal atau akhir halaman atau kolom teks tanpa dukungan visual yang memadai dari konteks teks di sekitarnya. Ini biasanya terjadi karena pengaturan aliran teks yang kurang optimal, sehingga menyebabkan ketidaknyamanan visual bagi pembaca.

Fungsi dari pengaturan orphans adalah untuk menghindari pemisahan baris teks yang tidak wajar. Pengaturan ini sangat penting dalam menjaga keindahan serta keteraturan sebuah teks yang disajikan di halaman web. Orphans dapat mengganggu aliran membaca karena menimbulkan kekosongan di halaman yang seharusnya diisi dengan konten yang relevan. Dengan adanya aturan orphans, desainer web atau pengembang halaman dapat mengatur agar sebuah paragraf tidak berakhir dengan baris tunggal yang terlalu pendek. Baris ini dianggap tidak cukup memberikan informasi visual dan cenderung menimbulkan ruang kosong yang terlihat tidak rapi.

Selain dari sisi estetika, orphans juga mempengaruhi keterbacaan teks. Ketika kata-kata atau baris pendek tertinggal di akhir halaman atau kolom, pembaca bisa mengalami kebingungan atau kehilangan konsentrasi saat berusaha mengikuti alur narasi. Ketidakrataan visual ini membuat pengalaman membaca menjadi kurang lancar. Sebagai salah satu bagian dari pengaturan tipografi dalam halaman web, orphans menjadi aspek yang harus diperhatikan dalam membuat tampilan yang lebih profesional, terutama bagi situs web yang menekankan pada konten teks, seperti blog, artikel berita, atau publikasi ilmiah.

Di dalam DOM (Document Object Model), properti orphans dapat diakses atau dimanipulasi melalui objek terkait yang digunakan untuk mengatur tampilan. Meskipun penggunaannya mungkin tidak terlalu sering terlihat langsung oleh pengguna awam, namun fungsinya tetap penting dalam menjaga tata letak yang optimal. Properti orphans dapat disetel untuk menentukan berapa banyak baris minimal yang harus ada pada akhir kolom atau halaman. Ini memastikan bahwa teks tidak akan terputus secara tidak wajar dan menjaga kelangsungan visual dari sebuah teks yang panjang.

Dengan menggunakan properti ini, pengembang memiliki kendali penuh atas bagaimana teks ditampilkan di berbagai perangkat dan ukuran layar. Dalam konteks pengembangan web, aspek responsivitas sangat penting. Teks yang terlihat baik pada layar komputer mungkin tidak terlihat sama di perangkat genggam. Oleh karena itu, orphans menjadi alat bantu untuk menyeimbangkan tampilan agar tetap konsisten tanpa mengurangi nilai estetika maupun keterbacaan teks. 

Orphans Style juga dapat diaplikasikan dalam berbagai proyek cetak digital atau elektronik seperti majalah digital, buku elektronik, serta dokumen yang membutuhkan pembagian teks dalam kolom atau halaman. Karena teknologi web semakin berkembang, perhatian terhadap hal-hal kecil seperti orphans menjadi semakin penting. Dalam industri penerbitan, hal ini sudah lama menjadi perhatian para desainer karena ketidakrataan tata letak teks pada media cetak seringkali dipandang mengganggu. Pada media digital, pengaturan seperti orphans, widow, dan margin menjadi bagian integral dalam merancang pengalaman baca yang nyaman bagi pengguna.

Dalam dunia pendidikan, terutama dalam penyusunan materi ajar berbasis web, mengatur tata letak teks juga sangat penting. Teks yang tersaji dengan rapi dan enak dibaca membuat peserta didik lebih mudah menyerap informasi. Jika terjadi gangguan seperti orphans yang memisahkan teks, maka peserta didik akan kesulitan memahami materi secara utuh karena konsentrasinya terganggu oleh kekosongan atau ketidakrataan baris teks. Oleh karena itu, pengaturan orphans dapat menjadi solusi yang membantu dalam penyusunan materi ajar berbasis web yang optimal.

Secara keseluruhan, orphans adalah bagian dari pengaturan estetika visual yang seringkali tidak disadari penggunanya, namun memiliki dampak besar pada cara sebuah halaman web atau dokumen ditampilkan. Seiring dengan berkembangnya teknologi web dan kebutuhan akan tampilan yang lebih baik, properti orphans tetap menjadi bagian penting dalam proses desain. Ini menunjukkan bahwa perhatian terhadap detail dalam tipografi merupakan hal yang esensial dalam menciptakan pengalaman baca yang memuaskan.

Fungsi orphans dalam HTML DOM menjadi semakin relevan di era digital saat ini. Berbagai platform media digital kini berlomba untuk menyajikan konten teks dengan tata letak yang rapi dan profesional. Dengan memanfaatkan pengaturan orphans, pengembang dan desainer web dapat menciptakan halaman yang tidak hanya informatif, tetapi juga nyaman dilihat. Selain itu, penggunaan orphans juga memberikan fleksibilitas lebih dalam mengatur tampilan teks yang bersifat dinamis, baik pada perangkat desktop, tablet, maupun ponsel pintar.

Pada akhirnya, orphans tidak hanya tentang estetika semata, tetapi juga tentang memberikan pengalaman pengguna yang lebih baik. Ketika halaman web atau dokumen digital dirancang dengan memperhatikan hal-hal seperti orphans, widow, dan margin, hasil akhirnya adalah tampilan yang lebih bersih, lebih mudah dibaca, dan lebih menyenangkan bagi pengguna. Ini adalah bagian dari seni tipografi yang, meskipun terlihat sederhana, memiliki peran besar dalam membentuk kesan visual secara keseluruhan. Penggunaan orphans yang tepat dapat membantu menciptakan halaman web yang lebih menarik dan profesional, serta meningkatkan kualitas komunikasi visual dalam dunia digital yang semakin berkembang.

Dengan demikian, penerapan orphans Style dalam HTML DOM bukan hanya tentang mempercantik tampilan halaman web, tetapi juga meningkatkan fungsionalitas dan keterbacaan konten teks. Pengembang web, desainer, serta penyusun konten digital perlu memahami pentingnya elemen ini agar mampu menyajikan informasi dengan cara yang lebih baik dan efektif bagi audiens yang lebih luas.

Artikel ini akan dibaca oleh: Dea Septiana, Delima Trisna Pramudiptha Poeger, Della Octaria Hadi, Dentha Albany, dan Destri Sinta Bela.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Orphans Style HTML DOM dan Fungsinya"

  1. AnonimRabu, 20 Juli 2022 pukul 08.32.00 WIB

    Jenis browser populer apa saja yang dapat digunakan untuk mengaktifkan properti Orphans Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 20 Juli 2022 pukul 08.32.00 WIB

      Berikut ini merupakan beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Orphans Style DOM pada HTML:
      1. Google Chrome 25+
      2. Internet Explorer 8+
      3. Opera 9.2+

      Hapus
  2. AnonimRabu, 10 Agustus 2022 pukul 18.42.00 WIB

    Apa yang dimaksud dengan properti Orphans Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 10 Agustus 2022 pukul 18.42.00 WIB

      Properti oprhans CSS merupakan properti yang digunakan untuk menetapkan jumlah minimum baris dalam container blok yang harus ditampilkan pada bagian bawah halaman, bagian region, dan bagian kolom.

      Hapus
    2. AnonimRabu, 10 Agustus 2022 pukul 18.43.00 WIB

      Properti oprhans CSS merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai jumlah baris minimum untuk elemen yang harus terlihat pada bagian bawah halaman atau untuk pencetakan dan pratinjau cetak.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -