Eh... pakne, sudah cukup lama juga yo, kita ndak pernah lagi ngobrol ngalor-ngidul mengenai HTML dan XHTL di sini. Aku koq rasanya kangen juga, dan kepingin sekali ngelanjutin lagi cerita berseri kita mengenai HTML dan XHTML. Pakne masih berminat untuk belajar web design kan?

Iyo, yo nduk, sudah lama sekali kita tidak nongol di blog ini. Sepertinya sang dalang si pemilik blog ini, sedang asyik dan sibuk dengan mainan barunya. Hingga kita jadi sedikit terlupakan. Tapi yo ndak opo-opo. Apa boleh buat nduk. Memang sudah nasib kita sebagai wayang, kalo waktunya tampil yo tampil, waktunya masuk kotak yo masuk kotak. Btw, koe mau cerito opo tadi nduk?

Ini pakne, aku kangen dan kepingin sekali, melanjutkan pembahasan kita mengenai ebook yang tempo hari kita bicarakan. Dan kali ini aku kepingin bercerita tentang cara-cara menformat Text dan Lists di halaman HTML. Dari beberapa artikel sebelumnya, pakne kan sudah tahu, kalo dokumen HTML itu bisa berisi berbagai macam komponen. Diantaranya text, gambar, file-file multimedia (suara, video), script, dan laen-laen.

Nah, sebelum kita mulai bisa dan terbiasa menambahkan berbagai komponen yang kelihatannya cukup rumit itu, bukankah akan lebih baik, jika kita lebih dulu terbiasa untuk mengatur komponen yang paling sering digunakan, yaitu text. Mengatur komponen text disini misalnya, bagaimana cara membuat paragraph, heading, dan lists. Gimana menurut pakne?

Woooo... buagus itu nduk. Text itukan adalah komponen yang paling umum dan paling sering digunakan pada dokumen HTML. Menurut pakne, kemampuan mengatur text ini adalah kemampuan dasar yang harus dimiliki oleh seseorang yang ingin terbiasa membuat dokumen HTML. Jika kemampuan dasar ini sudah dikuasai, maka untuk meningkatkannya, pakne rasa akan jadi lebih mudah. Hayooo koe mulai saja!

Baeklah pakne, didalam dokumen HTML itu, ada beberapa pemformatan text yang umum dan sering digunakan. Yaitu:

• Paragraphs
• Headings
• Block quotes
• Lists
• Tables
• Forms

Sekarang kita akan coba membahasnya satu persatu, sudah siap pakne?

Cara Membuat Paragraph

Untuk membuat suatu paragraph didalam dokumen HTML, pakne membutuhkan sebuah pair tag atau tag ganda. Kalo pakne lupa mengenai pair tag ini, coba pakne lihat pada artikel yang membahas mengenai komponen-komponen HTML dan XHTML.

Pair tag atau tag ganda ini berfungsi sebagai penanda awal dan akhir dari suatu paragraph. Dan tag yang digunakan adalah <p> dan ditutup dengan tag <p> Untuk jelasnya, pakne bisa lihat pada contoh dibawah ini:

<p>Ini adalah contoh untuk membuat paragraph di dokumen HTML</p>

Nah pakne, dari contoh diatas kita bisa melihat dengan jelas cara pemakaian tag ini. Pada saat kita ingin membuat suatu paragraph, maka kita musti memberitahu browser bahwa kita akan membuat sebuah paragraph. Carane? Yaitu dengan membuat tag pembuka <p>.

Nah, setelah kita menempatkan tag pembuka ini. Tulis dah, apa yang pakne mau tulis. Dan setelah pakne merasa bahwa paragraph itu sudah cukup panjang, maka pakne bisa menutupnya dengan menggunakan tag ini </p>.

Waiyoooo... ternyata membuat paragraph itu mudah yo nduk. Ndak rumit, ndak susah, ndak repot. Kita cuma perlu menambahkan tag diawal dan diakhir paragraph. Wah, pakne baru tahu sekarang. Tapi kenapa ya, ndak semua orang mau menggunakannnya?

Maksud pakne?

Anu nduk, pakne tuh suka heran. Kenapa ya, koq pakne sering melihat sebuah halaman HTML yang sepertinya ogah pake paragraph. Dari judul sampe akhir, semuanya digabung dalam satu paragraph yang puaaa..njang buanget. Pakne sampe pusing membacane. Sebab kaga ade celah-celahnye. Eh.. koq pakne jadi ikut-ikutan pake bahase betawi ye.

