Home > Panduan > <p>, <span> dan <div>

<p>, <span> dan <div>

February 4th, 2012 Leave a comment Go to comments

Semoga judulnya tidak menakutkan, tapi malah menimbulkan rasa ingin tau. Dan untuk yang sudah tau, semoga mau berbagi ilmu dengan membetulkan maupun menambah manakalah apa yang saya tulis dirasa ada yang salah atau kurang.

Jika sebelumnya kode html saya berikan instan dan tinggal copy paste lalu edit sedikit, maka kali ini saya coba mulai dari yang paling dasar dengan harapan tak sekedar kode tanpa makna tapi benar2 paham strukturnya secara komprehensip.

Buku tentang html banyak dijual, tapi saya yakin belajar dari buku tak akan efektif karena bahasa buku kadang susah dipahami. Saya pernah membeli buku Photoshop & Excel, tapi 90% isinya susah saya pahami, karena bahasa buku pastilah beda dengan bahasa obrolan.

Saya belajar html juga otodidak, terjadi karena ketidakpuasan saat mengetik tapi hasilnya tak seperti yang saya harapkan, kemudian saya ubah ke mode html. Pertama kali lihat bingung setengah mati karena tiba2 muncul kode aneh yang tak saya pahami.

Ketika saya mengetik diaolog dalam mode compose atau visual, hasilnya akan seperti ini

Saya : Terlambat lagi terlambat lagi, knapa tiap hari terlambat melulu?
Murid Saya : Maaf Pak, saya harus ngantar kakak ke kampusnya
Saya : Jangan bohong. Kemarin kakak kamu bilang kalau kuliahnya libur sebulan
Murid Saya : Brarti Pak Guru yang boong, lha wong saya nggak punya kakak

Padahal saya maunya yang seperti ini…

Saya : Terlambat lagi terlambat lagi, knapa tiap hari terlambat melulu?
Murid Saya : Maaf Pak, saya harus ngantar kakak ke kampusnya
Saya : Jangan bohong. Kemarin kakak kamu bilang kalau kuliahnya libur sebulan
Murid Saya : Brarti Pak Guru yang boong, lha wong saya nggak punya kakak

Bagi orang lain hal tersebut mungkin tak terlalu dipikir, tapi tidak demikian dengan saya.
Untuk mewujudkan keinginan itu, saya coba pindah ke mode html. Mulai mengganti2 kemudian melihat hasilnya, mengganti2 lagi lalu dilihat lagi. Sedikit demi sedikit akhirnya mulai paham. Saya tidak belajar secara formal, baca teorinya juga jarang.

Intronya terlalu panjang ya?
Sekarang kembali ke topik semula. Knapa harus <p>, <span> dan <div>?
<p>, <span> dan <div> adalah kode html paling dasar yang dalam kondisi tertentu bisa rancu karena fungsinya hampir sama. Dengan penjelasan sederhana semoga kebingungan itu bisa terjawab.

<p>
Kode ini dipakai untuk mendefinisikan paragraf, misalnya mengatur jarak antar baris; ukuran, warna dan jenis font, perataan teks dll. Kode dasarnya adalah

<p>teks</p>

Agar berfungsi, maka kode tersebut harus dilengkapi dengan beberapa kode tambahan, antara lain

  • text-align atau perataan teks. Ada 4 pilihan : center, justify, left & right.
  • font-family atau jenis huruf, misalnya Tahoma, Arial, Georgia dll
  • line-height atau jarak antar baris dengan satuan %
  • font-size atau ukuran huruf dengan satuan %
  • color atau warna huruf. Diisi dengan kode warna
  • padding yang dipakai untuk memberi jarak terhadap batas. Ada 4 yaitu padding-top, left, right dan bottom. Satuannya px

Tambahan tersebut bisa dipakai bersama2 atau sebagian, disesuaikan dengan kebutuhan. Jika akan menulis rata kanan, jenis font Verdana ukuran 150% dari normal dengan warna ungu (#990099) maka kodenya adalah

<p style="text-align:right;color:#990099;font-family: Verdana;line-height:120%;font-size:150%;">tak ada rotan akarpun jadi</p>

Hasilnya akan seperti ini

tak ada rotan akarpun jadi

Paragraf rata kanan, font Verdana ukuran 150% dari normal dan jarak antar baris 120%. Jarak ini akan nampak jika kalimatnya terdiri dari banyak baris.

<span>
Kode ini hampir sama dengan <p> tetapi hanya dipakai untuk mendefinisikan beberapa kata tertentu saja (bukan paragraf). Bisa dipakai bersamaan dengan <p>. Kode dasarnya adalah

<span>teks</span>

Misalnya kata “akar” pada contoh diatas akan diwarna merah (#990099), maka kodenya seperti ini

<p style="text-align:right;color:#990099;font-family: Verdana;line-height:120%;font-size:150%;">tak ada <span style="color: #CC0000;">rotan</span> akarpun jadi</p>

Hasilnya akan seperti ini

tak ada rotan akarpun jadi

<div>
Kode ini dipakai untuk mendefinisikan area, misalnya mengatur lebar, memberi warna background, membuat border atau garis tepi dsb. Bisa juga dipakai untuk menata letak teks dan gambar tapi ada cara lain yang lebih sesuai. Kode dasarnya adalah

<div style="overflow:auto;">teks</div>

Kode tersebut belum memiliki efek. Kita harus menambah beberapa kode lagi misalnya lebar area (width), jarak teks dengan tepi area (padding), ukuran border serta warna border dan background.

Jika dilengkapi akan seperti ini

<div style="overflow:auto;width:400px;padding-top:5px;padding-bottom:5px;padding-left:8px;padding-right:8px;background:#f7efb5;border:1px solid #ff0000">teks</div>

Hasilnya akan seperti ini

teks

Dalam hal ini setingannya hanya fokus pada area. Lebarnya = 400px, jarak atas bawah = 5px dan kiri kanannya 8px. Background warna coklat dan border ukuran 1px warna merah. Font masih standar sesuai setingan theme.

Dalam area tersebut bisa diisi teks yang sudah diformat menggunakan <p> dan <span> sehingga secara lengkap kodenya akan menjadi

<div style="overflow:auto;width:400px;padding-top:5px;padding-bottom:5px;padding-left:8px;padding-right:8px;background:#f7efb5;border:1px solid #ff0000"><p style="text-align:right;color:#990099;font-family: Verdana;line-height:120%;font-size:150%;">tak ada <span style="color: #CC0000;">rotan</span> akarpun jadi</p></div>

Hasilnya akan seperti ini

tak ada rotan akarpun jadi

Belajar apapun akan terasa ringan manakala kita lakukan dengan rasa suka. Tapi kalau sudah diawali dengan ketidaksukaan, mencobanyapun kayaknya tidak.
Selamat mencoba sambil mengembangkan sendiri.

~ Grazie ~
Categories: Panduan
  1. Dewifatma
    February 4th, 2012 at 15:13 | #1

    Mulai keriting otakku, Pak… :P

    Sebentar, tak baca kembali………


    Selamat membaca…

    [Reply]

  2. Dewifatma
    February 4th, 2012 at 15:15 | #2

    Pertamax gratis dihari minggu *jogsang* :D


    Hari Minggu bagi2 Josang

    [Reply]

  3. Dewifatma
    February 4th, 2012 at 15:18 | #3

    Balik lagi, Pak.. Mau meralat; ternyata kata suamiku hari ini di Bintan hari Sabtu bukan Minggu.. :D :D


    Minggunya masih kurang beberapa jam lagi…

    [Reply]

  4. nique
    February 4th, 2012 at 15:53 | #4

    waduh … malam minggu dikasi ginian …. mijet kepala


    Kamu pusing lihat ginian sich kayaknya nggak hanya malam minggu dowang

    [Reply]

    nique Reply:

    hahahaha … nasib orang yang punya orang baik di sekelilingnya emang begini pak
    dikit2 langsung mijet kepala
    buat cari perhatian hahaha jadi kan ga tegel nyuruh saya nyelesein yg namanya html an itu hahahaha


    Kan dah ada Aa’ yg bantu edit HTMLnya

    [Reply]

  5. February 4th, 2012 at 17:12 | #5

    makasi sharingnya ya mbahKung.. ini bermanfaat buwat Ngai.


    Bener nich, Ngai mau belajar…
    Kayaknya bohong deh :D

    [Reply]

  6. February 4th, 2012 at 18:17 | #6

    Aku belajar html juga otodidak. Tetapi baca buku juga. Postinganku juga pakai html semua. Soalnya andalanku ngeblog cuman opera-mini kang.
    Jadi kesimpulannya adalah p dan span adalah bagian dari div. Dimana span untuk single dan p untuk paragraf. Kalau aku sering pakai span dan div.


    Sieplah

    [Reply]

    budiastawa Reply:

    Bisa dikatakan berada di dalam . Dan dibungkus oleh . Jadinya kira-kira seperti ini: teks1 teks2

    = paragraf, = divisi (bagian), span apa ya….? = extended, pengolahan lebih lanjut di tengah paragraf.


    Makin melengkapi…

    [Reply]

    budiastawa Reply:

    Pak Dhe, lambang-lambang html di komen saya kok jadi hilang yo? Apa mesti harus ditambahi ya?

    = paragraf. (testing).


    Tak semua kode html bisa dipakai oleh komentator Bli. Kalau nggak dibatasi, kotak komentar akan penuh warna dan penuh sesak

    [Reply]

    budiastawa Reply:

    Walah hilang meneh…. :(

  7. budiastawa
    February 4th, 2012 at 19:11 | #7

    Usul pak Dhe; harusnya contoh tetap memakai pengembangan dari kalimat “tak ada rotan akarpun jadi” itu. Tinggal bungkus pake border, background dan warna-nya. (*ini murid kok maunya nggurui*)


    Usul diterima…

    [Reply]

  8. February 4th, 2012 at 19:33 | #8

    mulai terang dikit (masih dikit banget…), biar nggak salah2 lagi naruh padding…:D


    Syaratnya harus berani nyoba2 Mbak

    [Reply]

  9. TuSuda
    February 4th, 2012 at 19:35 | #9

    Selalu ada ilmu baru tentang HTML, dari inspirasi nya ini..makasi ya pakde…


    Bukan ilmu baru sich Bli…
    Saya hanya mencoba menguraikan dengan “cara saya”
    Salam untuk Bli Tu sekeluarga

    [Reply]

  10. February 4th, 2012 at 20:39 | #10

    trimakasih pak Mars, ikut mencoba belajar, Salam


    Matur Nuwun juga Mbak…

    [Reply]

  11. February 4th, 2012 at 21:13 | #11

    makasih tutorialnya Pak Mars…
    siap belajar..


    Sama2 Mbak

    [Reply]

  12. February 4th, 2012 at 21:26 | #12

    saya sudah mempraktekkan misalnya pada saat mengutip hadits.
    Kodenya darimana ? ya dari panjenengan.
    Di file saya,kode2 dari saya kasih judul ” Kode Mars”
    Adakalanya kode gak jalan, mungkin ketika saya copy paste berubah dengan sendirinya.
    Saya mempunyai buku HTML yang tebal itu tetapi agak malas membacanya, lebih enak langsung copy dari sini.
    Terima kasih mas.

    Salam hangat dari Surabaya


    Kalau disimpan di MS Word, sebaiknya hurufnya pakai courier Dhe, biar jalan.
    Kalau pakai Time New Roman nggak bisa jalan karena tanda petiknya mlungker.
    Kayaknya itu permasalahannya

    [Reply]

  13. February 4th, 2012 at 22:37 | #13

    Ikut mencicipi hidangannya …. dan ternyata enak dan renyah heeee ….
    walaupun ini makanan ringan bagi yang sudah hobi dan disantap terasa enak gurih dan renyah tapi bagi sebagian orang mungkin akan terasa kenyal alot atau bahkan keras terlebih lagi jika sudah diawali dengan ketidaksukaan, nyerah duluan, apatis dll mencobanyapun kayaknya tidak, spt yg Pak Mars bilang di atas.

    Jadi yaaa … mengutip alinea terakhir postingan di atas “belajar apapun akan terasa ringan manakala kita lakukan dengan rasa suka”

    Dan sebagai blogger suka atau tidak suka akan dihadapkan dg yg beginian, jadi yaaa harus belajar mencintai …. awalnya bikin pusing bahkan pakai 7 keliling, lama-lama ee..ee asyik juga ….

    “code is poetry”


    Mari Mas Alwi…
    Sebuah kehormatan dikunjungi ahlinya
    Sambil nunggu GP yg nggak mulai2

    [Reply]

  14. February 5th, 2012 at 02:44 | #14

    Nah, sekarang saya jd ikutan mikir
    padahal biasanya cukup copas saja.. hehehe
    suwun pak Mars, akhirnya jadi sedikit tahu bahasa html.


    Bahasa HTML kayaknya jadi Bahasa wajib yg harus dikuasai Bu…

    [Reply]

  15. February 5th, 2012 at 05:10 | #15

    menyimak pelajaran dari pak guru


    Monggo Mas Narno

    [Reply]

  16. February 5th, 2012 at 06:28 | #16

    absen, pak!

    [Reply]

  17. Imelda
    February 5th, 2012 at 13:22 | #17

    ntar kalo mau bikin variasi, cari info di sini :D


    Nanti akan saya jadikan satu halam Bu, di page…
    Ini masih proses, biar nyarinya gampang

    [Reply]

  18. kade
    February 5th, 2012 at 13:50 | #18

    Mantap tipsnya pakde… :-D


    Semoga bermanfaat Mas

    [Reply]

  19. areximut
    February 6th, 2012 at 02:08 | #19

    akhirnya saya mengerti juga tentang fungsi-fungsi perintah tersebut, hatur nuhun pak :-)


    Sama2 Mas

    [Reply]

  20. February 6th, 2012 at 09:46 | #20

    wah jadi rada mudeng dikit tentang HTML..
    besok mau dicoba-caba. makasih pak mars


    Sama2 Mbak Entik

    [Reply]

  21. Achot Blogs
    February 6th, 2012 at 12:52 | #21

    saya pun belajar otodidak mas, menurut saya pribados bedanya belajar dengan guru/buku dengan yang otodidak.. cuma beda tipis di pemahaman fungsi aja.. inti dan maksud na tetep sama.. walah ga nyambung nih kek na..


    Belajar sendiri malah biasanya lebih paham, apalagi kalau rajin berlatih

    [Reply]

  22. February 6th, 2012 at 21:56 | #22

    saya suka..saya suka…saya suka….tapi lama-lama pusing juga yah..
    tapi makasih pak guru mars buat pelajarannya… harus banyak belajar juga nih dan harus dipraktekin biar gak lupa… hihihihi….


    Selamat mencoba Mas

    [Reply]

  23. February 7th, 2012 at 14:00 | #23

    wew dapat ilmu lagi deh..makasih pak mars ..walaupun sedikit harus mijat2 kepala nih…


    Sama2 Mbak

    [Reply]

  24. February 7th, 2012 at 17:40 | #24

    sip keren mas :D

    makasih ilmunya :D


    Sama2 Mas

    [Reply]

  25. February 8th, 2012 at 21:13 | #25

    Wah makasi pak, jadi kebuka mata saya.. Hehe


    Mari belajar sama2

    [Reply]

  26. Heri Bejo
    February 8th, 2012 at 22:56 | #26

    Contoh rata : dalam percakapan belum ada Pak, tp tak apa, sudah ketemu (sambil megangi kepala yg cekut2).


    Pernah saya tulis kok Mas

    [Reply]

  27. February 18th, 2012 at 02:17 | #27

    Mantap, thanx infonya Pak.
    Saya pernah coba memodifikasi postingan via html tapi tiap ganti paragraf harus ditulis ulang kode2 tersebut (dalam hal ini tulisan saya copas dari Ms. Word).
    Gimana caranya memasukkan kode hanya dengan sekali tulis?
    Terima kasih.


    Kalau format html paragraf memang harus tiap paragraf Mas. Saya nggak tau kalau ada cara yg hanya sekali tapi untuk semua.

    [Reply]

  28. Randhika
    February 18th, 2012 at 17:21 | #28

    Sangat membantu infonya. Mau tanya nih, ada gak kode html untuk mengatur jarak antar paragraf?
    Salam,…


    Ada Mas…
    Kode untuk mengatur jarak karakter juga ada
    Kayaknya pernah saya tulis disini.
    Tapi kalau diperlukan, nanti bisa saya email

    [Reply]

  29. Yuda
    February 18th, 2012 at 18:43 | #29

    Mau tanya ni Pak, tapi di luar tema. :D
    Cara ganti backround di wordpress gimana ya? Saya udah coba upload foto dari komputer tapi kok nggak biasa-bisa, tapi kalo cuma ganti dengan warna ynag telah disediakan bisa.
    Mohon pencerahannya…


    Itu tergantung Theme nya Mas.
    Ada Theme yg backgroundnya bisa diisi image, ada yg tidak.
    Persis kayak header.
    Ada Header yg hanya bisa diisi teks, ada yg bisa diisi gambar.
    Saran saya, kalau pilih theme, cari yg header & backgroundnya bisa custom alias bisa diubah sendiri
    Semoga jelas
    Trims

    [Reply]

  1. No trackbacks yet.

Current month ye@r day *

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~