Paragraf Default
<p>Ini adalah contoh paragraf standar Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel dui nec purus tincidunt elementum. Integer feugiat efficitur urna, nec consequat purus tincidunt id. Duis eu fringilla elit. Vivamus eget ligula vitae sapien rhoncus sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed imperdiet mi at est facilisis, eget scelerisque ex posuere.<p/>
Paragraf Indent
<p class="pIndent"> Ini adalah paragraf dengan indentasi. Paragraf indentasi yaitu paragraf yang memiliki jarak yang berbeda antara baris pertama dan baris-baris berikutnya yang dapat digunakan untuk berbagai keperluan. Biar tambah mengerti, saya tambahkan quotes sebagai contoh paragraf indent:
Daya kunci untuk membuka pintu kehidupan yang tak terbatas hanyalah terus memulai lagi dan lagi dengan lebih bijaksana disetiap momentnya.
Paragraf Drop Cap
A<span class="dropCap">A</span> ini adalah paragraf drop cap yaitu paragraf yang dimulai dengan huruf kapital yang berukuran lebih besar dari huruf-huruf lainnya. Huruf kapital ini biasanya berukuran dua atau tiga kali lipat ukuran huruf-huruf lainnya. agar lebih mudah dimengerti saya tambahkan quotes:Pendidikan adalah kunci untuk membuka pintu kehidupan yang tak terbatas. Jangan takut mencoba hal baru, karena itulah cara kita tumbuh.
Paragraf Reference
Paragraf reference adalah paragraf yang berisi informasi tentang sumber-sumber yang digunakan dalam penulisan suatu karya ilmiah. Informasi ini biasanya mencakup judul karya, penulis, tahun terbit, dan penerbit. Paragraf reference biasanya ditempatkan di akhir karya ilmiah, setelah daftar pustaka. Quotes: "Kreativitas adalah kekuatan untuk merubah mimpi menjadi kenyataan."
<p class="pRef">Asnasa, phD., & Smith, A. (2020). Masih Ada Harapan. Penerbit.Minhaj Publishing
Gaya Huruf dan Blok Marker
Di tengah hiruk pikuk <em>kota metropolitan, terkadang kita semua membutuhkan <strong>jeda waktu untuk <u>menenangkan pikiran. Berjalan-jalan di <code>taman kota yang asri, menghirup udara yang sejatinya <s>tidak segar lagi, dan mendengarkan <i>gemericik air mancur dapat menjadi cara yang ampuh untuk <b>mengurangi stres dan <u>menyegarkan kembali jiwa yang bersedih, agar dapat <mark> menemukan makna hidup yang lebih tenang.
Superscript <sup> dan Subscript <sub>
Subscript, mendefinisikan sebuah teks dengan tag <sub> agar teks ditampilkan lebih kecil dan sedikit lebih rendah dari teks sekitarnya sebagaimana banyak digunakan dalam penulisan teks formula senyawa kimia
contoh:Senyawa Air H2O
Superscript, mendefinisikan sebuah teks dengan tag <sup> agar sebuah teks yang ditampilkan lebih kecil dan sedikit lebih tinggi dari teks sekitarnya, sebagaimana banyak digunakan dalam operasi bilangan matematika dan persamaan fisika
contoh:Rumus energi dan massa E=mc2
Tabs
Tabs pada HTML adalah elemen antarmuka pengguna yang memungkinkan Anda menampilkan beberapa bagian konten dalam ruang terbatas, dimana hanya satu bagian konten yang dapat dilihat pada satu waktu. Pengguna dapat beralih di antara bagian-bagian konten dengan mengklik tab yang berbeda.
Prosesor adalah otak dari komputer. Prosesor yang lebih cepat akan memberikan performa yang lebih baik untuk berbagai tugas, termasuk menjalankan aplikasi, bermain game, dan mengedit video Prosesor dengan kecepatan 3,5 GHz dan 8 core akan memberikan performa yang lebih baik untuk bermain game
Display dengan resolusi 4K dan refresh rate 120 Hz akan memberikan pengalaman visual yang lebih imersif dengan pilihan display yang beragam.
- Liquid Crystal Display (LCD)
- Light-Emitting Diode (LED)
- Organic Light-Emitting Diode (OLED)
- Curved Displays
- Touchscreen Displays
- Ultrawide Displays
Audio adalah sistem yang menghasilkan suara, audio yang lebih baik akan memberikan pengalaman mendengarkan musik dan menonton film yang lebih memuaskan Audio dengan kualitas yang baik akan memberikan pengalaman mendengarkan musik yang lebih memuaskan.
Baterai dengan kapasitas 5.000 mAh akan memberikan daya tahan yang lebih lama
Komputer untuk penggunaan sehari-hari biasanya digunakan untuk tugas-tugas dasar seperti browsing internet, mengetik dokumen, dan menonton video. Komputer ini biasanya memiliki prosesor dual-core, RAM 4 GB, storage 1 TB, dan kartu grafis integrated
Cara Penggunaan
kamu dapat menggunakan kode ini untuk menerapkan perubahan tabs sebagaimana demo di atas
<!--[ Active function ]--> <input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked> <input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-5' type='radio' name='postTabs'> <!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]--> <div class='tbHd scrlH'> <!--[ Change atribute data-text='...' to replace tabs title ]--> <label for='fTabs-1' data-text='Processor'></label> <label for='fTabs-2' data-text='Display'></label> <label for='fTabs-3' data-text='Audio'></label> <label for='fTabs-4' data-text='Battery'></label> <label for='fTabs-5' data-text='Storage'></label> </div> <div class='tbCn'> <!--[ Tabs content ]--> <div class='tbText-1'> <p>Prosesor adalah otak dari komputer...</p> </div> <!--[ Tabs content ]--> <div class='tbText-2'> <p>Display dengan resolusi 4K dan refresh rate 120 Hz...</p> </div> <!--[ Tabs content ]--> <div class='tbText-3'> <p>Audio adalah sistem yang menghasilkan suara..</p> </div> <!--[ Tabs content ]--> <div class='tbText-4'> <p>Baterai dengan kapasitas 5.000 mAh...</p> </div> <!--[ Tabs content ]--> <div class='tbText-5'> <p>Komputer untuk penggunaan sehari-hari...</p> </div> </div>
Tabs New Css
Berikut ini adalah beberapa bagian penting yang perlu diperhatikan saat ingin kuliah di luar negeri:
- Why do you want to study abroad?
- Choosing the right university abroad takes careful consideration
- Meeting the university's academic requirements is crucial
- Studying abroad can be expensive. Plan your finances early!
Cara Penggunaan
Styling tabs yang lebih dinamis dan penuh warna dapat meningkatkan pengalaman pengguna pada blog kamu. Dengan menggunakan kode HTML di bawah ini, kamu akan dapat dengan mudah mengubah tampilan tabs di blogmu agar sesuai dengan tema atau kebutuhanmu.
<!--[ Active function ]-->
<div class="wrapper">
<div class="tabs">
<!--[ Tab Title ]-->
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Alasan</label>
<!-- [ Tab Content ]-->
<div class="tab-content">Write Your Content Here!</div>
</div>
<!--[ Tab Title ]-->
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Universitas</label>
<!--[ Tab Content ]-->
<div class="tab-content">Write Your Content Here!</div>
</div>
<!--[ Tab Title ]-->
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Akademik</label>
<!--[ Tab Content ]-->
<div class="tab-content">Write Your Content Here!</div>
</div>
<!--[ Tab Title ]-->
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Finansial</label>
<!--[ Tab Content ]-->
<div class="tab-content">Write Your Content Here!</div>
</div>
</div>
<!--[ Outside of the tab box ]-->
<p>For example line paragraph outside of the tab box</p>
</div>