Cari di Dalam Blog Ini

Jumat, 22 April 2011

Mencoba dengan CSS

Apa itu CSS?
Saya baru belajar nih dengan yang namanya CSS.
CSS itu adalah: CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Contoh Tag CSS 1:
<html>
<head>
inline
</head>
<body>
<p style="color:red;margin-left:20px">
internal css</p>
</body>
</html>
Itu untuk menampilkan Tulisan dengan memberi sedikit warna. hasilnya adalah:
contoh lain 2:
tag cssnya:
ody

{

background-color:lightblue;

}

h1

{

font-size:36; color:white

}

Simpan dengan nama external.css
tang htmlnya:
<html>
<head>
<link rel="stylesheet" type="text/css"href="external.css">
</head>
<body>
<h1>header ini ukurannya 36pt</h1>
<h2>header ini warnanya biru</h2>
<p>paragraf ini letaknya sebelah kiri dengan jarak 50px</p>
</body>
</html>
Simpan dengan nama coba_css.htm
Hasilnya adalah:

Menyisipkan Album photo

Hai....
Masih seputar tentang pemograman web dengan tag html, kali ini kita akan mencoba membuat sebuah album poto.
Pertama-tama, sebelum membuat album kita harus memasukkan potonya terlebih dahulu. Sebagai contoh, saya akan memasukkan salah satu poto saya:

Ketik perintah:
<html>
<body bgcolor="purple">
<a href="album.htm"></a>
<p><font size="6" color="black" face="jokerman">Lely</font></p><br>
<img src="Lely.jpg" width="300" height="400"><br><br>
<a href="gambar4.htm">previous</a>
<a href="gambar2.htm">next</a>
</body>
</html>

Kemudian di save dengan format .htm atau .html untuk semua poto yang ingin di masukkan.
Perlu diperhatikan bahwa didalam tag diatas, kita ada membuat 'previous' dan 'next'.  Dengan meng-klik next, maka kita akan pindah ke poto berikutnya dan ketika kita meng-klik previous, maka kita akan kembali ke poto sebelumnya. Ini diperlukan ketika nanti kita membuat albumnya. Yah, hasilnya bisa kita lihat nanti setelah pembuatan albumnya selesai.
Anda bebas memasukkan berapapun poto yang ingin anda masukkan nantinya kedalam album anda. Untuk sekarang, saya akan coba memasukkan 4 buah poto saya. Tag yang buat relatif sama, hanya saja disini yang perlu diperhatikan lagi adalah perintah a href nya. Untuk yang next, kita cantumkan link poto yang akan kita tampilkan untuk selanjutnya yang telah kita simpan sebelumnya. Begitu juga dengan previous, cantumkan link untuk poto sebelumnya.
Sekarang kita buat link potonya sebanyak 4 buah karena kita akan memasukkan 4 buah poto.



<html>
<body bgcolor="purple">
<a href="album.htm"></a>
<p><font size="6" color="black" face="jokerman">Lely</font></p><br>
<img src="Lely 2.jpg" width="300" height="400"><br><br>
<a href="gambar1.htm">Previous</a>
<a href="gambar3.htm">next</a>
</body>
</html>




<html>
<body bgcolor="purple">
<a href="album.htm"></a>
<p><font size="6" color="black" face="jokerman">Lely</font></p><br>
<img src="Lely 3.jpg" width="300" height="400"><br><br>
<a href="gambar2.htm">Previous</a>
<a href="gambar4.htm">next</a>
</body>
</html>




<html>
<body bgcolor="purple">
<a href="album.htm"></a>
<p><font size="6" color="black" face="jokerman">Lely</font></p><br>
<img src="Lely 4.jpg" width="300" height="400"><br><br>
<a href="gambar3.htm">Previous</a>
<a href="gambar1.htm">next</a>
</body>
</html>


Jangan lupa gambar dan linknya disimpan didalam sebuah folder.
Nah, setelah disimpan masing2 dengan nama gambar1, gambar2, gambar3 dan gambar4, barulahh kita membuat albumnya. Perintahnya:

<html>
<body bgcolor="sienna">
<p><font size="6" color="blue">Album poto</font></p><br>
<a href="gambar1.htm"><img src="Lely.jpg" width="200" height="320"></a>
<a href="gambar1.htm"><img src="Lely 2.jpg" width="200" height="320"></a>
<a href="gambar1.htm"><img src="Lely 3.jpg" width="200" height="320"></a>
<a href="gambar1.htm"><img src="Lely 4.jpg" width="320" height="200"></a>
</body>
</html>

Tampilannya: