1 MODUL MATERI Disusun : Rachmat Hidayat, A.Md.Kom Hp2 BAB 1 HTML TINGKAT DASAR Dasar dari semua pemrograman web adalan pemrograman HTML, sehingga dik...
BAB 1 HTML TINGKAT DASAR Dasar dari semua pemrograman web adalan pemrograman HTML, sehingga dikatakan bahwa tidak akan dapat membangun sebuah gedung tanpa ada pondasi yang mendasari dari gedung tersebut. Apapupn bagus dan kuatnya gedung tersebut bila tanpa ada pondasi maka tidak akan dapat bertahan lama. Dalam modul ini semua contoh pemrograman dicoba pada browser Internet Explorer, akan tetapi tidak menutup kemungkinan untuk menggunakan browser yang lainnya seperti Netscape Communicator dan lainnya.
A. Format Penulisan HTML Untuk memulai pembuatan halaman HTML maka dapat dimulai dengan menyiapkan editor yang akan digunakan, misalkan EditPlus atau Notepad, yang dilakukan disini adalah menggunakan EditPlus karena mempunyai fasilitas yang mendukung guna pembuatan HTML maupun PHP nantinya. Format halaman HTML adalah terdiri dari dua bagian yaitu bagian Header dan bagian Body, yang semuanya itu dibuka dan ditutup dengan . Seperti tag adalah digunakan untuk tanda awal dari suatu halaman HTML, sedangkan tag (diawali tanda slash) digunakan untuk tanda akhir dari suatu halaman HTML. Tag-tag tersebut dapat ditulis dengan huruf kecil maupun huruf besar, karena HTML tidak mengenal case sensitive (membedakan huruf kecil dan besar). Di bagian tag dapat diisi tag lain, diantaranya sebagai berikut : Judul halaman
: . . .
Informasi untuk search engine
: <meta name=”penjelasan” content=”isi”>
Penyisipan musik ke dalam web
:
Di dalam tag dapat ditambahkan attribut, diantaranya sebagai berikut : Warna teks
: text=”warna”
Warna latar belakang
: bgcolor=”warna”
Latar belakang gambar
: background=”nama file gambar”
Warna link yg pernah dikunjungi : vlink=”warna” Warna link yg aktif
: alink=”warna”
Di mana “warna” dapat berupa kode warna atau kode nama warna. Berikut ini adalah 16 warna tersebut yang otomatis didukung oleh web browser : Black
= #000000
Blue
= #0000FF
Olive
= #808000
White
= #FFFFFF
Fuchsia
= #FF00FF
Green
= #008000
Red
= #FF0000
Gray
= #808080
Teal
= #008080
Yellow
= #FFFF00
Silver
= #C0C0C0
Navy
= #000080
Lime
= #00FF00
Maroon
= #800000
Purple
= #800080
Aqua
= #00FFFF
Agar lebih jelas, coba skrip : hallo.html Judul ditampilkan pada baris teratas browser <meta name=”Author” content=”Rachmat Hidayat”> SELAMAT ANDA TELAH BERHASIL MEMBUAT HALAMAN WEB ! By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211
Belajar Web Design - 1
Design Grafis, Web Programming, Software Provider ::
B. Sytle dari Teks Ada dua cara untuk pengaturan style teks, yaitu menggunakan heading dengan tag atau menggunakan font dengan tag . Heading menyediakan 6 style teks yang dapat diatur menggunakan angka dari 1 sampai 6, dimana angka 1 adalah ukurang yang paling besar, biasanya digunakan untuk judul atau sub judul, yang dicetak besar dan tebal (bold). Heading mempunyai attribut untuk mengatur perataan yaitu Align=”Left | Center | Right”. Sedangkan bila menggunakan cara kedua maka digunakan tag dimana tersedia 7 style teks yang dapat dipilih menggunakan tingkatan dari 1 sampai 7, yang merupakan kebalikan dari heading, dimana 1 adalah ukuran terkecil sedangkan 7 adalah ukuran terbesar, dan tidak tebal. Di dalam tag dapat ditambahkan attribut, diantaranya sebagai berikut : Ukuran
: size=”angka 1 s/d 7”
Warna Teks
: color=”warna”
Jenis font yang dikehendaki
: face=”tipe_font”
Agar lebih jelas, coba skrip : style teks.html Style Teks Menggunakan Heading dan Font
JUDUL MENGGUNAKAN HEADING 1 DAN ALIGN TENGAH
JUDUL MENGGUNAKAN HEADING 2 DAN ALIGN KANAN
JUDUL MENGGUNAKAN HEADING 3 DAN ALIGN KIRI
TEKS INI MENGGUNAKAN UKURAN 6 DENGAN FONT FACE "DEFAULT" BROWSER
TEKS INI MENGGUNAKAN UKURAN 7 DENGAN FONT FACE "VERDANA"
C. Pengaturan Format Tata Letak Pengaturan tata letak disni untuk mengatur tampilan teks agar terlihat rapi dan sesuai dengan keinginan, yaitu meliputi pengaturan paragraph, ganti baris baru, pengaturan posisi judul atau sub judul, yaitu diletakkan posisi kiri, tengah atau kanan dari halaman web, mencetak secara miring untuk penekanan suatu kata, dan lain sebagainya. Adapun tag-tag yang digunakan disini adalah meliputi tag : Paragraf
Teks dapat lebih dibuat menarik dengan menjalankan teks yang diinginkan. Teks berjalan dapat dibuat dengan tag : <marquee> . . . Adapun atribut yang dapat ditambahkan pada tag <marquee>, sebagai berikut : Mengatur warna background teks : bgcolor=”warna” Mengatur arah gerakan
: direction=”left | right | up | down”
Mengatur perilaku gerakan
: behavior=”scroll | slide | alternate” Scroll : teks bergerak berputar, Slide : teks bergerak sekali lalu berhenti Alternate : teks bergerak ke kiri lalu ke kanan, dst.
Agar lebih jelas, coba skrip : format teks.html Pengaturan Format Tata Letak Modul ajar ini dususun berdasarkan berbagai referensi yang ada, baik bersumber pada buku teks dan dari alamat-alamat URL yang ada di Internet. Ditambah dengan pengalaman penulis. selama mengajar.
Penulis mengucapkan banyak <small>terima kasih kepada rekan-rekan yang telah banyak merelakan waktunya.
KATA MUTIARA
Berakit rakit ke hulu berenang-renang ketepian, bersakit-sakit dahulu bersenang-senang kemudian. Mempelajari pemrograman web tidaklah semudah membalik tangan, diperlukan kemauan yang tinggi dapat mempelajarinya, dengan jalan <em>mempertinggi jam terbang yaitu sering mencoba dan mencoba lagi sehingga mampu untuk membuat halaman web <sub>statis dan <sub>dinamis dan <sup>benar, jangan <strike>diam saja..
Terkadang diinginkan untuk menampilkan teks seperti apa adanya, misalkan sautu teks program, dimana susunan dari tiap kalimat harus sama persis dengan aslinya. Untuk keperluan tersebut maka dapat digunakan tag <pre> yang berfungsi untuk menampilkan teks apa adanya seperti aslinya. Agar lebih jelas, coba skrip : pre.html Format Teks Dengan Tag Preformatted
CONTOH PROGRAM PHP
<pre> Karena karakter “<” dan “C” merupakan karakter khusus yang digunakan untuk membuat tag, maka untuk menampilkan karakter tersebut apa adanya pada halaman browser maka digunakan entitas karakter, yang terdiri dari tiga karakter yaitu & (ampersand), # (crash) dan ; (semicolon). Entitas ini mempunyai sifat case sensitive, dimana memperhatikan penulisan antara huruf kecil dan besar. Berikut diberikan table karakter entitas dimana sering ditemukan pada halaman web dan bahkan sering digunakan untuk keperluan tertentu, seperti contoh di atas. Kode
D. Tugas (dikumpulkan pada pertemuan berikutnya) Buatlah halaman web sederhana sebagai homepage pribadi, yang berisi tentang data pribadi misalkan NIM, nama, alamat rumah, tempat & tanggal lahir, riwayat pendidikan, email, hobby, karya-karya penelitian / program yang pernah dibuat, pengalaman kerja, kesan pertama terhadap Mr. Tamhcar, cita-cita, pengalaman suka duka, bahasa program yang dikuasai, program-program komputer (software) yang pernah dicoba, system operasi yang dikuasai, cowok / cewek idaman dan lain-lain. Gunakanlah tag-tag yang telah dipelajari di atas, buat seindah dan semenarik mungkin. By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211
Belajar Web Design - 4
Design Grafis, Web Programming, Software Provider ::
BAB 2 MANIPULASI DAFTAR ITEM DAN TABEL Didalam bab 1 telah dijelaskan tentang penggunaan tag-tag dasar dari HTML untuk membuat halaman web, yaitu meliputi format halaman dan style dari teks yang digunakan. Untuk selanjutnya dibahas mengenai tag-tag yang lain dimana melibatkan penggunaan bullet, yaitu untuk membuat daftar / list dari satu teks. Di dalam bab ini juga dijelaskan tentang bagaimana cara membuat table, dimana table banyak digunakan pada pembuatan halaman web yang memerlukan pengaturan posisi kolom, seperti halnya pada halaman web suatu portal
A. Manipulasi Daftar Item Manipulasi list tidak begitu populer secara ekstrim karena ia dapat diganti dengan gambar bullet. Akan tetapi selain bekerja jauh lebih cepat dari penggunaan gambar bullet, ia membuat kesan berbeda antara homepage pemula dengan homepage profesional. Halaman-halaman web yang berisi daftar tentang nama-nama staf, divisi, stok barang, daftar isi atau indeks biasanya memerlukan tampilan rapi dan profesional. Ada beberapa tag khusus yang berhubungan dengan pembuatan daftar, diantaranya
, ,
,
,
,
dan <MULTICOL>. 1. Daftar Tak Berurut | Tanpa Nomor Daftar tak berurut dapat digunakan untuk membuat daftar item yang isinya tidak berurut. Tag yang digunakan adalah
(Unordered List) dan setiap item yang ada di dalam daftar harus didahului dengan tag
(List). Secara default browser akan menghasilkan gambar bullet berupa bulatan hitam untuk hitam untuk level pertama, gambar lingkaran untuk item level kedua dan gambar kotak hitam untuk item level ketiga. Demikian seterusnya secara berulang. Jika tidak ingin menggunakan bullet default, maka dapat ditambahkan attribut TYPE dalam tag
, dengan pilihan “disc”, “circle” dan “square” sehingga tag
menjadi
Agar lebih jelas, coba skrip : unordered.html Daftar Tak Berurut atau Tanpa Nomor
~ DEPOT TAMHCAR ~
Daftar Makanan
Nasi Goreng
Nasi LaLapar
Nasi LoeDech
Nasi Campur Apa Saja
Daftar Minuman
Minuman Dingin
Coca Cola Cool
Es Teh
Minuman Panas
Kopi Panas
Wedang Jahe
By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211
Belajar Web Design - 5
Design Grafis, Web Programming, Software Provider ::
2. Daftar Berurut | Bernomor Daftar berurut dapat digunakan untuk membuat daftar item dengan nomor urut. Tag yang dapat digunakan adalah (Ordered List) dan setiap item yang ada di dalam daftar harus didahului dengan tag
(List). Anda dapat menentukan tipe nomor urutnya sendiri dengan mengisi attribut TYPE dengan tipe_nomor seperti terlihat pada sintaks berikut : Dimana tipe_nomor digunakan untuk menentukan tipe nomor yang ingin ditampilkan oleh browser. Dapat berupa salah satu dari : “1” (1, 2, 3, …), “a” (a, b, c, …), “A” (A, B, C, …), “i” (i, ii, iii, …) dan “I” (I, II, III, …) “angka” pada attribut START= adalah angka integer yang dapat digunakan untuk menentukan angka awal item. Agar lebih jelas, coba skrip : ordered.html Daftar Berurut atau Dengan Nomor
SERBA GRATIS DARI INTERNET
Penyelenggara E-mail Gratis
DALAM NEGERI :
mail.telkom.net
www.bolehmail.com
LUAR NEGERI :
mail.yahoo.com
mail.excite.com
Penyelenggara Web Space Gratis
3. Daftar Definisi Daftar definisi diperlukan saat kita akan menjelaskan suatu terminologi secara rapi dan profesional. Secara umum ada dua bagian item di dalam sebuah daftar definisi. Bagian pertama adalah bagian tabel dan bagian kedua adalah bagian penjelasan. Blok daftar definisi ditentukan dengan tag
. Untuk bagian tabel, kita menggunakan tag
, sedangkan untuk membuat bagian penjelasan atau definisi kita menggunakan tag
. Agar lebih jelas, coba skrip : daftar definisi.html Membuat Daftar Definisi
BAB I
Pendahuluan Menjelaskan mengenai Evolusi Cyberspace, Word Wide Web, Perencanaan HomePage serta Editor-editor Web yang digunakan untuk membuat HomePage. By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211
Belajar Web Design - 6
Design Grafis, Web Programming, Software Provider ::
Dasar-Dasar Bahasa HTML. Mengapa kita menggunakan tag-tag serta attributattributnya serta menjelaskan segala sesuatu tentang dasar-dasar HTML yang harus diketahui sebelum membuat HomePage.
Jika tag
digunakan tanpa tag
, maka dapat dimanfaatkan untuk membuat baris pertama paragraf lebih masuk ke dalam (indent).
B. Membuat Tabel Tabel memungkinkan perancang web untuk mengorganisasikan data dalam struktur tabulator yang rumit. Tabel juga dapat diisi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Format sebuah tabel sebenarnya sederhana, akan tetapi dapat menjadi rumit karena sifat struktur aslinya. Meski sederhana tetapi aturan mainnya harus benar-benar diikuti, tidak seperti penggunaan tag-tag yang lain. Sebuah tabel dimulai dengan tag
. Setiap baris tabel dibentuk dengan tag
dan setiap kolom dibentuk dengan tag
, jika kolom ingin huruf didalamnya otomatis tebal dan ketengah, biasanya untuk judul, maka tag
bisa diganti
. Di dalam tag
dapat ditambahkan attribut, diantaranya sebagai berikut : Bentuk border di sekeliling tabel
:
border=”angka” , angka 0 berarti tidak bergaris
Warna border tabel
:
bordercolor=”warna”
Mengatur Posisi tabel
:
align=”left | center | right”
Jarak antar border dengan isi
:
cellpadding=”angka”
Mengatur tebal frame dlm pixel
:
cellspacing=”angka”
Lebar tabel dlm pixel / persen
:
width=”angka”
Attribut yang dapat ditambahkan pada tag
,
dan
adalah : Warna latar belakang
:
bgcolor=”warna”
Gambar sebagai latar belakang
:
background=”nama_file”
Perataan isi sel secara horisontal :
align=”left | center | right”
Perataan isi sel secara vertikal
:
valign=”top | middle | bottom”
Untuk menggabung kolom Untuk menggabung baris Lebar kolom dlm pixel / persen tinggi baris dlm pixel
B. Menggunakan Frame Frame umumnya digunakan untuk menampilkan beberapa halaman html sekaligus dalam satu layar. Frame sangat bermanfaat jika digunakan untuk membuat menu dengan link ke berbagai halaman atau menampilkan lebih dari satu subjek dalam satu halaman. Untuk memanfaatkan frame, ada dua tag utama yang harus dipakai. Pertama
