Modul 1 Pemrograman Web
Modul 1 Pemrograman Web
1. Materi Pokok
Anatomi dokumen web dan pemformatan teks dan paragraf
2. Tujuan
a. Memahami dasar-dasar HTML
b. Memahami pemformatan teks dan paragraf
c. Menyajikan dokumen web dengan pemformatan teks dan paragraf
3. 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 dikeliling oleh dua tanda kurung siku
( “<” dan ”>” ). Secara umum, tag HTML ditambahkan secara berpasangan, terdiri
atas tag pembuka dan tag penutup. Tag penutup penulisannya hampir sama dengan tag
pembuka, tetapi ditambahkan karakter “/” sebelum nama tag.
Contoh :
<body> sebagai tag pembuka dan </body> sebagai tag penutup.
c. Elemen HTML
Elemen HTML adalah semua yang ditambahkan di antara tag pembuka dan penutup.
Contoh :
<p> Assalamualaikum </p>
dimana “Assalamualaikum adalah elemen dari tag <p>
d. Struktur dasar HTML
Berikut ini adalah struktur dasar dokumen HTML
<!DOCTYPE html> sebagai deklarasi bahwa jenis dokumen HTML yang
digunakan adalah HTML5
<html> menyatakan kepada browser bahwa dokumen web yang digunakan
adalah HTML
<head> digunakan untuk menambahkan judul tab dari dokumen web ketika
tampil di browser serta untuk informasi berupa font, css, javascript, dll.
<body> berisi semua elemen HTML yang akan dimuat dalam konten halaman
web ketika tampil di browser
4. Latihan
Langkah:
1) Ketikkan kode pemrograman seperti yang dicontohkan, pada Text Editor (Notepad,
Notepad++, dll.)
2) Simpan dengan format .html
3) Buka dokumen HTML yang sudah disimpan di browser untuk melihat hasilnya
Latihan1.html
Tag <p> dan </p> digunakan untuk membuat paragraf teks
Latihan2.html
Latihan3.html
Tag <br> digunakan untuk memindahkan teks ke baris baru dan tidak memerlukan tag penutup
Latihan4.html
Tag heading (h1 sampai dengan h6) umumnya digunakan untuk membuat judul dan subjudul,
dimana h1 memiliki ukuran terbesar dan h6 untuk ukuran terkecil.
Latihan5.html
Tag <hr> digunakan untuk membuat garis horizontal dan tidak memerlukan tag penutup
Latihan6.html
Penambahan komentar atau comment pada HTML berguna sebagai penjelasan terhadap kode
HTML yang kita gunakan. Comment tidak ditampilkan oleh browser. Kode untuk menambahkan
komentar adalah sebagai berikut:
<!-- isi komentar -->