Scribd
Unggah
9 tayangan10 halaman

Jobsheet-Pemrograman Web Kls X

jobsheet-Pemrograman web kls X

Diunggah oleh

Andaricha Setiomaulides
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai RTF, PDF, TXT atau baca online di Scribd
9 tayangan10 halaman

Jobsheet-Pemrograman Web Kls X

jobsheet-Pemrograman web kls X

Diunggah oleh

Andaricha Setiomaulides
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai RTF, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

REKAYASA PERANGKAT LUNAK

SMK NEGERI 6 KOTA BEKASI

JOB SHEET
PEMROGR
AMAN
WEB
Semester Mapel Waktu Guru Mapel
Web Mia Islamiati

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
<html>
<head>
<title> Pemrograman Web
</title>
</head>
<body>
Hello, Guys..!!
</body>
</html>
Simpan kode diatas dengan nama contoh1.html, lalu buka di browser.

Title Bar

Tag antara <body> … </body>

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.
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>

h1

h2

h3

h4

Gambar 2. Jenis Heading

Contoh untuk paragraph:


Paragraf.html
<html>
<head>
<title> Pemrograman Web </title>
</head>
<body>
<p>Selamat Datang di SMK Muhammadiyah 2 Muntilan, sekolah yang
bernuansa Islami dan berkarakter</p>
<p> Ini Contoh Paragraf baru</p>
</body>
</html>

Gambar 3. Tampilan paragraf


Blockquote digunakan untuk membuat tulisan yang menjorok ke dalam atau biasa.
Blockquote.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 Muhammadiyah 2
Muntilan</p> </body>
</html>

Gambar 4. Hasil Blockquote


Contoh Preformated Text dan Garis Lurus
Preformatted.html
<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>
Gambar 5. Perbedaan Teks Preformatted Text dan
Fungsi <hr> untuk membuat garis lurus

Contoh List / Daftar Item


Struktur unordered list (semacam bullets) Struktur
Unordered list ditunjukkan sebagai berikut
<u1>
<li> .... </li>
<li> .... </li>
</u1>
contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut:
UnorderedList.html
<html>
<head>
<title> Pemrograman Web </title>
</head>
<body>
Jurusan di SMK Muhammadiyah 2 Muntilan
<UL type="circle">
<Li>Teknik Komputer dan Jaringan</li>
<Li>Administrasi Perkantoran</li>
<Li>Perbankan Syariah</li>
</UL>
</body>
</html>

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 ….
Struktur Ordered list ditunjukkan sebagai berikut:
<o1>
<li> .... </li>
<li> .... </li>
</o1>
contoh tag dokumen HTML secara lengkap ditunjukkan sebagai berikut:
OrderedList.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>

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)
<b> cetak tebal </b>

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>
superscript
5. Untuk memberikan efek huruf
<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
<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>
d. Komentar Dalam HTML
Untuk 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 HTML
Dikarenakan tulisan tag HTML sudah menggunakan tanda < dan > maka
untuk membuat tampilan tanda < dalam isi dokumen HTML digunakan perintah
&lt; dan > digunakan perintah &gt; Untuk membuat karakter spasi dalam dokumen
HTML digunakan perintah &nbsp; (non breaking space).
Berikut adalah tabel yang digunakan untuk menulis karakter tertentu dalam HTML:
Tabel 2. Perintah Karakter Khusus HTML
Perintah Hasil
&copy; ©
&reg; ®
&#8482; ™
&#8212; —
&plusmn; ±
&para; ¶
&acute; ´
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

Anda mungkin juga menyukai