DESAIN WEB 1 - paulusharsadi.compaulusharsadi.com/wp-content/uploads/2018/04/Modul-Desain-Web-I.pdfdesain web 1 oleh : paulus harsadi, s.kom, m.kom

[email protected] paulusharsadi.com

Design Web 1 / STMIK Sinar Nusantara Page 1

BAHAN AJAR

KURIKULUM 2013

DESAIN WEB 1

OLEH :

PAULUS HARSADI, S.Kom, M.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

SINAR NUSANTARA

SURAKARTA

2015



HALAMAN PENGESAHAN

BAHAN AJAR DESAIN WEB 1

STMIK SINAR NUSANTARA

Digunakan Pada Mata Kuliah Desain Web 1

Surakarta, 1 Maret 2015

Penyusun,

PAULUS HARSDI, S.Kom, M.Kom

Mengetahui dan Menyetujui :

Ketua Jurusan

Bebas Widada, S.Si, M.Kom



KATA PENGANTAR

Puji syukur kami panjatkan kehadiran Tuhan Yang Maha Esa atas terselesaikannya modul

praktikum Animasi ini. Modul ini disusun berdasarkan rancangan pembelajaran yang telah ada,

dengan harapan modul ini bermanfaat sebagai penunjang kelancaran proses pembelajaran..

Akhir kata penulis dengan senang hati menerima koreksi dari pembaca dalam penyempurnaan

modul praktikum ini.

Penulis



BAB I

Konsep Dasar Pemrograman Internet

&

HTML Basic

Pemrograman Internet

Perkembangan internet di dunia saat ini sangatlah cepat dan luas menembus kesegala

bidang. Internet berasal dari kata Interconnection Networking yang mempunyai arti

hubungan dari berbagai komputer dengan membentuk sistem jaringan yang mencakup

seluruh dunia atau disebut dengan jaringan komputer global.

Pemrograman internet sendiri bisa di artikan sebagai pemrograman untuk aplikasi yang

berbasis internet. Arti pemrograman itu sendiri adalah suatu kumpulan urutan perintah ke

komputer untuk mengerjakan sesuatu, dimana instruksi tersebut menggunakan bahasa

yang dimengerti oleh komputer atau yang dikenal dengan bahasa pemrograman,

sedangkan Aplikasi internet merupakan suatu jenis aplikasi yang menerapkan arsitektur

sistem terdistribusi dengan menggunakan internet sebagai media komunikasi antar

komponennya.

Jenis arsitektur sistem terdistribusi antara lain :

Client-server: sistem dibagi menjadi komponen yang berfungsi sebagai peminta

layanan (client) dan pemberi layanan (server)

Peer-to-peer: sistem terdiri atas komponnen - komponen yang fungsinya setara dan

dapat saling melayani atau meminta layanan

Pada prinsipnya, arsitektur peer-to-peer juga merupakan arsitektur client-server di

mana setiap komponennya dapat mempunyai fungsi sebagai client sekaligus server

terhadap komponen lain

Internet sendiri merupakan sebuah jaringan komputer yang sangat besar (meliputi

seluruh dunia) dan jaringan besar ini menghubungkan jaringan-jaringan kecil. Internet

menggunakan protokol (aturan komunikasi) transmisi berbasis TCP/IP. Selain protocol

transmisi, internet juga menerapkan protocol aplikasi contohnya protocol HTTP untuk

Web.

World Wide Web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di

mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang



disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan

Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya.

Bagaimana Web Bekerja ?

Alur permintaan halaman Web oleh user :

user mengetik URL di browser

browser menghubungi server yang tersebut pada URL

setelah terhubung, browser mengirimkan HTTP request

server menjawab dengan mengirim HTTP response (berisi

header dan isi dokumen)

untuk dokumen yang terdiri atas beberapa file (misalnya dokumen bergambar),

browser harus mengirimkan HTTP request lagi untuk setiap file

browser menampilkan semua isi dokumen kepada user

Dalam kerja web yang paling utama adalah protocol HTTP. HTTP (HyperText Transfer

Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam

World Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan

generik yang dapat dipergunakan berbagai macam tipe dokumen.

Pengembangan HTTP dikoordinasi oleh Konsorsium World Wide Web (W3C) dan

grup bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi satu

seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP

yang digunakan umum sekarang ini.

HTTP adalah sebuah protokol meminta/menjawab antara client dan server. Sebuah

client HTTP seperti web browser, biasanya memulai permintaan dengan membuat

hubungan TCP/IP ke port tertentu di tuan rumah yang jauh (biasanya port 80).

Pemrograman Berbasis Web Pemrograman berbasis web pada dasarnya adalah sama dengan pemrograman internet

tetapi lebih spesifik lagi hanya mempelajari pemrograman yang menggunakan protocol

HTTP atau aplikasi web.

http://id.wikipedia.org/wiki/World_Wide_Webhttp://id.wikipedia.org/wiki/World_Wide_Webhttp://id.wikipedia.org/w/index.php?title=Internet_Engineering_Task_Force&action=edithttp://id.wikipedia.org/w/index.php?title=MIME&action=edithttp://id.wikipedia.org/wiki/Request_for_Comment



Saat ini pemrograman web dibagi menjadi 2 kelompok, yaitu :

client side programming (HTML, CSS, Javascript, Jscript, VBScript)

server side programming (PHP,ASP,JavaServelet, SGI, Perl)

Perbedaan utama server-side programming dan client server programming adalah

tempat mengeksekusi skripnya. Pada client server programming, skrip dieksekusi di

browser sedangkan server side programming dieksekusi di client (web browser)

Karakteristik client side scripting :

1. Kode program didownload bersama dengan halaman web

2. Bersifat interpreter dan diterjemahkan oleh browser

3. Model eksekusinya simple dan skrip dapat dijadikan satu dengan HTML

Karakteristik server side programming :

1. Ada client yang meminta request

2. Eksekusi program dilakukan di server

3. Mengirimkan hasil ke client

Keuntungan server side programming :

1. Cross platform : tidak tergantung dengan browser tertentu

2. Optimasi danpemeliharaan dilakukan di browser

3. Dapat mengakses database dan tidak tergantung dengan keamanan

4. Menambah kekuatan server

5. Kode program aman

Aplikasi yang sering digunakan oleh server side programming

1. Search engines

2. Database access

3. Chat & bulletin board service

Terkait dengan kebutuhan user yang ingin web yang lebih interaktif, nyaman, cepat dan

mudah digunakan, maka saat ini munculah teknik pemrograman baru disebut AJAX

(Asynchronous JavaScript And XML). Dikenal juga dengan istilah Web 2.0. Pasti anda

tertarik mempelajarinya. Sebab dengan teknik ini sebagian besar interaksi pada

computer webserver, melakukan pertukaran data dengan server dibelakang layar



sehingga halaman web dapat tidak harus dibaca ulang setiap kali pengguna melakukan

perubahan.

HTML (Hypertext Mark-up Language)

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman

web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula

dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan

percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan

secara luas untuk menampilkan halaman web dan HTML kini merupakan standar

Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).. Untuk

mudahnya,

HTML pada dasarnya berupa kode - kode tag yang menginstruksikan browser untuk

menghasilkan tampilan sesuai dengan yang diinginkan.

Ciri ciri dokumen html :

Ekstensi file berupa .htm atau .html

Non case sensitive.

Terdiri atas tag - tag pembuka dan penutup (walaupun ada beberapa tag

yang tidak memiliki penutup).

Tag- tag saling berpasangan & bersarang

Program Editor Html Untuk membuat dokumen HTML, anda perlu mengetahui dan mempelajari tag-tag

yang digunakan untuk menandai bagian-bagian dari suatu dokumen HTML. Anda

dapat menggunakan program editor teks biasa seperti Notepad untuk aplikasi

Windows atau Sidekick dan WordStar dalam format Non Document untuk aplikasi

DOS.

