BELAJAR MEMBUAT WEBSITE: 2. Modul Kegiatan HTML Pengaturan Teks dan Enumerasi

2. Modul Kegiatan HTML

Pengaturan Teks dan Enumerasi

2.1 Pokok Bahasan

1. Struktur Dokumen HTML standar W3C

2. Pengaturan Teks

3. Pengaturan Enumerasi

2.2 Tujuan Praktikum

1. Praktikan mampu memahami pengertian HTML dan Struktur Dokumen HTML

2. Praktikan mampu memahami Pengaturan Teks dan Enumerasi pada Dokumen HTML

3. Praktikan mampu membuat dokumen Web sederhana dengan bahasa HTML

2.3 Petunjuk Praktikum

1. Praktikan diharapkan mempersiapkan diri dengan mempelajari dan memahami teori HTML yang diberikan pada saat perkuliahan teori.

2. Kegiatan praktikum dilakukan dengan cara mempelajari dasar teori dan melakukan langkah-langkah yang diberikan pada subjudul Dasar Teori dan Kegiatan.

3. Pada setiap modul, Praktikan wajib mengerjakan jurnal praktikum berupa laporan dengan format yang telah ditentukan dan diserahkan kepada Asisten Laboratorium.

2.4 Dasar Teori dan Kegiatan

1. Struktur HTML Berdasarkan Standar W3C

W3C (WWW Consortium) suatu forum yang mengawasi dan mengembangan HTML menambahkan kemampuan dan fasilitas HTML yang lebih baik dari versi sebelumnya. W3C merekomendasikan bahwa file dokumen HTML harus memiliki tambahan Tag tidak hanya terdiri dari HEAD dan BODY saja.

Standar W3C untuk penulisan dokumen HTML menyarankan (mutlak harus ada) bahwa setiap dokumen HTML dilengkapi dengan DTD (Document Type Definition) untuk mendefinisikan versi XHTML maupun HTML yang digunakan, namun versi yang digunakan bisa mana saja tergantung kebutuhan (biasanya tergantung software).

Untuk mengatur tampilan umum sebuah dokumen HTML digunakan Tag-Tag tambahan diantara Tag <head> dan </head> yaitu:

Tag Title : Berisi judul halaman HTML

Tag Meta : Berisi meta-data atau informasi mengenai dokumen HTML tersebut.

a. Keyword : kata kunci dokumen (untuk keperluan Search Engine)

b. Description : deskripsi mengenai halaman HTML yang dibuat

c. Author : nama pembuat halaman HTML tersebut

d. Expires : masa berakhir sebuah dokumen HTML pada browser.

Selain itu, Tag Meta memiliki tambahan Tag yang berfungsi untuk pengaturan-pengaturan dokumen HTML ketika di eksekusi melalui Http, misalnya Content Type, Content Style, dan Refresh. Performa dari dokumen HTML yang dilengkapi dengan DTD dan Meta-Data akan terlihat saat diakses melalui internet.

Penggunaan DTD dan Meta-Data dalam sebuah halaman HTML diperlihatkan pada skrip HTML berikut ini:

Contoh1: DTD dan Meta-Data

Modul2-1.html

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns=http://www.w3org/1999/xhtml xml:lang="en" lang="en">

<head>

<title>Contoh Dokumen Dengan DTD dan Meta-Data</title>

<meta name="keyword" content="praktikum, internet" />

<meta name="description" content="belajar html" />

<meta name="author" content="alam rahmatulloh" />

<meta name="expires" content="Sunday, 22 May, 2008 10:04" />

<meta http-equiv="refresh" content="5" />

<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

<meta http-equiv="content-style-type" content="text/css" />

</head>

<body>

Hello World!

</body>

</html>

Baris ke-1 dan ke-2 pada script diatas sifatnya optional tergantung dari platform yang akan digunakan. Jika mengikuti standart W3C memang harus ditulis demikian, tapi jika script tersebut ditulis menggunakan software Macromedia Dreamweaver maka baris tersebut akan dihasilkan berdasarkan ISO dari versi Macromedia Dreamweaver yang digunakan, misalnya menggunakan Macromedia Dreamweaver MX menjadi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

