Scribd
Unggah
45 tayangan8 halaman

Modul Web Pert-1

Modul ini membahas pengantar HTML dan instalasi Visual Studio Code. Materi pembelajaran meliputi pengenalan tag-tag dasar HTML seperti head, body, paragraf, heading, list, tabel, form, gambar dan lainnya. Modul ini juga menjelaskan cara instalasi Visual Studio Code sebagai text editor untuk membuat kode HTML."

Diunggah oleh

Tsaniya pcy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
45 tayangan8 halaman

Modul Web Pert-1

Modul ini membahas pengantar HTML dan instalasi Visual Studio Code. Materi pembelajaran meliputi pengenalan tag-tag dasar HTML seperti head, body, paragraf, heading, list, tabel, form, gambar dan lainnya. Modul ini juga menjelaskan cara instalasi Visual Studio Code sebagai text editor untuk membuat kode HTML."

Diunggah oleh

Tsaniya pcy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

Modul Pemrograman Web

S1 Ilmu Komputer

Pertemuan Ke-1:
Pengantar HTML dan Instalasi Visual
Studio Code

Disusun Oleh:
Asisten Dosen Pemrograman Web
Jurusan Ilmu Komputer Universitas Lampung
Tim Penyusun

Pengarah
RIZKY PRABOWO, M.KOM
Penyusun
● Satria Sapta Nugraha 2017051022

● Rendy Lutfi Prabowo 2017051053

● Rifan Setiadi 2017051019

● Kurniawan Dwi Yulianto 2057051010

● Alifan Renaldi 2017051044

● Fachri Azka Nur 2017051054

● Putu Putra Eka Persada 2057051016


Gambaran Umum
Mempelajari mengenai penggunaan HyperText Markup Language (HTML)
termasuk tag, paragraf, heading, list. Lalu, melakukan instalasi Visual Studio
Code (VS Code).

Capaian Pembelajaran
1. Praktikan dapat mengerti dasar dari pemrograman web.
2. Praktikan mampu membuat desain web menggunakan HTML.
3. Praktikan mampu menginstall VS Code pada device masing-
masing.

Materi Praktikum
Pengantar HTML

HTML (Hypertext Markup Language) adalah bahasa format dari tag


XML(Extended Markup Language) yang digunakan sebagai standar
tampilan dari halaman Web. HTML dapat diterima sebagai tampilan
halaman Web setelah melalui proses interpretasi dari Web browser. Selain
itu HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap
kesalahan. Standar Minimum elemen HTML:
● Document Type Declaration (DTD)
● Head
● Body

1. <DTD>
2. <html>
3. <head>
4. <!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai
Pendukung lingkungan seperti title, meta dokumen, CSS, Java Script-->
5. </head>
6. <body>
7. <!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan
web -->
8. </body>
9. /html>
DTD
Sebagai standar versi dokumen W3C yang digunakan sebagai representasi
setiap elemen pada dokumen web. Contoh:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1 /DTD/xhtml1 - transitional.dtd">

Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen


halaman
Web.
Meta Dokumen
Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari
owner, keywords, layout, ataupun inisialisasi proses seperti refresh. Contoh:

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


2. <meta name="owners" content="myWeb" />
3. <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi
Ilmiah" />
4. <meta name="layout" content="main" />
5. <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">

Elemen HTML
Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:
Form, Text, Image, Table, Drop-Box, Button dan lainnya. Contoh:
● Tittle
Ditampilkan pada header browser
1. <title>Praktikum Pemrograman Web</title>

● Text
1. <h1>Selamat Datang Di Website Kami!</h1>
2. <h2>Web Ini Adalah Tutorial Pemrograman Web</h2>
3. <h3>Praktikum Pemrograman Web</h3>
4. <p> <a href="http://uin-malang.ac.id"> Teknik Informatika
5. UIN Malang </a> </span> link for your success way </p>

● Image
1. <img src="images/myphoto.jpg" width="180" height="200"
2. alt="photo"/>

● Form
1. <form method="POST" action="response2.jsp"
enctype="multipart/form-data">
● Drop-Box
1. <select name="My Lab">
2. <option value=’CC’>Lab. Praktikum Computer Vision</option>
3. <option value=’SI’> Lab. Sistem Informasi </option>
4. <option value=’CAI’> Lab. Computing & AI </option>
5. </select>

● File Browser
1. <input type="file" name="upload" value="" width="200" />
2. Table
3. <table border="1" width="10">
4. <thead>
5. <tr>
6. <th>NIM</th>
7. <th>Mahasiswa</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>123</td>
13. <td>Ani Rahmawati </td>
14. </tr>
15. <tr>
16. <td>124</td>
17. <td>Budi Susilo</td>
18. </tr>
19. </tbody>
20. </table>

● List
1. Bidang Minat:
2. <ol>
3. <li>Sistem Informasi
4. <ul>
5. <li>Data Warehousing </li>
6. <li>Enterprise Architecture </li>
7. </ul>
8. </li>
9. <li>Multimedia
10. <ul>
11. <li>Komputer Grafik </li>
12. <li>Machinema </li>
13. </ul>
14. </li>
15. </ol>

Cara Menampilkan Hasil Koding HTML


Untuk menampilan hasi koding menggunakan html, cukup dengan
menggunakan browser. Namun pada praktikum kita, kita akan
menggunakan chrome sebagai browser default kita. Sehingga untuk
membuka file html kita menggunakan cara sebagai berikut :
1. Buka lokasi file html,
2. klik kanan pada file html.
3. Lalu klik open with atau buka dengan.
4. Maka akan muncul opsi beberapa software yang bisa membuka file
format html.
5. Pilih chrome sebagai browser default kita.

Selain cara diatas, ada acara lain yang lebih cepat. Yakni dengan drag file
html kita menuju browser.

Kegiatan Praktikum
Sebagai kegiatan praktikum, maka ikuti instruksi berikut:
● Buat file pertemuan1.html
● Copy setiap kode script html diatas
● Amati yang terjadi pada browser dengan melakukan refresh
pada setiap perubahan kode
● Aktifkan plugin firebug pada browser Mozilla atau chrome,
kemudian lakukan inspeksi sambil melakukan perubahan-
perubahan kode HTML

Instalasi VS Code

Visual Studio Code adalah aplikasi untuk mengedit kode buatan Microsoft.
Kehebatan aplikasi ini dapat di pakai pada platform Windows, Linux dan
MacOS. Visual Studi Code merupakan salah satu editor pemrograman
terbaik karena tampilan dan fitur yang cukup lengkap.

Adapun cara install nya adalah sebagai berikut:

1. Kunjungi web visual studio code, lalu pilih download for Windows.
2. Atau klik disini (klik ctrl+klik text biru)
3. Buka folder hasil download Visual Studio Code
4. Double klik setup Visual Studio Code
5. Klik "I accept the agreement" dan klik Next
6. Select destination location, biarkan default. Klik Next

7. Select Start menu folder dan klik Next


8. Select additional task, ceklist semua dan klik Next
9. Klik Install, Tunggu beberapa saat
10. Klik Finish

Anda mungkin juga menyukai