jajangmn: HTML

BAB 1

Pengenalan Internet

Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. Atau dengan kata lain, internet merupakan kumpulan jaringan (network) komputer yang saling berkomunikasi antara jaringan komputer yang satu dengan yang lain. Jaringan komputer disini sendiri berarti kumpulan dua komputer atau lebih yang saling terhubung. Setiap komputer dan jaringan terhubung secara langsung maupun tidak langsung ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230. Untuk dapat melakukan hubungan komunikasi antar komputer tersebut membutuhkan yang namanya aturan atau protokol. Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing-masing (Unix, Linux, Windows, Mac, dll) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP tersusun atas 4 layer (network access, internet, host-to-host transport, dan application) yang masing-masing memiliki protokolnya sendiri-sendiri.

1.1 Sejarah Internet

Pada awalnya internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika di awal tahun 60-an, melalui proyek yang dinamakan ARPA (Advanced Research Project Agency) yang disebut ARPANET, dimana mereka mendemonstrasikan komunikasi yang dilakukan dengan menggunakan software dan hardware komputer dalam jarak yang sangat jauh. Proyek ARPANET ini merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua itu menjadi bentuk dasar dan menjadi awal dari pengembangan suatu protokol selanjutnya menjadi TCP/IP. ARPANET dibentuk secara khusus oleh empat universitas besar di Amerika, yaitu : Stanford Research University, University of California at Santa Barbara, University of California at Los Angeles, dan University of Utah, dimana mereka membentuk satu jaringan terpadu di tahun 1969, dan secara umum ARPANET diperkenalkan pada tahun 1972. Pada awal tahun 80-an, seluruh jaringan yang tercakup dalam proyek ARPANET di ubah menjadi TCP/IP, karena proyeknya sendiri sudah dihentikan, dan jaringan ARPANET inilah yang merupakan koneksi utama (bakcbone) dari internet.

Proyek percobaan tersebut akhirnya dilanjutkan dan dibiayai oleh NSF (National Science Foundation) suatu lembaga ilmu pengetahuan seperti LIPI di Indonesia. NSF lalu mengubah nama jaringan ARPANET menjadi NSFNET dimana bakcbone-nya memiliki kecepatan tinggi dan dihubungkan ke komputer-komputer yang ada di universitas dan lembaga penelitian yang tersebar di Amerika. Dan pada awal tahun 1990 pemerintah Amerika Serikat memberikan izin ke arah komersial. Jelaslah pada awalnya Internet merupakan media yang digunakan untuk bertukar informasi yang akhirnya pada saat ini menjadi media yang komersial dan digunakan telah mencapai 250 juta orang lebih diseluruh didunia.

1.2 Fasilitas Internet

Saat ini jika orang berbicara tentang internet, yang mereka maksud adalah bagian dari Internet yang disebut World Wide Web (WWW). Pada kenyataannya internet mempunyai banyak bagian yang lain, yaitu :

§ World Wide Web disingkat menjadi web merupakan bagian yang paling menarik dari internet. Melalui web kita bisa mengakses informasi-informasi yang tidak hanya berupa teks, tapi juga berupa gambar, suara, film dan lain-lain. Untuk mengakses web ini dibutuhkan aplikasi untuk dapat menampilkannya yang dinamakan browser. Saat ini telah banyak berbagai macam browser diantaranya adalah Internet Explorer, Opera, Netscape, Mozilla dan lain sebagainya.

§ Electronic Mail disingkat menjadi e-mail adalah surat elektronik yang dikirimkan melalui internet. Dengan fasilitas ini kita bisa mengirim atau menerima e-mail dari pengirim yang berada dimana pun juga selama pengirim tersebut terhubung dengan internet.

§ Telnet merupakan aplikasi remote login internet. Telnet digunakan untuk login ke komputer lain di internet dan mengakses pelayanan umum yang terdapat didalamnya. Telnet memungkinkan pengguna untuk diduduk didepan komputernya yang memiliki akses internet dan dapat mengakses komputer lain yang juga terhubung internet. Dengan telnet selanjutnya kita dapat melakukan aksi mengontrol langsung pada komputer yang dituju melalui perintah / command tertentu.

§ File Transfer Protocol disingkat dengan nama FTP. FTP merupakan aplikasi yang digunakan untuk men-transfer file dari komputer satu ke komputer lain. Proses untuk mengambil file yang berada dikomputer lain dinamakan dengan proses download, sedangkan proses untuk mengirim file dari komputer yang digunakan ke komputer lain dinamakan dengan upload.

Apapun fasilitas yang digunakan, semuanya itu merupakan bagian dari internet. Melalui fasilitas-fasilitas internet itulah kita dapat melakukan berbagai macam komunikasi dan mendapatkan informasi.

1.3 Syarat Terhubung Internet

Untuk dapat terhubung dengan internet tentunya kita harus memiliki komputer. Tapi untuk mengakses internet bukanlah sekedar komputer saja, melainkan kita juga membutuhkan perangkat-perangkat lain yang mendukung koneksi internet :

Modem. Modem adalah perangkat hardware tambahan untuk komputer. Pada dasarnya modem merupakan alat yang digunakan untuk melakukan komunikasi antar komputer melalui kabel telepon. Kata modem itu sendiri berasal dari kata modulasi demodulasi yang berarti proses perubahan sinyal analog menjadi sinyal digital begitu juga sebaliknya.

