jobsheet pw
TRANSCRIPT
JOBSHEET
PEMROGRAMAN WEB
Praktek : Pemrograman HTML Dasar Nama :
Kompetensi Keahlian : Teknik Komputer Jaringan Instruktur :
1. Tujuana. Siswa dapat mengetahui jenis-jenis kode program HTML dasarb. Siswa dapat menggunakan kode HTML untuk merancang sebuah halaman web
2. Prosedur Percobaana. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal : nadira_07b. 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 : *.htmle. 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 Singkata. 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
Simpan kode diatas dengan nama contoh1.html, lalu buka di browser.
<html><head><title> Pemrograman Web</title></head><body>Hello, Guys..!!</body></html>
Gambar 1. Hasil Tampilan Struktur Dasar
b. Beberapa Tipe Elemen Block Level untuk TeksBerikut ini adalah tabel elemen-elemen dalam block-level untuk teks yang dikenal dalam HTML:Tabel 1.
Contoh untuk heading:Heading.html<html><head><title> Pemrograman Web</title></head><body><h1> Jurusan Teknik Komputer dan Jaringan </h1><h2> Jurusan Teknik Komputer dan Jaringan </h2><h3> Jurusan Teknik Komputer dan Jaringan </h3><h4> Jurusan Teknik Komputer dan Jaringan </h4></body></html>
Gambar 2. Jenis Heading
Contoh untuk paragraph:Paragraf.html
Blockquote digunakan untuk membuat tulisan yang menjorok ke dalam atau biasa.Blockquote.html
<html><head><title> Pemrograman Web </title></head><body><p>Selamat Datang di SMK Negeri 1 Panji, SMK Bisa</p><p> Ini Contoh Paragraf baru</p></body></html>
<html><head><title> Pemrograman Web</title></head><body><p>Departemen Pendidikan Nasional Republik Indonesia</p><blockquote><p>Selamat Datang Jurusan Teknik Komputer Jaringan </p><p> Paragraf baru</p></blockquote><p>SMK Negeri 1 Panji Situbondo</p></body></html>
Contoh Preformated Text dan Garis LurusPreformatted.html
Gambar 3. Perbedaan Teks Preformatted Text danFungsi <hr> untuk membuat garis lurus
Contoh List / Daftar ItemStruktur unordered list (semacam bullets)Struktur Unordered list ditunjukkan sebagai berikut<u1><li> .... </li><li> .... </li></u1>
<html><head><title> Pemrograman Web </title></head><body><pre> This is an example of text with a lot of curious white space.</pre><hr><p> This is an example of text with a lot of curious white space.</p></body></html>
contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut:UnorderedList.html
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 ….Struktur Ordered list ditunjukkan sebagai berikut:<o1><li> .... </li><li> .... </li></o1>contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut:OrderedList.html
c. Efek Cetak Huruf dalam HTMLBerikut adalah cara memberikan efek huruf pada dokumen HTML:1. Untuk memberikan efek huruf tebal (bold)
<b> cetak tebal </b>
<html><head><title> Pemrograman Web </title></head><body>Jurusan di SMK Negeri 1 Panji Situbondo<UL type="circle"><Li>Teknik Komputer dan Jaringan</li><Li>Administrasi Perkantoran</li><Li>Perbankan Syariah</li></UL></body></html>
<html><head><title> Pemrograman Web </title></head><body>Jurusan di SMK Muhammadiyah 2 Muntilan<ol type="I"><li> Teknik Komputer dan Jaringan </li><li> Administrasi Perkantoran </li><li> Perbankan Syariah </li></ol></body></html>
2. Untuk memberikan efek huruf miring (italic)<i> cetak miring </b>
3. Untuk memberikan efek huruf garis bawah (underline)<u> garis bawah </u>
4. Untuk memberikan efek huruf subscript<sub> cetak subscript </sub>
5. Untuk memberikan efek huruf superscript<sup> cetak superscript </sup>
6. Untuk memberikan efek huruf tercoret (strike)<s> cetak stripe </s>
Untuk ganti baris baru digunakan tag Breaking Now ditulis <br> tanpa tag penutup. Contoh selengkapnya:EfekHuruf.html
d. Komentar Dalam HTMLUntuk menuliskan komentar didalam tag HTML digunakan tag:<!-- tulis komentar di dalam tanda ini -->
Semua teks yang ada di dalam tanda <!-- ….. --> tidak akan di-interpreter oleh web browser, hanya menjadi keterangan saja.
e. Karakter Khusus dalam HTMLDikarenakan 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
<html><head><title> Pemrograman Web </title></head><body><b> Huruf tebal </b><br><i> Cetak miring </i><br><u> Garis bawah </u><br><sub> Cetak subscript </sub><br><sup> Cetak superscript </sup><br><s> Cetak stripe </s></body></html>
4. TugasBuatlah tampilan teks HTML di web browser seperti gambar di bawah ini:Simpan dengan nama Tugas1.html