belajar web 4

April 4, 2009 at 4:11 am Tinggalkan komentar

1. menambah gambar dalam tulisan

setelah kita mengetahui cara menampilkan tulisan di web,
pastinya kita juga ingin agar ditulisan itu terdapat gambar.
agar kita tidak bingung dalam penamaannya, ada baiknya jika
semua gambar yang digunakan dimasukkan dalam suatu folder, misalnya
nama foldernya adalah "pic". o ya nama file yang *.htmlnya juga di masukkan
dalam folder ya biar gak kececer. misalnya file htmlnya di masukkan
dalam folder web dan file gambarnya dimasukkan dalam folder "web" tempat
file html tadi tapi dibuat folder baru lagi yaitu "pic", nah
file gambarnya dimasukkan di situ.
untuk menambah gambar dalam tulisan kita menggunakan perintah
<img src="nama_folder/nama file.tipe file">

ket:
nama_folder : nama folder tempat file disimpan , jika gambar tersebut tidak disimpan
dalam folder khusus atau file itu hanya disatukan dengan file htmlnya,
maka tidak perlu menambahkan "nama_folder" cukup
<img src="nama_file.tipe file>

nama_file : nama file dari gambar yang digunakan

tipe file : tipe dari nama file gambar, mis : jpg,gif,png dll

contoh penggunaaan gambar dalam tulisan :

<html>
<head>
<title>my web</title>
</head>

<body>
<p>
<img src="pic/naruto.jpg">
halo saya buat tulisan dengan gambar neh…<br>
bagus gak??<br>
hmm…<br>
</p>

</body>
</html>

hasilnya :
web41

2. alignment picture dengan <align>

jika kita ingin agar gambar di atas dapat di atur posisinya
kita perlu menambahkan align yaitu posisi letak, kita juga bisa menggunakan
alig ini pada parangraph atau tulisan.
3 macam align yang biasa digunakan:
-center = tengah
-left = kiri
-right = kanan

contoh :
<html>
<head>
<title>my web</title>
</head>

<body>
<p>
<img src="pic/naruto.jpg" align=right>
halo saya buat tulisan dengan gambar neh…<br>
ternyata mudah ya dan tentunya menyenangkan<br>
bagus gak??<br>
hmm…<br>
</p>
</body>
</html>

hasilnya :
web42

3. resize gambar / mengecilkan ukuran gambar dengan <width> dan <height>

contoh :

<html>
<head>
<title>my web</title>
</head>

<body>
<p>
<img src="pic/naruto.jpg" align=left width=50 height=20>
halo saya buat tulisan dengan gambar neh…<br>
ternyata mudah ya dan tentunya menyenangkan<br>
bagus gak??<br>
hmm…<br>
</p>

</body>
</html>

hasilnya :
web413

4. memberi jarak gambar dari tepi / text dengan <hspace> dan <vspace>

yaitu <img src="pic/naruto.jpg" hspace=20 vspace=20>
ket :
-hspace adalah jarak dari gambar dengan tepi kiri dan kanan
-vspace adalah jarak dari gambar dengan tepi atas dan bawah

contoh :

<html>
<head>
<title>my web</title>
</head>

<body>
<p>
<img src="pic/naruto.jpg" align=left hspace=20 vspace=20>
halo saya buat tulisan dengan gambar neh…<br>
ternyata mudah ya dan tentunya menyenangkan<br>
bagus gak??<br>
hmm…<br>
</p>

</body>
</html>

hasilnya :
web414

5. membuat background dari gambar dengan <body background>

jika kita ingin membuat background dengan gambar, ada baiknya
kita mencari gambar dengan ukuran kecil atau besar sekalian
jangan cari ukuran gambar yang nanggung.

contoh :

<html>
<head>
<title>my web</title>
</head>

<body background="pic/body.jpg">
<p>
<img src="pic/naruto.jpg" align=left hspace=20 vspace=20>
halo saya buat tulisan dengan gambar neh…<br>
ternyata mudah ya dan tentunya menyenangkan<br>
bagus gak??<br>
hmm…<br>
</p>

</body>
</html>

hasilnya :
web415

6. mengubah warna text dengan <font color>

agar tulisannya sesuai dengan background gambarnya, maka perlu
kita sesuaikan warnanya. peletakkan perintah ini pada bagian
yang ingin diubah warna hurufnya ja, misal pada paragraph atau <p>
contoh :

<html>
<head>
<title>my web</title>
</head>

<body background="pic/body.jpg">
<p><font color=white>
<img src="pic/naruto.jpg" align=left hspace=20 vspace=20>
halo saya buat tulisan dengan gambar neh…<br>
ternyata mudah ya dan tentunya menyenangkan<br>
bagus gak??<br>
hmm…<br>
</p></font>

</body>
</html>

ket :
-<font color=white> : perintah untuk mengubah warna text menjadi putih, kita dapat
mengganti warna text kita sesuai kebutuhan mis :red, yellow,gray, atau
dalam bentuk kode warna
-</font> : akhir sintax, dimana perintah pengubahan warna ini berakhir

hasilnya :
web416

Entry filed under: web. Tags: .

belajar web 3 belajar php yuk

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


tulisan terakhir

my kalender

April 2009
S S R K J S M
« Mar   Mei »
 12345
6789101112
13141516171819
20212223242526
27282930  

%d blogger menyukai ini: