Jurusan : TEKNIK KOMPUTER DAN JARINGAN SMK · PDF filea. Siswa dapat mengetahui jenis-jenis...

[Modul Pemrograman Web- http://tkjcorner.wordpress.com]

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.

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.

Jurusan : TEKNIK KOMPUTER DAN JARINGAN

SMK MUHAMMADIYAH 2 MUNTILAN

LAB SHEET PEMROGRAMAN WEB

Smtr 1-XII Pemrograman HTML Dasar Instruktur : Sapto Prasetyo

No Jobsheet: 1 Revisi :

00 Tgl. Juli 2012 1 x 4 jam x 45’

Title Bar

Tag antara <body> … </body>

http://tkjcorner.wordpress.com/

Contoh untuk heading:

Heading.html <html>

<head>

<title> Pemrograman Web

</title>

</head>

<body>

<h1> Jurusan Teknik Komputer dan Jaringan </h1>




</body>

</html>

Gambar 2. Jenis Heading

Contoh untuk paragraph:

Paragraf.html <html>

<head>

<title> Pemrograman Web </title>

</head>

<body>

Selamat Datang di SMK Muhammadiyah 2 Muntilan, sekolah yang

bernuansa Islami dan berkarakter

 Ini Contoh Paragraf baru

</body>

</html>

Gambar 3. Tampilan paragraf

h1

h2

h3

h4

Blockquote digunakan untuk membuat tulisan yang menjorok ke dalam atau biasa.

Blockquote.html <html>

<head>

<title> Pemrograman Web</title>

</head>

<body>

Departemen Pendidikan Nasional Republik Indonesia

<blockquote>

Selamat Datang Jurusan Teknik Komputer Jaringan 

 Paragraf baru

</blockquote>

SMK Muhammadiyah 2 Muntilan

</body>

</html>

Gambar 4. Hasil Blockquote

Contoh Preformated Text dan Garis Lurus

Preformatted.html

<html>

<head>


</head>

<body>

<pre>

This is an example of

text with a lot

of

curious

white space.

</pre>

<hr>



This is an example of

text with a lot

of

curious

white space.



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


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


</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)

 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

 cetak subscript 

5. Untuk memberikan efek huruf superscript

 cetak superscript 

6. Untuk memberikan efek huruf tercoret (strike)

<s> cetak stripe </s>

Untuk ganti baris baru digunakan tag Breaking Now ditulis tanpa tag penutup.

Contoh selengkapnya:

EfekHuruf.html

<html>

<head>


</head>

<body>

 Huruf tebal 

 

 Cetak miring

Garis bawah 

 

 Cetak subscript 

 

 Cetak superscript 

 

<s> Cetak stripe </s>

</body>

</html>

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

Jurusan : TEKNIK KOMPUTER DAN JARINGAN SMK · PDF filea. Siswa dapat mengetahui jenis-jenis...

Documents

Transcript of Jurusan : TEKNIK KOMPUTER DAN JARINGAN SMK · PDF filea. Siswa dapat mengetahui jenis-jenis...