NOTEPAD

Cara membuat tabel pada notepad

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<tr>

<td>Cell 1 - Baris 1 Kolom 1</td>

<td>Cell 2 - Baris 1 Kolom 2</td>

</tr>

<tr>

<td>Cell 3 - Baris 2 Kolom 1</td>

<td>Cell 4 - Baris 2 Kolom 2</td>

</tr>

<tr>

<td>Cell 5 - Baris 3 Kolom 1</td>

<td>Cell 6 - Baris 3 Kolom 2</td>

</tr>

</table>

Hasil:

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<tr>

<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>

<td>Baris 1 Kolom 1</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>

Hasil:

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<tr>

<td colspan="2">Gabungan Kolom 1&2 pada Baris 1</td>

</tr>

<tr>

<td style="width:50%">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>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<tr>

<td style="width:50%" rowspan="2">Gabungan Baris 1&2 pada Kolom 1</td>

<td>Baris 1 Kolom 2</td>

</tr>

<tr>

<td>Baris 2 Kolom 2</td>

</tr>

<tr>

<td>Baris 3 Kolom 1</td>

<td>Baris 3 Kolom 2</td>

</tr>

</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
Gabungan Baris 1&2 pada Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabe l

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<tr>

<td style="width:50%;">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>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<tr>

<td style="width:50%">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>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.

Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<caption>Disini adalah titel tabel ini</caption>

<tr>

<th style="width:50%;">Header Kolom 1</th>

<th>Header Kolom 2</th>

</tr>

<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>

Hasil:

Disini adalah titel tabel ini
Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.

Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<tr>

<th style="background:red;width:50%;">Header Kolom 1</th>

<th style="background:red;">Header Kolom 2</th>

</tr>

<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>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.

Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

...

</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<tr>

<th style="background:red;width:50%;">Header Kolom 1</th>

<th style="background:red;">Header Kolom 2</th>

</tr>

<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>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Kode Warna Pada Notepad

#F5F5DC
Beige

#FFE4C4
Bisque

#000000
Black

#FFEBCD
Blanchedalmond

#0000FF
Blue

#8A2BE2
Blueviolet

#A52A2A
Brown

#5F9EAD
Cadetblue

#7FFF00
Chartreuse

#D2691E
Chocolate

#FF7F50
Coral

#64950
Cornflowerblue

#FFF8DC
Cornsilk

#DC143C
Crimson

#00008B
Darkblue

#008B8B
Darkcyan

#B8860B
Darkgoldenrod

#A9A9A9
Darkgray

#006400
Darkgreen

#8B008B
Darkmagenta

#BDB76B
Darkkhaki

#556B2F
Darkolivegreen

#FF8C00
Darkorange

#9932CC
Darkorchid

#8B0000
Darkred

#E9967A
Darksalmon

#8FBC8B
Darkseagreen

#483D8B
Darkslateblue

#2F4F4F
Darkslategray

#00CED1
Darkturquoise

#9400D3
Darkviolet

#FF1493
Deeppink

#00BFFF
Deepskyblue

#696969
Dimgray

#1E90FF
Dodgerblue

#B22222
Firebrick

#FFFAF0
Floralwhite

#228B22
Forestgreen

#FF00FF
Fuchsia

#DCDCDC
Gainsboro

#F8F8FF
Ghostwhite

#FFD700
Gold

#DAA520
Goldenrod

#808080
Gray

#008000
Green

#ADFF2F
Greenyellow

#F0FFF0
Honeydew

#FF69B4
Hotpink

#CD5C5C
Indianred

#4B0082
Indigo

#FFFFF0
Ivory

#F0E68C
Khaki

#E6E6FA
Lavender

#FFF0F5
Lavenderblush

#7CFC00
Lawngreen

#FFFACD
Lemonchiffon

#ADE8E6
Lightblue

#F08080
Lightcoral

#E0FFFF
Lightcyan

#FAFAD2
Lightgoldenrodyellow

#90EE90
Lightgreen

#D3D3D3
Lightgray

#FFB6C1
Lightpink

#FFA072
Lightsalmon

#20B2AA
Lightseagreen

#87CEFA
Lightskyblue

#778899
Lightslategray

#B0C4DE
Lightsteelblue

#FFFFE0
Lightyellow

#00FF00
Lime

#32CD32
Limegreen

#FAF0E6
Linen

#FF00FF
Magenta

#800000
Maroon

#66CDAA
Mediumaquamarine

#0000CD
Mediumblue

#BA55D3
Mediumorchid

#9370DB
Mediumpurple

#3CB371
Mediumseagreen

#7B68EE
Mediumslateblue

#00FA9A
Mediumspringgreen

#48D1CC
Mediumturquoise

#C71585
Mediumvioletred

#191970
Midnightblue

#F5FFFA
Mintcream

#FFE4E1
Mistyrose

#FFE4E1
Moccasin

#FFDEAD
Navajowhite

#000080
Navy

#FDF5E6
Oldlace

#808000
Olive

#6B8E23
Olivedrab

#FFA500
Orange

#FF100%0
Orangered

#DA70D6
Orchid

#EEE8AA
Palegoldenrod

#98FB98
Palgreen

#AFEEEE
Paleturquoise

#DB7093
Palevioletred

#FFEFD5
Papayawhip

#FFDAB9
Peachpuff

#CD853F
Peru

#FFC0CB
Pink

#DDA0DD
Plum

#800080
Purple

#FF0000
Red

#BC8F8F
Rosybrown

#4169E1
Royalblue

#8B4513
Saddlebrown

#FA8072
Salmon

#F4A460
Sandybrown

#2E8B57
Seagreen

#FFF5EE
Seashell

#A0522D
Sienna

#C0C0C0
Silver

#87CEEB
Skyblue

#708090
Slategray

#FFFAFA
Snow

#00FF7F
Springgreen

#4682B4
Steelblue

#D2B48C
Tan

#008080
Teal

#D8BFD8
Thistle

#FF6347
Tomato

#40E0D0
Turquoise

#EE82EE
Violet

#F5DEB3
Wheat

#FFFFFF
White

#F5F5F5
Whitesmoke

#FFFF00
Yellow

#9ACD32
Yellowgreen

Cara Membuat Background Pada Notepad

Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:

<html>

<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>

<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>

</body>

</html>

Hasil :

Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:

Selanjutnya membuat latar belakang dengan grafik atau gambar.

Pertama anda harus punya gambar yang ber-extention .gif, .jpg atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg

<html>

<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">

<p><font face="Verdana" size="4" color="black">Hai... Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>

Biar bagaimanapun anda diwajibkan harus menyukainya...</font></p>

</body>

</html>

hasil

Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:

<html>

<p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p>

<p>Mudah-mudahan yang punya website ngamuk sekalian deh...siapa takut!!</p>

</body>

</html>

NOTEPAD

Selasa, 21 Mei 2013

TIPS-TIPS MENGENAI NOTEPAD