Struktur Dasar HTML     •Pendahuluan     •Struktur HTML     •Elemen & Tag HTML© B.Very Christioko, S.Kom
Pendahuluan   HTML?   Sebuah bahasa markup yang digunakan untuk membuat   sebuah halaman web dan menampilkan berbagai info...
Ciri-ciri dokumen HTML     • Ekstensi file berupa .htm atau .html     • Non case sensitive.     • Terdiri atas tag‐tag pem...
Program Editor HTML    (search di google)© B.Very Christioko, S.Kom
Program editor yang kita gunakan?© B.Very Christioko, S.Kom
Program untuk melihat hasil web?© B.Very Christioko, S.Kom
Struktur HTML     • Document Information       <html></html>     • Document Header       <head></head>     • Document Body...
Contoh Dokumen HTML© B.Very Christioko, S.Kom
Dokumen HEADER     • Page Title       Judul dari halaman web       cth : <title></title>     • Scripting       Tempat clie...
Dokumen HEADER     • Style       Dipergunakan untuk mengatur bagaimana       sebuah halaman web dengan berbagai       komp...
Contoh Document Header© B.Very Christioko, S.Kom
Document Body     • Bagian dari dokumen web yang akan       ditampilkan ke user       cth : <body></body>       Bagian ini...
Elemen dan tag HTML     • Dua komponen utama pembentuk dokumen HTML       adalah Elemen dan Tag Dengan adanya dua komponen...
Elemen dan tag HTML        ▫ Tag          Pada saat web browser menampilkan suatu web          page, browser tersebut akan...
Elemen dan tag HTML        ▫ Atribut          Atribut mendefinisikan properti untuk elemen,          terdiri dari pasangan...
Catatan• HTML tidak membedakan penulisan huruf besar dan  huruf kecil pada penulisan elemen maupun tag.  Penulisan <i> dan...
Tag, Attribut & Element© B.Very Christioko, S.Kom
Penulisan syntax yang baik     • Penulisan program yang baik adalah secara       terstruktur. Artinya antara tag pertama d...
Penulisan tag    • Terdapat beberapa cara penulisan tag dalam      HTML,sbb:       ▫ Tag dengan pembuka & penutup         ...
Contoh tidak baik    <html> <head> <title>Modul Pengantar Ilmu Komputer</title>    </head> <body> <h1>Klasifikasi dan Kegu...
Contoh yang baik    <html>    <head>       <title>Modul Pengantar Ilmu Komputer</title>    </head>    <body>       <h1>Kla...
Hasil (dilihat dengan browser IE)© B.Very Christioko, S.Kom
Penjelasan Syntax HTML• Perintah HTML digunakan sebagai awalan untuk suatu  dokumen html.• Perintah HEAD digunakan untuk m...
Referensi (Tag & atribut)     • http://www.w3schools.com/tags/default.asp     • http://www.htmlquick.com/tutorials/tags-  ...
Tugas 1:• Buat ringkasan tentang sintax HTML beserta  atributnya.berikan contoh!• Format ringkasan sbb: ▫ Tag & penjelasan...
Upcoming SlideShare
Loading in …5
×

2.struktur dasar html (ok)

