RENCANA PELAKSANAAN
PEMBELAJARAN (RPP)
Satuan Pendidikan :
SMK N I RAO
Mata Pelajaran :
TIK
Kelas / Semester : X/ I
Tahun :
2012/2013
Standar Kompetensi :
Siswa mampu membuat tampilan web sederhana dengan
pemrograman
HTML
Kompetensi
Dasar : Siswa
mampu membuat pemrograman web dasar HTML dengan notepad
Indikator : a. Menjelaskan pengertian HTML
b. Mendeskripsikan tag-tag HTML dan Susunan
HTML
d. Membuat web sederhana dengan HTML
Alokasi Waktu :
2 x 45 menit
- Tujuan Pembelajaran
A.
Siswa dapat :
1.Mengetahui pengertian HTML
2.Membuat tampilan web sederhana dengan HTML
B.
Materi pembelajaran
Pengenalan Pemrograman web dasar dengan HTML
C.
Langkah-langkah Kegiatan Pembelajaran
1. Kegiatan Pendahuluan
- Melakukan presentasi
- Menyampaikan tujuan pembelajaran
2. Kegiatan Inti
- Menjelaskan pengertian HTML
- Menjelaskan sejarah HTML
- Menjelaskan tag-tag HTML
3. Kegiatan Penutup
Manampilkan Hasil Web
Sederhana
D.
Sumber Belajar
Buku panduan, buku digital
E. Penilaian
Hasil praktikum
Praktikum Pemrograman Web dengan HTML
A.
HTML DASAR
HTML merupakan singkatan dari HyperText
Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML
disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan
web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah
sebagai berikut:
<html>
<head>
<title>Disini Judul Dokumen HTML</title>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
<body>
Disini penulisan informasi Web
</body>
</html>
</html>
a.
Tag
Adalah teks khusus (markup) berupa dua karakter
"<" dan ">", sebagai contoh <body> adalah tag
dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas
tag pembuka dan tag penutup (ditambahkan karakter "/" setelah
karakter "<"), sebagai contoh <body> ini adalah tag pembuka
isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b.
Element
Element terdiri atas tiga bagian, yaitu tag pembuka,
isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada
web browser digunakan element title, dimana :
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu
element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag
lainnya. Contoh penulisan tag-tag yang benar :
<p>
<b>
................
</b>
</p>
<b>
................
</b>
</p>
Contoh penulisan tag-tag yang salah
<p>
<b>
................
</p>
</b>
<b>
................
</p>
</b>
c.
Attribute
Attribute mendefinisikan property dari suatu element
HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut :
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
Secara umum nilai attribute harus berada dalam tanda
petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning
dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body
bgcolor="black" text="yellow">
d.
Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan
adalah HTML. Sintaks:
<html>
..........
</html>
..........
</html>
e.
Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan
tag </head> terletak di antara tag <html> dan tag </html>. Sintaks:
<head>
...........
</head>
...........
</head>
f.
Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada
judul jendela browser. Tag <title> dan tag </title> terletak di
antara tag <head> dan tag </head>. Sintaks:
<title>
.........
</title>
.........
</title>
g.
Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag
<body> dan tag </body> terletak di bawah tag <head> dan tag
</head>. Element BODY mempunyai attribute-attribute yang
menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan
ditampilkan pada browser.
Sintaks:
<body
text="v" bgcolor="w" background="uri"
link="x" alink="y" vlink="z">
..............
</body>
..............
</body>
Attribute text memberikan warna pada teks, bgcolor
memberikan warna pada latarbelakang dokumen HTML, background memberikan
latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna
untuk link, alink memberikan warna untuk link yang sedang aktif, vlink
memberikan warna untuk link yang telah dikunjungi. Jika attribute bgcolor dan background
keduanya dispesifikasikan maka attribute background yang akan digunakan, akan
tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen
HTML maka attribute bgcolor yang akan digunakan.
B.
HTML FORMAT TEKS
ELEMENT BR (Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR
ini tidak mempunyai tag penutup. Sintaks:
<br>
contoh 1 :
<html>
<head>
<title>Latihan1</title>
</head>
<body>
Belajar bahasa pemgrograman web dengan dasar HTML. <br>
<br>Belajar bahasa pemrograman web.<br>Dengan dasar HTML.
</body>
</html>
<head>
<title>Latihan1</title>
</head>
<body>
Belajar bahasa pemgrograman web dengan dasar HTML. <br>
<br>Belajar bahasa pemrograman web.<br>Dengan dasar HTML.
</body>
</html>
ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti
dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya
optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag
</p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong
di akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai
"left", "center", "right" yang menspesifikasikan
posisi tepi horizontal dari paragraf (default: "left"). Sintaks:
<p
align="left"|"center"|"right">
........................
</p>
contoh 2 :
<html>
<head>
<title>Latihan2</title>
</head>
<body>
<p>Paragraf ini pada posisi rata kiri (default)</p>
<head>
<title>Latihan2</title>
</head>
<body>
<p>Paragraf ini pada posisi rata kiri (default)</p>
<p
align="center">Paragraf ini pada posisi rata tengah</p>
<p
align="right">Paragraf ini pada posisi rata kanan</p>
<p
align="left">Paragraf ini pada posisi rata kiri</p>
</body>
</html>
</html>
ELEMENT H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header
dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf
terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute
yaitu align yang bernilai "left", "center",
"right" yang menspesifikasikan posisi horizontal dari header (default:
"left").
Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>
x : 1 ... 6
</hx>
x : 1 ... 6
contoh 3 :
<html>
<head>
<title>Latihan3</title>
</head>
<body>
<h1>Ini Heading-1</h1>
<head>
<title>Latihan3</title>
</head>
<body>
<h1>Ini Heading-1</h1>
<h2>Ini
Heading-2</h2>
<h3>Ini
Heading-3</h3>
<h4>Ini
Heading-4</h4>
<h5>Ini
Heading-5</h5>
<h6>Ini
Heading-6</h6>
</body>
</html>
</html>
ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak
tebal (bold). Sintaks:
<b>
..........................
</b>
..........................
</b>
contoh 4 :
<html>
<head>
<title>latihan4</title>
<head>
<body>
<b>percobaan
lagi</b>
</body>
</haed>
</html>
ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak
miring (italic). Sintaks:
<i>
..........................
</i>
..........................
</i>
contoh 5 :
<html>
<head>
<title>latihan</title>
<head>
<body>
<i>percobaan
lagi</i>
</body>
</haed>
</html>
ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak
garis bawah (underline). Sintaks:
<u>
..........................
</u>
..........................
</u>
contoh 6 :
<html>
<head>
<title>latihan</title>
<head>
<body>
<u>percobaan
lagi</u>
</body>
</haed>
</html>
C.
HTML DAFTAR URUTAN
ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut.
Element ini mempunyai attribute yaitu start, dan type. Attribute start
berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type
berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf
besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i
untuk abjad romawi kecil, 1 untuk angka decimal (default:
start="1" type="1" ). Dalam element OL harus terdapat beberapa
element LI.
Sintaks:
<ol start="number"
type="A"|"a"|"I"|"i"|"1">
........................
</ol>
</ol>
contoh 7 :
<html>
<head>
<title>Latihan7</title>
</head>
<body>
Matakuliah TIK Semester 1:
<head>
<title>Latihan7</title>
</head>
<body>
Matakuliah TIK Semester 1:
<ol>
<li>Bahasa Inggris 1</li>
<li>Bahasa Inggris 1</li>
<li>Matematika
1</li>
<li>Jaringan
Komputer 1</li>
<li>Konsep
Teknologi Informasi</li>
<li>Keterampilan
Komputer dan Pengelolaan Informasi</li>
<li>Perangkat
Keras Komputer</li>
<li>Sistem
Operasi</li>
</ol>
</body>
</html>
</body>
</html>
atau
<html>
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah TIK Semester 1:
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah TIK Semester 1:
<ol
start="1" type="a">
<li>Bahasa
Inggris 1</li>
<li>Matematika
1</li>
<li>Jaringan
Komputer 1</li>
<li>Konsep
Teknologi Informasi</li>
<li>Keterampilan
Komputer dan Pengelolaan Informasi</li>
<li>Perangkat
Keras Komputer</li>
<li>Sistem
Operasi</li>
</ol>
</body>
</html>
</body>
</html>
D.
HTML IMAGE (GAMBAR)
ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element
ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks
alternatif jika gambar tidak tampil), border, height, width, hspace (jarak
kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi
dari gambar itu disimpan beserta nama file-nya). Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text" border="pixel" width="pixel"|"%"
height="pixel"|"%" hspace="pixel" vspace="pixel"
src="uri">
contoh 8 :
<html>
<head>
<title>Latihan8</title>
</head>
<body>
<img width="160" height="160" src="image027.jpg">
<head>
<title>Latihan8</title>
</head>
<body>
<img width="160" height="160" src="image027.jpg">
</body>
</html>
</html>
E.
HTML HYPERLINK
ELEMENT A
Element A befungsi untuk menghubungkan ke internal
ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan
target. Attribute href berfungsi sebagai hypertext reference yang mempunyai
nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal
halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan
dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan
halaman web pada suatu jendela frame atau jendela baru.
Sintaks:
<a
href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
...........................
</a>
</a>
contoh 9 :
<html>
<head>
<title>Latihan6-1</title>
</head>
<body>
Link:
<ol>
<li><a href="http://www.yahoo.com">yahoo</a></li>
<head>
<title>Latihan6-1</title>
</head>
<body>
Link:
<ol>
<li><a href="http://www.yahoo.com">yahoo</a></li>
<li><a
href="http://www.google.com">google</a></li>
<li><a
href="http://kaskus.com">kaskus</a></li>
</ol>
</body>
</html>
</body>
</html>
G. Evaluasi
Buatlah satu halaman web yang berisi tentang biodata diri dan cerita singkat tentang hal yang diri sendiri.
Tidak ada komentar:
Posting Komentar