1 / 26

Perancangan Web Pertemuan II

Perancangan Web Pertemuan II. Team Teknik Elektro UHAMKA esaitb@yahoo .com. HTML. HTML. HTML ( HyperTextMarkup Language ) Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.

hamish-warren
Download Presentation

Perancangan Web Pertemuan II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Perancangan WebPertemuan II Team Teknik Elektro UHAMKA esaitb@yahoo.com

  2. HTML

  3. HTML • HTML (HyperTextMarkup Language) • Sebuahbahasa markup yang digunakanuntukmembuatsebuahhalaman web danmenampilkanberbagaiinformasididalamsebuah browser. • Markup : informasitambahan yang ditempatkanpadateksuntukmenjelaskanbagaimanatekstersebutdiinterpretasi

  4. HTML • HTML berupakode-kode tag yang menginstruksikan browser untukmenghasilkantampilansesuaidengan yang diinginkan. • HTML saatinimerupakanstandar Internet yang didefinisikandandikendalikanpenggunaannyaolehWorld Wide Web Consortium (W3C). • HTML merupakanbahasabertandamenggunakanrangkaiantekstertentu(tag)untukmenandaiteksyang mempunyaiinterpretasikhusus. • File HTML berupafile teks(plain text file), bukanbinary file.

  5. Sejarah HTML • HTML 2.0 • (RFC1866) disetujuisebagai standard pada 22 September 1995 • HTML 3.2 (14 Januari 1996) • HTML 4.0 (18 Desember 1997) • ISO/IEC 15445:2000 “ISO HTML” • berdasarpadaHTML 4.01 Strict –15 Mei 2000 • XHTML 1.0 (gabungan HTML & XML24 Januari 2000) • XHTML 1.1 (16 February 2007)

  6. Ciri–ciriDokumen HTML • Ekstensi file berupa.htmatau .html • Non case sensitive • Terdiriatas tag-tag pembukadanpenutup (walaupunadabeberapa tag yang tidakmemilikipenutup). • Tag-tag salingberpasangan & bersarang.

  7. PenulisanTag • Tag dibentukolehsuatukata(keyword) yangdiapitolehtandakurunglancip(<tag>). • Tagbolehditulisdalamhurufkecilmaupunkapital. • Tag harusberpasangan, yaitutag awaldiikutitag akhir, kecualitag tunggal. (<p> teks</p> <br>) • Diantaratag awaldantag akhirbisaterdapattag lain • Penulisantag tidakbolehtumpangtindih • <tag1><tag2> teks</tag1></tag2> →penulisanyang salah • <tag1><tag2> teks</tag2></tag1> →penulisanyang benar

  8. Struktur HTML • Document Information • <html></html> • Document Header • <head></head> • Document Body • <body></body>

  9. StrukturStandarDokumen HTML

  10. ContohDokumen HTML

  11. Document Header • Page Title • Juduldarihalaman web • Contoh: <title></title> • Scripting • Tempatclient‐side script yang disertakan (javascript,vbscript, jscript). • Contoh: <script></script>

  12. Document Header • Style • Dipergunakanuntukmengaturbagaimanasebuahhalaman web denganberbagaikomponennyahendakditampilkankedalam browser . • Contoh : <style></style> • Meta • Meta tags, descriptions & keywords untukmempermudahsearch engine dalammelakukan indexing. • Contoh: <meta></meta>

  13. Contoh Document Header

  14. Document Body • Bagiandaridokumen web yang akanditampilkanke user • Contoh : <body></body> • Bagianinimemuat : • Teks & gambar • Link • Server Side Script(PHP, ASP, JSP) • Multimedia and Special Programmed Events (Shockwave, SWFs, Java Applets, online video)

  15. Tag HTML

  16. Tag, Atribut, Elemen

  17. Struktur Tag • Tag pembuka • < > • Tag penutup • </ > • Contoh : <p>Iniparagraf</p> • Single Tag • < /> • Contoh : <br />, <input />, <img />

  18. Tag Heading • Berfungsiuntukmenuliskanjudul& sub‐judul

  19. Tag Paragraf, HR, dan BR • Untukmembuatparagrafbaru, membuat text beradadalamsebuahparagraf. Tag paragrafbisamemiliki tag penutup, bisajugatidak.

  20. Font Tag • Untukmengaturpenggunaantulisandalamhalaman web (jenistulisan, ukuran, warna, dll). • Tag lain untukmanipulasi Font:

  21. Font Tag

  22. Image Tag • Untukmemuatgambarkedalamhalaman web. • Tag image memilikibeberapa attribute : • Src :lokasigambar yang akanditampilkan • Width :ukuranlebargambar • Height :ukurantinggigambar • Alt : deskripsitentanggambar • Title : judulgambar • Contoh : <imgsrc=“foto.jpg”/>

  23. Image Tag

  24. Anchor / Hyperlink Tag • Dipergunakanuntukmenghubungkan (linking) text dan image kehalaman lain ataubagiantertentudarihalaman yang samadalamsatu website atau website yang lain. • Contoh • Link ke halaman website lain <a href=“http://www.yahoo.com”>Yahoo</a> • Link ke file lain dalamsatu website <a href=“produk.html”>Produk</a>

  25. Anchor / Hyperlink Tag • Untuk mengakses bagian tertentu dalam sebuah halaman website, maka bagian halaman tersebut harus diberi penanda. • Contoh • Penandapadabagianhalaman <a id=“atas”>iniadalahalineapertama</a> • Link ke file yang sama <a href=“#atas”>Kembali ke Atas</a>

  26. Tag Komentar • Berfungsisebagaipembungkusdokumen HTML ataukomentar, agar tidakterbacaoleh browser.

More Related