Pemrograman Berbasis WEB Statis dan Dina

(1)

SMK WIDYAGAMA

MALANGJUDUL JOB SHEET :

Dasar-dasar HTMLUNIT KOMPETENSI :

A. Tujuan Pembelajaran

a. Memahami struktur dasar dokumen HTML

b. Mampu membuat dokumen HTML yang baik dan benar

B. Petunjuk 

  

Awali setiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.

Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur. Tanyakan kepada guru apabila ada hal-hal yang kurang jelas.

C. Dasar Teori a. HTML

HTML (Hypertext Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.

b. Struktur Dokumen HTML

Setiap dokumen HTML harus diawali dengan tag <html> dan diakhiri dengan komplemennya, yakni tag </html> tag. Sebagai tambahan, dokumen HTML juga menyertakan tiga pasang tag.

· Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen HTML.

(2)

· Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.

Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML. Salah satu elemen yang perlu

diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan

dengan tag .

D. Latihan

a. Membuat Dokumen HTML

Peralatan yang diperlukan untuk membuat dokumen HTML sangat sederhana, yakni sebuah editor teks, misalnya notepad++. Di editor inilah nantinya kita menuliskan elemen-elemen HTML untuk membentuk suatu halaman aplikasi web.

Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut: 1. Buka editor teks.

2. Ketikkan teks (kode-kode HTML) berikut:

 <title>Ini judul dokumen</title>

</head> <body>

Ini adalah teks di body </body>

</html>

3. Simpan dokumen HTML dengan nama latihan1.html dan letakkan di lokasi direktori web. Untuk mengetahui hasil pembuatan dokumen HTML, klik ganda file yang telah Anda buat. Hasilnya akan terlihat seperti Gambar 1.

(3)

b. Publikasi Halaman Web

Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.

Langkah yang diperlukan untuk publikasi ini sangat sederhana.

1. Letakkan file dokumen di direktori web, misalnya untuk web server Wamp lokasi defaultnya adalah di folder www.

2. Pastikan bahwa web server sudah dijalankan. 3. Buka web browser, kemudian ketikkan alamat URL.

c. Format Teks

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.

 Heading

Teks dalam dokumen umumnya mempunyai judul topik. Pada HTML, judul ini disebut dengan Heading. Heading juga bisa digunakan untuk menunjukkan tingkat keberartian suatu teks yang dituliskan. Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe dengan nilai 1-6. Untuk

mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar.

<body>

(4)

Gambar 2. Tampilan heading 1-6

Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.

<body>

<h1 align="right">Heading 1 ini ada di kanan</h1> <h2 align="left">Heading 2 ini ada di kiri</h2> <h3 align="center">Heading 3 ini ada ditengah</h3> </body>

Simpan dengan nama posisi_heading.html

Gambar 3. Mengatur posisi heading  Paragraf

Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag

(5)

<body>

Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama. Ini paragraf pertama.

Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua. Ini paragraf kedua.

Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga. Ini paragraf ketiga.

</body>

Simpan dengan nama paragraf.html

Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan

memanfaatkan atribut align. Sebagai contoh, dokumen berikut akan menghasilkan

paragraf rata tengah, kiri kanan, dan kanan.

<head>

<title>Demo Paragraf</title> </head>

<body>

Ini paragraf rata tengah.

Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri. Paragraf ini rata kanan kiri.

Ini paragraf rata kanan. </body>

(6)

Gambar 4. Mengatur posisi paragraf

Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya, gunakan tag line break .

<body>

Membuat baris baru Membuat baris baru

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</body>

Simpan dengan nama membuat_baris_baru.html

(7)

 Fontase

HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk

mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi. Sebagai tambahan, di sini juga akan dijelaskan mengenai cara mencetak tag.

Seperti diketahui, tag di dokumen secara otomatis akan diterjemahkan sebagai

paragraf. Adapun untuk mencetak karakter di layar, kita perlu menggunakan

nama entitas. Sebagai contoh, karakter < dinyatakan dengan nama entitas <

dan karakter > dinyatakan dengan >.

<body>

Menggunakan tag ...

Menggunakan tag ...

Menggunakan tag ... Menggunakan tag ... Menggunakan tag ...

<strike>Menggunakan tag <strike>...</strike></strike>

</body>

Simpan dengan nama entitas.html

(8)

 Karakter Khusus

Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan

memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter khusus yang dapat digunakan beserta nama entitasnya.

<body>

Simpan dengan nama karakter_khusus.html

Gambar 9. Karakter-karakter khusus

d. Preformatted Text

Adakalanya kita menginginkan agar teks yang tertulis di editor teks dapat ditampilkan apa adanya. Pada kasus seperti ini, kita bisa memanfaatkan keberadaan tag <pre>. Tag ini akan menampilkan teks dengan font Courier dan tetap

(9)

---No | Nama | Alamat

---1 | PT. Bintang | Jl. Terusan Surabaya 2 | PT. Sinar Jaya | Jl. Tidar

Simpan dengan nama preformatted.html

Gambar 10. Tampilan preformatted text

5. Garis Horizontal

Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.

<body>

Membuat garis horizontal <hr />

(10)

Simpan dengan nama horizontal_rule.html

Gambar 11. Garis horizontal

7. Pewarnaan

Untuk memberikan warna background, HTML menyediakan atribut bgcolor

di tag <body>. Atribut ini dapat diisi dengan nama warna—misalnya red— atau kode

heksadesimal—misalnya #FFFFFF. Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan kita melakukan pewarnaan. Sama

seperti bgcolor, nilai atribut ini juga dapat berupa nama warna atau kode

heksadesimal.