2. Pengaturan Teks

Untuk melakukan pengaturan teks dalam dokumen HTML diperlukan beberapa Tag yang umum digunakan misalnya Bold, Italic, Underline, Superscript, Subscript, Strikethrough, dan Paragraf. Selain itu ada pula Tag lain yang digunakan untuk melakukan pengaturan teks dalam dokumen HTML dan Tag tersebut memiliki nilai property, sintaknya adalah: <ELEMENT ATTRIBUTE=”Value”> dimana Element sebagai Nama Tags, Attribute sebagai Atribut dari Tags dan Value sebagai nilai dari Attribute.

Tag yang digunakan untuk melakukan pengaturan Teks dalam dokumen HTML adalah:

a. Bold :  untuk menebalkan teks

b. Italic :  untuk memiringkan teks

c. Underline :  untuk menggaris bawah teks

d. Superscript :  untuk membuat text lebih keatas dan berukuran kecil

e. Subscript :  untuk membuat text lebih kebawah dan berukuran kecil

f. Strikethrough : <s></s> untuk membuat efek coretan pada teks

g. Paragraf :  untuk menandai bahwa teks dalam tag tersebut adalah paragraf

h. Font :  untuk memilih jenis font, ukuran font, dan warna font

i. Heading : <hx></hx> Tag dengan x={1,2,3,4,5,6}, biasanya menjadi judul/subjudul

j. Marquee : <marquee></marquee> untuk membuat efek teks berjalan

k. Blockquote : <blockquote></blockquote> untuk membuat teks menjorok ke dalam

Contoh penggunaan Tag-Tag diatas untuk melakukan pengaturan Teks dalam dokumen HTML adalah sebagai berikut:

Contoh2: Text Formatted

Modul2-2.html

<html>

<head>

<title>Contoh Text Formatted HTML</title>

</head>

<body>

Tulisan ini dicetak tebal

Tulisan ini dicetak miring

Tulisan ini dicetak garisbawah

Tulisan ini dicetak Superscript

Tulisan ini dicetak Subscript

<s>Tulisan ini dicetak tercoret</s>

Ini adalah sebuah paragraf, paragraf adalah kumpulan

kalimat

<address>

Teknik Informatika

Jl. Siliwangi No.24

Tasikmalaya

</address>

</body>

</html>

Contoh3: Penggunaan Tag Font

Modul2-3.html

<html>

<head>

<title>Contoh Penggunaan Font pada HTML</title>

</head>

<body>

Contoh 1

Contoh 2

Contoh 3

Default Font: Times New Roman

</body>

</html>

Contoh4: Penggunaan Tag Heading

Modul2-4.html

<html>

<head><title>Contoh Penggunaan Heading pada HTML</title></head>

<body>

<h1 align="left">Contoh Heading 1</h1>

<h2 align="left">Contoh Heading 2</h2>

<h3 align="center">Contoh Heading 3</h3>

<h4 align="center">Contoh Heading 4</h4>

<h5 align="right">Contoh Heading 5</h5>

<h6 align="right">Contoh Heading 6</h6>

</body>

</html>

Contoh5: Penggunaan Tag Marquee

Modul2-5.html

<html>

<head>

<title>Contoh Penggunaan Marquee pada HTML</title>

</head>

<body>

<marquee behavior="alternate" bgcolor="#00ffff" width="150">

Marquee Cara 1</marquee>

Marquee Cara 2</marquee>

<marquee behavior="slide" bgcolor="#ffff33" width="150"

direction="right">Marquee Cara 3</marquee>

<marquee behavior="scroll" bgcolor="#009999" direction="up"

height="100" width="150" scrollamount="1"

scrolldelay="60" onmouseover="this.stop()"

onmouseout="this.start()"><center>Marquee Cara 4

Click Aku</center></marquee>

</body>

</html>

Contoh6: Penggunaan Tag Blockquote

Modul2-6.html

<html>

<head>

<title>Contoh Penggunaan Blockquote pada HTML</title>

</head>

<body>

Dokumen HTML ini menggunakan Tag

Blocquote

