Desain Pemograman Web

 

Pertemuan 5
Dosen: Fathoni A. Musyaffa
STKIP SURYA
Slide diadaptasi dari slide Pak Alfa Satyaputra

Bug dan Debug

  • Latihan Debugging (Moodle)
  • Elemen HTML untuk mengatur tampilan (<div>, <span>)
  • Pengenalan CSS
  • Bug dan Debug

Materi disadur dari: http://cs.wellesley.edu/~cs110/lectures/L03-html/HTML.html

Tampilan dari HTML yang kita buat kadang tidak sesuai dengan harapan, karena kesalahan pada kode HTML

Error/kesalahan didalam sebuah kode disebut dengan bug

Proses mencari dan menemukan bug/kesalahan tersebut adalah debug

Contoh-Contoh Bug

Beberapa contoh HTML bug:

  • Kesalahan mengeja nama tag: <tilte> atau <break>
  • Tag awal dipakai di akhir: <em>penting<em>
  • Kesalahan membentuk tag: <em penting</em>
  • Tag akhir tidak sesuai dengan tag awal: <h1>Ini adalah heading</h2>
  • Tag tidak “terbungkus” dengan benar: <h1><em>Ini adalah heading</h1><em>
  • Salah mengeja nama atribut: <img source=”logo.jpg” hieght=100>
  • Tanda kutip tidak sesuai: <img src=”logo.jpg height=100>

Mengatur Tampilan Website

  • Mengatur tampilan website dapat menggunakan tag <table> atau <div>
  • TIDAK disarankan untuk menggunakan <table> karena <table> didesain untuk membuat tabel.
  • Tag <div> menggunakan dua atribut:

          id: Nama untuk identifikasi <div> tersebut

           style: Pengaturan untuk elemen pada <div>

  • Dapat juga menggunakan CSS (Cascading Style Sheet)

CSS

  • Singkatan dari Cascading Style Sheet, digunakan untuk mengatur tampilan HTML
  • Dapat menggantikan beberapa tag dan atribut HTML seperti <center>,<font>,bgcolor, dan color
  • Dapat digunakan di file HTML dengan 3 cara berikut:

               . Inline – Dimasukkan langsung ke dalam tag HTML dengan atribut style. Contoh: <div id=“..” style=“..”>

               . Internal– Menggunakan elemen <style> pada bagian <head>di file HTML

               . External – Dengan sebuah file .css diluar file HTML, dihubungkan dengan tag <link> difile HTML

Inline CSS

  • Menggunakan atribut style pada elemen HTML yang akan diubah tampilannya
  • Dapat menggunakan semua properti CSS
  • Setiap properti memiliki dua bagian: nama dan nilai, seperti atribut HTML. Nama dan nilai dipisahkan dengan titik dua (:)
  • Setiap properti dipisahkan dengan titik koma (;)

Contoh Inline CSS:

   <h1 style=“background-color:red;color:orange”> Ini adalah Judul Website</h1>

Mengatur Tampilan Dengan <div> dan Inline CSS

  • Gunakan tag <div> dan properti CSS berikut:

       Position: Mengatur jenis posisi dengan value:

      Static – Tampil sesuai dengan urutan di kode, mulai dari kiri atas

       Absolute – Relatif sesuai dengan posisi elemen induknya

        Fixed – Relatif sesuai dengan tampilan browser

          Relative – Relatif dengan posisi normal

         Left/top/right/bottom: Posisi kiri/atas/kanan/bawah dari elemen tersebut, dengan value angka dalam pixel

          Width/height: Lebar/tinggi dari elemen tersebut, dengan value angka dalam pixel

Contoh <div>

Contoh:

<div style=”position:absolute;left:100px;width:300px”>

<h1 style=”background-color:red;color:orange”>Ini adalah Judul Website</h1>

</div>

Hasil:

 

Menggunakan Internal CSS

       . Internal CSS digunakan dengan menggunakan tag <style> didalam tag <head>

        . <style> memiliki atribut type dengan nilai text/css

         . Semua properti CSS ditempatkan dalam tag <style>, BUKAN sebagai atribut, dengan sintaks seperti berikut:

Contoh Internal CSS

<head>

<style type=“text/css”>

h1 {color:blue;background-color:orange}

</style>

</head>

<body>

<h1>Ini adalah heading dengan CSS</h1>

</body>

 

Menggunakan External CSS

  • Kita dapat membuat file CSS diluar file HTML sebagai sumber untuk mengatur tampilan dalam file HTML tersebut
  • File CSS tersebut berisi properti CSS, dengan format yang sama seperti internal CSS
  • File HTML harus mengandung link ke File CSS dengan menggunakan tag <link> didalam tag <head> seperti contoh berikut:

<head>

          <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

Contoh External CSS

  • Contoh penggunaan external CSS dapat dilihat di link berikut:
  • Halaman tersebut menggunakan sebuah file HTML yang sama dengan beberapa CSS yang berbeda untuk mengubah tampilan.

Tugas 

  • Lihat slide no. 15. Ketik ulang isinya. simpan dalam format HTML.
  • Ubah file HTML tadi sehingga menampilkan tampilan seperti slide 16. Ikuti petunjuk yang ada. Gunakan External CSS.
  • Simpan file CSS dalam sebuah file.

 