Semua dokumen HTML harus disimpan sebagai file teks murni. Ada dua macam

ekstensi file yang dapat digunakan, yaitu ekstensi file html ( untuk sistem operasi

UNIX atau WINDOWS 95) atau .htm ( untuk sistem operasi DOS/WINDOWS 3.x)



Buka Notepad kemudian tulis source code diatas lalu Simpanlah file tersebut dengan

meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu

klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files

(*.*). Setelah itu, isilah kotak File name dengan nama file yang anda inginkan

misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang nama

file! Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web.

Struktur Dokumen Html

Dalam dokumen HTML, elemen dibagi menjadi tiga kategori utama, yaitu :

1. Elemen yang menyatakan suatu dokumen HTML 2. Elemen-elemen yang memberikan informasi tentang dokumen tersebut,

seperti judul dokumen atau hubungannya dengan dokumen lain

3. Elemen-elemen yang menentukan bagaimana isi suatu dokumen

ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain.

Struktur dokumen HTML terlihat seperti berikut ini :

*** Bagian HEAD ***

*** Bagian BODY ***

A. ELEMEN HEAD

Tidak semua tag dapat diletakan dibagian HEAD. Tag-tag yang hanya boleh

diletakan di bagian HEAD adalah :

1. TITLE

Judul dari dokumen. Tag ini mutlak diperlukan dalam semua dokumen

HTML.

Sewaktu membuat judul, sebaiknya tidak menuliskan judul lebih dari 64 karakter

Contoh :

Home Pribadi Saya



2. BASE

Menyatakan URL asal dari suatu dokumen

Base menyediakan suatu jalur pencarian bagi dokumen-dokumen atau

gambar yang mempunyai hubungan dengan dokumen dari pengguna tag BASE

tersebut.

Contoh :

Home Pribadi Saya

3. ISINDEX

Digunakan untuk menyatakan bahwa server dapat melakukan pencarian dalam

dokumen

memberitahukan browser untuk membuat suatu bentuk pencarian

sederhana dimana pemakai dapat memasukan satu atau lebih variabel

pencarian.

Contoh :

Home Pribadi Saya

*** isi dokumen html anda

4. LINK

Menyatakan hubungan antara dokumen dengan dokumen lainnya

juga digunakan untuk menyatakan pengarang, indeks dan istilah, dokumen sebelum atau sesudahnya, dan lain-lain.

merupakan suatu tag tunggal karena tidak mempunyai tag akhir , itu sebabnya berada pada bagian < HEAD>

Berikut ini adalah atribut yang bisa digunakan pada tag , yaitu :

HREF Menunjuk pada dokumen atau bagian dokumen yang

http://www.ina.com/homepage.htmlhttp://www.ina.com/homepage.html



tersebut dituju oleh LINK

REL Menyatakan hubungan antara dokumen saat ini dengan

nilai pada HREF

REV Seperti REL menyatakan hubungan antara dokumen saat

ini dengan nilai pada HREF, hanya saja dalam hubungan

yang berlawanan dengan REL

NAME Menyatakan suatu link dari suatu anchor atau URL ke

dokumen ini

URN Menyatakan suatu Uniform Resource Number untuk

dokumen saat ini

TITLE Seperti tag befungsi sebagai judul

METHODS Menampilkan fungsi-fungsi yang didukung oleh dokumen

saat ini, bagaimana ia bisa dilihat oleh suatu browser

Contoh :

Contoh LINK

http://

mailto:[email protected] m

HR

5. META

Menyatakan meta-information ( informasi tentang suatu informasi ) dalam suatu

dokumen

META mempunyai tiga buah atribut, yaitu :

NAME Merupakan informasi untuk suatu dokumen, bukan sebagai judul

dokumen

HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon protokol tertentu

CONTENT Isi dari nama suatu meta atau respon yang dibuat oleh HTTP-

EQUIV

Contoh potongan program :



WARNA NOMOR HEXADESIMAL Black #000000 Maroon #800000 Green #008000 Olive #808000 Navy #000080 Purple #800080 Teal #008080 Gray #808080 Silver #C0C0C0 Red #FF0000 Lime #00FF00 Yellow #FFFF00 Blue #0000FF Fuchsia #FF00FF Aqua #00FFFF White #FFFFFF



Tulisan i ni akan t ampak dal am brows er.

C. TAG HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu

elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-

tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil ().

Tag biasanya merupakan suatu pasangan yang disebut dengan :

1. Tag awal, dinyatakan dalam bentuk

2. Tag akhir, dinyatakan dalam bentuk

Format : teks yang ditampilkan

Contoh : untuk menampilkan teks dalam format teks miring

Teks ini terlihat miring di browser

anda

Tidak semua tag mengikuti aturan diatas. Ada beberapa macam bentuk tag yang

dikenal oleh HTML, dimana umumnya tag-tag dalam dokumen HTML muncul dalam

bentuk seperti barikut ini :

1. teks

Contoh : Home Page Saya

Tag yang umum dipaki dalam suatu dokumen HTML, yaitu tag yang

mempunyai awal dan akhir

2.

Contoh :

Tag tersebut disebut dengan tag tunggal, yaitu tag yang hanya terdiri dari tag

awal saja tanpa disertai dengan tag akhir.

3. teks

Contoh :



D. ATRIBUT Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari

tag tersebut. Misalnya :

digunakan untuk membuat rata kiri

suatu paragraf. Tag yang digunakan adalah

dan atribut yang menyertainya

adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right

atau justify.

Dalam HTML, nilai atribut dalam pasangan tanda petik ganda, kecuali jika :

Nilai merupakan suatu kumpulan dari nilai tertentu ( misalnya dalam

tanda petik ganda boleh dihilangkan, maka penulisan

boleh

).

Nilai hanya berisi angka, huruf dan titik (dalam , kedua nilai tersebut

memerlukan tanda petik ganda karena SRC mengandung tanda / dan ALT

mengandung spasi ).

Pengolahan Huruf Kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi

untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic)

atau memberi garis bawah (underline). Buka lagi program Notepad kemudian

tuliskan seperti berikut ini:

T i pe- tipe Teks

Ada tiga macam ti pe tulisan yang pal ing seri ng diguna kan dalam

penulisan dokumen apa saja. Ketiga t i pe terse but ialah tulisan

t ebal, tu l isan miring dan tulisan bergaris bawah. Bisa pula dua

tipe huruf di padukan misalnya tulisan t ebal dan miring, t ulisan

t ebal dan bergaris bawah atau tulisan miring dan bergaris bawah.

Bahkan bi sa pula ketiga tipe tulisan tersebut sekaligus bergabu ng

menjadi satu ber upa tuli san tebal, miring dan berg aris bawah.

Simpanlah file tersebut. Setelah file tersimpan, bukalah file tersebut dengan program

Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut

masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata

dan kalimat yang ada di situ sehingga menjadi seperti ini:



Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5),

kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah untuk

menebalkan (bold) tulisan, untuk memiringkan (italic) tulisan dan untuk

menggaris-bawahi (underline) tulisan:

T i pe- tipe Teks

Ada tiga macam ti pe tulisan yang pal ing seri ng diguna kan dalam

penulisan dokumen apa saja. Ketiga t i pe terse but ialah tulisan

tebal, tulisan miring dan t ulisan bergaris

bawah. Bisa pula dua tipe hur uf dipadu kan misal nya tulis an

t ebal dan miring, tulisan teb al dan ber garis

bawah atau t ulisan miring

dan berg aris bawah. Bahkan bisa pula ke t iga tipe tulisan

t ersebut sekaligus bergabu ng menjadi satu ber upa tuli san

tebal, miring

dan berg aris bawah .

Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source

code itu kemudian lakukan Refresh pada dokumen web yang tampak pada

program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak

beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka

hingga jangan sampai ada yang salah tulis meskipun satu

karakter. Misalnya: bila tag anda tulis maka browser tidak akan

menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah

menulis source code yang salah seperti itu, simpan (save) kemudian refresh

dokumen anda dan lihatlah hasilnya!



BAB II Pengolahan Text

MEMFORMAT DOKUMEN

Untuk memformat dokumen digunakan tag-tag berikut ini :

Tag

Tag ini tidak memerlukan tag penutup, yang berfungsi untuk berpindah baris.

Tag

Tag ini digunakan untuk menentukan perataan tengah teks terhadap dokumen.

Contoh :

Belajar HTML

Tag

Tag ini berfungsi untuk memformat paragraph/alinea. Adapun kelengkapan atribut-

atribut dari tag ini adalah:

- ALIGN, yang berfungsi untuk menentukan perataan teks paragraph secara rata

kiri (LEFT), rata kanan (RIGHT) atau rata tengah (CENTER).

Contoh pemakaian:

Ini adalah teks yang ditulis dalam paragraph dengan perataan

teks rata kanan

Memformat Dokumen

Memformat Paragraf

Dalam HTML paragraf dapat diformat dengan menggunakan

, dimana teks yang dituliskan

diletakkan antara

dan

.

Paragraf juga dapat diatur perataannya yaitu rata kiri,

tengah dan kanan. Untuk menentukan perataan

paragraf digunakan atribut ALIGN. Sehingga penulisan tag - nya

dapat dituliskan

Teks Paragraf

.



Jika ditampilkan akan tampak seperti berikut ini:

Tag

Tag ini berfungsi untuk mendefinisikan garis horisontal dokumen.

Sedangkan atribut-atribut yang didukung meliputi:

- SIZE, untuk menentukan ketebalan garis (dalam ukuran piksel)

Contoh pemakaian :

- COLOR, digunakan untuk menentukan warna garis. Warna garis dapat diisi

dengan RED, GREEN, BLUE, YELLOW dll, atau dengan memanfaatkan warna

dalam bentuk Hexadesimal seperti : #00FF00 untuk wana hijau, #FF0000 untuk

warna merah dsb.

- WIDTH, digunakan untuk menentukan lebar garis (dalam satuan piksel atau

persenatase). Contoh :

atau

- NOSHADE, untuk menghilangkan efek tiga dimensi garis.

Contoh pemakaian :



Memformat Dokumen

Menampilkan Garis Horisontal

Jika dijalankan akan tampak tampilan sebagai berikut :

Tag , dimana n=1,2,3,4,5,6

Berfungsi untuk mendefinisikan header (kepala/judul) dokumen.

Atribut-atribut yang dimiliki yaitu:

- ALIGN, yang digunakan untuk menentukan perataan teks header terhadap

dokumen. Nilainya yaitu: LEFT, CENTER dan RIGHT.

Memformat Dokumen

Menampilkan HEADING TEXT

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Headi ng 6



Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:

Tag

Berfungsi untuk memformat teks-teks dokumen agar tampilan/layout identik dengan

layout yang disusun pada editornya. Sehingga karakater spasi (Space) dan Carriage

Return (CR) akan ditampilkan apa adanya.

Memformat Dokumen

Menggunakkan

Daftar Nilai Pemrograman Internet I

Semester Genap Th Akademik 2006/2007

+------------ +---------------------------------- +--------- +

| No Mhs | Nama Mahasiswa | Nilai |

+------------ +---------------------------------- +--------- +

| 05.1.00001 | Budiman Waluyo | 3.1 |

| 05.1.00002 | Agus Suharja | 2.9 |

| 05.1.00003 | Muhamand Yamin | 3.2 |

| 05.1.00004 | Daniel Sukarman | 3.0 |

+------------ +---------------------------------- +--------- +



Tampilan dari kode di atas adalah sebagai berikut :

MEMFORMAT KARAKTER

Untuk memformat karakter dapat digunakan koleksi tag-tag berikut ini :

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak tebal.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak miring

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis bawah.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis tengah.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak seperti huruf mesin

ketik.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih kecil dibanding

biasanya.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih besar disbanding

biasanya.

Tag

Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks subskrip

Tag



Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks

superskrip

Contoh :

Memformat Kara kter

Memformat Karakter

Teks cetak Tebal

Teks cetak Miring

Teks cetak Garis Bawah

Teks cetak Tebal

Teks cetak Huruf Mesin Ketik

Teks cetak Lebih K ecil

Teks cetak Lebih Besar

Teks cetak H2SO4

Teks cetak X3+Y2=0


Memformat FONT

Untuk memformat font digunakan tag , adapun yang dipengaruhi oleh tag ini

meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat dipakai untuk mengatur

ketiga hal tersebut yaitu :

SIZE, digunakan untuk menentukan ukuran font.

COLOR, digunakan untuk menentukan warna font.

FACE, digunakan untuk menentukan jenis atau bentuk font. Misal jenis font dapat dipakai yaitu : Arial, Verdana, Times New Romans, Courier dll.



Contoh Penggunaan :

Memformat FONT

Memformat FONT

Jenis FONT Arial

Black dengan warna Biru dan Ukuran Font

5

Teks dengan FONT Monotype

Corsiva dengan Ukuran Font 7

Teks dengan FONT VERDANA dengan

Ukuran Font default

Tampilan dari kode-kode di atas adalah :

NOTASI KHUSUS

Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan

tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih

dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab.

Pembuatan spasi dalam kode-kode HTML diganti tulisan seperti yang

bisa kita lihat pada contoh berikut ini:

kata - kata ini dia ntarai sa t u spasi sedangkan kata - kata

&n bsp; ini di antarai

&nbs p;

lima sp asi




Disamping notasi untuk pembuatan spasi () ada lagi sejumlah notasi

khusus untuk penulisan karakter-karakter tertentu. Karakter-karakter ini harus

dituliskan dengan notasi khusus mengingat karakter-karakter ini dipakai juga

sebagai kode-kode tag atau karena memang tidak dijumpai dalam karakter teks

ASCII. Berikut beberapa diantaranya:

Karakter Keterangan Notasi < kurung runcing buka < > kurung runcing tutup > & dan & " tanda petik ganda " + tanda plus minus &plusm

n; hak cipta atau copyright terdaftar atau registered

INDENTASI

Indentasi paragraph adalah cara mengatur posisi baris-baris paragraf dari margin

(tepi halaman). Ada tiga macam bentuk :

tag

baris pertamanya saja yang agak masuk ke dalam.

Contoh:

Paragraf atau alinea i alah seku mpulan ka l imat yang

mengandung satu pokok pi k iran. Ant ara satu paragraf

dengan paragraf l ainnya bi asanya dipisahk an oleh baris

koso ng. Namun biasa pul a paragr af itu di t andai dengan

posisi bar i s pertam anya yang agak masuk ke dal am.



Beginilah hasilnya bila dibuka dalam browser:

tag

membuat paragraf yang semua barisnya agak masuk ke dalam. Untuk

membuat paragraf semacam ini kita menggunakan yang mengapit paragraf-

paragraf yang hendak kita jadikan masuk ke dalam.

Ini adal ah paragr af normal

Ini paragraf yang agak masuk ke dalam.

Ini juga contoh paragraf yang agak masuk

ke dalam. Dengan kalimat ya ng agak panjang, k i ta lihat bahwa

semua bar is dalam par agraf ini letaknya agak masuk ke

dal am. S ama rata sama jauhnya.

Nah, paragraf i ni kembal i normal, karena t ag

bl ockquote sudah berl alu alias sud ah ditutup di atas.

Beginilah tampilannya dalam browser:



daftar definisi (definition list)

Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf

normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang

agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat

di atasnya. Untuk lebih jelasnya, berikut ini contoh daftar definisi:

Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu

yang menandai dimulai atau diakhirinya daftar definisi, yang

menandai paragraf normal (yang dijelaskan) dan yang menandai paragraf

yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya).

Ini contoh source kode di atas :

Daftar Istilah Penting:

I nternet

Sing katan dari inte r connecti on networ k atau hubungan

antar jaringan. Internet ialah j aringan komputer gl obal dan

merupakan jaring an komputer yang ter besar di dunia kar ena mampu

menghubungkan sel uruh komputer yang ada di dunia.

HTTP

Sing katan dari Hype r text Tra nsfer Pro t ocol adalah

salah satu protokol bahasa yang digun akan untuk berkomu nikasi

ant ar server komput er dalam in t ernet. Pr otokol bahasa yang lain

dal am inter net misal nya: Telnet, News, Gropher, FTP.

Karena cuma demo, cukup dua definisi sajalah. Nah, par agraf

ini kembali normal.



BAB III List Element

Informasi dapat disampaikan dengan mudah jika ditampilkan dengan

menggunakan daftar. HTML menyediakan beberapa jenis daftar, yaitu :

Ordered List/Numbered List

Unordered List/Bulleted List

Menu List

Directory list

Definition List

A. Ordered List

Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor

secara urut. Ordered List dimulai dengan tag awal dan diakhiri dengan tag

, dan diantara kedua

tag tersebut terdapat tag yang menyatakan list item.

Contoh :

Ordered List

Dibawah ini aalah warna Pelangi :

Merah

Jingga

Kuning

Hijau

Biru

Nila

Ungu

Hasil pada tampilan browser :

Mengganti jenis nomor pada tag beserta fungsi-fungsinya :



Atribut Fungsi COMPACT Untuk menyatakan bahwa item dalam daftar pendek, sehingga

browser menampilkan dalam bentuk yang lebih padat TYPE = A Membuat daftar berurut dengan huruf besar ( A,B,C,..) TYPE = a Membuat daftar berurut dengan huruf TYPE = I Membuat daftar berurut dengan huruf romawi TYPE = i Membuat daftar berurut dengan huruf romawi kecil (i,ii, TYPE = 1 Default nilai daftar berurut START = n Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal

Contoh :

Nested Ordered Lis t

Planet dalam sistem tata surya :

Merkurius

57,9 juta kilometer dari matahari

Tidak punya satelit

Venus

108 juta kilometer dari mat ahari

Tidak punya satelit

Bumi


Satu satelit = Bulan

Mars

227,9 kilometer dari matahri

Dua satelit =

Pho

bos

Dei

mos

Hasil pada tampilan browser :



B. Unordered List

Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam

sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan

bulatan, kotak atau lingkaran.

Penggunaan Unordered List diawali dengan tag dan diakhiri dengan tag

, dan didalamnya ditandai dengan tag .

Contoh :

Nested Unordered List


Merkurius


Tidak punya satelit

Venus

108 juta kilometer dari matahari

Tidak punya satelit

Bumi


Satu satelit = Bulan

Mars

227,9 kilometer dari matahri

Dua satelit =

Phobos

Deimos

Hasil tampilan browser :



Tambahan atribut pada tag :

Atribut Fungsi TYPE = circle Membuat tanda lingkaran O untuk item TYPE = square Membuat tanda kotak untuk item TYPE = disc Membuat tanda cakram untuk item

C. Menu List

Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor

ataupun penanda item. Menu List menggunakan tag awal dan tag

akhir , didalamnya menggunakan tag . Browser secara otomatis

akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya

digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk

membuat link ini digunakan tag yang akan membuat link ke halaman lain.

Penggunaan tag adalah link ke halaman page.html .

Contoh :

Menu List


Merkurius

Venus

Bumi

Mars

Jupiter

Saturnus

Uranus

Neptunus

Pluto

Hasil dari tampilan Browser :

D. Directory List

Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau



DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal

dan tag akhir . Penggunaan tag juga diperlukan.

Contoh :

Directory List

Warna Pelangi :

Merah

J ingga

Kuning

Hijau

Biru

Nila

Ungu

Hasil dari tampilan browser :

E. Definition List

Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar

sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-

istilah yang disebut juga Glossary List (daftar istilah).

Definition List dinyatakan dengan tag awal dan tag akhir . Dalam tag

tersebut ada dua bagian, yaitu:

Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal atau

Definition Term

Definisi dari istilah tersebut dinyatakan dengan tag tunggal atau Definition

Data

Contoh :



Definition ist

Planet dalam sistem tat a surya :

Merkurius

Planet yang paling kecil dan paling dekat dengan

matahari,

berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari

adalah

58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius kira -

kira

2,414 kilome ter (1,500 mil).

Bumi

Planet ketiga dari matahari, berevolusi dengan matahari

selama

365,26 hari. Jarak dari matahari adalah 149 juta kilometer (92,96

juta

mil), berputar pada porosnya selama 23 jam 56,07 menit, mempunyai

radius

6,374 kilometer (3, 959 mil) dan mempunyai berat kira - kira 29,11 x

10^24

kilogram (13,17 x 10^24 pounds).


F. Kombinasi Tipe List

Kombinasi tipe list diperlukan jika suatu daftar berisi daftar dengan tipe

berbeda. Sebagai contoh, anda mempunyai ordered list yang didalamnya berisi daftar

unordered dan data definition. Contoh :

Combined List

Planet dari sistem Tatasurya :

Merkurius

Dewa perdagangan dan perjalanan

Definisi

Mercury

Planet yang paling kecil dan paling dekat dengan



matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari

matahari adalah

58,3 juta kilometer 36,2 juta mi l) dan mempunyai ukuran radius kira -

kira

2,414 kilometer (1,500 mil).

Venus

Dewi cinta dan kecantikan

Definisi

Venus

Planet kedua dari matahari, berevolusi dengan matahari

selama

224,7 hari. Jarak dari matahari adalah 100,1 juta kilometer (67,2

juta

mil), mempunyai radius 6,052 kilometer (3,760 mil) dan mempunyai

berat kira - kira 0,815 dari Bumi.


G. Membuat Bullet List yang Berbeda

Bullet yang berbeda dapat digunakan dalam tag . Pemakaian tag

dalam

Unordered List dapat ditinggalkan. Anda bisa memakai image sesuai dengan keinginan

anda. Tag

harus digunakan untuk menampilkan gambar. Tag sebagai pengganti

pemakaian tag . Formatnya Merah

Contoh :

Manual List

Warna Pelangi :



Merah

Jingga

Kuning

Hijau

Biru

Nila

Ungu




BAB IV IMAGE DAN LINK

IMAGE

Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML

adalah :

File gambar lambat untuk di download.

Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file

gambar

Tidak ada browser grafik/gambar

Gambar tidak selalu dikenal secara international

Warna gambar mungkin tidak ditampilkan seperti aslinya

A. Format gambar

Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai

format standar untuk menampilkan gambar dalam WEB.

B. WARNA

GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256

warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni

dan gambar-gambar lain yang sederhana tetapi tidak cukup baik untuk

menyimpan gambar fotografik.

JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna.

Dengan warna sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-

gambar dengan kualitas foto.

C. Pemadatan Ukuran Gambar

GIF memadatkan datanya dengan menggunakan metode lossless

compression. Metode lossless compression bekerja dengan mencari pola-

pola berulang dalam suatu gambar. Lossless compression pada GIF

membuang informasi dalam jumlah yang sedikit, yaitu hanya warna-warni

dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan

tidak lama, karena file hasil pemadatan dengan file yang diuraikan

merupakan dua buah file yang hampir sama. Gambar file PNG juga

menggunakan lossless compression, sehingga bisa menjadi alternatif

pengganti file GIF.



JPEG menggunakan metode pemadatan lossy compression. Pemadatan

gambar metode lossy compression, membuang sejumlah bit-bit gambar

untuk membuat gambar berukuran kecil. Tingkat pembuangan informasi

gambar ini biasanya dapat ditentukan oleh pemakai sewaktu membuat file

JPEG.

D. Menampilkan inline dan external image

Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan

eksternal.

Internal Image : gambar ditampilkan secara langsung saat web page dimuat

