[ETS Pemrograman Web]

ETS Pemrograman Web

Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)

Link Demo: 


Jawaban ETS Pemrogaman Web No 1-4:


ETS Pemrograman Web

Soal

  1. Apa itu responsive web design dan sebutkan dua teknik yang sering digunakan untuk mencapainya?

  2. Apa fungsi elemen <meta> dalam HTML dan sebutkan salah satu atribut penting yang dimilikinya? Berikan contoh penggunaan dalam bentuk kode kemudian beri penjelasan.

  3. Buatlah halaman landing page sederhana untuk sebuah toko online yang menjual produk elektronik. Halaman ini harus mencakup:

  • Header dengan logo dan navigasi (Home, Produk, Tentang Kami, Hubungi Kami).

  • Bagian utama dengan gambar produk unggulan dan tombol “Beli Sekarang”.

  • Footer dengan alamat toko dan link media sosial.

Buatlah desain webnya kemudian implementasikan dalam kode.

  1. Seorang klien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk memastikan isian datanya benar.


Jawab

  1. Responsive web design adalah pendekatan dalam web development yang menggunakan HTML dan CSS untuk mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web secara otomatis, agar website bisa menyesuaikan tampilannya di berbagai jenis layar dan ukuran perangkat (desktop, tablet, dan ponsel). Teknik yang sering digunakan yaitu teknik media query dan grid layout.


  1. Meta tag ditambahkan ke kode HTML untuk memberitahu informasi penting ke mesin pencari tentang halaman web dan bagaimana halaman web tersebut harus ditampilkan. Memaksimalkan meta tag dapat membantu menaikkan peringkat konten atau halaman sebuah situs, jumlah klik, serta pengalaman pembaca. Salah satu atribut penting dari elemen <meta> adalah charset. digunakan untuk menentukan bagaimana teks akan ditampilkan.

Contoh penggunaan:

  • <meta charset=”...” …> digunakan untuk menentukan encoding karakter dari halaman HTML, yang menentukan bagaimana teks akan ditampilkan.

  • <meta name=”description” …> digunakan untuk memberi deskripsi singkat isi halaman web.

  • <meta name=”keywords” …> digunakan untuk memberi daftar kata kunci yang terkait dengan halaman web tersebut.

  • <meta name=”author” …> digunakan untuk menyebutkan nama penulis halaman.

  • <meta name=”viewport” …> digunakan untuk menetukan bagaimana halaman web ditampilkan di perangkat mobile.


  1. Hasil:

  • Header dengan logo dan navigasi (Home, Produk, Tentang Kami, Hubungi Kami)


  • Bagian utama dengan gambar produk unggulan dan tombol “Beli Sekarang”

  • Footer dengan alamat toko dan link media sosial (beserta tombol yang akan menuju form)


Link GitHub: https://github.com/rukiwatsuyoidesune/Web-ETSLandingPage.git

Link Deploy: https://sumberkurniamakmur.vercel.app


  1. Hasil:


Komentar

Posting Komentar

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

Gambar
Simple Landing Page Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link GitHub:  https://github.com/rukiwatsuyoidesune/Web-LandingPage Link Website:  https://topupin-landing-page.vercel.app Source Code: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> TopUpin! </title> <link rel= "preconnect" href= "https://fonts.googleapis.com" > <link rel= "preconnect" href= "https://fonts.gstatic.com" crossorigin > <link href= "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel= "stylesheet" > <style> * { margin : 0px ; padding : 0px ; ...
Baca selengkapnya

[Tugas Pertemuan ke-1] Portofolio

Gambar
 Membuat Web Portofolio Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link Website Portofolio:  https://luckyvdw.vercel.app/ Link Repo GitHub:  https://github.com/rukiwatsuyoidesune/Web-Portfolio Link CV:  https://drive.google.com/file/d/1Hrije4sIHTRPKH9X0Nuk83PHi4sjhRvr/view?usp=sharing Link Blogspot:  https://luckyvdw.blogspot.com Pertemuan pertama minggu lalu, kami diajarkan pengantar web programming. Lalu sebelum kelas berakhir, kami diberi tugas untuk membuat website portofolio/pribadi dengan memuat CV. Berikut adalah yang saya lakukan untuk mengerjakan tugas ini: 1. Memahami konsep penggunaan elemen HTML. 2. Memahami perbedaan antara header, body, main, div, section, dan article. 3. Mengatur layout website dan menggunakan CSS. 4. Membuat dan mengupload repository ke github. 5. Menggunakan vercel untuk men-deploy website.
Baca selengkapnya

[Tugas Pertemuan ke-3] Tabel

Gambar
Membuat Tabel Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Tabel Nilai Siswa Source Code (HTML): <!DOCTYPE html> <html lang= "id" > <head> <title> HTML Table </title> <style> table , th , td { border : 2px solid black; border-collapse : collapse ; } th , td { padding : 10px ; } </style> </head> <body> <table style= "width:75%" > <thead style= "background-color: #305bb1;" > <tr> <th rowspan= "2" style= "color: white;" > Nama </th> <th colspan= "3" style= "color: white;" > Nilai </th> </tr> <tr> <th style= "color: white;" > Kimia </th>...
Baca selengkapnya