Scribd
Unggah
15 tayangan10 halaman

Tugas 1

Semoga membantu

Diunggah oleh

sk7pgkj9yn
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 DOCX, PDF, TXT atau baca online di Scribd
15 tayangan10 halaman

Tugas 1

Semoga membantu

Diunggah oleh

sk7pgkj9yn
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Modul Praktikum 2021/2022

Pemrograman Web

Modul 1: Element Dasar HTML


KOMPETENSI:
Setelah menyelesaikan praktikum pada Modul 1, Praktikan diharapkan
mampu memahami dasar HTML, dasar- dasar penggunaan tag, atribut,
value dan elemen, serta memahami lingkungan kerja Web.
TUJUAN INSTRUKSIONAL KHUSUS:
1. Mahasiswa dapat memahami struktur dasar HTML
2. Mahasiswa dapat mengimplementasikan tag, atribut, value dan
elemen pada Web menggunakan HTML.
TUGAS PENDAHULUAN
1. Jelaskan apa yang dimaksud dengan HTML beserta fungsinya!
Jawaban:

2. Jelaskan perbedaan antara Tag, Atribut, Value dan Element pada HTML!
Jawaban:

3. Tuliskan Tag HTML beserta fungsinya (Minimal 30 + Wajib Table,


Form & Link)!
Jawaban:
4. Tuliskan contoh penggunaan tag HTML (Minimal 5)!
Jawaban:
5. Tuliskan dan jelaskan atribut-atribut yang dapat digunakan pada Nomor 3!
Jawaban:
6. Tuliskan dan jelaskan atribut yang digunakan dalam menggabungkan
baris dan kolom pada tabel!
Jawaban:

Jawaban: Di Upload di Web/Blog Pribadi, Tuliskan Linknya:


https://lifehacker101life.blogspot.com/2024/03/tugas-pendahuluan-1.html

Catatan: Sebaiknya dikerjakan secara mandiri, kesamaan jawaban


secara struktur dianggap bekerjasama (tidak dinilai)!

TEORI DASAR:
1. HTML: Hyper-Text Markup Language
HTML singkatan dari Hyper-Text Markup Language yaitu bahasa
(aturan) standar yang digunakan untuk menampilkan teks, gambar,
video dan audio ke dalam halaman web yang disimpan dalam sebuah
file dengan ekstensi *.html. Pada HTML dikenal istilah Tag yang
merupakan istilah untuk elemen- elemen penyusun file teks HTML.
Tag diapit oleh notasi kurang dari (<) dan lebih dari (>) seperti
<html>, <head>, <body> dan seterusnya. Selain itu, terdapat

Laboratorium Rekayasa Perangkat Lunak | 1


Modul Praktikum 2021/2022
Pemrograman Web
beberapa tag yang memiliki pasangan ditandai dengan notasi garis
miring sebagai tag penutup misalnya </html> selain itu apabila tag
tidak memiliki pasangan maka diakhir tag sebelum notasi penutup
ditandai dengan garis miring pula seperti <input />.
Contoh Kerangka Dasar HTML 5
Syntax Keterangan
<html>  <html> merupakan tag
<head> pembuka dokumen HTML yang
<title>Judul wajib ditutup dengan </html>
Dokumen</title>  <head> dan </head> sebagai
</head> kepala atau header dari
<body> dokumen HTML. Diantara dua
Isi Dokumen tag ini terdapat tag <title>
</body> yang berfungsi untuk memberi
</html> judul pada halam web.
 <body> sebagai penanda
bagian dari badan dokumen,
yang wajib ditutup dengan tag
</body>

Bagian-Bagian Dalam Dokumen HTML

Gambar 1.1 Struktur Tag Pada Dokumen HTML

Laboratorium Rekayasa Perangkat Lunak | 2


Modul Praktikum 2021/2022
Pemrograman Web
2. Tag HTML
Tag HTML merupakan serangkaian instruksi dasar yang akan
diterjemahkan oleh web browser dalam bentuk output yang sesuai
dengan instruksi tersebut.
Berikut beberapa tag yang umum digunakan dalam membangun
struktur pada web:
Tag Syntax Output
Heading digunakan untuk membuat judul text
<h1>…</h1> <h1>Heading 1</h1>
<h2>…</h2> <h2>Heading 2</h2>
<h3>…</h3> <h3>Heading 3</h3>
<h4>…</h4> <h4>Heading 4</h4>
<h5>…</h5> <h5>Heading 5</h5>
<h6>…</h6> <h6>Heading 6</h6>
Paragraph & Text Formatting digunakan untuk membuat paragraf
dan memformat text
<p>…</p> <p>Paragraf</p>
<b>…</b> <b>Bold</b>
<i>…</i> <i>Italic</i>
<u>…</u> <u>Underline</u>
<sup>…</sup> <sup>SuperScript</sup>
<sub>…</sub> <sub>SubScript</sub>
<s>…</s> <s>Strikethrough</s>
<big>…</big> <big>Big</big>
<small>… <small>Small</small>
<small>
Font digunakan untuk mengubah ukuran, jenis dan warna font
<font>…</ <font
font> face=‘arial’>Arial</font>
List digunakan untuk membuat daftar berurutan, tidak berurut
dan daftar definisi
<ol> <ol> Ordered List
<li>…</li> <li>Satu</li> digunakan untuk
<li>…</li> <li>Dua</li> membuat daftar
<li>…</li> <li>Tiga</li> berurut, seperti di
</ol> </ol> bawah ini :

