Belajar HTML : Pemformatan Text
Posted by in Tutorial
Mungkin sebelum kita mempelajari HTML, ada baiknya kita tau sedikit tentang ruang lingkup atau bagian-bagian yang terkait dengan HTML itu sendiri.
HTML singkatan dari Hypertext Markup Language yang mana merupakan standar bahasa yang digunakan untuk menampilkan dokumen web. Apa saja yang bisa kita kerjakan jika seandainya kita bisa bahasa pemrograman HTML? Mungkin itu pertanyaan yang sering kita tanyakan sebagai manusia yang sempurna, karena seorang manusia pasti akan berpikir untungnya terlebih dahulu dari apa yang mereka pelajari, dibandigkan dengan kerugian yang mereka dapatkan. Adapun yang didapat dari mempelajari bahasa pemroraman HTML adalah :
- Dapat mengontrol tampilan dari web page dan contentnya
- Dapat mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh dunia.
- Menambahkan object seperti image, audio, dan video.
- Membuat online form yang dapat digunakan untuk menangani pendaftaran dan transaksi secara online, dsb
Lalu apa saja yang dibutuhkan dalam pemrograman HTML? Selain mental dan space otak yang bisa diajak kompromi, anda harus menyediakan 2 aplikasi/software yaitu browser dan editor HTML. Browser dan editor dapat anda pilih sesuka hati anda, kalo saya boleh menyarankan gunakan Firefox dan dreamweaver, itu saja sudah lebih dari cukuplah.
Ok, sebelum kita masuk ke pokok bahasan yang inti yaitu pemrograman HTML, kita juga harus mengenal yang namanya tag terlebih dahulu. apa itu tag? tag dilambangkan dengan tanda kurawal siku (<>), jadi tag HTML biasanya terdiri dari sepasang yang bisanya diberi nama dengan tag buka/begin tag (<>) dan tag tutup/end tag (</>). Ada juga yang terdiri dari satu tag saja yang mana karena tag tersebut sudah dapat menutup secara langsung dirinya sendiri, misalnya seperti tag breakline (<br/>). Tag HTML tidak mengenal yang namanya case sensitive, jadi huruf besar dan huruf kecil tidak dibedakan.
Tag HTML yang termasuk pemformatan text:
Membuat paragraf <p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id orci justo. Nulla euismod eleifend pulvinar. Phasellus a eros vel metus mollis tincidunt a vitae nisl.</p>contoh hasil:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id orci justo. Nulla euismod eleifend pulvinar. Phasellus a eros vel metus mollis tincidunt a vitae nisl.
Vestibulum id risus vel erat ultricies ornare. Sed consectetur iaculis eros at placerat. Aenean eget pretium enim.
Breakline/Pindah baris <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> Duis id orci justo. Nulla euismod eleifend pulvinar.<br/> Phasellus a eros vel metus mollis tincidunt a vitae nisl.<br/>contoh hasil:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis id orci justo. Nulla euismod eleifend pulvinar.
Phasellus a eros vel metus mollis tincidunt a vitae nisl.
Horizontal line/Garis mendatar <hr/>
<hr/>contoh hasil:
Heading/Judul Topik <h>
<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>contoh hasil:
heading 2
heading 3
heading 4
heading 6
Text cetak tebal/bold <strong>
ini text cetak tebalcontoh hasil:
ini text cetak tebal
Text cetak miring/italic <i>
<i>ini text cetak miring</i>contoh hasil:
ini text cetak miring
Text garis bawah/underline <u>
<u>ini text digaris bawahi</u>contoh hasil:
ini text digaris bawahi
Subscript/menurunkan posisi text <sub>
hallo ini text menggunakan<sub>subscript</sub>contoh hasil:
hallo ini text menggunakansubscript
Subscript/menaikan posisi text <sup>
hallo ini text menggunakan<sup>superscript</sup>contoh hasil:
hallo ini text menggunakansuperscript
Acronym/singkatan <acronym>
<acronym title="hypertext markup language">HTML</acronym>contoh hasil:
HTML
untuk melihat hasilnya silahkan letakkan cusor di atas text HTML
Preformat <pre>
<pre> void main() cout << "menggunakan tag preformat"; cin >> "ya_iyalah"; </pre>contoh hasil:
void main() cout << "menggunakan tag preformat"; cin >> "ya_iyalah";tag pre ini berfungsi untuk menyesuaikan format/bentuk yang kita buat di editor maka spt itu yang akan di tampilkan pada halaman web
Quatation/kutipan/intisari <blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id orci justo. Nulla euismod eleifend pulvinar. Phasellus a eros vel metus mollis tincidunt a vitae nisl. Sed augue dui, aliquet quis egestas a,malesuada tempor felis.</blockquote>contoh hasil:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id orci justo. Nulla euismod eleifend pulvinar. Phasellus a eros vel metus mollis tincidunt a vitae nisl. Sed augue dui, aliquet quis egestas a,malesuada tempor felis.
untuk hasilnya, text yang berada dalam tag quatation akan menjorok kedalam. Ini nantinya dapat kita percanting dengan menggunakan pemrograman css (cascading style sheet), di artikel berikutnya kita akan belajar css
Nah itu dulu tag-tag HTML yang sering/banyak digunakan dalam penulisan sebuah halaman web, sebenarnya masih adalagi, silahkan dicari sendiri dulu yah.
You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.


sekalian kasi contohnya dong pak guru…
cuma saran, biar lebih maknyus, tambahin plugin ini :
http://wirautama.net/syntax-highlighter-plugin-untuk-mempercantik-tampilan-kode-program/
**berharap pak kecek membagi ilmu CSS
Sudah suhu, semoga suhu bisa senang sekarang membacanya, hwuahuwawa…
Untuk css kita bahas nanti aja suhu, kenyel be ngetik puk.