dalam browser yang berbasiskan grafik.

External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu

page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.

Menempatkan gambar pada dokumen HTML sangat mudah, dengan menggunakan

tag beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk

menampilkan gambar. Penggunaan

secara umum adalah :

Contoh :

Penggunaan Tag IMG

Penggunaan tag IMG

Teks ditampilkan setelah gambar.

Teks ini terpotong dengan

gambar logo.

Gambar tampil inline setelah teks ini



Hasil tampilan dari web browser :

E. Mengatur Perataan teks dengan Inline Image

Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah

dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag

.

TOP : Meratakan teks dengan bagian atas gambar

MIDDLE : Meratakan gambar dengan bagian tengah gambar

BOTTOM : Meratakan teks dengan bagian bawah gambar

Contoh :

Penggunaan Align PadaTag IMG

Perataan Teks dalam tag IMG

Teks ini rata dengan bagian atas gambar.

Teks ini rata dengan bagian tengah gambar

Teks ini rata dengan bagian bawah gambar.



Hasil tampilandari browser :

F. Mengatur Posisi Gambar Pada halaman WEB

Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB.

Penggunaan atribut ALIGN beserta nilainya dalam tag untuk mengatur

tampilan teks disekitar gambar.

LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar

RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di

sekitar gambar.

Contoh :

Tag IMG dan atribut ALIGN

Penggunaan Perataan Teks

Ga mbar rata kiri

Dalam buku ini akan dipelajari cara membuat halaman WEB. World

Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa



server komputer yangterhubung satu sama lain dalam jaringan

Internet.

Buku ini berisi cara pengatur para graf dokumen, membuat tabel,

membuat frame juga tidak ketinggalan cara membuat form.

Demikian diharapkan para pembaca nantinya mampu membuat web site

sendiri.....

Gambar rata kanan

Dalam buku ini akan dipelajari cara membuat halaman WEB. World


server komputer yang terhubung satu sama lain dalam jaringan

Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat tabel,

membuat frame juga tidak ketinggalan cara membuat form.


sendiri.....


G. Mengatur Ukuran Gambar Pada Browser Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :

Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar

secara inline.

Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.



Pengaturan ukuran tinggi dan lebar pada tag dilakukan oleh atribut

HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.

Contoh :

Menggunakan HEIGHT dan WIDTH

Mengatur Ukuran Tinggi dan Lebar Gambar

Gambar Ukuran Asli

Gambar Ukuran lebar=180px Tinggi 140px


H. Menambahkan Teks Keterangan

Anda dapat menambahkan keterangan tambahan pada gambar yang

ditampilkan secara inline. jika petunjuk mouse diletakan di atas gambar, maka

teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag .

Pemakaian secara umum :



Contoh :

Menggunakan atribut ALT

Penggunaan atribut ALT


I. Memberi Border Pada Gambar

Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER

memberikan suatu border atau batas pada suatu inline gambar. Inline gambar tidak

mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan

satuan pixel.

Contoh :

Penggunaan Atribut BORDER

Penggunaan BORDER untuk gamb ar



BORDER=0>

Hasil tampina dari web browser :

J. Memberi Ruang Pada Gambar

Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi

antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi

horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE

menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan

dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar. Contoh :

Atribut VSPACE dan HSPACE

Menggunakan atribut VSPACE dan HSPACE

Teks Wrap disekitar Gambar

Dalam buku ini akan dipelajari cara membuat halaman web. World


server komputer yang terhubung satu sama lain dalam jaringan

Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat

tabel, membuat frame juga tidak ketinggalan cara membuat form.


sendiri....



Hasil tampulan dari web browser :

K. Link Dengan Gambar

Suatu gambar dapat berfungsi secara bersama-sama dengan tag . jika

gambar di klik maka link akan menuju ke informasi yang diberikan pada tag .

Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk

membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar

sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu

dokumen.

Contoh :

Gambar sebagai link

Gambar sebagai link

Ini gambar biasa

Gambar berfungsi sebagai link



Link ke beruang

Hasil tampilan dari web browser : LINK

Link dapat menuju ke Web Page, grafik, suara, film, program, isi dari server

Gopher, log-in ke suatu remote computer, server e-mail atau ke suatu ftp.

A. Hypertext dan Hypermedia

Dokumen Hypertext adalah dokumen yang berisi link ke dokumen lain.

Dokumen Hypermedia adalah dokumen yang berdasarkan hypertext ditambah

dengan multimedia seperti gambar, video dan audio.

B. Uniform Resource Locator

WWW menggunakan URL untuk menuju ke lokasi dari suatu informasi

pada server lain. Pemakaian umum URL adalah

Protokol://domain _host{:port}/path/nama_fil e.



Dimana protokol bisa salah satu dari :

http = untuk suatu file pada server WWW

file = untuk suatu file pada sistem komputer lokal

ftp = untuk suatu file pada server ftp, dll

Host adalah suatu alamat server. Contoh : www.yahoo.com , www.microsoft.com

Port memberitahu browser untuk membuka koneksi pada suatu port jaringan yang

berbeda dari port default untuk setiap protokol.

Path adalah suatu lokasi dari informasi yang dicari di dalam server, sedang nama

file adalah nama dari file yang diinginkan. Contoh : www.rekreasi.com/lokasi .html

C. Absolute Path dan Relative Path

Dalam HTML terdapat dua jenis path, yaitu path absolute dan path relative.

Path relative jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif,

yaitu terletak di atas atau di bawah direktori dokumen tersebut. Jika suatu file

berada di bawah direktori yang sedang aktif, maka direktori file tersebut perlu

disebutkan. Misalnya file hal12.html berada di bawah direktori Bab1 maka untuk

membuat link ke file hal12.html adalah :



Berikut adalah penggunaan Link dan Anchor untuk memanggil

dokumen web lain

Lihat tanda LinkBab 2

Untuk melihat yang detail Gambar

Hutan


E. Atribut Name dan ID

Atribut href untuk menyatakan suatu file tujuan. Server mencari kedalam

direktori di mana dokumen saat ini berada untuk mencari file tersebut. File

dokumen tujuan HTML yang menggunakan elemen A bisa diikuti atribut name

atau id. Untuk membuat link yang membaca pembaca ke suatu bagian tertentu

dalam dokumen, cukup sertakan tanda # setelah nama bagian.

Contoh program dibawah ini untuk membuat tabel yang berisi link pada

elemen header H2, H3 dan lainnya dalam satu dokumen, dengan menggunakan

elemen A dan atribut name dan ID :

Element A ( atribut name dan id )

Daftar Isi

Pengenalan

Latar Belakang

Catatan

Jika anda klik salah satu link dokumen di atas, maka isi

dokumen yang berada di bawah (tidak tertampung oleh

jendela brow ser) akan ditampilkan. Hal ini akan sangat

membantu pembuatan dokumen yang sangat panjang.

Misalnya FAQ (Frequently Ask Question), anda bisa

klik pertanyaan yang ada, kemudian dokumen akan link

ke dokumen pertanyaan, yang sebenarnya berada pada satu



dokumen.

Dan untuk kembali ke daftar pertanyaan, klik toolbar Back

yang berada pada menu Standard, atau jika sudah dibuat

link ke daftar pertanyaan tinggal klik kembali saja.

Pengenalan

...section 1...

Latar Belakang

...section 2...

Catatan

...section 2.1...


Jika anda klik salah satu daftar isi di atas misalnya Pengenalan atau Latar

belakang atau Catatan, maka dokumen akan link pada isi dari daftar

tersebut yang sebenarnya berada di bagian bawah dokumen. Hal ini

dikarenakan jendela browser tidak mampu menampung seluruh isi

dokumen.

F. Judul LINK

Atribut title bisa digunakan dalam elemen A dan LINK untuk menambah

informasi tentang link. Informasi ini akan ditampilkan berupa tooltip oleh browser.

Contoh :

Atribut title

