Web Desain Tutorial: Juli 2012

Rabu, 18 Juli 2012

Cara menampilkan Gambar di HTML

website di ciptakan dengan tujuan menarik pengunjung agar mengunjungi website anda untuk membaca atau melihat isi dari web anda, dalam artikel-artikel sebelum nya saya sudah menjelaskan tentang bagaimana merubah atau memanipulasi tulisan/text, seperti Cara membuat enter di html dan Cara merubah font di html, di artikel ini saya akan membahas bagaimana caranya memanggil gambar di html.

dengan adanya gambar tentu nya web akan terlihat lebih menarik, adanya banner,logo,dll. sudah pasti web anda pun akan terlihat lebih hidup, hanya anda saja tinggal bagaimana menata gambar-gambar tersebut agar terlihat menarik.

untuk memanggil gambar di html, kita akan menggunakan tag IMG, untuk lebih jelasnya silahkan lihat tag di bawah ini

<img src="tempat menyimpan gambar" height="42" width="42" />

<img src="D:/gambar/a.jpg" height="42" width="42" />

Hasil yang akan keluar adalah

Mari kita pelajari satu persatu

- seperti yang sudah di jelaskan di atas kita menggunakan tag "img".
- yang di ikuti attribute "src" untuk mencari tempat gambarnya di simpan.
- "height" di gunkana untuk mengatur tinggi gambar
- "width" di gunakan untuk mengatur lebar.

mudah bukan.. semoga artikel ini berguna, sampai jumpa di artikel selanjutnya..

Cara membuat Enter di HTML

Unknown HTML 14.41

Pada artikel kali ini saya akan membahas bagaimana caranya menggunakan "Enter" atau "Line Break" dalam html, pada artikel sebelumnya saya sudah membahas tentang Cara merubah font di htmldan Cara membuat area di html

Jika sebelumnya kita mempelajari cara merubah tulisan, jenis tulisan, warna dan lain sebagainya, maka "Line Break" dalam artikel juga tidak kalah pentingnya, coba saja anda bayangkan bagaimana jika artikel yang anda tulis terus menerus menyambung tanpa adanya "enter" tentu saja ini akan menyebabkan kejenuhan dan membuat kontent sulit untuk di mengerti

Untuk menggunakan "line break" anda hanya perlu menambahkan tag yang sangat sederhana yaitu

 

Sangat sederhana bukan, dan saya tekankan di sini karena banyak sekali programer web yang melupakannya, menulis " " sebenarnya sudah bisa membuat line break dengan membuang tanda "/" namun hal ini akan menyebabkan browser mengulang kembali pembacaan script dari atas dan akan terus berulang, bayangkan saja anda mempunyai "100 line break" dalam 1 halaman web, maka jika anda melupakan yang satu ini berarti web browser yang membukanya akan mengulang script tersebut 100 kali sebelum selesai membuka keseluruhan, tentu saja hal ini akan mempengaruhi kecepatan web anda

Contoh hasil :

Ini adalah tulisan
ini adalah

tulisan

Penerapan di dalam web

<html>
<head><title>Membuat Line Break</title></head>
<body>
Ini adalah tulisan 
ini adalah 
tulisan
</body>
</html>

semoga bermanfaat sampai jumpa di artikel berikutnya

Cara merubah Font di HTML

Unknown HTML 23.36

Tulisan merupakan salah satu hal paling penting dalam website, dengan keunikan dan kerapihan tulisan website anda maka pengunjung pun akan merasa lebih nyaman berada di dalam website anda, dalam artikel sebelumnya saya sudah membahas tentang Cara membuat Area di HTML dan Cara merubah tulisan di html

di kesempatan ini saya akan membahas cara mengubah font, warna huruf, jenis huruf, ukuran huruf, dan lain-lainnya

untuk lebih mudahnya silahkan perhatikan tag di bawah ini

This is some text!
This is some text!
This is some text!

dan seperti ini hasilnya

This is some text!
This is some text!
This is some text!

seperti yang anda lihat di script di atas untuk membuat tag font kita menggunakan  di dalam tag tersebut bisa anda tambahkan atribut-atribut lainya untuk mengubah text, seperti size,color,face dll

This is some text!
This is some text!

size di gunakan untuk merubah besar kecilnya huruf anda bisa memasukan angka di dalamnya

face di gunakan untuk merubah jenis font untuk namanya fontnya anda bisa mengcopynya dari msword atau dari control panel

color seperti namanya di gunakan untuk merubah warna huruf untuk color lebih di sarankan untuk menggunakan code hexadecimal "#00000" - "#ffffff" untuk angka batasannya 1-9 untuk huruf A-F , anda tinggal tambahkan lambang "#" dan menambahkan 6 karakter gabungan angka atau huruf atau bisa juga angka semua untuk merubah warnanya

Sampai jumpa di artikel selanjutnya... Cara membuat aplikasi mobile

Cara membuat area di HTML

Unknown HTML 00.46

Di artikel-artikel sebelumnya saya sudah menjelaskan Cara merubah tulisan di HTML dan Cara membuat link di html pada artikel ini saya akan menjelaskan tentang tag "AREA" dalam html.

tag area ini di gunakan untuk membuat sebuah area yang dapat di klik dalam image, biasanya di gunakan dalam mapping atau lain sebagainya.

untuk lebih mudahnya silahkan lihat tagnya di bawah ini

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

tag img src di gunakan untuk memanggil gambar dan di berikan attribute "usemap"

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

yang kemudian di lanjutkan dengan membuka tag "map" di bawahnya dengan di beri nama yang sama dengan attribute usemap

<map name="planetmap">
</map>

di dalam tag map itulah kita memasukan tag-tag linknya,

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />

attribute shape untuk mengatur bentuk areanya, coords tentu saja untuk mengatur titik koordinat di mana kita ingin membuat area yang bisa di kliknya, kemudian href seperti yang di gunakaan untuk membuat link kita letakan alamat yang di tujunya.

untuk contoh lebih lanjut anda bisa mengklik Di sini