Internet Service Provider. Untuk bisa bergabung dengan internet, anda harus mempunyai akses dengan cara berlangganan ke penyedia jasa internet atau yang lebih sering disebut dengan Internet Service Provider (ISP). Internet Service Provider adalah perusahaan yang menawarkan pelayanan jasa untuk dapat terhubung dengan internet. Untuk mengakses anda cukup menghubungi pihak ISP melalui komputer dan modem selanjutnya ISP-lah yang akan mengurus hal-hal yang berkaitan untuk dapat terhubung dengan internet.

BAB 2

Pengenalan TCP/IP

Mengapa kita perlu belajar TCP/IP?. Bagi yang ingin bergelut dalam dunia jaringan web maka belajar mengenai TCP/IP merupakan hal yang harus dipelajari. Seperti yang telah dibahas sebelumnya, internet merupakan kumpulan jaringan komputer yang saling berinteraksi antara yang satu dengan yang lain. Bila dua komputer ingin melakukan komunikasi, keduanya tentu saja harus menggunakan bahasa/aturan yang sama. Aturan-aturan inilah yang disebut protokol. Dalam setiap komunikasi yang dilakukan oleh web sebenarnya itu menggunakan protokol tersendiri tergantung aplikasi yang digunakan. Misalnya untuk mengirim mail digunakan protokol SMTP, berhubungan dengan WWW menggunakan HTTP, dan sebagainya. Jadi protokol sebenarnya merupakan aturan dalam melakukan komunikasi dan bukanlah semacam hardware.

Dalam hal ini, TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan protokol yang bersifat open networking. Maksudnya semua penjelasan teknis tentang protokol tersebut secara terbuka diumumkan, karena ada pula mekanisme jaringan yang menyembunyikan detail dari systemnya. Hal ini yang membuat TCP/IP menjadi terkenal.

Adapun keuntungan menggunakan TCP/IP adalah kemudahannya, karena memungkinkan hubungan antara berbagai tipe sistem operasi dan berbagai jenis komputer (Platform). TCP/IP bukanlah protokol tunggal tapi merupakan sekumpulan protokol sehingga lebih tepat disebut sebagai keluarga TCP/IP. Setiap protokol pada TCP/IP memiliki tugas tertentu yang berbeda. Semua protokol tersebut menggunakan protokol primer untuk mengirimkan paket data. Protokol primer tersebut adalah TCP dan IP.

2.1 Istilah-istilah didalam Internet Protocol

Ada beberapa istilah yang sering ditemukan didalam pembicaraan mengenai TCP/IP, yaitu diantaranya :

§ Host atau end-system, Istilah yang digunakan untuk menunjuk sebuah komputer yang memungkinkan penggunanya terhubung ke Internet. Host biasanya berupa individual workstation atau personal computers (PC) dimana tugas dari Host ini biasanya adalah menjalankan aplikasi dan program software server yang berfungsi sebagai user dan pelaksana pelayanan jaringan komunikasi.

§ Router, adalah suatu device yang digunakan sebagai penghubung antara dua network atau lebih.

§ Node, adalah istilah yang diterapkan untuk router dan host.

§ IP (internet protocol) yang berperan dalam pentransmisian paket data dari node ke node. IP mendahului setiap paket data berdasarkan 4 byte (untuk versi IPv4) atau 6 byte (untuk versi Ipv6) alamat tujuan (nomor IP).

§ TCP (transmision transfer protocol) berperan didalam memperbaiki pengiriman data yang benar dari suatu klien ke server. Data dapat hilang di tengah-tengah jaringan. TCP dapat mendeteksi error atau data yang hilang dan kemudian melakukan transmisi ulang sampai data diterima dengan benar dan lengkap.

§ IP address adalah alamat yang diberikan pada jaringan komputer dan peralatan jaringan yang menggunakan protokol TCP/IP. IP address terdiri atas 32 bit angka biner yang dapat dituliskan sebagai empat kelompok angka desimal yang dipisahkan oleh tanda titik seperti 192.168.0.1.

IP address terdiri atas dua bagian yaitu network ID dan host ID, dimana network ID menentukan alamat jaringan komputer, sedangkan host ID menentukan alamat host (komputer, router, dan lain-lain. Oleh sebab itu IP address memberikan alamat lengkap suatu host beserta alamat jaringan di mana host itu berada.

BAB 3

Pengenalan Web

World Wide Web (WWW) atau biasa disebut dengan Web, seperti yang telah dituliskan sebelumnya merupakan aplikasi internet yang berkembang dengan pesat. Informasi Web didistribusikan melalui pendekatan hypertext, yang memungkinkan suatu teks pendek menjadi acuan untuk membuka dokumen yang lain. Dengan pendekatan hypertext ini seseorang dapat memperoleh informasi dengan meloncat dari dokumen yang satu ke dokumen yang lain. Tidak harus secara berurutan. Seperti namanya Web = jaring laba-laba, maka akses web merupakan tidak terbatas hanya pada satu area tapi dia menyebar ke seluruh penjuru dunia tentunya dengan memperhatikan kebutuhan untuk dapat mengaplikasikannya. Web tidak hanya terbatas pada mempublikasikan suatu lembaga tertentu, tapi juga dapat digunakan oleh pihak lain seperti mengiklankan suatu produk atau menjalankan bisnis lewat web.

3.1 Aplikasi Web

Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang dikenal dengan HTML (Hyper Text Markup Language) dan protokol yang digunakan berupa HTTP (Hyper Text Transfer Protocol). HTML merupakan bahasa yang digunakan pada web hanya bersifat statis tanpa memiliki kedinamisan dalam menjalankan suatu proses. Tapi seiring perkembangan teknologi, maka web pun mengalami perkembangan dalam menggunakan bahasa yang ada. Lahirlah bahasa-bahasa lain yang merupakan untuk memperluas kemampuan HTML. Bahasa itu antara lain, ASP, PHP, JSP, Coldfusion dan lain-lain.

Catatan :

World Wide Web (WWW) merupakan bagian dari internet yang telah menjadi fenomena tersendiri dalam dunia komunikasi dan informasi. WWW bekerja berdasarkan tiga mekanisme berikut :

Protokol : suatu kumpulan aturan yang standar mengatur komputer untuk dapat saling berkomunikasi, Hyper Text Transfer Protocol (HTTP) merupakan protokol yang digunakan pada WWW, sehingga komputer yang satu dengan yang lain dapat terhubung dan saling berkomunikasi.

Address : setelah mengetahui protokol yang digunakan maka selanjutnya menggunakan alamat / address daripada suatu web dan address ini dinamakan Url (Uniform Resource Locator). Url merupakan standar dasar pengalamatan pada web.

HTML : HTML ini digunakan untuk membangun web, sehingga data atau informasi dapat diakses

melalui web.

Jadi dapat dikatakan dengan perkembangan bahasa yang dimiliki web, aplikasi web itu sendiri dapat dibagi atas :

§ Web Statis

§ Web Dinamis

Yang dikatakan dengan web statis merupakan web yang dikembangkan dengan hanya berdasarkan bahasa HTML. Kestatisan ini merupakan kelemahan dalam web, karena adanya keharusan untuk terus memelihara, menjaga, mengganti program secara terus-menerus untuk mengikuti bila perubahan yang terjadi. Tetapi kemudian kelemahan ini diatas dengan aplikasi web dinamis. Pengertian web dinamis ini dapat dikatakan web yang memiliki bukan hanya sekedar menampilkan suatu informasi, tapi web tersebut menunjukkan suatu proses, suatu keinteraktifan antara pengguna (user) yang menggunakan aplikasi web tersebut.

Dalam penerapan aplikasi web ini terdapat suatu arsitektur tersendiri

Server

Seperti yang ditunjukkan pada gambar di atas, secara internal, web server berkomunikasi dengan middleware dan middleware inilah yang berhubungan dengan basis data (database). Pengertian web server disini adalah layaknya server (pelayan) yang melayani request (permintaan) client (klien) terhadap atau yang berkaitan dengan web. Bagian dari perangkat lunak Web server itu dapat berupa Apache, IIS (Internet Information Server), Xitami dan lain sebagainya. Middleware merupakan perangkat lunak yang bekerja sama dengan web server dan berfungsi menerjemahkan kode-kode tertentu, menjalankan kode-kode tersebut, dan memungkinkan berinteraksi dengan basis data. Middleware ini pula dapat dikatakan sebagai bahasa server-side, yaitu bahasa yang berjalan di sisi server. Tentang ini akan dibahas pada sub-bab berikutnya.

Catatan :

Bagaimana bagian-bagian Web dapat bekerja?

Web page (halaman web) merupakan bagian atau dokumen web yang berisi dan menyimpan Informasi.

Web server merupakan bagian web yang berisi kumpulan file web page utama (main) tersimpan dalam suatu komputer.

Web client merupakan bagian web yang membaca daripada kumpulan web page yang berasal dari web server.

Web browser merupakan program web yang berada pada web client yang digunakan untuk melihat (view) suatu halaman web.

3.2 Teknologi Web

Seperti yang telah dibahas sebelumnya dalam pembentukan web yang dinamis membutuhkan teknologi web lebih sekedar dari bahasa HTML. Teknologi web ini dalam pengembangan web dinamis dapat terbagi atas dua :

§ Teknolgi yang berjalan pada sisi klien (client-side technology).

§ Teknologi yang berjalan pada sisi server (server-side technology).

3.2.1 Teknologi Web pada Sisi Klien

Teknologi web pada sisi klien merupakan teknologi web perluasan dari sekedar kode-kode HTML berupa suatu bahasa (script) tersendiri dan dalam menjalankan kode-kode ini yang dikembangkan bagian dari HTML merupakan tugas klien. Klienlah yang bertanggung jawab dalam melakukan proses terhadap seluruh kode yang diterima. Kelemahan teknologi web pada sisi klien ini adalah terdapat kemungkinan bahwa kode-kode yang disisipkan pada HTML ini tidak didukung pada fitur web browser pada sisi client yang digunaklan. Sehingga kode-kode tersebut tidak akan berfungsi. Selain itu juga terdapat kelemahan bila sang programmer tidak cermat menggunakan kode-kode tersebut dapat menjadi bumerang bagi keamanan (security) web itu sendiri. Sedangkan kelebihan teknologi web pada sisi klien ini, dapat dikatakan merupakan teknologi web yang cenderung lebih membuat web tersebut menjadi lebih hidup dalam segi animasi. Yang termasuk dalam teknologi web pada sisi klien adalah :

§ Kontrol ActiveX

§ Java Applet

§ Javascript

§ Vbscript

Selain itu terdapat salah satu script pada sisi klien yang juga perluasan dari HTML yaitu CSS (Cascanding Style Sheet) dan dikenal juga sebagai DHTML (Dynamic HTML). Script ini digunakan untuk memformat suatu halaman web atau kumpulan halaman web dengan lebih mudah, ringkas dengan sekali menulis definisi, inisialisasi dapat ditulis secara terpisah dari HTML atau menyatu dengan HTML.

3.2.2 Teknologi Web pada Sisi Server

Teknologi web pada sisi server merupakan pengembangan kode-kode suatu bahasa yang berjalan, diproses pada server. Dengan menggunakan teknologi web pada sisi server maka terdapat kelebihan tersendiri. Penggunaan bahasa teknologi pada sisi server tidaklah tergantung pada browser yang digunakan tidak seperti teknologi pada sisi klien. Bahasa pada sisi server akan selalu berjalan. Selain itu, teknologi pada sisi server ini juga mencegah pembacaan kode yang digunakan dalam proses yang dilakukan. Beberapa contoh teknologi yang berjalan pada sisi server adalah :

§ Common Gateway Interface (CGI)

§ Propietary web Server API

§ Active Server Pages (ASP)

§ Java Servlets dan Java Server Pages (JSP)

§ PHP

Common Gateway Interface (CGI)

Pada awalnya, teknologi umum yang digunakan untuk menyajikan data yang bersifat dinamis di lingkungan web adalah CGI. Pada prinsipnya CGI dapat ditulis dengan menggunakan bahasa apa saja. Namun, yang paling populer adalah Perl. Kelemahan CGI terletak pada penciptaan proses sebanyak dari klien. Jika terjadi jumlah permintaan yang sangat banyak maka akan cenderung melumpuhkan server.

Java Servlets dan Java Server Pages (JSP)

Baik Java Servlets maupun Java Server Pages (JSP) menggunakan bahasa yang dinamakan Java. Pemrograman dengan menggunakan Java mempunyai kelebihan di sisi keamanan yang cukup kuat dibandingkan dengan bahasa pemrograman lain.

PHP

PHP merupakan bahasa pemrograman web yang berjalan pada sisi server dan merupakan bahasa yang awalnya sangat populer di lingkungan Linux. Tapi saat ini PHP digunakan pada berbagai jenis platform.

BAB 4

Pengenalan HTML

Dalam pengembangan web, pertama yang harus dikuasai adalah mengerti akan bahasa (script) web yaitu HTML (Hyper Text Markup Language). HTML adalah script web yang statis dalam artian maksudnya kaku, tidak dinamis dan tidak interaktif. Bila kita ingin membuat web kita menjadi dinamis dan interaktif, kita memerlukan bahasa (script) yang lain, dengan tetap memahami bahwa HTML merupakan pondasi/dasar web.

HTML ini bisa dibuat menggunakan text editor yang sederhana seperti notepad, wordpad atau text editor lain. Karena pada intinya dalam membuat file HTML, kode-kode yang telah kita buat berdasarkan struktur HTML, selanjutnya adalah kita perlu men-save file yang ada ke dalam bentuk format file .(dot)html atau .(dot)htm. Dengan begitu script HTML dapat dibuat di text editor dimana saja. Tapi program atau software yang dibuat khusus untuk membuat web / HTML ada berbagai jenis. Nah, yang paling sering digunakan misalnya : Microsoft Frontpage, Macromedia Dreamweaver dan lain-lain. Yang kedua itu merupakan hasil dari produsen vendor IT yang terkemuka. Sebenarnya masih banyak lagi yang lain dengan menawarkan fasilitas atau fungsi yang berbeda-beda. Program atau software yang dibuat khusus untuk membuat web tersebut memang memberikan kemudahan dibanding kita menggunakan text editor biasa dengan konsekuensi bahwa kita harus mengetik kode-kode yang ada untuk menghasilkan bentuk format suatu tampilan yang diinginkan. Sementara dengan menggunakan program atau software tersebut diberi kemudahan tinggal klik sana klik sini.

Dalam HTML kita akan mengenal bentuk “<” atau “>”. Bentuk ini dalam HTML disebut tag. Dan dalam tag itu ada yang fungsinya sebagai pembuka <……> dan penutup </…..>. Tag penutup dalam HTML ditandai dengan tanda garis miring “/” atau yang disebut slash. Pada prinsipnya dalam HTML, setiap ada perintah pembuka akan ada perintah penutup.

Bentuk umum:

<html>

<head>

<title> Letakkan judul situs di sini </title>

</head>

<body>

Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.

</body>

</html>

Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk mengeceknya Anda double click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi supaya sama, maka sebaiknya digunakan ekstensi .html.

Gambar 4.1 Hasil perintah HTML di browser Internet Explorer (IE).

Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !

<html>

<head>

<title> Latihan Pertamaku </title>

</head>

Paragraf ini akan rata kiri<br>

<p>

br digunakan untuk ganti baris <br><br>

<b>Kalimat ini akan dicetak Bold </b> <br>

<i>Kalimat ini akan dicetak Italic </i> <br>

<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>

Perintah hr digunakan untuk membuat garis

</body>

</html>

Simpan perkerjaan Anda dengan nama latihan_2.html. Jika benar, seharusnya ditampilkan

seperti berikut ini:

Gambar 4.2 Hasil dari latihan_2.html

Perhatikan perintah berikut ini:

P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atribut merupakan perintah yang menyertai tag.

Berikut beberapa perintah HTML dan fungsinya:

Tag	Atribut/Contoh penulisan	Fungsi
<body>	<body bgcolor=”red”> <body bgcolor=”#FF0000”> text=” ... “ link=” ...” vlink=”...” alink=”...” <body background=”D:\Gambar.jpg”>	Background halaman berwarna merah Memberi warna pada teks Warna link Warna link yang sudah dikunjungi Warna link yang aktif Memberi background gambar pada halaman
<a> ... </a>	<a href=”D:\home.html”>Home</a> <a href="http://www.yahoo.com/"> Yahoo!</a> <a href="mailto:name@domain.com"> here</a>to email me!	Membuat hyperlink/link
<img>	<img src="person.jpg" width="50" height="50" border="0" alt="Person" align="left"> <img src=”C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Sunset.jpg>	Memasukkan gambar dengan nama file gambar person.jpg, lebar 50px, tinggi 50px, border 0, rata kiri, dan jika gambar tidak muncul akan keluar teks Person
<font>... /font>	<FONT size="2" color="#FFFF00" face="arial">...</font>	Mengatur font dengan ukuran 2, warna kuning, jenis huruf Arial
<BIG>...</BIG>	<BIG>Contoh </BIG>	Membuat teks Contoh menjadi lebih besar
<SMALL>...</SMALL>	<SMALL> Contoh</SMALL>	Membuat teks Contoh menjadi lebih kecil
<b>...</b>	Teks bold/dicetak lebih tebal
<i>…</i>	Teks italic/miring
<strike>...</strike>	Teks tercoret
<u>...</u>	Teks underlined
<h1>...</h1>	Teks heading 1. Tingkat heading bisa sampai tingkat 6. Semakin besar tingkar heading, maka teks akan dicetak semakin kecil
<hr>	<hr width=”600”> <hr align=”center” size=”5” width=”80%”	Garis dengan lebar 600. Tag <hr> tidak perlu ditutup Garis dengan tinggi 5, lebar 80% dari lebar layar browser dan rata tengah
<p align=”center’> ... </p>	Paragraf rata tengah. Perintah ini juga dapat ditulis dengan tag <center>...</center>
<br>	Tag untuk ganti baris Tag <br> tidak perlu ditutup
<sup>...</sup>	Teks superscript
<sub>...</sub>	Teks subscript
<marquee> .... </marquee>	Teks berjalan. Memiliki atribut direction, behavior dan lain-lain. Contoh: <marquee direction=”right”> ....</marquee> <marquee behavior=”alternate”> ... </marquee>

TABLE

Beberapa perintah penting untuk membuat tabel:

1. <table border=”1”> .... </table> _ merupakan perintah utama dalam pembuatan tabel, tabel dengan ketebalan 1px.

2. <tr> ... </tr> _ tag untuk membuat baris.

3. <td> ... </td> _ tag untuk membuat kolom/cell.

4. colspan _ merge/melebarkan kolom/cell.

5. rowspan _ merge/melebarkan baris.

Atribut tabel dan fungsinya

Tag	Atribut/Contoh penulisan	Fungsi
<table> ... </table>	border=”...”	Ketebalan tabel. Contoh: <table border=”1”>
	align=”...”	Pengaturan tabel (rata tengah, kanan atau kiri)
	width=”...”	Lebar tabel. Bisa diisi dengan satuan pixel atau persen. Contoh: <table width=”80%”> atau <table width=”600”>
	valign=”...”	Perataan secara vertikal dari suatu cell. (top, middle, bottom)
	bordercolor=”...”	Warna border
	bgcolor=”...”	Warna background tabel, baris atau cell

Agar cell dalam tabell kosong, maka dapat digunakan perintah  

Contoh 1:

Tulislah perintah HTML untuk membuat tabel seperti berikut ini:

Jawab:

<html>

<head>

<title> Latihan Table </title>

</head>

<body>

<tr>

</tr>

<td align=”center”>Empat</td>

</table>

</body>

</html>

Contoh 2:

Tulislah perintah HTML untuk membuat tabel seperti berikut ini:

Jawab:

<html>

<head>

<title> Latihan Table Dua </title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Ketiklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yang maksimal ! Pahami setiap perintah/tag HTML-nya !

<html>

<head>

<title> Latihan Pertemuan 2 </title>

</head>

<tr>

<font size="16" face="Arial">SITUSKU.COM </font><br>

<marquee direction="right">Terdepan Dalam Berita dan

Gosip</marquee>

</td>

</tr>

<td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br>

Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari

segala penjuru Indonesia.<br><br>

Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip

artis dan kuliner di Indonesia.

</td>

</tr>

</table>

</body>

</html>

Buatlah halaman situs dengan layout seperti berikut ini:

Ketentuan:

1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll).