Menampilkan title sebagai tool tip

............

............



Anda akan melihat lebih jauh ke dalamBab 2

Bab 2

Li hat juga gambar Gambar

Logo STMIK SINUS


G. Elemen

Untuk membuat suatu link dalam HTML elemen dipergunakan elemen anchor

yang dinyatakan dengan tag berpasangan . Atribut yang boleh menyertai

elemen A adalah :

Name : Menyatakan titik anchor dalam suatu dokumen HTML.

Href : Menunjukan lokasi dokumen Web.

Hreflang : Menunjukan bahasa yang dipergunaka, hanya digunakan

bersama dengan href. Type : Atribut ini memberi catatan

tipe isi dari dokumen tujuan.

Rel : Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan

yang ditunjuk dengan atribut href.

Rev : Menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh

atribut href dengan dokumen asal.

Charset : Untuk menspesifikasikan karakter encoding dokumen web.



H. Sintaks nama Anchor

Anchor mempunyai nila atribut name dan id. Nama anchor harus mengikuti

beberapa aturan sebagai berikut :

Unik, nama anchor harus unik dalam dokumen. Dalam satu dokumen tidak

boleh ada nama anchor yang sama.

String # , penggunaan string # untuk menuju ke bagian lain dalam dokumen.

I. Dokumen Yang Tidak Ditemukan Browser

Jika suatu dokumen yang link tidak ditemukan oleh browser, ada beberapa

keterangan :

Jika browser tidak menemukan lokasi yang di link, browser akan memberi

keterangan.

Jika browser tidak bisa mendefinisikan tipe dokumen yang di link,

browser akan terus mencobanya dan akan memberi peringatan.

J. Elemen

Elemen ini untuk mendefinisikan suatu hubungan (link). LINK boleh ditampilkan

dalam elemen dan ditampilkan berulang kali. LINK mempunyai tugas

untuk menyampaikan informasi hubungan antar dokumen /bagian, misalnya toolbar

dengan menu drop-down.

Berikut adalah contoh potongan program yang menggambarkan beberapa LINK

yang berada pada elemen . Dokumen yang aktif adalah Bab2.htm .

Atribut rel menunjukan hubungan antara dokumen yang aktif dengan dokumen

yang ituju. Nilai Index , Nex , Pr menjelaskan tujuan dokumen berikutnya.

-

http://www.w3.org/TR/html4/strict.dt d>

Bab 2

K. Link Tujuan Dan Kembali

Atribut rel dan rev digunakan untuk saling melengkapi. Atribut rel

digunakan untuk link ke dokumen tujuan sedangkan atribut rev digunakan untuk

http://www.w3.org/TR/html4/strict.dtd



link kembali ke dokumen sebelumnya.

Contoh

:

Dokumen A :

Mempunyai arti yang sama dengan

Dokumen B:

Kedua atribut boleh digunakan secara bersamaan. Atribut rev menunjukan link

kembali dari atribut rel. ini menunjukan bahwa halaman sebelumnya adalah

halaman superior. Atribut rel dan rev mempunyai beberapa nilai yang

mengindikasikan dokumen sebagai :

Parent : Dokumen utama

(parent) Index : Dokumen

indeks

Next : Halaman

selanjutnya

Contents : Isi dokumen

Alternate : Versi alternatif

Begin : Awal halaman

Nilai alternate menunjukan dokumen referensi dari alternatif versi halaman yang

aktif. Alternatif versi ini bisa untuk versi cetak atau alternatif bahasa (tambahan

atribut lang).



Elemen LINK digunakan untuk menyediakan keanekaragaman informasi dari

serch engine, termasuk :

Link untuk alternatif versi bahasa dokumen, ditulis dengan bahasa

selain bahasa inggris.

Link untuk alternatif versi dokumen, mendesain media yang

berbeda seperti versi yang cocok untuk pencetakan

Link untuk awal halaman dari sekelompok dokumen

Contoh program dibawah ini untuk menggambarkan informasi bahasa, tipe

media, tipe link yang dikombinasikan untuk memperbaiki penanganan dokumen

oleh search engine. Penggunaan atribut hreflang untuk menemukan versi bahasa

yang digunakan dalam dokumen, misalnya bahasa belanda, Portugis dan Arab.

Atribut charset digunakan sebagai encoding dalam bahasa Arab. Atribut lang untuk

menunjukan nilai atribut title untuk elemen LINk yang didesain dalam bahasa

Perancis.

Manual dalam Bahasa English

Contoh program berikutnya, menuruh search engine untuk menemukan

halaman depan dari sekelompok dokumen :

http://someplace.com/manual/dutch.htmlhttp://someplace.com/manual/portuguese.htmlhttp://someplace.com/manual/arabic.htmlhttp://someplace.com/manual/french.htmlhttp://someplace.com/manual/postcript.pshttp://someplace.com/manual/postcript.ps



Referensi Manual - halaman 5

N. Informasi Path Dengan Elemen Base

Dalam HTML, link dan referensi untuk external gambar, applet, proses from,

style sheet dan lainnya selalu dispesifikasikan dengan URL. Elemen BASE

mengijinkan programmer untuk menspesifikasikan dokumen dasar URL secara

nyata. Elemen BASE boleh digunakan tanpa tag penutup. Jadi boleh hanya tag

. Atribut yang boleh menyertai adalah href, untuk menunjukan absolute URL

dapat diubah menjadi relative URL. Elemen BASE muncul dibagian HEAD.

Informasi path ditunjukan oleh elemen BASE hanya untuk URL di elemen tersebut

muncul.

Contoh potongan program :

-

http://www.w3.org/TR/html4/strict.dt d>

Produk Kami

S

Burung?

http://www.maju_jaya.com/sangkar/burung.gif

O. Membuat Link Ke E-mail

Link ke email menggunakan mailto: untuk

menspesifikasikan alamat. Contoh potongan program :

Kirimi saya e- mail

URL mailto : menyebabkan browser menampilkan suatu kotak pesan dimana

pembaca dapat mengetikkan pesan-pesannya

http://someplace.com/manual/start.htmlhttp://someplace.com/manual/start.htmlhttp://www.w3.org/TR/html4/strict.dtdhttp://www.maju_jaya.com/products/intro.htmlhttp://www.maju_jaya.com/sangkar/burung.gifmailto:[email protected]



P. Link Ke FTP

Dengan Web, anda dapat melihat dan mengambil file dari suatu server FTP, tetapi anda tidak dapat menaruh file ke server tersebut. Untuk membuat link ke situs FTP gunakan ftp://namasitus/path. Lihat potongan program berikut ini :

Server FTP di Novell Inc

Direktori pub di FTP intel

File patches.zip

ftp://namasitus/pathftp://ftp.intel.com/pub%3Eftp://ftp.novell.com/pub/patches.zip%3E



BAB V TABLE

I. ELEMEN

Untuk membuat tabel dimulai dengan pasangan tag . Di

dalam tag ini dapat menentukan banyak kolom dan baris, perataan, warna dan

pengaturan lainnya. Tabel

terdiri dari beberapa bagian, yaitu :

Tag tabel : untuk menandai awal dan akhir tabel yang dinyatakan dengan

pasangan tag

,,,.

Tabel Row atau baris tabel : baris-baris pada suatu tabel yang

dinyatakan dengan pasangan tag



FRAME : untuk mengatur frame di sekitar tabel

II. ELEMEN

Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya

dibagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk

membentuk suatu caption adalah

Pendefinisian caption ini adalah :

Contoh :

TABLE

WARNA

PELANGI

WARNA

PELANGI

WARNA

PELANGI

WARNA

PELANGI

WARNAWARNIPELANGI

MERAHORANGEKU NING

HIJAUBIRUUNGU



III. GROUP BARIS

Baris tabel bisa dibagi menjadi tabel head, tabel foot dan beberapa tabel

body dengan menggunakan elemen THEAD, TFOOD dan TBODY. Tabel head dan