Nah, itu dia gunanya kita mengetahui cara memformat paragraph ini pakne. Pakne kan tau sendiri. Membaca di layar komputer dan di internet itu, beda dengan saat kita membaca buku, atau koran. Saat membaca di layar komputer, mata kita itu umumnya mudah merasa lelah dan silau. Nah, kalo tulisannya terlalu rapat, atau paragraphnya terlalu panjang, mata kita pasti akan cepat lelah.

Iyo yo nduk, pakne juga baru menyadari itu sekarang. Yo wes, sejak saat ini, pakne akan inget-inget kata-kata koe tadi. Kembali ke paragraph tadi nduk, saat pakne coba menampilkan contoh yang koe buat tadi, paragraph yang terbentuk adalah paragraph yang mempunyai perataan sebelah kiri. Nah, pakne penasaran, bagaimana kalo pakne kepingin membuatnya rata kanan?

Ooohh itu soal gampang pakne. Secara default, browser akan menampilkan paragraph dengan perataan sebelah kiri. Tapi Kalo pakne kepingin paragraph yang dibuat itu menjadi rata kanan, pakne tinggal kasih tahu saja si browser tadi untuk membuat paragraph tersebut menjadi rata kanan.

Carane nduk?

Pakne tinggal menambahkan attribut untuk paragraph tersebut. Pakne tinggal mengubah tag tadi menjadi:

• Rata kanan <p align="rigth">
• Rata tengah <p align="center">
• Rata kanan kiri <p align="left">

Cara Membuat Heading

Nah pakne, kalo tadi untuk memformat paragraph, sekarang kita akan membahas cara memformat heading. Pakne sudah tau apa yang dimaksud dengan heading itu bukan?

Yo tau toh nduk. Gini-gini, pakne juga sering makan heading. Heading nanas, heading susu, dan beberapa macam heading lainnya. Enak lho nduk. Bune mu dulu sering membuatnya.

Waduh, mulai ngaco nih pakne. Kalo itu bukan heading pakne. Itu puding namanya. Heading itu pakne, bisa kita samakan dengan bab atau sub bab. Pakne kan sering baca buku. Nah, di buku itu kan biasanya sering dibag-bagi per-bab.

Dari bab itu kemudian dibagi-bagi lagi menjadi sub-bab. Tujuannya tentu saja agar pembaca bisa mengetahui dengan cepat, apa kira-kira topik yang ingin disampaikan oleh si penulis. Selain itu, heading juga dibuat untuk memudahkan bagi si penulis itu sendiri, pakne.

Oooo... jadi itu toh yang dimaksud dengan heading tadi nduk. Jadi, heading itu bisa diartiken seperti bab dan sub bab. Yang tujuannya untuk memudahkan bagi kedua belah pihak. Memudahkan bagaimana maksudnya nduk? Tolong koe jelasken lebih rinci!

Bagi penulis, dengan membuat heading, dia bisa jadi lebih fokus pada topik atau sub topik yang ingin disampaikannya. Sedangkan untuk pembaca, heading-heading itu memudahkan pembaca untuk melakukan scanning secara cepat saat dia ingin mengetahui apakah topik yang diinginkannya, berada pada di halaman web tersebut.

Untuk memformat heading ini, caranya sangat gampang. Pakne tinggal menggunakan pair tag, seperti saat pakne ingin memformat paragraph tadi. Cuman bedanya, tag yang digunakan adalah <hn> dan ditutup dengan </hn> Huruf "n" itu, nantinya pakne ganti dengan angka yang menunjukkan level dari heading tersebut.

Level nduk? Iyo pakne. Level atau tingkatan ini, adalah untuk menunjukkan pada tingkat mana heading tersebut. Dalam HTML, kita bisa menggunakan heading dari level 1 sampai 6. Dan level 1 adalah level tertinggi atau terbesar. Untuk lebih jelasnya, pakne bisa menuliskan kode seperti ini, dan tampilkan di browser untuk mengetahi efeknya.

• <h1>Ini contoh heading 1</h1>
• <h2>Ini contoh heading 2</h2>
• <h3>Ini contoh heading 3</h3>
• <h4>Ini contoh heading 4</h4>
• <h5>Ini contoh heading 5</h5>
• <h6>Ini contoh heading 6</h6>

Nah, itu tadi cara-cara untuk memformat paragraph dan heading yang diajarkan pada ebook web design ini. Berarti, untuk saat ini, ceritanya kita cukupkan sampe disini dulu yo pakne. Besok-besok kita sambung lagi ceritanya mengenai ebook belajar web design ini.