2. Jumlah halaman = 3, dengan ketentuan :

a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll.

b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll.

c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda.

3. Setiap halaman harus memuat hyperlink/link.

4. Halaman Gallery wajib memuat gambar-gambar.

5. Usahakan untuk menambahkan link-image pada halaman Gallery.

LlST ITEM

List item merupakan salah tag HTML yang digunakan untuk membuat proses pengurutan secara otomatis. Dalam Ms. Office biasanya dikenal dengan istilah bullet dan numbering, tentunya Anda sudah tidak asing dengan istilah ini.

List item dalam HTML dituliskan sebagai berikut:

<li> teks </li>

Dua jenis list item yang sering digunakan dalam HTML adalah

1. Ordered List.

2. Unordered List.

Ordered List (List Terurut)

Merupakan tag HTML yang digunakan untuk membuat proses pengurutan menggunakan angka atau

huruf. Dalam Ms. Office dikenal dengan numbering. Cara penulisan ordered list:

<ol type=”.....”> list entries </ol>

Type dapat diisi dengan:

A ® A, B, C, ...

a ® a, b, c, ...

I ® I, II, III, ...

i ® i, ii, iii, ...

1 ® 1, 2, 3, ...

Secara default, type ordered list yang digunakan adalah pengurutan menggunakan angka 1.

