Scribd
Unggah
44 tayangan

Modul Pembelajaran HTML Dasar

Diunggah oleh

nadi58901
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
44 tayangan

Modul Pembelajaran HTML Dasar

Diunggah oleh

nadi58901
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

MODUL PEMBELAJARAN TAHUN 2023

HTML DASAR

SMK HIDAYATUL MUBTADIIN

Jl. Kotta Blater Gg.III/160 SIDODADI-TEMPUREJO-


JEMBER

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


MODUL TOTURIAL PEMBELAJARAN WEB HTML

A. HTML
Apa itu HTML?
 HTML adalah singkatan dari Hyper Text Markup Language
 HTML adalah bahasa markup standar untuk membuat halaman Web
 HTML menjelaskan struktur halaman Web
 HTML terdiri dari serangkaian elemen
 Elemen HTML memberi tahu browser cara menampilkan konten
 Elemen HTML memberi label pada bagian konten seperti "ini adalah judul", "ini adalah
paragraf", "ini adalah tautan", dll.
B. Penjelasan elemen HTML
 <!DOCTYPE html> mendefinisikan bahwa dokumen ini adalah dokumen HTML5
 Elemen <html> adalah elemen akar halaman HTML
 Elemen <head> berisi informasi meta tentang halaman HTML
 Elemen <title> menentukan judul untuk halaman HTML (yang ditampilkan di bilah judul
browser atau di tab halaman)
 Elemen <body> mendefinisikan isi dokumen, dan merupakan wadah untuk semua
konten yang terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll.
 Elemen <h1> mendefinisikan judul besar
 Elemen <p> mendefinisikan sebuah paragraph
C. Browser yang di guanakn untuk HTML
browser web (Chrome, Edge, Firefox, Safari) adalah untuk membaca dokumen HTML dan
menampilkannya dengan benar.

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


D. Macam – macam sintak HTML
a. Paragraf
Paragraf HTML
Elemen HTML <p> mendefinisikan sebuah paragraf.

Sebuah paragraf selalu dimulai pada baris baru, dan browser secara otomatis menambahkan
spasi (margin) sebelum dan sesudah paragraf.
Contoh :

b. Heading
Judul Itu Penting
Mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman web
Anda.

Pengguna sering kali menelusuri halaman berdasarkan judulnya. Penting untuk


menggunakan judul untuk menunjukkan struktur dokumen.

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


Judul <h1> sebaiknya digunakan untuk judul utama, diikuti dengan judul <h2>, lalu <h3>
yang kurang penting, dan seterusnya.
Contoh :

c. Attribut
Atribut gaya HTML digunakan untuk menambahkan gaya ke suatu elemen, seperti warna,
font, ukuran, dan lainnya.
Contoh 1 warna font :

Contoh 2 background :

Contoh 3 :

Contoh 4 jenis font :

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


Contoh 5 ukuran font :

Contoh 6 perataan teks :

d. Formatting
Deskripsi Tag
 <b> Mendefinisikan teks tebal
 <em> Mendefinisikan teks yang ditekankan
 <i> Mendefinisikan bagian teks dengan suara atau suasana hati alternatif
 <small> Mendefinisikan teks yang lebih kecil
 <strong> Mendefinisikan teks penting
 <sub> Mendefinisikan teks subskrip
 <sup> Mendefinisikan teks superskrip
 <ins> Mendefinisikan teks yang disisipkan
 <del> Mendefinisikan teks yang dihapus
 <mark> Mendefinisikan teks yang ditandai/disorot

Contoh 1 bold :

e. Gambar
Tag HTML <img> digunakan untuk menyematkan gambar di halaman web.
Gambar secara teknis tidak dimasukkan ke dalam halaman web; gambar ditautkan ke
halaman web. Tag <img> membuat ruang tunggu untuk gambar yang direferensikan.
Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Tag <img> memiliki dua atribut yang diperlukan:
src - Menentukan jalur ke gambar
alt - Menentukan teks alternatif untuk gambar
Atribut src yang diperlukan menentukan jalur (URL) ke gambar.
Catatan: Saat halaman web dimuat, pada saat itulah browserlah yang mengambil gambar
dari server web dan menyisipkannya ke halaman. Oleh karena itu, pastikan gambar tersebut
benar-benar tetap berada di tempat yang sama dengan halaman web, jika tidak pengunjung

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


