Tag: html

Membuat border radius & Rounded Corner dengan CSS

Waktu kemaren ane mo buat web, ane terpesona dengan web-web yang tampilannya ada bayang-bayangnya… ane kira itu pake bantuan gambar background… lalu ane coba trace sourcecodenya eh.. ternyata, gak pake bantuan image..
setelah bongkar-bongkar kantong ajaib mbah google, ane menemukan jawabannnya:

Kini dalam layouting tampilan Web kususnya membuat round corner dan border shadow (border lengkung dan bayangan) sudah sangat mudah dengan bantuan CSS3, jadi gak perlu lagi direpotkan dengan membuat gambar border lengkung/ berbayang di image editor.
CSS 3 walaupun masih eksperimental, tetapi memberikan banyak fitur-fitur syntax yang memudahkan kita dalam membuat tampilan website yang dinamis, contohnya round corner dan shadow border yang akan ane coba bahas berikut ini. keuntungan menyetting border menggunakan css3 ini dibanding menggunakan image adalah dalam hal besar file dan waktu akses, dengna menggunakan css3 file html yang kita buat akan lebih ringan karena hanya ditambahkan kode text di css tanpa harus menambah gambar yang besar.

dalam mengatur hiasan border dengan css3 ini ada hal yang perlu diperhatikan:
Browser support

Berikut adalah list kompatibilitas masing-masing browser dalam menangani syntax CSS untuk round corner dan shadow border

Membuat Border Lengkung:

<style>
div #lengkung {
width:100px; height:100px;
border:2px #fff solid;
border-radius:25px;
-moz-border-radius:25px;
}
</style>
<div id="lengkung" >LENGKUNG</div>

Mari lanjut, untuk membuat box berbayang…
pertama perhatikan gambar dibawah ini, ada beberapa macam model box berbayang yang bisa diatur menggunakan CSS3

oke ini, script untuk layoutingnya:

contoh A: offset di kiri dan atas sebanyak 5px
#contoh_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

contoh B: offset di kiri dan atas dengan blur sebanyak 5px
#contoh_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

contoh C: offset di kiri dan atas dengan spread sebanyak 5px
#contoh_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

contoh D: offset di kiri dan atas dengan blur dan spread sebanyak 5px
#contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

contoh E: tanpa offset tetapi dengan blur 5px
#contoh_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

contoh F: tanpa offset tetapi dengan blur dan spread 5px
#contoh_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

oke segini dulu yah…

diolah dari sumber


Perbedaan Method POST dan GET pada FORM HTML

Pada dasarnya, metode POST dan GET memiliki kegunaan yang sama yaitu untuk mengirimkan value variabel ke halaman lain atau mengirimkan ke database.
Pengiriman data itu biasanya dengan menggunakan formulir. Perbedaan kedua method tersebut sangat kecil namun SANGAT terlihar dengan jelas.
Method GET ketika mengirimkan data akan menambahkan pada URI, sedangkan kalo method POST dikirim ke server dengan diincludekan pada sebuah permintaan (body of request) dan bukan melalui URI dan hasil dari method POST ini nggak bersifat cacheable (dapat disimpan dalam cache)
oke, untuk lebih jelasnya mari ane buatkan contoh:

<form action="admin.php" method="GET">
<input type="text" name="id"><br>
<input type="text" name="aksi><br>
<input type="submit" value="kirim">
</form>

ketika menggunakan method post, maka pada URL bar browser anda akan menjadi
admin.php?id=xxx&aksi=xxx

catatan: xxx adalah data yang dikirimkan

untuk menangkap variabel di program PHP, untuk metode GET ini kita menggunakan $_GET['nama_variabelnya']

oke ke admin.php

$id=$_GET['id'];
$aksi= $_GET['aksi'];
echo "id=".$id."<br>Aksi=".$aksi;

pada metode get ini, ketika anda mengubah data di URI, maka hasilnya pun akan berubah mengikuti data yang ada di URI itu.

<form action="admin.php" method="POST">
<input type="text" name="id"><br>
<input type="text" name="aksi><br>
<input type="submit" value="kirim">
</form>

untuk menangkap variabel di program PHP, untuk metode POST ini kita menggunakan $_POST['nama_variabelnya']

oke ke admin.php
<pre>
$id=$_POST['id'];
$aksi= $_POST['aksi'];
echo “id=”.$id.”<br>Aksi=”.$aksi;
</pre>

