Jumat, 07 Mei 2010

HTML

HTML (HyperTekt Markup Language)

=>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 (). 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:

PHP

Pada contoh ini tagnya memiliki nama sedangkan atribut untuk tag

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 : ….

Paragraf

Cetak Tebal

Pada tag yang berpasangan seperti pada contoh ini, </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">adalah tag<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">awal dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"> 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.

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.

373

Dokumen HTML secara umum akan terdiri dari dua bagian yaitu Header

dan Body (Gambar 13.14)

.

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 …. . Tag ini tidak mempunyai atribut. Di

dalam tag ini kita dapat meletakkan beberapa tag lain seperti tag title dan tag

link. Lihat Gambar 13.15 dan 13.16.

Gambar 13.15. Header dokumen HTML tanpa tag title.

374

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 dan

diakhiri dengan . 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.

Gambar 13.18. Dokumen HTML dengan body content yang lebih kompleks.

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 </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML menyediakan enam tingkatan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">heading</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">, dimana </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">heading </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">level 1 (</span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><H1></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">)<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">adalah yang terbesar dan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">heading </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">level 6 (</span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><H6></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">) adalah yang terkecil.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.19 menunjukkan bagaimana penggunaan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">heading</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.19. Penggunaan heading.</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="color: white;">376 </span></b><i><span style="color: black;"><o:p></o:p></span></i></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Paragraph<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Paragraf dalam HTML dibuat dengan tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><P></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Tag ini akan membuat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">baris baru dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">oleh </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><P> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"></P></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Pengaturan posisi paragraf dapat dilakukan dengan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">ALIGN </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang diikuti dengan posisi yang diinginkan, yaitu </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">left </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">rata kiri, </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">center </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk rata tengah horisontal dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">right </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk rata kanan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">(Lihat Gambar 13.20).<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.20. Penggunaan paragraph.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Line Break<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Line break digunakan untuk menuliskan teks pada baris berikutnya.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Line break dibuat dengan tag tunggal </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><BR></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Tag ini akan membuat baris baru<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">tanpa memberi baris kosong sebagaimana pada tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><P> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">(Lihat Gambar<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.21).<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="color: white;">380 </span></b><i><span style="color: black;"><o:p></o:p></span></i></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Font<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML menyediakan fasilitas pengaturan huruf yang akan ditampilkan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dalam dokumen. Pengaturan ini dilakukan dengan tag berpasangan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><FONT><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"></FONT></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Tag ini memiliki beberapa atribut untuk mengatur ukuran,<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">jenis dan warna huruf yang digunakan.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: "Courier New"; color: black;">o </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">SIZE </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur ukuran huruf, dimana nilai 1 untuk huruf<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">terkecil dan nilai 7 untuk huruf terbesar.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: "Courier New"; color: black;">o </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">FACE </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur jenis huruf yang diinginkan, dimana<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">nilainya berupa </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">string </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">nama font seperti Arial, Tahoma dan sebagainya.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: "Courier New"; color: black;">o </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">COLOR </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur warna teks yang dikehendaki, dimana<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">nilainya dapat diisi dengan dua cara dengan menyebut nama warna<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dalam bahasa Inggris seperti </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">red, blue </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">green </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">atau dengan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menggunakan nilai RGB (</span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Red Green Blue</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">) seperti </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">FF000 </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk merah.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.27. Penggunaan tag Font.<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.4.4. Penambahan Obyek<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Horizontal Line<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">garis horizontal dengan tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><HR></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><HR> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">mempunyai atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">SIZE </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menentukan ketebalan garis, atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">WIDTH </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk menentukan lebar garis,<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">ALIGN </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk menentukan letak teks dalam garis, dan atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">NOSHADE<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur agar garis tidak disertai bayangan. Gambar 13.28 menunjukkan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">bagaimana tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><HR> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">digunakan.</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="color: white;">381<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Image<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Dokumen HTML dapat diperindah dengan menyertakan gambar pada<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang dibuat. Tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><IMG> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dapat digunakan untuk memanggil dan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menampilkan gambar pada halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Sintaks penulisan tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><IMG> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">adalah:<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><IMG SRC=”file_gambar” ALT=”nama_alternatif”><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">SRC </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">digunakan untuk menentukan sumber file gambar yang akan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">ditampilkan. Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">ALT </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">berfungsi untuk memberi tulisan pengganti, apabila<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">gambar tidak ditampilkan.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.29. Penggunaan tag image.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Untuk pengaturan gambar yang lebih baik, tag IMG menyediakan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">beberapa atribut, antara lain:<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">ALIGN </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur penempatan teks pada gambar.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">BORDER </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk memberi bingkai pada gambar.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">HEIGHT </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">WIDTH </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur tinggi dan lebar gambar.</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal"><o:p> </o:p></p> <p class="MsoNormal" style=""><b><span style="color: white;">382 </span></b><i><span style="color: black;"><o:p></o:p></span></i></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Contoh berikut ini memperlihatkan penggunaan atribut-atribut tersebut.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.30. Penggunaan atribut-atribut tag IMG.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pada Gambar 13.30 terlihat perbedaan tampilan dibandingkan dengan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.29. Tulisan Logo Linux terletak ditengah gambar karena kita<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menggunakan atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">align </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dengan nilai </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">middle</span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Sedangkan tulisan logo<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Windows terletak di bagian atas karena kita menggunakan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">align </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dengan nilai<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">top</span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Gambar logo windows diberi garis bingkai dengan menggunakan atribut<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">border </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dengan nilai 2.<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.4.5. Tabel<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Tabel dalam HTML dibuat dengan menggunakan tag awal </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><TABEL> </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">tag penutup </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"></TABLE></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Tag ini memiliki beberapa bagian penting, seperti dapat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dilihat pada Tabel berikut ini.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Tabel 13.2. Bagian-bagian pada tag Table<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Tag Fungsi<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><CAPTION>…</CAPTION> </span></b><span style="font-size: 10pt; font-family: Arial; color: black;">Membentuk judul tabel<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><TH>…</TH> </span></b><span style="font-size: 10pt; font-family: Arial; color: black;">Membuat judul kolom<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><TR>…</TR> </span></b><span style="font-size: 10pt; font-family: Arial; color: black;">Membentuk baris pada suatu tabel<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><TD>...</TD> </span></b><span style="font-size: 10pt; font-family: Arial; color: black;">Membuat sebuah sel data<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Contoh-contoh penggunaan tabel adalah sebagai berikut:</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><i><span style="color: black;">Rekayasa Perangkat Lunak </span></i><b><span style="color: white;">383<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.31. Tabel sederhana.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pada Gambar 13.31, tabel yang kita buat adalah tabel sederhana dengan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dua buah kolom dan 3 buah baris (perhatikan ada 3 buah pasangan tag </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><TR> …<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"></TR>. </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Kita dapat menambahkan garis dengan menggunakan atribut border pada tabel<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">(lihat Gambar 13.32).<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.32. Tabel dengan format yang lebih kompleks.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pada Gambar 13.32, terlihat tabel yang tampilannya lebih baik daripada<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar sebelumnya. <st1:city w:st="on"><st1:place w:st="on">Ada</st1:place></st1:city> beberapa atribut yang kita tambahkan pada tabel<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">yaitu :</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="color: white;">384 </span></b><i><span style="color: black;">Rekayasa Perangkat Lunak<o:p></o:p></span></i></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">WIDTH </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk mengatur lebar tabel pada halaman. Kita dapat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menggunakan satuan persen (%) atau pixel (px).<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">BORDER </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk memberikan garis pada tabel. Nilai untuk atribut ini<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dari dimulai dari 0 yang berarti tidak ada garis. Semakin besar angka<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">semakin tebal garis.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">BGCOLOR </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk menambahkan warna latar belakang pada tabel.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">CELLPADDING </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk menentukan jarak antara teks dan tepi kiri<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">sebuah sel (lihat gambar 13.33 untuk lebih jelasnya).<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">CELLSPACING </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk menentukan jarak bagian sel terhadap tepi<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dalam bingkai tabel (lihat gambar 13.33 untuk lebih jelasnya).<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.33. Cellpadding, cellspacing dan border.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Seperti halnya perangkat lunak </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">word-processor</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">, pada HTML kita dapat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">menggabungkan dua atau lebih sel menjadi satu buah sel. Untuk menggabung<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">baris dapat digunakan atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">ROWSPAN </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan untuk menggabung kolom dapat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">digunakan atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">COLSPAN</span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">. Contoh penggunaannya dapat dilihat pada Gambar<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.34 dan 13.35.</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><i><span style="color: black;">Rekayasa Perangkat Lunak </span></i><b><span style="color: white;">385<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.34. Rowspan.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.35. Colspan.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Sel pada tabel tidak selalu harus berisi teks namun dapat juga berisi<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">gambar seperti terlihat pada Gambar 13.36.</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="color: white;">386 </span></b><i><span style="color: black;">Rekayasa Perangkat Lunak<o:p></o:p></span></i></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.36. Tabel dengan sel berisi gambar.<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.4.6. Link antar Dokumen<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Link </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">merupakan pautan untuk membuka atau memanggil halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">atau file tertentu. </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Link </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">merupakan tag yang sangat penting dalam penggunaan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML, karena disinilah letak perbedaan antara dokumen HTML dengan dokumen<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">teks yang lain. </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Link </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">dapat dibuat dengan memberi perintah tag </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">anchor </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><A></span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Anchor </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">memiliki beberapa atribut, diantaranya </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">HREF </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang berfungsi untuk<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">membuat link ke dokumen HTML tertentu dan </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">NAME </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang berfungsi untuk<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">memberi tanda/nama titik tertentu pada dokumen HTML yang sama. Contoh<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">penggunaan tag </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">anchor </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">dapat dilihat pada Gambar 13.37.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Gambar 13.37. Penggunaan tag anchor.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Atribut </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">HREF </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dapat digunakan untuk memanggil halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">pada<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">sistem yang sama (pada satu komputer) seperti ditunjukkan pada Gambar 13.37.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pada kasus ini kita tinggal menuliskan lokasi dimana halaman yang akan kita</span><span style="font-size: 10pt; color: black;"><o:p></o:p></span></p> <p class="MsoNormal" style=""><i><span style="color: black;">Rekayasa Perangkat Lunak </span></i><b><span style="color: white;">387<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">panggil berada. </span><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">HREF </span></b><span style="font-size: 10pt; font-family: Tahoma; color: black;">dapat juga kita gunakan untuk memanggil halaman lain<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">diluar sistem kita atau memanggil situs-situs lain di internet. Caranya dengan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">mengetikkan alamat URL situs yang akan kita panggil. Cobalah ketikkan kode<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML berikut ini dengan teks editor kemudian simpan file dengan ekstensi .htm.<o:p></o:p></span></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">DAFTAR ALAMAT MESIN PENCARI<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><menu><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><li><a href="http://www.google.com/">Google</a><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><li><a href="http://www.yahoo.com/">Yahoo</a><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"><li><a<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;">href="http://www.altavista.com/”>Altavista</a><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: "Courier New"; color: black;"></menu><o:p></o:p></span></b></p> <p class="MsoNormal" style=""><b><span style="font-size: 10pt; font-family: Tahoma; color: black;">13.5. RINGKASAN<o:p></o:p></span></b></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Teknologi disain </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">terbagi menjadi beberapa layer (lapisan), yaitu<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">structural layer, presentation layer dan behavioral layer.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">Web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">statis adalah halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang isi data dan informasinya tidak<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">berubah-ubah. Sedangkan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">dinamis, memiliki isi data dan informasi<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang berbeda-beda tergantung input apa yang disampaikan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">client</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pembuatan halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">membutuhkan dukungan persiapan perangkat<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">keras, perangkat lunak dan pemahaman teknologi pembuatan </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">(Hypertext Markup Language) </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">merupakan bahasa yang digunakan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">untuk pembuatan halaman </span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">web </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">dilakukan dengan cara disisipkan<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">(</span><span style="font-size: 10.5pt; font-family: Tahoma; color: black;">embedded language</span><span style="font-size: 10pt; font-family: Tahoma; color: black;">) pada dokumen dengan memberi tanda tertentu<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">yang disebut <b>tag.<o:p></o:p></b></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Dokumen HTML secara umum akan terdiri dari dua bagian yaitu Header<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dan Body.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">HTML menyediakan tag-tag untuk pendeskripsian dokumen dan format<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">dokumen yang lengkap.<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: SymbolMT; color: black;">• </span><span style="font-size: 10pt; font-family: Tahoma; color: black;">Pada halaman HTML dapat ditambahkan gambar, tabel, suara, atau filefile<o:p></o:p></span></p> <p class="MsoNormal" style=""><span style="font-size: 10pt; font-family: Tahoma; color: black;">lain.<o:p></o:p></span></p> <p class="MsoNormal"><o:p> </o:p></p> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Diposting oleh <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/14191372700649845546' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/14191372700649845546' rel='author' title='author profile'> <span itemprop='name'>ahmad_bahrul_kholif</span> </a> </span> </span> <span class='post-timestamp'> di <meta content='http://tuyulrpl.blogspot.com/2010/05/html_07.html' itemprop='url'/> <a class='timestamp-link' href='http://tuyulrpl.blogspot.com/2010/05/html_07.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2010-05-07T22:14:00-07:00'>22.14</abbr></a> </span> <span class='reaction-buttons'> </span> <span class='post-comment-link'> </span> <span class='post-backlinks post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1665735886'> <a href='https://www.blogger.com/post-edit.g?blogID=1494037882707436083&postID=6046510487985453136&from=pencil' title='Edit Entri'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4>Tidak ada komentar:</h4> <div id='Blog1_comments-block-wrapper'> <dl class='avatar-comment-indent' id='comments-block'> </dl> </div> <p class='comment-footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Posting Komentar</h4> <p> </p> <a href='https://www.blogger.com/comment-iframe.g?blogID=1494037882707436083&postID=6046510487985453136' id='comment-editor-src'></a> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <script src='https://www.blogger.com/static/v1/jsbin/645330703-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html'); </script> </div> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='http://tuyulrpl.blogspot.com/2010/05/elektronika-digital.html' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='http://tuyulrpl.blogspot.com/2010/05/microsoft-acces-data-base.html' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a> </span> <a class='home-link' href='http://tuyulrpl.blogspot.com/'>Beranda</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Langganan: <a class='feed-link' href='http://tuyulrpl.blogspot.com/feeds/6046510487985453136/comments/default' target='_blank' type='application/atom+xml'>Posting Komentar (Atom)</a> </div> </div> <script type='text/javascript'> window.___gcfg = { 'lang': 'id' }; </script> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget Followers' data-version='1' id='Followers1'> <h2 class='title'>Pengikut</h2> <div class='widget-content'> <div id='Followers1-wrapper'> <div style='margin-right:2px;'> <div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div id="followers-iframe-container"></div> <script type="text/javascript"> window.followersIframe = null; function followersIframeOpen(url) { gapi.load("gapi.iframes", function() { if (gapi.iframes && gapi.iframes.getContext) { window.followersIframe = gapi.iframes.getContext().openChild({ url: url, where: document.getElementById("followers-iframe-container"), messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { '_ready': function(obj) { window.followersIframe.getIframeEl().height = obj.height; }, 'reset': function() { window.followersIframe.close(); followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d1494037882707436083\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM5OWFhZGQqByMwMDAwMDAyByNhYWRkOTk6ByM5OTk5OTlCByM5OWFhZGRKByM3Nzc3NzdSByM5OWFhZGRaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26postID\x3d6046510487985453136\x26origin\x3dhttp://tuyulrpl.blogspot.com/"); }, 'open': function(url) { window.followersIframe.close(); followersIframeOpen(url); }, 'blogger-ping': function() { } } }); } }); } followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d1494037882707436083\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM5OWFhZGQqByMwMDAwMDAyByNhYWRkOTk6ByM5OTk5OTlCByM5OWFhZGRKByM3Nzc3NzdSByM5OWFhZGRaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26postID\x3d6046510487985453136\x26origin\x3dhttp://tuyulrpl.blogspot.com/"); </script></div> </div> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=1494037882707436083&widgetType=Followers&widgetId=Followers1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("Followers1"));' target='configFollowers1' title='Edit'> <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Arsip Blog</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://tuyulrpl.blogspot.com/2010/'> 2010 </a> <span class='post-count' dir='ltr'>(9)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://tuyulrpl.blogspot.com/2010/05/'> Mei </a> <span class='post-count' dir='ltr'>(9)</span> <ul class='posts'> <li><a href='http://tuyulrpl.blogspot.com/2010/05/algoritma-pemrograman-tingkat-dasar.html'>ALGORITMA PEMROGRAMAN TINGKAT DASAR</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/rekayasa-perangkat-lunak.html'>Rekayasa Perangkat Lunak</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/elektronika-digital.html'>elektronika digital</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/html_07.html'>HTML</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/microsoft-acces-data-base.html'>Microsoft acces (Data base)</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/intalasi-windows-xp.html'>Intalasi Windows Xp</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/editing-vidio-dengan-windows-movie.html'>Editing Vidio dengan Windows Movie Maker</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/perakitan-komputer.html'>Perakitan komputer</a></li> <li><a href='http://tuyulrpl.blogspot.com/2010/05/trubleshoting-perakitan_07.html'>trubleshoting perakitan</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=1494037882707436083&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("BlogArchive1"));' target='configBlogArchive1' title='Edit'> <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div><div class='widget Profile' data-version='1' id='Profile1'> <h2>Mengenai Saya</h2> <div class='widget-content'> <a href='https://www.blogger.com/profile/14191372700649845546'><img alt='Foto saya' class='profile-img' height='60' src='//1.bp.blogspot.com/_015argy2jvo/S-TgODP2Z9I/AAAAAAAAAAU/n4a5NPg9Zm0/S220-s80/bahl,ripai,kholf+copy.jpg' width='80'/></a> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/14191372700649845546' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> ahmad_bahrul_kholif </a> </dt> </dl> <a class='profile-link' href='https://www.blogger.com/profile/14191372700649845546' rel='author'>Lihat profil lengkapku</a> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=1494037882707436083&widgetType=Profile&widgetId=Profile1&action=editWidget§ionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("Profile1"));' target='configProfile1' title='Edit'> <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <div class='footer section' id='footer'><div class='widget HTML' data-version='1' id='HTML1'> <div class='widget-content'> <script> //mouse //Circling text trail- Tim Tilton //Website: http://www.tempermedia.com/ //Visit http://www.dynamicdrive.com for this script and more function cursor_text_circle(){ // your message here var msg='TUYUL RPL SMK BHAKTI MULIA'.split('').reverse().join(''); var font='Verdana,Arial'; var size=6; // up to seven var color='#ff0000'; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 for just plain rotation w/out drag var speed=.12; // This is the rotation speed, set it negative if you want // it to spin clockwise var rotation=-.1; // Alter no variables past here!, unless you are good //--------------------------------------------------- var ns=(document.layers); var ie=(document.all); var dom=document.getElementById; msg=msg.split(''); var n=msg.length; var a=size*13; var currStep=0; var ymouse=0; var xmouse=0; var props="<font face="+font+" size="+size+" color="+color+">"; if (ie) window.pageYOffset=0 // writes the message if (ns){ for (i=0; i < n; i++) document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>'); } else if (ie||dom){ document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>'); document.write('</div></div>'); } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position } if (ns||ie||dom) (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; var y=new Array(); var x=new Array(); var Y=new Array(); var X=new Array(); for (i=0; i < n; i++){ y[i]=0; x[i]=0; Y[i]=0; X[i]=0; } var iecompattest=function(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; } var makecircle=function(){ // rotation properties if (ie) outer.style.top=iecompattest().scrollTop+'px'; currStep-=rotation; for (i=0; i < n; i++){ // makes the circle var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style; d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : ''); d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval } } var drag=function(){ // makes the resistance y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (var i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } makecircle(); // not rotation speed, leave at zero setTimeout(function(){drag();},10); } if (ns||ie||dom) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", drag, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", drag ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); drag(); }; } else window.onload = drag; } } cursor_text_circle(); </script> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=1494037882707436083&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=footer' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'> <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div></div> </div> </div></div> <!-- end outer-wrapper --> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/684644471-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY4SWmbIZuEOeYoNEZdlUh7bdmVxeg:1510958537047';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1494037882707436083','//tuyulrpl.blogspot.com/2010/05/html_07.html','1494037882707436083'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1494037882707436083', 'title': 'tuyul rpl', 'url': 'http://tuyulrpl.blogspot.com/2010/05/html_07.html', 'canonicalUrl': 'http://tuyulrpl.blogspot.com/2010/05/html_07.html', 'homepageUrl': 'http://tuyulrpl.blogspot.com/', 'searchUrl': 'http://tuyulrpl.blogspot.com/search', 'canonicalHomepageUrl': 'http://tuyulrpl.blogspot.com/', 'blogspotFaviconUrl': 'http://tuyulrpl.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22tuyul rpl - Atom\x22 href\x3d\x22http://tuyulrpl.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22tuyul rpl - RSS\x22 href\x3d\x22http://tuyulrpl.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22tuyul rpl - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1494037882707436083/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22tuyul rpl - Atom\x22 href\x3d\x22http://tuyulrpl.blogspot.com/feeds/6046510487985453136/comments/default\x22 /\x3e\n', 'meTag': '', 'openIdOpTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/9395240b25bf2486', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Bagikan ke Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Google+', 'key': 'googlePlus', 'shareMessage': 'Bagikan ke Google+', 'target': 'googleplus'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'item', 'postId': '6046510487985453136', 'postImageUrl': '”file_gambar”', 'pageName': 'HTML', 'pageTitle': 'tuyul rpl: HTML'}}, {'name': 'features', 'data': {'lazy_images': 'false', 'unsupported_browser_message': 'false', 'lightbox_img_parsing': 'true', 'video_theatre_support': 'true', 'sharing_get_link_dialog': 'false', 'sharing_native': 'false'}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'HTML', 'description': ' HTML (HyperTekt Markup Language) \x3d\x3eStruktur Umum File dengan Bahasa HTML HTML adalah bahasa yang disis...', 'featuredImage': 'https://lh3.googleusercontent.com/proxy/aE4v7_1W8JhZGIKVnglNsKA1mtcp5JKGOjpVxOCrWRECx2Z0UZLWbrVd', 'url': 'http://tuyulrpl.blogspot.com/2010/05/html_07.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6046510487985453136}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', null, document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'useNgc': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1584353632-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/368954415-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar', null, document.getElementById('Followers1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', null, document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', null, document.getElementById('Profile1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer', null, document.getElementById('HTML1'), {}, 'displayModeFull')); </script> </body> </html>