Pertemuan: 1&2 Tanggal: 23 Maret 2020 Mata Kuliah: Web Programming I Jenis tugas: Tugas Diskusi

Tugas dikerjakan oleh:

1. Hari Rahmadi (12192854)

2. Tri Astrhiono (12191697)

3. Mida Maridha (12191421)

4. Nadya Putri (12191473)

5. Nurul (12192564)

Berikut tugas yg kami kerjakan:

Pertanyaan:
No. 1) Struktur Navigasi adalah? Gunanya untuk?

Jawaban (dijawab oleh Mida Maridha) :

Struktur Navigasi adalah struktur atau alur informasi dari suatu program, yang berguna pada sebuah website untuk mempermudah mengakses halaman-halaman yang tersedia pada website. Struktur navigasi juga bisa diartikan seperti jenjang atau tingkatan dari menu yang ada di sebuah website. Dengan menggunakan struktur navigasi yang tepat maka sebuah program memiliki suatu arahan informasi yang jelas

Pertanyaan :
No. 2) Kapan harus membuat Struktur Navigasi? Kenapa kita harus menggunakan Struktur Navigasi itu?

Jawaban ( dijawab oleh Nadya Putri) :

struktur navigasi dibuat sebelum program karena akan menentukan mana form atau menu yg akan menjadi awal dan akhir.

struktur navigasi digunakan untuk membuat tingkatan dr menu yg ada di web // struktur navigasi campuran lebih sering digunakan karena dapat memberikan keinteraksian yg lebih tinggi

Pertanyaan:
No. 3) Sebutkan Struktur Navigasi yg ada dan berikan contohnya!

Jawaban (dijawab oleh Nurul) :
Struktur navigasi dikelompokkan menjadi 4 struktur, yaitu linier, non linier, hirarki dan campuran.

      Linier/satu alur ialah struktur yang hanya menampilkan satu demi satu rangkaian cerita tampilan layar secara berurutan, tidak ada percabangan. Biasanya digunakan untuk membuat halaman web presentasi.

       Struktur non linier/tidak berurut ialah struktur penjejakan linier membuat penjejakan bercabangan. Percabangan yang dibuat pada struktur Non Liner ini berbeda dengan percabangan struktur Hirarki, karena setiap tampilan mempunyai kedudukan yang sama tidak ada Index dan Slave Page.

      Struktur navigasi hirarki/struktur bercabang
 Ialah struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama Master Page (halaman utama pertama), halaman utama mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung).

Struktur navigasi campuran ialah gabungan dari ketiga struktur linier, non-linier dan hirarki. Struktur navigasi disebut dengan struktur navigasi bebas, digunakan dalam pembuatan multimedia karena struktur ini dapat dalam pembuatan multimedia sehingga dapat memberikan ke-interaksian yang lebih tinggi.

Pertanyaan :
No. 4) Apa itu Web Server? Berikan contoh yg kamu tau dan kenapa memilih Web Server itu?

Jawaban (dijawab oleh Tri Astriono) :

Web Server adalah sebuah software yang berfungsi untuk menerima dan melayani permintaan yang dikirimkan user melalui browser kemudian ditampilkan kepada user sesuai dengan permintaan yang dikirimkan ke server.

Nah untuk alurnya sendiri yaitu User melakukan permintaan melalui browser terhadap server (HTTP Request), Kemudian Server Menerima request dan dan memprosesnya menjadi halaman situs web (HTTP Response).

Contohnya Apache, Nginx, Lighttpd, IIS
Karena
1. Sangat fleksibel, konfigurasi dan pengaturan apache sangat mudah dan simple
2. Proses instalasinyapun sangat mudah ketika masuk kedalam freeware
3. Mampu bekerja dalam berbagai sistem operasi (open source) dibanding web server lainnya
4. Tidak terbatas dalam komunitas sehingga sangat luas.

Pertanyaan :
No. 5) Langkah apa saja yg harus kita lakukan supaya coding yg kita buat dari notepad bisa berjalan di browser?

Jawaban (dijawab oleh Hari) :

1. buat coding dinotepad dan save dgn format " .html "
2. pastikan memilih 'all files' pada 'save as type'
3. buka aplikasi Xampp Control Panel jalankan module Apache
4. buka Mozila Firefox lalu ketik " localhost/nama file coding yg sudah kita buat"
5. file tsb akan muncul
6. klik file tsb maka hasilnya sudah bisa dilihat

Berikut tugas lainnya:

Tugas 01 :
Buatlah Struktur Navigasi dari sebuah halaman website.

Tugas 02 :

Buatlah script html sehingga menghasilkan tampilan berikut ini :

<html>
<head>
<title>Tugas 02</title>
</head>
<body bgcolor="#FFOOFF" text="000000">
<p>Perhatikan bahwa halaman ini berwarna magenta</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3/>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu</p>
<center><h1>Ini adalah heading 1</h1></center>
<p>Heading diatas telah diposisikan untuk berada di tengah halaman ini.</p>
</body>

</html>

Tugas 03:
Buat script HTML untuk bentuk tampilan di bawah ini :

<html>
<head>
<title>tugas modul ke tiga</title>
</head>
<body background = "rem.png">
<table  width="520"  border="7"  align"center"  cellpading="1"  cellpascing="1"  bordercolor="#ffffff"bgcolor="violet">
     <th colspan="3"bgcolor="BISQUE">
     <p>DAFTAR PRODUK</p>
     </th>
     </tr>

<tr>
    <td   bgcolor="YELLOW"  width="120" rowspan="100"  height="100"><img src="pikachu.jpg"width="120"height="100"></td>
<td bgcolor="LIGHTGREEN" height="40">nama<br>Produk <bgcolor="YELLOW">
</td>
<td>CANON EOS M10 Kit EF-M 15-45mm</td>
</tr>
<tr>
<td bgcolor="LIGHTGREEN"height="25">Harga</td>
<td>Rp 4.899.000</td>
</tr>

<tr>
<td bgcolor="LIGHTGREEN">Fitur<br>Produk</td>
<td>
        <li>Kamera mirrorless</li>
        <li>Efektifitas Piksel:18MP</li>
        <li>Tipe Sensor : CMOS DIGIC 6</li>
        <li>Layar : 3.0 Inch</li>
                       <li>Memiliki Lampu flash dengan jarak jangkauan hingga 5 meter</li>
</td>
</tr>

</table>
</body>
</html>

Sekian jawaban dari kelompok kami, bila ada jawaban yg kurang memuaskan mohon dimaafkan.