REKAYASA PERANGKAT LUNAK (RPL)

SMK TELEKOMUNIKASI TUNAS HARAPAN

MODUL PEMROGRAMAN WEB HTML
No. Modul : Materi : Membuat
Heading dan Komentar TEACHER : FAIZI W, S.Kom
Pada HTML
#4 Dasar Pengenalan HTML Waktu : 1 x 45 ‘

1. Tujuan
a. Siswa dapat mengetahui tentang pembuatan heading dan komentar pada HTML
b. Siswa dapat menggunakan penulisan Heading dan komentar pada HTML

2. Prosedur Percobaan
a. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal :
Faizi_04
b. Buat subfolder praktek 1 di dalam folder yang sudah dibuat sebelumnya.
c. Bukalah aplikasi web editor (seperti: Notepad, Notepad ++) dan dan tuliskan
beberapa elemen struktur dokumen HTML yang ada dalam kajian teori singkat
yang dianjurkan untuk diuji coba pada contoh di bawah.
d. Simpan elemen-elemen struktur dokumen HTML tersebut dalam format : *.html
e. Jalankan masing-masing contoh elemen-elemen struktur dokumen HTML
tersebut dengan bantuan : Internet Explorer atau Internet Mozilla Firefox atau
Opera atau Chrome atau browser lain yang tersedia di dalam komputer saudara.

3. Kajian Materi
a. Heading Di HTML
Sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian
dari artikel.
Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>.
Tag <h1> digunakan pada judul level pertama.
Tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing
judul akan ditampilkan dengan ukuran teks yang bebeda.

Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.
Contoh : HEADING

Hasil : HEADING
Sebuah contoh artikel yang dilengkapi dengan heading. Buatlah file HTML baru
kemudian isi dengan kode berikut:
Contoh :

Hasilnya:
 Penulisan judul yang bagus adalah judul yang mengikuti levelnya.

Heading tidak memiliki atribut khusus. Ia biasanya menggunakan atribut globel.

Contohnya seperti:

 id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link,
CSS, dan Javascript;
 class untuk memberikan nama class yang akan dipakai oleh CSS;
 style untuk memberikan kode css secara langsung;
 title untuk menambahkan informasi tambahan;
 dll.
b. Perbedaan Heading dengan Title dan Header.
Walaupun semuanya sama-sama digunkan untuk urusan judul, tapi tiga
elemen ini berbeda .

 Heading : Adalah Judul untuk artikel dan bagian artikel yang dibuat dengan
<h1> sampai <h6>
 Title : Judul dari web yang dibuat dengan tag <title>
 Header : Bagian kepala (kop) pada web yang dibaut dengan tag <header>

Contoh lebih jelasnya perhatikan :

Heading di HTML title

Belajar HTML Pemula

Tutorial Heading di HTML h1 (heading)

header

Cara membuat sub judul h2 (heading)

TAMBAHAN MATERI CSS:

Untuk Heading Style: ( Tambahan Matri CSS )
Heading Style adalah style CSS yang diberikan pada heading agar terlihat menarik.

 Heading dengan Garis Bawah

Heading dengan garis bawa bisa kita buat dengan memanfaatkan
tag <hr> dan juga CSS.
Contoh : menggunakan css

<h1 style="text-decoration: underline;">Membuat Heading di HTML</h1>

Hasilnya:

 Text Case untuk Heading

Heading kadang ditulis dengan berbagai style case. Ada yang menggunakan
huruf besar semua, ada juga yang menggunakan huruf besar di awal kata saja.
untuk membuat style case heading ini, Kita bisa menggunakan CSS dengan
atribut : text-transform.
Contohnya :

<h1 style="text-transform: uppercase;">Heading

dengan huruf Besar semua</h1>
Hasilnya :
 Warna untuk Heading
Sama seperti elemen yang lainnya, heading juga dapat kita berikan warna
dengan bantuan CSS. Warna bisa kita berikan pada teks dan latar belakang
atau background.
Contohnya :
<h1 style="color: red;">Heading warna Merah</h1>

<h2 style="background-color: yellow;">Heading Latar Kuning</h2>

Hasilnya :
c. Komentar di HTML
Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan
ditampilkan di dalam web.

Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode

HTML dan kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.

Cara membuat Komentar di HTML

1. Komentar dapat kita buat dengan tag <!-- -->

Contoh :

Hasilnya:
2. Komentar untuk menyimpan Todo List
Komentar kadang sering digunakan untuk menyimpan todo list,ini akan
membantu kita mengganti apa yang harus dikerjakan pada bagian HTML
tertentu.
Contoh:

3. Komentar untuk Menonaktifkan kode HTML

Contoh :
 Hasilnya :

4. Tugas Praktek.
Silakan coba praktekan kode html di atas buat latihan.