<ul> <ul> Unordered List


<li>…</li> <li>Senin</li> digunakan untuk
<li>…</li> <li>Rabu</li> membuat daftar
<li>…</li> <li>Jum’at</li> tidak berurut seperti
</ul> </ul> di bawah ini:

Laboratorium Rekayasa Perangkat Lunak | 3


Modul Praktikum 2021/2022
<dl>
Pemrograman Web
<dl> DL: definition list yang
<dt>…</dt> <dt>HTML</dt> digunakan untuk
mendefinisikan list, DT
<dd>…</ <dd>Membentuk atau data term
dd> Struktur</dd> digunakan untuk
<dt>…</dt> <dt>CSS</dt> membentuk data term
<dd>…</ <dd>Mengatur Tata atau header, DD atau
dd> Letak</dd> data definition digunakan
</dl> </dl> untuk menjelaskan isi
dari data term.

Laboratorium Rekayasa Perangkat Lunak | 4


Modul Praktikum 2021/2022
Pemrograman Web
Tag Break digunakan untuk memberi jeda antar baris
<br> atau Praktikum Pemrograman
<br/> <br> Web
Special Character merupakan instruksi untuk menampilkan
karakter spesial yang pada
dasarnya tidak masuk dalam kategori tag HTML
& &amp; Ampresand
< &lt; Lebih Kecil
> &gt; Lebih Besar
® &reg; Registered
trademark
© &copy; Copyright
± &plusmn; Plus-Minus
˚ &deg; Derajat
™ &trade; Trademark
÷ &divide; Seperempat
½ &frac12; Setengah
¼ &frac14; Tiga perempat
¾ &frac34; Tanda Bagi

3. Attribute dan Value


1) Attribute
Attribute merupakan bagian dari Tag pada HTML yang tidak
dapat terpisahkan. Attribute membawa informasi tambahan yang
dapat mempengaruhi sebuah Tag, baik itu secara struktur, tampilan
dan tingkah laku. Secara umum attribute HTML terbagi atas
attribute Global dan attribute. Global attribute dapat diterapakan
diseluruh Tag pada HTML, sedangkan attribute hanya dapat
diterapkan pada Tag tertentu saja.
2) Value
Value merupakan nilai dari sebuah attribute. Value memberikan
nilai pada attribute yang merupakan informasi tambahan dari sebuah
Tag. Struktur, tampilan dan tingkah laku pada Tag yang dipengaruhi
oleh attribute sangat berpengaruh dengan nilai atau Value dari
Attribute itu sendiri.

Attribut Value Syntax Output


e
Global Attribute

Laboratorium Rekayasa Perangkat Lunak | 5


Modul Praktikum 2021/2022
Pemrograman Web
ID digunakan untuk memberikan identitas unik pada sebuah
elemen pada HTML, umumnya
digunakan untuk pengolahan pada JavaScript, disarankan id tidak
ada yang sama.
id Unique <p id=”prgfUtm”>
Identifier Paragraf Utama </p>
Class digunakan untuk mengklasifikasikan satu atau banyak
elemen pada HTML, umumnya
digunakan untuk pemodelan atau style web.
class Class Name <p class=”right”>
Tulisan Kekanan</p>
Style digunakan untuk memodifikasi elemen HTML secara visual
sebelum ditemukannya CSS.
style Style <p
definition style=”color:blue”>
Warna Biru </p>
Attribute
Attribute Format Text Alignment digunakan untuk mengatur text
alignment, umumnya
digunakan pada Tag Text Seperti Paragraf dan Heading
align cent <p align=”center”>
er Rata
right Tengah</p>
left
justify
Attribute Type digunakan untuk mengubah tipe list atau daftar pada halaman web,
attribute ini
dapat digunakan pada tag unordered list atau ul dan ordered list atau ol.
type Ordered List <ol type=”I”>
-a <li>Pendahuluan</li>
-i <li>Pembahasan</li>
-I </ol>
-a <ul type=”square”>
Unordered List <li>Front-end</li>
- square <li>Back-end</li>
- circle </ul>
Attribute Face dan Size digunakan untuk mengubah jenis font dan ukuran font
pada tag font.
face Font Face <font
face=”verdana”>
Verdana </font>
size Font Size <font size=”12”> Size
12 </font>

Laboratorium Rekayasa Perangkat Lunak | 6


Modul Praktikum 2021/2022
Pemrograman Web

4. Hyperlink dan Image