Anda akan mendapatkan ikon tautan rusak. Ikon tautan rusak dan teks alt ditampilkan jika
browser tidak dapat menemukan gambar.
Contoh 1 :

Contoh 2 :

Contoh 3 :

f. Table
Tabel HTML memungkinkan pengembang web untuk mengatur data ke dalam baris dan
kolom.
Tag Tabel HTML
Deskripsi Tag
 <tabel> Mendefinisikan sebuah tabel
 <th> Mendefinisikan sel header dalam sebuah tabel
 <tr> Mendefinisikan baris dalam tabel
 <td> Mendefinisikan sel dalam tabel
 <caption> Mendefinisikan keterangan tabel
 <colgroup> Menentukan grup yang terdiri dari satu atau lebih kolom dalam tabel
untuk diformat
 <col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
 <thead> Mengelompokkan konten header dalam sebuah tabel
 <tbody> Mengelompokkan konten isi dalam tabel
 <tfoot> Mengelompokkan konten footer dalam sebuah tabel

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


Contoh 1 :

g.

g. List
Daftar HTML memungkinkan pengembang web mengelompokkan sekumpulan item terkait
dalam daftar.
Tag Daftar HTML
Deskripsi Tag
 <ul> Mendefinisikan daftar yang tidak berurutan
 <ol> Mendefinisikan daftar yang diurutkan
 <li> Mendefinisikan item daftar
 <dl> Mendefinisikan daftar deskripsi
 <dt> Mendefinisikan istilah dalam daftar deskripsi
 <dd> Menjelaskan istilah dalam daftar deskripsi
Daftar HTML Tidak Berurutan
Daftar tidak berurutan dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan poin (lingkaran hitam kecil) secara default:
Contoh :

Daftar HTML yang dipesan


Daftar yang diurutkan dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan angka secara default:


Contoh :

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


HTML juga mendukung daftar deskripsi.
Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag
<dd> menjelaskan setiap istilah:

Contoh :

h. Video
Elemen HTML <video> digunakan untuk menampilkan video di halaman web.
Atribut kontrolnya menambahkan kontrol video, seperti putar, jeda, dan volume.

Sebaiknya selalu sertakan atribut lebar dan tinggi. Jika tinggi dan lebar tidak disetel,
halaman mungkin berkedip saat video dimuat.

Elemen <source> memungkinkan Anda menentukan file video alternatif yang dapat dipilih
oleh browser. Browser akan menggunakan format pertama yang dikenali.

Teks di antara tag <video> dan </video> hanya akan ditampilkan di browser yang tidak
mendukung elemen <video>.
Contoh :

i. Audio
Elemen HTML <audio> digunakan untuk memutar file audio di halaman web.
Atribut kontrol menambahkan kontrol audio, seperti putar, jeda, dan volume.

Elemen <source> memungkinkan Anda menentukan file audio alternatif yang dapat dipilih
oleh browser. Browser akan menggunakan format pertama yang dikenali.

Teks di antara tag <audio> dan </audio> hanya akan ditampilkan di browser yang tidak
mendukung elemen <audio>.

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom


Contoh :
j.

j. Hyperlink
Tautan HTML adalah hyperlink.
Anda dapat mengeklik tautan dan melompat ke dokumen lain.
Saat Anda menggerakkan mouse ke atas link, panah mouse akan berubah menjadi tangan
kecil.
Atribut terpenting dari elemen <a> adalah atribut href, yang menunjukkan tujuan tautan.
Teks tautan adalah bagian yang akan terlihat oleh pembaca.
Mengklik teks tautan, akan mengirim pembaca ke alamat URL yang ditentukan.

 Gunakan elemen <a> untuk mendefinisikan tautan


 Gunakan atribut href untuk menentukan alamat tautan
 Gunakan atribut target untuk menentukan tempat membuka dokumen tertaut
 Gunakan elemen <img> (di dalam <a>) untuk menggunakan gambar sebagai tautan
 Gunakan skema mailto: di dalam atribut href untuk membuat tautan yang membuka
program email pengguna

Hyperlink di bagi menjadi 2 yaitu hyperlink external dan internal.

Contoh hyperlink external :

Contoh internal link :

Modul UKK tahun 2023 by : RIZKI BUDI SANTOSO,S.Kom

Anda mungkin juga menyukai