note: penggunaan metode post atau get itu sesuai dengan kebutuhan anda, biasanya untuk metode get, data yang dikirimkan berupa data aksi/id saja dan tidak bersifat credential.
untuk metode POST, biasanya data yang dikirimkan adalah data yang bersifat credential, misalnya password (hal ini juga terkait dengan keamanan)


HTML Lanjut : Beda tag b dengan strong, i dengan em

Sebelum masuk ke pembahasan, mari kita coba dulu script dibawah ini….

kalimat ini ditebalkan dengan tag <b>
kalimat ini ditebalkan dengan tag< strong>

Kalimat ini dimiringkan dengan tag <i>
Kalimat ini dimirngkan dengan tag <em>

Perhatikan hasilnya…

Sama kok, lalu apa bedanya? kenapa harus begitu?

yah, jika diperhatikan, kalimat yang di bold dengan tag b dengan strong hasilnya sama aja secara visual (dilihat mata kita)
namun, kedua tag itu berbeda dalam pengartian oleh browser.
tag <b>…</b> akan menghasilkan  dan mendefinisikan huruf tebal saja begitu juga dengan tag <i>….</i> yang akan menghasilkan dan mendefinisikan huruf miring saja.

Berbeda dengan tag <strong> dan <em> (secara komputer bukan visual kita) tag tersebut mendefinisikan bahwa sebuah teks diartikan sebagai “penting”.
Tapi sekarang semua Browser utama (Firefox, Chrome, Opera, IE, Safari) telah merender (mengubah) <strong> sebagai <b>, dan <em> sebvagai <i>.

Lalu apa kegunaannya?

Apabila anda berkutat dengan SEO (seach engine optimizer) maka hal ini akan sangat dirasakan. mesin pengindex akan lebih suka mengindeks page web yang memiliki kata-kata yang “penting” , dengan menggunakan tag strong dan em, bisa membantu mendongkrak keyword web kamu. gampangnya, website yang kamu buat jadi SEO friendly, shingga kemungkinan untuk nongol di page awal SE itu menjadi besar.


dasar css (5) : Mengatur Padding Suatu Kolom

Seperti pada margin, padding juga memberikan space/ area kosong di sekitar kolom yang dibentuk. padding memberikan jarak antara isi elemen dengan kolom yang ada diluarnya,

nilai value yang ada:

length mendefinisikan ukuran padding yang fix (px,pt,em)
% mendefinisikan ukuran padding dalam persen

untuk mengatur padding secara individu

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Selain menggunakan perintah secara individu, dapat juga menggunakan shorthand, dimana menyingkat semua perintah dalam satu property:

misal:

padding:25px 50px 75px 100px;

artinya:
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px


dasar html (13) : Pengaturan Warna pada HTML

Pada saat kita akan mengatur atribut color (pengaturan warna) pada tag html, kita bisa menggunakan 2 cara yaitu menggunakan kode hexadecimal atau kode warnanya sendiri.

HTML memiliki beberapa warna standar yang bisa dipanggil langsung sesuai dengan namanya. Tentunya sesuai dengan standar dari w3c.

HTML mengenal ada 16 warna yang valid, dan bisa di call langsung.

Nama warna tersebut adalah:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Boleh saja mengunakan nama warna dalam menyeting attribut color, namun saran ane, gunakanlah kode hex untuk menuliskan value dari atribut ini agar lebih terjamin :)

contoh:

<font color="teal">Ini adalah warna teal</font>
<font color="#FFFF00"> INi adalah warna kuning</font>

