CSS display property

Dari nilai-nilai yang digunakan pada css display property, mungkin yang sedikit agak membingungkan adalah membedakan antara nilai "inline" dan "inline-block", terlebih ketika nilai "properti display" ini diterapkan dalam elemen berbeda. Melalui "tutorial dasar css" atau "tutorial basic css" dalam "Belajar Kode CSS & Design Blog" ini diharapkan bisa sedikit membantu untuk lebih memahami "display property" dan penggunaannya sehingga pemanfaatan kode sekaligus penataan desain blog dan posting dapat lebih optimal. Demo online yang digunakan (di halaman terbawah) diharapkan juga mampu menciptakan pemahaman yang lebih baik dan lebih cepat dengan mencoba melakukan berberapa test kode css dan html, termasuk didalamnya tentang css display property yang lain seperti misalnya "display:table", "display:table-row", "display:none", "display:run-in" atau "display:block".

Tag HTML h1 s/d h6 - html h1 to h6 tags

Tag h1 s/d h6 adalah elemen yang berfungsi untuk membuat "judul" diberbagai bagian blog dan lebih dikenal sebagai "heading". Elemen h1 s/d h6 ditetapkan dalam 6 tingkatan "heading" dengan ukuran font berbeda. Tag h1 merupakan elemen dengan font berukuran terbesar, kemudian diikuti tag h2 hingga h6. Dalam desain web, tag h1 lebih banyak digunakan sebagai pembentuk "blog title" atau untuk membuat "nama blog". Tag ini selanjutnya dipadukan dengan tag "a" hingga membentuk sebuah "link".
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.

CSS position Property

Pengaturan posisi elemen html dapat dilakukan dengan menggunakan margin dan property left, top, right & bottom. Tutorial css tentang position property akan sangat membantu dalam memahami pengaturan posisi elemen html. Mempelajari pengaturan posisi elemen sekaligus juga akan membuat kita belajar css lebih detail tentang left, top, right dan bottom property serta hubungannya dengan position property.

CSS position Property

HTML <p> tag

HTML "p" tag ditandai dengan tag pembuka <p> dan tag penutup </p>, dimana tag "p" mendefinisikan sebuah fungsi paragraf dan tag ini secara khusus diperuntukkan sebagai "box bagi teks". Karena memang mendefinisikan sebuah paragraf, secara otomatis semua browser akan membuat perpindahan ruang (menciptakan margin dengan tag "p" dan tag lain berikutnya) sehingga pada halaman akan terlihat sebagai perpindahan alinea baru. Sekalipun tag "p" sudah mempunyai karakter yang bersifat khusus seperti di atas, namun jika dikehendaki dapat dilakukan perubahan melalui kode css. Kondidi seperti ini sebenarnya tidak hanya berlaku bagi tag "p" akan tetapi juga berlaku bagi semua tag yang lain seperti halnya tag "DIV".

Attribute Name dan id sebagai Link

Hyperlink (Link) tak hanya dapat menghubungkan sebuah dokumen html di halaman web/blog dengan dokumen html yang lain pada halaman berbeda (baik di blog/web yang sama atau berbeda), namun bisa juga digunakan untuk menghubungkan antar dokumen dalam satu halaman yang sama. Menggunakan link untuk tujuan seperti ini dapat dimanfaatkan untuk berpindah dari satu bagian ke bagian yang lain (misalnya perpindahan antar paragraf, top - bagian teratas halaman, atau ke bottom - bagian terbawah halaman).

Attribute Name

HTML DIV tag - Kode HTML tag DIV

Tag DIV adalah salah satu tag dalam kode html yang paling banyak digunakan. Tag DIV merupakan sebuah "wadah" bagi semua dokumen (teks, image dll) dan di dalam tag DIV biasanya berisi sekaligus beberapa elemen html/tag html. Dalam desain web/blog, tag DIV bahkan menjadi wadah (memuat) keseluruhan halaman-halaman blog yang didalamya juga berisikan tag div dan beberapa tag yang lain. Sekalipun tag DIV secara khusus mempunyai karakter/sifat bawaan seperti "display:block", namun sifat-sifat ini dapat dirubah menggunakan kode css.
Dalam penggunaanya, beberapa attribute atau properti css harus ditambahkan agar tag DIV mampu berfungsi sesuai dengan apa yng diharapkan. Dalam bentuk yang paling sederhana anda dapat membuat boks/kotak dengan memanfaatkan tag DIV.

Menggabungkan/Combining Image & Text Links

Menggunakan image link dan text link secara bersamaan memang jarang digunakan karena sebenarnya sebuah link bisa dibuat dalam bentuk image link atau text link, namun demikian mungkin saja pada kasus tertentu image link dan text link dirasakan perlu digunakan seara bersamaan dengan tujuan tertentu. Menggabungkan keduanya perlu menambahkan tag lain selain tag "a" agar image dan text links ditampilkan dengan cukup menarik. Anda bisa memanfaatkan tag "p", tag "div", tag "h1 s/d h6", tag "span" atau tag yang lain.

Kode dasar gabungan text link & image link

<a href="URL" title="Link title here!">
<img src="image.jpg" width="xx" height="xx" style="xx" />
Text Link here
</a>

Image Link - An image as a link

Membuat image sebagai link memang bisa dilakukan secara langsung menggunakan xHTML, namun demikian akan lebih praktis dan memudahkan blogger apabila "image link" tertentu dibuat dengan menggunakan bantuan kode css sehingga kode html yang digunakan menjadi lebih sederhana. Hal-hal seperti inilah yang membuat "arti pentingnya belajar css" untuk mendukung aktifitas ngeblog/blogging/posting.

Kode dasar membuat image sebagai link

<a href="URL" title="Link title here!"><img src="image.jpg" alt="text here" width="xx" height="xx" /></a>

Text Link - Using a text as a link

Belajar kode css memang tak ada habisnya, apalagi kini css sudah semakin jauh berkembang hingga css3 yang mampu membuat banyak fungsi baru yang jauh lebih menakjubkan karena mampu menggantikan beberapa peran javascript. Kemajuan baru kode css yang terus dipacu tak lepas dari upaya membuat kode css sebagai basis utama pengembangan desain blog/web. Perkembangan yang terakhir dari css3, bahkan sudah sampai pada titik dimana berbagai efek animasi dan 3 dimensi dalam berbagai rupa dapat diciptakan hingga blog/web semakin terlihat atraktif. Browser-browser besar juga saling berlomba untuk sesegera mungkin dapat mendukung penuh perkembangan yang terjadi pada kode css3. Sekalipun detik ini css3 begitu terasa dominan perannya, namun karena setiap perkembangan yang terjadi pada kode css adalah saling melengkapi, maka mempelajari css2 dan css tetap menjadi dasar untuk memahami dan membangun desain web/blog. Salah satu yang perlu kita ketahui adalah cara membuat text link (membuat teks sebagai link).

HTML Links

HTML links dikenal juga sebagai html "a" tags (tag "a") karena untuk membangun tag yang berfungsi sebagai hyperlink (link) digunakan tag "a". HTML links berfungsi untuk menghubungkan sebuah dokumen ke dokumen yang lain, dimana dokumen yang lain (baru) dapat berupa dokumen yang berada di dalam web/blog atau berada diluar blog (di blog/web lain). Dokumen baru dapat berupa teks, image, sekelompok teks atau image atau bisa juga gabungan teks, image dan unsur lainnya.

Bentuk link dalam kode html