1) Hyperlink
Hyperlink atau Anchor merupakan tag yang digunakan untuk
berpindah halaman/dokumen atau bagian tertentu pada halaman web
yang sama dengan HTML. Hyperlink ditandai dengan penggunaan
tag a atau anchor dengan attribute wajib berupa href yang
mereferensikan tujuan hyperlink. Selain itu terdapat attribute
tambahan seperti target yang menginstruksikan target web browser.
Tag Attribut Value Syntax Output
e
a href Lokasi <a href=”
Tujuan https://apps.labfikomum
target _self i.com/”
_blank target=”_blank”>
_parent ICLABS
_top </a>

2) Image
Image merupakan tag yang digunakan untuk menampilkan data
binary berupa gambar dalam HTML. Ditandai dengan penggunaan tag
img bersama dengan attribute wajib src yang menginformasikan
lokasi file gambar yang ingin ditampilkan. Selain itu terdapat
attribute alt sebagai alternatif text apabila gambar tidak ditemukan.
Sedangkan untuk mengubah lebar dan tinggi sebuah gambar dapat
menggunakan attribute width untuk lebar dan height untuk gambar
dimana nilainya dapat berupa satuan pixel maupun persentase.
Perbedaannya apabila mengisi attribute width atau height dengan
nilai pixel, maka gambar akan disesuaikan secara absolut
berdasarkan nilai tersebut, apabila nilai width dan height diisi dengan
skala persentase maka gambar akan disesuaikan dengan persentase
ukuran gambar.
Tag Attribute Value Syntax Output
img src Lokasi dan Nama File <img
Gambar Beserta src=”iclabs.p
Extensi ng”
alt Text Alternatif alt=”Logo”

Laboratorium Rekayasa Perangkat Lunak | 7


Modul Praktikum 2021/2022
Pemrograman
Apabila
Web
File width=”50%”
Gambar Tidak height=”50%
Ditemukan ”/>
width Pixel (px) atau Persen
(%)
height Pixel (px) atau Persen
(%)

Laboratorium Rekayasa Perangkat Lunak | 8


Modul Praktikum 2021/2022
Pemrograman Web
PRAKTIKUM MANDIRI
1. Peralatan
Perangkat komputer/PC/Laptop/Notebook . Sistem operasi
Windows/Linux (optional Mac OS).
Aplikasi Visual Studio Code/Atom/SublimeText/phpStorm IDE
2. Prosedur
1) Baca dan pahami semua tahapan praktikum dengan cermat.
2) Gunakan fasilitas yang disediakan dengan penuh rasa tanggung
jawab.
3) Rapikan kembali setelah menggunakan komputer (mouse,
keyboard, kursi, dll).
4) Perhatikan sikap anda untuk tidak mengganggu rekan praktikan
lain.
5) Pastikan diri anda tidak menyentuh sumber listrik.
3. Kegiatan Praktikum
1) Buka text editor / IDE yang akan digunakan.
2) Buat file baru kemudian simpan file tersebut dengan nama
“Modul1_Web_Stambuk.html” (untuk tugas off-line), upload
pada codepen.io/web/blog pribadi (untuk tugas on-line sertakan
linknya:……..).
3) Kerjakan percobaan pada sub modul pada file yang telah dibuat di
atas.
4) Setelah percobaan selesai, tutup (close) semua perangkat lunak
yang telah digunakan.
5) Matikan PC dan rapikan meja praktikum.

EVALUASI PRAKTIKUM
1. Buatlah contoh tampilan dokumen HTML seperti di bawah ini:

Catatan:
- Gunakan tag-tag yang sesuai untuk menghasilkan tampilan seperti di atas.

Laboratorium Rekayasa Perangkat Lunak | 9


Modul Praktikum 2021/2022
Pemrograman Web
- Untuk Gambar, silahkan tampilkan gambar/foto anda masing-masing.
- Buatkan teks berjalan (Running Text) pada teks berikut : “HTML
JavaScript CSS PHP”.
- Tuliskan Linknya (codepen.io): 13020220101_Sofiah Alkhoriyyah - CodeSandbox
- Silahkan dirubah (rename) nama file ini menjadi Pemrograman Web-1-
Stambuk – NamaAnda.docx
- Modul ini diupload kembali melalui kalam/media komunikasi yang telah
disepakati.

Kesimpulan Praktikum

Evaluasi Praktikum
Stamp (date) Result / Point Signature/Name
A = 85 – 100
A- = 80 – 84
= 75 –
B+ 79
B = 70 – 74
B- = 65 – 69
= 60 –
C+ 64
= 50 –
C 59
Dosen : Ir. Dedy Atmajaya, S.Kom., M.Eng ., MTA
Assisten : - Muhammad Dani Arya Putra
- Nirmala

Stambuk : 13020220101 Email sofiahalkhryyah@gmail.


com
:
Nama Sofiah Alkhoriyyah WA 085823150801
: :

Catatan :

Laboratorium Rekayasa Perangkat Lunak | 10

Anda mungkin juga menyukai