Sebenarnya saya sendiri masih belum mantap dengan judul artikel ini. Apa maksudnya? Apakah yang dibahas bukan sesuai judul? Tidak. Bukan begitu. Judul ini adalah judul asli.
Keraguan saya muncul karena artikel yang juga membahas masalah serupa memiliki judul lain seperti "membuat kotak dengan garis putus-putus", "membuat kotak yang berisi teks", dan masih banyak judul lainnya. Maka dari itu, saya khawatir pembaca tidak dapat menemukan artikel ini karena sedikit perubahan judul yang berbeda.
Saat mencoba ketik di pencarian dengan kata-kata "membuat kotak dan garis" maka yang muncul justru dengan versi atau cara CSS bukan HTML. Jadi dengan dibuatnya artikel ini, semoga bisa menjawab kesulitan saya dan Anda sekalian.
[Baca juga : Pemula Belajar HTML]
Kode Kotak Otomatis Garis Lurus
Dalam kode yang saya bagikan berikut ini, bersifat otomatis. Jadi Anda tinggal menyalin kode di bawah ini lalu tulis teks di tempatnya maka otomatis teks tersebut masuk dalam kotak. Berikut contohnya
Tulis teks di sini
Otomatis di sini maksudnya adalah kotak tersebut tidak berwarna, garis lurus dengan warna hitam, teks dimulai dari sisi kiri, dan panjang lebar kotak scara otomatis menyesuaikan dengan teks yang Anda tulis.
Jadi kalau misalnya Anda tulis kata-kata yang panjang, maka hasilnya seperti di bawah ini
Tulis teks di sini. Ini adalah contoh teks yang panjang. panjangnya tidak terbatas. sepanjang anda kuat menulis banyak ya kotaknya tetap muat untuk diisi tulisan yang banyak itu. Ini adalah contohnya. tes. tes. tes. sudah ya
Adapun kode HTML nya seperti di bawah ini :Ingat, ganti kata-kata "tulis teks di sini" dengan teks yang ingin Anda masukkan. Selanjutnya jika Anda ingin teks tersebut berada di tengah-tengah kotak seperti contoh di bawah ini
Tulis teks di sini
maka kode HTML nya adalah sebagai berikutKode Kotak Otomatis Garis Putus-putus
Selanjutnya adalah kode yang hampir mirip namun perbedaannya adalah garis nya memiliki motif putus-putus. Garis putus-putus dibagi menjadi 2 yaitu garis berupa titik-titik (dotted) dan garis lurus yang terputus (dashed)
Contoh garis putus-putus dotted
Tulis teks di sini
Contoh garis putus-putus dashed
Tulis teks di sini
Adapun kodenya sama dengan kode kotak otomatis garis lurus, hanya tinggal diubah kata solid (yang berwarna di bawah ini) menjadi dotted atau dashed di bawah ini.<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: center; width: auto;">
Tulis teks di sini</div>
Kode Kotak Tidak Otomatis
Kebalikannya, dalam kode berikut ini, Anda dapat mengatur ukuran panjang dan lebar kotak sesuai dengan selera Anda. Sebenarnya lebih enak dengan kotak otomatis. Mengapa? Karena seringkali kita tidak memastikan berapa banyak teks yang ditulis. Semakin banyak jumlah teks maka kita juga harus terus merubah ukuran agar sesuai
Namun, kotak tidak otomatis ini juga memiliki kegunaan lain misalnya ingin menyamakan beberapa kotak agar tampilan terlihat rapi. Atau membutuhkan kotak dengan ukuran tertentu. Baiklah, adapun kode HTML nya adalah sebagai berikut
Silahkan diubah angka yang terdapat setelah height (untuk panjang kotak) dan width (untuk lebar kotak). Ingat, yang diubah angka 99! Ubah ke angka yang sesuai selera Anda.
Contoh kotak dengan height 50 dan width 200
Tulis teks di sini
Contoh kotak dengan height 200 dan width 50
Tulis teks di sini
Contoh kotak dengan height 150 dan width 150
Tulis teks di sini
Demikian cara membuat kotak dan garis dengan HTML secara lengkap. Saya menyadari bahwa ini belum lah lengkap. Untuk informasi selanjutnya akan diposting bagian kedua. Terima kasih atas kunjungannya
Tidak ada komentar:
Posting Komentar