0% menganggap dokumen ini bermanfaat (0 suara)
29 tayangan

Modul 1 Pemrograman Web

Modul ini membahas dasar-dasar pemrograman web meliputi anatomi dokumen web, pemformatan teks dan paragraf, serta list minimal dan kombinasi. Tujuannya adalah memahami HTML dan menyajikan berbagai format teks dan daftar. Materi pokoknya meliputi pengertian HTML, tag dasar, dan struktur dokumen HTML. Modul diakhiri dengan latihan membuat dokumen web sederhana.

Diunggah oleh

M.Akhdan Baihaqi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
29 tayangan

Modul 1 Pemrograman Web

Modul ini membahas dasar-dasar pemrograman web meliputi anatomi dokumen web, pemformatan teks dan paragraf, serta list minimal dan kombinasi. Tujuannya adalah memahami HTML dan menyajikan berbagai format teks dan daftar. Materi pokoknya meliputi pengertian HTML, tag dasar, dan struktur dokumen HTML. Modul diakhiri dengan latihan membuat dokumen web sederhana.

Diunggah oleh

M.Akhdan Baihaqi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

MODUL 1 PEMROGRAMAN WEB

A. Materi Pokok
1. Anatomi dokumen web
2. Pemformatan teks dan paragraf
3. List minimal dan kombinasi

B. Tujuan
1. Memahami dasar-dasar HTML
2. Memahami pemformatan teks dan paragraf
3. Memahami list minimal dan kombinasi
4. Menyajikan pemformatan teks dan paragraf
5. Menyajikan list minimal dan kombinasi

C. Pembahasan
a) Pengertian HTML
HTML atau Hypertext Markup Language adalah bahasa markah yang digunakan untuk
membuat sebuah halaman web dan memberitahu browser bagaimana menampilkan konten
berupa teks, gambar, tabel, form, hyperlink, dll. Untuk menampilkan konten, diperlukan
perintah dalam bentuk tag-tag.
b) Tag HTML
Tag HTML terdiri atas nama tag yang dikelilingi oleh dua tanda kurung siku ( “<” dan “>”).
Secara umum, tag HTML ditambahkan secara berpasangan, terdiri atas tag pembuka dan tag
penutup. Nama tag penutup sama dengan pembuka tetapi dalam penulisannya harus
ditambahkan tanda garis miring “/” di awal. Perhatikan contoh:
<body> sebagai tag pembuka dan </body> sebagai tag penutup
c) Struktur dasar HTML
Dalam menulis dokumen HTML, terdapat struktur dasar yang harus ditambahkan, yaitu
sebagai berikut.
 <!DOCTYPE html>
Mendeklarasi bahwa jenis dokumen HTML yang dibuat adalah HTML5
 <html>
Mengindikasi bahwa jenis dokumen yang dibuat adalah HTML
 <head>
Berisi informasi mengenai dokumen web
 <body>
Berisi konten dari halaman web
d) Sintaks Dasar HTML
Berikut ini adalah beberapa macam tag HTML dasar yang cukup sering digunakan.
 <title>
Digunakan untuk menambahkan judul di tab browser.
 <p>
Digunakan untuk menampilkan konten berupa teks paragraf
 <br>
Digunakan untuk memberi jarak satu baris
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Digunakan untuk menampilkan judul halaman web dengan variasi ukuran, dimana <h1>
memiliki ukuran terbesar dan <h6> memiliki ukuran terkecil.
 <b>, <i>, <u>
Tag <b> digunakan untuk menebalkan teks, tag <i> digunakan untuk menambah efek
miring pada teks. Sedangkan, tag <u> digunakan untuk menambah garis bawah pada teks.
 <sub>
Digunakan untuk menambahkan efek subscript pada teks
 <sup>
Digunakan untuk menambahkan efek superscript pada teks.

 <ol> dan <ul>


Keduanya digunakan untuk menampilkan daftar item, dimana <ol> untuk menampilkan
daftar item terurut sedangkan <ul> untuk menampilkan daftar item tidak terurut.
Setiap item di dalam daftar ditambahkan dengan sepasang tag <li>
 <!-- Komentar -->
Bagian kode yang hanya berfungsi sebagai keterangan saja dan tidak ditampilkan pada
browser.

D. Latihan
Baca dan praktikkan langkah-langkah berikut.
1. Buka text editor dan buat dokumen baru
2. Simpan dengan nama latihan1.html
3. Ketikkan struktur dasar HTML seperti berikut.

4. Untuk judul pada tab browser, ketikkan “Latihan” di dalam tag <title>, seperti berikut.

5. Konten yang akan ditampilkan pada halaman web dapat dilihat pada keempat gambar
berikut secara berurutan.
Bagian 1

Bagian 2
Bagian 3

Bagian 4

6. Simpan dan lihat hasilnya pada browser.

Anda mungkin juga menyukai