Pengertian HTML

Gambar 13.8 dan 13.9 menunjukkan pada kalian bagaimana membuat halaman web sederhana. Halaman web yang kalian buat ini menggunakan bahasa yang disebut HTML (Hypertext Markup Language). HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN.
HTML dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 90’an,
HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan
HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik daripada versi sebelumnya. Perkembangan yang pesat tersebut tidak sampai merubah cara kerja HTML.
Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ekstensi .htm atau .html. Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad (pada Microsoft Windows) atau beragam text editor yang ada di platform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad dan lainlain. Beberapa editor menyediakan fitur-fitur tambahan seperti syntax coloring (memberi warna pada kode-kode HTML) dan code completion (melengkapi secara otomatis kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis GUI yang sangat membantu dalam pembuatan halaman-halaman HTML. Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama yang cukup populer di platform Microsoft Windows. Sedangkan di Linux tersedia Quanta+, Bluefish dan Nvu.

13.4.2.Struktur Umum File dengan Bahasa HTML

HTML adalah bahasa yang disisipkan (embedded language) pada dokumen dengan memberi tanda tertentu yang disebut tag. Tag merupakan aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di akhiri dengan tanda lebih besar (<tag>). Browser akan menentukan tampilan teks atau dokumen berdasarkan tag yang digunakan.
Sintaks penulisan tag mengikuti aturan-aturan umum berikut ini:
a) Setiap tag mempunyai nama yang spesifik. Kadang-kadang diikuti opsi-opsi yang disebut atribut. Baik nama maupun opsi harus berada dalam tanda <..>.
Contoh:
<a href="/wiki/PHP" title="PHP">PHP</a>
Pada contoh ini tagnya memiliki nama <a> sedangkan atribut untuk tag <a> adalah href dan title. Sehingga baik nama tag dan atributnya harus berada di dalam tanda <…> seperti pada contoh.
b) Sebagian besar tag berpasangan. Penulisan untuk tag yang berpasangan adalah sebagai berikut : <namatag>….</namatag> Contoh:
<TITLE>Paragraf</TITLE>
Cetak Tebal
Pada tag yang berpasangan seperti pada contoh ini, <TITLE> adalah tag awal dan </TITLE> adalah tag akhir. Perhatikan tanda / pada tag akhir.
c) Nama tag dan atribut-nya tidak bersifat case sensitive. Penulisan Cetak Tebal memberikan hasil yang sama dengan Cetak Tebal.
d) Penulisan atribut suatu tag diletakkan setelah nama tag. Jika ada lebih dari satu atribut maka digunakan spasi untuk memisahkan. Urutan atribut tidak penting.
Contoh:
Teks Baru
Teks Baru 
e) Nilai dari atribut ditulis setelah tanda sama dengan (=). Pada contoh sebelumnya (lihat bagian d) terlihat bahwa atribut SIZE dari tag FONT memiliki nilai 5 sedangkan atribut FACE memiliki nilai “verdana”.
f) Jika nilai dari atribut hanya tunggal, maka kita langsung menuliskan setelah tanda =. Jika lebih dari satu maka dapat digunakan tanda ‘… ‘ atau “…”. Pada contoh bagian d, tampak bahwa penulisan nilai untuk atribut SIZE tanpa menggunakan tanda “..”, sedangkan pada atribut FACE tanda “..” untuk menandai kata verdana.

- Header
Bagian ini biasanya berisi berbagai macam keterangan tentang dokumen termasuk title (judul dokumen), posisinya dalam sekumpulan halaman web dan hubungannya dengan dokumen lain. Bagian ini ditandai dengan tag <head> …. </head>. Tag ini tidak mempunyai atribut.

Gambar 13.15. Header dokumen HTML tanpa tag title.

Gambar 13.16. Header dokumen HTML dengan tag title.
- Body
Body adalah bagian dari dokumen HTML tempat dimana kita meletakkan isi dari dokumen. Bagian ini ditandai dengan tag <body> dan diakhiri dengan </body>. Apapun yang berada diantara dua tanda ini disebut sebagai body content. Dokumen HTML yang paling sederhana mungkin hanya berisi sebaris atau dua baris teks saja tanpa format apapun
(Gambar 13.17). Pada dokumen yang lebih kompleks, body content bisa berisi teks yang terformat, gambar, tabel atau bahkan animasi yang rumit (Gambar 13.18).

Gambar 13.17. Dokumen HTML dengan body content sederhana.

13.4.3.Format Dokumen

Ada banyak sekali tag HTML yang tersedia, baik itu berhubungan dengan deskripsi dokumen atau yang berhubungan dengan format tampilan dokumen. Tidak semuanya akan dibahas dalam buku ini. Pada bagian berikut ini akan dibahas beberapa tag yang biasa dipakai dalam format tampilan dokumen.
- Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam sebuah dokumen HTML. Heading berbeda dengan tag <TITLE>. HTML menyediakan enam tingkatan heading, dimana heading level 1 (<H1>) adalah yang terbesar dan heading level 6 (<H6>) adalah yang terkecil. Gambar 13.19 menunjukkan bagaimana penggunaan heading.

Gambar 13.19. Penggunaan heading.

􀁸 Paragraph

Paragraf dalam HTML dibuat dengan tag . Tag ini akan membuat baris baru dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit oleh dan . Pengaturan posisi paragraf dapat dilakukan dengan atribut ALIGN yang diikuti dengan posisi yang diinginkan, yaitu left untuk rata kiri, center untuk rata tengah horisontal dan right untuk rata kanan (Lihat Gambar 13.20).

Gambar 13.20. Penggunaan paragraph.

􀁸 Line Break

Line break digunakan untuk menuliskan teks pada baris berikutnya.

Line break dibuat dengan tag tunggal . Tag ini akan membuat baris baru tanpa memberi baris kosong sebagaimana pada tag (Lihat Gambar 13.21).

Gambar 13.21. Tag dan .

􀁸 List

HTML menyediakan 3 cara untuk membuat daftar atau list, yaitu

o Ordered list

Ordered list digunakan untuk membuat daftar dimana setiap bagian memiliki nomor secara berurutan. Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup. Tag ini menggunakan angka sebagai urutan secara default, tapi bisa dirubah dengan merubah nilai atribut TYPE. Nilai-nilai atribut yang diijinkan dapat dilihat pada Tabel 13.1.

Tabel 13.1. Daftar atribut TYPE untuk Ordered list dan Unordered list.

o Unordered list

Unordered list digunakan untuk membuat daftar yang disajikan tanpa nomor urut, melainkan dengan secara default dengan tanda bulatan utuh (bullet). Tanda ini bisa dirubah dengan merubah nilai atribut TYPE untuk unordered list. Nilai-nilai atribut yang diijinkan dapat dilihat pada tabel 13.1. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup (lihat contoh pada Gambar 13.23).

Tipe lain dari list yang termasuk Unordered list adalah Directory list dan Menu list. Directory list merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Tag yang digunakan adalah <DIR> ... </DIR>. Menu list umumnya digunakan untuk menu pilihan. Tag yang digunakan adalah <MENU> ... </MENU>. Baik Direktori list maupun Menu list menghasilkan tampilan yang sama dengan Unordered list (Gambar 13.24 dan Gambar 13.24).

o Definition list

Definition list membuat daftar definisi mirip seperti tampilan pada kamus, dengan definisi suatu istilah agak menjorok ke kanan. Tiga buah pasang tag yang terkait dengan definition list adalah:

- <DL> ... </DL> untuk menyatakan tempat bagi daftar definisi.

- <DT> ... </DT> untuk menyatakan tempat bagi istilah yang akan didefinisikan.

- <DD> ... </DD> untuk menyatakan tempat bagi definisi dari istilah.

Contoh penggunaan Definition list dapat dilihat pada Gambar 13.26.

Gambar 13.26. Penggunaan Definition List.

􀁸 Font

HTML menyediakan fasilitas pengaturan huruf yang akan ditampilkan dalam dokumen. Pengaturan ini dilakukan dengan tag berpasangan dan . Tag ini memiliki beberapa atribut untuk mengatur ukuran, jenis dan warna huruf yang digunakan.

o Atribut SIZE untuk mengatur ukuran huruf, dimana nilai 1 untuk huruf terkecil dan nilai 7 untuk huruf terbesar.

o Atribut FACE untuk mengatur jenis huruf yang diinginkan, dimana nilainya berupa string nama font seperti Arial, Tahoma dan sebagainya.

o Atribut COLOR untuk mengatur warna teks yang dikehendaki, dimana nilainya dapat diisi dengan dua cara dengan menyebut nama warna dalam bahasa Inggris seperti red, blue dan green atau dengan menggunakan nilai RGB (Red Green Blue) seperti FF000 untuk merah.

13.4.4.Penambahan Obyek

􀁸 Horizontal Line

Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan garis horizontal dengan tag <HR>. Tag <HR> mempunyai atribut SIZE untuk menentukan ketebalan garis, atribut WIDTH untuk menentukan lebar garis, Atribut ALIGN untuk menentukan letak teks dalam garis, dan atribut NOSHADE untuk mengatur agar garis tidak disertai bayangan. Gambar 13.28 menunjukkan bagaimana tag <HR> digunakan.

􀁸 Image

Dokumen HTML dapat diperindah dengan menyertakan gambar pada halaman web yang dibuat. Tag <IMG> dapat digunakan untuk memanggil dan menampilkan gambar pada halaman web. Sintaks penulisan tag <IMG> adalah:

Atribut SRC digunakan untuk menentukan sumber file gambar yang akanditampilkan. Atribut ALT berfungsi untuk memberi tulisan pengganti, apabila gambar tidak ditampilkan.

Untuk pengaturan gambar yang lebih baik, tag IMG menyediakan beberapa atribut, antara lain:

􀁸 Atribut ALIGN untuk mengatur penempatan teks pada gambar.

􀁸 Atribut BORDER untuk memberi bingkai pada gambar.

􀁸 Atribut HEIGHT dan WIDTH untuk mengatur tinggi dan lebar gambar.

Gambar 13.30. Penggunaan atribut-atribut tag IMG.

Pada Gambar 13.30 terlihat perbedaan tampilan dibandingkan dengan Gambar 13.29. Tulisan Logo Linux terletak ditengah gambar karena kita menggunakan atribut align dengan nilai middle. Sedangkan tulisan logo Windows terletak di bagian atas karena kita menggunakan align dengan nilai top. Gambar logo windows diberi garis bingkai dengan menggunakan atribut border dengan nilai 2.

Gambar 13.31. Tabel sederhana.