2,562 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,562
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2.struktur dasar html (ok)

  1. 1. Struktur Dasar HTML •Pendahuluan •Struktur HTML •Elemen & Tag HTML© B.Very Christioko, S.Kom
  2. 2. Pendahuluan HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. • HTML berupa kode‐kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. • HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C)© B.Very Christioko, S.Kom
  3. 3. Ciri-ciri dokumen HTML • Ekstensi file berupa .htm atau .html • Non case sensitive. • Terdiri atas tag‐tag pembuka dan penutup (walaupun ada beberapa tag yang tidak memiliki penutup). • Tag‐tag saling berpasangan & bersarang.© B.Very Christioko, S.Kom
  4. 4. Program Editor HTML (search di google)© B.Very Christioko, S.Kom
  5. 5. Program editor yang kita gunakan?© B.Very Christioko, S.Kom
  6. 6. Program untuk melihat hasil web?© B.Very Christioko, S.Kom
  7. 7. Struktur HTML • Document Information <html></html> • Document Header <head></head> • Document Body <body></body>© B.Very Christioko, S.Kom
  8. 8. Contoh Dokumen HTML© B.Very Christioko, S.Kom
  9. 9. Dokumen HEADER • Page Title Judul dari halaman web cth : <title></title> • Scripting Tempat client‐side script yang disertakan (javascript, vbscript, jscript) cth : <script></script>© B.Very Christioko, S.Kom
  10. 10. Dokumen HEADER • Style Dipergunakan untuk mengatur bagaimana sebuah halaman web dengan berbagai komponennya hendak ditampilkan ke dalam browser cth : <style></style> • Meta Meta tags, descriptions & keywords untuk mempermudah search engine dalam melakukan indexing. cth : <meta></meta>© B.Very Christioko, S.Kom
  11. 11. Contoh Document Header© B.Very Christioko, S.Kom
  12. 12. Document Body • Bagian dari dokumen web yang akan ditampilkan ke user cth : <body></body> Bagian ini memuat : ▫ Teks & gambar ▫ Link ▫ Server Side Script ▫ Multimedia and Special Programmed Events (Shockwave,SWFs, Java Applets, online video)© B.Very Christioko, S.Kom
  13. 13. Elemen dan tag HTML • Dua komponen utama pembentuk dokumen HTML adalah Elemen dan Tag Dengan adanya dua komponen ini, maka kita dapat membuat dokumen HTML dengan baik. ▫ Elemen 1. <HEAD>  informasi tentang dokumen tersebut, seperti judul dokumen atau hubungannya dengan dokumen lain. 2.<BODY>  menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain.© B.Very Christioko, S.Kom
  14. 14. Elemen dan tag HTML ▫ Tag Pada saat web browser menampilkan suatu web page, browser tersebut akan membaca isi pada dokumen HTML, dan mencari kode khusus yang disebut tag. Tag diapit oleh tanda <>. Tag biasanya merupakan pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> sedang tag akhir dinyatakan dalam bentuk </nama tag>. • Format umum suatu tag berpasangan adalah : <nama tag> Teks yang akan ditampilkan </nama tag>© B.Very Christioko, S.Kom
  15. 15. Elemen dan tag HTML ▫ Atribut Atribut mendefinisikan properti untuk elemen, terdiri dari pasangan atribut / nilai, dan muncul dalam tag pembuka elemen. Tag awal sebuah elemen mungkin mengandung sejumlah atribut yang dipisahkan oleh spasi. Contoh: <img src="foobar.gif" alt=“This is a foo.“>© B.Very Christioko, S.Kom
  16. 16. Catatan• HTML tidak membedakan penulisan huruf besar dan huruf kecil pada penulisan elemen maupun tag. Penulisan <i> dan <I> dianggap sama, campuran antara huruf besar dan kecil pun tidak berpengaruh <i>text</I>• Tidak semua tag didukung oleh semua browser. Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalnya dan menuliskan isi di dalam tag tersebut sebagai teks biasa.
  17. 17. Tag, Attribut & Element© B.Very Christioko, S.Kom
  18. 18. Penulisan syntax yang baik • Penulisan program yang baik adalah secara terstruktur. Artinya antara tag pertama dan tag berikutnya tidak saling tumpang tindih.© B.Very Christioko, S.Kom
  19. 19. Penulisan tag • Terdapat beberapa cara penulisan tag dalam HTML,sbb: ▫ Tag dengan pembuka & penutup  <nama tag>teks</nama tag> ▫ Tag tanpa penutup  <nama tag/> ▫ Tag dengan pembuka & penutup disertai atribut  <nama tag antribut=argumen>teks</nama tag> ▫ Tag tanpa penutup disertai atribut  <nama tag atribut1=argumen atribut2=argumen/>© B.Very Christioko, S.Kom
  20. 20. Contoh tidak baik <html> <head> <title>Modul Pengantar Ilmu Komputer</title> </head> <body> <h1>Klasifikasi dan Kegunaan Komputer</h1> Komputer berasal dari kata <i>to compute</i> yaitu menghitung.Jadi pada awalnya komputer hanya digunakan sebagai alat hitung, namun perbedaan yang mendasar dengan kalkulator adalah bahwa komputer mempunyai perkembangan zaman, komputer digunakan manusia untuk memproses pemecahan masalah. <hr> Untuk lebih jelas tentang kegunaan komputer, komputer dibagi dalam beberapa klasifikasi, yaitu : <h5> <ol> <li><a href="jenis_data.html">Berdasarkan Jenis Data Yang Diolah </a> </li> <li><a href="kemampuan.html">Berdasarkan Kemampuan Komputer </a> </li> <li><a href="ukuran_fisik.html>Berdasarkan Ukuran Fisik</a></li> <li><a href="bidang_masalah.html> Berdasarkan Bidang Masalah </a> </li> </ol></h5> </body> </html>© B.Very Christioko, S.Kom
  21. 21. Contoh yang baik <html> <head> <title>Modul Pengantar Ilmu Komputer</title> </head> <body> <h1>Klasifikasi dan Kegunaan Komputer</h1> Komputer berasal dari kata <i>to compute</i> yaitu menghitung.Jadi pada awalnya komputer hanya digunakan sebagai alat hitung, namun perbedaan yang mendasar dengan kalkulator adalah bahwa komputer mempunyai perkembangan zaman, komputer digunakan manusia untuk memproses pemecahan masalah. <hr> Untuk lebih jelas tentang kegunaan komputer, komputer dibagi dalam beberapa klasifikasi, yaitu : <h5> <ol> <li><a href="jenis_data.html">Berdasarkan Jenis Data Yang Diolah</a></li> <li><a href="kemampuan.html">Berdasarkan Kemampuan Komputer </a></li> <li><a href="ukuran_fisik.html">Berdasarkan Ukuran Fisik</a></li> <li><a href="bidang_masalah.html">Berdasarkan Bidang Masalah </a></li> </ol> </h5> </body> </html>© B.Very Christioko, S.Kom
  22. 22. Hasil (dilihat dengan browser IE)© B.Very Christioko, S.Kom
  23. 23. Penjelasan Syntax HTML• Perintah HTML digunakan sebagai awalan untuk suatu dokumen html.• Perintah HEAD digunakan untuk menunjukkan bagian judul dokumen. Sifatnya opsional (boleh ditulis/tidak)• Perintah TITLE digunakan untuk memberikan judul pada masing.masing dokumen. Judul ini akan ditampilkan dibagian atas web browser.• Perintah BODY menunjukkan bagian isi dari dokumen html tersebut.• Perintah H1 digunakan untuk penetapan besar huruf (heading). Apabila angka yang menyertai huruf H semakin besar, maka huruf semakin kecil.• Perintah HR digunakan untuk membuat garis• Perintah OL digunakan untuk membuat daftar. LI untuk isi daftar.• Perintah A HREF digunakan untuk membuat link.
  24. 24. Referensi (Tag & atribut) • http://www.w3schools.com/tags/default.asp • http://www.htmlquick.com/tutorials/tags- attributes.html • http://www.tizag.com/htmlT/htmlattributes.ph p© B.Very Christioko, S.Kom
  25. 25. Tugas 1:• Buat ringkasan tentang sintax HTML beserta atributnya.berikan contoh!• Format ringkasan sbb: ▫ Tag & penjelasannya ▫ Atribut setiap tag & penjelasannya ▫ Contoh penggunaan tag & atribut

×