Zhoma: 2010

Minggu, 19 Desember 2010

Jumat, 12 November 2010

Tabel HTML

Table <table>

Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan

mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>.

Tag <TABLE> mewakili beberapa bagian penting :

• <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table

akan terletak di luar table di bagian atas atau di bagian bawah.

• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau

bagian paling kiri dari table.

• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.

Contoh :

<html>

<head>

<title>tabel 1</title>

</head>

<body>

<center><h1>TABEL</h1></center>

<p>

<tr>

<td>Tabel dengan single cell</td>

<td>Tabel dengan dua cell</td>

<td>Tabel dengan tiga cell</td>

<td>Tabel dengan empat cell</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Lihat Hasilnya Di bawah ini..

1. Border Tabel

Contoh :

<html>

<head>

<title>tabel 1</title>

</head>

<body>

<h4>Dengan border normal :</h4>

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

<h4>Dengan border tebal:</h4>

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

<h4>Dengan border sangat tebal :</h4>

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

</body>

</html>

Lihat Hasilnya Di bawah ini..

2. Tabel Tanpa Border

Contoh :

<html>

<head>

<title>tabel 2</title>

</head>

<body>

<h4>Tabel border :</h4>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>Tabel tanpa border :</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Lihat Hasilnya Di bawah ini..

3. Tabel dengan Caption

Contoh :

<html>

<head>

<title>tabel 3</title>

</head>

<body>

<h4>Tabel dengan Caption :</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Sabtu, 23 Oktober 2010

Tag <br> di gunakan untuk memulai baris baru pada document HTML. Kode <br> sendiri kepanjangan dari break row, tag ini fungsinya mirip dengan carriage return. Penulisannya bisa dengan <br>, tapi di blogger biasanya ada masalah dan meminta penulisan kode <br />, jadi

ditutup dengan tanda slash. Bahkan di blogger setiap ganti baris selalu menggunakan kode ini

secara otomatis, khususnya apabila di pengaturannya diatur seperti itu.

Contoh:

<html>

<head>

<title>Contoh Paragraf</title>

Memotong<br>

baris<br>

dalam suatu<br>

paragraf,<br>

gunakan tag br.

</head>

<body>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Font

Kode ini untuk pemformatan text, dengan tag <font> kita bisa menentukan format tampilan

font dalam document HTML seperti color, size, style dan lainya.

Contoh:

<html>

<head>

<title>Contoh Formating Font</title>

</head>

<body>

Formating Font 1</font>

<p>

Belajar memformat font.

</font>

</p>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Color

Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberi

warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin

digunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB.

Contoh:

<HTML>

<HEAD>

<TITTLE>Warna font</TITTLE>

</HEAD>

<BODY>

<P><FONT COLOR="RED"> Arsenal, Juara piala FA</FONT></P>

<P><FONT COLOR="BLUE"> Arsenal, The Best</FONT></P>

<P><FONT COLOR="GREEN"> Arsenal, Top Bgt</FONT></P>

</FONT>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Selasa, 19 Oktober 2010

Elemen Dasar HTML

Paragraf <p>…</p>

Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri

dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut

ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata

tengah, dan RIGHT untuk rata kanan:

<HTML>

<HEAD>

<TITLE>Contoh Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="center"> Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Heading <h1>…</h1>

Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.

Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web.

HTML menyediakan enam tingkat heading.

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY>

<H1>Heading level1</H1>

<H2>Heading level2</H2>

<H3>Heading level3</H3>

<H4>Heading level4</H4>

<H5>Heading level5</H5>

<H6>Heading level6</H6>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Selasa, 12 Oktober 2010

Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

1. <HTML>
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML>
</HTML>

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah
document HTML.

2. <HEAD>
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian
ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Contoh :
<HTML>
<HEAD><TITLE> </TITLE>
</HEAD>
</HTML>

3.<TITLE>
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :
<HTML>
<HEAD>

<TITLE>Belajar HTML</TITLE>
</HEAD>
</HTML>

4. <BODY>
Document body di gunakan untuk menampilkan text, image link dan semua yang akan
di tampilkan pada web page.
Contoh :
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.</BODY>

Atribut :

BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF"> Saya Suka Belajar HTML!!!!</BODY>

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka
digunakan tag <TITTLE> dan </TITTLE>. Judul ini akan terlihat pada sudut kiri atas pada
halaman web. Tag <TITTLE > akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat
halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode
html di bawah ini, kemudian simpanlah di C:\My Documents\hello.html. Ingat! Nama filenya
adalah hello.htm atau hello.htm, bukanlah hello.htm.txt atau hello.txt.

<HTML>

<HEAD>

<TITTLE>Selamat datang pada HomePage Saya</TITTLE>

</HEAD>

<BODY>

Halo semua, Bagaimana kabar Anda sekalian?

3

</BODY>

</HTML>

Kemudian, bukalah Mozilla Firefox dan pilih menu: File Open, dan bukalah C:\My
Documents\hello.html. Maka akan terlihat sebagai berikut : 

Contoh 1 :

<HTML>

 <HEAD>

<TITLE>Halaman pembuka</TITLE>

</HEAD>

 <BODY>

               Belajar bahasa pemrograman web ternyata mudah juga :)

</BODY> 

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Senin, 11 Oktober 2010

Novak Djokovic

Sebelum...

Sesudah

Jumat, 24 September 2010

Design Sport

Sebelum

Sesudah

Rabu, 22 September 2010

Design Olahraga Bulutangkis

Sebelum

Sesudah

Desain Grafis Sport

Sebelum

Sesudah

Menyelesaikan Rubik Cube 2x2x2

Langkah Pertama: Top Layer
Nah, dari posisi teracak seperti ini, apa yang pertama kali harus dilakukan? Yang harus dilakukan adalah menyelesaikan layer yang paling atas, tidak usah pedulikan bawahnya terlebih dahulu. Yang penting yang atas selesai, langkah ini tak perlu diajarkan, terlalu mudah soalnya.

Langkah kedua: posisikan sudutnya
Posisikan saja, warna terbalik dan terbolak juga tidak masalah. Kali ini saya cukup berbaik hati memberi algoritmanya. Pada gambar di bawah ini, saya anggap merah sebagai front, sedangkan yang kuning berbrintil merah dan biru adalah sudut yang telah benar posisinya (abaikan warnanya). Kalau belum ada yang posisinya benar, putar saja down layer sampai ketemu salah satu dari dua kasus di bawah ini.
Kasus 1