tabel foot berisi informasi

tentang tabel kolom sedangkan tabel body baris dari tabel data. Setiap THEAD,

TFOOT, dan

TBODY berisi group baris dan masing-masing group paling sedikit berisi satu

baris yang didefinisikan dengan elemen .

TFOOT harus berada sebelum TBODY agar browser memberikan tempat

pijakan sebelum menerima baris data. Berikut adalah ringkasan tag yang diperlukan

dan yang boleh diabaikan :

Tag harus disertakan kecuali tabel hanya berisi satu tabel body

dan tidak mempunyai tabel head atau tabel foot. Tag penutup selalu

boleh diabaikan

Tag pembuka dan disertakan jika tabel head dan tabel

foot ada, dan tag penutup ....informasi footer.....

......baris pertama - block data satu......

......baris kedua - block data satu....

......baris pertama - block data kedua......

......baris kedua - blo ck data kedua....

......baris kedua - block data kedua....




III. ELEMEN COL DAN COLGROUP

Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian

atribut COL adalah :

Span adalah atribut yang mempunyai nilai integer > 0, yang digunakan untuk

menggabungkan kolom. Width digunakan untuk mengatur lebar kolom yang

digabung.

Elemen COLGROUP mengatur lebar dan perataan sekelompok kolom.

Untuk Contoh, jika sebuah tabel mempunyai 6 kolom dan diinginkan agar tiga

kolom pertama mempunyai lebar 50 pixel dan rata kiri, dua kolom kedua ingin

dengan lebar 100 pixel dan karakter rata pada titik desimal, sedang kolom

terakhir lebarnya berukuran sisa layar dengan rata kanan.

Untuk problem ini dibuat program sebagai berikut :

IV. ELEMEN BARIS

Untuk membuat baris dalam tabel digunakan pasangan tag





V. ELEMEN SEL DAN

Judul kolom atau judul baris dalam tabel dibuat dengan elemen

. Contoh :

TABLE

WARNA PELANGI

WARNAWARNIPELANGI

MERAHORANGEKUNING

HIJAUBIRUUNGU


VI. ELEMEN PERATAAN TABEL

Gunakan atribut ALIGN dan VALIGN untuk membuat rata teks dalam tabel.

ALIGN digunakan untuk perataan teks secara horisontal, formatnya :

Align = left|center|right|justify|char

VALIGN digunakan untuk perataan teks secara vertikal, formatnya :

Valign = top|middle|bottom|baseline

Contoh :

TABLE

WARNA PELANGI

WARNAWARNIPELANGI

XYZ

XYZ

XYZ

XYZ

XYZ

XYZ

XYZ

XYZ

XYZ




VII. ELEMEN CHAR

Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter.

Formatnya :



Frame =

void|above|below| hsides|lhs|rhs|vsides|box|border.

Atribut rules digunakan untuk mengatur interior tabel. Atribut rules didefinisikan

sebagai :

Rules = none|groups|rows|cols|all

Contoh :

TABLE

Tabel dengan Frame dan Rules


IX. MENGGABUNGKAN BARIS DAN KOLOM

Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN,

sedangkan atribut yang digunakan untuk menggabungkan baris adalah

ROWSPAN.

Contoh :

TABLE

WARNA PELANGI

WARNA WARNI PELANGI

XYZXYZXYZ

XYZXYZXYZ

XYZXYZ

XYZXYZ




X. ATRIBUT NOWRAP

Jika atribut ini digunakan dan isi teks melebihi lebar suatu sel, maka

sel itu akan diperpanjang sehingga seluruh isi teks muncul dalam satu baris.

Contoh :

TABLE

ATRIBUT NOWRAP

Lebar atribut

width tidak berpengaruh

Atribut nowrap digunakan


XI. MEMBUAT SEL KOSONG

Sel akan ditampilkan dengan space kosong, HTML juga menyediakan

entity &nbsp yang akan menampilkan tabel data kosong.

Contoh :

TABLE

Contoh sel kosong

MERAH KUNING

HIJAUBIRU



PINKPUTIH

COKLAT< /td>&nbspNILA

UNGUABU ABU&nbsp

JINGGAMAGENTA&nbsp


XII. LAYOUT TABEL

Untuk mengatur penampilan tabel, ada beberapa yang harus diperhatikan,

yaitu :

Atribut Width yang digunakan untuk mengatur lebar tabel

Atribut Height untuk mengatur tinggi tabel

Atribut border untuk memberi border tabel

Atribut Cellpadding digunakan untuk menentukan jumlah spasi yang

terdapat diantara border sel dengan isi yang ada didalam sel.

Atribut Cellspacing digunakan untuk menentukan jumlah spasi yang

terdapat diantara dua buah sel dalam suatu tabel

Contoh :

Tabel

Pengaturan Layout Tabel

Width 100%

BorderCellpadding=10Cellspasing

Width 75%

BorderCellpadding=5Cellspasing

Layout Tabel !




XIII. MEMBERI WARNA PADA TABEL

Atribut BGCOLOR untuk memberi warna background pada sel sebelum

berisi data

Atribut BORDERCOLOR untuk mengubah warna border sel

Contoh :

TABLE

Memberi warna pada tabel

MERAHUNGUKUNING

HIJAUBIRUNILA

PINKPUTIHJINGGA

Memberi warna pada seluruh tabel

COKLATMERAHNILA

UNGUABU ABUBIRU

JINGGAMAGENTAHIJAU

Memberi warna pada satu baris

COKLAT

HIJAUNILA

UNGUABU ABUKUNING

JINGGAMAGENTAORANGE

Memberi warna pada sel




XIV. MENGGUNAKAN IMAGE SEBAGAI HEADER TABEL

Hal-hal yang perlu diperhatikan :

Lebar tabel untuk tempat image menggunakan atribut WIDTH seperti

Pada tag atribut CELLSPACING diset 0 agar image tepat berada

segaris dengan tabel

Penggabungan kolom perlu dilakukan untuk menampung image.

Misalnya menggabungkan dua

kolom dalam tabel untuk tempat image

Tag harus digunakan untuk menyisipkan image BORDER=0

HEIGHT dan WIDTH harus diatur secara tepat.

Contoh :

IMAGE

E: \ Image \ STMIKsinus.jpg

Border=0 Height=30 width=500 >

E: \ Image \ STMIKsinus.jpg

STMIK SINUS merupakan sekol ah tinggi manajemen informatika

yang terletak

di jalan Samanhudi SOlo . Jenjang Diploma Tiga dan

Sarjana. Jurusan Manajemen Informatika , computer akuntansi,

sistem informasi dan Tehnik komputer.

Desain by:LPK




XV. MERUBAH WARNA, UKURAN DAN JENIS FONT PADA TABEL

Contoh :

TABLE

WARNA PELANGI

WARNA

WARNI

PELANGI

MERAH

ORANGEKUN ING

HIJAUBIRU

JINGGA




BAB VI

Form Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:

Membuat fo r m html

Simpan dengan nama form1.htm di folder khusus untuk itu. Buka browser anda (Netscape

atau Internet Explorer), dan buka file form1.htm tadi. Biarkan Notepad tetap terbuka

sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik

tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di

Notepad.

Tuliskan form anda.

Membuat fo r m html

Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada

kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke

suatu program/script untuk diproses, atau 2) anda dapat meminta browser untuk

mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan

pemahaman tentang pemrograman web yang lebih lanjut. Cara kedua, biasa disebut

mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag .

Membuat fo r m html

Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan

alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di

atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar,

tetapi harus ada spasi di antara setiap atribut tadi... di antara FORM & METHOD, di

antara POST & ACTION, dan antara .xxx" & ENCTYPE.

mailto:mailto:[email protected]



Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...

NAMAFORM=Daftar+A nggota&NA MA=Bram+D. +Wardhan a&ALAMAT=J l.+Bali+ No.+13

&KOTA=Semarang&Pr opinsi=Ja wa+Tengah

