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:












Membuat Option, List dan Biodata

Bagaimana membuat sebuah option?

Contoh membuat sebuah option jenis kelamin. Perintahnya:

<html>
<body>
<p> Jenis Kelamin</p>
<form>
<input type="radio" checked name="sex">laki-laki
<br>
<input type="radio" checked name="sex">perempuan
</form>
</body>
</html>

Hasilnya adalah sebagai berikut:









Lalu bagaimana membuat sebuah daftar list, misalnya daftar hewan berkaki 4? Kita tentu bisa membuatnya bahkan dengan variasi yang lebih.

<html>
<body>
<body bgcolor="white">
Nama-nama hewan berkaki 4 :
<form>
<select name="animal">
<option value="kucing">kucing
<option value="sapi">sapi
<option value="anjing">anjing
<option value="kuda">kuda
<option value="babi">babi
</select>
</form>
</body>
</html>

Hasil dari perintah diatas adalah:








Ada lagi, yaitu membuat sebuah daftar isian, misalnya biodata. Perintahnya:

<html>
<body>
<fieldset>
<legend>
Biodata
<legend>
<form>
Nama<input type="text" size="30">
NIM<input type="text" size="12">
Umur<input type="text" size="3"> Tahun,
Berat<input type="text" size="3"> Kg,
Tinggi<input type="text" size="3"> Cm
</form>
</fieldset>
</body>
</html>

Hasilnya adalah:






Jika diisi, hasilnya:







Sekarang kita akan membuat sebuah List. Disini kita akan coba membuat list nama-nama burung dengan memakai bullet. Ketik perintah:

<html>
<head>
<title> Contoh List </title>
</head>
<body>
<h2> Nama-nama burung : </h2>
<ol type="square">
<li>Burung Unta</li>
<li>Love Bird</li>
<li>Tampua</li>
<li>Cendrawasih</li>
<li>Merak</li>
</ol>

Disini kita menggunakan bullet tipe square, seperti yang kita ketik didalam tag. Jika ingin mengganti dengan tipe lain, silahkan ganti square dengan yang lain. Hasil di atas adalah:








Bisa juga tanpa memakai bullet, dengan memakai huruf misalnya. Ganti saja Square dengan bentuk huruf yang ingin dipakai, misalnya "A", maka bullet akan terganti dengan A,B,C dan seterusnya.

Yah, cukup sekian mungkin untuk post kali ini. Semoga postingan ini bermanfaat bagi anda.

Sampai ketemu lagi...... :)

Kamis, 21 April 2011

Membuat Tabel dengan Tag HTML

Yang dinamakan tabel adalah memiliki baris dan kolom, Tag untuk penanda baris adalah <tr> dan di tutup dengan </tr> dan untuk kolom <td> </td>.

 Pnjelasan :
Clospan : menyatukan lebih dari 1 kolom
Rowspan : menyatukan lebih dari 1 baris




Contoh 1:
<html>
<head>
    <title>Table 1</title>
</head>
<body>
<table border="1" width="500">
<tr> 
<td>Header kiri</td>
<td align="center" width="50%">Header tengah</td>
    <td align="right">Header kanan</td>
</tr>
<tr>
 <td valign="top" rowspan="2">Menu kiri</td>
 <td align="center" colspan="2" height="200">Bagian Isi</td>
</tr>
<tr>
 <td align="center">Footer tengah</td>
 <td align="right">Footer kanan</td>
</tr>
</table>
</body>
</html>
Hasilnya adalah seperti berikut:


Contoh 2:
<html>
<head>
<title>Tugas 2</title>
</head>
<body>
<table border="1"width="500">
<tr>
<td align="center"colspan="4">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center"colspan="2">3</td>
<td valign="top"align="center"rowspan="3">8</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<td align="center"colspan="3">7</td>
</tr>
</body>
</html>

Nah, dari kode html diatas, kira-kira seperti ini tampilannya:


Sampai ketemu lagi...

Tag HTML

 Beberapa tag HTML yang biasa digunakan dalam pembangunan Web.

!– –
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
a href
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
a name
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
area
Mendefinisikan daerah yang dapat diklik (link) pada image map
b
Membuat teks tebal
basefont
Membuat atribut teks default seperti jenis, ukuran dan warna font
bgsound
Memberi (suara latar) background sound pada halaman web
big
Memperbesar ukuran teks sebesar satu point dari defaultnya
blink
Membuat teks berkedip
body
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
br
Pindah baris
caption
Membuat caption pada tabel
center
Untuk perataan tengah terhadap teks atau gambar
comment
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
dd
Indents teks
div
Represents different sections of text.
embed
Menambahkan sound or file avi ke halaman web
fn
Seperti tag
font
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
form
Mendefinisikan input form
frame
Mendefinisikan frame
frameset
Mendefinisikan attribut halaman yang akan menggunakan frame
h1 … h6
Ukuran font
head
Mendefinisikan head document.
hr
Membuat garis horizontal
html
Bararti dokumen html
i
Membuat teks miring
img
Image, imagemap atau an animation
input
Mendefinisikan input field pada form
li
Membuat bullet point atau baris baru pada list (berpasangan dengan tag


, ,
    and
      )
map
Mendefinisikan client-side map
marquee
Membuat scrolling teks (teks berjalan) – hanya pada MS IE
nobr
Mencegah ganti baris pada teks atau images
noframes
Jika browser user tidak mendukung frame
ol
Mendefinisikan awal dan akhir list
p
Ganti paragraf
pre
Membuat teks dengan ukuran huruf yg sama
script
Mendefinisikan awal script
table
Membuat tabel
td
Kolom pada tabel
title
Mendefinisikan title
tr
Baris pada tabel
u
Membuat teks bergaris bawah

Seluruh tag yang ada, baik yang ada didalam tabel diatas maupun yang tidak ada, semuanya berada didalam tanda kurung <...>

Pengenalan HTML

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi untuk menghasilkan suatu tampilan grafis yang ditujukann kepada web browser dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
Pada dasarnya elemen HTML ada 2 kategori:
  1. Elemen <head> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
  2. Elemen <body> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser.
Beberapa peraturan dalam menulis tag html adalah:
  1. Dimulai dengan tanda <....> dan diakhiri dengan tanda </.....>
  2. Tidak Case Sensitive atau tidak membedakan huruf kecil dan huruf besar dalam penulisannya.
  3. Selalu diawali dengan <html> dan diakhiri dengan </html>
Itu adalah beberapa penulisan dasar. Lalu, dimana kita bisa menulis tag html tersebut? Ada banyak aplikasi untuk itu, yaitu Notepad(paling sederhana), Notepad ++, dreamweaver, dll.

Nah, saya rasa sudah cukup dengan perkenalan html nya. di postingan berikutnya akan saya beri beberapa buah tag html yang biasa saya gunakan.