html - bina darma e-journaleprints.binadarma.ac.id/824/1/praktikum internet materi 1.pdf · materi...
TRANSCRIPT
![Page 1: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/1.jpg)
HTML
By : Ade Putra, M.Kom.
Universitas Bina Darma2013
![Page 2: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/2.jpg)
Materi :• Apa itu Dokument HTML• Penamaan Dokumen• Defenisi Elemen• Defenisi Tag• Elemen HTML yang dibutuhkan• Apa saja yang dibutuhkan
(SoftWare/Hardware)
![Page 3: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/3.jpg)
![Page 4: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/4.jpg)
![Page 5: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/5.jpg)
![Page 6: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/6.jpg)
• Defenisi Tag– Untuk menandai berbagai elemen dalam suatu
dokumen HTML– Terdiri dari sebuah kurung sudut kiri nama tag dan
kuung sudut kanan “< nama tag >”– Umumnya berpasangan, tag pertama
menunjukkan tag awal ditutup dengan tag akhircontoh <h1>Judul </h1>
– Ada beberapa elemen yang tidak mengharuskantag berpasangan; contoh <p> <br> <hr> <li>
![Page 7: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/7.jpg)
• Penamaan Dokumen– Membuat nama dokument apa saja
ditambah extensi “.htm” atau “.html” (tandapetik ganda tidak dituliskan)
– Nama dokument case sensitive artinya namayang sama dengan case berbeda dianggapsbg dokumen yag berbeda
– Dokumen.html <> dokumen.html
![Page 8: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/8.jpg)
• Elemen HTML yang dibutuhkan– Dinyatakan dengan tag <html>, <head>, dan
<body> berikut tag-tag pasangannya.– Setiap dokumen terdiri atas tag head dan
body– Elemen head berisi informasi tentang
dokumen tersebut, dan elemen body berisiteks yang sebenarnya yg tersusun dari link,paragrap dan elemen lain
![Page 9: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/9.jpg)
![Page 10: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/10.jpg)
![Page 11: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/11.jpg)
TITLE Merupakan tag dalam head yang harus dituliskan
untuk memberikan judul/informasi pada captionbrowser web Tentang topik/judul dari dokumen web yg
ditampilkan dalam browser<head>
<title>Judul…..
</title></head>
![Page 12: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/12.jpg)
• BODY– Merupakan section utama dalam dokumen
web– Semua isi dokumen akan ditampilkan di dalam
browser harus dituliskan<body>Tulisan yang akan ditampilkan sebagai informasi</body>
![Page 13: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/13.jpg)
![Page 14: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/14.jpg)
![Page 15: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/15.jpg)
<html><head><title>….informasi tentang dokument html ini…</title></head><body>….informasi yang akan ditampilkan dalam
browser web..</body></html>
![Page 16: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/16.jpg)
![Page 17: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/17.jpg)
![Page 18: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/18.jpg)
![Page 19: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/19.jpg)
![Page 20: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/20.jpg)
![Page 21: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/21.jpg)
![Page 22: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/22.jpg)
![Page 23: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/23.jpg)
![Page 24: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/24.jpg)
![Page 25: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/25.jpg)
![Page 26: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/26.jpg)
![Page 27: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/27.jpg)
![Page 28: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/28.jpg)
![Page 29: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/29.jpg)
![Page 30: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/30.jpg)
![Page 31: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/31.jpg)
![Page 32: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/32.jpg)
![Page 33: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/33.jpg)
Macam-macam link• Link ke Bagian Lain dalam Dokumen
– Link ke bagian lain dalam page yang sama– <a href=“#namabagian”>bagian lain</a> <html>
<body><a name ="Top"><a href="#B3">Lihat Bab 3</a><h2>Bab 1</h2>Ini isi Tulisan Bab 1<br><h2>Bab 2</h2>Ini Tulisan Bab 2<br><a name="B3"><h2>Bab 3</h2>Ini tulisan Bab 3</body></html>
![Page 34: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/34.jpg)
• Membuka Link untuk Window Baru– <a href=“http://www.google.com” target
=“_blank”>Google</a>
• Keluar dari suatu Frame– <a href=“http://www.google.com” target
=“_top”>Google</a>
• mailto– <a href=“mailto:[email protected]”
> Kirim Email</a>
![Page 35: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/35.jpg)
• Buat dua program sederhana dengan gayatulisan dan saling berhubungan denganmengunakan LINK, kemudian hubungkanjuga dengan web lain seperti : Yahoo, Google,Detik, Bina Darma dan lain-lain.
![Page 36: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/36.jpg)
<html><head><title>ukuran font</title></head><body><font size=1>ukuran font 1</font><br><font size=2>ukuran font 2</font><br><font size=3>ukuran font 3</font><br><font size=4>ukuran font 4</font><br><font size=5>ukuran font 5</font><br><font size=6>ukuran font 6</font><br><font size=7>ukuran font 7</font><br></body></html>
![Page 37: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/37.jpg)
<html><head><title>jenis font</title></head><body><font size=5><font face = "arial">arial , contoh ac milan <p><font face = "verdana">verdana , contohpersebaya <p><font face = "tahoma">tahoma , contohindonesia <p></body></html>
![Page 38: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/38.jpg)
<html><head><title>warna font</title></head><body><font size=5><font color= "red">yogyakarta <p><font color = "#ff0000">kota budaya<p><font color = "#00ff00">kotapariwisata dan pendidikan<p></body></html>
![Page 39: HTML - Bina Darma e-Journaleprints.binadarma.ac.id/824/1/PRAKTIKUM INTERNET MATERI 1.pdf · Materi : • Apa itu Dokument HTML • Penamaan Dokumen • Defenisi Elemen • Defenisi](https://reader031.vdokumen.com/reader031/viewer/2022021611/5c7eb4e809d3f2b93f8b9cff/html5/thumbnails/39.jpg)