TEXT

Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di

antara tag . Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.

Bentuk masukan (TYPE of ) yang paling umum digunakan dalam form html adalah TEXT.

Setiap masukan memerlukan nama (NAME).

Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan

menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah

dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.

Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.

Jl. Lombok No.

Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya.

Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas. Kita

dapat juga menentukan panjang kotak masukan.



Jl. Lombok

Jl. Lombok No.

Jl. Lombok No. 31

Seperti yang dapat anda lihat, nilai defaultnya adalah 20. Barangkali anda sudah tahu

bahwa nilai default adalah nilai yang dipakai browser jika anda tidak menentukan lain.

Kita lanjutkan, dan sekarang coba anda hapus VALUE="Jl. Lombok No. 31".

Jika kita inginkan, kita dapat menentukan berapa banyak karakter yang bisa

diketikkan. Teruskan dan cobalah mengetikkan lebih dari 10 karakter!

Saya pikir pembatasan ini akan bisa bermanfaat. Tetapi, kecuali anda pikir

seseorang akan menuliskan seluruh isi bab ini ke dalamnya, saya tidak akan terlalu menguatirkan hal ini.

Sangat mirip dengan TYPE=TEXT adalah TYPE=PASSWORD. Persis malah, kecuali bahwa yang ditampilkan adalah *** dan bukan apa yang diketikkan. Browser akan

mengirim data sebenarnya kepada anda, hanya data ini tidak akan tampil di layar.

Ingat bahwa setiap harus memiliki NAME.



Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih

ingat bahwa memberi perintah kepada browser untuk melakukan sesuatu, sedangkan ATTRIBUTE dituliskan di dalam dan menentukan caranya.

RADIO BUTTONS DAN CHECK BOXES

Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan

kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.

Tambahkan 2 lagi.

Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.

Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan

segera tampak berikut ini.

Setiap Radio Buttons harus diberi VALUE.

Sekarang beri nama masing-masing.



Edi Hasi buan Ricky Mar tant o Tomi Sudart o

Edi Hasibuan

Ricky Martanto

Tomi Sudarto

Anda dapat gunakan tag html yang lain di sini.

Pada prinsipnya Radio Buttons anda sudah selesai. Anda dapat memperjelas pilihan

ini dengan menambahkan suatu kalimat di atasnya dan, jika anda mau, memilih satu

di antaranya sebagai default (optional).

Siapakah TEMAN BAI K anda? 

Edi Has ibuan Ric ky Martan t o

VALUE="Tom"> Tomi Sudarto

Siapakah TEMAN BAIK anda?

Edi Hasibuan

Ricky Martanto

Tomi Sudarto

Kita tentu saja hanya dapat memilih satu di antaranya. Pilihan ini akan menghasilkan pasangan nama/nilai seperti TEMAN BAIK=Ed (atau siapa pun yang dipilih).

Untuk membuat Check Boxes kita lakukan hal yang sama dengan tadi. Mulailah

dengan ini...

Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga baris baru untuk setiap pilihan.)



Setiap Check Box kita beri VALUE yang sama.

Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap.

OK, masing-masing kita beri label/nama.

Edi Hasi buan Ricky Mar tant o Baramul i

Edi Hasibuan

Ricky Martanto

Tomi Sudarto

Baramuli

Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.

Siapakah di antara mereka yang merupakan sah abat anda ?

Edi Has ibuan Ricky Mar tanto Baramuli

Siapakah di antara mereka yang merupakan sahabat anda?

Edi Hasibuan Ricky

Martanto

Tomi Sudarto

Baramuli

Kita dapat memilih 1, 2, tidak ada atau semuanya. Pilihan tersebut akan kita

dapatkan dalam bentuk pasangan nama/nilai....



Ed=YA Tom=YA

(atau apapun yang dipilih... jika tidak ada yang yang dipilih, browser tidak akan memberi apapun)

Anda mungkin bertanya-tanya....Bagaimana jika saya ingin mengajukan 3 pertanyaan

berbeda untuk kelompok yang sama?? Bagaimana saya bisa melakukannya?

Ingat! Dalam sebuah form html tidak boleh ada NAME yang sama. Jadi, kita harus

menggunakan nama yang berbeda untuk setiap pertanyaan. Yang saya maksud dengan

tidak boleh, bukan berarti komputer anda bisa rusak.... paling-paling hal ini akan

membingungkan browser, atau program parser (Mailto Formatter adalah program parser),

atau cgi script yang memprosesnya. Paling tidak ini akan membingungkan anda dalam

mengartikan data dari form tersebut.

Berikut ini adalah perintah html untuk 3 pertanyaan tadi. Tag untuk membuat

ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna tersebut tidak ada pengaruhnya terhadap jalannya form.

Siapakah di antara mereka yang merupakan sah abat anda ?

Ricky Mart anto Bar amuli

Siapakah di antara mereka yang akan anda pin j ami uang ?

Edi Hasibu an Tomi Sudar to Baramuli

Siapakah yang anda ijinkan berkencan dengan adik anda ?

Edi Hasib uan

Ricky Martanto

Tomi Sudarto



Baramuli

Misalkan anda memilih seperti berikut....

...maka anda akan mendapatkan hasil pasangan nama/nilai berikut.

Teman?.. Ed=YES

Teman?.. Rick=YES

Teman?.. Tom=YES

Utang?.. . Tom=YES

Utang?.. . BM=YES

Kencan?. . .Ed=YES

Kencan?. . .Tom=YES

Kencan?. . .BM=YES

PULL DOWN LIST DAN SCROLLING LIST

Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda

gunakan sebagai pengganti dan anda harus tambahkan tag penutup. Mari kita coba.

Jangan lupa beri nama.

Kemudian tambahkan beberapa option.

Edi

Ricky

Tomi Reza

Edi



Dan setiap kita beri VALUE.

Edi

Ricky

Tomi

Reza

Edi

Defaultnya adalah pilihan pertama dalam daftar.

Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam

daftar.

Edi

Ricky

Tomi

Reza

Tomi

Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.

Edi

R icky

Tomi

Reza

Arie

Putri

Maria

Edi

Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag .

Edi

Ricky

Tomi

Reza

Arie



Putri

Mar ia

Edi

Ricky Tomi Reza

Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?

Sekali lagi, defaultnya adalah pilihan pertama pada , dan seperti tadi kita dapat mengubahnya dengan memilih yang lain.

Edi

Ricky

Tomi

Reza

Arie

Putri

Maria

Edi

Ricky

Tomi Reza

TEXTAREA

Bentuk masukan lain yang sangat berguna adalah .

Anda menentukan besarnya kotak masukan dengan cara....



ROWS adalah tingginya, COLS adalah lebarnya.

Satu atribut yang cukup membantu dalam adalah WRAP. Mungkin ada

browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.

Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....

DDDDDDDDDDDDDDDDDDDD

DDDDDDDDDDDDDDDDDDDD DD

WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat

panjang yang tidak terputus.

Lakukan hal yang sama dengan ini....



DD

WRAP=PHYSICAL artinya kalimat panjang akan ditampilkan lebih dari satu baris,

dan akan disimpan dalam bentuk itu juga.

Sekarang anda coba yang ini untuk melihat bedanya....


DDDDDDDDDDDDDDD



Ini adalah defaultnya.

WRAP=OFF artinya kalimat panjang tidak akan ditampilkan berganti baris, tetapi akan disimpan dalam bentuk persis seperti yang anda ketikkan. (Cobalah dengan mengetikkan ENTER.)

HIDDEN INPUT

Bentuk lain dari masukan adalah HIDDEN input.

HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak

akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan

diprosesnya.

Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form

html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda

tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web

site untuk menjaring seban

Documents

DESAIN WEB 1 - paulusharsadi.compaulusharsadi.com/wp-content/uploads/2018/04/Modul-Desain-Web-I.pdfdesain web 1 oleh : paulus harsadi, s.kom, m.kom