Saturday, February 4, 2012

Bedah | Skrip: Tag Dan Atribut Kode HTML Border

Assalamu 'alaikum, s0b! Banyak dari elo yang bikin dokumentasi tentang sesuatu. Bisa dalam bentuk catetan, diary maupun blog. Fungsi dokumentasi bagi gue adalah biar gue bisa baca-baca kapan aja gue mau. Kayak gue pernah nyatet tentang Cara Bikin Alinea & Frame Di Postingan, nah kali ini gue mau nyatet tentang atribut dan tag yang ada di skrip frame yang bisa di pakè di tulisan atau di gambar. Suatu saat elo nyasar ke sini, semoga catetan ini manfaat buat elo juga.



Frame atau bingkai disini gue rename jadi Border. Liat susunan skrip border di bawah ini:

<div style="border: 2px #000000 solid; padding: 10px; background-color: #CEF6CE; overflow: auto; height: 100px;
width: 300px; text-align:
left;"> isi tulisan elo disini, s0b...! </div>

Perhatiin tag yang gue underlined di atas! Dan gue bakal mbedah tag-tag tsb satu-satu:


1. Border
Disitu tertulis 2px #000000. 2px buat ngatur tebel garis, bisa elo ganti dari angka 1 dst. Trus #000000 buat ngatur warna garis, bisa elo ganti dengan warna kesukaan elo. Kode warnanya silahkan gugling aja! :p


2. Solid
Adalah jenis garis yang padet, gak putus-putus apalagi patah-patah. Kata-kat 'solid' bisa elo ganti ama:

  • dotted, garis titik-titik.

  • dashed, garis strip-strip.

  • ridge, yang permukaannya kayak bingkai. Biar keliatan efeknya, harap tebel bordernya lebih dari 2px.

  • double, bikin garis jadi dobel atau rangkap.

  • groove, bikin gradiasi warna tua dan muda pada warna garis.

  • outset, kalo bola nyampe di daerah lawan tapi gak ada temennya, eh.... Kebalikan dari groove buat letak warna tua dan mudanya.


Soir, gak ada sampel s0b! Bisa elo pasang-pasang sendiri, biar tau perbedaan sensasinya. :r


3. Padding
Adalah jarak antara garis dan tulisan. Atur aja nilai px-nya!


4. Background-color
Warna latar belakang tulisan kesukaan elo. Pink-nya mbak Nurmayanti, kuning bunga matahari-nya mbak Hima-rain, merah elmo-nya Uswah, hitam bg header-nya kang ilham, hijau autowindow-nya kang Bagas atau warna airnya Kaito. Emang ada? Cari sendiri! :D


5. Overflow
Adalah pembates elemen kalo-kalo isi tulisan nglebihin border. Disini gue pake 'auto' yang otomatis nyesuaiin antara garis dan tulisan. Bisa elo ganti ama jenis overflow yang laen. Kayak hidden, visible, scroll, dll. Penjelasan tentang overflow bakal gue bahas laen kali. :)


5. Height & Width
Adalah atribut buat nentuin tinggi dan lebar border dengan satuan px. Atur-atur aja!


7. Text-align
Adalah pengatur perataan tulisan di dalam box. Elo bisa pake left; buat rata kiri, right; buat rata kanan, center; buat rata tengah atau justify; buat rata kanan kiri.


Mungkin itu dulu sob, yang bisa gue catet. Sukur-sukur bisa manfaat buat elo juga. Kalo ada kode yang gak pas, sok mangga dikoreksian di komen nu handap ieu. Wassalam...



30 comments:

  1. pertamax :D , ternyata kang eksak jago html jg to mantep kang lanjutkan....

    ReplyDelete
  2. eh kang kok emot/smiley di komen blog ane g mau nampak ya? Knp ya kang

    ReplyDelete
  3. wahh :) masyaAllah tutornya
    patut dicoba

    ReplyDelete
  4. ini yang kapan hari eksak kritik peletakan puisi aku yang pake gambar itu ya? heheee.. tengkyu ^^

    ReplyDelete
  5. sekit bingun nih sob.. terkadang sy menemukan margin dan padding.. perbedaannya apa ya sob.. hehe maklum HTMLq 0,08%

    ReplyDelete
  6. mantap jasa kang :-D..anemah nyimak aja dulu kang pelan2 maklum masih gaptek soal html

    ReplyDelete
  7. eksaaak... postingan yang ada khuldi2nya td ko ga bisa dibuka? payyah nih mah.. dihapus ya?

    ReplyDelete
  8. Wuihhhh,, super lengkap kang.., kalo ilham taunya ubh warna doang..wakakakak

    ReplyDelete
  9. @kang SeMut coba cek css komennya, kang! kalo ada yg prlu diubah, comment-body diubah jd commenttext dan owner-body diubah jadi commenttext-admin!

    masalahnya punya ane kadang nampak, kadang enggak juga... :p

    ReplyDelete
  10. @Nurmayanti Zain alhamdulillah, mbak! silahkan dicoba... ^_^

    ReplyDelete
  11. @Uswah ya gitu deh, jeng! o ya, postingan terbaru lagi direpisi. tungguin aja ya... ;)

    ReplyDelete
  12. @kang Agusductank gambarannya gini kang! margin, border, padding, text! bisa disimpulin: margin adalah ruang diluar border antara border dan garis tepi body post, sedang padding adalah ruang didalam border antara border dan konten!

    mungkin itu aja yg ane ngerti! maap... :)

    ReplyDelete
  13. @Kang Cuys eleh...eleh... kang cuys handap asor ieu mah! merendah...

    ReplyDelete
  14. @kang Ilham Agung sama, kang! ane juga gitu! hahaha... :r

    ReplyDelete
  15. @kang Agusductank ya, kang! ada apa? pesan rahasia, ya? :)

    ReplyDelete
  16. tipsnya mantab kang, pasti bermanfaat :)

    ReplyDelete
  17. @kang Stupid monkey aamiin...
    insya Allah, kang!

    ReplyDelete
  18. gk nyangka trnyata lo jago bhs html.., klo sy gk ngerti sama sekali alias blank.. yg sy tau hny Copas,, hehee.., thx dah disharex ilmux... :D

    ReplyDelete
  19. @Lentera Langit gk lah sob! ane cuma ngerti bahasa manusia aja, kok! lainnya? blankk! hehehe

    ane cuma org blajar, sob!

    ReplyDelete
  20. Mantab gan... :)
    Udah belajar CSS3 ya nih? :)

    ReplyDelete
  21. @eksak maap trjadi kesalahan.. td mau bilang kalo skrg sdh g bingung lg skalian mau minta img read-nya

    ReplyDelete
  22. @I2-Harmony css3? gak tau tuh gan! ane kan nyubi- ;)

    ReplyDelete
  23. @kang Agusductank img read? apaan tuh kang?

    ReplyDelete
  24. afwan izin copas yaa.., aq jug jago tp jagox Copas.., hhhe., syukran ya.. *smile

    ReplyDelete
  25. @Rohis Facebook tafadhol! silahkan dikopas, kang! ane ridho... hahaha

    ReplyDelete
  26. Mantaaaaaaaaaaap ini mas bro. . .
    otak atik html memang paling seru *walaupun ana ga bisa hihihihi

    syukron. . .

    ReplyDelete
  27. @Kaito Kidd mantep pie to? yo sama aja, ane jg gk tau... hahahaha
    makasih dah mampir, dab!

    ReplyDelete
  28. bang warnain hurup di bordernya kumaha dah ??

    ReplyDelete
    Replies
    1. Hurup di border mana, teh?

      Delete