<blockquote>Penggunaan Tag Blockquote menyebabkan teks yang

diapit oleh Tag ini terlihat seperti menjorok kedalam

bila dibandingkan dengan penggunaan Paragraf. Perhatikan

perbedaannya dengan penggunaan Tag diatas.</blockquote>

</body>

</html>

3. Pengaturan Enumerasi

Enumerasi dalam dokumen HTML adalah tampilan teks dalam bentuk point-point bertingkat. Enumerasi ada dua macam yaitu Ordered List dan Unordered List

a. Ordered List: Dilambangkan dengan tag <ol></ol> yang merupakan Tag untuk

membuat list (daftar) yang setiap itemnya berurutan, secara default

browser akan menampilkan format dalam bentuk arabic (1,2,3,4,...) atau

dapat pula menampilkan list yang tidak dimulai dari nomor 1. Nilai

atribut TYPE dari Ordered List dapat dilihat pada tabel berikut:

Type	Tampilan
1	1, 2, 3, 4, ... dalam bentuk angka
a	a, b, c, d, ... dalam bentuk alfabet
A	A, B, C, D, ... dalam bentuk alfabet upercase
i	i, ii, iii, iv, ... dalam bentuk angka romawi lowerase
I	I, II, III, IV, ...dalam bentuk angka romawi upercase

b. Unordered List: Dilambangkan dengan tag <ul></ul>. Unordered List adalah sebuah

list (daftar) yang setiap itemnya tidak diberi nomor, tetapi digantikan

dengan tanda Bullet, secara default browser akan menampilkan format

dalam bentuk Bullet Disc (●) Nilai atribut TYPE dari Unordered List

dapat dilihat pada tabel berikut:

Type	Tampilan
Disc	● bentuk bulatan penuh
Circle	○ bentuk bulatan tanpa fill
Square	□ bentuk kotak tanpa fill

Contoh penggunaan Enumerasi menggunakan Ordered List dan Unordered Lits dalam dokumen HTML untuk pengaturan Teks dapat anda lihat pada skrip berikut ini:

Contoh7: Penggunaan Ordered dan Unordered

Modul2-7.html

<html>

<head>

<title>Contoh Ordered dan Unordered List pada HTML</title>

</head>

<body>

Contoh Ordered List Matakuliah Teknik Informatika:

<ol type="A">

<li>Pemrograman Internet</li>

<li>Sistem Pakar</li>

</ol>

Judul-Judul Buku:

<li>Ayat-Ayat Cinta</li>

<li>Ada Apa Dengan Tinta?</li>

</ol>

Contoh Unordered List Nama Kota Di Pulau Serem:

<ul type="circle">

<li>Kota Setan</li>

<li>Kota Ember</li>

<li>Kota Kuburan</li>

</ul>

</body>

</html>

2.5 Jurnal Praktikum

Buatlah suatu dokumen dengan nama Tugas-xxx.html (xxx diisi dengan NPM anda) mengenai Surat Cinta/ Undangan/ Daftar Riwayat Hidup/ Artikel Ilmiah dengan menggunakan dan memanfaatkan Tag-Tag yang telah anda pelajari pada modul ini untuk Pengaturan Teks dan Enumerasi dilengkapi dengan DTD dan Meta-Data. Jurnal Praktikum dikumpulkan dalam bentuk:

a. Laporan yang berisi Source Code dan Print Screen tampilan tugas anda pada browser. Laporan wajib menggunakan kertas A4, Format laporan tanyakan ke Asisten!

b. File Tugas diperlihatkan dan diserahkan pada Asisten Laboratorium.

Tugas dikerjakan sendiri-sendiri, tidak diperkenankan melakukan Copy-Paste-Replace terhadap tugas rekan anda. Apabila ditemukan Plagiat (antar teman sekelas atau antar teman beda kelas), maka semua tugas yang ”Sama” tersebut dianggap batal/ tidak mengumpulkan!

See also: BELAJAR MEMBUAT WEBSITE

BELAJAR MEMBUAT WEBSITE

Monday 7 November 2011

2. Modul Kegiatan HTML Pengaturan Teks dan Enumerasi

No comments: