Topic outline

  • ** SELAMAT DATANG **



    Desain Web


    Assalamu'alaikum Wr..Wb..

    Selamat datang rekan-rekan mahasiswa yang saya banggakan..selamat datang di perkuliahan Desain Web untuk mahasiswa Program Studi Pendidikan Matematika yang dilakukan secara Daring. Semoga kita semua senantiasa dalam lindungan Allah SWT, senantiasa diberi kesehatan, sehingga selalu diberikan kelancaran dalam menjalankan segala aktivitas, dan senantiasa menjadi motor bagi kemajuan dan perubahan di negeri kita tercinta ini..

    Matakuliah ini ditujukan kepada mahasiswa jenjang sarjana yang sedang mengambil matakuliah Desain Web bagi mahasiswa Program Studi Pendidikan Matematika. Mengingat skill pengembangan media-media berbasis web sekarang ini begitu krusial, Matakuliah ini akan membimbing kalian agar mampu mengembangkan media media edukasi berbasis web, sehingga kemampuan tersebut dapat mendukung kompetensi profesional sebagai seorang guru matematika di era revolusi industri 4.0 ini.

    Akhirnya saya ucapkan selamat belajar, jangan pernah lelah untuk belajar, tetap semangat, semoga ilmu yang dipelajari membawa manfaat..aamiin..sekian

    Wassalamu'alaikum Wr.Wb  



    • DESKRIPSI MATAKULIAH

      Mengapa Kita Perlu Belajar Desain Web..?? Video berikut sedikit memberikan gambaran


      Pendidikan ke depan pun juga akan memanfaatkan Web dalam kegiatan pembelajarannya..saksikan video berikut !!


      Kemampuan dan pengetahuan tentang mendesain sebuah web untuk kerperluan pembelajaran saat ini memegang peran yang sangta penting. Hampir setiap hari saat ini siswa hidup dengan perangkat pintar dan akses internet, sehingga guru perlu mengembangkan media yang menarik dan mudah diakses oleh siswa yaitu  melalui media berbasis web. Matakuliah Desain Web ini memiliki Capaian Pembelajaran (CP) sebagai berikut:    

      CP

      Sementara itu Peta Kompetensi matakuliah ini disajikan sebagai berikut:

      peta

      Dalam matakuliah ini akan dibahas beberapa hal yaitu :

      1. Memahami konsep web statis dan elemen dasar HTML
      2. Mendesain artikel dalam HTML
      3. Mendesain form dalam HTML
      4. Menggunakan CSS dalam tag HTML
      5. Menggunakan CSS dalam class HTML
      6. Menggunakan animasi dan transisi CSS pada HTML
      7. Menggunakan CSS dalam responsive HTML
      8. Menggunakan JavaScript untuk pemrosesan form
      9. Menggunakan JavaScript untuk pemrosesan konten
      10. Pengembangan web untuk pembelajaran matematika

    • PROSEDUR PELAKSANAAN PERKULIAHAN

      Mahasiswa yang mengikuti Perkuliahan Daring ini, membutuhkan waktu antara 4 - 6 bulan untuk menyelesaikan seluruh materi, tugas, sampai dengan evaluasi akhir. Adapun prosedur untuk menempuh matakuliah ini adalah sebagai berikut :

      ok
      1. Mahasiswa diwajibkan untuk membaca seluruh materi perkuliahan yang telah disajikan per bab atau topik, wajib mengerjakan setiap tugas yang diberikan pada setiap sesi, dilanjutkan dengan aktif berdiskusi pada forum yang telah disediakan
      2. Setiap dua topik selesai, mahasiswa diwajibkan untuk mengerjakan tugas formatif dan wajib dikumpulkan tidak lebih dari satu bulan
      3. Setelah mahasiswa memahami setengah dari keseluruhan topik yang disajikan, maka mahasiswa dapat mengikuti Ujian Tengah Smester (UTS) 
      4. Semua aktivitas yang dilakukan mahasiswa terkait perkuliahan ini harus terekam di LMS http://elearning.stkippgritulungagung.ac.id dan akan menjadi bagian dari penilaian akhir matakuliah ini 

      METODE EVALUASI

      Capaian Pembelajaran mahasiswa Perkuliahan Daring, diharuskan sama dengan mahasiswa yang menempuh perkuliahan secara tatap muka. Hal ini memberikan konsekuensi bahwa aspek penilaian perkuliahan daring haruslah multi dimensi dan berjalan dengan lebih ketat. Indikator yang digunakan meliputi :

      1. Keaktifan mengikuti forum diskusi
      2. Frekuensi dan keteraturan dalam mengakses berbagai sumber belajar yang disajikan dalam LMS yan digunakan
      3. Kuantitas / frekuensi dalam mengikuti sesi pertemuan virtual dengan dosen baik secara sinkronus maupun asinkronus serta kualitas interaksinya
      4. Ketepatan waktu dalam pengumpulan tugas serta kualitas hasil tugas yang dikumpulkan
      5. Partisipasi aktif pengerjaan soal-soal latihan yang diberikan
      6. Hasil UTS dan UAS

      Perlu diperhatikan bahwa semua indikator yang digunakan dalam penilaian tersebut memiliki bobot yang hampir sama karena sifatnya yang holistik. Adapun nilai dari penilaian matakuliah ini ditentukan sebagai berikut :

      nilai

    • INFORMASI DOSEN PENGAMPU

      Nama  : Dr. Tomi Listiawan, S.Si.,M.Pd.,MCE.
      NIDN : 0722048503
      TTL : Tulungagung, 22 April 1985
      Agama : Islam
      Alamat Kantor : Jln. Mayor Sujadi Timur No.7 Tulungagung 66221
      Alamat Rumah : RT 2 RW 1 Ds. Banjarejo Kec Rejotangan Kab Tulungagung
      HP : 085736795370
      Email : tomi@stkippgritulungagung.ac.id

    • BUKU LITERATUR

      A Book Apart: CSS3 For Web Designers

      BOOK 1

      Buku ini dapat didownload melalui link ini 

      Speaking in Styles: Fundamentals of CSS for Web Designers

      book2

      Buku ini dapat didownload melalui link ini 

    • Rencana Pembelajaran Semester (RPS) File

      Download file berikut untuk mengakses RPS yang menyajikan rencana topik-topik perkuliahan selama satu semester 

  • #1 Konsep Web Statis dan Elemen Dasar HTML

    A.   TUJUAN

    1.    Mampu menjelaskan perbedaan web statis dan dinamis

    2.    Mampu menggunakan elemen dasar HTML dalam pembuatan halaman web statis sederhana

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • Konsep Dasar Web Statis dan Web Dinamis Lesson

      Web berdasarkan teknologinya terbagi menjadi dua, yaitu Web Statis dan Web Dinamis. Sebelum menuju ke perbedaan web statis dan web dinamis, mari kita bahas persamaannya terlebih dahulu. Persamaan web statis dan web dinamis yaitu sama-sama keduanya merupakan suatu website yang menampilkan halaman yang ditampilkan di internet yang memuat informasi tertentu (khusus). Selanjutnya mari kita bahas pengertian dan perbedaan web statis dan web dinamis.


    • # Intro to HTML


    • Konsep Dasar HTML Lesson

      Materi ini memberikan gambaran secara komprehensif tentang konsep dasar penggunaan bahasa HTML. Simak video berikut untuk mengetahui penggunaan elemen, tag dan atribut.



      Setelah menyimak video di atas, silahkan menngakses materi Konsep Dasar HTML
    • Tugas 1 Assignment

      Kerjakan tugas berikut ini secara individu, dan kumpulkan sesuai dengan waktu yang telah ditentukan:

      1. Jelaskan perbedaan web statis dan web dinamis

      2. Bagaimanakah kelebihan web dinamis jika dibandingkan dengan web statis

      3. Buatlah sebuah file html dasar yang mencantumkan profil / data diri Anda !

       

    • Chat - Konsep Dasar Website

      tuliskan segala permasalahan anda dalam mempelajari materi ini melalui Chat ini

    • w3schools.com URL

      w3schools.com merupakan halaman website yang banyak digunakan untuk belajar desain web mulai dari hal-hal dasar sampai mahir. Di w3schools.com terdapat tutorial penggunaan semua perintah HTML dan secara on the fly mahasiswa dapat mencoba setiap perintah HTML dan langsung mengetahui hasil dari kode yang dibuat. selamat mencoba

    • WIKI - Seputar HTML, Web Statis, Web Dinamis

      Untuk memperluas wawasan anda tentang HTML, Web Statis, dan Web dinamis, silahkan berperan serta dalam penulisan WIKI berikut ini. kontribusi anda terhadap tulisan di WIKI ini menjadi unsur dalam penilaian tugas 1

  • #2 Mendesain Artikel dalam HTML

    A.   TUJUAN

    1.    Mampu membuat heading dalam HTML

    2.    Mampu membuat paragraph dalam HTML

    3.    Mampu membuat link dalam HTML

    4.    Mampu menyisipkan image dalam HTML

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • DASAR TEORI

      1.    Heading

      Merupakan tag yang digunakan sebagai judul. Heading dalam HTML dituliskan sebagai tag <h1>, <h2>, <h3> ... <h6>. <h1> akan memproduksi teks dengan ukuran yang paling besar, sedangkan <h6> yang paling kecil. Ukuran teks tersebut menandakan tingkat kepentingan suatu judul. Heading dalam HTML digunakan search engine untuk mengindeks website kita, sehingga penggunaannya cukup penting.

      contoh penggunaan

      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>

      2.    Paragraph

      Merupakan tag yang digunakan sebagai paragraf. Dituliskan sebagai tag <p>. Paragraph digunakan untuk mempermudah kita dalam mengatur tata letak teks.

      Contoh penggunaan:

      <p>This is a paragraph.</p>

      <p>This is a paragraph.</p>

      <p>This is a paragraph.</p>

      3.    Link

      Dalam konteks HTML merupakan tautan yang menghubungkan satu halaman web ke halaman lainnya. Dideskripsikan sebagai tag <a>, dengan atribut utama href dan target. Link dalam HTML terdiri dari 2 (dua) macam, yaitu link internal dan link eksternal. Link internal digunakan untuk menghubungkan antar heading atau elemen lain (diawali dengan # pada href). Link eksternal digunakan untuk menghubungkan ke halaman web lain (diawali dengan http:// pada href).

      Contoh penggunaan:

      <a href="https://www.w3schools.com">Visit W3Schools.com!</a>

      4.    Image

      Merupakan gambar yang dapat kita sisipkan pada dokumen HTML. Ditulis sebagai tag <img>, dengan atribut utama src, width dan height. Atribut src merupakan source atau sumber file gambar kita, width adalah lebar, dan height adalah tinggi. Jenis file gambar yang biasanya disisipkan dalam halaman web adalah JPG, PNG, dan GIF.

      Contoh penggunaan:

      <img src="smiley.gif" alt="Smiley face" width="42" height="42">

    • Modul / Materi Tutorial File

      Ikuti langkah-langkah pada modul berikut untuk memulai belajar tentng bagaimana mendesain arttikel dalam HTML 

    • Tutorial - Dasar penggunaan perintah HTML Page

      Ikuti tutorial berikut sebagai latihan dalam menggunakan perintah-perintah dasar HTML


    • Chat Permasalahan Materi #2 - Mendesain Artikel HTML

      Gunakan menu ini sebagai sarana untuk berinteraksi dengan dosen maupun sesama mahasiswa terkait pembelajaran #2  

    • Forum Diskusi - Mendesain Artikel dalam HTML

      Forum diskusi ini digunakan untuk membahas segala permasalahan yang terkait dengan perkuliahan pada materi Mendesain Artikel dalam HTML 

    • Tugas 2 - Mendesain Artikel Assignment

      Buatlah artikel dalam HTML menggunakan heading, paragraph, link, dan gambar dengan ketentuan: jika link pada daftar isi diklik, maka langsung menuju sub judul yang dimaksud, kemudian jika back to top diklik maka langsung kembali ke daftar isi.

      Tampilan akhir sebagai berikut:

      1

      2

      3

  • #3 Mendesain form dalam HTML

    A.   TUJUAN

    1.    Mampu membuat form dalam HTML

    2.    Mampu menggunakan input dalam HTML

    3.    Mampu menggunakan select dalam HTML

    4.    Mampu menggunakan textarea dalam HTML

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • DASAR TEORI

      1.    Form

      Merupakan tag dalam HTML yang digunakan untuk menampilkan halaman input data. Form diawali dengan tag <form> dan diakhiri dengan tag </form>. Attribute yang sering digunakan dalam form adalah name, yang digunakan sebagai pengidentifikasi nama form tersebut.

      Contoh penggunaan:

      <form action="/action_page.php" method="get">

        First name: <input type="text" name="fname"><br>

        Last name: <input type="text" name="lname"><br>

        <input type="submit" value="Submit">

      </form>

      2.    Input

      Merupakan tag yang digunakan sebagai input data. Dituliskan dalam tag <input>. Input tidak mempunyai tag penutup, hanya pembuka saja. Attribute yang sering dipakai dalam tag input adalah name, type dan value. Name digunakan sebagai pengidentifikasi nama, type digunakan sebagai penentu tampilan input, dan value digunakan sebagai penentu nilai atau isian data. Terdapat beberapa type dalam input, diantaranya adalah: text, password, checkbox, radio, hidden, submit dan button.

      Contoh penggunaan:

      <form action="/action_page.php">

        First name: <input type="text" name="fname"><br>

        Last name: <input type="text" name="lname"><br>

        <input type="submit" value="Submit">

      </form>

      3.    Select

      Merupakan tag yang digunakan untuk menampilkan daftar pilihan (drop down list). Diawali dengan tag <select> dan diakhiri dengan tag </select>. Select hanya sebagai bingkainya saja, untuk menambahkan daftar isian, kita harus menggunakan tag <option> di dalamnya. Attribute dalam select yang sering digunakan adalah name, sedangkan attribute dalam option yang sering digunakan adalah value.

      Contoh penggunaan:

      <select>

        <option value="volvo">Volvo</option>

        <option value="saab">Saab</option>

        <option value="mercedes">Mercedes</option>

        <option value="audi">Audi</option>

      </select>

      4.    Text Area

      Merupakan tag yang digunakan sebagai input data dalam skala besar. Secara fungsi, sama persis dengan tag input bertipe text, akan tetapi yang membedakan adalah tampilannya saja. Text area diawali dengan tag <textarea> dan ditutup dengan tag </textarea>. Attribute yang sering digunakan adalah name, sebagai pengidentifikasi nama.


      Contoh penggunaan:

      <textarea rows="4" cols="50">

        Saya belajar desai website untuk membuat portal matematika 

      </textarea>


    • Chat Topik #3 - Mendesain Form HTML

      Gunakan menu ini sebagai sarana untuk berinteraksi dengan dosen maupun sesama mahasiswa terkait pembelajaran #3

    • Forum Diskusi - Mendesain Form

      Forum ini digunakan untuk mendiskusikan segala kesulitan dan masalah yang dihadapi dalam pembelajaran materi Mendesain Form

    • Tugas 3 - Desain Form Assignment

      Buatlah desain form pendaftaran Portal Pembelajaran Matematika dalam HTML. Terdapat 3 (tiga) halaman, yaitu halaman awal, halaman registrasi dan halaman notifikasi. Dalam halaman awal, terdapat judul website, form login, dan link untuk mendaftar. Jika link daftar diklik maka ditampilkan form registrasi. Pada form registrasi, jika semua data telah diisikan dan diklik tombol DAFTAR, maka ditampilkan halaman notifikasi bahwa pendaftaran berhasil. Jika link “klik disini untuk login” pada halaman notifikasi diklik, maka kembali ke halaman awal.

      Tampilan akhir sebagai berikut:

      1. Halaman Awal

        2. 1
      2. Halaman Registrasi
        3. 2
      3. Halaman Notifikasi
        4. 3

  • #4 Menggunakan CSS dalam tag HTML

    A.   TUJUAN

    1.    Mampu memahami CSS dalam HTML

    2.    Mampu menggunakan CSS dalam tag HTML

    3.    Mampu membuat desain web menggunakan CSS

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas

     



    • C.   DASAR TEORI

      1.    Pengertian

      Merupakan kode tambahan yang berisi aturan-aturan (rule) tampilan yang disertakan dalam tag HTML. Rule tampilan tersebut bermacam-macam mulai dari warna teks, warna latar, bayangan, garis tepi, jarak tepi (margin), jarak isi / konten (padding), jenis huruf, dan sebagainya. CSS dapat disertakan dalam tag HTML apapun. Penyertaan CSS pada tag HTML menggunakan attribute style.

      2.    Rule CSS

      Berikut beberapa contoh rule tampilan menggunakan CSS:

      css

    • Modul 3 - CSS dalam Tag HTML File

      SIlahkan didownload modul berikut. Praktekkan latihan yang terdapat dalam modul ini, kemudian kumpulkan berasamaan dengan Tugas 3  

    • Web Belajar CSS URL

      Alamat berikut memberikan tambahan pengetahuan dalam pembelajaran CSS, baca dan praktekkan untuk menambah skill CSS anda 

    • Tugas 4 - CSS HTML Assignment

      Kembangkanlah sebuah halaman web sehingga mempunyai tampilan akhir sebagai berikut:

      4


  • #5-6 Menggunakan CSS dalam class HTML

    A.   TUJUAN

    1.    Mampu memahami CSS dalam HTML

    2.    Mampu menggunakan CSS dalam class HTML

    3.    Mampu membuat desain web menggunakan CSS

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • C.   DASAR TEORI

      CSS pada desain web merupakan aturan-aturan yang digunakan dalam membentuk suatu user interface. Penambahan kode CSS pada kode HTML dapat dilakukan melalui 3 (tiga) cara, yaitu: inline, embedded, dan linked. Penambahan kode CSS menggunakan tag style disebut dengan inline. Pada metode inline, kode CSS kita tambahkan langsung pada suatu elemen. Kode CSS tersebut hanya berlaku untuk elemen tersebut.

      Untuk menambahkan kode CSS yang bisa berlaku untuk beberapa elemen sekaligus, maka kita bisa menambahkannya melalui attribute class. Penambahan class ini memerlukan kita untuk menulis suatu rangkaian kode CSS pada wadah tersendiri. Wadah tersebut bisa kita sematkan langsung pada file HTML kita (embedded), atau bisa kita tulis pada file terpisah untuk kemudian kita panggil melalui file HTML kita (linked).

      D.   LATIHAN

      1.    Bukalah aplikasi teks editor

      2.    Tuliskan kode dasar HTML

      1

      Simpan sebagai index.html

      3. Sisipkan kode berikut pada head:

      2

      4. Sisipkan kode berikut pada body:

      3

      5. Jika kode benar, maka tampilannya sebagai berikut:

      4

      6. Tambahkan lagi kode pada body menjadi seperti berikut:

      5

      7. Jika kode benar, maka tampilannya sebagai berikut:

      6

      Metode di atas adalah penambahan CSS menggunakan metode embedded. Kumpulan class ditulis pada tag style di dalam head, kemudian dipanggil dalam elemen menggunakan attribute class. Suatu class bisa dipanggil oleh beberapa elemen sekaligus. Penulisan class pada style selalu diawali dengan tanda . (titik), dan kode CSS di dalamnya diapit oleh tanda kurung kurawal { }


    • Tugas 5 - CSS dalam Class HTML Assignment

      Desainlah suatu tampilan web seperti berikut menggunakan CSS:

      5


  • #7 Menggunakan animasi dan transisi CSS pada HTML

    A.   TUJUAN

    1.    Mampu memahami transisi CSS dalam HTML

    2.    Mampu memahami animasi CSS dalam HTML

    3.    Mampu membuat desain web menggunakan transisi dan animasi CSS

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • C.   DASAR TEORI

      CSS pada HTML umumnya bertindak sebagai penentu tampilan. Tampilan dalam hal ini tidak hanya sekedar warna latar, warna huruf, jenis font, ukuran gambar, dan apapun itu, tetapi juga tampilan transisi dan animasi.

      Transisi merupakan perubahan tampilan dari satu bentuk ke bentuk lainnya yang ditampilkan dalam pergerakan (motion) lambat. Transisi pada CSS didefinisikan dengan kode transition: <jenis perubahan> <waktu>;. Misalnya transition: width 0.5s; kode tersebut digunakan untuk menampilkan transisi pada perubahan width (panjang suatu elemen) dan ditampilkan dalam kurun waktu setengah detik.

      Animasi merupakan perubahan tampilan pada suatu elemen yang ditayangkan pada kurun waktu dan repetisi tertentu. Perubahan-perubahan pada suatu animasi ditentukan sebelumnya (predefined) menggunakan kode @keyframes <nama animasi> { <perubahan> }. Animasi tersebut kemudian didefinisikan pada suatu elemen menggunakan kode animation: <nama animasi> <waktu> <pengulangan>;. Misalnya animation: MyAnim 1s infinite; akan memainkan animasi MyAnim dengan durasi 1 detik dan dimainkan terus menerus.


    • Tugas 6 - Animasi transisi CSS HTML Assignment

      Desainlah suatu tampilan web seperti berikut menggunakan CSS:

      6
      Animasi dari form ditunjukkan dalam video berikut:

         

  • This topic

    #8 Ujian Tengah Semester (UTS)

    Restricted Available until end of 16 December 2019

    Ujian Tengah Semester akan dibuka mulai tanggal 15 s/d 16 Desember 2019

     

  • #9-10 Menggunakan CSS dalam responsive HTML

    A.   TUJUAN

    1.    Mampu memahami konsep responsive web

    2.    Mampu membuat desain web responsif menggunakan CSS

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • Responsive pada web merupakan tampilan antarmuka yang dinamis, mampu berubah-ubah atau beradaptasi sesuai dengan ukuran layar perangkat yang digunakan untuk melihat halaman web tersebut. Trend responsive web ini mulai berkembang sejak pengguna mobile web angkanya semakin naik seiring berkembangnya teknologi.

      9

      Tampilan versi PC (layar lebar)

      9.1

      Tampilan versi layar mobile (layar sempit)

    • Tugas 7 - CSS Renponsive HTML Assignment

      Desainlah suatu tampilan web seperti berikut menggunakan CSS:

      a.    Tampilan PC :

      1

      b.    Tampilan Tablet :

      2

      c.    Tampilan Mobile :

      3


  • #11-12 Menggunakan JavaScript untuk pemrosesan form

    A.   TUJUAN

    1.    Mampu memahami konsep JavaScript pada HTML

    2.    Mampu memahami penggunaan JavaScript pada HTML

    3.    Mampu memproses form HTML menggunakan JavaScript

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • C.   DASAR TEORI

      JavaScript (biasa disingkat JS) merupakan bahasa pemrograman berbasis Java yang dapat disisipkan pada halaman web. Fungsi utamanya adalah untuk menangani operasi-operasi matematis dan logis yang tidak dapat dikerjakan pada kode HTML. Seperti pada bahasa pemrograman pada umumnya, JavaScript juga mengenal variabel, array, class, fungsi, dan prosedur. JavaScript pada halaman web biasanya disisipkan pada suatu elemen (biasanya textbox, drop-down list, button, dsb) dimana prosesnya dieksekusi / ditrigger melalui event.

      Berikut beberapa event yang dapat kita sisipkan pada suatu elemen HTML untuk mengeksekusi kode JavaScript:

      1

      Event di atas dapat kita tambahkan pada elemen HTML sebagai attribute. Kode JavaScript pada attribute yang akan kita eksekusi harus kita tulis terlebih dahulu pada tag script.

      Sama persis dengan CSS, penambahan JavaScript pada HTML bisa melalui 3 (tiga) cara, yakni inline, embedded, dan linked. Kode JavaScript pada metode inline bisa kita tambahkan langsung melalui event. Kode JavaScript pada metode embedded atau linked bisa kita tambahkan pada tag head menggunakan tag script.


    • Tugas 8 - Java Script untuk Form Assignment

      Salah satu aplikasi yang menerapkan matematika sederhana dalam pemrosesannya adalah aplikasi kasir. Desainlah suatu aplikasi kasir sederhana menggunakan web seperti berikut:

      1

      Ketika tombol HITUNG diklik, maka sistem akan menjumlah semua total harga yang harus dibayar:

      2


  • #13-15 Menggunakan JavaScript untuk Pemrosesan Konten

    A.   TUJUAN

    1.    Mampu memahami konsep JavaScript pada HTML

    2.    Mampu memahami penggunaan JavaScript pada HTML

    3.    Mampu memproses konten HTML menggunakan JavaScript

     

    B.   PETUNJUK

    1.    Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan

    2.    Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar

    3.    Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur

    4.    Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas


    • C.   DASAR TEORI

      JavaScript pada HTML merupakan pengelola action dari suatu elemen HTML. Selain bisa digunakan untuk memproses data pada form, JavaScript dapat pula digunakan sebagai metode untuk membuat sebuah halaman web yang dinamis tanpa harus menggunakan bahasa server (server-side language) misalnya PHP. Untuk menggunakan metode ini, kita dapat menggunakan kombinasi dari fungsi getElementById() dan innerHTML.

      Fungsi getElementById() digunakan untuk mengakses suatu elemen berdasarkan ID yang kita tentukan. Perlu diperhatikan bahwa pemberian ID pada dokumen HTML haruslah unik, dalam arti nama ID untuk masing-masing elemen harus berbeda, tidak boleh ada yang sama. Jika terdapat elemen yang mempunyai ID yang sama, fungsi getElementById() tidak akan bisa berfungsi.

      Fungsi innerHTML digunakan untuk mengakses konten HTML pada suatu elemen yang kita akses menggunakan fungsi getElementById(). Kedua fungsi tersebut dapat kita kombinasikan untuk membuat halaman web dinamis berdasarkan parameter tertentu.

      <!DOCTYPE html>

      <html>

      <body>

      <h2>JavaScript Statements</h2>

      <p>In HTML, JavaScript statements are executed by the browser.</p>

      <p id="demo"></p>

      <script>

      document.getElementById("demo").innerHTML = "Hello Student.";

      </script>

      </body>

      </html>

    • Tugas 9 - Js Pemrosesan Konten Assignment

      Desainlah suatu web dinamis dengan beberapa halaman berikut ini menggunakan JavaScript:

      1. Home

      1

      2. Gallery

      2

      3. Login

      3

  • #16 UAS / Project Akhir

    UAS Matakuliah Desain web ini berupa Project Akhir, akan dibuka mulai tanggal 20 Januari 2020 s/d 15 Februari 2020

    • Project Akhir Semester Assignment

      PROJECT 1

      Desainlah halaman web secara berkelompok 2-3 mahasiswa, dengan spesifikasi minimal sebagai berikut:

      • Melibatkan kode pemrograman HTML, CSS, dan JavaScript
      • Melibatkan heading, paragraph, link, image, form input, animasi, transisi
      • Web minimal terdiri dari 4 halaman berbeda, bersifat responsive, topik bebas
      • Salah satu dari halaman tersebut adalah halaman “Contact Us” yang berisi daftar nama kelompok


      PROJECT 2

      Desainlah sebuah Portal / Web Pembelajaran Matematika dengan spesifikasi minimal sebagai berikut:Melibatkan kode pemrograman HTML, CSS, dan JavaScript

      • Melibatkan kode pemrograman HTML, CSS, dan JavaScript
      • Melibatkan heading, paragraph, link, image, form input, animasi, transisi
      • Web minimal terdiri dari 4 halaman berbeda, bersifat responsive
      • Web merupakan portal pembelajaran matematika dengan lingkup materi bebas, baik materi jenjang sekolah dasar maupun menengah