Contoh:

Ketiklah perintah-perintah HTML berikut kemudian amati hasilnya !

<html>

<head>

<title> Ordered List </title>

</head>

<body>

<li> Jeruk </li>

<li> Nanas </li>

<li> Melon </li>

<li> Jambu </li>

</ol>

</body>

</html>

Simpan file Anda dengan nama: list_1.html

Unordered List (List Tidak Terurut)

Merupakan tag HTML yang digunakan untuk membuat list tidak terurut menggunakan simbol. Dalam Ms. Office dikenal dengan bullets. Cara penulisan unordered list:

<ul type=”.....”> list entries </ul>

Type dapat diisi dengan:

Disc ® ●

Circle ® ○

Square ® ■

Secara default, type unordered list yang digunakan adalah pengurutan menggunakan disc (untuk normalnya).

Contoh:

Ketiklah perintah-perintah HTML berikut kemudian amati hasilnya !

<html>

<head>

<title> Unordered List </title>

</head>

<body>

<li> Es Campur </li>

<li> Es Jeruk </li>

<li> Es Nanas </li>

</ul>

</body>

</html>

Simpan file Anda dengan nama: list_2.html

LATIHAN LIST ITEM

A. Ketiklah perintah-perintah HTML-nya agar diperoleh tampilan seperti berikut:

Siswa dan Hobbinya:

1. Hobbi Riska Anjana:

· Membaca Komik

· Nonton Film

2. Hobbi Cinta:

§ Menyanyi:

a. Lagu Campursari

b. Lagu Pop

§ Shoping

3. Hobbi Siska:

o Menari

o Memasak

Simpan file Anda dengan nama: list_3.html

B. Ketiklah perintah-perintah HTML-nya agar diperoleh tampilan seperti berikut. Buatlah tampilannya semenarik mungkin. Simpan file Anda dengan nama Utama_List.html

FORM

Form adalah salah satu fitur HTML yang digunakan untuk menerima input dari pengunjung website kita.Dengan Form kita dapat berinteraksi langsung dengan pengunjung, misalnya menerima komentar mereka, membuat pooling pertanyaan, membuat registrasi online, serta aneka kegunaan lainnya. Namun hingga saat ini HTML belumlah mendukung interface yang memungkinkan Form bekerja sesuai fungsinya. Form baru bisa bekerja jika kita menggabungkannya dengan bahasa pemrograman lainnya yang mendukung CGI (Common Gateway Interface). Bahasa pemrograman yang telah mendukung CGI misalnya : ASP, Perl, JAVA, Python, JSP, PHP, C/C++, dan Visual Basic. Untuk Workshop Web Design ini CGI yang akan diperkenalkan adalah PHP. Untuk membuat form diperlukan juga tag <INPUT> yang terletak diantara <FORM> dan </FORM>.

Contoh :

<b>Masukan Nama Anda :

<br>Isi Pesan Anda :<br>

</b>

</font>

</form>

Setelah di-save dan dilihat lewat browser, maka tampilan tag tersebut adalah seperti berikut ini :

Tag <INPUT> memiliki atribut TYPE. Berikut pilihan dari atribut TYPE :

TYPE	Keterangan
text	Masukan berupa teks
password	Masukan berupa password, terlihat karakter tertentu
checkbox	Masukan berupa pilihan, pilihan bisa lebih dari satu
drop down	Menu yang dipilih akan ditampilkan vertikal
radio	Masukan berupa pilihan, pilihan hanya satu
submit	Tombol untuk menerima seluruh masukan
reset	Tombol untuk membatalkan seluruh masukan
file	Untuk menerima masukan berupa file
image	Mirip submit, untuk masukan berupa gambar yang dapat di klik
button	Membuat tombol

Untuk tag <INPUT> yang atribut TYPE-nya text memiliki atribut lainnya yaitu:

1. NAME ® menamai kotak.

2. VALUE ® menandai atau menampung teks.

3. SIZE ® mengatur ukuran teks pada kotak.

4. MAXLENGTH ® menentukan panjang maksimum teks.

Contoh:

Ketiklah perintah-perintah HTML berikut kemudian amati hasilnya !

<html>

<head>

</head>

<body>

<form>

Nama : <input type="text" name="teks1"> <br><br>

Kelas: <input type="text" name="teks2" maxlength="2"> <br><br>

No : <input type="text" name="teks3" value="10"> <br><br>

Hobby: <input type="text" name="teks4" size="8"> <br><br>

Password: <input type="password" name="teks5">

</form>

</body>

</html>

Simpan file Anda dengan nama: form_1.html

Contoh:

Ketiklah perintah-perintah HTML berikut kemudian amati hasilnya !

<html>

<head>

</head>

<body>

Nama-nama Guruku: <br><br>

<input type="checkbox" name="c1"> Pak Samino <br>

<input type="checkbox" name="c1" Checked> Pak Arifin <br>

<input type="checkbox" name="c1"> Pak Maryono <br>

<input type="checkbox" name="c1"> Bu Gandhi <br><br>

Pelajaran favoritku: <br><br>

<input type="radio" name="r1"> Matematika <br>

<input type="radio" name="r1" checked> Fisika <br>

<input type="radio" name="r1"> Kimia <br>

<input type="radio" name="r1"> Biologi <br>

<input type="radio" name="r1"> Sejarah <br><br>

Situs Pilihanku: <br><br>

<option> Detik.Com </option>

<option selected> Kapanlagi.Com </option>

<option> Kickandy.Com </option>

<option> Friendster.Com </option>

<option> Debritto.Net </option>

</select> <br><br>

Silahkan tuliskan komentar Anda di bawah ini: <br><br>

Masukkan komentar di sini !!!

</textarea> <br><br>

</form>

</body>

</html>

Simpan file Anda dengan nama: form_2.html

Beberapa perintah yang harus Anda ketahui:

<form name="data" action="form_1.html" method="post">

Atribut name digunakan untuk memberi nama form. Atribut action digunakan untuk menentukan alamat web tujuan. Method, digunakan untuk menentukan metode pengiriman. Ada dua metode pengiriman, yaitu

get dan post.

<textarea name="kesan" rows="5" cols="20">

Tag <textarea> digunakan untuk membuat masukan beberapa baris teks. Atribut rows dan cols digunakan untuk menentukan banyaknya baris dan kolom.

<input type="radio" name="r1" checked> Fisika <br>

Keterangan checked digunakan untuk membuat pilihan Fisika terpilih dari awal otomatis.

<option selected> Kapanlagi.Com </option>

Keterangan selected digunakan untuk membuat pilihan Kapanlagi.Com terpilih dari awal otomatis.

LATIHAN FORM

Tulislah script HTML agar diperoleh tampilan-tampilan seperti berikut ini:

Simpan file Anda dengan nama: form_3.html

Simpan file Anda dengan nama: form_4.html

3. Ketiklah perintah-perintah HTML-nya agar diperoleh tampilan seperti berikut. Buatlah tampilannya semenarik mungkin.

Simpan file Anda dengan nama: Utama_Form.html

ADOBE DREAMWEAVER CS3 TUTORIAL

I. GETTING S TARTED

First, you need to decide what you want to put on your website: images, files, videos, PDF documents, PowerPoint presentations, etc. To create and maintain an organized website, you need to establish a hierarchy of folders that contain all of the components that make up your site. This folder is called your Local root folder. It is important because this is where Dreamweaver looks for all your files.

To create a root folder, follow these steps:

1. Create a new folder on your desktop or personal partition. On the desktop, right-click and choose New Folder.

2. Give the folder a brief, but descriptive name. Do not use capital letters, spaces, or special characters when naming folders and files for your website. All of your pages will be saved within this folder.

3. Open the folder, and create another new folder inside. Name this folder images. Put all of your images, buttons, movie files, etc. inside the images folder.

4. Make sure that all your pages and images are saved in your root folder, or they will not appear the next time your website is opened.

5. Now you are ready to launch Dreamweaver CS3. Click the Dreamweaver CS3 icon from Start à Programs à Macromedia Dreamweaver CS3. Or use the Adobe Dreamweaver CS3 Icon on your desktop.

N.B: The most important step you need to take every time you launch Dreamweaver CS3 is to define your Local Info. The "local root folder" is the name for the folder where you are storing all of your website’s contents.

II. CREATING A WEBPAGE

To create a Web page, follow these guidelines:

1. Choose a page to be the homepage of your Web site. This will be the first page that users encounter when they visit your site. Save this file to your local root folder as home.html. Naming the homepage home.html tells the Web browser that this is the first page it should open when someone visits your site.

2. To add a new page go to File à New and choose a basic HTML page. Save this page by clicking File à Save As. Name the first page home.html

3. After your homepage is created, you can use this page as a template layout for all the other pages in your site. Simply hit Save As and name the file whatever you wish, but be sure to keep the name simple, for example CV.html, resume.html, pictures. etc. Remember not to use capital letters or spaces when naming files; this will make it easier for web browsers to find your files.

4. To save the pages of your site simply click File > Save for each page. Make sure your homepage is named home.html, and save all of your files in the folder you chose when you defined your site, i.e. in your local root folder.

NOTE: This process will save your files to your local site. You can transfer each file separately to the remote site or transfer the entire site once you have finished working on it.

III. DESIGN AND LAYOUT

Even if you are creating only a simple Web site, you should begin by sketching out the layout of your site. Decide where you want titles, images, navigation buttons, and text to appear on the screen. Most web sites have the same design characteristics on every page. For example, Web site titles are usually in the top left or top center, while navigation buttons usually appear vertically on the left or horizontally below the title. In addition to sketching out a layout for each page, you should determine how many pages you will need for the Web site. Thorough planning is essential to good web design. In order to get your text, navigation buttons, and images to appear where you want them on the Web page; you need to use tables to format content of each page. Everything on

each page of your Web site should fit within one large table.

Using your layout sketches, you can determine what your table needs to look like.

Fig. 1 shows a simple layout sketch.

Fig. 2 shows the same layout, with table borders drawn in.

IV. INSERTING AND USING TABLES

A. WHY USE TABLES

Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user's window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

B. HOW TO INSERT A TABLE

To insert a table, follow these steps:

1. In the main menu, click Insert à Table. (See Fig. 3)

2. Insert the amount of Table Rows and Columns

3. Set Table width to between 600 and 800 pixels.

4. Set Border thickness. To have a visible border type in 1 or higher, to have no border type in 0.

5. Cell padding adds room inside of a cell. Enter 0 for no space or a number to Increase the space.

6. Cell spacing adds space between cells. Enter 0 for no space or a number to Increase the space.

7. Click OK.

C. PROPERTIES OF TABLES

Properties of a Table Itself

If you click on one of the table borders, you can view your table properties in the Properties window.

In the top section of this window (Fig.4) you can:

• name your table;

• change the number of rows and columns in the table;

• change the width and height of the table,

· Change the Cell Pad: this is the number of pixels that come between the border of cells and the content of cells.

· Change the Cell Space: this is the number of pixels that come between the borders of each cell.

· Change the alignment: this is the position of the table on the left or right edge, or in the center of the page.

· Change the border: this is the number of pixels that make up the thickness of cell borders.

In the bottom section of this window (Fig. 4 above) you can:

• Clear and convert table widths and heights.

• Change the background color of the whole table.

• Insert a background image for the whole table.

• Change the border color.

Properties of Cells Inside Table

Once the properties of the table have been set, you can also adjust the properties of individual cells within the table by clicking inside the cell (Fig.5).

In the top section of this window you can format the text inside the table cell.

In the bottom section of this window you can:

• Change the alignment of the content horizontally and vertically.

• Change the width and the height of the cell

• Use Wrap.

• Insert Header

• Insert a background image for the single cell.

• Change the background color for the single cell.

• Change the border color for the single cell.

D. CREATING YOUR DESIRED LAYOUT

To create the traditional layout, follow the directions below:

1. Insert a table with 3 rows and 3 columns that takes up 100% of the page.

2. Highlight the first row of cells by placing your cursor in either far left or far right cell and dragging to the other side.

3. Use the bottom section of the Properties window to merge the cells you have selected (use the button right under the word “Cell”). This section will be used for the title of your page.

4. Highlight and merge the bottom row. This section will be used for information such as your contact info and the date the site was last updated.

5. Highlight and merge the middle and right cells in the middle row. This section will be used for your main content, and the leftover cell will be used for links.

6. Now you can adjust the table by clicking and dragging on the handles to make the table look more like a familiar webpage (if you have problems dragging the handles you can use the Properties window to manually insert the number of pixels or percent of the table for the width and height of the cell).

From here you can insert additional tables into any of the cells you want. This will let you place your text and images exactly where you want them within each section.

V. ADDING DESIGN E LEMENTS

A. ADDING TEXT

To insert text simply click inside a cell and type in your content. When you click ENTER, Dreamweaver automatically adds paragraph spacing. To add a line space, click SHIFT + ENTER.

B. INSERTING IMAGES

To insert an image, follow these steps:

1. Click in the cell where you want the image to appear.

2. Click Insert à Image.

3. Locate the image you want to insert.

NOTE: All of your images should be saved in the "images" folder that you established

when you started.

4. Click Choose to insert the image.

Click on the image to view its properties in the Image Properties Inspector window (Fig. 6).

C. IMAGE PROPERTIES INSPECTOR

The top half of the Image Properties Inspector allows you to:

• Name the image (far left).

• Change the size of the image (W & H).

• See where the image file is located (Src).

• Link the image to a file or a site (Link).

• Edit the image (Edit).

D. FORMATTING PAGE PROPERTIES

To change the background color of your page or other overall properties of your website, go to Modify à Page Properties. Here, in the Page Properties window, you can set the default font, text size, text color, and background for all of your pages (Fig.7).

To modify the properties of links, click on the Links tab under Category. Here you can set link font, size, link color, color of active, rollover, and visited links, as well as link style (Fig. 8).

VI. PREVIEWING IN BROWSER

You can preview your Web pages in a browser in many ways:

1. Choose File à Preview in Browser.

2. Hit F12.

3. Click on the world icon located on the toolbar at the top of your page (Fig.1).

VII. CREATING HYPERLINKS

A hyperlink or link, is an object or text that, when clicked, takes the users to another webpage or opens a file. The various types of hyperlinks are explained below.

A. INTERNAL LINKS

Internal links are used to connect users to other pages within the same website. Before linking to other pages, you must make sure that the other pages are saved in your local root folder and contain the file extension .html.

To create an internal link, follow these steps:

1. Select the text or image you would like to make a hyperlink.

2. Click on the small folder next to the Link field in the Properties Inspector 3 (Fig 9 and Fig. 10). Browse through the files, and select the page you would like to link.

3. Click OK.

B. EXTERNAL LINKS

External links are used to connect the users to pages from other websites.

To create an external link, do the following:

1. Select a text or an image you want to make a hyperlink.

2. Click the cursor inside of the link text field in the Properties Inspector.

3. Type the complete URL (web address) of the website you want to link (e.g., http://www.aui.ma).

4. Select the Target type as -blank.

NOTE: If you select the Target type as -blank, it will open the link in a new window while keeping your website open in another window. Doing this is good practice because it will prevent the user from being frustrated and leaving your site.

C. BASIC EMAIL LINK

E-mail links are links that will automatically open the user's default email program with a blank e-mail addressed to the specified e-mail link. There are two ways to create an email link. You can:

1. Click on the Insert menu at the top of the screen and select Email Link.

2. Type in text for the hyperlink name or label, for example: My Email or Click here to email me (Fig.11).

3. Type in your email address, i.e. where the email is to be sent.

4. Click OK.

VIII. A FEW TIPS ON WEB DESGN

(From Designing for the Web: A tutorial by Mike Markel)

1. Aim for simplicity

2. Make the text easy to read and understand

3. Create informative headers and footers

4. Help readers navigate the site

5. Create clear, graceful links

6. Avoid web clichés

7. Include extra features your readers might need

IX. TESTING YOUR WEBSITE

Once all your pages are competed, you need to test your site to make sure that all pages are functional. The following tips can help you avoid unwanted surprises:

1. When creating pages, work with a 1024 by 768 screen resolution

2. Test your website on different browsers (e.g., Microsoft Internet Explorer, Netscape Navigator)

3. Test your website using a variety of screen sizes since the size of the monitor can dramatically alter the appearance of your site.

4. Testing should be done frequently in order to fix broken links and detect other glitches.

jajangmn

Sabtu, 19 Januari 2013

HTML

A. WHY USE TABLES

Properties of a Table Itself

Tidak ada komentar:

Posting Komentar

Mengenai Saya