1 Modul Praktikum 2 PENGENALAN HTML LEBIH LANJUT 1. TUJUAN Mahasiswa dapat memahami kembali terhadap bahasa pemrograman HTML secara dasar. Mahasiswa m...
TUJUAN Mahasiswa dapat memahami kembali terhadap bahasa pemrograman HTML secara dasar. Mahasiswa mampu untuk melakukan implementasi bahasa pemrograman yang dipelajari terhadap studi kasus secara langsung.
2.
LANDASAN TEORI A. LINK Ciri utama sebuah homepage adalah dokumen pada homepage dapat berpindah-pindah dari satu dokumen ke dokumen lain, dengan cara mengklik pada bagian tertentu pada suatu halaman. Untuk membuat seperti itu, diberikan perintah link. Link dapat diberikan pada teks atau gambar. Yang penting adalah bahwa sebuah link harus memiliki tujuan atau sasaran dari dokumen lain yang sudah dibuat dan ingin dituju. Perintah anchor digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah Teks pada browser. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag . Misalnya . Cara melakukan link ke bagian tersebut adalah teks pada browser Link Dengan Text Perintah dasar link dengan teks adalah : teks Tag atau perintah harus ditutup dengan . Karena pasangan dan digunakan untuk mengatasi bagian mana saja yang nantinya mengandung link. Text yang mengandung link bergaris bawah, warna standartnya adalah biru muda (sebelum di klik) dan ungu (setelah diklik). Untuk mengubah warna tersebut, pada dapat ditambahkan perintah : LINK dengan nilai warna tertentu (untuk warna sebelum diklik) VLINK dengan nilai warna tertentu (untuk warna setelah diklik) ALINK dengan nilai warna tertentu (memberi warna link pada saat mouse dalam mengklik link tersebut)
Link Dengan Gambar Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
1
Penulisan kode HTML perintah dasar link dengan gambar sama dengan link pada teks. Bedanya, link pada gambar akan memberikan border di sekeliling gambar yang menunjukkan gambar tersebut mengandung link. Contoh B. ORDERED LIST Ordered list digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara berurut. Ordered list dimulai dengan menggunakan tag dan diakhiri . Untuk menyatakan tiap bagiannya digunakan tag
dimana tag ini tidak menggunakan penutup. C. UNORDERED LIST Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi defaultdalam unordered list. Untuk membuat daftar dengan tanda ini digunakan tag awal
dan tag akhir
. Sama seperti ordered list, untuk tiap-tiap bagian digunakan
tanpa tag penutup. D. GRAFIK DALAM HALAMAN WEB Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar yang ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar yang paling sering digunakan adalah GIF dan JPEG. Format penulisannya adalah: Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client sengaja mematikan fasilitas pemanggilan gambar. E. TABEL Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal
dan tag penutup
. Tag
mewakili beberapa bagian penting, yaitu:
…
digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar tabel, bisa di bagian atas atau bagian bawah tabel
…
berfungsi untuk meletakkan judul tabel di bagian peling atas atau paling kiri dari suatu tabel
…
digunakan sebagai tempat menulis data atau informasi dalam tabel
3.
PRAKTEK
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
Gianluigi Buffon, Info Lengkap Giorgio Chiellini Andrea Barzagli Leonardo Bonucci Paul Pogba Claudio Marchisio Andrea Pirlo Arturo Vidal Carlos Tevez Fernando Llorente
Nama Lengkap: Gianluigi Buffon Nama Panggilan: Superman Tanggal Lahir: 28 Jan 1978 Tempat Lahir: Carrara (MS) Negara: Itali Tinggi Badan: 191 cm. Berat Badan: 83 Kg. Peranan: Kiper Nomor Punggung: 1 Tim Nasional: Italia
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
3
percobaan2.html
<TITLE>Percobaan 2
Pemain Juventus yang lainnya: Martin Caceres Kwadwo Asamoah Sebastian Giovinco Kembali
Hasilnya adalah sebagai berikut:
LINK DENGAN GAMBAR percobaan3.html
<TITLE>Percobaan 3
Link dengan Photo:
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
4
Hasilnya adalah sebagai berikut:
b. ORDERED LIST percobaan4.html
<TITLE>Percobaan 4: Ordered List Lima Pemain kunci pada sekuad Tim Juventus:
Gianluigi Buffon
Giorgio Chiellini
Andrea Pirlo
Arturo Vidal
Paul Pogba
Hasilnya adalah sebagai berikut:
Ketika menggunakan perintah ordered list maka default penomoran adalah 1, 2, 3, …, Anda bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag . TYPE = 1 ; daftar berurut dengan nomor 1, 2, 3 (default) TYPE = I ; daftar berurut dengan menggunakan bilangan Romawi besar (I, II, III, IV, …) Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
5
TYPE = i ; daftar berurut dengan menggunakan bilangan Romawi huruf kecil (i, ii, iii, iv, …) TYPE = A ; daftar berurut dengan menggunakan abjad besar (A, B, C, D, …) TYPE = a ; daftar berurut dengan menggunakan abjad kecil (a, b, c, d, …)
Selain mengubah jenis penomoran, HTML juga menyediakan perintah untuk menentukan nilai awal penomoran. Atribut yang digunakan adalah START = n, dimana n adalah nilai awal penomoran. percobaan5.html <TITLE>Percobaan 5: Tag OL dengan Atribut
Daftar Pemain kunci pada sekuad Tim Juventus:
Gianluigi Buffon
Giorgio Chiellini
Andrea Pirlo
Arturo Vidal
Paul Pogba
Daftar Pemain baru Juventus 2013-2014 (Nomor Urut dimulai dari Enam):
Angelo Ogbonna (dari Torino)
Carlos Teves (dari Manchester City)
Fernando Llorente (dari Athletic Bilbao)
Pablo Daniel Osvaldo (dari Southampton)
Hasilnya adalah sebagai berikut:
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
6
c. UNORDERED LIST percobaan6.html <TITLE>Percobaan 6: Unordered List Lima Besar Klasemen Sementara Serie-A Liga Italia:
Juventus
AS Roma
Napoli
Fiorentina
Inter Milan
Hasilnya adalah sebagai berikut:
Selain default tanda bullet, Anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya dengan menggunakan atribut TYPE pada tag
: percobaan7.html <TITLE>Percobaan 7: Unordered List Tag UL dengan Atribut Lima Besar Klasemen Sementara Liga Primer Inggris:
Chelsea
Liverpool
Arsenal
Manchester City
Tottenham
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
7
Hasilnya adalah sebagai berikut:
d. GRAFIK DALAM HALAMAN WEB percobaan8.html <TITLE>Percobaan 8: Grafik dalam halaman web
www.cuplik.com
Hasilnya adalah sebagai berikut:
Beberapa atribut pada tag yang biasa digunakan dalam halaman-halaman web. BORDER : memberikan suatu border atau batas pada gambar, default-nya = 0 HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel HSPACE, VSPACE : menentukan jarak spasi horizontal dan spasi vertikal antara gambargambar dengan objek di sekitarnya Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
8
ALIGN : mengatur perataan gambar terhadap objek di sekelilingnya. Nilainya bisa berupa
LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE percobaan9.html <TITLE>Percobaan 9: Atribut IMG
CV. Cuplik Media Center (VSPACE = 20) www.cuplik.com (VSPACE = 20)
Jl. Raya Leuwigede No.64 Indramayu (HSPACE = 20)
Hasilnya adalah sebagai berikut:
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
9
e. TABEL percobaan10.html <TITLE>Percobaan 10: Tabel
Seputar Teknik Informatika Politeknik Indramayu
Indikaror Prodi TI
Rincian Indikator Prodi TI
Visi Misi
VISI : Menjadi program studi yang unggul di bidang Teknologi informasi dan menghasilkan tenaga profesional yang bermoral, mandiri, serta mampu bersaing di dunia industri MISI : Menyelenggarakan program pendidikan di bidang Teknologi informasi berbasis industri. Menjalin kerjasama dengan pihak stakeholder serta melaksanakan pengabdian masyarakat secara simultan. Melakukan penelitian dan pengembangan keilmuan di bidang Teknologi informasi dari permasalahan yang terjadi di dunia industri.
Kompetensi
Database Administrator dan Programmer: Mampu mengolah dan mengatur sebuah sistem basis data untuk keperluan enterprise; Mampu membuat dan mengembangkan aplikasi perangkat lunak (ERP/Enterprise Resource Planning) untuk keperluan industri. Network Computer Administrastor: Mampu merencanakan dan mengimplementasikan sistem jaringan area lokal (LAN); Mampu merancang sistem sekuriti dalam sebuah jaringan.
Posisi Kerja Yang Linier
Beberapa posisi pekerjaan yang tersedia untuk lulusan Jurusan Teknik Informatika: Operator atau Teknisi Ahli Komputer Jaringan Teknisi Ahli Perawatan dan perbaikan (maintenance). Tenaga Ahli Pembuat Aplikasi Sistem Informasi Berbasis Web dan atau Dekstop.
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
10
Hasilnya adalah sebagai berikut:
Table ALIGN dan WIDTH Perataan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT untuk perataan kiri, CENTER untuk perataan di tengah dan RIGHT untuk perataan di kanan. Sedangkan untuk perataan vertikal menggunakan atribut VALIGN. VALIGN dapat bernilai TOP untuk perataan atas, MIDDLE untuk perataan di tengah dan BOTTOM untuk perataan di bawah. Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai WIDTH dapat dinyatakan dengan persen (%) yang menyatakan lebar tabel dalam persentase atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya dari tabel. percobaan11.html <TITLE>Percobaan 11: Tabel dengan WIDTH dan ALIGN
Lihatlah VALIGN="top" Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya
Bandingkan dengan VALIGN ="middle"
bagaimana dengan ini VALIGN="bottom"
kalo ini ALIGN="left"
ALIGN="center"
Dunia diciptakan untuk semua makhluk, bukan untuk kepentingan dunia itu sendiri, dan ini dengan ALIGN = "right"
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
11
Hasilnya adalah sebagai berikut:
Table CELLSPACING dan CELLPADDING Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat di antara dua buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat di antara batas/border dengan isi atau teks di dalam sel tersebut. percobaan12.html <TITLE>Percobaan 12: Tabel dengan CELLSPACING dan CELLPADDING
baris 1, kolom 1
baris 1, kolom 2
baris 2, kolom 1
baris 2, kolom 2
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
12
Hasilnya adalah sebagai berikut:
Table COLSPAN dan ROWSPAN Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu kolom. Sedangkan ROWSPAN digunakan untuk menggabungkan beberapa baris menjadi satu. percobaan13.html <TITLE>Percobaan 13: Tabel dengan ROWSPAN dan COLSPAN
baris 1, kolom 1
baris 2, kolom 1
baris 1, kolom 2
baris 2, kolom 2
baris 3, kolom 1
baris 3, kolom 2
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
13
Hasilnya adalah sebagai berikut:
Table COLOR Anda bisa memberi warna pada tabel. Selain warna latar belakang, border tabel bisa juga ditentukan warnanya. Untuk latar belakang digunakan atribut BGCOLOR, sedangkan untuk memberi warna pada border gunakan atribut BORDERCOLOR. percobaan14.html <TITLE>Percobaan 14: Tabel dengan ROWSPAN dan COLSPAN
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
14
Hasilnya adalah sebagai berikut:
4.
TUGAS Dipercantik lagi tugas pembuatan halaman webnya, dengan ditambahkan beberapa tag-tag HTML yang lainnya, sekaligus membuat beberapa halaman yang diberi link dari halaman-halaman web yang ada. Tugas dikumpul minggu depan, dalam bentuk rar/zip.
Modul PW Praktikum 2 | Ahmad Lubis Ghozali | Politeknik Indramayu
B. ORDERED LIST Ordered list digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara berurut. Ordered list dimulai dengan menggunakan tag 
(HSPACE = 20)