Selamat membaca dan mencoba

  • Masukkan file HTML dan CSS-nya dalam file *.tar.gz.
  • Upload file tar.gz ke moodle.

 

 

 

Desain Pemograman Web

Pertemuan 5
Dosen: Fathoni A. Musyaffa
            
STKIP SURYA
Slide diadaptasi dari slide Pak Alfa Satyaputra

  • Bug dan Debug
  • Latihan Debugging (Moodle)
  • Elemen HTML untuk mengatur tampilan (<div>, <span>)
  • Pengenalan CSS

Bug dan Debug

  • Tampilan dari HTML yang kita buat kadang tidak sesuai dengan harapan, karena kesalahan pada kode HTML
  • Error/kesalahan didalam sebuah kode disebut dengan bug
  • Proses mencari dan menemukan bug/kesalahan tersebut adalah debug

Contoh-contoh Bug

Beberapa contoh HTML bug:

  • Kesalahan mengeja nama tag: <tilte> atau <break>
  • Tag awal dipakai di akhir: <em>penting<em>
  • Kesalahan membentuk tag: <em penting</em>
  • Tag akhir tidak sesuai dengan tag awal: <h1>Ini adalah heading</h2>
  • Tag tidak “terbungkus” dengan benar: <h1><em>Ini adalah heading</h1><em>
  • Salah mengeja nama atribut: <img source=”logo.jpg” hieght=100>
  • Tanda kutip tidak sesuai: <img src=”logo.jpg height=100>

Mengatur Tampilan Website

  • Mengatur tampilan website dapat menggunakan tag <table> atau <div>
  • TIDAK disarankan untuk menggunakan <table> karena <table> didesain untuk membuat tabel.
  • Tag <div> menggunakan dua atribut:

           id: Nama untuk identifikasi <div> tersebut
           style: Pengaturan untuk elemen pada <div>

  • Dapat juga menggunakan CSS (Cascading Style Sheet)

CSS

  • Singkatan dari Cascading Style Sheet, digunakan untuk mengatur tampilan HTML
  • Dapat menggantikan beberapa tag dan atribut HTML seperti <center>,<font>,bgcolor, dan color
  • Dapat digunakan di file HTML dengan 3 cara berikut:

           . Inline – Dimasukkan langsung ke dalam tag HTML dengan atribut style. Contoh: <div id=“..” style=“..”>
           . Internal – Menggunakan elemen <style> pada bagian <head> di file HTML
           . External – Dengan sebuah file .css diluar file HTML, dihubungkan dengan tag <link> difile HTML

 

Kelebihan Blog/Bloger

Beberapa kelebihan dari blog yaitu sifatnya berdiri sendiri sebagai media, selain itu blog juga cenderung non-formal dalam penggunaan bahasa yang dipakainya danjuga tidak ada pembayaran internet hanya gratis.

Blog memungkinkan terjadinya iteraktifitas atara sember dengan penerima informasi. Informasi yang disampaikan akan langsung direspon,dikoreksi dan diperkaya oleh orang lain. Oleh karena itu, suatu topic mungkin bisa menjadi lebih menarik dengan adanya diskusi antara blooger dengan pengunjung weblognya.
Weblog adalah media yang digunakan secara personal, baik individual maupun institusional. Tidak ada persyaratan personal yang diberikan dari pihak manapun untuk bisa memiliki dan mengelola weblog sendiri. Formatnya yang mudah diaplikasikan dan pengelolaannya yang tidak rumit membuat media ini bisa diopersikan oleh siapapun. Tidak diperlukan kemampuan teknis atau kemampuan dasar jurnalisme untuk mempublikasikan informasi dalam weblog.

Tenteng Blog

Sebuah blog adalah buku harian pribadi. Mimbar saya setiap hari,berita terkini,Koleksi link.dan bagimana mencamtumkan pikiran saya itu mau berbagi kepada sahabat-sahabat saya dan orang lain di Dunia.

Dalam terminologi sederhana, sebuah blog adalah sebuah situs web, di mana aku menuliskan hal-hal yang berbasis peristiwa yang sedang berlangsung. Hal yang baru tampil di paling atas, sehingga pengunjung saya dapat membaca apa yang baru. Kemudian mereka dapat mengomentarinya atau menambahkan link.

Sejak Blogger diluncurkan pada 1999, blog telah mengubah bentuk web, mempengaruhi politik, mempertajam jurnalisme, dan memungkinkan jutaan orang untuk memiliki suara dan terhubung dengan yang lain.
Blog Juga sebuah tempat untuk mengumpulkan dan berbagi hal-hal yang kami angggap menarik,baik itu komentar politik saya dan link ke situs web yang lain.

Sebua Blogging lebih dari sekedar meletakkan pemikiran saya di web. Blogging adalah mengenai terhubung dan mendengar dari siapapun yang membaca pekerjaan saya dan peduli untuk memberi respon. Dengan blogger,saya dapat mengendalikan siapa yang dapat membaca dan menulis ke blog saya — ijinkan hanya beberapa teman saya atau bisa juga se-dunia terkini.