[Tutorial] Coding: HTML Text for Layout Profile (1)

Konniciwa!

Mumpung ada waktu senggang, aku buat tutorial. Pertama yang aku buat di wordpress. Sebelumnya, aku udah banyak buat tutorial coding di multiply, tapi blog-nya dihapus gara-gara si stepan. Hm, okay singkat aja ya! Besok aku ada try out soalnya /sigh/

Well, langsung aja.

Yang kalian butuhkan :

1. Wajib bisa html dasar.

Paling nggak kalian sudah mengerti penggunaan tag.

2. Sabar.

Belajar html butuh kesabaran, ga langsung jadi. Dunia ini ga ada yang instan! Aku belajar html dari kelas 6 SD. Trus untuk coding kayak gini butuh waktu 3 hari – karena aku udah lumayan menguasai hal coding.

3.  Koneksi internet lancar

Oke hal ini ga terlalu penting. Oke sip langsung aja.

< – – – – – – – – – – . – – – – – – – – –  >

tulisan di dalam blockquote adalah kode

Tulisan Tebal

<b>Tulisan Tebal</b>

<strong>Tulisan Tebal</strong>

*note: tag <strong> digunakan untuk teks yang dianggap penting.

*note: lebih aman pake tag <strong>

Tulisan Miring

<i>Tulisan Miring</i>

<em>Tulisan Miring</em>

*note: tag <i> digunakan menjadi italic apabila pada html 4.01 namun tidak bisa digunakan untuk html5

Tulisan ini lebih kecil lho

<small>Tulisan</small>

Kesimpulan HTML dasar:

setiap tag harus ditutup. Misalkan tag <em>, saat selesai memakai harus ditutup dengan diberi tanda garing atau “/” setelah “<“. Contoh: <i>…</i>

.

Ngerti? Oke sip. Yang di atas tadi BARU HTML DASAR. (Reader: Anjir php lu !!!!) -___-v

Sekarang mulai masuk inti dari judul.

< – – – – – – – – – – . – – – – – – – – –  >

 1. Mengatur paragraf teks.

Saat membuat profile, biar lebih bagus biasanya tata letak tulisan atau typografi selalu diperhatikan. Kodenya:

<p style=”text-align: center;”></p>

*note: teks yang diwarnai merah bisa diganti dengan: left (rata kiri), right (rata kanan), justify (rata kiri dan kanan).

*note: pada wordpress setahuku tidak bisa pakai justify.

2. Mengatur warna

Ada banyak kode untuk membuat warna. Tapi gak semua kode itu efektif. Maksudnya, kadang-kadang di wordpress kode itu nggak bisa digunain. Atau terlalu banyak kode yang membuat tambah bingung. Paling simple, kodenya:

<span style=”color: #FF0000;”></span>

<font color=”red”>This is some text!</font>

*note: yang diberi warna merah bisa diganti

*note: tanda “#” jangan ampe hilang dan harus diikuti oleh kode warna. Bisa dilihat di sini. Tapi kalo nggak, bisa pakai warna web tanpa pakai tanda pagar. Contoh: hotpink, deepblue, dll.

3. Ukuran tulisan

Nah, ini bisa diganti juga lho! selain pake tag <small> bisa pake kode ini:

<span style=”font-size: 12px;”></span>

*note: yang diberi warna merah bisa diganti

4. Memberikan font

Masuk dalam bab typografi. Biasanya kalo pingin lebih menarik, font kadang berbeda-beda dalam satu entri. Gampang, kok! Kodenya:

<span style=”font-family: times new roman;”></span>

Tips biar layout-mu lebih menarik, gunakan font di bawah ini:

1. Georgia

2. Serif

3. Century Gothic

4. Times New Roman

DLL. Asalkan bukan font yang didownload.

5. Mengatur kerapatan setiap huruf

Hufft.. capek #abaikan! -__-

<span style=”letter-spacing: –3px;”></span>

*note: ganti yang di kasih warna merah

6. Mengatur line height

<span style=”line-height: 8px;”></span>

Nah, selesai. Yang aku kasih kodenya adalah yang penting-penting aja. Sekarang, bagaimana mereka digabungkan.

WARNING: DALAM MENGGABUNGKAN BANYAK TAG, JANGAN ASAL ATAU GAK ADA HASILNYA!

< – – – – – – – – – – . – – – – – – – – –  >

Dalam menggabungkan tag, kalian ga harus nulis tag yang kalian ingin gabung. Di sini yang aku maksud adalah tag <span>. Dalam satu tag, kita bisa membuat banyak format tulisan bukan? Nah, kalau misalkan kalian mau menggabungkan format font dengan warna ga perlu ditulis <span style=”font-family: times new roman;”></span><span style=”color: #ffffff;”></span>. Kenapa? Aku rasa itu nggak efektif. Jadi cara penggabungannya langsung aja: (Perhatikan)

<span style=”font-family: times new roman; color: #ffffff;”></span>

*note: warna merah adalah format font sedangkan biru adalah format warna

Jadi, dalam menggabungkan format-format itu hampir sama seperti CSS. Tinggal tulis aja formatnya. Namun ingat, INI TIDAK BERLAKU JIKA TAG BERBEDA! Kalau tag berbeda, biasanya beda juga aturannya. Misal pada tulisan, kita mengganti warna dan dibuat tebal. Contoh kodenya:

<span style=”color: #000000;”>My Bias : <strong>SHINee’s Key</strong></span></p>

Tapi, kalo masih ingin dikasih font, formatnya dipindah ke tag <p>. Peraturannya bisa begini:

<p style=”text-align: center; font-family: century gothic;”><span style=”color: #000000;”>My Bias : <strong>SHINee’s Key</strong></span></p>

*note: warna biru adalah tag <p> untuk rata paragraf.

*note: warna hijau adalah tag <span> yang ditaruh di tag<p> sehingga langsung tulis format untuk jenis font.

*note: warna merah adalah tag <span> untuk warna tulisan

You get it? So, intinya adalah format bisa dipindah, ditaruh di tag mana asalkan kode yang dipakai benar.

Oya, jangan lupa setiap tag harus ditutup! Kalo tag-banyak, nutupnya dari yang paling terakhir ke yang paling duluan. Ini contohnya:

<p style=”text-align: center; font-family: century gothic;”><span style=”color: #000000;”>My Bias : <strong>SHINee’s Key</strong></span></p>

Oke, sekian dulu, ya!

WARNING!

DILARANG MENJADI SIDERS! DILARANG RE-BLOG! DILARANG COPAS, LALU EDIT, DAN DIPUBLISH MESKIPUN KALIAN CREDIT KE AKU! WILL YOU BE A COPYPIGGY? WHAT THE HELL! APALAGI COPAS TANPA IJIN.

PERHATIAN!

SEBELUM MENCOBA CODING, HARAP BERDO’A AGAR DIBERI KETABAHAN. BELAJAR HTML TIDAK LANGSUNG INSTAN, HARUS DIPAHAMI DULU. BELAJAR HTML BUKAN AJANG ASAL COPAS.

Part 2 nya mohon ditunggu. Kalau ketahuan copas atau reblog, part 2 akan aku private dan kuberi password!

Ada pendapat lain mengenai kode-kode diatas? Klik di sini. Jika masih tidak mengerti, komen di bawah.