Pada format menggunakan kode hex, pendefinisian karakter warna terdiri dari 6 karakter
dan diawali dengan tanda kres (#)
contoh: #FF0000
2 karakter pertama menandakan intensitas warna merah
2 karakter kedua menandakan intensitas warna hijau
2 karakter kektiga menandakan intensitas warna biru

jadi pada contoh diatas value R=FF , G= 00, B=00
sehingga warna yang aktif adalah warna merah.


dasar html (12) – Membuat Text Berjalan

Jika sebelumnya saya pernah membuat tutorial tentang cara mengatur tampilan elemen HTML,
kini ane akan memberikan tutorial tetang cara lainnya yang dapat digunakan untuk membuat text lebih kelihatan menarik, yaitu dengan membuat “text berjalan / credit” (marquee text).
Ada beberapa macam model marquee text:

Marque text biasa
tulisan bergerak dari kiri menuju kanan.

<marquee>Ini tulisak bergerak dari kiri ke kanan</marque>

Kamu bisa mengkombinasikan beberapa tag html ke fungsi marquee ini, misal <a> , <img> , <b> , <i> ,<u>

misalnya:

<marquee>
<b><i>
<a href="http://hace.web.id">Link Ke Blog Saya</a>
</i></b>
</marquee>

Jika masih merasa kurang puas dengan arah text ato warnanya monggo ini ada caranya:

Untuk merubah arah text, tambahkan atributberikut ini =>

direction=”value”
Ganti text “value” dengan ‘left, right, up, down, atau alternate’.
‘left’ mengarahkan text ke kiri,
‘right’ ke kanan,
‘up’ ke atas’,
‘down’ ke bawah,
‘alternate’ bolak balik kayak orang bingung
Atau jika ingin efek geraknya hanya satu kali setelah itu berhenti, tambahkan atribut ini
behavior=”slide”
<marquee bgcolor="#ffff00" width="270" direction="right" behavior="alternate">
<b>INI tulisannya bolak balik kayak <a href="http://hace.web.id">orang bingung</a></b>
</marquee>

Hasilnya:


INI tulisannya bolak balik kayak orang bingung

Sulit Sekali ketika akan mengeklik link yang berjalan seperti itu, lalu bagaimana caranya biar ketika ada mouse datang linknya berhenti?
gampang banget, tambahkan aja atribut OnMouseOver=”this.stop()” OnMouseOut=”this.start()”

contoh pemakaian

<marquee bgcolor="#ffff00" width="270" direction="right" behavior="alternate" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<b>INI tulisannya bolak balik kayak <a href="http://hace.web.id">orang bingung</a></b>
</marquee>

Hasilnya:

INI tulisannya bolak balik kayak orang bingung


dasar html (11): Membuat Frame, List & Image Mapping

MEMBUAT ORDERED LIST
Order/Unorder List digunakan untuk memberikan penomoran/daftar pada paragraft.
tag yang digunakan adalah

<ol> : untuk mendefinisikan daftar dengan menggunakan nomer berurutan
<ul> : untuk mendefinisikan daftar tanpa nomer berurutan
<li> : untuk membuat daftar itemnya
semua tag tersebut adalah berpasangan (paired)

contoh penggunaan:

<ol start="3">
<li>Baris ini bernomer 3</li>
<li>Baris ini bernomer 4</li>
</ol>

pada contoh diatas, jika tidak didefinisikan maka nomer awalnya adalah 1

<ul imgsrc="panah.gif">
<li>Contoh Item satu</li>
<li>Contoh Item dua</li>
</ul>

Pada contoh diatas, bullet yang muncul berasal dari gambar panah.gif, yang berada pada folder yang sama dengan web html tersebut

<ul type="circle">
<li>Ini Bulletnya berbentuk bulat</li>
</ul>
<ul type="circle">
<li>Ini Bulletnya berbentuk kotak</li>
</ul>

MEMBUAT FRAME
Frame adalah salah satu cara untuk menampilkan halaman web yang terdiri dari beberapa halaman web html
Pada sebuah laman web, misal index.html terdapat kode baris sebagai berikut:

<frameset cols="25%",*,25%>
<frame name="kiri" src="menu.html">
<frame name="tengah" src="konten.html">
<frame name="kanan" src="menukanan.html">
</frameset>

pada contoh script itu, halaman index.html akan berbentuk
Dengan bagian 1 adalah memuat file menu.html, bagian tengah konten.html, dan bagian kanan memuat menukanan.hmtl

NB: Pada desain web, penggunaan frameset sangat TIDAK DISARANKAN, karena akan membuat website menjadi seolah amburadul dan load terhadap website tersebut lelet.
MEMBUAT FRAME INTERNAL
Seperti pada frame, iframe/frame internal juga digunakan untuk memuat halaman web lain pada suatu halaman website, namun bedanya, iframe berada full didalam web html, dan tidak membagi layar menjadi beberapa bagian seperti pada frameset
letak iframe terkunci, seperti ketika saat kita meletakan gambar menggunakan tag img.
contoh:
<iframe src=”halaman_lain.html” width=”200″ height=”300″></iframe>

MEMBUAT IMAGE MAP LINK
Image map adalah sebuah hyperlink dengan menggunakan metode hotspot, dimana link ini adalah linx berjenis khusus yaitu dengan ara grafis yang sudah ditentukan sebelumnya
contoh: gunakan gambar ukuran 150×100 pixel

<map name="map1">
<area href="hace.web.id" shape="rect" coords="123,0,150,22">
<area href="cadsquad.blogspot.com" shape="circle" coords="70,40,30">
<area href="hantuceria.wordpress.com" shape="polygon" coords="7,7,15,10,7,60,12,52">
</map>
<img src="image.jpg" width="150px" height="100x">

MEMBUAT LINK MENGGUNAKAN BOOKMARK

Hyperlink menggunakan bookmark adalah suatu cara yang digunakan untuk melihat dokumen dalam sebuah halaman web ke bagian yang langsung dituju.
Misal ada dokumen yang panjang pada sebuah halaman web dan terbagi menjadi beberapa bagian sub title
Jika ingin langsung menuju ke subtitle yang ada dibawah (nggak kelihatan dilayar) maka kita bisa membuat bookmark sehingga bisa langsung diakses dari bagian atas halaman, nggak perlu scrolling

<a href="#judulsatu">Link ke paragraf judulsatu</a>
<p name="judulsatu">
texs yang sangat panjang dan dibawah
</p>

dasar html (10) : Membuat Form

Setelah sebelomnya belajar mengenai sintak-sintak yang sangat dasar dalam pengembangan sebuah halaman HTML,
mari kita lanjutkan pembahasan kita,
kali ini kita akan belajar tentang membuat Form dengan menggunakan script HTML.
Formulir sangat penting dalam web, karena sebagai media untuk interaksi, antara pengguna – system dan administrator.
Forms atau formulir ini pasti sudah sangat familiar di kalangan para blogger khusunya yang selalu mendaftarkan blog nya ke web direktori, karena untuk mendaftarkan blog nya seorang blogger perlu mengisi persyaratan dan juga data dari blog. Hal ini sama seperti bila kita hendak membuat sebuah e-mail. Pasti kita akan di perintahkan untuk mengisi data-data yang di perlukan, seperti nama, password yang akan di gunakan dan lain-lain.

<html>
<head>
<title>Tutorial dasar html : Membuat Forms</title>
</head>
<body>

Untuk menuliskan teks<br>
<form>
First name: <input type="text" name="nama_depan" /><br />
</form>
<br>
Untuk menuliskan password<br>
<form>
Password: <input type="password" name="pwd" />
</form>
<br>
tombol lingkaran<br>
<form>
<input type="radio" name="sex" value="L" /> Cowok<br />
<input type="radio" name="sex" value="P" /> Cewek
</form>
<br>
tombol kotak<br>
<form>
<input type="checkbox" name="vehicle" value="Sepeda" /> Sepeda<br />
<input type="checkbox" name="vehicle" value="Mobil" /> Mobil
</form>
<br>
tombol input<br>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<br>
</body>
</html>

Hasil dari Script itu

Untuk menuliskan teks

First name:

Untuk menuliskan password

Password:

tombol lingkaran

Cowok
Cewek

tombol kotak

Sepeda
Mobil

tombol input

Username:

Penjelasan Tag

<input>     : Mendeskripsikan input teks
<textarea>  : Mendeskripsikan area teks
<option>     : Mendeskripsikan option di pilihan
<buttton>   : Mendeskripsikan tombol
<select>  : membuat select box/combobox

dasar html (9) : membuat tabel

Tabel terdiri dari baris dan kolom, pada dokumen HTML tabel di tentukan oleh tag <table> dan untuk membuat barisnya dengan tag <tr>, serta kolom nya di tentukan oleh tag <td> kependekan dari table data, pada tag td ini yang nantinya dapat di isi dengan teks, link, gambar, dan lainnya, bahkan dapat berisi tabel lain.

<html>
<body>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
<tr>
<td>Baris 3, kolom 1</td><td>Baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menhasilkan tabel seperti dibawah ini.

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2
Baris 3, kolom 1 Baris 3, kolom 2

Atribut Pada Tabel, Border

Border atau garis pembatas adalah atribut untuk membuat garis pada tabel HTML, tanpa atribut ini tabel pada HTML tidak akan memiliki garis-garis pembatas

<html>
<body>
<h4>Tabel tanpa atribut border</h4>
<table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 1</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 5</h4>
<table border="5">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menhasilkan tabel seperti dibawah ini.

Tabel tanpa atribut border

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai border 1

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai border 5

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

 

Mengatur Jarak Antar Sel

Jarak antara sel pada tabel HTML diatur oleh atribut cellspacing

<html>
<body>
<h4>Tabel tanpa atribut cellspacing</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="0"</h4>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="10"</h4>
<table border="1" cellspacing="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Script tersebut akan menghaislkan:

Tabel tanpa atribut cellspacing

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellspacing=”0″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellspacing=”10″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Mengatur Jarak Antara konten dengan garis sel

mengatur jarak antara konten pada sel dengan batas pinggir cel tersebut dapat dilakukan dengan menambahkan atribut cellpadding

<html>
<body>

<h4>Tabel tanpa atribut cellpadding</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellpadding="10"</h4>
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

</body>
</html>

Script tersebut akan menhasilkan:

Tabel tanpa atribut cellpadding

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

Tabel dengan nilai atribut cellpadding=”10″

Baris 1, kolom 1 Baris 1, kolom 2
Baris 2, kolom 1 Baris 2, kolom 2

RowSpan dan COlspan

Untuk membuat sel pada tabel yang menjangkau lebih dari satu baris atau kolom yaitu dengan memakai atribut colspans dan rowspan. Dari pada bingung lihat dan praktekan contoh dibawah

<html>
<body>

<h4>Sel yang menjangkau 2 kolom</h4>
<table border="1">
<tr>
<th>Nama</th><th colspan="2">Telepon</th>
</tr>
<tr>
<td>Heri</td><td>123456</td><td>456789</td>
</tr>
</table>

<h4>Header vertikal</h4>
<table border="1">
<tr>
<th>Nama : </td><td>Heri</td>
</tr>
<tr>
<th rowspan="2">Telepon : </th></td><td>123456</td>
</tr>
<tr>
</td><td>456789</td>
</tr>
</table>

</body>
</html>

Script Tersebut akan menghasilkan:

Sel yang menjangkau 2 kolom

Nama Telepon
Heri 123456 456789

Header vertikal

Nama : Heri
Telepon : 123456
456789

dasar html (8) : Menampilkan Gambar di Dokumen HTML

Untuk menampilkan gambar pada sebuah dokumen html digunakan tag image <img> dengan atribut src untuk merujuk dimana file penyimpanan imagenya.

tag <img> merupakan tag tunggal dimana tag ini adalah tag special tanpa penutup tag </img>

contoh:

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg" />
</body>
</html>

Atribut yang ada pada tag img:

ALT

Atribut alt (alternative) digunakan sebagai teks alternatif jika gambar yang di maksud tidak bisa di tampilkan karena beberapa alasan seperti koneksi yang lambat, error pada atribut scr, dan lainnya.

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg" alt="hace blogger" />
</body>
</html>

 

Pada contoh diatas, apabila gambar nggak muncul, maka akan digantikan dengan text yang ada di alt, yaitu hace blogger

MENGATUR TINGGI DAN LEBAR GAMBAR

Mengatur tinggi gambar dapat menggunakan atribut heigh dan untuk mengatur lebar dengan atribut width

<html>
<body>
<img src="http://adhit.net/wp-content/uploads/2012/10/ZfOM4e35469f8f1c6.jpg"" alt="blogger jogja" width="200px" height="100px"/>
</body>
</html>

POSISI GAMBAR:

misal letak file gambar:

c:contohgambardiluar.jpg
c:contohhtmldokumenhtmlku.html
c:contohhtmlgambarsejajar.jpg
c:contohhtmlimggambardidalam.jpg

UNtuk menampilkan gambar di setiap posisi folder ada caranya sendiri-sendiri, biar lebih jelasnya ketiklah contoh dibawah dan perhatikan hasilnya:

<html>
<body>
tampilkan image sejajar dengan dokumen html <img src="gambarsejajar.jpg">
tampilkan image diluar folder dokumen html <img src="../gambardiluar.jpg">
tampilkan image didalam folder img  <img src="img/gambardidalam.jpg">
</body>
</html>

NOTE:

pada generasi html 4 , XHTML dan generasi kedepannya, penulisan ta image tanpa penutup adalah merupakan sauatu kesalahan. sebagai solusinya tag img tetap diberikan tag penutup namun langsung pada tag nya menjadi bentuknya <img />

Untuk menampilkan gambar pada sebuah dokumen html digunakan tag image <img> dengan atribut src untuk merujuk dimana file penyimpanan imagenya.


Copyright © 2012 adhit.net™. All rights reserved. Theme iDream Fully Modified By omahcyber