Good Bye Tag <p> :D


~ Secara nggak sengaja, Judul postingan ini mirip sama lagunya YUI : Good Bye Days 🐱 ~

Biasanya kalau kamu berkecimpung di dunia web design atau web developing pasti dah sesekali dihinggapi perasaan kesal sama tag <p>. Kenapa? Soalnya kan gini, kalau mau nunjukin kalau kumpulan kalimat itu adalah satu paragraf dan pengen loncat ke paragraf berikutnya, HTML menyuruh kita buat ngasih tag <p>. Nyebelin banget ya? πŸ‘Ώ

Contohnya aja aku pengen buat tulisan kayak di bawah ini :

Malam…

Walaupun telah hilang dari samudera kehidupan…

Dan siang yang benderang membuatku bimbang…

Kau tetap di hatiku, sayang…

Nah, otomatis kan, tag HTML-ya kayak gini :

<p>Malam...</p>
<p>Walaupun telah hilang dari samudera kehidupan...</p>
<p>Dan siang yang benderang membuatku bimbang...</p>
<p>Kau tetap di hatiku, sayang...</p>

Capek kan ngetiknya?

Nah, untungnya beberapa minggu yang lalu aku dah kenal ma Markdown.

What is Markdown?

Singkatnya nih ya, kalau kamu pake Markdown, kamu nggak perlu lagi pake tag <p>, <em>, <strong>, dan tag-tag HTML lainnya. Rasanya tu bebas banget bro! Kalau mau tau tentang Markdown, coba ajagoogling dulu atau istilahnya anak sekarang Takok karo Mbah Google. Dah kayak dukun aja dah tu πŸ˜€ . Nah, kalau dah pake Markdown ini, semua kesulitan dalam menggunakan HTML akan hilang.

Masalah Berikutnya…

What? Masalah lagi?

Ya, hidup memang penuh dengan masalah bro. Termasuk juga kehidupan para programmer dan program yang dia kami cicipi setiap hari. Salah satu kendalanya adalah untuk bisa menampilkan Markdown, harus menggunakan aplikasi khusus. Kalau di Chrome, bisa pake Mado (yang sekarang tak pake ngetik). Kalau di tempat lain nggak tau juga tuh pake apa XD

Terus, antisipasinya gimana?

Nah, itulah dunia pemrograman. Di mana ada masalah, di situ ada jawabannya. Makanya kan orang programmer berkata Nggak ada manusia bahasa pemrograman yang sempurna. Termasuk juga sama bahasa markup yang bernama Markdown ini. Jadi, Markdown ini seakan-akan lepas sama mbah buyutnya yang bernama HTML. Lalu, bagaimana cara mengakurkannya?

Muncullah sebuah script yang bernama Marked JS

Jreng. Jreng. Jreng. (Ini bahas pemrograman gayeng juga ya πŸ˜€ )

Nah, dengan Marked JS ini, script dari HTML sama script Markdown bisa dijadiin satu. Jadinya, untuk style sama programnya bisa pake HTML, javascript, dan css, sedangkan untuk kontennya bisa pake Markdown. Contohnya saja pas aku buat daftar harga sepeda di bawah ini.


Buatnya sederhana aja yang penting bisa dipake πŸ™„Dan untuk script HTML-nya, berikut scriptnya.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-9">
    <title>Modal Sepeda . @mzaini99</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
    <div id="markdown">

# Ban Luar

Nama | Modal | Jual
-|-|-
99 . 999 | 99 999 | 99 999
99 . 9999 | 99 999 | 99 999
99 . 999 | 99 999 | 99 999
99 . 9999 ||
99 . 999 ||
99 . 9999 | 99 999 | 99 999
99 . 999 | 99 999 | 99 999
99 . 9999 | 99 999 | 99 999
99 . 999 | 99 999 | 99 999
99 . 9999 ||

# Bayi

Nama | Modal | Jual
-|-|-
Babywalker Family || 999 999
R9 Royal Vespa || 999 999
R9 Royal || 999 999

# 99 BMX

Nama | Modal | Jual
-|-|-
BT Viva ||
Darson ||

# 99 Mini

Nama | Modal | Jual
-|-|-
Join Imperial ||
Family ||

# 99 BMX

Nama | Modal | Jual
-|-|-
Exotic ||
Jovina ||
Pacific ||
Family Sport ||
Wim ||

# 99 Mini

Nama | Modal | Jual
-|-|-
Atlantis ||
Family ||

# 99 BMX

Nama | Modal | Jual
-|-|-
Avatar ||
Family ||

# 99 Mini

Nama | Modal | Jual
-|-|-
Family ||

# 99 BMX

Nama | Modal | Jual
-|-|-
Phoenix Star || 999 999
Phoenix ||
Phoenix Router ||
Pacific ||
United || 9 999 999
Wim Dragster || 9 999 999
Wim Titus || 9 999 999

# 99 Mini

Nama | Modal | Jual
-|-|-
Phoenix Star || 999 999
Phoenix || 9 999 999

# 99 Folding

Nama | Modal | Jual
-|-|-
Darson ||

# 99 Mini

Nama | Modal | Jual
-|-|-
Phoenix Star || 999 999
Phoenix ||

# 99 MTB

Nama | Modal | Jual
-|-|-
Jie Yang || 999 999

# 99 MTB

Nama | Modal | Jual
-|-|-
Exotic || 9 999 999

    </div>
    <script type="text/javascript" src="marked.js"></script>
    <script type="text/javascript">
        document.getElementById('markdown').innerHTML = marked(document.getElementById('markdown').innerHTML);
    </script>
</body>
</html>

Aneh kan, script HTML kok nggak pake tag <p> atau tag <h1> dan tag yang ribet lainnya. Oke, sekali lagi aku berterima kasih pada Marked JS. I ❀ you so much. Ciyeeeee

Kalau untuk stylenya, aku pake style dari Bootstrap yang sudah diminified alias diambil yang pentingnya aja. Monggo dicek di repositoriku http://mzaini30.github.io.

Nah, keuntungan dari pemakaian Marked JS ini, ngeditnya gampang bro, pakai tab aja gampang, bisa diedit dari FX File Manager, ya semacam Windows Explorenya tab lah yang ada notepadnya. Jadi nggak kayak dulu lagi, buatnya di lepi, buat aplikasi Android. Eh, pas waktu mau diedit nggak bisa. Maklum lah, masih newbie tingkat dewa kalau masalah Java. Belum bisa pemrogramannya XD Akhirnya ya back to HTML πŸ™‚

Writing from Heart, @mzaini30

Iklan

16 thoughts on “Good Bye Tag <p> :D

  1. Waduh saya jadi ingat masa lalu pernah belajar html secara otodidak. Ternyata ada aplikasi yang begituan? Klo saya sih mending pake dreamweaver saja kan otomatis tinggal ketik

  2. Hoo… jadi bisa begitu ya Mas. Dulu belajar bahasa HTML cuma pas SMA saja, dan memang harus pakai tag itu supaya bisa bikin beberapa baris tulisan :hehe.
    Mungkin kita harus tilik lebih jauh soal bahasa ini :hehe.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s