Skip to main content

Tugas 3: Penerapan HTML5 dengan Penyematan Media

 Tugas 3: Penerapan HTML5 dengan Penyematan Media

Nama: Aulia Eka Putri Aryani
NRP: 05111940000044
Kelas: PWEB-B


Pembahasan

Pada pertemuan PWEB terakhir kali, saya diminta untuk melakukan perubahan pada Website Warung Tegal dengan menerapkan HTML5 yang telah dipelajari dan menambahkan berbagai konten media, seperti gambar, audio, dan video. Sama seperti tugas-tugas sebelumnya, saya memanfaatkan Github Pages untuk meng-host halaman web ini, dimana default domain yang digunakan adalah github.io. Adapun konten dari webite warung tegal yang saya buat adalah sebagai berikut.

  1. Beranda
  2. Daftar Makanan
  3. Katering
  4. Tentang
  5. Kontak

Berikut adalah keseluruhan tampilan dari website yang saya buat. Untuk lebih jelasnya dapat diakses melalui link berikut.

beranda
Tampilan Beranda Website

daftar makanan
Tampilan Daftar Makanan Website

katering
Tampilan Katering Website

tentang
Tampilan Tentang Website

kontak
Tampilan Kontak Website

Adapun beberapa media yang saya sematkan pada website ini adalah sebagai berikut.

  • Gambar
    • Shortcut icon pada tabbar dengan memanfaatkan tag <link> pada <head>
    • Header dan Background image dengan menggunakan style background-image pada <body> dan <div> dalam <header>
    • Foto makanan dengan menggunakan <img> pada <figure>
    • Icon kontak dengan menggunakan <img> dalam <li>
  • Video di Youtube dengan memanfaatkan <iframe>
  • Lokasi pada Google Maps dengan memanfaatkan <iframe>

Pada website kali ini, struktur html utama yang saya terapkan pada website ini adalah header, main, dan footer. Di dalam header, terdapat <div> untuk meletakkan gambar header website dan <nav> yang bersifat sticky sebagai navigasi menu pada website. Selanjutnya, pada main saya letakkan <section> untuk meletakkan beberapa <article> (tergantung dengan kontennya). Di samping <section>, saya berikan <aside> untuk meletakkan masakan populer, lokasi, dan kategori masakan yang dimasukkan pada <section> tersendiri.

Untuk lebih lengkap nya, source code dapat dilihat di bawah atau link berikut.

  • index.html
  • menu.html
  • katering.html
  • tentang.html
  • kontak.html
  • style.css

Comments

Popular posts from this blog

Tugas 4: Membuat Website Katalog Produk dengan CSS

Tugas 4: Membuat Website Katalog Produk dengan CSS Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: PWEB-B Pembahasan Pada pertemuan PWEB terakhir kali, saya diminta untuk membuat website yang berisi katalog produk dengan menggunakan CSS yang telah dipelajari.  Sama seperti tugas-tugas sebelumnya, saya memanfaatkan Github Pages untuk meng- host  halaman web ini, dimana  default  domain yang digunakan adalah github.io.  Berikut adalah tampilan dari website yang telah saya buat. Untuk lebih lengkapnya dapat dilihat pada link berikut . Tampilan Website Konten website yang saya buat adalah beranda dari website. Saya membagi beranda menjadi 3 div utama, yaitu div yang berperan sebagai header, main, dan footer. Pada div header saya meletakkan logo, kolom pencarian, akun,  wishlist ,  bag , serta navigasi yang yang terdir...

Evaluasi Akhir Semester

Evaluasi Akhir Semester Nama : Aulia Eka Putri Aryani NRP : 05111940000044 Kelas : PWEB-B Pembahasan Fitur-fitur yang akan saya bangun untuk aplikasi website sekolah saya disesuaikan dengan 4 role yang ada, yakni sebagai berikut. Admin Login Dashboard Menampilkan jumlah siswa aktif Menampilkan jumlah guru aktif Menampilkan jumlah pemasukan (dalam 1 bulan) Menampilkan jumlah pengeluaran (dalam 1 bulan) Manajemen Siswa Menambah data siswa Menampilkan data siswa Mengubah data siswa Menghapus data siswa Mencari data siswa Mengunduh data siswa Manajemen Guru Menambah data guru Menampilkan data guru Mengubah data guru Menghapus data guru Mencari data guru Mengunduh data guru Manajemen Orang Tua Me...

Tugas 9: Requirement Modelling Language Loket.com

Tugas 9: Requirement Modelling Language Loket.com Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: RK-D Pembahasan Loket.com adalah platform yang memiliki Ticketing Management Service (TMS) teknologi unggul dalam mendukung seluruh penyelenggaraan event, mulai dari distribusi dan manajemen tiket hingga penyediaan laporan analisa event di akhir acara.  Beberapa teknologi yang tersedia untuk memfasillitasi penyelenggara event dalam setiap tahap persiapan adalah sebagai berikut. Distributor tiket terlengkap untuk melakukan penjualan tiket penyelenggara event. Sistem pembayaran yang beragam dan aman sehingga memberikan kemudahan kepada calon pembeli. Gate management yang aman dan nyaman untuk akses saat event berlangsung sehingga event dengan jumlah penonton yang besar dapat ditangani dengan mudah. Sistem analisis data yang lengkap dan komprehensif setelah acara berlangsung untuk memudahkan penyelenggaraan event dalam menentukan strategi event selanjutnya. Business Objective Mode...