Jurusan : TEKNIK KOMPUTER DAN JARINGAN SMK MUHAMMADIYAH 2 MUNTILAN LAB SHEET PEMROGRAMAN WEB Smtr 1-XII No Jobsheet: 1
Pemrograman HTML Dasar
Revisi : 00
Instruktur : Sapto Prasetyo
Tgl. Juli 2012
1 x 4 jam x 45’
1. Tujuan a. Siswa dapat mengetahui jenis-jenis kode program HTML dasar b. Siswa dapat menggunakan kode HTML untuk merancang sebuah halaman web 2. Prosedur Percobaan a. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal : nadira_07 b. Buat subfolder prak1 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 browser lain yang tersedia di dalam komputer saudara. 3. Kajian Teori Singkat a. Struktur Dasar HTML HiperText Markup Language (HTML) merupakan format elemen-elemen struktur dokumen yang digunakan dalam web (atau WWW=Word Wide Web). Dokumen HTML mempunyai pola dasar sebagai berikut : Contoh.html
Pemrograman Web Hello, Guys..!!
Simpan kode diatas dengan nama contoh1.html, lalu buka di browser.
Title Bar
Tag antara …
Gambar 1. Hasil Tampilan Struktur Dasar
b. Beberapa Tipe Elemen Block Level untuk Teks Berikut ini adalah tabel elemen-elemen dalam block-level untuk teks yang dikenal dalam HTML: Tabel 1.
[Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 1
Contoh untuk heading: Heading.html
Pemrograman Jurusan Teknik Jurusan Teknik Jurusan Teknik Jurusan Teknik
Web
Komputer Komputer Komputer Komputer
dan dan dan dan
Jaringan Jaringan Jaringan Jaringan
h1 h2 h3 h4 Gambar 2. Jenis Heading
Contoh untuk paragraph: Paragraf.html
Pemrograman Web Selamat Datang di SMK Muhammadiyah 2 Muntilan, sekolah yang bernuansa Islami dan berkarakter
Ini Contoh Paragraf baru
Gambar 3. Tampilan paragraf [Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 2
Blockquote digunakan untuk membuat tulisan yang menjorok ke dalam atau biasa. Blockquote.html
Pemrograman Web Departemen Pendidikan Nasional Republik Indonesia
Selamat Datang Jurusan Teknik Komputer Jaringan
Paragraf baru
SMK Muhammadiyah 2 Muntilan
Gambar 4. Hasil Blockquote Contoh Preformated Text dan Garis Lurus Preformatted.html
Pemrograman Web </head> <body> <pre> This is text with of<br />
<br />
an example
of a lot
curious white space.
This is text with
an example
of a lot
of curious white space.
[Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 3
Gambar 5. Perbedaan Teks Preformatted Text dan Fungsi
untuk membuat garis lurus
Contoh List / Daftar Item Struktur unordered list (semacam bullets) Struktur Unordered list ditunjukkan sebagai berikut
.... .... contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut: UnorderedList.html
Pemrograman Web Jurusan di SMK Muhammadiyah 2 Muntilan
- Teknik Komputer dan Jaringan
- Administrasi Perkantoran
- Perbankan Syariah
Gambar 6. Unordered List dengan tipe “circle”
Struktur Ordered List (semacam Numbering) Tipe-tipe Ordered List, default angka (1, 2, 3 …) : 1 untuk penomoran 1, 2, 3 … A untuk penomoran A, B, C … I untuk penomoran I, II, III …. a untuk penomoran a, b, c … i untuk penomoran i, ii, iii ….
[Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 4
Struktur Ordered list ditunjukkan sebagai berikut:
.... .... contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut: OrderedList.html
Pemrograman Web Jurusan di SMK Muhammadiyah 2 Muntilan
- Teknik Komputer dan Jaringan
- Administrasi Perkantoran
- Perbankan Syariah
Gambar 7. Ordered List tipe “I”
c. Efek Cetak Huruf dalam HTML Berikut adalah cara memberikan efek huruf pada dokumen HTML: 1. Untuk memberikan efek huruf tebal (bold)
cetak tebal
2. Untuk memberikan efek huruf miring (italic)
cetak miring
3. Untuk memberikan efek huruf garis bawah (underline) garis bawah
4. Untuk memberikan efek huruf subscript <sub> cetak subscript
5. Untuk memberikan efek huruf superscript <sup> cetak superscript
6. Untuk memberikan efek huruf tercoret (strike) <s> cetak stripe
Untuk ganti baris baru digunakan tag Breaking Now ditulis
tanpa tag penutup. Contoh selengkapnya: EfekHuruf.html Pemrograman Web Huruf tebal
Cetak miring
[Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 5
Garis bawah
<sub> Cetak subscript
<sup> Cetak superscript
<s> Cetak stripe
d. Komentar Dalam HTML Untuk menuliskan komentar didalam tag HTML digunakan tag:
Semua teks yang ada di dalam tanda tidak akan di-interpreter oleh web browser, hanya menjadi keterangan saja. e. Karakter Khusus dalam HTML Dikarenakan tulisan tag HTML sudah menggunakan tanda < dan > maka untuk membuat tampilan tanda < dalam isi dokumen HTML digunakan perintah < dan > digunakan perintah > Untuk membuat karakter spasi dalam dokumen HTML digunakan perintah (non breaking space). Berikut adalah tabel yang digunakan untuk menulis karakter tertentu dalam HTML: Tabel 2. Perintah Karakter Khusus HTML
Perintah © ® ™ — ± ¶ ´
Hasil © ® ™ —
± ¶ ´
4. Tugas Buatlah tampilan teks HTML di web browser seperti gambar di bawah ini: Simpan dengan nama Tugas1.html
Sumber Pustaka: Zakaria, Masduki. 2008. Labsheet Pemrograman Web UNY Renaldy, Bernard dkk. 2007. Mudah dan Cepat Menguasai Pemrograman Web. Bandung: Informatika
[Modul Pemrograman Web- http://tkjcorner.wordpress.com]
Page 6
