Trik and Trik bermain Desain Web...
Selamat pagi, Sobat
Hari yang indah untuk berbagi sesuatu, nih.
Yapzz…
Mungkin sobat suka mengotak-atik blog sobat. Hmm… yaa tentu pasti saat
melakukan edit-edit untuk mempercantik blog. Sobat pasti sering mendengar “Kode
HTML”. Hmm.. Sebenernya apa sih itu, emangnya buat apa-?
hehe… :D yoo, memang bagi yang masih awal didunia blogging. Akan sulit mengenal
dan mengetahui kegunaan dari setiap Code Script.
Eiitzz… tenang sob, posting kali ini kita akan bahas tentang HTML itu kok. Dan
tenang aja saya akan bahas dengan detil, yooo… Jadi pantengin terus nih blog. Okey..
:D
Tapi sebelum kita mulai, marilah kita berdoa.. semoga ilmu yang akan ditangkap
lebih mudah kita pahami dan mengaplikasikannya :)
Okee…
Kalau sahabat bertanya apa sih HTML itu-?
waduh… ane kaga tau nih.
Tenang-tenang, hehe… HTML itu singkatan dari (Hyper Text Markup Language),
yaitu merupakan suatu standard bahasa program yang digunakan untuk menampilkan
dokumen- dokumen web. HTML ini berupa kode-kode tag yang memberikan instruksi
pada browser untuk menghasilkan tampilan sesuai dengan yang kita pilih.
Langsung ke pengaplikasiannya yaah.. :)
Yuppz/… kita mulai pengenalannya dulu…
HTML kode pada umumnya terdiri perintah sebagai berikut :
<HTML>
<BODY>
Mengenal Dasar-Dasar dari Kode-Kode HTML
</BODY>
</HTML>
Coba perhatikan kode diata, kode kode HTML selalu di batasi dengan tag
pembuka dan penutup <....>
Sekarang bagaimana tampilan tag untuk membuat Title pada Sebiah blog atau web
?. Untuk membuat title pada sebuah web atau blog anda harus menambahkan kode
<HEAD><TITLE>..........</TITLE></HEAD>
Diantara kode <HTML> dan <BODY>
Contohnya seperti ini :
<HTML>
<HEAD>
<TITLE>Dasar-Dasar dari Kode-Kode HTML</HEAD>
</HEAD>
<BODY>
Mengenal Dasar-Dasar dari Kode-Kode HTML
</BODY>
</HTML>
Seepzz… dah sampe disini pasti udah ada baying-bayang yah..
Maksudnya tuh gimana-? :D hehehe….
Kode-kode HTML yang banyak digunakan untuk memanipulasi text dalam
sebuah web/Blog
<b>....</b> kode ini digunakan untuk membuat cetak
tebal pada tulisan
<i>.....</i> kode ini digunakan untuk
membuat text miring pada tulisan
<u>.....</u> Kode ini digunakan untuk membuat garis
bawah pada tulisan
<b><i><u>.......</u></i></b> ini dalah kode kombinasi yang
menghasilkan text seperti ini
Selain Kode Diatas anda jugadapat menggunakan kode berikut ini :
<strong>........</strong> Kode ini untuk membuat cetak tebal pada
tulisan
<em>..............</em> kode ini
untuk membuat text miring
Selain itu anda dapat menggunakan Kode HTML untuk memanipulasi warna dan
besar huruf pada Text :
<FONT SIZE=”....”
COLOR=”.....” FACE=”......”>
........</FONT>.
SIZE untuk mengatur ukuran huruf, biasanya dengan satuan Pixel
COLOR untuk mengatur warna huruf
FACE untuk mengatur jenis huruf
Misalnya anda ingin mengatur warna pada sebuah Text :
<FONT COLOR="blue">
text akan berwarna biru </FONT>
<FONT COLOR="red"> Text akan berwana merah </FONT>
<FONT COLOR="white"> text akan berwanar putih </FONT>
Apabila anda ingin mengatur Ukuran text contohnya sebagai berikut :
<FONT SIZE=”1″>Ukuran 1 akan seperti in.</FONT>
<FONT SIZE=”2″>Ukuran 1 akan seperti in.</FONT>
<FONT SIZE=”3″>Ukuran 1 akan seperti in.</FONT>
Bagaimana jika ingin memilih jenis text :
<FONT FACE=”Arial”>Ini memakai font arial black.</FONT>
<FONT FACE=”Helvetica”>Ini memakai
font Helvetica.</FONT>
<FONT FACE=”Gorgia”>Ini memakai font Impact.</FONT>
Terus bagaimana menggabungkan semuanya, agar lebih akurat coba kita perhatikan
kode dibawah.
Contoh :
Kita akan menggabungkan kode warna besar huruf dan jenis hurup, cetak tebal ,
miring dan bergaris bawah seperti ini.
<FONT SIZE=”3”
COLOR=”red” FACE=”Arial”><b><i><u>Hasilnya seperti ini</u></i></u></FONT>.
Seepzz.. dah… keren. Gampang.kan-?
Ya.. yaa… pasti :D
hehehe..
Oke selanjutnya kita bahas cara mengubah text dengan tag heading <h1> sampai dengan <h6>. <h1> merupakan ukuran huruf yang paling terbesar dan <h6> adalah ukuran huruf terkecil
Perhatikan huruf yang menggunakan <h2> dan <h3>
<h2>ukurannya seperti ini </h2>
<h3>ukurannya seperti ini </h3>
Anda juga harus mengetahui beberapa kode-kode yang digunakan untuk
mengetur paragraf :
<p> Untuk membuka paragraf
</p> untuk menutup paragraf
<br> Untuk membuat baris baru
<center> Untuk membuat tulisan
berada di tengah </center>
Contohnya :
<P align=”left”><FONT
COLOR=”red”><b> Paragraf ini menggunakan rata kiri dengan warna
tulisan biru dan bercetak tebal
<br> tag ini membuat tulisan ini dalam baris
baru</b></FONT></P>
Hasilnya akan seperti ini :
Paragraf ini menggunakan
rata kiri dengan warna tulisan merah dan bercetak tebal
tag ini membuat tulisan ini dalam baris baru
<P
align=”center”><FONT COLOR=”blue”><U> Paragraf ini menggunakan
rata tengah dengan warna tulisan biru dan bergaris bawah
<br> tag ini membuat tulisan ini dalam baris baru</U></FONT></P>
Hasilnya :
Paragraf ini menggunakan rata tengah dengan warna tulisan biru dan
bergaris bawah
Ok kita lanjut pada
pembahasan berikutnya.Dengan HTML kode anda juga dapat membuat sebuah link
didalam text:
Kode yang digunakan adalah sebagai berikut :
<a href=”Link yang
dituju”>Link yang dimaksud/anchor text</a>
Contohnya disini anda memasukan link http://www.rafi-orilya.blogspot.com
maka hasilnya
adalah sebagai berikut :
<a
href=”http://www.rafi-orilya.blogspot.com/”>Rafi Orilya | Trix
Blogging</a>
sekarang pada Tulisan “Rafi Orilya | Trix
Blogging” terdapat link http://www.rafi-orilya.blogspot.com untuk mengecek silahkan letakan kursor
mouse anda pada Tulisan “Rafi Orilya | Trix Blogging” dan klik maka text tersebut akan membawa anda kehalaman HOME
blorg rafi-orilya.blogspot.com
Anda juga dapat mengatur text link tersebut terbuka pada jendela baru dengan
menambahkan kode
TARGET=”_Blank”
Contoh:
Berfungsi saat sobat Mengklik Link tersebut, maka akan masuk pada
alamat link yang dituju dengan menambahkan tab baru pada browser.
Huuffftt…
Cape juga nih, sebenernya gampang kok.
Tinggal focus kita pada setiap kode yang ditulis, jadi tidak ada kesalahan
dalam penulisannya. Mungkin saat ini hanya seperti yang dapat saya berikan
untuk saat ini. Semoga bermanfaat bagi sahabat yang membacanya.
Saya ucapakan terimakasih, dan maaf bila ada penulisan yang salah atau ada kata
yang tidak berkenan dihati sobat, kami mohon maaf…
Sampai ketemu di posting selanjutnya, kunjungi terus yaah.. :D
Trik and Trik bermain Desain Web...
0 komentar:
Posting Komentar