TUGAS 1

PRAKTIKUM WEB 2.0

“PENGENALAN HTML 2”

Nama : Annas Tasya Afril Budiyanti

Nim : 210607110034
Kelas :C
Dosen Pengampu : Wahyu Hariyanto,MM
Asisten Praktikum : Aulia Mi’rojtin Firdaus
Tanggal : 29 September 2022

PROGRAM STUDI PERPUSTAKAAN DAN ILMU INFORMASI

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI MAULANA MALIK IBRAHIM

MALANG

2022
 PENDAHULUAN

A. Tujuan
- Mahasiswa mampu memahami sintaks HTML

B. Materi

HTML merupakan singkatan dari Hipertext Markup Language adalah bahasa yang dapat
digunakan sebagai dasar pembuatan website. Bahasa HTML mudah diahami oleh pemula
maupun seseorang yang sudah terbiasa dengan Bahasa pemrograman lain.
 ISI

A. Praktikum

Silahkan buka text editor, bisa menggunakan notepad ++ atau menggunakan sublime text.
Ketikkan kode HTML berikut pada text editor lalu save dengan nama index.html

Maka hasilnya akan seperti ini jika dibuka menggunakan browser.

HTML Image

Selanjutnya sintak HTML untuk menampilkan gambar <img src =”lokasi gambar”>.
Tag gambar juga bisa ditambahkan properti ukuran gambar yang akan ditampilkan yaitu
menggunakan width dan height.
 Berikut contoh penggunaan HTML image.

HTML Link

1. Selanjutnya tag HTML untuk membuat link/tautan <a href=”alamat tautan” Klik

disini </a>,
 2. berikut contoh penggunaan HTML link.

HTML Table

1. Selanjutnya tag HTML untuk membuat tabel <table>, atribut border=”1”

ditambahkan untuk membuat ketebalan batas pada tabel.

<tr> untuk tag baris

<th> untuk tag heading
<td> untuk tag kolom
2. Hasilnya akan seperti gambar dibawah ini
HTML Icon

1. Buka kembali sublime text. Untuk membuat icon pada website yang akan tampil di
sebelah titel website. Langkah pertama cari gambar dengan bentuk simetris (panjang
dan lebar sama) yang nanti dijadikan ikon. Ketik format <link rel=”icon”
type=”image/xicon=”lokasi gambar ikon”>

2. Hasil ikon bisa di lihat di website.

HTML Format Text

1. Selanjutnya membuat format teks yang berbeda dari teks biasa, berikut beberapa format
teks yang bisa digunakan.

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
2. Hasil dari penggunaan format teks dapat dilihat pada gambar dibawah ini.