1. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 1
PENGENALAN HTML
WWW adalah kependekan dari Worl Wide Web atau lebih dikenal web. Web adalah layanan yang didapat oleh pemakai komputer apabila komputernya tersambung dengan internet.
Cara kerja WWW adalah :
Pertama, informasi yang yang dibuat disimpan dalam sebuah dokumen web pages pada sebuah tempat penyimpanan yaitu harddisk.
Dokumen web yang disimpan dalam sebuah harddisk pada sebuah komputer dapat disebut dengan web server apabila komputer yang dimaksud telah dilengkapi denagn dengan web server seperti Iis, PWS, atau Aphace Server. Dalam hal ini komputer bertugas sebagai Server sekaligus menyimpan informasi “Reply” pada komputer Server.
Komputer yang bertugas sebagai Client atau Web Client membaca informasi yang terdapat pada web pages melalui sebuah jaringan internet /intranet dengan mengambil “get” informasi yang tersimpan pada komputer yang bertugas sebagai Server.
Computer Web Client menampilkan halaman web dengan menggunakan sebuah program khusus, yaitu web browser.
Browser Web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman web yang tersimpan dalam komputer. Dengan menerapkan GUI(Grafik User Interface), maka para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat di dalam internet.
HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakan dalam dokumen web. Dokumen HTML adalah sebuah sebuah dokumen teks murni yang dapat dibuat dengan text editor web seperti Frontpage, Dreamweaver, Notepad, Wordpad, Kwrite, Microsoft Word. Kemudian dieksekusi oleh sebuah web browser seperti Internet Explorer, Mozila, Opera, Netscape Navigator.
HTML merupakan salah satu standar varian dari SGML (Standar Generalized Markup Language), yaitu sebuah standarisasi untuk pertukaran dokumen secara elektronik yang telah ditetapkan oleh international Organization For Standardization(ISO).
Istilah – istilah yang sering digunakan dalam pemrograman web antara lain:
Internet(International Networking) artinya jaringan komputer berskala international/globalyang dapat membuat masing2 komputer salling berkomunikasi.
Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa Web Server yang diperutukan organisasi atau perusahaan, dan digunakan sebagai sarana berkomunikasi antara komputer dalam organisasi tersebut.
TCP/IP(Transmission Control Protokol/Internet Protokol) artinya ptokol yang terdiri dari sub protokol yang beropersai pada lapisan yang berbeda. Ini merupakan protokol standar internetProtokol ini memberikan nomor unix pada setiap komputer yang terkoneksi.
URL(Uniform Resource Locators)artinya sebuah alamat didalam internet yang terdiri atas 2 bagian. Bagian pertama adalah pengenal protokol dan bagian kedua adalah pengenal domain.
HTTP(HyperText Markup Language) artinya protokol yang berfungsi untuk mendefinisikan dan menjelaskan bagaimana server dan client berinteraksi dalam mengirim dan menerima dokumen web.
FTP(File Transfer Protokol) artinya sebuah protokol yang dipergunakan untuk mengirim berkas diantara dua komputer.
2. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 2
Untuk dokumen yang disimpan dengan menggunakan format HTML, maka setiap dokumen yang disimpan harus ditambahkan sebuah akhiran .html/.htm. Karena pada dasarnya tiap dokumen html akan dieksekusi pada sebuah browser yang didalamnya dapat mengenali extention .htm/.html.
Tag html :
Tag atau elemen terdiri dari dua macam yaitu Container Tag dan Stand Alone Tag. Container Tag menandai suatu bagian dari dokumen diawal dan diakhir. Sedangkan Stand Alone Tag tidak memerlukan tanda awal dan akhir.
Secara utuh struktur dokumen dan elemen pendukungnya dapat ditulis sebagai berikut:
<html>
<head>
<title>…..isi dari title…..</title>
</head>
<body>
….. isi /informasi body yang akan
ditampilkan pada browser web…..
</body>
</html>
TAG <BODY>
Tag ini memerintahkan browser untuk menampilkan semua elemen yang berada dalam tag <body>.
Atributnya:
Alink=”warna” warna link(aktif)
background=”nama_file/url” berupa image
bgcolor=”warna” berupa warna
link=”warna” warna link(umum)
text=”nama warna” warna text
vlink=”nama warna” warna link(sudah dikunjungi)
TAG UTAMA HTML
Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html karena pada dasarnya html merupakan teks murni, artinya dokumen html tidak akan memiliki keiistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser hanya dapat mengeksekusi sebuah dokumen html apabila didalam dokumen tersebut telah dilengkapai dengan tag-tag dasar html yang meliputi <html>, <head>, <title>, <body>.
Tag utama html adalah tag yang digunakan untuk memanipulasi dokumen html, terdiri dari:
1. Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading memiliki 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6.
Masing2 bilangan berfungsi untuk mewakili ukuran terbesar(H1) dan terkecil(h6).
Sintaksnya:
<hn[properti]>……………..</Hn>
3. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 3
ket:
n adalah bilangan yang terdiri dari 1 sampai dengan 6.
properti adalah kemampuan tambahan yang dimiliki tag heading.
Properti align adalah pengaturan letak heading
2. Paragraf
Sintaks:
<p[properti]>…………….</p>
ket:
properti align adalah pengaturan letak paragraf(center, left, right, dan justify).
3. Font
Tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam dokumen.Sintaksnya:
<font[properti]>…………….</font>
properti face adalah bentuk tulisan dan nama huruf
size adalah ukuran huruf
color adalah warna huruf
4. Break line
Tag yang digunakan untuk memotong kalimat didalam dokumen html.
Sintaksnya:
……kalimat……<br>……….kalimat………….<br>
5. Horizontal line
Tag yang digunakan untuk pemisah/garis antar paragraf dalam dokumen html.
Sintaksnya:
<hr[properti]>
ket:
properti align adalah letak garis(center, left, right dan justify)
size adalah ukuran ketebalan, defaultnya 2.
width adalah lebar garis, satuanya dalam pixels atau persen
color adalah warna garis
noshade adalah efek bayangan (shading)
6. Marquee
Adalah sebuah text berjalan pada dokumen html. Sintaksnya:
<marquee[properti]>………isi/text marquee….</marquee>
ket:
properti behavior adalah cara atau teknik dari marquee untuk berjalan(scroll, slide, dan alternate.
Direction adalah arah teks berjalan(left, right)
Height adalah tinggi marquee nilainya dlm presentase/pixels
Width adalaha lebar marquee nialainya dlm persetase/pixels
Continously adalah pengulang teks secara terus menerus, nilainya adalah loop sebanyak n kali.
Bgcolor adalah warna background marquee.
Style adalah untuk memformat font, paragraf, border, numbering dan position.
4. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 4
FORMAT TEXT
Kelompok dalam pemformatan teks pada dokumen html, diantaranya:
1. Format Text
Cetak Tebal <b>….teks…</b>
Cetak miring <I>….teks….</I>
Cetak Garis bawah <u>….teks…</u>
Mengecilkan huruf <small>….teks…</small>
Membesarkan huruf <big>…teks….</big>
Teks yang ditebalkan(sama dgn <b>) <strong>…..teks…..</strong>
Penekanan teks(sama dgn <I>) <emphasis>…teks…</emphasis>
Mencoret teks <strike>….teks….</strike>
Subscript dan superscript <sub>…teks…</sub> dan <sup>…teks…</sup>
Penyisipan teks dan penghapusan teks/insert dan delete
Umumnya browser akan mencoret teks yang dihapus dan menggaris bawahi yang diinsert.
Delete <del>….teks…</del>
Insert <ins>….teks…</ins>
LIST HTML
List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi dengan nomor baik nomor alpabetik atau numerik. Dalam dokumen terdapat dua bentuk daftar atau list, yaitu:
1. Ordered List / List Bernomor
Model dari suatu daftar yang setiap itemnya diberikan nomor. Sintaksnya:
<ol [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>
</ol>
keterangan:
Tag OL diambil dari nama bentukOrdered List.
Atribut berisi type atau start / mulai penomoran list.
Ada empat bentuk type: a, A, i, I.
2. Unordered List / List Tanpa Nomor
Model dari suatu daftar yang setiap itemnya tidak diberikan nomor, akan tetappi digantikan dengan bulleted list. Sintaksnya:
<ul [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>
</ul>
ket:
Tag OL diambil dari nama bentukOrdered List.
Atribut berisi type atau start / mulai penomoran list.
Ada tiga bentuk type: disc(), square(), circle().
5. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 5
FORMAT FONT
FORMAT FONT Format font dalam sebuah dokumen HTML memiliki beberapa atribut, diantaranya:
FONT FACE digunakan untuk menampilkan bentuk dari huruf / struktur yang akan digunakan. Sintaksnya:
<font face=”bentuk huruf yang digunakan..”>…teks…</font>
<FONT FACE="Arial">Ini memakai font arial.</FONT> <FONT FACE="Arial Black">Ini memakai font arial black.</FONT> <FONT FACE="Comic Sans MS">Ini memakai font comic sans MS.</FONT> <FONT FACE="Courier New">Ini memakai font courier new.</FONT> <FONT FACE="Helvetica">Ini memakai font helvetica.</FONT> <FONT FACE="Impact">Ini memakai font impact.</FONT> <FONT FACE="Times New Roman">Ini memakai font times new roman.</FONT> <FONT FACE="Verdana">Ini memakai font verdana.</FONT>
FONT COLOR digunakan untuk menampilkan warna dari sebuah huruf atau karakter yang akan digunakan. Sintaksnya:
<font color=”nama warna/nilai hexadesimal”>..teks..</font>
<FONT COLOR="red">Ini warna merah.</FONT> <FONT COLOR="blue">Ini warna biru.</FONT> <FONT COLOR="green">Ini warna hijau.</FONT> <FONT COLOR="yellow">Ini warna kuning.</FONT> <FONT>Ini warna hitam (tanpa menulis color, tulisan anda berwarna hitam sebagai default. </FONT>
catatan:
penggunaan properti warna dapat menggunakan nilai hexadesimal dari warna tersebut. Misalnya untuk warna hitam / black, maka nilai hexadesimalnya adalah #000000 atau warna merah/red nilai hexadesimalnya #ff0000.
FONT SIZE digunakan untuk menampilkan ukuran dari sebuah huruf/karakter yang akan digunakan. Sintaksnya:
<font size=”nilai numerik”>…teks…</font>
<FONT SIZE="1">Ini ukuran 1.</FONT> <FONT SIZE="2">Ini ukuran 2.</FONT> <FONT SIZE="3">Ini ukuran 3.</FONT> <FONT SIZE="4">Ini ukuran 4.</FONT> <FONT SIZE="5">Ini ukuran 5.</FONT> <FONT SIZE="6">Ini ukuran 6.</FONT> <FONT SIZE="7">Ini ukuran 7.</FONT>
Anda dapat melihat bahwa urutan antara FACE, SIZE, dan COLOR di dalam tag FONT tidak memiliki aturan baku, dalam arti anda bebas menulis mana duluan. Selain itu anda dapat menulis dengan huruf besar, seperti "FONT" maupun dengan huruf kecil, seperti "font". Keduanya akan memberikan hasil yang sama.
6. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 6
<FONT SIZE="4" FACE="Comic Sans MS" COLOR="green"><B> Ini huruf tebal, memakai font Comic Sans MS, berukuran 4, berwarna hijau. </B></FONT>
Anda juga dapat mengubah ukuran huruf dengan tag heading, yaitu <H1> sampai <H6>, di mana <H1> adalah yang terbesar, dan <H6> adalah yang terkecil. Perhatikan contoh berikut:
<H1>Ini menggunakan Heading 1</H1>
<H2>Ini menggunakan Heading 2</H2>
<H3>Ini menggunakan Heading 3</H3>
<H4>Ini menggunakan Heading 4</H4>
<H5>Ini menggunakan Heading 5</H5>
<H6>Ini menggunakan Heading 6</H6>
Dalam memanipulasi tulisan, anda harus mengenal tiga tag berikut:
<CENTER> : Tag ini berfungsi membuat tulisan berada di tengah.</CENTER>
<BR> : Tag ini berfungsi untuk membuat baris baru. <P> : Tag ini berfungsi untuk membuat paragraf baru.</P>
Tag <P> mempunyai atribut align, seperti <P align="left"> yang membuat paragraf menjadi rata kiri, <P align="right"> yang membuat paragraf menjadi rata kanan dan <P align = "center"> membuat paragraf menjadi berada di tengah.
Coba menulis kode berikut menggunakan notepad agar lebih memahami.
<HTML> <BODY>
<H1>Pemakaian tag</H1>
<P align="right"><FONT COLOR="red"><B> Paragraf ini memberi contoh penggunaan tag P align="right" yang menyebabkan keseluruhan paragraf menjadi rata kanan. Penggunaan tag FONT COLOR="red" menyebabkan seluruh huruf berwarna merah, dan tag B menyebabkan semua menjadi huruf tebal. </B></FONT></P>
Sedang kalau paragraf ini memberi contoh <BR> pengunaan tag BR. <BR> Dapat anda lihat walaupun masih tersisa banyak space di kanan, dengan <BR> menggunakan <BR> tag BR tulisan dipaksa membuat baris baru. Tanpa tag BR tulisan akan terus mengalir membentuk paragraf yang wajar seperti yang sekarang anda baca. Tulisan tanpa tag BR ini hanya akan membentuk baris baru manakala space sudah habis terisi semua.
<P align="center">Sekarang adalah contoh penggunaan tag P align="center". Tag ini menyebabkan tulisan menjadi berada di tengah, seperti dapat anda lihat sekarang. Juga anda mungkin dapat merasakan perbedaan antara tag P dengan tag BR. Kalau tag BR hanya menyebabkan pindah ke baris baru, tag P menyebabkan lompat membentuk paragraf baru. </P>
</BODY> </HTML>
7. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 7
FRAME HTML
Adalah layout sebuah HTML untuk menampilkan beberapa halaman web secara bersamaan dan ditampilkan dalam sebuah window browser. Berdasarkan fungsinya, frame terbagi atas:
1. Frame Kolom
adalah Frame yang menampilkan informasi dalam sebuah web browser dalam bentuk kolom. Misalnya kita akan membuat tiga buah frame kolom dengan ukuran masing-masing frame adalah 30, 40, dan 30 (dilustrasikan 1 browser web memiliki ukuran total adalah 100). Kita akan membuat 4 buah halaman web, dengan komposisi 1 halaman web dan 3 halaman pendukung.
Sintaksnya: (halaman utama)
<frameset cols=”#,#,...”>
<frame name=”namaframe” src=”lokasi web”>
...................
</frameset>
contohnya:
<html>
<head>
<title>
contoh frame kolom</title>
</head>
<frameset cols="30,40,30">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>
2. Frame Baris
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris.
Sintaksnya: (halaman utama)
<html>
<head>
<title>
contoh frame baris</title>
</head>
<frameset rows="30,50,20">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>
8. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 8
3. Frame Campuran
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris dan kolom.
Sintaksnya: (halaman utama)
4. Frame Navigasi
5. Frame Inline
FORMAT IMAGE
Image atau gambar adalah semua jenis file yang disusun dari pixels. Yang berfungsi untuk menambah daya tarik dari sebuah halaman web. Pada umumnya yang ditampilkan mempunyai format gambar GIF(Graphics Interchange Format) dan JPEG(Joint Photographics Experts Group).
Fungsi pengolahan gambar terdiri atas:
1. Image Alignment/Perataan Teks Pada Gambar
Perataan teks pada gambar terdiri dari dua bagian yaitu Horisontal(left/center/right) dan Vertikal(Top/Middle/Bottom). Sintaksnya:
<img scr=”Gambar/Sumber Data Gambar” align=”left/center/right”>
<img scr=”Gambar/Sumber Data Gambar” align=”top/middle/bottom”>
2. Image Adjustment/Ukuran Gambar
Digunakan untuk mengatur lebar dan tinggi dari sebuah gambar dalam sebuah halaman web. Sintaksnya:
<img border=”ukuran/angka” scr=”Gambar/Sumber Data Gambar” width=”angka” height=”angka”>
3. Image Alternate/Teks Gambar
Digunakan untuk menampilkan teks pada saat kursor mouse berada diatas gambar. Sintaksnya:
<img scr=”Gambar/Sumber Data Gambar” width=”angka” height=”angka” alt=”…..isi teks……”>
4. Image Link/Link Gambar
Digunakan untuk mengaitkan gambar dengan halaman tertentu didalam sebuah halaman web. Sintaksnya:
<p align=”left/center/right”><a href=”nama_file.html”><img scr=”Gambar/Sumber Data Gambar” width=”angka” height=”angka”></p></a>
5. Image Map/Pemetaan Gambar
Digunakan satu untuk memasang beberapa link dalam satu gambar. Hal tersebut akan memudahkan kita memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar.
Sintaksnya:
<map>
<img scr=”Gambar/Sumber Data Gambar” usemap=”#nama_map”>
<map name=”nama_map”>
9. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 9
<area shape=”default/rect/cicr/poly” coords=”keterangan” href=”link” alt= ”ket_link”>
</map>
Keterangan:
Apabila shape=”default”, digunakan untuk menyatakan kemana link akan pergi, jika link khusus tidak didefinisikan didalam area. Coords tidak digunakan.
Apabila shape=”rect” maka coord=”x, y, w, z” dimana x, y adalah titik koordinat kiri atas dan w, z adalah koordinat kanan bawah area link.
Apabila shape=”circ” maka coord =”x, y, w” dimana x, y adalah titik koordinat pusat lingkaran dan w adalah radius llingkarannya.
Apabila shape=”poly” maka coords =”w, z, w, z…” dimana w, z adalah koordinat setiap titik poligon.
LINK HTML
Link adalah fasilitas dimana dapat berpindah tempat dari halamn satu ke halaman lain yang ditandai dengan menggarisbawahi teks yang akan dilink, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek link (gambar/teks) yang diikuti dengan tersorotnya objek link (gambar/teks) .
Hyperlink dalam sebuah dokumen HTML menggunakan tag Anchor<a> dan diakhiri dengan </a>.
Sintaksnya:
<a href=”nama_dokumen yang dilink” [atribut]>……..teks/gambar,,,,,,</a>
Dalam dokumen HTML hyperlink secara garis besar dibagi menjadi 3, yang terdiri dari:
1. Link Absolut
adalah link yang digunakan untuk mengaitkan halaman web yang sate dengan halaman web yang lainnya di dalam situs internet. Contoh
<a href=http://www.ikmi.ac.id>Pusat Pengolahan Data Akademik</a>
2. Link Relatif
adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman web yang lainnya didalam satu situs internet seperti pada link absolut. Contoh:
<a href =“Contoh Latihan_link”>Ke latihan_link</a>
3. Link Self
adalah link yang digunakan untuk mengaitkan bagian yang satu dengan yang lainnya di dalam satu halaman web. Contoh:
<a href=”#bab1”>Lihat bab1</a>
TABLE/TABEL
Tabel adalah sebuah sarana untuk menginformasikan data berupa baris dan kolom.
Sebuah tabel dimulai dengan tag <TABLE> dan diakhiri dengan </TABLE>.
Setiap baris tabel dibentuk dengan tag <TR>……….</TR>, dan setiap kolom tabel dibentuk dengan tag <TD>…….</TD>.
Tiap kotak dalam tabel disebut cell. <TH> berfungsi untuk membuat header dari tabel.
10. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 10
Atribut BORDER pada tag <TABLE> akan membentuk border di sekeliling tabel. Default atribut adalah BORDER=0 yang berarti tidak menggunakan border. Tabel dengan border dimatikan bisa dimanfaatkan untuk me-layout halaman dengan banyak gambar.
Selain border, berikut adalah atribut lain yang dapat dipakai dalam <TABLE>, yaitu:
Bordercolor=”kode_warna” mengatur warna border, jika border digunakan.
Align=”left|center|right” mengatur posisi tabel di layar.
Cellpadding=”angka” mengatur jarak antara border dengan isi sel (vertikal dan horizontal) dalam satuan pixel.
Cellspacing=”angka” mengatur tebal frame dalam satuan pixel.
Width=”angka” mengatur lebar tabel dalam satuan pixel atau persen.
Sedangkan berikut ini adalah beberapa atribut dalam tag <TD> yang sering digunakan:
Bgcolor=”kode_warna” mengatur warna latar belakang cell.
Background=”gambar.gif” menggunakan gambar sekaligus sebagai latar belakang cell.
Align=”left|right|center” mengatur perataan isi cell (teks, gambar, dan lain-lain) secara horizontal.
Valign=”top|bottom|middle” mengatur perataan isi cell (teks, gambar, dan lain- lain) secara vertikal.
Colspan=”angka” untuk menggabung cell kosong.
Width=”angka” mengatur lebar cell dalam satuan pixel atau persen.
Catatan:
Anda dapat mengganti kode <td>....</td> dengan <th>....</th> agar teks di dalam cell dicetak dengan huruf tebal. Ini akan menghemat beberapa byte ukuran file karena Anda tidak perlu menggunakan tag <b>.....</b> lagi untuk membuat huruf tebal dalam sebuah cell.
Contoh dokumen HTML membuat Tabel Colspan
<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="2" cellpadding="5" width=50% height=50% >
<tr>
</tr>
<th colspan="3" align="center">baris1, kolom1</th>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom1</td>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
11. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 11
</body>
</html>
Contoh Dokumen HTML membuat Tabel Rowspan
<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% >
<tr>
<td rowspan="3" align="center">baris1, kolom1</td>
<td>baris1, kolom2</td>
<td>baris1, kolom3</td>
</tr>
<tr>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>
Contoh Dokumen HTML membuat Tabel terdapat Gambar
<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% >
<tr>
<td>baris2, kolom1</td>
<td rowspan="3" align="center"><img src="C:My Documentswebjeannedanc.gif"></img></td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris3, kolom3</td>
</tr>
12. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 12
</table>
</body>
</html>
Contoh Dokumen HTML Membuat Tabel
<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="1" width=50% height=50% >
<tr>
<th>baris1, kolom1</th>
<td>baris1, kolom2</td>
<th>baris1, kolom3</th>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom1</td>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>
PENGATURAN BORDER
Border adalah garis yang mengelillingi sebuah tabel. Sintaksnya:
<table border=”angka”>
................
</table>
CELLPADDING DAN CELLSPACING
Cellpading digunakan untuk mengatur jarak antara tepi tabel dengan isi sel baik vertikal maupun horisontal dalam satuan pixel.
Cellspasing digunkanan untuk mengatur tebal frame dalam satuan pixel. Sintaksnya:
<table border=”angka” cellpadding=”angka” cellspasing=”angka”>
..........................
</table>
COLSPAN DAN ROWSPAN
Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom atau satu sel
kolom.
Rowspan digunakan untuk menggabungkan beberapa baris menjaadi satu baris atau satu sel
baris.
13. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 13
Sintaksnya:
<th rowspan/colspan=”jumlah kolom/baris”> atau
<td rowspan/colspan=”jumlah kolom/baris”>
...........................
</th> atau
</td>
PERATAAN ISI SEL, BACKGROUND ISI SEL, DAN BACKGROUND TABEL
Digunakan apabila menginginkan isi sel yang ditampilkan tertata rapi dan menarik. Sintaksnya:
<th align=”left/center/right” bgcolor=”warna”> atau
<td align=”left/center/right” bgcolor=”warna”>
....................
</th> atau
</td>
sedangkan untuk tabel, sintaksnya:
<table border=”angka” bgcolor=”warna”>
....................
</table>
14. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 14
FORM
Adalah Input/masukkan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang diinginkan pengguna, proses penyimpanan, proses sunting atau edit, proses hapus dan browse.
Sintaksnya:
<Form Name=”Nama_Form” Methode=”Post/Get” action=”URL”>
.....
</Form>
Keterangan:
1. Nama Form adalah nama form yang sedang digunakan.
2. Methode adalah metode yang digunakan dalam penyimpanan ke dalam server.
3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam server.
Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input/masukkan dari pengguna. Kontrol Form terdiri dari :
1. Kontrol Text digunakan untuk memberikan input atau masukkan berupa kotak isian.
Sintaksnya :
<Input Type=”Text” [Properti]>
Ket properti:
- Name : Nama dari kontrol text
- Size : Ukuran dari kontrol text
- Value : Text yang tertulis pada kontrol text
- Maxlength : Panjang maximal karakter yang diijinkan
- Style : Pengaturan Style dalam kontrol text, nilainya bisa berupa font,
paragraf, numbering, border, position.
- Dir : Pengaturan arah text dari kontrol text, seperti rlt(right to left)/kanan
ke kiri dan kebalikannya yaitu ltr(left to right).
Contoh :
....
<body>
<form>
<input type=”text” name=”text1” size=”40” maxlength=”50” style=”font-family:Comic San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....
2. Kontrol Password adalah sebuah kontrol html yang penggunaanya mirip dengan kontrol text akan tampil dengan text biasa, sedangkan kontrol password akan ditampilkan dengan tanda asteris(*).
Sintaksnya :
<Input Type=”Password” [Properti]>
ket properti:
– Name
– Size
15. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 15
– Value
– Maxlength
– Style
– Dir
Contoh:
....
<body>
<form>
<input type=”Password” name=”pass” size=”40” maxlength=”50” style=”font-family:Comic San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....
3. Kontrol Radio digunakan untuk menampilkan salah satu pilihan dari satu kumpulan/grup pilihan.
Sintaksnya :
<Input Type=”Radio” [Properti]>
Ket properti:
- Name
- Value
- Checked adalah Kontrol radio yang menjadi pilihan
- Default adalah Kontrol radio yang terpilih secara default.
Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Jenis Kelamin Anda :<br>
<input type=”Radio” name=”OptJenis” Value=”Pria” checked>Pria<br>
<input type=”Radio” name=”OptJenis” Value=”Wanita” >Wanita<br>
</form>
....
4. Kontrol CheckBox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia. Pengunaanya sama dengan dengan kontrol radio, perbedaanya terletak pada pilihan yang dimungkinkan lebih dari satu.
Sintaksnya :
<Input Type=”CheckBox” [Properti]>
Ket properti:
- Name
- Value
- Checked
- Default
Contoh:
16. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 16
....
<body>
<form>
<font face=”Comic San Ms”>
Hobby Anda Adalah :<br>
<input type=”CheckBox” name=”C1” Value=”ON” >Olah Raga<br>
<input type=”CheckBox” name=”C2” Value=”ON” >Musik<br>
</form>
</body>
....
5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan.
Sintaksnya:
<select [properti]>
...<option> item 1
...<option> item2
....
....
</select>
Ket properti:
- name
- value
- selected adlah item yang dipilih
- Size adalah banyaknya item yang ditampilkan pada layar monitor(defaultnya 1).
- Multiple adalah Tampilan dari drop down box, seperti tombol spinner.
- Dir
Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Agama Yang Ada Di Indonesia Adalah :<br>
<Select size=”1” name=”CBOAgama” >
<option selected value=”Islam”>Islam</option>
<option value=”Kristen”>Kristen</option>
<option value=”Katolik”>Katolik</option>
<option value=”Hindu”>Hindu</option>
<option value=”Budha”>Budha</option>
<option value=”Keyakinan”>Keyakinan</option>
</select></font></p>
</form>
</body>
.....
6. Kontrol Text Area merupakan kontrol text yang dapat menliskan text lebih banyak karena memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text.
Sintaksnya:
17. CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 17
<TextArea [properti]>
....Isi text area....
</textarea>
Ket Properti:
- Name
- Value
- Cols adalah jumlah kolom dari kontrol text area
- Rows adalah jumlah baris dari kontrol text area
- Maxlength
- Dir
Contoh :
...
<body>
<form
<font face=”Comic San MS”> Komentar Anda :
<textarea rows=”4” name=”Area1” cols=”40”></text area></font>
</form>
</body>
...
7. Kontrol Button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur / event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit, Reset. Button digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript. Submit digunakan utnuk mengirim data-data ke server (lebih banyak berhubungan dengan pemrogramman yang berbasis Server Side seperti ASP), Sedangkan Reset digunakan untuk meghapus data-data yang ada pada suatu form.
Sintaksnya:
<Input Type=”Button” [properti]>
<Input Type=”Submit” [properti]>
<Input Type=”Reset” [properti]>
Ket properti:
- Name
- Value
- Dir
8. Kontrol Image digunakan untuk mengolah /mengelola gambar.
Sintaksnya:
<Input Type=”Image” [properti]>
Ket properti:
- Align : meratakan teks di sekeliling gambar
- Alt : teks yang muncul jika tombol mouse berada diarea gambar
- Border : Batas tepi dari kontrol image
- Heigth : Ketinggian dari gambar
- Hspace : Pengatran batas(margin) horisontal gambar
- Ismap : Penentuan gambar sebagai imagemap
- Lowsrc : Pengaturan gambar dengan resolusi rendah
- Name
- Src
- Usemap :Penentuan gambar sebagai imagemap
![CATATAN HTML
SMP KANISIUS | Tahun Pelajaran 2013/2014 2
Untuk dokumen yang disimpan dengan menggunakan format HTML, maka setiap dokumen yang disimpan harus ditambahkan sebuah akhiran .html/.htm. Karena pada dasarnya tiap dokumen html akan dieksekusi pada sebuah browser yang didalamnya dapat mengenali extention .htm/.html.
Tag html :
Tag atau elemen terdiri dari dua macam yaitu Container Tag dan Stand Alone Tag. Container Tag menandai suatu bagian dari dokumen diawal dan diakhir. Sedangkan Stand Alone Tag tidak memerlukan tanda awal dan akhir.
Secara utuh struktur dokumen dan elemen pendukungnya dapat ditulis sebagai berikut:
<html>
<head>
<title>…..isi dari title…..</title>
</head>
<body>
….. isi /informasi body yang akan
ditampilkan pada browser web…..
</body>
</html>
TAG <BODY>
Tag ini memerintahkan browser untuk menampilkan semua elemen yang berada dalam tag <body>.
Atributnya:
Alink=”warna” warna link(aktif)
background=”nama_file/url” berupa image
bgcolor=”warna” berupa warna
link=”warna” warna link(umum)
text=”nama warna” warna text
vlink=”nama warna” warna link(sudah dikunjungi)
TAG UTAMA HTML
Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html karena pada dasarnya html merupakan teks murni, artinya dokumen html tidak akan memiliki keiistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser hanya dapat mengeksekusi sebuah dokumen html apabila didalam dokumen tersebut telah dilengkapai dengan tag-tag dasar html yang meliputi <html>, <head>, <title>, <body>.
Tag utama html adalah tag yang digunakan untuk memanipulasi dokumen html, terdiri dari:
1. Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading memiliki 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6.
Masing2 bilangan berfungsi untuk mewakili ukuran terbesar(H1) dan terkecil(h6).
Sintaksnya:
<hn[properti]>……………..</Hn>](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)