</> Pemrograman Web Dasar

Pesantren Teknologi Informasi dan Komunikasi

Tahun Akademik 2022/2023
‫عل ًْما َس َّه َل الل َّ ُه ل َُه ِب ِه ط َ ِريقًا ِإل َى ال َْجن َِّة‬
ِ ‫َو َم ْن َسل ََك ط َ ِريقًا يَل ْ َت ِم ُس ِفي ِه‬
“ Barangsiapa yang menempuh jalan untuk mencari ilmu, maka Allah akan mudahkan baginya
jalan menuju surga.“
Paragraf HTML
Paragraf HTML
Text yang ditampilkan pada halaman dapat berupa paragraph (paragraf). Tag yang
digunakan untuk menuliskan paragraph adalah <p> </p>. Misalnya dalam dokumen
HTML akan diisi dengan satu paragraf yang memberikan gambaran mengenai isi
homepage. Atribut paragraf :

Pesantren Teknologi Informasi

dan Komunikasi
Atribut Paragraf HTML
Atribut align berfungsi agar kita dapat membuat teks menjadi
rata kanan, rata kiri, rata tengah, dan rata kiri-kanan.

Lorem ipsum dolor sit amet consectetur,

adipisicing elit. Cumque molestias

Lorem ipsum dolor sit amet consectetur,

adipisicing elit. Cumque molestias

Lorem ipsum dolor sit amet consectetur,

adipisicing elit. Cumque molestias
Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Cumque molestias dsada
Pesantren Teknologi Informasi
dan Komunikasi
Mengelola Teks
Mengelola Teks
Dalam HTML mendukung format teks baik dalam penulisan judul ataupun isi dari
sebuah web. Berikut adalah beberapa contoh format teks di HTML :

<b> <strong> <u> <ins>

Mencetak tulisan tebal Mencetak tulisan bergaris bawah
<i> <mark>
Mencetak tulisan miring Mencetak tulisan marker
<s> <del>
Mencetak tulisan tercoret

Pesantren Teknologi Informasi

dan Komunikasi
Daftar Item HTML
Daftar Item
Memberikan penjelasan terstruktur dan pokok-pokok pikiran sering
digunakan daftar singkat, misal seperti menu makanan dan daftar isi
sebuah buku

Pesantren Teknologi Informasi

dan Komunikasi
Jenis Daftar Item
ol (Ordered List)
Digunakan untuk membuat
daftar berurut. Elemen <ol> </ol>

ul (Unordered List)
Digunakan untuk membuat
daftar tidak berurut. Elemen <ul> </ul>

dl (Definition List)
Digunakan untuk membuat
daftar istilah. Elemen <dl> </dl>

Pesantren Teknologi Informasi

dan Komunikasi
Hyperlink HTML
Hyperlink HTML
Untuk menghubungkan suatu halaman website ke halaman yang lain. Elemen yang
menjadi link nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita ke
halaman yang sudah ditentukan.

Halaman about
https://www.kelasppl.com/about.html

Halaman contact
https://www.kelasppl.com/contact.html

Pesantren Teknologi Informasi

dan Komunikasi
Contoh Penggunaan Hyperlink

Pesantren Teknologi Informasi

dan Komunikasi
Contoh Penulisan Hyperlink

Tag pembuka untuk membuat link Alamat URL yang akan dibuka
ketika link di klik
Tag penutup

<a href=”https://petik.or.id/”> Pesantren PeTIK </a>

Attribut untuk menentukan Teks / label untuk link

alamat URL yang akan dituju

Pesantren Teknologi Informasi

dan Komunikasi
Jenis Hyperlink
Berdasarkan alamat URL yang dituju, link dibagi menjadi :

Internal Link (relatif)

Adalah link yang menuju ke halaman website yang sama
index.html about.html

Eksternal Link (absolut)

Adalah link yang menuju domain lain
index.html kompas.com

Pesantren Teknologi Informasi

dan Komunikasi
Atribut Hyperlink
Target
Untuk menentukan target dari pembukaan link
Memiliki value :

1) _blank
membuka link pada jendela atau tab baru
2) _self
membuka link pada halaman itu sendiri (default target)

3) _top
menuju bagian paling atas pada halaman

Pesantren Teknologi Informasi

dan Komunikasi
Atribut Hyperlink
Title
Berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil
saat link disentuh pointer atau saat kita menahan tap di handphone

Contoh penulisan :
<a href="https://www.kelasppl.com/" title="Website kelas PPL"> Kelas Pemrograman </a>

Pesantren Teknologi Informasi

dan Komunikasi
Hyperlink HTML
Bagaimana membuat hyperlink yang mengarah kepada elemen tertentu ?

Pesantren Teknologi Informasi

dan Komunikasi
Hyperlink HTML
Bagaimana membuat hyperlink yang mengarah kepada
elemen tertentu yang berbeda halaman ?

Pesantren Teknologi Informasi

dan Komunikasi
Analogi Sebuah Komplek

Blok A

Komplek

Blok B

Pesantren Teknologi Informasi

dan Komunikasi
Tugas
Buatlah halaman web dengan ketentuan sebagai berikut :
●
Terdapat heading
●
Paragraf min.10 baris
●
Gunakan list item untuk menampilkan daftar konten
●
Terdapat min. 2 hyperlink

Pesantren Teknologi Informasi

dan Komunikasi
Let’s Code