Pengenalan Web D3 dan S1 semua jurusan 1
HTML memiliki 3 macam bentuk list ordered list (biasa disebut numbered) ; unordered list (biasa disebut bulleted) definition list (Untuk pasangan istilah dan definisinya / term and definition). Ordered list menampilkan list item dengan angka,huruf, angka romawi Unorderd list menampilkan list item dengan bullet dan gambar Definition List setiap itemnya berisi sepasang (term dan definition) 2
Tag <ol>.. </ol> List item <li>.</li> Contoh : <html> <body> <h4>an Ordered List:</h4> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> </body> </html> 3
Digunakan attribut type Type Bentuk Contoh 1 (default) 1,2,3 <ol type= 1 > A A, B, C <ol type= A > a a, b, c <ol type= a > I I, II, III, IV <ol type= I > i i, ii, iii, iv <ol type= I > Untuk mengatur awal urutan : Tambahkan attribut start = angka awal untuk mengatur awalan urutan, Contoh untuk memulai dari huruf C : <ol type= A start= 3 > 4
<html> <body> Daftar bahasa untuk membuat software: <ol type= A > <li>visual C++</li> <li>visual Basic</li> <li>borland Delphi</li> <li>lain-lain</li> </ol> </body> </html> 5
Tag <ul>.. </ul> List item <li>.</li> Contoh : <html> <body> <h4>an Unordered List:</h4> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </body> </html> 6
Digunakan attribut type Pilihan berupa : disc, circle, square, none Contoh : <html> <body> Bentuk "disc" (default) <ul type="disc"> <li>mangga</li> <li>pisang</li> </ul> Bentuk "circle" <ul type="circle"> <li>mangga</li> <li>pisang</li> </ul> Bentuk "square" <ul type="square"> <li>mangga</li> <li>pisang</li> </ul> </body> </html> 7
Dengan menggunakan style, <ol> dan <ul> dapat ditampilkan dengan berbagai variasi Untuk <ol> bisa menggunakan berbagai character Untuk <ul> bisa menggunakan image/gambar HTML <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> </div> CSS #navlist { list-style-image: url(images/arrow.gif); } 8
Tag <dl> </dl> Untuk Term / Istilah <dt> </dt> Untuk Definition / Definisi <dd> </dd> Contoh : <html> <body> <h4>a Definition List:</h4> <dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> </body> </html> 9
Berisi Tampilan dengan format bertingkat Contoh <html> <body> <h2>kebutuhan Sistem</h2> <ol type= I > <li>software</li> <ol type="a"> <li>bahasa Pemrograman <ul type="square"> <li>php</li> <li>asp.net</li> </ul> <li>database</li> <ul type="square"> <li>mysql</li> <li>oracle</li> <li>postgresql</li> </ul> </ol> <li>hardware</li> </ol> </body> </html> 10
Hyperlink (atau link) adalah suatu kata, sekumpulan kata, atau gambar yang dapat digunakan (diklik) untuk menuju ke dokumen baru atau bagian lain yang dari dokumen html tersebut link menghubungkan satu dokumen dengan dokumen lain Ketika kursor diarahkan pada suatu link di halaman web, maka tanda panah kursor akan berubah menjadi bentuk tangan yang menunjuk Tag yang digunakan : <a> 11
Terdapat 2 komponen link : Descriptor Reference target (berbentuk url) Bentuk Umum Link : <a href= url_of_target >descriptor</a> Descriptor bisa berupa text atau image url_of_target bisa berisi protokol : http ftp mailto 12
http : <a href= http://www.akakom.ac.id >STMIK AKAKOM </a> ftp: <a href= ftp://ftp.server.com/data/bab1.doc >Bab 1 Pendahuluan</a> mailto: Sederhana : <a href= mailto:susi@akakom.ac.id >Contact Me</a> Kompleks : <a href="mailto:cosmas@akakom.ac.id? cc=dison@akakom.ac.id&bcc=sudarmanto@akakom.ac.id &subject=materi%20kuliah%20web&body=terima%20kasih %20ya%20Kirimannya!">Kirim e-mail!</a> 13
Absolute Link url target menggunakan full path termasuk berisi protokol dan alamat server Contoh : <a href= http://www.myweb.com/foto.html >foto</a> Relative Link url target tidak detail, relatif terhadap dokumen yang memanggil target tersebut Untuk memanggil di dalam direktori (maju 1 direktori) tinggal disebutkan nama direktorinya Untuk mundur 1 direktori, gunakan tanda.. 14
Struktur folder : Di direktori dir1 terdapat file : filedir1.html Di direktori dir2 terdapat file : filedir2.html Di direktori dir3 terdapat 2 buah file yaitu : teslink.html dan dirsama.html Di direktori dir4 terdapat file : filedir4.html File yang dijalankan adalah file teslink.html yang terletak di dalam direktori dir3 15
Isi File teslink.html <html> <body> Tes :<br/> <a href="dirsama.html">di Direktori yang sama</a> <br/> <a href="dir4/filedir4.html">maju 1 direktori</a><br/> <a href="../filedir2.html">mundur 1 direktori</a><br/> <a href="../../filedir1.html>mundur 2 direktori</a><br/> </body> </html> 16
Atribut target menentukan dimana dokumen yang dituju itu akan dibuka/ditampilkan target _blank _self _parent _top Nama jendela Contoh : Deskripsi Membuka link di jendela browser baru atau tab baru (tergantung browser yang dipakai) Membuka link di halaman / frame yang sama Membuka link di frame di atasnya Membuka link di jendela utama dari browser Membuka link di jendela browser dengan nama tertentu (diperlukan javascript) <a href="http://www.google.com/" target="_blank">google</a> 17
Jika suatu halaman web sangat panjang, adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri. Hal seperti itu diimplementasikan dengan menggunakan bookmark (tanda #) sehingga pemakai tidak perlu naik-turun halaman secara manual untuk mendapatkan bagian tertentu dalam halaman tersebut 18
Anchor dibuat dengan menambahkan atribut name atau id (lebih disarankan untuk masa depan) pada tag <a> Contoh pada file dengan url www.myweb.com/laporan.html terdapat: <a name= bab10 > Atau <a id= bab10 > Contoh pembuatan linknya : <a href= #bab10 >Baca BAB 10</a> Atau <a href= www.myweb.com/laporan.html#bab10 > baca BAB 10</a> 19
Link bisa juga digunakan untuk : Membuka gambar <a href= pict/girl.jpg >Foto</a> Gambar/image (bukan teks) yang dijadikan descriptor link <a href= galeri.html ><img src= pict/foto.jpg /></a> Membuat link untuk download file <a href= http://www.myweb.com/fileku.zip > Zip File</a> 20