Materi aplikasi IT 1
APLIKASI IT I APLIKASI IT I
APLIKASI IT I APLIKASI IT I TEKNIK INFORMATIKA TEKNIK INFORMATIKA 2009 2009
A A It It Apa Apa Itu Itu
INTERNET?????
INTERNET????? IndomieTelor Kornet?? Jaringan Komputer Jenis Jaringan Komputer y
LAN (Lokal Area Network): Jenis komunikasi menggunakan media Kabel.
y
WAN (Wide Area Network) : Jenis Komunikasi menggunakan saluran telepon, gelombang mikro maupun satelit. Perangkat Akses Internet y
Hardware
Modem : internal atau eksternal menghubungkan antara komputer dengan jalur komunikasi. dengan jalur komunikasi
Saluran komunikasi : media yang digunakan untuk menerima atau mengirim data dari dan ke internet. y
Software
Software untuk mengakses internet seperti web browser ( Internet Mozilla, Netscape, Mosaic dll), software Email (Microsoft Outlook, mail), software pengirim/penerima data ( Cute FTP, BFTP dll) p g p y
Penyedia Akses
Untuk dapat mengakses ke internet kita harus menggunakan suatu provider penyedia jasa internet (Centrin, Telkomnet Instan, Indonet, Wasantara dll). y Web browser adalah suatu perangkat lunak yang digunakan untuk menampilkan halaman halaman digunakan untuk menampilkan halaman-halaman web (website) yang berada di internet. y
Jenis web browser yang sering dipakai adalah :
1. Internet Explorer
2. Netscape p
3. Mozilla
4. Opera
5. Flock HTML (Hyper Text Markup Language) y
Bahasa Pengkodean untuk menghasilkan dokumen- dokumen hypertext untuk digunakan di World Wide Web. y
HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser Program Editor HTML y
Editor yang digunakan untuk mengetik, mengedit atau menyimpan Dokumen HTML y
Editor untuk memdesain suatu web dibagi 2 yaitu : 1.
Yang bersifat text murni : Notepad dan Ultra Edit 2.
2 Yang WYSIWYG (Graphic) Netscape dan Front Yang WYSIWYG (Graphic) : Netscape dan Front Page.
Struktur Dasar HTML y
Tag – tag Dasar penulisan HTML yaitu : <HTML> HTML <HEAD> <TITLE> Judul Dokumen </TITLE> <HEAD> <BODY> O Data – data yang ingin ditampilkan </BODY> </HTML> Elemen dan Tag HTML y
Elemen : y
Elemen <HEAD> : informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya dengan dokumen lain. l k b d k y
Elemen <BODY> : menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel dll. y
Tag : y Kode khusus dalam HTML. Ditandai dengan <>. y
Tag Awal dinyatakan dalam bentuk <namaTag> y
Tag Akhir dinyatakan dalam bentuk </namaTag> Tag Akhir dinyatakan dalam bentuk </namaTag> ContohTag : <namaTag> Teks yang akan ditampilkan </namaTag>
Desain HTML y
Contoh Desain HTML <HTML> <HEAD> <TITLE>Program Pertama</TITLE> </HEAD> <BODY>
<B>INI PROGRAM PERTAMA SAYA</B> <B>INI PROGRAM PERTAMA SAYA</B> </BODY> </HTML> Hasil di Web Browser
y Elemen dasar yang menyediakan Informasi berupa teks : y
PARAGRAPH : untuk membuat suatu PARAGRAPH : untuk membuat suatu Paragraf y
BLOCKQUOTE : untuk membuat kutipan teks y
PREFORMATTED TEXT : untuk menampilkan teks seperti yang dituliskan menampilkan teks seperti yang dituliskan y
DIVIDER : untuk mengelompokkan suatu teks tertentu PARAGRAF y
Elemen <p>…..</p> untuk menandai teks sebagai suatu paragraf y
Atribut Paragraf : Atribut Argumen Keterangan Align Left Right
Center Digunakan untuk perataan suatu paragraf, apakah
Justify p g , p rata kiri,kanan, tengah ataupun rata kiri/kanan (justify)
Contoh kode HTML untuk Paragraf <html> <body> y <p>Paragraf satu.</p> <p>Paragraf dua.</p> <p>Paragraf tiga.</p> <p>Elemen paragraf didefinisikan dengan menggunakan tag P.</p> tag P.</p> </body> </html>
Hasilnya y
Contoh kode HTML dengan tambahan atribut : <html> <body> <p align="right">Paragraf dengan perataan kanan. </p> <p align="center">Paragraf dengan rata tengah.</p> <p align="left">Paragraf tiga.</p> <p align="justify">Paragraf dengan perataan justify.</p> </body> </html> </html>
Hasilnya Format Penyimpanan File HTML y
Karena HTML adalah dokumen yang ditampilkan di dalam Browser, maka format yang dikenal adalah .HTML , y g atau .HTM y
Sehingga file yang disimpan harus memiliki Format .html y
Contoh : Utama.html Praktek Pertemuan ke-1 y
Langkah awal pembuatan file HTML
1. Buat Folder baru di Data Mahasiswa dengan nama kelas g anda/NIM. Contoh IF-1/10103082
2. Buat File baru file HTML di Ultra Edit dengan cara : File – New atau klik Ctrl + N
3. Lalu ketikan tag di bawah ini :
4. Simpan dengan nama Praktek1.html p g
5. Untuk melihat hasilnya : Window – Show File in Browser <html> <head> <title>Latihan Pertama</title> </head> <body> <b> <p align="center">SELAMAT DATANG DI UNIKOM</p> </b> b <br> <p align="justify">Halo, Nama Saya Rani Susanto, saya senang sekali bisa masuk UNIKOM, apalagi bisa masuk ke Jurusan Teknik Informatika UNIKOM. Mudah - mudahan saya bisa menjadi yang <i> the best </i> di Jurusan ini. Teknik Informatika atau yang disingkat menjadi IF, adalah salah satu jurusan terbaik yang dimiliki oleh UNIKOM dan saya bangga bisa menjadi bagian di dalamnya.</p> <hr> <p align="right">Jurusan Lain yang ada di UNIKOM <br>
1.Teknik Komputer <br>
2. Manajemen Komputer <br> </p> </body> </html>
Hasilnya
MEMFORMAT HTML
Pertemuan 2 Heading <H1>Heading Level 1</H1> <H2>Heading Level 2</H2> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <H4>Heading Level 4</H4> <H5>Heading Level 5</H5> <H6>Heading Level 6</H6> Phisical Style
Suatu jenis format yang diberikan pada teks tanpa tergantung pada jenis dari elemen dasar teks tersebut.
Elemen Fungsi <B>…………..</B> <I>……………</I> <U>…………..</U> <S>……………</S> <BLINK>…….</BLINK> <TT> <TT>
Untuk menebalkan teks Untuk membuat teks terlihat miring
Untuk menggarisbawahi teks
Untuk memberikan coretan pada teks Membuat teks berkedip (khusus netscape) M ilk t k d l f t <TT>……..…..<TT> <BIG>………<BIG><SMALL>…..<SMALL> <SUB>………..<SUB> <SUP>……..…<SUP> Menampilkan teks dalam format typewriter
Untuk membesarkan teks
Untuk mengecilkan teks Membuat teks subscriptMembuat teks superscript
Contoh Phisical Style
Font
Ukuran Teks Untuk mengatur ukuran suatu teks, elemen FONT Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan nilai dari 1 sampai
7. Contoh :
<font size=1>ukuran teks=1</font> <font size=2>ukuran teks=2</font> <font size=3>ukuran teks=3</font> <font size=4>ukuran teks=4</font> <font size=4>ukuran teks=4</font> <font size=5>ukuran teks=5</font> <font size=6>ukuran teks=6</font> <font size=7>ukuran teks=7</font> Contoh Penggunaan Font Size
Mengubah Warna Teks
Atribut COLOR pada elemen FONT. Pendefinisian warna dilakukan dengan dua cara yaitu, melalui warna dilak kan dengan d a cara ait melal i nama warna atau menggunakan nilai RGB warna.
Penggunaan pada HTML
<font color =”red”>teks berwarna merah</font> <font color=”#8A2BE2”>Teks berwarna Blueviolet</font> Contoh Font Color
Mengubah Jenis Font
Menggunakan atribut FACE pada elemen FONT.
Jenis – jenis font yaitu TIMES NEW ROMAN, ARIAL, Jenis jenis font ait TIMES NEW ROMAN ARIAL COMIC SANS MS, COURIER NEW dan lain sebagainya.
Contoh Penggunaan Jenis Font
<Font Face=”arial”>Font jenis Arial</font> <Font Face=”Comic San MS”> Jenis Font Comic San MS</font> Contoh Font Face
Contoh Penggabungan : <font size=”6” color=”green” face=”arial”>Gabungan beberapa atribut pada suatu teks</font> Ganti Baris dan Garis Horizontal
Elemen untuk ganti baris adalah <BR> yang berguna untuk menuliskan teks pada baris berg na nt k men liskan teks pada baris berikutnya. Contoh :
<Font Face=”arial”>Font jenis Arial</font> <br> <Font Face=”Comic San MS”> Jenis Font Comic San MS</font> Garis Horizontal
Elemen untuk membuat garis horizontal adalah <HR>. Beberapa atribut yang digunakan yaitu : <HR> Beberapa atrib t ang dig nakan ait Contoh penggunaan pada HTML <hr align="left" width="500" size="10" noshade> <hr> <hr align="center" width="400" size="7" color="red"> <hr align="right" width="500" size="20" noshade color="green"> Latihan
Buatlah perintah HTML di bawah ini
Simpanlah dengan nama Praktek2.html <body> </head> <title>Memformat HTML</title> <head> <html> <Font size=6>U</font>nikom adalah universitas Komputer pertama di <b>Bandung</b>. Dengan <i>basic</i> IT yang dimiliki menuntut para <hr align="center" width="400" size="7" color="red"> <h1 align="center">UNIKOM</H1> agar bisa mengikuti perkembangan Teknologi <u>Informasi</u> yang ada, khususnya di Indonesia umumnya di Dunia. <br> mahasiswa dan lain sebagainya
3. Teknik Komputer <br> 2. Manajemen Informatika <br> 1. Teknik Informatika <br> <font color=green>Universitas Komputer Indonesia memberikan pilihan jurusan yang dapat dipilih oleh mahasiswanya, yaitu :</font><br> <i>Quality is Our Tradision</i> <br> <p align="right"><b>UNIKOM</b> <font color="red" face="comic sans ms"> <br> </html> </body> </font> </p>
Sehingga hasilnya
Pertemuan ‐3
Beberapa jenis List (Daftar) p j ( ) Ordered list/numbered list (daftar berurut/daftar
dengan nomor atau abjad)
Unordered list/bulleted list (daftar tidak
berurut/menggunakan bullet)
Menu list (daftar menu) Menu list (daftar menu)
Directory list
Definition list (glossary/daftar istilah)
Suatu daftar dimana item‐item yang ada di y g dalam daftar tersebut memiliki nomor secara berurut.
Tag : <ol>
<li> Item ke ‐1 </li> <li> Item ke 1 </li> <li> Item ke ‐2 </li> <li> Item ke ‐n </li> </ol>
<ol>
<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li>
</ol> / l
<ol type=“A”> yp <li> Apel </li> <li> Mangga </li>
<li> Pisang </li>
<li> Jeruk </li>
</ol><ol type=“a”> <ol type a > <li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
<ol type I > <ol type=“I”> <li> Apel </li> <li> Mangga </li> <li> Pisang </li>
Jeruk </li> <li> </ol> <ol type i > <ol type=“i”> <li> Apel </li>
<li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
Suatu daftar dimana urutan tidak diutamakan, jadi item‐item dalam daftar bisa muncul dalam sembarang urutan.
Tag : <ul>
<li> Item ke ‐1 </li> <li> Item ke 1 </li> <li> Item ke ‐2 </li> <li> Item ke ‐n </li> </ul>
Kode HTML nya
<ul type= disc > <ul type "disc"> <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
<ul type= circle > <ul type “circle"> <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
<ul type= square > <ul type “square"> <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
<html> <body> <ol> <ol> <li> Kopi </li> <ul type="disc"> <li>Arabika</li> <li>Capucino</li> </ul> <li> Teh </li> <ul type="circle"> <li>Hijau</li> <li>Hitam</li> li i li </ul> </ol> </body> </html>
Tag untuk menyusun daftar Istilah : g y
<html> <body> <h4>Contoh List Definisi:</h4> h C t h Li t D fi i i /h <dl>
<dt>HTML</dt> <dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman‐halaman web.</dd>
<dt>Internet Explorer</dt> <dd>Web browser yang merupakan bawaan dari <dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman‐halaman web.</dd>
</dl> </body> </html>
Buatlah Tampilan Web di bawah ini : p
Simpan dengan Nama File : latihan1.html
<html> <body> b d <h4>Contoh Ordered List:</h4> <ol>
<li>Fakultas Teknik dan Ilmu Komputer</li> <li>Fakultas Ekonomi</li> <li>Fakultas Desain</li> <li>Fakultas Hukum</li> <li>Fakultas Hukum</li> <li>Fakultas Sosial Politik</li> </ol>
</body> </html>
<html> <body> <h4>Atribut Pada Unordered List</h4> <ul >
<li>Bandung</li> <li>Jakarta</li> <li>Surabaya</li> li S b /li </ul>
</body> </html>
- - B LOCKQUOTE - P REFORMATTED TEXT S C - S PECIAL C HARACTER
B LOCKQUOTE | Blockquote untuk membuat Kutipan teks. |
Tag : |
Tag : <BLOCKQUOTE> ….. ….. </BLOCKQUOTE>
ONTOH C
<html> <body> <h3>Teknologi Universal Serial Bus (USB)</h3> h3 T k l i U i l S i l B (USB) /h3 <blockquote> Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapa komputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang banyak. <br> Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan dan fungsi teknologi ini Oleh sebab itu bab ini akan memperkenalkan apa yang dimaksud dengan USB dan kegunaannya. </blockquote> <h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134 <h5> </body> </html>
ASILNYA H P REFORMATTED T EXT | Membuat Teks yang dibuat di Editor Ultra Edit sama dengan yang terlihat di Browsernya. sama dengan yang terlihat di Browsernya. |
Tag nya : <PRE> ……. </PRE>
C ONTOH
<html <body> <h3>Contoh Penggunaan Tag PRE</h3> <pre>
Halo nama saya : Rani Halo nama saya : Rani ()“ "() ( @_@ ) (0) (0)
<b>Selamat Datang</b> g Di UNIKOM
Tercinta </pre> </body> </html> H ASILNYA H ASIL JIKA T AG PRE DIHILANGKAN
ARAKTER PESIAL K S | Karakter yang penggunaannya di dalam HTML membutuhkan kode-kode tertentu. membutuhkan kode kode tertentu.
| Tanda < dan > adalah salah satu contoh karakter spesial yang membutuhkan kode tertentu.
| Kode khusus untuk menampilkan karakter disebut Entity y
Karakter Entity y Numerik Entity (menggunakan angka) N ik E tit ( k k ) |
Penulisan Entity : y Diawali tanda & (Ampersand) y Diakhiri tanda ; (Titik koma)
ONTOH ARAKTER PESIAL C K S Nama Entitas Nomor Entitas Hasil Keterangan
&copy; &#169; © Copyright &reg; &#174; ® Registered Trademark &#8482; ; ™ Trademark
&nbsp; &#161; Non-breaking space &amp; &#38; & Ampersand &laquo; &#171; << Left-pointing double angle &raquo; &#187; >> Right-pointing double angle g &quot; &#34; “ Tanda Kutip
&lt; &#60; < Lebih kecil &gt; &#61; > Lebih Besar &times; &#215; × Tanda kali &divide; &#247; ÷ Tanda Bagi L ATIHAN | Buatlah Tampilan Web di bawah ini.
| Format Web agar tampilannya sama
| Format Web agar tampilannya sama. |
Simpan dengan Nama Latihan2.html Menyisipkan Gambar Beberapa jenis file gambar dalam HTML y GIF (G fi GIF (Grafical Interchange Format) (.gif) l I t h F t) ( if) y JPEG (Joint Photographic Expert Image) (.jpg) y PNG( Portable Network Graphic) (.png) y BMP (Bitmap) (.bmp)
Tag : <IMG> Atribut Gambar Elemen Atribut Keterangan
SRC URL Gambar Diisi dengan Alamat yang menuju File Gambar ALT Teks Menentukan tulisan yang akan ditampilkan
(bi (biasanya ditempatkan antara tanda petik). dit tk t t d tik)
Apabila browser tidak dapat menampilkan
gambar untuk alasan tertentu. ALIGN Center | Justify Top, bottom, middle digunakan untuk | Left | Right | menentukan posisi image terhadap teksBaseline | Top Left, Right, Center untuk menentukan posisi | Bottom | image pada dokumen Middle HEIGHT angka Digunakan untuk menentukan ukuran tinggi gambar WIDTH Angka Digunakan untuk menentukan ukuran lebar gambar BORDER Angka Digunakan untuk memberikan bingkai pada gambar
2 Cara untuk memuat Gambar Absolute Path : gambar disimpan dalam folder yang sama dengan halaman Web. Sehingga yang sama dengan halaman Web Sehingga langsung panggil nama file atau alamat web nya.
Contoh : <IMG SRC=“bintang.gif”> <IMG SRC= www.unikom.ac.id/image/logo.jpg >
2 Cara untuk memuat Gambar (2) Relative Path : file gambar di simpan di folder yang berbeda/terpisah dari file folder yang berbeda/terpisah dari file web nya.
Sehingga harus dipanggil dengan lengkap alamatnya. Contoh
<IMG SRC=“/image/bintang.gif”> Contoh
Buka File : Latihan1.html Sisipkan file gambar (gambar bebas) p g (g ) Menyisipkan Latar Belakang Terdapat dua cara penyisipan latar belakang : belakang : y Latar Belakang (Background) Warna y Latar Belakang (Background) Gambar
Background Warna Tag untuk menyisipkan Background warna : warna : <BODY BGCOLOR=“Warna”> Contoh <BODY BGCOLOR=“Blue”>
Contoh Background Gambar
Tag untuk menyisipkan Gambar : <BODY BACKGROUND=“Nama File”> Contoh <body background=“wallpaper.jpg”> Contoh Contoh (dari file Latihan1.html)
Marquee Tag untuk membuat objek bergerak.
Tag : <MARQUEE> ……. </MARQUEE>
Atribut dalam Marquee Atribut Argumen Fungsi
Left Arah pergerakan ke Kiri (dari kanan – kiri) Direction g ( ) Right Arah pergerakan ke Kanan (dari kiri – kanan)
Up Arah pergerakan ke Atas (dari bawah – atas) Down Arah pergerakan ke Bawah (dari atas ke bawah) Behavior Alternate Bentuk pergerakan bolak – balik
Scroll Bentuk pergerakan scroll (seperti marquee biasa) Slide Bentuk pergerakan slide (setelah bergerak lalu diam ) ditempat)
Contoh : <marquee direction=“up”>Teknik Informatika</marquee> <marquee direction=“right” behavior=“alternate”>UNIKOM</marquee) Latihan Buat halaman web di bawah ini.
Sisipkan gambar dan background gambar (gambar bebas)
Simpan dengan nama Latihan2.html Link y
Untuk menghubungkan halaman g g ‐halaman web, situs , yang lain atau bagian‐bagian tertentu pada suatu halaman web. y
Tag : <A> ……………………… </A> Atribut Link Atribut Argumen Keterangan
HREF URL/Halaman Web Diisi dengan nama halaman web atau
nama URL yang akan di link kan.
NAME #namabagian Digunakan untuk link dalam satu dokumen web
Penulisannya : Penulisannya : <A HREF=”url atau hal.web lain”>teks ditandai dengan link </A> <A HREF=”#bagian dari halaman web”> teks</A> (sebagai penghubung) <A NAME=”bagian dari halaman web”> (bagian yang dihubungkan) <html> <body>
<a href=“Latihan.html”>Latihan Per‐1</a> Untuk menuju ke Latihan Pertemuan Pertama <br> <a href=“Latihan1.html”>Latihan Per‐2</a> Untuk menuju ke Latihan Pertemuan Kedua </body> y
</html>
<html> <body> <center><h1>Daftar Isi</h1></center> <p> <h3> <p align="justified"><a href="#A1">Kata Pengantar</a>................ 1 <br><a br a href #A2 Daftar Isi /a .......................... 2 href="#A2">Daftar Isi</a>.......................... 2 <br><a href="#A3">Bab 1</a>................................ 3 <br><br> </h3> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h2><a name="A1">Kata Pengantar</a></h2> <b>Kata Pengantar</b> berisi tentang Pengantar <br> <h2><a h name="A2">Daftar Isi</a></h2> "A " D f I i / /h <b>Daftar Isi</b> berisi tentang Daftar isi <br> <h2><a name="A3">Bab 1</a></h2> <b>Bab 1</b> berisi tentang Pendahuluan </body> </html>
Latihan y
Buatlah sebuah halaman Web, Buatlah sebuah halaman Web, beri nama File : beri nama File : index.html y Buat 3
Buah menu Pilihan yaitu, Biodata, Riwayat Pendidikan dan Hobby y
Simpan Biodata dengan nama File biodata.html y Simpan Riwayat Pendidikan dengan nama File Simpan Riwayat Pendidikan dengan nama File
pendidikan.html y
Simpan Hobby dengan nama File hobby.html y Sehingga tampilannya seperti :
QUIS APLIKASI IT ‐1 (Kanan)
Buatlah Tampilan Halaman Web di bawah ini!
a. Berikan latar belakang warna
b. Untuk Judul tambahkan efek marquee dengan arah pergerakan bolak balik c.
Berikan gambar yang sesuai (point Bonus)
d. Simpan dengan nama file NIM‐Nama Anda‐Kanan.html
Buatlah Tampilan Halaman Web di bawah ini!
QUIS APLIKASI IT ‐1 (Kiri)
a. Berikan latar belakang warna b.
Untuk Judul tambahkan efek marquee dengan arah pergerakan bolak balik
c. Berikan gambar yang sesuai (point Bonus) d.
Simpan dengan nama file NIM‐Nama Anda‐Kiri.html
TABEL Tag Pembuat an Tabel ELEM EN KEGU N AAN
TABLE TABLE Tag Utam a <TABLE>…</ TABLE> Tag Utam a <TABLE> </ TABLE> TR Baris Tabel <TR>… </ TR> TD Data Tabel <TD>… </ TD> TH J udul Tabel (H eader) <TH >…</ TH >
J udul yan g terletak di bawah tabel CAPTION
<CAPTION>…</ CAPTION>
Tag Ut ama Tag Ut ama <TABLE> <TR> <TD> …. </ TD> </ TR> </ TABLE> At ribut dal am t abel Cont oh Tabel Sederhana
<table> <tr> <td>Tabel 1</ td> <td>Tabel 2</ td>
</ tr> </ table> </ table> Cont oh Tabel Sederhana dengan Garis <table border=1> <tr>
<td>Tabel 1</ td> <td>Tabel 2</ td> </ tr> </ table> </ table>
Tabel 2 Dimensi
<table border=3> <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 1</ td> <td>Baris 2 Kolom 2</ td>
</ tr> </ table>
Judul Tabel dengan Capt ion
<table border=3> <caption ><b>J udul Tabel</ b></ caption > <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>
Judul Tabel dengan Header
<table border=3> <caption ><b>J udul Tabel</ b></ caption > <tr> <th>Baris 1 Kolom 1</ th>
<th>Baris 1 Kolom 2</ th> </ tr> <tr> <td>Baris 2 Kolom 1</ td>
<td>Baris 2 Kolom 2</ td> </ tr> </ table>
Menggabungkan Baris dan kol om
Atribut yan g digun akan un tuk m en ggabun gkan • Kolom adalah COLSPAN Atribut yan g digun akan un tuk m en ggabun gkan • baris adalah ROWSPAN