pertemuan ke-4 (html lanjut [2])
TRANSCRIPT
![Page 1: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/1.jpg)
Pertemuan Ke-4(HTML Lanjut [2])
D3 Manajemen Informatika - Unijoyo 1
![Page 2: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/2.jpg)
Frame§ Nama dan target frame§ Frame Vertikal§ Frame Horisontal§ Gabungan Frame Vertikal-Horisontal
Meta tag§ Meta tag keywords§ Meta tag description§ Meta tag revised§ Refresh page dan redirect
Entitas Karakter HMTLSpasi Tambahan dan Simbol “<“ “>”Embed Tag
D3 Manajemen Informatika - Unijoyo 2
![Page 3: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/3.jpg)
� Fungsi:Menampilkan beberapa dokumen HTML secara sekaligus dalam satujendela web browser.
D3 Manajemen Informatika - Unijoyo 3
• Standar penulisan:<frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset>
• Atribut-atribut:
Atribut Fungsi
frameset cols Membuat frame vertikal dengan lebar kolom tertentu
frameset rows Membuat frame horisontal dengan tinggi baris tertentu
frame src Memasukkan dokumen HTML ke dalam frame
scrolling=["yes"|"no"] Menentukan fitur scrolling
noresize Membuat frame tidak dapat diubah ukurannya
name Memberi nama untuk frame
frameborder=["0"|"1“] Menentukan batas antara frame
![Page 4: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/4.jpg)
� Frame dapat diberi nama dan diatur targetnya denganmenggunakan tag base target.
� Contoh:Frame menu dapat digunakan sebagai link untuk mengakseshalaman di frame content.
D3 Manajemen Informatika - Unijoyo 4
Script HTML:<html>
<head></head><frameset rows=“15%,*"><frame name=“judul" src=“judul.html"><frameset cols="30%,*"><frame name="menu" src="menu.html"><name="content" src="content.html">
</frameset></html>
Potongan kode file menu.html:<html>
<head><base target="content">
</head>...</html>
![Page 5: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/5.jpg)
D3 Manajemen Informatika - Unijoyo 5
Contoh:<html><head><title>Membuat Frame Vertikal</title></head><frameset cols="25%,*">
<frame name="kiri"src="kiri.html" scrolling="no">
<frame name="kanan“src="kanan.html">
</frameset></html>
Tampilan:
![Page 6: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/6.jpg)
D3 Manajemen Informatika - Unijoyo 6
Contoh:<html><head><title>Membuat Frame Horisontal </title></head><frameset rows="40%,*"><frame name="atas" src="atas.html“
scrolling="no"><frame name="bawah“
src="bawah.html"></frameset></html>
Tampilan:
![Page 7: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/7.jpg)
D3 Manajemen Informatika - Unijoyo 7
Contoh:<html><head><title>Membuat Frame Vertikal-Horisontal </title></head><frameset rows="20%,*"><frame name="atas" src="atas.html“
scrolling="no"><frameset cols="40%,*">
<frame name="kiri"src="kiri.html">
<frame name="kanan"src="kanan.html">
</frameset></frameset></html>
Tampilan:
![Page 8: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/8.jpg)
� Beberapa entitas (atau simbol) tidak dapatditulis langsung di halaman web karena tidakada di keyboard. Oleh karena itu diperlukankombinasi entitas.
� Terdapat tiga bagian untuk setiap entitas,yaitu:
i. Dimulai dengan sebuah ampersand [“&”]ii. Diberi nama entitas, misalnya [“copy”]iii. Diakhiri dengan semicolon [“;”]
D3 Manajemen Informatika - Unijoyo 8
![Page 9: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/9.jpg)
Contoh:<html>
<head><title>Entitas karakter</head><body>
Simbol "copyright" : "©" <br/>Simbol "alpha" : "α" <br/>
</body></html>
D3 Manajemen Informatika - Unijoyo 9
Tampilan:
![Page 10: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/10.jpg)
� Spasi tambahan (“ “) dapat dibuat dengan kombinasientitas
D3 Manajemen Informatika - Unijoyo 10
Contoh:<html>
<head><title>Spasi Tambahan</title></head><body><p>Setelah ini ada lima spasi tambahan:" ".Sekarang lanjut kalimat lagi.</p></body>
</html>
Tampilan:
![Page 11: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/11.jpg)
�Kombinasi entitas untuk menampilkan simbol“<“dan “>” di dalam halaman web:¢ “<“à < [less than]¢ “>”à > [greater than]
D3 Manajemen Informatika - Unijoyo 11
Contoh:<html>
<head><title>Simbol "<" dan ">"</title></head><body><p>Karakter "Kurang dari" : "<" <br/> Karakter "Lebih dari" : ">"</p></body>
</html>
Tampilan:
![Page 12: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/12.jpg)
� Digunakan untuk men-supply informasi kepada searchengines yang tidak akan terlihat oleh pengunjungweb kecuali jika mereka menampilkan kode darihalaman HTML yang diaksesnya.
� Penggunaan meta tag akan membuat search bot yangada mengenali website tersebut sehingga dapattampil di daftar search engine dan tentu saja mudahdicari oleh pengguna Internet
D3 Manajemen Informatika - Unijoyo 12
![Page 13: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/13.jpg)
Fungsi:Meletakkan kata kunci (keyword) dari website
Format:<head><meta name="keywords" content=“macam_macam keyword yang
digunakan" /></head>
D3 Manajemen Informatika - Unijoyo 13
![Page 14: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/14.jpg)
Fungsi:menunjukkan deskripsi singkat dari halaman web kepada searchengine.
Format:<head><meta name="description" content=“deskripsi_yang_diinginkan" /></head>
Tag description dan keywords sangat mirip.Jika tidak ada kecocokan/relasi antara nilai dua tag inimungkin saja situs anda tidak diproses oleh search engine,jadi anda harus cerdas menentukan keyword dandeskripsinya.
D3 Manajemen Informatika - Unijoyo 14
![Page 15: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/15.jpg)
Fungsi:Untuk mencatat kapan update terakhir dilakukan terhadap situsweb.
Format:<head><meta name="revised" content=“tanggal_update_terakhir" /></head>
D3 Manajemen Informatika - Unijoyo 15
![Page 16: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/16.jpg)
Fungsi:Digunakan untuk keperluan redirect. Dengan meta tagrefresh, pengunjung akan di-redirect (atau di-refresh)ke halaman web yang telah ditentukan.
Format:<head>
<meta http-equiv="refresh" content=“jumlah selang detik untuk me-refreshhalaman; url=…“ />
</head>
D3 Manajemen Informatika - Unijoyo 16
![Page 17: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/17.jpg)
Atribut Fungsiwidth Menentukan lebar dari playerheight Menentukan tinggi dari media playerhidden=["yes"|"no"] Jika atribut ini bernilai true, maka media player tidak ditampilkan.
autostart Menentukan apakah file musik dijalankan secara otomatis saathalaman web dimuat oleh web browser
loop Mengatur apakah file musik dijalankan berulang atau hanya cukupsatu kali
volume Mengatur volume dari file musik, range nilainya 0 sampai 100
D3 Manajemen Informatika - Unijoyo 17
• Standar penulisan:<embed src=“file_media” />
• Atribut-atribut:
• Fungsi:menyisipkan media (misalnya musik) ke dalam halaman web
![Page 18: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/18.jpg)
D3 Manajemen Informatika - Unijoyo 18
Tampilan:
Contoh:<html><head><title> Penggunaan Embed (Musik) </title></head><body>
<embed src="flourish.mid" width=”360” height=”160” hidden="false"/></body></html>
![Page 19: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/19.jpg)
� Untuk menampilkan beberapa dokumen HTML secara sekaligus dalamsatu jendela web browser adalah dengan menggunakan Frame.
� Meta Tag digunakan untuk men-supply informasi kepada searchengines.
� Untuk menuliskan beberapa entitas karakter HMTL yang tidakterdapat di keyboard, diperlukan kombinasi entitas dengan formattertentu.
� Oleh karena web browser hanya akan mengenal dan memformat satuspasi antar kata meskipun di dalam kode HTML telah dibuat lebih darisatu spasi, maka kombinasi entitas “ ” digunakan untukmenampilkan spasi tambahan
� Simbol “<“ dan “>” adalah simbol pembuka dan penutup tag. Untukmenampilkannya di dalam web browser dapat dengan menggunakankombinasi entitas “<” dan “>”.
� Embed Tag digunakan untuk menyisipkan media (misalnya musik) kedalam halaman web.
D3 Manajemen Informatika - Unijoyo 19
![Page 20: Pertemuan Ke-4 (HTML Lanjut [2])](https://reader031.vdocuments.pub/reader031/viewer/2022020706/61fc8ca58d33c02b785e7845/html5/thumbnails/20.jpg)
� Chris Bates [2006]. Web Programming: BuildingInternet Applications, Third Edition, John Wiley& Sons Ltd, England.
� Husni [2007]. Pemrograman Database BerbasisWeb, Graha Ilmu, Yogyakarta.
� Sebesta, R.W. [2002], Programming the WorldWide Web, Addison Wesley.
� Sutarman, S.Kom [2003]. Membangun AplikasiWeb dengan PHP dan MySQL, Graha Ilmu,Yogyakarta.
D3 Manajemen Informatika - Unijoyo 20