Pada Gambar 13.31, tabel yang kita buat adalah tabel sederhana dengan dua buah kolom dan 3 buah baris (perhatikan ada 3 buah pasangan tag <TR> … </TR>. Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut.

Kita dapat menambahkan garis dengan menggunakan atribut border pada tabel (lihat Gambar 13.32).

Gambar 13.32. Tabel dengan format yang lebih kompleks.

Pada Gambar 13.32, terlihat tabel yang tampilannya lebih baik daripada Gambar sebelumnya. Ada beberapa atribut yang kita tambahkan pada tabel yaitu :

􀁸 Atribut WIDTH untuk mengatur lebar tabel pada halaman. Kita dapat menggunakan satuan persen (%) atau pixel (px).

􀁸 Atribut BORDER untuk memberikan garis pada tabel. Nilai untuk atribut ini dari dimulai dari 0 yang berarti tidak ada garis. Semakin besar angka semakin tebal garis.

􀁸 Atribut BGCOLOR untuk menambahkan warna latar belakang pada tabel.

􀁸 Atribut CELLPADDING untuk menentukan jarak antara teks dan tepi kiri sebuah sel (lihat gambar 13.33 untuk lebih jelasnya).

􀁸 Atribut CELLSPACING untuk menentukan jarak bagian sel terhadap tepi dalam bingkai tabel (lihat gambar 13.33 untuk lebih jelasnya).

Gambar 13.33. Cellpadding, cellspacing dan border.

Seperti halnya perangkat lunak word-processor, pada HTML kita dapat menggabungkan dua atau lebih sel menjadi satu buah sel. Untuk menggabung baris dapat digunakan atribut ROWSPAN dan untuk menggabung kolom dapat digunakan atribut COLSPAN. Contoh penggunaannya dapat dilihat pada Gambar 13.34 dan 13.35.

Sel pada tabel tidak selalu harus berisi teks namun dapat juga berisi gambar seperti terlihat pada Gambar 13.36.

13.4.6.Link antar Dokumen

Link merupakan pautan untuk membuka atau memanggil halaman web atau file tertentu. Link merupakan tag yang sangat penting dalam penggunaan HTML, karena disinilah letak perbedaan antara dokumen HTML dengan dokumen teks yang lain. Link dapat dibuat dengan memberi perintah tag anchor <A>. Anchor memiliki beberapa atribut, diantaranya HREF yang berfungsi untuk membuat link ke dokumen HTML tertentu dan NAME yang berfungsi untuk memberi tanda/nama titik tertentu pada dokumen HTML yang sama. Contoh penggunaan tag anchor dapat dilihat pada Gambar 13.37.

Atribut HREF dapat digunakan untuk memanggil halaman web pada sistem yang sama (pada satu komputer) seperti ditunjukkan pada Gambar 13.37. Pada kasus ini kita tinggal menuliskan lokasi dimana halaman yang akan kita panggil berada. HREF dapat juga kita gunakan untuk memanggil halaman lain diluar sistem kita atau memanggil situs-situs lain di internet. Caranya dengan mengetikkan alamat URL situs yang akan kita panggil. Cobalah ketikkan kode HTML berikut ini dengan teks editor kemudian simpan file dengan ekstensi .htm.

DAFTAR ALAMAT MESIN PENCARI

<menu>

<li><a href="http://www.google.com/">Google</a>

<li><a href="http://www.yahoo.com/">Yahoo</a>

<li><a

href="http://www.altavista.com/”>Altavista</a>

</menu>

sumber: http://crayonpedia.org

NB: Kalo' ribet, bisa kirim e-mail aja langsung ke zavers9@gmail.com, insyallah secepatnya di bales.

Semoga Membantu

Bilangan Bulat dengan Eksponen Bilangan Bulat Positif

Masih ingat bentuk berikut :
3² = 3 x 3
2³ = 2 x 2 x 2
5⁶ = 5 x 5 x 5 x 5 x 5 x 5
Demikian seterusnya sehingga diperoleh bentuk umum sebagai berikut.

Dengan a bilangan bulat dan n bilangan bulat positif Dari pengertian di atas akan diperoleh sifat-sifat berikut.

Sifat 1
aⁿ x aⁿ = a^{m + n}
2⁴ x 2³ = (2 x 2 x 2 x 2 )x(2 x 2 x 2 )
           = 2 x 2 x 2 x 2 x 2 x 2 x 2
           = 27
           = 2⁴⁺³
Sifat 2
a^m : aⁿ = a^{m - n}, m > n
5⁵ : 5³ = (5 x 5 x 5 x 5 x 5) : (5 x 5 x 5)
           = 5 x 5
           = 52
           = 5^{5 - 3}
Sifat 3
(a^m)ⁿ = a^{m x n}
(3⁴)² = 3⁴ x 3⁴
       = (3 x 3 x 3 x 3) x (3 x 3 x 3 x 3)
       = (3 x 3 x 3 x 3 x 3 x 3 x 3 x 3)
       = 38
       = 3^{4 x 2}

Sifat 4
(a x b)^m = a^m x b^m
(4 x 2)³ = (4 x 2) x (4 x 2) x (4 x 2)
           = (4 x 4 x 4) x (2 x 2 x 2)
           = 4³ x 2³
Sifat 5
(a : b)^m = a^m : b^m
(6 : 3) ⁴ = (6 : 3) x (6 : 3) x (6 : 3) x (6 : 3)
            = (6 x 6 x 6 x 6) : (3 x 3 x 3 x 3)
            = 6⁴ : 3⁴

Bilangan Bulat dengan Eksponen Bilangan Bulat Negatif

Dari pola bilangan itu dapat disimpulkan bahwa 2⁰ = 1 dan 2^-n= ¹/₂^_n , secara umum dapat ditulis :

Pecahan Berpangkat Bilangan Bulat
Kita telah mengetahui bahwa pecahan adalah bilangan dalam bentuk dengun a dan b bilangan bulat (b ≠ 0). Bagaimanakah jika pecahan dipangkatkan dengan bilangan bulat? Untuk menentukan hasil pecahan yang dipangkatkan dengan bilangan bulat, caranya sama dengan menentukan hasil bilangan bulat yang dipangkatkan dengan bilangan bulat.
Contoh:
Tentukan hasil berikut ini!
(¹/₂)⁵
Jawab :

Bentuk Akar dan Bilangan Berpangkat Pecahan

Bilangan Rasional dan Irasional

Bilangan rasional adalah bilangan yang dapat dinyatakan dalam bentuk ^a/_b dengan a, b bilangan bulat dan b ≠ 0. Bilangan rasional merupakan gabungan dari bilangan bulat, nol, dan pecahan. Contoh bilangan rasional adalah -5, ^-1/₂, 0, 3, ³/₄, dan ⁵/_9.

Sebaliknya, bilangan irasional adalah bilangan yang tidak dapat dinyatakan dalam bentuk ^a/_b dengan a, b bilangan bulat dan b ≠ 0.
Contoh bilangan irasional adalah . Bilangan-bilangan tersebut, jika dihitung dengan kalkulator merupakan desimal yang tak berhenti atau bukan desimal yang berulang. Misalnya

√2 = 1,414213562 .... Selanjutnya, gabungan anrara bilangan rasional dan irasional disebut bilangan real.

Bentuk Akar

Berdasarkan pembahasan sebelumnya, contoh bilangan irasional adalah √2 dan √5 . Bentuk seperti itu disebut bentuk akar. Dapatkah kalian menyebutkan contoh yang lain?
Bentuk akar adalah akar dari suatu bilangan yang hasilnya bukan bilangan Rasional.
Bentuk akar dapat disederhanakan menjadi perkalian dua buah akar pangkat bilangan dengan salah satu akar memenuhi definisi
√a² = a jika a ≥ 0, dan –a jika a < 0
Contoh :
Sederhanakan bentuk akar berikut √75
Jawab :
√75 = √25x3 = √25 x √3 = 5√3

Mengubah Bentuk Akar Menjadi Bilangan Berpangkat Pecahan dan Sebaliknya

Bentuk √a dengan a bilangan bulat tidak negatif disebut bentuk akar kuadrat dengan syarat tidak ada bilangan yang hasil kuadratnya sama dengan a. oleh karena itu √2,√3, √5, √10, √15 dan √19 merupakan bentuk akar kuadrat. Untuk selanjutnya, bentuk akar ⁿ√a^m dapat ditulis a^m/n (dibaca: a pangkat m per n). Bentuk a^m/n disebut bentuk pangkat pecahan.

contoh :

jawab :

Operasi Aljabar pada Bentuk Akar

Penjumlahan dan Pengurangan

Penjumlahan dan pengurangan pada bentuk akar dapat dilakukan jika memiliki suku-suku yang sejenis.

kesimpulan :
jika a, c = Rasional dan b ≥ 0, maka berlaku

a√b + c√b = (a + c)√b

a√b - c√b = (a - c)√b

Perkalian dan Pembagian

Contoh :
Tentukan hasil operasi berikut :

jawab :

Perpangkatan

Kalian tentu masih ingat bahwa (a^)" = a^'. Rumus tersebut juga berlaku pada operasi perpangkatan dari akar suatu bilangan.
Contoh:

Operasi Campuran

Dengan memanfaatkan sifat-sifat pada bilangan berpangkat, kalian akan lebih mudah menyelesaikan soal-soal operasi campuran pada bentuk akarnya. Sebelum melakukan operasi campuran, pahami urutan operasi hitung berikut.

Prioritas yang didahulukan pada operasi bilangan adalah bilangan-bilangan yang ada dalam tanda kurung.
Jika tidak ada tanda kurungnya maka

pangkat dan akar sama kuat;
kali dan bagi sama kuat;
tambah dan kurang sama kuat, artinya mana yang lebih awal dikerjakan terlebih dahulu;
kali dan bagi lebih kuat daripada tambah dan kurang, artinya kali dan bagi dikerjakan terlebih dahulu.

Contoh :

Merasionalkan Penyebut

Dalam perhitungan matematika, sering kita temukan pecahan dengan penyebut bentuk akar, misalnya

Agar nilai pecahan tersebut lebih sederhana maka penyebutnya harus dirasionalkan terlebih dahulu. Artinya tidak ada bentuk akar pada penyebut suatu pecahan. Penyebut dari pecahan-pecahan yang akan dirasionalkan berturut-turut adalah

Merasionalkan penyebut adalah mengubah pecahan dengan penyebut bilangan irasional menjadi pecahan dengan penyebut bilangan rasional.

Penyebut Berbentuk √b

Jika a dan b adalah bilangan rasional, serta √b adalah bentuk akar maka pecahan ^a/_√b dapat dirasionalkan penyebutnya dengan cara mengalikan pecahan tersebut dengan ^√b/_√b .

Contoh :
Sederhanakan pecahan berikut dengan merasionalkan penyebutnya!

jawab :

Penyebut Berbentuk (a+√b) atau (a+√b)

Jika pecahan-pecahan mempunyai penyebut berbentuk (a+√b) atau (a+√b) maka pecahan tersebut dapat dirasionalkan dengan cara mengalikan pembilang dan penyebutnya dengan sekawannya. Sekawan dari (a+√b) adalah (a+√b) adalah dan sebaliknya.
Bukti